Aborting Flex 2 Effects

The effect classes in Flex 2 have a wonderful new API. In particular, you can pause and rewind the effects as well as access them by id. They do not, however, act like I’d expect when you abort them. For example, I’m building a scrubbable component. You can scroll the slider, and the View it’s attached too will show and hide objects over time, like markers on a map that are date specific.

I want these markers to fade in when they appear, and fade out when they are no longer relevant to the date range. The problem I kept running into is that the effects wouldn’t either finish all the way, or wouldn’t play what I told them too correctly and would just blink in without fading in. In this case, the Fade effect wasn’t always fading correctly. It is a race condition you can easily repeat. You basically just tell one effect to fade something out from 1 alpha to 0 alpha, and another to fade in from alpha 0 to alpha 1. If you call the disappear method before the appear method’s fade effect is done, you can see it’ll either interrupt it and not fade out, or just flash. Really gross looking.

I implemented 2 methods, appear and disappear. It seems that calling fade.stop() is not enough. I tried fade.end(), but that didn’t work either. I also removed the event listener for the end, and then null’d the Fade effect property before creating the new one that did the opposite, but to no avail. I’m guessing that because garbage collection doesn’t run immediately even if I told the effect to stop and removed all pointers to it, the effect still held onto the applicable properties of the UIComponent it was affecting. I’m sure I could open up the classes and look, but I don’t really have time; on a tight deadline. Best excuse I have, anyway.

Suffice it to say, fade.pause() did the trick. For some reason, this particular method, as opposed to stop, or end, allows another effect to override the properties the original one had set, and continue on. Seems trivial, but to get fast, good looking transitions and visuals, this took me an hour to figure out. Blogging so others don’t have to spend that time.

Example code:

public override function disappear():void
{
        if(__fadeIn != null)
        {
                __fadeIn.removeEventListener(EffectEvent.EFFECT_END, onFadeInDone);
                __fadeIn.pause(); // magic method!
                __fadeIn = null;
        }
        
        if(__fadeOut == null)
        {
                __fadeOut = new Fade(this);
                __fadeOut.duration = fadeOutSpeed;
                __fadeOut.alphaFrom = alpha;
                __fadeOut.alphaTo = 0;
                __fadeOut.addEventListener(EffectEvent.EFFECT_END, onFadeOutDone);
                __fadeOut.play();
        }
}