Flash CS3 Documentation

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

Combining the TransitionManager and Tween classes

You can generate interesting effects when you combine the TransitionManager and Tween classes. You can use the TransitionManager class to move a movie clip along the x-axis while you adjust the same clip's _alpha property using the Tween class. Each class can use a different easing method, which means you have many animation possibilities for objects in your SWF files. You can take advantage of the continueTo() and yoyo() methods in the Tween class or the onMotionFinished event handler to create a unique effect.

You combine the TransitionManager and Tween classes to animate a dynamically loaded movie clip and fade it in on the Stage after it fully loads from the remote server, as the following procedure shows.

To use the TransitionManager and Tween classes together:

1. Create a new Flash document and save the file as combination.fla.
2. Add the following ActionScript on Frame 1 of the Timeline:

   import mx.transitions.*;
   import mx.transitions.easing.*;
   
   var mcl_obj:Object = new Object();
   mcl_obj.onLoadInit = function(target_mc:MovieClip) {
       new Tween(target_mc, "_alpha", Strong.easeIn, 0, 100, 2, true);
       TransitionManager.start(target_mc, {type:Fly, direction:Transition.IN, duration:3, easing:Elastic.easeInOut, startPoint:6});
   };
   
   var my_mcl:MovieClipLoader = new MovieClipLoader();
   my_mcl.addListener(mcl_obj);
   my_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", this.createEmptyMovieClip("img_mc", this.getNextHighestDepth()));
   

   This code is separated into three main sections.

   The first section of code imports the classes within the transitions package as well as the transitions.easing package. You import the entire transitions package in this example so you do not need to enter the fully qualified class name for the Tween class, TransitionManager class, or the selected transition (in this case, Fly). This process can reduce the amount of code you type and save you from potential typographical errors.

   The second section of ActionScript creates a listener object for the MovieClipLoader class instance, which you create in the third section of code. When the target movie clip loads into the MovieClipLoader instance, the onLoadInit event triggers and executes the block of code, which calls both the Tween class and the TransitionManager class. This event handler fades in the target movie clip because you modify the _alpha property in the Tween class, and flies the target movie clip along the x-axis.

   The third section of ActionScript code creates a MovieClipLoader instance and applies the listener object that you created earlier (so the target movie clip loader instance can listen for the onLoadInit event). Then you load the target JPEG image into a movie clip that you create dynamically by calling the createEmptyMovieClip() method.

3. Save your document and select Control > Test Movie to view the animation in the test environment.

   After the external JPEG image finishes downloading from the server, the image fades in gradually and animates from right to left across the Stage.

For information on using the Tween class, see Using the Tween class.

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