Creating animation in ActionScript 3.0

Creating animations that repeat

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:

import fl.transitions.*;
import fl.transitions.easing.*;
 
var ball_tween:Object = new Tween(ball_mc, "x", Regular.easeIn, 0, 300, 3, true);
function handleFinish(event:TweenEvent):void {
    ball_tween.continueTo(0, 3);
};
ball_tween.addEventListener(TweenEvent.MOTION_FINISH, handleFinish);

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.0 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 3).

   

   Figure 3. Red rectangle as tall as the Stage and 20 pixels wide

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 4).

   

   Figure 4. Rectangle with no fill and with dimensions outlining the Stage

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:

   import fl.transitions.*;
   import fl.transitions.easing.*;
    
   var box_tween:Tween = new Tween(box_mc, "x", Regular.easeInOut, 0, stage.stageWidth, 3, true);
   function handleFinish(event:TweenEvent):void {
       box_tween.yoyo();
   }
   box_tween.addEventListener(TweenEvent.MOTION_FINISH, handleFinish);

9. Select Control > Test Movie. The box animates from left to right, and back. If the animation isn't smooth, you might want to increase the document's frame rate from 12 fps to 24 fps. Test the movie again to see the changes to the animation.

10. As the box approaches the right edge of the Stage, you'll notice that the box animates outside of the stroke that you create 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:

    import fl.transitions.*;
    import fl.transitions.easing.*;
     
    var box_tween:Tween = new Tween(box_mc, "x", Regular.easeInOut, 0, stage.stageWidth - box_mc.width, 3, true);
    function handleFinish(event:TweenEvent):void {
        box_tween.yoyo();
    }
    box_tween.addEventListener(TweenEvent.MOTION_FINISH, handleFinish);

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

Page 4 of 8

Previous Page

Next Page