It is always fun when you discover new product features that you never knew existed. This happened to me last week as I was looking into Flex 3 skinning. It turns out that not only can you use a single class with states to define component skin states (like "up", "down", and "over" on a Button) but transitions also work with these skins! This feature has been noticed by [others][1] as well. But I figured I'd blog about it anyways - because it's so cool!

Here is a quick demo:
<iframe src="/SkinTransitions/SkinTransitions.html" width="400" height="100" frameborder="0">
</iframe>  

I used [Darron Schall's "AnimateColor" effect][2] to transition between colors. And I used [Degrafa][3] to draw the shapes inside the skin.

It's super easy to add these types of transitions to your application! Right-click on the application to see the source code.

Have fun making your Flex apps even sexier!

 [1]: http://www.asfusion.com/blog/entry/stateful-skins-in-flex-3e-color-transitions-in-buttons-now-possible
 [2]: http://www.darronschall.com/weblog/archives/000254.cfm
 [3]: http://degrafa.com/