Stretch and Squash in Flex 4, the next and episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.
This show is a continuation of the episode (can you guess?) Stretch and Squash in Flex 3, in which we saw how to use Flex 3 to create deforming bouncing effects for more life-like motion with Flex 3. This time, we'll see how the same effects can be created in Flex 4 (with less code!).
Here's the video:
Here is the demo application:
And here is the source code. Note that the code has changed to match the current APIs (we had some class/package/namespace renames along the way - Flex 4 is still in Beta, after all...).
Have a (squashy) ball.
3 comments:
Hi Chet! Very interesting thanks - and especially for me after creating similar(ish) animation structures for effectgenerator.com.
I notice it's quite different from Flash Catalyst animations (i.e. states, transitions and timelines), so it'd be great to see a post explaining the two different directions and if/how they are being unified. Also, is there going to be a GUI for this sort of thing in FB?
Ed
Hi ed,
I think there's some confusion - Catalyst uses *exactly* these mechanisms to do its animations. In fact, Catalyst was one of the drivers for the whole new effects architecture in Flex 4.
The only difference between this example and Catalyst is that Catalyst, for the most part, uses states and transitions, whereas the bouncing ball is achieved by manually playing an effect. Transitions are just a way to automatically play an animation (and assign parameters to it from state values) when the currentState changes. But the inner effects are exactly those that can be manually played.
Perhaps in a future video I'll do something with Catalyst and/or transitions and states, to make the connection clearer. Thanks for the idea.
I am surprised that embed version of video player to play the video hosted at tv.adobe.com does not feature "Full-screen" enabling button (I am on Flash Player 10 if this matters).
Here is the direct link to the same video at Adobe TV web-site, where you can use "Full-Screen" view for your advantage to study the source code.
http://tv.adobe.com/#vi+f16095v1010
Post a Comment