How do I... Create animation with ActionScript 3.0 in Flash CS3?

<img src="" align="right" border="0" height="85" hspace="5" vspace="5" width="110" />In a previous <a href="" target="_blank"><em>How Do I..?</em> blog entry</a>, we showed you how easy it is to create an animated movie using Flash CS3's Timeline, utilizing keyframes and Motion Tween actions. However, it's well-known among professional Flash developers that if you want really responsive, snappy and attention-getting animation, you should animate with ActionScript code. John Lee shows you how this is done.

In a previous How Do I..? blog entry, I showed you how easy it is to create an animated movie using Flash CS3's Timeline, utilizing keyframes and Motion Tween actions. However, it's well-known among professional Flash developers that if you want really responsive, snappy and attention-getting animation, you should animate with ActionScript code.

While there is nothing wrong with animating objects using the timeline, animating a Flash movie with ActionScript has an enormous advantage in that the end movie puts much less strain on the end viewer's processor and memory, thereby increasing the performance of the movie. The catch? Writing animation for ActionScript is extremely complex and time-consuming.

But Flash CS3 has changed that. Flash CS3 will allow you to create an animated movie file using the timeline, and then convert the onscreen action into ActionScript with a handful of mouse clicks.

This blog post is also available in PDF form as a TechRepublic download, which includes the sample flash file described.

If you don't own a copy of Flash CS3, you can download a fully functioning 30-day.

Open Flash CS3 and create a new file by selecting the New... option from the File menu. In the dialog box that appears, select the Type: Flash File ActionScript 3.0. This is important, because Flash CS3 will not automatically create ActionScript 2.0 code. Save your file now, and remember to hit [Ctrl] + S after you complete each of the following steps.

Each time you create a new Flash file, the default frame rate is 12 frames per second. This is likely a holdover from the last decade or so, when computer processor rates were significantly slower, but these days we can up the frame rate to 24 frames per second, which will give us a much smoother sense of motion. In the Properties palette at the bottom of the screen, click in the field labeled "Frame Rate" and change the number from 12 to 24, as shown in Figure A.

Figure A

Changing the Frame Rate to 24 frames per second (FPS)
In the Layers palette at the top of the screen, Insert a second layer as shown in Figure B. Then double-click the Layer 1 and rename it "Ball." Next, rename Layer 2 "ActionScript" and lock it. Locking the layer that holds ActionScript code is important, because it keeps you from placing objects on that layer as well as keeping your Flash file well-structured.

Figure B

Renaming and locking the layers of the Flash file
Select the layer named "Ball" in the Layers palette and then select the Oval tool from the Toolbox on the left. Select a Stroke color of None, and a deep red for the for the Fill color, as shown in Figure C.

Figure C

Selecting the Oval tool with a red fill and no stroke in the Toolbox
Next, hold down the Shift key (in order to force the Oval tool to draw a circle), click and drag to draw a circle on the stage. As always, objects on the stage must be converted into Library Symbols, or Flash cannot animate them. Click on the circle to select it, and then right-click on the circle. In the pop-up menu that appears (Figure D), select the option Convert to Symbol. In the Convert to Symbol dialog box, select the Movie Clip option and name the Symbol "ball" (no quotation marks.)

Figure D

Converting the Circle into a Symbol

Click on the new Ball symbol and move it to the center-left side of the stage. This is where the animation will start, and to keep our example simple, we'll animate four keyframes across 48 frames in the timeline, giving us a two-second animation.

Go back up to the Timeline and place your mouse into the 12th frame on the layer named "Ball." Right-click in the selection and choose the option "Insert Keyframe." Repeat this process at keyframes 24, 36 and 48. Your Timeline palette should look like Figure E.

Figure E

Inserting the keyframes needed for the animation

Now that the keyframes are in place, we can build the animation. Select keyframe 12 and then go down to the stage and move the Ball symbol to the center of the bottom edge of the stage. Going back to the timeline, select keyframe 24 and move the Ball to the center of the right edge of the stage. Next, select keyframe 36 and then place the ball at the center of the top edge of the stage.

Finally, select keyframe 48, but instead of moving the ball symbol, select it and then delete it. Go back to keyframe one and select the ball symbol on the stage and hit Ctrl+C to copy it to your clipboard. Then return to keyframe 48 and hit Ctrl+Shift+V to paste the ball in the exact same position as it exists in keyframe 1. The final animation should have the effect of the ball ricocheting off of all four sides of the stage, to return to its starting position in an endless loop.

Go back to the Timeline and select Frame 1 of the Ball layer. Right-click the frame and choose the option "Create Motion Tween." The Ball layer will turn blue, with an arrow leading from keyframe 1 to keyframe 12. Repeat this process at the rest of the keyframes, stopping at keyframe 48. Press the Enter key to preview the animation, and make sure that your timeline looks like Figure F.

Figure F

Applying Motion Tweens to the keyframes

The animation is complete, and we could publish the Flash movie now. But instead, we're going to convert the timeline data to ActionScript to get a more efficient flash movie.

Place your mouse in keyframe 1 and then click and drag to select all 48 frames in the Ball layer. With all 48 frames selected, right-click in the highlighted selection and choose the option "Copy Motion as ActionScript 3.0." In the dialog box that appears, you must give Flash an instance name so that it will know which symbol to apply the ActionScript animation code to. To keep things simple, enter the name "ball" (no quotes) and click OK. (Figure G)

Figure G

Supplying an instance name for the ActionScript animation code

After you click OK, it will appear as if nothing has changed. But don't worry; Flash has placed the ActionScript animation code on your computer's clipboard. Go up to the timeline and select frame one of the ActionScript layer. Then from the window menu, select Actions to open up the Actions palette.

In the Actions palette, right-click inside the large, blank area on the right and select Paste. Your auto-generated ActionScript code will then populate the Actions window, as shown in Figure H.

Figure H

Pasting the ActionScript code into the Actions palette
Just a few more steps before we are done. While still in keyframe 1, select the ball symbol on the stage and press Ctrl+X to cut it to your clipboard. Then in the layers palette, select the Ball layer and delete it by clicking on the trash can icon as shown in Figure I.

Figure I

Deleting the original timeline animation
Next, insert a New layer, then click on the stage and from the Edit menu, click the Paste in Place option to paste the Ball symbol back on the stage in the precise position from which you cut it. Pasting the symbol in Place assures that the ActionScripted animation will start in the same place as when we created it in the timeline. Click on the ball symbol and in the Properties palette at the bottom (Figure J), give the symbol an instance name of "ball" (no quotes). If the symbol does not have an instance name that matches the instance name in the ActionScript, the ball will not be animated!

Figure J

Give the newly-pasted symbol an instance name that matches the instance name in the ActionScript code

Finally, we must ensure that the length of the movie matches the length of the animated timeline. Go up to the New Layer and right-click in frame 48. Choose the option "Insert Frame" to place a standard frame that marks the end of the movie. Hit Ctrl+Enter to test your movie.

Although this example showed an animated bouncing ball, you cannot create an animation that is too complex for Flash CS3 to turn into ActionScript. Experiment with animating bitmaps, animating with motion paths and more to create fast and responsive Flash animations without typing a line of ActionScript code.

John Lee is a consultant specializing in design and illustration and a freelance technical writer. You can visit his Web site at