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.

Enjoy.