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.
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
y properties. The animation starts with the current values of these properties.
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.
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.
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.
Visit the Animation Examples page and download the Light Sequence example to view the complete source code.
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.