Saturday, October 17, 2009

Video: Custom Easing in Flex 4 Effects

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

In this show, we see an introduction to the new approach to easing in Flex 4 effects, using the new IEaser interface. "Easing" is a term in Flash and Flex that means changing the way that time is interpolated in animations, to give more interesting and natural movement. In Flex 3, different easing behavior was applied by assigning easing function references to to the "easingFunction" property in effects. This was a powerful and easy-to-use mechanism, but we've changed the approach in Flex 4 to make easing more flexible and also simpler to customize. This video shows how we can write and alter a simple easing implementation to get arbitrary, custom easing behavior.

Here's the video:

Here is the demo application. Note that the real action here is in building the application and playing with the CustomEaser implementation. The demo below is just one iteration of that example, where we are accelerating in with a cubic ease by multiplying the elapsed fraction times itself three times:

And here is the source code.

Finally, here's where you can find the CodeDependent videos on iTunes.

Enjoy.

No comments: