Monday, February 22, 2010

Video: Keyframe Animations in Flex 4

Keyframe Animation in Flex 4, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This episode covers the new Keyframe capability of Flex 4 effects. Previously, all Flex effects were based on simple from/to values: Move a button from xFrom,yFrom to xTo,yTo, Resize a panel from its current width to widthTo, etc. And in fact most of the effects in Flex 4 still work this way: Move, Resize, Fade, and most other effects take just simple from/to/by values and animate the properties between these endpoints.

But in Flex 4, there's a new effect that can do more than this: it's the new Animate superclass of the Flex 4 effects. This effect, which is kind of like an extended version of the old AnimateProperty class with the ability to handle multiple properties or styles instead of just one, doesn't just take from/to/by information for the properties. Instead, it takes MotionPath objects which specify a simple 2-endpoint set of values. But a MotionPath can also specify an arbitrarily large set of Keyframe objects, which are key/value pairs that the property will pass through over the duration of the animation. Now, instead of having an animation that simply goes from one value to another, you can have an animation that goes through several intervals defined by these keyframes.

The animations during each of these intervals is still linear; the effects calculate the in-between values on a linear path between the interval endpoint values, just like we do for the simpler 2-endpoint effects. I'd like to see curved motion paths eventually, but that didn't make it into Flex 4. But in the meantime, you can at least specify more complex multi-step paths for the animation to take using motion paths and these new keyframe objects.

Here's the video:

Here is the demo application:

And here is the source code.

Here's where you can find CodeDependent on iTunes.

And here's where you can find CodeDependent on YouTube.



Viv said...

Wooo!!!! Still not Thursday yet but already a tutorial by Chet!!!

swidnikk said...

Say I want to first resize the width of that button and then height. Is this how I might specify a keyframe used between states?

Chet Haase said...

@swidnikk: No, not quite. A keyframe sequence is part of a single MotionPath object, which operates only on one property. Keyframes might be used if, instead, you wanted to make the change in, say, width more complicated than just from-this-to-that. For example, you could change the width by 50, then pause there, then change it by another 50.
I'm not saying that particular example makes sense for your (or anyone's) application, but rather that's the kind of single-property choreography that you could do with keyframes. Make sense?