Products

Technologies

A–C

D–H

I–Z

Developer services

Project centers

Developer resources

Community resources

Integration

Product documentation

Downloads

Samples

Training and books

Newsletters

Blogs

ADC program

Additional resources

Using the Tween and Transition Classes in Flash MX 2004

Using the Transition and Tween Classes

You can use the Transition and Tween classes in Flash MX 2004 and Flash MX Professional 2004 to add animations to movie clips, components, and frames using ActionScript. If you don't use the Transition or the Tween class, you have to write your own code to animate movie clips, or modify their alpha and coordinates. 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 choose a different 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:

Select File > New and then Flash Document. Click OK to create the new FLA file.
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.
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. Convert the image into a symbol, and set the registration to the upper-left corner.
Click OK to convert the bitmap image into a movie clip.
Open the Property inspector (with the image still selected), and assign the movie clip the instance name img1_mc.

Select frame 1 of the main Timeline. Add the following ActionScript into 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});

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 snippet) from one second to two or three seconds.

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

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

Figure 2. Convert the image into a symbol, and set the registration to the center.
Select the new image on the Stage, and give it the instance name img2_mc in the Property inspector.
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:0, duration:1, easing:mx.transitions.easing.Bounce.easeOut, param1:empty, param2:empty});
```
If you modified the duration in step 7 above, modify this code snippet to the use the same number.
Select Control > Test Movie to test the animation. The second movie clip now grows from the center of the symbol instead of 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 write complex math to create easing methods.

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 an SWF file.

A–C

D–H

I–Z