Flash Article

Creating animation in ActionScript 3.0

About ActionScript 3.0 XML-based animations

One of the cool new features of Flash CS3 Professional is the ability to copy a timeline-based motion tween and paste it as ActionScript 3.0 code. This allows you to create dynamic script-based animation controls—even if you're new to working with ActionScript.

Copy Motion as ActionScript 3.0 command

The Copy Motion as ActionScript 3.0 command generates an XML definition of the selected tween and sets up the classes necessary to recreate the animation in ActionScript. The possibilities for creating and re-applying animations and effects using this feature are endless.

The Copy Motion as ActionScript 3.0 command can capture the following properties of a motion tween:

• Position
• Scale
• Skew
• Rotation
• Transformation point
• Color
• Blend mode
• Orientation to path
• Scale
• Cache As Bitmap setting
• Frame labels
• Filters
• Custom easing
• Motion guides

Note: If a motion guide and custom easing are applied to a tween, the Copy Motion as ActionScript 3.0 command creates keyframes for each frame, and applies the correct values to each keyframe. If you remove the motion guide, the same XML code appears describing the custom easing for both commands.

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 on the tween you can select the option to Copy Motion as ActionScript 3.0 to copy all of the tween's properties to the clipboard.

• When you paste the code on a frame or in an ActionScript 3.0 file, the result contains the following items:
• An import of the fl.motion.Animator class
• An XML object for the provided instance (instance_xml:XML)
• An Animator object for the instance (instance_animator:Animator)
• A call to the Animator.play() method to begin the animation

As you've gathered from the information presented above, creating the tween and copying the motion to ActionScript is only the start of the process. The result is the motion XML elements and Animator instance that you can then reuse in your other projects.

Motion XML elements

You may find it easiest to generate the XML by using the Copy Motion as ActionScript 3.0 command, but there's a powerful alternative: you can script your own motion tween.

The following is a sample of the motion XML format:

var my_mc_xml:XML = <Motion duration="20" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
   <source>
      <Source frameRate="12" x="70" y="77" scaleX="1" scaleY="1" rotation="0" elementType="movie clip" symbolName="Symbol 1">
         <dimensions>
            <geom:Rectangle left="-44" top="-44" width="88" height="88"/>
         </dimensions>
         <transformationPoint>
            <geom:Point x="0.5" y="0.5"/>
         </transformationPoint>
      </Source>
   </source>
 
   <Keyframe index="0" tweenSnap="true" tweenSync="true">
      <tweens>
         <SimpleEase ease="0"/>
      </tweens>
   </Keyframe>
 
   <Keyframe index="19" x="357.9" y="242.05" scaleX="2.143" skewX="75" skewY="137.2">
      <color>
         <Color alphaMultiplier="0.37"/>
      </color>
   </Keyframe>
</Motion>;

If the code example above looks daunting to you, don't worry—it was generated using the Copy Motion as ActionScript 3.0 command. No coding knowledge was necessary to create the script above. This is a great way to learn the details of the XML format – just skim the code as you go and you'll be surprised at how quickly things fall into place.

To learn more about the motion XML format, see the following section of the Flash Help pages; ActionScript 3.0 Language and Components Reference > Appendices > Motion XML Elements.

Page 5 of 6

Previous Page

Next Page