Creating animation in ActionScript 3.0

Using the transition and Tween classes

You can use the transition and Tween classes to add animations to movie clips and components using ActionScript. If you don't use the transition or the Tween class, you'll have to write your own code to animate movie clips, or modify their alpha and coordinate values. If you want to add easing to the animation, the ActionScript (and mathematics) can quickly become complex. However, if you want to change the easing on a particular animation and you are using these prebuilt classes, then you can try choosing a different type of easing class instead of trying to figure out what new mathematical equations you need to create a smooth animation.

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

   

   Figure 1. Registration point set to the upper-left corner by default

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:
   

   import fl.transitions.*;
   import fl.transitions.easing.*;
    
   TransitionManager.start(img1_mc, {type:Zoom, direction:0, duration:3, easing: Bounce.easeOut});

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 2). Click OK.

   

   Figure 2. Setting the registration to the center by clicking the middle square

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

   import fl.transitions.*;
   import fl.transitions.easing.*;
    
   TransitionManager.start(img2_mc, {type:Zoom, direction:0, duration:3, easing: Bounce.easeOut});

   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.0 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:

   import fl.transitions.*;
   import fl.transitions.easing.*;
    
   function finishHandler(event:TweenEvent):void
   {
       // Place your actions here
       trace("MOTION_FINISH time = "+event.time);
   }
   var myTween:Tween = new Tween(img1_mc, "y", Elastic.easeOut, 0, 250, 3, true);
   myTween.addEventListener(TweenEvent.MOTION_FINISH, finishHandler);
   

   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.0 Language and Components Reference for more information.

Page 3 of 8

Previous Page

Next Page