Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Animation, Filters, and Drawings > About the Tween and TransitionManager classes > Animating with the TransitionManager and Tween classes

Animating with the TransitionManager and Tween classes

You can use the TransitionManager and Tween classes in Flash to add animations to movie clips, components, and frames using ActionScript. If you don't use the TransitionManager or the Tween class, you have to write custom code to animate movie clips or modify their level of transparency (alpha) and coordinates (location). If you add easing to the animation, the ActionScript (and mathematics) can become complex quickly. However, if you want to change the easing on a particular animation and you use these prebuilt classes, you can select a different class instead of trying to figure out the new mathematical equations you need to create a smooth animation.

The following procedure animates a movie clip so that it uses the TransitionManager class to zoom in on the Stage.

To animate a movie clip using the TransitionManager class:

1. Select File > New and select Flash Document.
2. Click OK to create the new FLA file.
3. Save the FLA file as zoom.fla.
4. Select File > Import > Import to Stage, and select an image on your hard disk 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.

5. Click Open to import the image.
6. Select the imported image on the Stage and select Modify > Convert to Symbol
7. Name the symbol img1, and make sure you set the behavior to Movie Clip.

   By default, the registration point of the symbol is in the upper-left corner of the symbol.

8. Click OK to convert the bitmap image into a movie clip.
9. With the image still selected, open the Property inspector (Window > Properties > Properties), and assign the movie clip the instance name img1_mc.
10. Select Frame 1 of the main Timeline and add the following ActionScript to the Actions panel:

    mx.transitions.TransitionManager.start(img1_mc, {type:mx.transitions.Zoom, direction:0, duration:1, easing:mx.transitions.easing.Bounce.easeOut, param1:empty, param2:empty});
    

    NOTE

    For information on working with packages, see Working with filter packages.

11. Select Control > Test Movie to test the animation.

    The image grows and has a slight bouncing effect before it returns to its original size. If the animation moves too quickly, increase the animation's duration (in the previous code snippet) from one second to two or three seconds (for example, duration:3).

    You might notice that the image is anchored in the upper-left corner and grows toward the lower-right corner. This is different from the preview you see in the Transitions dialog box.

    Creating complex animations is easy using the Tween and TransitionManager classes and doesn't require you to create motion or shape tweens on the timeline. Most importantly, you don't need to write complex math to create easing methods. If you want images to zoom in from the center instead of anchoring on a corner, modify the symbol's registration point when you convert the image from a bitmap into a symbol.

To zoom images in from the center of the image:

1. Complete the steps in the previous procedure.
2. Open the zoom.fla file, and select File > Save As to save a new copy of the document.

   Save the file as zoom2.fla.

3. Drag a copy of the bitmap symbol from the Library panel onto the Stage beside the current movie clip symbol.
4. With the bitmap image still selected on the Stage, press F8 to convert the symbol into a movie clip.

   Name the symbol img2.

5. In the Convert to Symbol dialog box, click the center of the coordinate grid to set the registration point to the center of the bitmap and click OK.

   
   
   

6. Select the new movie clip on the Stage and use the Property inspector to give it an instance name of img2_mc.
7. Select Frame 1 of the main Timeline and add the following ActionScript to the existing code:

   mx.transitions.TransitionManager.start(img2_mc, {type:mx.transitions.Zoom, direction:mx.transitions.Transition.IN, duration:1, easing:mx.transitions.easing.Bounce.easeOut});
   

8. Select Control > Test Movie to test the animation.

   The second movie clip grows from the center of the symbol instead of the corner.

   NOTE

   Some transitions are sensitive to where you locate the registration point. Changing the registration point can have a dramatic effect on how the animation looks in a SWF file. For example, if the registration point is in the upper-left corner (default) when you use the Zoom transition, the transition begins from that location.

For information on each method and property of the Tween class and TransitionManager class, see ActionScript 2.0 Components Language Reference.

For a sample source file that adds scripted animation using the Tween and TransitionManager classes, tweenProgress.fla, see the Flash Samples page at www.adobe.com/go/learn_fl_samples. Download the Samples zip file and navigate to the ActionScript2.0/Tween ProgressBar folder to access this sample.

Flash CS3