You can use ActionScript to add animation to a document, either by referencing an existing motion tween or by copying the animation from a tween span to ActionScript 3 code. The following sections show you how easy it is to do this, and 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.

Flash CS4 introduces a new feature, thanks to object-based animation, where 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. To learn more about scripted animation, read Creating animation in ActionScript 3.

Requirements

To make this most of this learning guide, you need to install the following software and files:

Flash CS4 Professional

• Try
• Buy

Sample files:

• motion-is-awesomer.zip (ZIP, 16 MB)

Prerequisite knowledge

A basic knowledge of the Flash workspace.

Copying ActionScript 3 from Timeline animation

If you have a tween span, you can copy all of the animation from that tween span and convert it to ActionScript 3 button 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; the hard work is done for him or her by Flash.

The following example shows you how (this is slightly different from Flash CS3):

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:

    __animFactory_Symbol1_2.addTarget(<instance name goes here>, 0);

8. Now change the text that says <instance name goes here> to 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 was as in Flash CS3, 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, but instead 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.

Using Tween instances

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

In the sample files you can find the file 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).

Figure 61. Give a tween an instance name.

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, to verify 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:

theTween.addTarget(staticMonkey);

This code applies the tween from the first monkey to the second one and both animate.

Where to go from here

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, and a description of how that file works can be found both in the FLA file's commented code and in Jen's blog.

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.

As always, be sure to read other sections of the Animation Learning Guide for Flash.

About the authors