Thursday, January 14, 2010

Video: Animating Button State Changes

Animating Button State Changes, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show is a continuation of the previous CodeDependent episode, in which we saw how differences in a component's state can be communicated to the user through visual changes in that state. In this espisode, we see how we can animate some of those visual changes by hacking some simple transitions into the standard Flex 4 button skin. This is a tutorial not only on how to add some simple animations for color and visibility changes, but also how to customize standard Flex components by editing the skin markup.

Here's the video:

Here is the demo application:

And here is the source code.

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

Enjoy.

1 comment:

Tink said...

Heres a silly timeline example of animated button skins in mx, with seamless transitions (i.e. no exiting a transition when a diff state is entered), that might be of interest to others who catch the title of this post.