State Transitions

I've put together a little example of how you can use transitions to animate between the states in your application component.

There are many websites explaining Flex 3 states as well as the new and improved Flex 4 states.

If you don't already use states, I would highly recommend you become familiar with them. They are very powerful, and make it much easier to create complex user interfaces.

Transitions are effects that are played when your component changes from one state to another state. They are a nice way to smoothly animate changing content, for example fading out content being hidden, or resizing containers that have new elements being added.

In the example below, I've created an application that has 5 states:

• Normal - default state
• Resize - resizes the main panel using a Resize effect
• Fade - fades in/out a Label using a Fade effect
• AnimateColor - animates a gradient color using the AnimateColor effect
• Easing - uses a Bounce easer with a Move transition

I've noticed that certain effects like Resize don't work properly with other effects like Fade. I haven't spent the time to try and figure out why not.

Anyway, here is the example. Right click to view source.