Combining the Transition and Tween Classes

You can generate some interesting effects when you combine the Transition and Tween classes. You can use the Transition 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 there are many animation possibilities for objects in your SWF files. You can take advantage of the Tween class’ continueTo() and yoyo() methods, or the onMotionFinished event handler to create a truly unique effect.

In the following example, you combine the Transition 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.

1. Create a new Flash document, and save the file as combination.fla.
2. Select Insert > New Symbol to create a new movie clip symbol. Name the symbol imgHolder, and click OK.
3. Click Scene 1 in the Edit bar to return to the main Timeline.
4. Open the Library panel (Window > Library), and right-click (Windows) or Control-click (Macintosh) the imgHolder clip and select Linkage from the context menu.
5. Give the imgHolder clip the linkage identifier imgHolder_id and click OK.
6. Click Insert Layer (on the Timeline) to add a new layer above Layer 1. Rename the new layer actions.

7. Add the following ActionScript on frame 1 of the actions layer:

   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:0, duration:3, easing:Elastic.easeInOut, 
     startPoint:6, param2:empty});
    }; 
   
    var my_mcl:MovieClipLoader = new MovieClipLoader();
    my_mcl.addListener(mcl_obj);
    my_mcl.loadClip("http://www.flash-mx.com/images/image1.jpg", 
   this.attachMovie("imgHolder_id", "img_mc", 
     this.getNextHighestDepth()));
    

   This code is separated into three main sections.

   The first section 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 can reduce the amount of code you type, and save you from potential typos.

   The second section of ActionScript creates a listener object for the MovieClipLoader class instance, which you create later 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 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 into a movie clip that dynamically attaches to the Stage from the library.

8. Save your document, and then 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. Not bad for only 10 lines of code, and no mucking around with the Timeline!

Where To Go from Here

This article demonstrates how easy it is to use the Tween and Transition classes to create an animation. Notice that this tutorial didn’t even involve difficult math or complex equations. Now you are ready to add interesting effects to your Flash documents with a minimal amount of work. Reducing the amount of work it takes to accomplish your tasks is typically good, and leaves more time for television, donuts, and reminiscing about the days of our youth.