The team blog of the Expression Blend and Design
Previously on the blog I’ve explained how a KeySpline can be used to do animation easing. I also demonstrated a tool for converting an animation curve (in this case a Path drawn in Blend) into an actual animation.
This time let’s look at the new KeySpline editor in Blend 2 and walk through an example of how to visualize and edit your easing graphically. If you want to follow along, create a new project (WPF or Silverlight) and draw a red-filled circular Ellipse at the top of the page to serve as our falling object. Create a new Storyboard, move the playhead to time 1 and move the Ellipse to the bottom of the page and change its Fill to gray. If you preview the Storyboard now, or build and run, you’ll see the ‘ball’ falls at a steady rate and changes color at a steady rate. Now, what if we want the ball to look like it’s falling under gravity (so, speeding up as it falls) and cooling down from red-hot back to gray (so, cools quickly at first, then more slowly).
In Expression Blend 2 you can actually select a keyframe and edit its KeySpline. The KeySpline is the thing that determines how the animated property changes between the previous keyframe and the keyframe you selected. You can think of each keyframe as being a point on a curve. Each keyframe is connected to the one before it by a segment of this curve. So selecting a keyframe then editing its KeySpline is actually editing the shape of the curve between the selected keyframe and the keyframe before that. Even the first keyframe has a curve going from time 0 to the keyframe (a special case of this is when the first keyframe is at time 0, in which case that curve has no size so editing it will have no effect).
Let’s see how to edit the KeySpline to get the acceleration and cooling behavior we want. With the Storyboard still open, go to the object tree and expand your ellipse. Now select the keyframe icon on the RenderTransform row by clicking it once:
In the property inspector you’ll see an Easing category inside which is the KeySpline editor. It’s currently a straight line but you can drag the two yellow control point handles around to change that, or use the number editors below to edit the coordinate values more precisely. Make the KeySpline look like the picture below.
Across the top of the KeySpline editor is a little graphic that serves as a reminder for where your selected keyframe lives on the curve you’re editing. I’ve put a red circle around the gray graphic representing your selected keyframe. Remember, the selected keyframe is the one at the end of the curve segment you’re editing. The previous keyframe (or the value at time 0 if you’ve selected the first keyframe) is represented by the lighter keyframe icon graphic at the top-left. So this curve is showing that the animation from the value at time 0 to the value of your selected keyframe makes very little progress in the first half of its duration but then makes up for that towards the end by changing the value very rapidly. Imagine this behavior with respect to the position of a falling ball and then preview your Storyboard, or build and run, to see the new curve in action.
For the cooling effect, you want a differently shaped curve. This time you’re animating from Red to Gray but you want to progress along this animation rapidly at first then slowing down. So select the keyframe on the Fill row and make its KeySpline look like this:
You can create more interesting curves, including inflection points, by moving both control points (the yellow handles). Have fun and please keep the Blend feedback coming.
Even though we just shipped Expression Blend and Design 2, we are already busy planning what to do for future releases. To better help us with our planning, we'd like to hear from you.
What are some things that you would like to see in Blend and Design? What are some of the things that you wish were done differently? Also, what are some of the things in our products that you like?
Let us know by posting in the comments below! We take your feedback very seriously, and your input goes a long way in helping us improve our products.
(On a related note, based on feedback from many of you, this blog has been restyled. A big thanks to Tim Sneath for the help.)
Ever since we released Deep Zoom Composer during MIX, there has been a ton of great feedback you have all sent us on what you liked and what you would like to see improved in future versions. To give you a sneak peek at where we are currently, we're releasing an updated version of Deep Zoom Composer for you all to play with:
Before installing this version, please uninstall earlier versions of Deep Zoom Composer. All of your older projects should still work, so don't worry! Once you have it installed, besides a ton of changes under the hood to make creating your Deep Zoom content faster and more memory-efficient, some of the bigger features that you will immediately notice are the following:
The single biggest thing we heard consistently from all of you was to make exporting better. In the earlier version, all we did was just output the image tree. To figure out where you had to go from there, our Composer didn't help. Luckily, you had quality blog postings from individuals such as Scott Hanselman, Pete Blois, Wilfred Pinto, Jaime Rodriguez, and others who helped answer the question "Where to go from here?" In this version of Deep Zoom Composer, we try to make that easier for you by outputting a working Silverlight 2 project along with your image tiles:
Now, you no longer have to worry about what to do with these bizarre cutouts of images that you get as your output, and we even provide all of the mousewheel, pan, zoom, and keyboard functionality that you otherwise had to write yourself!
Arranging images can be a time-consuming task. To make it easier for you to do that, we've added snapping and guidelines that appear when you are dragging either a single or a group of images around:
We also took care of the various filling/scaling issues you would have encountered when zooming in on images on the design surface. In case you didn't know, Deep Zoom Composer actually uses a variation of the tiling technology from Deep Zoom on the design surface itself, so we would be swapping images in an out at a frantic pace if you happened to be zooming and panning around while composing your images. We still do that....but it just feels more natural without the distortions you saw earlier.
When exporting collections, Deep Zoom Composer would often misrepresent the position of your arrangements when you actually previewed in our browser. Thanks to the Live Labs team (Lutz, Dan, Avi, and Rado), they were able to pinpoint the problem and fix it for us in this release. You no longer have to worry about what you see in Deep Zoom Composer not being what you saw in the browser.
There will be times when you would need more help than what the application provided. We've tried to call out both our support forum and this blog throughout the application so that you can quickly get unblocked on any issues you run into:
In the past, all of these questions have been handled directly on the blog. For archival purposes, it would be great if you could post those questions on the forums instead. Scanning through several posts with 50+ blog comments for solutions probably isn't fun, and we don't want your question to get lost and go unanswered.
There are still a lot of great features that we will be adding in the future, so if you have any requests, complaints, wishes, etc., please feel free to let us know by posting a comment here or in our Deep Zoom forum on the Expression Forums.
Cheers! Celso, Janete, Kirupa
In case you missed our announcements and 3rd party coverage, we shipped Expression Studio 2 yesterday! You can download trial versions of all our applications by visiting our Downloads Page!
This post will focus more on Expression Blend and Design, and since Expression Blend ships in its own box as well, check out our cool box design:
Our version 2 release comes around just a year after we shipped version 1, and there have been a slew of new features that we’ve added. Many of you have already played with them through the various previews we’ve released over the past year, but just for fun, I’ve tried to list the ones, in no particular order, that come to my mind:
Support for Visual Studio 2008 and WPF 3.5 Silverlight 1.0 Support with built-in JS Editor UI Refinements (More incremental search, ability to close panels, etc.) Storyboard Picker for Managing your Animations Vertex and Clipping Path Animations KeySpline Editor for Editing Ease In/Out SplitView for Seeing your Design as well as the XAML Importing from Expression Design Font Subsetting Design-time Sizing Easier Ways to Incorporate Media New WPF and Silverlight Samples Support for more Object Manipulations (Being able to uniformly scale, resize, and rotate multiple selected elements.) Breadcrumb Bar Making and Editing User Controls from the Design Surface Being able to export Slices in Expression Design
Support for Visual Studio 2008 and WPF 3.5
Silverlight 1.0 Support with built-in JS Editor
UI Refinements (More incremental search, ability to close panels, etc.)
Storyboard Picker for Managing your Animations
Vertex and Clipping Path Animations
KeySpline Editor for Editing Ease In/Out
SplitView for Seeing your Design as well as the XAML
Importing from Expression Design
Easier Ways to Incorporate Media
New WPF and Silverlight Samples
Support for more Object Manipulations (Being able to uniformly scale, resize, and rotate multiple selected elements.)
Making and Editing User Controls from the Design Surface
Being able to export Slices in Expression Design
I’m sure there are some that I’ve missed, so be sure to check out the higher-level feature overviews of Expression Blend 2 and Expression Design 2 from our newly re-designed Expression Studio product site.
What are some of your favorite features? What are some of the features you would like to learn more about?
Cheers! Kirupa :)