Creating animation in ActionScript 3

The Adobe ActionScript 3 language offers programmatic access to most of the elements in Adobe Flash Player. Included in the ActionScript language are several classes devoted to creating animation, which allow you to create simple or complex motion effects without using a timeline.

This article shows you how easy it is to use the ActionScript 3 animation features in Adobe Flash Professional CS5, even if don't regularly use ActionScript. You'll explore the range of options available and learn how to animate movie clips and components to add animation to your SWF applications.

New to Flash Professional CS5 is the ability to automate coding tasks using the Code Snippets panel (see Figure 1). Code snippets are collections of commonly used code blocks which you can use to add functionality to your Flash movie. Included in the mix are a range of options related to animation.

If you're new to writing ActionScript, the snippets are a great way to become familiar with the ActionScript syntax. If you're already up and running with your ActionScript skills, you'll be able to speed up repetitive coding tasks by creating your own custom snippets.

About code snippets

The general workflow while using code snippets includes selecting an instance or a keyframe on the Timeline and then adding a code snippet by clicking the snippet name in the Code Snippets panel. The command generates an Actions layer and assigns code to it on the Timeline (in ActionScript 3, code must be placed on a timeline). If an instance is selected before running the command, the instance name is automatically inserted in the new code. Most often you'll click the keyframe containing the script and edit the code in the Actions panel.

The code snippets are divided into six groups:

• Actions: Common actions including drag and drop and custom mouse cursor
• Timeline navigation: Common timeline navigation including frame and scene controls
• Animation: Common animation code including rotate, fade, and move with keyboard
• Load and unload: Common SWF and symbol loading code
• Audio and video: Common sound and video related code
• Event handlers: Simple event handler functions including mouse and keyboard interactivity

Take a moment to explore the options available in the six categories.

Controlling movement using the keyboard

The following example demonstrates how to use a code snippet to enable keyboard control over a graphic:

1. Select File > New and create a new ActionScript 3 document called keyboardControl.fla.
2. Name the default layer Assets.
3. Draw a rectangle on the Stage approximately 150 pixels wide and 150 pixels tall using the Rectangle tool or import an image (File > Import).
4. Select the image and use the Align panel to center the object on the Stage.
5. Select the image and convert it to a movie clip symbol (F8) named img.
6. Name the instance image_mc on the Stage.
7. Select the instance using the Pointer tool and then open the Code Snippets panel (Window > Code Snippets).
8. Open the Animation folder and double-click the Move with Keyboard Arrows command. Notice that an Actions layer is automatically added to the layers stack and that Frame 1 has an "a" icon above it. The icon is a visual cue showing you that code exists in that location.
9. Select Frame 1 of the Actions layer and open the Actions panel (F9) to view the code:

10. Test the movie (Control > Test Movie). Press the keyboard arrows to move the image.

Creating a custom animation snippet

The Code Snippet panel is a handy place to create a library of code-driven animation effects. You can experiment with the supplied snippets code or create endless effect variations using your own code. The following example demonstrates how to save a simple tween effect as a reusable code snippet.

Follow these steps to create a custom snippet:

1. Select File > New and create a new ActionScript 3 document called tween.fla.
2. Open the Code Snippets panel (Window > Code Snippets).
3. Choose the Create New Code Snippet option from the menu in the top right of the panel (see Figure 2).

4. Enter the following information in the Create New Code Snippet dialog box:
• Title: Add Tween class
• Tooltip: Creates a tween animation by assigning an instance to the Tween class
• Code:

5. Check the Automatically replace instance_name_here when applying code snippet option. Doing so instructs the command to replace the placeholder text in the code sample.
6. The dialog box should look similar to Figure 3 at this point. Click OK to create the snippet. Notice that it appears in a new folder named Custom.

Follow these steps to apply the custom snippet:

1. Continuing in the same FLA file, name the default layer Assets.
2. Draw a rectangle on the Stage approximately 150 pixels wide and 150 pixels tall. Select the rectangle and convert it to a symbol (F8) named shape.
3. Select the instance on the Stage if it's not already selected and name it rect_mc in the Properties panel.
4. With the instance still selected, open the Code Snippets panel and double-click the Add Tween class snippet in the Custom folder. Notice that the command automatically added an Actions layer with code attached to it.
5. Select Frame 1 of the Actions layer and open the Actions panel to view the code. Notice that the instance name placeholder was replaced with the actual instance name.
6. Select Control > Test Movie to see the results. The shape fades in. Close the SWF.
7. Return to the Actions panel and update the prop, from, to, and duration variables to change the animation. Try the following settings:
• prop: "rotationY"
• from: 0
• to: 360
• duration: 2
8. Select Control > Test Movie again to see the results. This time the image rotates on its y axis for over two seconds.

You'll dive into the details of working with the Tween class in the next section. As you explore the samples in the following pages, try to think of how you might build your snippet library.

Read more about the Code Snippets panel in the Add interactivity with code snippets section of the Flash CS5 Help documentation. Also see Yuki Shimizu's article, Code snippets for beginning ActionScript 3 programmers and designers, in the Flash Developer Center.

Prebuilt classes in ActionScript provide a way to access various types of features and objects within the SWF application. The Tween, TransitionManager, and easing classes provide a simple way to add animations and transitions dynamically to your movie. The process for using these classes is very similar to the ActionScript 2 versions. The main difference between the ActionScript 2 and the ActionScript 3 classes is that the ActionScript package is now "fl" instead of "mx" as it appeared previously.

This section provides an overview of the tween, transition, and easing options available in ActionScript 3. You'll start by looking at the basics of code-generated tweening.

Note: The Tween and TransitionManager classes also exist in the ActionScript 2 language in the "mx" component package. For more information, read About the Tween and TransitionManager classes in the ActionScript 2 documentation.

About the transitions package

If you're working with the Tween or transition classes, you'll start your code off by importing the transitions package (as well as the easing package if you're planning on using easing). Add this code to the top of the Script window in the Actions panel:

An ActionScript package is a group of ActionScript classes that are related. By importing the transitions and easing packages at the start of your script, you can access the objects within the package directly by their class name to save horizontal space. Importing the class also instructs Flash Professional CS5 to compile the classes along with the SWF file.

Tip: In Flash Professional CS5, import statements are generated automatically when you data type your variables in the Actions panel. To use this feature, declare your variable using the var keyword and the name of the variable followed by a space and a colon. Typing in the space and colon after the variable name triggers the code hint menu and automatic addition of the import statement at the top of the script.

About transitions and the TransitionManager class

Transitions are animations that can be applied to movie clips to make them transition "in" or "out" of the screen. ActionScript 3 includes 10 different transition classes, which you can customize using the easing methods, and several optional parameters.

Flash Professional CS5 includes the following transitions for use with the TransitionManager class:

• Blinds: Reveals the next screen using an animated mask of rectangles that squeeze
• Fade: Fades the screen in or out
• Fly: Slides in the screen from a particular direction
• Iris: Reveals the screen using an animated mask of a shape that zooms in
• Photo: Has the screen appear like a photographic flash
• Pixel Dissolve: Masks the screen using disappearing or appearing rectangles
• Rotate: Rotates the current screen
• Squeeze: Scales the current screen horizontally or vertically
• Wipe: Reveals the screen using an animated mask of a shape that moves horizontally
• Zoom: Zooms the screen in or out

Each transition has slightly different customizations that you can apply to the animation. The TransitionManager class is the manager object that you use to interact with the transitions.

The following code shows how to create a Wipe transition:

The code above assumes that there is a movie clip instance named "img1_mc" on the Stage. These few lines of code are all that is needed to create a wipe effect in your movie.

Notice that you pass in the instance of the target and an object containing transition parameters. The parameters always include the type, direction, duration, and easing properties—along with any other transition specific properties required.

See the TransitionManager class section of the ActionScript 3 Language Reference for more information.

About the easing classes

Easing refers to gradual acceleration or deceleration during an animation. For example, a ball might gradually increase its speed near the beginning of an animation, but slow down right at the end of the animation before it arrives at a full stop. Adding easing helps your animations appear more realistic.

Flash offers six easing classes for use with the Tween and TransitionManager classes:

• Back: Extends the animation beyond the transition range at one or both ends at once to resemble an overflow effect.
• Bounce: Adds a bouncing effect within the transition range at one or both ends. The number of bounces relates to the duration—longer durations produce more bounces.
• Elastic: Adds an elastic effect that falls outside the transition range at one or both ends. The amount of elasticity is unaffected by the duration.
• Regular: Adds slower movement at one or both ends. This feature enables you to add a speeding-up effect, a slowing-down effect, or both.
• Strong: Adds slower movement at one or both ends. This effect is similar to Regular easing, but it's more pronounced.
• None: Adds an equal movement from start to end without effects, slowing, or speeding up. This transition is also referred to as a linear transition.

The previous six easing classes each have three easing methods:

• easeIn: Provides the easing effect at the beginning of the transition
• easeOut: Provides the easing effect at the end of the transition
• easeInOut: Provides the easing effect at both the beginning and end of the transition

Note: The None class contains the easeNone method, as seen in the TransitionManager code example above.

If you want to open these classes in Flash or read the code in your ActionScript editor, you can find the class files in Adobe\Adobe Flash CS5\Common\Configuration\ActionScript 3\projects\Flash\src\fl\transitions.

See the fl.transitions.easing package section of the ActionScript 3 Language Reference for more information on the TransitionManager class.

About the Tween class

The Tween class enables you to move, resize, and fade movie clips easily on the Stage, similar to a tween built along the Timeline.

For example, imagine that you want to move a movie clip across the Stage. Your options would include:

• You can add keyframes to the Timeline and insert a motion or shape tween between them
• You can write some code in an onEnterFrame event handler to power the animation
• You can use a Timer instance to call a function at periodic intervals
• You use the Motion class and the classes in the motion package
• You can use the Tween class along with the easing classes

One of the easiest ways to create a tweened animation is to use the Tween class. Use the following ActionScript:

The previous ActionScript code example creates a new instance of the Tween class, which animates the ball_mc movie clip on the Stage along the x axis (left to right). The movie clip animates from 0 pixels to 300 pixels in three seconds, and the ActionScript applies an elastic easing method. This means the ball extends past 300pixels on the x axis before animating back using a fluid motion effect.

The following list shows the parameters in the Tween constructor:

• obj (reference): Object which the Tween targets
• prop (string): Name of the property (in obj) that will be affected
• func (function): Easing function that will be applied to the tween
• begin (number): Starting value of prop; initial value of the property
• duration (number): Length of time of the motion; set to infinity if the value is negative or omitted
• useSeconds (Boolean): Flag specifying whether to use seconds instead of frames

The first code example above demonstrates the settings to use to set the duration of the animation in seconds. Instead of using seconds, you can fade the symbol over a few frames. To set the duration in frames instead of seconds in the Tween class, you change the final parameter, useSeconds, from true to false. When you set the parameter to true, you tell Flash that the specified duration is measured in seconds. Or, if you set the parameter to false, the duration is the number of frames you want to use for the tween. For example, let's examine the following code:

The previous code example fades out the ball_mc instance using the Strong.easeIn easing method. Instead of fading the instance for three seconds, it fades the instance across 24 frames. Using frames instead of seconds offers you a lot more flexibility, but remember that the duration is tied to the frame rate of the current Flash document. If your Flash document uses a frame rate of 12 frames per second (fps), then the previous code snippet fades the instance over two seconds (24 frames/12 fps = 2 seconds). However, if your frame rate is 24 fps, then the same code fades the instance over one second (24 frames/24 fps = 1 second). If you use frames to measure duration, you can significantly change the speed of your animation when you change the document's frame rate, without modifying your ActionScript.

The standard frame rate for a Flash movie is 24 frames per second (same as the standard motion-picture rate). This standard frame rate produces the best results on the web. Note that the complexity of your animation (overlapping graphics, transparencies, blends and effects, etc.) along with the speed of the computer viewing the movie will affect the smoothness of the playback.

Read about the Tween class in the ActionScript 3 Language Reference for more information.

You can use the transition and Tween classes to add animations to movie clips and components using ActionScript. Doing so allows you to easily experiment with graphic transformations and different types of easing effects. While you can create these types of effects from scratch using ActionScript, the code and mathematics can quickly become complex. Using the prebuilt classes can save a lot of time and energy.

To use the transition class to animate a movie clip zooming in on the Stage, follow these steps:

1. Select File > New and then choose to create a new ActionScript 3 document. Click OK to create the new FLA file.
2. Select File > Import > Import to Stage and select an image on your hard drive to import into the FLA file. The image is imported into your file as a bitmap image, so you need to convert the image manually into a movie clip symbol. Click Open to import the image.
3. Select the imported image on the Stage, and then select Modify > Convert to Symbol (F8). Name the symbol img1, and make sure you set the behavior to Movie Clip. The registration point of the symbol is by default in the upper-left corner of the symbol (see Figure 4).

4. Click OK to convert the bitmap image into a movie clip.
5. Open the Property inspector (with the image still selected) and assign the movie clip the instance name img1_mc.
6. Select Frame 1 of the main Timeline. Add the following ActionScript into the Actions panel:

7. Select Control > Test Movie to test the animation. The image quickly grows and has a slight bouncing effect before it returns to its original size. If the animation moves too quickly, then increase the animation's duration (in the previous code example) from one second to two or three seconds.

You might notice that the image anchors in the upper-left corner, and it grows towards the lower-right corner. If you want images to zoom in from the center, instead of anchoring on a corner, you'll need to modify the symbol's registration point when you convert the image from a bitmap (see Step 2 above). Follow these steps:

1. Drag a copy of the bitmap symbol from the Library panel onto the Stage beside the current movie clip symbol.
2. With the bitmap image still selected on the Stage, press F8 to convert the symbol into a movie clip. Name the symbol img2.
3. Click the center of the 3 × 3 grid to set the registration point to the center of the bitmap (see Figure 5). Click OK.

4. Select the new image on the Stage. In the Property inspector, assign the instance name img2_mc.
5. Select Frame 1 of the main Timeline and add the following ActionScript to the existing code:

If you modified the duration in Step 7 above, modify this code example to the use the same number.

6. Select Control > Test Movie to test the animation. The second movie clip now grows from the center of the symbol instead of animating from the corner.

As you can see, creating complex animations is extremely easy using transitions, and doesn't require you to create motion or shape tweens on the Timeline. And most importantly, you don't need to use complex math calculations to create easing methods.

Note: Some transitions are sensitive to where you locate the registration point in the movie clip. Changing the registration point can have a dramatic effect on how the animation looks in an SWF file.

To use the Tween class to animate an object, follow these steps:

1. Create a new ActionScript 3 file and save it as tweenWithEvent.fla.
2. Select and rename layer 1 to assets.
3. Draw a shape on the layer and convert it to a symbol (F8). Choose the Movie clip behavior and click OK.
4. Name the instance img1_mc.
5. Add a new layer and name it actions.
6. With Frame 1 of the actions layer selected, open the Actions panel and enter the following code into the Script window:

Note: This code example shows how to create a simple tween with an event handler function assigned to "listen" to the animation. Events are timing hooks that allow you to respond to various points in the animation. You can respond to the following events: motionChange, motionFinish, motionLoop, motionResume, motionStart, and motionStop.

7. Select Control > Test Movie to see the results. You should see the message "MOTION_FINISH time = 3" appear in the Output panel after img1_mc finishes animating on the Stage.

Read about the Tween class in the ActionScript 3 Language Reference for more information.

What if you want to move the ball after the initial animation completes? There are at least two ways you can handle this. The first, and perhaps the most obvious solution, is to re-animate the ball using the motionFinished event. While this solution works, the Tween class offers a simpler solution: the continueTo() method. The continueTo() method instructs the tweened animation to continue from its current value to a new value. You can see how this works in the following ActionScript:

After the initial tween finishes, the ball_mc movie clip tweens back to its original position at 0 pixels (assuming that the symbol's registration point is located on the left side of the graphic).

There are only two arguments that pass to the continueTo() method, instead of the seven arguments for the Tween method. The five missing arguments (obj, prop, func, begin, and useSeconds) in the continueTo() method use the arguments that you defined earlier in the call to the Tween class. When you call the continueTo() method, you assume the obj, prop, func (easing type), and useSeconds arguments are the same as in the earlier call to the Tween class. The continueTo() method uses the finish value from the call to the Tween class, instead of specifying a value for the begin argument.

Building your own continuing animation

You can even make an animation continue animating back and forth along the x axis without stopping. The Tween class also accommodates this kind of animation with the aptly named yoyo() method. The yoyo() method waits for the motionFinished event to execute, and then it reverses the begin and finish parameters. The animation begins again, as demonstrated in the following example.

1. Select File > New and create a new ActionScript 3 document called yoyo.fla.
2. Select the Rectangle tool, and set the stroke color to No Color and the fill color to red in the Tools panel. Draw a rectangle on the Stage that is approximately 20 pixels wide and the entire height of the Stage (see Figure 6).

3. Select the Selection tool, and click the rectangle to select the fill. Press F8 to convert the shape into a movie clip. Name the symbol box, set the behavior to Movie clip, and leave the default setting for the registration point, so that it is set to the upper-left corner. Click OK when you are finished.
4. Select the rectangle on the Stage, and use the Property inspector to give the rectangle the instance name box_mc. Before you deselect the instance, set both the x and y coordinates to 0 pixels to move the shape to the upper-left corner of the Stage.
5. Insert a new layer in the Timeline above Layer 1. Rename the layer stroke.
6. Select the Rectangle tool, and change the fill color to No Color and the stroke color to black in the Tools panel.
7. Draw a rectangle while the stroke layer is selected, and then select the stroke using the Selection tool. Change the width of the rectangle to match the width of the Stage (550 pixels by default), and match the height of the rectangle to the height of the Stage (400 pixels by default). Then set the x and y coordinates of the stroke to 0 pixels so the stroke outlines the Stage dimensions (see Figure 7).

8. Insert another new layer above the two existing layers, like you did in Step 5. Rename the new layer actions. Add the following ActionScript to Frame 1 of the actions layer:

9. Select Control > Test Movie. The box animates from left to right, and back.
10. As the box approaches the right edge of the Stage, you'll notice that the box animates outside of the stroke that you created in Step 7. While this might not seem like a huge deal in the authoring environment, if you view your animation in a web browser (File > Publish Preview > HTML) you'll see that the rectangle disappears when it approaches the right edge of the Stage. To fix this, you need to animate the rectangle from 0 pixels to the width of the Stage minus the width of the box_mc movie clip. You can see how this is accomplished in the following revised code from Step 8:

Now test the animation, and notice how the box stops easing before it exits the boundaries of the Stage.

One of the new features available in Flash Player 10 is the ability to animate two-dimensional objects in three-dimensional space (see Figure 8). New tools in the authortime environment and new properties in the DisplayObject class and geom package allow for projecting objects into perspective.

Updated properties in the DisplayObject class

The rotation effect seen in Figure 5 can be achieved in ActionScript using the new properties of the DisplayObject class. All sprites and movie clips are display objects in ActionScript 3. You're probably familiar with using the x and y property of the MovieClip object in older versions of the language. In Flash Professional CS5, the x and y properties are joined by the z property, representingdepth.

Note: 3D tools were first added to Flash CS4 Professional for Flash Player 10 and later.

Movie clips and sprites have access to the following transformational properties:

Notice that the rotation property has been split into three separate properties in addition to the transitional rotation property. The transform property accepts a 3D matrix for more advanced multi-property transformations.

As you can see, the updates come in the form of the new z properties. The z property deals with distance from a point of view. An object whose z property is 100 is further away from your viewpoint than an object whose z property is 50. As seen in Figure 8, if the z coordinates of the top of the rectangle are greater than the z coordinates of the bottom of the rectangle, the shape appears to lean back, creating a rotational effect. Using the rotation properties, you can easily create these types of effects on your two-dimensional graphics.

Building a simple three-dimensional animation

It's easy to use the rotation properties to create some interesting animation effects. The following example uses an enterFrame event to generate the continuous animation of a two-dimensional object in three-dimensional space:

1. Select File > New and create a new ActionScript 3 document called 3dRotation.fla.
2. Name the default layer Image.
3. Import an image (File > Import > Import to Stage) or draw a rectangle on the Stage using the Rectangle tool.
4. Select the image or shape and convert it to a movie clip symbol (F8) named img.
5. Name the instance sq_mc on the Stage.
6. Add a new layer above the Image layer named Actions.
7. Select the keyframe on the Actions layer and open the Actions panel (F9).
8. Copy and paste the following code into the Actions panel:

9. Test the movie (Control > Test Movie) to see the animation run. Notice that img clip rotates along its y axis. You may visually expect a different result, but it makes sense if you think that it's rotating (spinning) around the (vertical) y axis.
10. Return to the code and change the rotationY value to a rotationZ value:

11. Test the movie to see the results. Notice that the image clip spins along its z axis, which is a line from our point of view through the center of the object back into space.
12. Return to the code and combine the rotationX and rotationZ property to see the z axis appear in perspective:

13. Test the movie to see the results. Notice that your two-dimensional object is now twisting through three-dimensional space.

Note: The ENTER_FRAME event is a part of all sprites and movie clips. When an enterFrame event handler is added to the timeline of either of these types of objects, the related event handler function is called every time a frame is entered. For sprites and movie clips containing a single frame, the event handler is called repeatedly at an interval matching the frame rate.

Clearing 3D transformations

Often you’ll want to clear the 3D rotation effects applied to an object after the animation ends. In some cases a slight distortion or blur may appear on the graphic. By clearing the matrix3D property you can return the graphic to its original state.

The following example demonstrates how to clear a 3D transformation on an object that rotates a full 360 degrees:

1. Select File > New and create a new ActionScript 3 document called clear3D.fla.
2. Name the default layer Assets.
3. Draw a rectangle on the Stage approximately 150 pixels wide and 150 pixels tall using the Rectangle tool.
4. Select the rectangle and use the Align panel to center the object on the Stage.
5. Select the rectangle and convert it to a movie clip symbol (F8) named rectangle.
6. Name the instance sq_mc on the Stage.
7. Add a new layer above the Assets layer and name it Actions.
8. Select the keyframe on the Actions layer and open the Actions panel (F9).
9. Copy and paste the following code into the Actions panel:

Notice the three lines of code in the onTweenFinish event handler function. The first line clears the matrix3D property followed by repositioning the object to its original point on the screen.

10. Test the movie (Control > Test Movie) to see the animation run.

Advanced approaches to 3D animation

Updates to the geom package in ActionScript 3 include a number of classes devoted to working with 3D transformations:

• Matrix3D
• Orientation3D
• PerspectiveProjection
• Utils3D
• Vector3D

The Matrix3D class allows you to perform transformations to all three axes at the same time, which can yield greater performance and code efficiency. The PerspectiveProjection class provides an easy way to apply a 3D transformation to an object or view without explicitly building a Matrix3D instance. The Orientation3D class, Utils3D class, and Vector3D class provide supporting utilities and objects to aid in creating the transformation.

It's easy to use the rotation properties to create some interesting animation effects. The following example uses an ENTER_FRAME loop to generate the continuous animation of a two-dimensional object in three-dimensional space:

1. Select File > New and create a new ActionScript 3 document called projectionCenter.fla.
2. Name the default layer Assets.
3. Draw a rectangle on the Stage approximately 150 pixels wide and 150 pixels tall using the Rectangle tool.
4. Select the rectangle and use the Align panel to center the object on the Stage.
5. Select the shape and convert it to a movie clip symbol (F8) named square.
6. Name the instance square1 on the Stage.
7. Select the instance, copy it, and press Control+Shift+V to paste a second square above the first. Name the new instance square2.
8. Draw a circle approximately 15 pixels wide and 15 pixels tall using the Oval tool.
9. Select the circle and convert it to a movie clip symbol named circle. Make sure the circle symbol uses a centered registration point.
10. Name the circle instance focalPt.
11. Add a new layer above the Assets layer named Actions.
12. Select the keyframe on the Actions layer and open the Actions panel (F9).
13. Copy and paste the following code into the Actions panel:

Notice that the first thing the script does is place the two-square back in space (z axis) in relation to the focalPt instance, which has no adjustment to its z axis.

14. Test the movie (Control > Test Movie) to see the animation run. Slowly drag the circle around the screen to see the projection of objects on the root timeline change in relation to the position of the focal point.

Read about the PerspectiveProjection class in the ActionScript 3 Language Reference for more information.

Another cool animation feature new to Flash Player 10 is the ability to create an armature using the Bone tool. An armature is a series of symbols or shapes that are linked so that they move in relation to each other when clicked on or animated. This method of animation is called inverse kinematics (IK). The classic example is a puppet on marionette strings. The puppet is made up of limbs bound together at the joints. When the puppeteer moves any of the strings, the limbs connected to that joint move in relation to the limb that changed position.

Armatures add new visual states to the Flash authoring environment (see Figure 9). The lines that connect the center points of the objects are called bones. The joints at which the bones connect can be selected so that unique properties and constraints can be applied to each section of the armature.

Note: The Bone tool was first added to Flash CS4 Professional for Flash Player 10 and later.

Building the armature

The first thing to mention is that armatures cannot be dynamically created at runtime. They must be created at authortime using the Bone tool in Flash Professional. This is easy to do.

Once you've created an armature, you can save it in a movie clip and animate it using ActionScript at runtime. So in terms of programmatic animation, working with armatures is a two-step process where the first step involves building the armature in a FLA file in Flash.

Follow these steps to create an armature:

1. Select File > New and create a new ActionScript 3 document called armature.fla.
2. Name the default layer Assets.
3. Draw a circle on the Stage approximately 10 pixels wide and 10 pixels tall using the Oval tool.
4. Select the circle and use the Align panel to center the object on the Stage.
5. Select the circle and convert it to a symbol (F8). Make sure the registration point is set to center.
6. Duplicate the instance four times and place the duplicates above, below, and to the sides of the first circle. Add two more duplicates below the circles on either side (see Figure 10).

7. Select the Bones tool from the Toolbar. Click on the circle at the top of the group and drag downward to the circle below. The first click defines the root joint, from which all other joints will hinge. Notice the line drawn to represent the bone marker.
8. Click and drag the Bone tool from circle to circle until you connect them all in a logical order. You can delete bone section by selecting them and pressing the Delete button. It's interesting to experiment to see how the armature behavior changes based on the way you configure the joints.
9. Click the circles at the end joints of the bone markers and edit the constraint properties in the Property inspector. First try to enable all the transformation properties and then try adding constraints and removing properties (see Figure 11).

10. To set up the armature for runtime manipulation, click on the first keyframe in the armature layer to select it. In the Property inspector, change the Type options field from Authortime to Runtime (see Figure 12).

Animating the armature

In this sample the animation actually happens as part of the behavior of the armature. When you publish the movie, you can click on the circles to see them move in relation to one another. To visualize the segments of the armature better, and to provide a foundation for some interesting animation possibilities, the following code addition will analyze the armature using ActionScript and draw lines between the joints.

Follow these steps to finish off the sample:

1. Return to the armature.fla file.
2. Create a new layer named Actions.
3. Select the first frame of the Actions layer and open the Actions panel. Copy and paste the following code into the panel:

4. Test the movie (Control > Test Movie) to see the results. Click on the circles and drag them around. Observe how movement and constraints on movement adjust based on the settings of the joints in the armature.
5. Experiment with changing the joint values to see what happens.

For more information about this feature, see Using inverse kinematics in the Flash CS5 Help documentation. Also be sure to read Chris Georgenes's article, Character animation with the Bone tool in Flash.

Another powerful animation feature related to ActionScript 3 is the ability to copy a timeline-based motion tween and paste it as ActionScript 3 code. This allows you to create dynamic, script-based animation controls for 2D or 3D effects—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 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 Professional applies property values as an array to the AnimatorFactory class.

The process for creating an animation using Copy Motion as ActionScript 3 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 or Copy Motion.

Tip: If you like your tween animation and would like to save it for reuse as a Motion Preset, you can right-click the instance and select the Save as Motion Preset option.

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 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 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 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 command.

In this demonstration you will use the Copy Motion as ActionScript 3 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 animation:

1. Create a new ActionScript 3 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 option.
8. Create a new ActionScript 3 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:

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:

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 Motion XML animation:

1. Create a new ActionScript 3 file and save it as tween5.fla.
2. Draw a shape on the Stage and convert it to a symbol named tweenShape.
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 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:

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:

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:

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 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 Language Reference.

The BitmapData class allows you to generate bitmap images dynamically in ActionScript. It's used most commonly to manipulate video or imported images but it can also be used to render graphics from scratch or from vector content.

While there are many uses for this powerful class, a common, day-to-day use is to take snapshots of items on the screen. The BitmapData class can take snapshots of vector (and bitmap) objects and paint them into a new image as a single bitmap. Beyond the ability to flatten groups of content, it's often desirable to work with bitmaps for large animations or screen transitions, since bitmaps do not have to be redrawn for every frame, as vectors do. This approach can greatly improve Flash Player performance.

Following these steps to create a transition using the BitmapData class:

1. Select File > New and create a new ActionScript 3 document called bitmapdata.fla.
2. Name the default layer Actions.
3. Select the first frame of the Actions layer and open the Actions panel.
4. Copy and paste the following code in the panel:

5. Test the movie (Control > Test Movie) to see the transition play. Notice that you can see through the overlapping vectors. The script above generates 200 randomly sized and placed rectangles on the screen inside of a sprite container. With over 200 vector shapes being recalculated each frame, this animation has the potential to cause performance and drawing problems.
6. Go back to the code and replace the last line with the following update:

7. Test the movie again to see the results. Notice that the flattened bitmap does not show overlapping layers of vectors during the transition. Overall performance is improved in this route allowing for other animations to occur on the screen simultaneously. Another benefit is that you can apply matrix transformations and bitmap filters like blurs or PixelBender filters during the transition.
8. For more information, please see the Flash Professional documentation for the BitmapData class.

Where to go from here

This article demonstrates how easy it is to use ActionScript to create an animation. Now you are ready to add interesting effects to your rich media projects with a minimal amount of work. To learn more about working with ActionScript 3, visit the ActionScript Technology Center to find online tutorials, book excerpts, and sample files. To look up syntax and research usage information, see the detailed Flash Professional online documentation.

Experiment with creating different types of animations and explore how you can reuse the tweens in your projects. As you become more familiar with working with the transition and Tween classes, and using the Copy Motion as ActionScript 3 command, you'll be able to dive deeper into the possibilities of dynamically generating motion XML definitions and find new ways to apply these strategies when developing your own ActionScript 3 classes.