Animation Learning Guide for Flash: Using ActionScript 3

In Adobe Flash Professional CS5 you can use ActionScript 3 to add animation to your project either by referencing an existing motion tween or by copying the animation from a tween span to ActionScript 3 code.

The following sections explain how easy it is to do this; sample files show you how far you can take these techniques. You can use the Copy Motion as ActionScript 3 option to translate an animation to ActionScript 3 code, which you can then assign to an instance by modifying a single line of code.

A feature was introduced in Flash CS4 Professional whereby you can give a tween span an instance name to which you can then attach other instances. These instances will all animate the same way as the tween with the instance name. You can also use code to script all of your animation from scratch, completely avoiding motion tweens, but this goes beyond the scope of this learning guide.

If you have a tween span, you can copy all of the animation from that tween span and convert it to ActionScript 3 using a menu option. The information from that tween is copied to the Clipboard as code, which you can then paste as ActionScript in an AS file, another FLA file, and so on. This can help designers and developers work together, in that developers can easily remove tween spans from a document and fill it with code instead. The developer doesn't need to worry about making the animation look exactly the same; Flash does the hard work instead.

To copy your animation as code:

1. Create an animation on the Stage, such as selecting a movie clip instance and applying a Motion Preset (Window > Motion Presets, select one, click Apply).
2. Right/Control-click the tween span and select Copy Motion as ActionScript 3. The equivalent code is copied to the Clipboard.
3. Create a new layer and select the first frame of the layer.
4. Open the Actions panel (Window > Actions) and paste the code into the Script pane.
5. Create a new layer and drag a second instance of the movie clip onto the Stage.
6. Select the movie clip and type myClip into the <InstanceName> text field in the Property inspector to give the clip an instance name to which you can refer in code.
7. Select the frame that contains your code. Return to the Actions panel and uncomment the following line of code. This means you remove the two forward slashes at the beginning of the line so it looks like the following:

8. Change the text that says <instance name goes here> so it reads as myClip.
9. Select Control > Test Movie to see the results. Both instances should now animate the same way.

Copying motion as ActionScript works almost the same as in earlier versions of Flash Professional (CS3 and earlier) but if you are familiar using the feature, you might notice a couple differences:

• The code is different because the animation is no longer represented as XML; instead, it's an array of values
• You no longer see a dialog box after you copy the motion that prompts you for an instance name

As you saw in the previous exercise, you need to uncomment the final line of code that you paste and enter the instance name yourself.

You can use a tween instance to apply a motion tween to other instances in a FLA file. You give a tween an instance name, much like you give instance names to movie clips so that you can refer to them in your code. Giving a tween an instance name means that you can assign the tween to other movie clips, and they'll take all the properties of that tween and be animated the same way. Using this technique means that creating certain forms of animation is much more efficient—both for your workflow and in the FLA file.

In the sample files accompanying this learning guide, you will find one called simple-tween-instance.fla. One of the instances in the FLA file is a motion tween, which you will give an instance name and apply to the static movie clip in the file:

1. In simple-tween-instance.fla, select the instance at the top of the Stage and then click the motion path (or the tween span in the Timeline).
2. Open the Motion Property inspector (Window > Properties). There is a new text box at the top where you can enter an instance name.
3. Type theTween to give the tween an instance name (see Figure 61).

There is a second instance in this file, which is a static (non-tweened) movie clip that has the instance name staticMonkey. Let's apply the tween to this instance:

1. Select Control > Test Movie to play the tween before assigning the tween instance name. This verifies that one monkey is indeed static while the other one tweens.
2. Open the Actions panel (Window > Actions) and add the following line of code:

This code applies the tween from the first monkey to the second one and both are now animated.

This is only the most basic example of what you can do with tween instances. For example, you might want to wrap some ActionScript around that line to apply it to numerous instances that you pull from the Library. An example of this can be found in the source files for this learning guide, called snow-tween-instance-3speeds.fla; a description of how that file works can be found both in the FLA file's commented code and in Jen's blog post about it.

Tween instances are useful when designers and developers need to work together on a project. Here's an example of how you can use a tween instance in this kind of workflow: A designer creates a transition for a menu item that triggers an event or animation when the menu is selected, and a developer needs to make this menu interactive. The developer would take the prototype the designer created, move the tween offstage (or hide the layer and make it not export), and give the tween an instance name. Then the developer adds the menu object and invokes the event when users click the menu item.

To learn more about scripted animation, read Creating animation in ActionScript 3. As always, be sure to read other sections of the Animation Learning Guide for Flash.