Using Animation

The Animation utility offers two ways to create and work with animations. The first, a static method name create() offers a simply way to quickly start an animation on a target object. The second way to start animations is to instantiate an Animation instance directly and handle updates with event handlers for any of several events during an Animation object's lifecycle.

• Animation.create()
• Using Animation and AnimationEvent

Animation.create()

Similar to other "tween" libraries, the Animation utility has a quickstart set-it-and-forget-it method for creating new animations. Animation.create() has a simple signature to set a few specific properties and get something animated. In the following example, we'll display a short message on the stage using animations.

Only three arguments are needed for the Animation.create() method. This first specifies the target, or what object will be animated. The second argument is the number of milliseconds the animation will run. One thousand milliseconds is equal to one second. The final required argument is an Object that specifies what properties of the target to animate and what their final values will be at the end of the animation. In this case, we're animating a display object's alpha, scaleX, scaleY, x, and y properties. The animation starts with the current values of these properties.

var letterAnimation:Animation = Animation.create(letter, 400, {alpha: 1, scaleX: 1, scaleY: 1, x: letterBounds.x, y: letterBounds.y}); //set an easing equation to ease out the animation letterAnimation.easingFunction = Back.easeOut;

The create() method returns an instance of the Animation class, to which we can make additional changes. In this case, we pass it an easing function so that the animation slows to a stop near the end.

Visit the Animation Examples page and download the Animate Text example to view the full source code for this cool effect.

Using Animation and AnimationEvent

Sometimes you need more control over an animation, and the simple create() method call doesn't completely fit your needs. In the Light Sequence Animation example, a ColorTransform is used to brighten each "light" in sequence. You can't change a display object's colorTransform property by setting redOffset or any of its other values directly. Instead, you need to completely replace the value of the colorTransform property. To do this, we need to listen for the animation's events.

The AnimationEvent.UPDATE event gets fired every time the animation changes its current value(s). We'll use this event to pass the ColorTransform to our display object so that it appears to get brighter over time. The AnimationEvent.COMPLETE gets fired once the animation is finished. We'll use this event to clean everything up.

//over the course of 150 millisconds, update the redOffset, greenOffset, and blueOffset values of the color transform. this._transformAnimation = Animation.create(this._colorTransform, 150, {redOffset: 255, greenOffset: 255, blueOffset: 150}); //listen for update and complete events so that we can manually update the Light's tranform this._transformAnimation.addEventListener(AnimationEvent.UPDATE, transformUpdateHandler); this._transformAnimation.addEventListener(AnimationEvent.COMPLETE, transformCompleteHandler);

In the transformUpdateHandler function below, you can see that we replace the object's transform manually. The, at the end of the animation, the complete handler updates one last time, stops listening for the animation's events and sets the animation to null so that it may be garbage collected.

private function transformUpdateHandler(event:AnimationEvent):void { this.transform.colorTransform = this._colorTransform; } private function transformCompleteHandler(event:AnimationEvent):void { this.transformUpdateHandler(event); this._transformAnimation.removeEventListener(AnimationEvent.UPDATE, transformUpdateHandler); this._transformAnimation.removeEventListener(AnimationEvent.COMPLETE, transformCompleteHandler); this._transformAnimation = null; }

Visit the Animation Examples page and download the Light Sequence example to view the complete source code.

Next Steps

For additional information, please take a look at the Animation Examples section with several functional demonstrations. The ActionScript Class Reference for the Astra Utilities library contains full details on every property, method, and style available to the Animation utility.