Flex 4 Cookbook

Chapter 11. Animations and Effects

Effects, transitions, and animations are important elements of Flex applications, and important contributors to the “Rich” in the popular moniker Rich Internet Application (RIA). Understanding effects and the effect framework in Flex is important not only so you can design and implement element effects that users will see, but also so you can avoid users seeing things they shouldn’t—those artifacts of incorrectly implemented effects, application lags, and inefficient garbage collection. To help you, Flex 4 offers a new way of creating what were previously called Tweens: the Animate class.

At the core of the way Flex creates animations is a system of timers and callbacks that are not all that different conceptually from this:

var timer:Timer = new Timer(100, 0);
timer.addEventListener(TimerEvent.TIMER, performEffect);
timer.start();

private function performEffect(event:Event):void {
    // effect implementation
}

Of course, in reality there’s more to the effect framework than simply allowing the developer to create an instance of an Animation class and call a play() method on it. An effect has two distinct elements: the EffectInstance or AnimateInstance class (which contains information about the effect, what it should do, and what elements it will affect), and the Animate or Effect class (which acts as a factory, generating the effect, starting it, and deleting it when it has finished).

The playing of an effect consists of four distinct actions. First, ...