Flash ActionScript 3 Tween Class

Tweening is a fundamental of Flash^R animation. If you break down a Flash animation into its individual parts, you will have a starting point, an ending point and several in-between points. The number of in-between points that you will have depends on the type of animation you are creating.

Most Flash designers use one of two methods to create a Flash animation. The first method that you learn to use is Timeline tweening, where you use the Flash Timeline to control the animation. This is an easy way to create a simple tween. But this tutorial is about the second, and more flexible, ActionScript method. You will use this method when you need a little more control over the tween than you have with the Timeline. The nice thing is that most of the ActionScript code is built-in. Basically, you only need to tell Flash where to start, where to end and how long you want the Tween to last. Let's take a look at how to setup your Flash project to use ActionScript and the Tween class to create a Tween.

Let's look at an example that will move a simple rectangle from one point on the stage to another. Start a new ActionScript 3 project in Flash CS3.

Our first step is to draw the rectangle on the stage. We can do this by using ActionScript 3 and the Drawing API. But, for this tutorial, we will just use the drawing tools to draw a rectangle anywhere on the stage. Let's rename Layer 1 in the Timeline to "Rectangle". Then click on the Rectangle tool and draw our rectangle.
Next, we need to convert the rectangle to a Movie Clip. Select the rectangle and click Modify – Convert to Symbol from the Menubar to open the dialog box. Let's give our Movie Clip the name "recMC" and set the Type to Movie Clip.
Let's also set up the Linkage for this Movie Clip. Click on the Advanced button to expand the Covert to Symbol dialog box. Checkmark the Export for ActionScript box to tell Flash to create a new recMC class. Close the dialog box.

Now, we can remove the rectangle that we have drawn on the stage because we have it in the Library. Select the rectangle and click Edit – Cut. Since we are going to use ActionScript to create our Tween animation, our next step is to add a new layer to the Timeline and name it "Actions". On Frame 1 of the Actions layer, open the Actions panel (Window – Actions) and copy/paste the code below.

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

These three lines of code tell Flash that we want to use the built-in code for the Tween, TweenEvent and easing classes. These classes help use to move, resize and fade our target Movie Clip (redMC).

Next →

Join us in the Flash forum.