Adding a transition effect to a component is a great way to provide a subtle yet distinctive feel in your application.

For example, adding a Fade as the rollOverEffect for a component so it gradually fades in when the user moves the mouse over the component.

However this method is not without its faults.

Say you want to add a Fade as the rollOutEffect for the same component so it gradually fades out when the user moves the mouse away from the component.

This will work fine, until the Fade effects come into contact with one another.

The problem is if the rollOutEffect fires before the rollOverEffect finishes (or vice-versa) Flex will end the unfinished effect and play the new one. The result is a jagged transition.

Luckily, this is something we can easily correct.

First step? Ignore rollOverEffect and rollOutEffect. They aren’t doing us any good. Define custom event handlers for rollOver and rollOut instead.

Next, configure your Fade effects to work together. Instead of adjusting the alpha from min to max (roll over) and max to min (roll out), adjust it from the current value to max and the current value to min.

While seemingly innocuous, this is the key to a smooth transition.

The last step is to check if the effects are already playing in your event handlers. In the roll out event handler, check if the fade in effect is playing and if so, stop it before playing the fade out effect. Implement the roll over event handler in a similar manner.

In the end you should end up with something like this:

<mx:Fade id="fadeIn"
    duration="100" startDelay="0"
    alphaFrom="{this.alpha}" alphaTo="1.0" />

<mx:Fade id="fadeOut"
    duration="100" startDelay="0"
    alphaFrom="{this.alpha}" alphaTo="0.3" />

<mx:Script>
    <![CDATA[
        private function onRollOver (event : MouseEvent) : void
        {
            if (fadeOut.isPlaying)
            {
                fadeOut.stop ();
            }

            fadeIn.play ([this]);
        }

        private function onRollOut (event : MouseEvent) : void
        {
            if (fadeIn.isPlaying)
            {
                fadeIn.stop ();
            }

            fadeOut.play ([this]);
        }
    ]]>
</mx:Script>


Since these transitions take the current state into consideration, they will always smoothly animate from the current state to their target state.

And that, my friends, is how we do it in the NBA.