Creating Copy Motion as ActionScript 3.0 animations

Another powerful animation feature related to ActionScript 3.0 is the ability to copy a timeline-based motion tween and paste it as ActionScript 3.0 code. New to Flash CS4 Professional is the ability to copy 3D animations to ActionScript-based tween definitions. This allows you to create dynamic, script-based animation controls—even if you're new to working with ActionScript.

You can copy the following properties of a motion tween:

• Blend modes
• Color
• Custom easing
• Filters
• Motion guides
• Position
• Rotation
• Scale
• Skew

The Copy Motion as ActionScript 3.0 command applies the copied tween properties as an ActionScript definition or an XML definition. While XML is an efficient way to describe a tween, by default Flash CS4 Professional applies property values as an array to the AnimatorFactory class.

The process for creating an animation using Copy Motion as ActionScript 3.0 is simple. You start by creating a tween visually along the Timeline, creating whatever effects you desire. By right-clicking the tweened instance, you can select the option to Copy Motion as ActionScript 3.0 or Copy Motion.

Using Copy Motion and applying an animation

If you don't need to save the tween properties beyond your immediate edits, you can simply use the Copy Motion command to copy a tween and paste it elsewhere in your file or in a separate file.

In this demonstration you will use the Copy Motion command to generate a copy of the properties of a tween animation and apply them to an instance in a separate file.

To copy and paste a tween between objects:

1. Create a new ActionScript 3.0 file and save it as tween1.fla.
2. Draw a shape in the upper left corner of the Stage.
3. Select the shape and convert it to a symbol (F8) so that it can be animated. In the dialog box that appears, choose the movie clip behavior and set the registration point to the center.
4. Right-click the instance and choose the Create Motion Tween option. Notice that the Timeline extends to frame 24 and that the red current frame indicator is located at frame 24.
5. Select the instance and drag it to the lower right of the Stage.
6. Click the motion guide line and drag it upward to create a curve in the tween's path.
7. Right-click the instance and choose the Copy Motion option.
8. Create a new ActionScript 3.0 FLA file and save it as tween2.fla.
9. Create a symbol and then right-click the instance. Choose the Paste Motion option to paste the copied tween. Notice that the Timeline extends and shows the same state as the original tween.
10. Run the Test Movie command to see the animation applied.

Using Copy Motion as ActionScript 3.0 and applying an animation

If you would like to be able to reuse the code that generates the tween, you can use the Copy Motion as ActionScript 3.0 command.

In this demonstration you will use the Copy Motion as ActionScript 3.0 command to generate a copy of the properties of a tween animation and apply them to a separate file.

To create a reusable ActionScript 3.0 animation:

1. Create a new ActionScript 3.0 file and save it as tween3.fla.
2. Draw a shape on the Stage and convert it to a symbol.
3. Name the instance shape_mc. This step isn't critical, but the code generated from the tween includes the instance name.
4. Right-click the instance and choose the Create Motion Tween option.
5. Select the instance and drag it to a new location on the Stage.
6. Click the motion guide line and drag it upward to create a curve in the tween's path.
7. Right-click the instance and choose the Copy Motion as ActionScript 3.0 option.
8. Create a new ActionScript 3.0 FLA file and save it as tween4.fla.
9. Create a shape on the Stage of the new file and convert it to a symbol.
10. Name the instance shape_mc in the Property inspector.
11. Add a new layer named actions.

12. Select the keyframe on frame 1 of the Timeline and open the Actions panel (F9). Paste the code that you copied in Step 6 in the text editor. The code should look something like the following:

    import fl.motion.AnimatorFactory;
    import fl.motion.MotionBase;
    import flash.filters.*;
    import flash.geom.Point;
    var __motion_shape_mc:MotionBase;
    if(__motion_shape_mc == null) {
        import fl.motion.Motion;
        __motion_shape_mc = new Motion();
        __motion_shape_mc.duration = 30;
     
        // Call overrideTargetTransform to prevent the scale, skew,
        // or rotation values from being made relative to the target
        // object's original transform.
        // __motion_shape_mc.overrideTargetTransform();
     
        // The following calls to addPropertyArray assign data values
        // for each tweened property. There is one value in the Array
        // for every frame in the tween, or fewer if the last value
        // remains the same for the rest of the frames.
        __motion_shape_mc.addPropertyArray("x", [0,3.97311,8.40006,13.3186,18.7471,24.7331,31.3031,38.4825,46.2956,54.7578,63.8896,73.665,84.0945,95.1365,106.738,118.856,131.428,144.384,157.653,171.187,184.905,198.775,212.74,226.781,240.837,254.924,268.981,283.03,297.043,311]);
        __motion_shape_mc.addPropertyArray("y", [0,13.5007,26.857,40.057,53.0306,65.7758,78.2331,90.3444,102.053,113.294,124.016,134.125,143.585,152.323,160.286,167.446,173.783,179.291,183.979,187.877,191.01,193.423,195.157,196.26,196.773,196.742,196.207,195.207,193.776,191.95]);
        __motion_shape_mc.addPropertyArray("scaleX", [1.000000]);
        __motion_shape_mc.addPropertyArray("scaleY", [1.000000]);
        __motion_shape_mc.addPropertyArray("skewX", [0]);
        __motion_shape_mc.addPropertyArray("skewY", [0]);
        __motion_shape_mc.addPropertyArray("rotationConcat", [0,-4.13792,-8.27584,-12.4138,-16.5517,-20.6896,-24.8275,-28.9655,-33.1034,-37.2413,-41.3792,-45.5172,-49.6551,-53.793,-57.931,-62.0689,-66.2068,-70.3447,-74.4827,-78.6206,-82.7585,-86.8964,-91.0344,-95.1723,-99.3102,-103.448,-107.586,-111.724,-115.862,-120]);
        __motion_shape_mc.addPropertyArray("blendMode", ["normal"]);
     
        // Create an AnimatorFactory instance, which will manage
        // targets for its corresponding Motion.
        var __animFactory_shape_mc:AnimatorFactory = new AnimatorFactory(__motion_shape_mc);
     
        // Call the addTarget function on the AnimatorFactory
        // instance to target a DisplayObject with this Motion.
        // The second parameter is the number of times the animation
        // will play - the default value of 0 means it will loop.
        // __animFactory_shape_mc.addTarget(<instance name goes here>, 0);
    }

13. Remove the comment from the last line of code and replace the <instance name goes here> text with the name of the instance to be animated and update the 0 to the number of times you'd like the animation to loop:

    __animFactory_shape_mc.addTarget(shape_mc, 1);

14. Run the Test Movie command to see the animation applied.

Using the Copy Motion as XML command

If you would like to save the animation properties in Motion XML format, you can use the Copy Motion as XML command in the Commands menu.

In this demonstration you will use the Copy Motion as XML command to generate XML and code, and then apply them in a different file.

To create an ActionScript 3.0 Motion XML animation:

1. Create a new ActionScript 3.0 file and save it as tween5.fla.
2. Draw a shape on the Stage and convert it to a symbol.
3. Extend the Timeline by adding a keyframe to frame 20. Move the instance of the shape on frame 20 to a new location. Change the alpha, rotation, and transformation properties as desired.
4. Right-click the instance and choose the Create Classic Tween option.
5. Select the entire layer containing the classic tween, including both keyframes in the selection.
6. Right-click the selection and choose Commands > Copy Motion as XML.
7. Create a new ActionScript 3.0 FLA file. Save the file as tween6.fla.
8. Draw a shape on the Stage and convert it to a symbol.
9. Name the instance on the Stage as shape_mc.
10. Add a new layer and name it actions.

11. Select the first frame of the actions layer and open the Actions panel. Add the following code to create a variable to hold the Motion XML:

    import fl.motion.Animator;
    var my_mc_xml:XML =

12. Place the cursor after the equal (=) sign from the last step and paste the Motion XML from the Clipboard. Your code should look something like this:

    import fl.motion.Animator;
    var my_tween_xml:XML = <Motion duration="20" xmlns="fl.motion.*"
    xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
       <source>
          <Source frameRate="30" x="80.45" y="83" scaleX="1" scaleY="1" rotation="0" elementType="movie clip" symbolName="Symbol 1">
             <dimensions>
                <geom:Rectangle left="-35.45" top="-41" width="70.95" height="82"/>
             </dimensions>
             <transformationPoint>
                <geom:Point x="0.4996476391825229" y="0.5"/>
             </transformationPoint>
          </Source>
       </source>
     
       <Keyframe index="0" tweenSnap="true" tweenSync="true">
          <tweens>
             <SimpleEase ease="0"/>
          </tweens>
       </Keyframe>
     
       <Keyframe index="19" x="326" y="201.95" rotation="135"/>
    </Motion>

13. Add the following code after the Motion XML description to play back the tween in an Animator instance. Notice that the constructor of the Animator class accepts two parameters—the Motion XML instance name and the target instance name:

    var my_animator:Animator = new Animator(my_tween_xml, shape_mc);
    my_animator.play();

14. Run the Test Movie command to see the animation play. You can repeat this process as many times as you'd like in the same file or across multiple files in a project.

Note: If you build your tween in a Flash CS3 ActionScript 3.0 FLA file, or use a classic tween, Flash will default to using Motion XML for the tween description.

To learn more about the motion XML format, read Motion XML Elements in the ActionScript 3.0 Language and Components Reference.

Page 7 of 8

Previous Page

Next Page