Creating animation in ActionScript 3.0

About tweens, transitions, and easing

Prebuilt classes in ActionScript provide a way to access various types of features and objects within the SWF application. The Tween, TransitionManager, and easing classes provide a simple way to add animations and transitions dynamically to your movie. The process for using these classes is very similar to the ActionScript 2.0 versions. The main difference between the ActionScript 2.0 and the ActionScript 3.0 classes is that the ActionScript package is now "fl" instead of "mx" as it appeared previously.

This section provides an overview of the tween, transition, and easing options available in ActionScript 3.0. You'll start by looking at the basics of code-generated tweening.

Note: The Tween and TransitionManager classes also exist in the ActionScript 2.0 language in the "mx" component package. For more information, read About the Tween and TransitionManager classes in the ActionScript 2.0 documentation.

Getting started

If you're working with the Tween or transition classes, you'll start your code off by importing the transitions package (as well as the easing package if you're planning on using easing). Add this code to the top of the Script window in the Actions panel:

import fl.transitions.*;
import fl.transitions.easing.*;

An ActionScript package is a group of ActionScript classes that are related. By importing the transitions and easing packages at the start of your script, you can access the object classes within the package directly by their class name to save horizontal space. Importing the class also instructs Flash CS4 Professional to compile the classes along with the SWF file.

Tip: If you're new to writing ActionScript, know that there is a lot of copying and pasting involved when you're getting started. When you see a useful code snippet, copy and paste it into your file and type into the text to create your script.

About transitions and the TransitionManager class

Transitions are animations that can be applied to movie clips to make them transition "in" or "out" of the screen. ActionScript 3.0 includes 10 different transition classes, which you can customize using the easing methods, and several optional parameters.

Flash CS4 Professional includes the following transitions for use with the TransitionManager class:

• Blinds: Reveals the next screen using an animated mask of rectangles that squeeze.
• Fade: Fades the screen in or out.
• Fly: Slides in the screen from a particular direction.
• Iris: Reveals the screen using an animated mask of a shape that zooms in.
• Photo: Has the screen appear like a photographic flash.
• Pixel Dissolve: Masks the screen using disappearing or appearing rectangles.
• Rotate: Rotates the current screen.
• Squeeze: Scales the current screen horizontally or vertically.
• Wipe: Reveals the screen using an animated mask of a shape that moves horizontally.
• Zoom: Zooms the screen in or out.

Each transition has slightly different customizations that you can apply to the animation.

The TransitionManager class is the manager object that you use to interact with the transitions.

The following code shows how to create a Wipe transition:

import fl.transitions.*;
import fl.transitions.easing.*;
 
// Apply wipe transition
TransitionManager.start(img1_mc, {type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:1});

The code above assumes that there is a movie clip instance named "img1_mc" on the Stage. These few lines of code are all that is needed to create a wipe effect in your movie.

Notice that you pass in the instance of the target and an object containing transition parameters. The parameters always include the type, direction, duration, and easing properties—along with any other transition specific properties required.

See the TransitionManager class section of the ActionScript 3.0 Language and Components Reference for more information.

About the easing classes

Easing refers to gradual acceleration or deceleration during an animation. For example, a ball might gradually increase its speed near the beginning of an animation, but slow down right at the end of the animation before it arrives at a full stop. Adding easing helps your animations appear more realistic.

Flash offers six easing classes for use with the Tween and TransitionManager classes:

• Back: Extends the animation beyond the transition range at one or both ends at once to resemble an overflow effect.
• Bounce: Adds a bouncing effect within the transition range at one or both ends. The number of bounces relates to the duration—longer durations produce more bounces.
• Elastic: Adds an elastic effect that falls outside the transition range at one or both ends. The amount of elasticity is unaffected by the duration.
• Regular: Adds slower movement at one or both ends. This feature enables you to add a speeding-up effect, a slowing-down effect, or both.
• Strong: Adds slower movement at one or both ends. This effect is similar to Regular easing, but it's more pronounced.
• None: Adds an equal movement from start to end without effects, slowing, or speeding up. This transition is also referred to as a linear transition.

The previous six easing classes each have three easing methods:

• easeIn: Provides the easing effect at the beginning of the transition.
• easeOut: Provides the easing effect at the end of the transition.
• easeInOut: Provides the easing effect at both the beginning and end of the transition.

Note: The None class contains the easeNone method, as seen in the TransitionManager code example above.

If you want to open these classes in Flash or read the code in your ActionScript editor, you can find the class files in Adobe\Adobe Flash CS4\Common\Configuration\ActionScript 3.0\projects\Flash\src\fl\transitions.

See the fl.transitions.easing package section of the ActionScript 3.0 Language and Component Reference for more information on the TransitionManager class.

About the Tween class

The Tween class enables you to move, resize, and fade movie clips easily on the Stage, similar to a tween built along the Timeline.

For example, imagine that you want to move a movie clip across the Stage. Your options would include:

• You can add keyframes to the Timeline and insert a motion or shape tween between them
• You can write some code in an onEnterFrame event handler to power the animation
• You can use the setInterval() function to call a function at periodic intervals
• You use the Motion class and the classes in the motion package
• You can use the Tween class along with the easing classes

One of the easiest ways to create a tweened animation is to use the Tween class. Use the following ActionScript:

import fl.transitions.*; 
import fl.transitions.easing.*;
 
var myTween:Tween = new Tween(ball_mc, "x", Elastic.easeOut, 0, 300, 3, true);

The previous ActionScript code example creates a new instance of the Tween class, which animates the ball_mc movie clip on the Stage along the x axis (left to right). The movie clip animates from 0 pixels to 300 pixels in three seconds, and the ActionScript applies an elastic easing method. This means the ball extends past 300 pixels on the x axis before animating back using a fluid motion effect.

The following list shows the parameters in the Tween constructor, Tween(obj, prop, func, begin, finish, duration, useSeconds):

• obj (reference): Object which the Tween targets
• prop (string): Name of the property (in obj) that will be affected
• func (function): Easing function that will be applied to the tween
• begin (number): Starting value of prop; initial value of the property
• duration (number): Length of time of the motion; set to infinity if the value is negative or omitted
• useSeconds (Boolean): Flag specifying whether to use seconds instead of frames

The first code example above demonstrates the settings to use to set the duration of the animation in seconds. Instead of using seconds, you can fade the symbol over a few frames. To set the duration in frames instead of seconds in the Tween class, you change the final parameter, useSeconds, from true to false. When you set the parameter to true, you tell Flash that the specified duration is measured in seconds. Or, if you set the parameter to false, the duration is the number of frames you want to use for the tween. For example, let's examine the following code:

import fl.transitions.Tween;
import fl.transitions.easing.*;
 
var myTween:Tween = new Tween(ball_mc, "alpha", Strong.easeIn, 1, 0, 24, false);

The previous code example fades out the ball_mc instance using the Strong.easeIn easing method. Instead of fading the instance for three seconds, it fades the instance across 24 frames. Using frames instead of seconds offers you a lot more flexibility, but remember that the duration is tied to the frame rate of the current Flash document. If your Flash document uses a frame rate of 12 frames per second (fps), then the previous code snippet fades the instance over two seconds (24 frames/12 fps = 2 seconds). However, if your frame rate is 24 fps, then the same code fades the instance over one second (24 frames/24 fps = 1 second). If you use frames to measure duration, you can significantly change the speed of your animation when you change the document's frame rate, without modifying your ActionScript.

Read about the Tween class in the ActionScript 3.0 Language and Components Reference for more information.

Page 2 of 8

Previous Page

Next Page