15 August 2011
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:
__animFactory_Symbol1_2.addTarget(<instance name goes here>, 0);
<instance name goes here>so it reads as
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:
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:
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:
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.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.