Using the Tween and Transition Classes in Flash MX 2004

Jen deHaan

Adobe
flashthusiast.com

Adding Tweens and Transitions to a File

The Tween and Transition prebuilt classes enable you to add animations to parts of your movie using simple ActionScript. The Flash authoring environment currently uses the prebuilt classes for transitions in a screen-based application. To create a slide presentation or form application, you can select behaviors that add different kinds of transitions between slides. To see these transitions in action, follow these steps:

1. Open Flash MX Professional 2004
2. Select File > New to create a new slide presentation.
3. Select Flash Slide Presentation from the General tab, and click OK.
4. Select Window > Development Panels > Behaviors to open the Behaviors panel, and click the Add Behavior button.
5. Select Screen > Transition from the pop-up menu to launch the Transitions dialog box.

Flash ships with 10 different transitions, which you can customize using the easing methods, and several optional parameters. Easing refers to gradual acceleration or deceleration during an animation. For example, a ball might gradually increase its speed near the beginning of an animation, but slow down right at the end of the animation before it arrives at a full stop. There are many different equations for the acceleration and deceleration, which change the easing animation accordingly. Easing helps your animations appear more realistic, which you'll discover in this article.

Flash MX Professional 2004 includes the following transitions:

• Iris: Reveals the screen using an animated mask of a shape that zooms in.
• Wipe: Reveals the screen using an animated mask of a shape that moves horizontally.
• Pixel Dissolve: Masks the screen using disappearing or appearing rectangles.
• Blinds: Reveals the next screen using an animated mask of rectangles that squeeze.
• Fade: Fades the screen in or out.
• Fly: Slides in the screen from a particular direction.
• Zoom: Zooms the screen in or out.
• Squeeze: Scales the current screen horizontally or vertically.
• Rotate: Rotates the current screen.
• Photo: Has the screen appear like a photographic flash.

Each transition has slightly different customizations that you can apply to the animation. The Transitions dialog box enables you to preview a sample animation before you apply the effect to the slide or form. To see the kind of ActionScript that these behaviors apply, apply the following settings in the Transitions dialog box.

• Select the Zoom transition.
• Reduce the duration to one second.
• Set the easing method to Bounce.

Click OK to apply the settings and close the dialog box. About 15 lines of ActionScript are inserted directly onto the slide itself. You can see the relevant transition code in the following snippet:

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

The previous line of code calls the TransitionManager class, and then applies the Zoom transition with the specified easing method mx.transitions.easing.Bounce.easeOut. In this case, the transition applies to the selected slide. If you want to apply this effect to a movie clip instead, you can modify the ActionScript to use in your Flash animations. Fortunately, modifying the code to work with a movie clip symbol is as easy as changing the first parameter from eventObj.target to the desired movie clip's instance name.

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:

1. Select File > New and then Flash 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. Convert the image into a symbol, and set the registration to the upper-left corner.

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:

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

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

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

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:

   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.

6. 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.

About Easing Classes and Methods

In the previous example, you used the Bounce easing class to add a slight bouncing effect to the movie clip. In addition to Bounce, Flash offers five more easing classes:

• Back: Extends the animation beyond the transition range at one or both ends once to resemble an overflow effect.
• Bounce: Adds a bouncing effect within the transition range at one or both ends. The number of bounces relates to the duration—longer durations produce more bounces.
• Elastic: Adds an elastic effect that falls outside the transition range at one or both ends. The amount of elasticity is unaffected by the duration.
• Regular: Adds slower movement at one or both ends. This feature enables you to add a speeding-up effect, a slowing-down effect, or both.
• Strong: Adds slower movement at one or both ends. This effect is similar to Regular easing, but it's more pronounced.
• None: Adds an equal movement from start to end without effects, slowing, or speeding up. This transition is also referred to as a linear transition.

The previous six easing classes each have three easing methods:

• easeIn: Provides the easing effect at the beginning of the transition.
• easeOut: Provides the easing effect at the end of the transition.
• easeInOut: Provides the easing effect at the beginning and end of the transition.

If you want to open these classes in Flash or your ActionScript editor, you can find the class files in C:\Program Files\Macromedia\Flash MX 2004\<language>\First Run\Classes\mx\transitions\easing\ folder on Windows (assuming a default installation), or the HD:Applications:Macromedia Flash MX 2004:First Run:Classes:mx:transitions:easing folder on the Macintosh.

In the previous example, you saw that the easing class/method used was mx.transitions.easing.Bounce.easeOut. When looking in the directories on your hard drive, notice that the ActionScript refers to the easeOut method within the Bounce.as class. You find this AS file in the easing directory.

About the Tween Class

The Tween class enables you to move, resize, and fade movie clips easily on the Stage. The following code is from the Tween.as class file.

/*  constructor for Tween class

obj: reference - the object which the Tween targets
prop: string - name of the property (in obj) that will be affected
begin: number - the starting value of prop
duration: number - the length of time of the motion; set to infinity if negative or omitted
useSeconds: boolean - a flag specifying whether to use seconds instead of frames
*/

function Tween (obj, prop, func, begin, finish, duration, useSeconds) {
    /* omitted to save space. */
}

For example, imagine that you want to move a movie clip across the Stage. You can add keyframes to the Timeline and insert a motion or shape tween between them, or you can write some code in an onEnterFrame event handler, or you could use the setInterval() function to call a function at periodic intervals. If you use the Tween class, you have yet another option where you can modify a movie clip's _x and _y properties. You can also add the easing methods demonstrated earlier. In order to take advantage of the Tween class, you can use the following ActionScript:

new mx.transitions.Tween(ball_mc, "_x", mx.transitions.easing.Elastic.easeOut, 0, 300, 3, true);

The previous ActionScript snippet creates a new instance of the Tween class, which animates the ball_mc movie clip on the Stage along the X-axis (left to right). The movie clip animates from 0 pixels to 300 pixels in three seconds, and the ActionScript applies an elastic easing method. This means the ball extends past 300 pixels on the x-axis before animating back using a fluid motion effect.

If you use the Tween class in more than one place in your Flash document, you might opt to use the import keyword. This enables you to import the Tween class and easing methods rather than give the fully qualified class names each time you use them, as shown in the following example:

import mx.transitions.Tween;
import mx.transitions.easing.*;
new Tween(ball_mc, "_x", Elastic.easeOut, 0, 300, 3, true);

Here you use two separate import statements. The first statement imports the mx.transitions.Tween class only, and the second import statement uses the wildcard (*) shortcut to import each of the six easing classes using a single line of code. The second statement imports an entire package of classes. Flash documentation defines package as "directories that contain one or more class files and reside in a designated classpath directory." In this case, the package resides in the <Flash Install directory>\<language>\First Run\Classes\mx\transitions\easing folder. You might agree that importing an entire package is much better than having to import the six classes separately. Instead of having to refer to mx.transitions.Tween, your ActionScript directly refers to the Tween class. Likewise, instead of using the fully qualified class name for the easing classes (mx.transitions.easing.Elastic.easeOut), you simply type Elastic.easeOut.

Using similar code, you set the _alpha property to fade instances in and out, instead of _x, as shown in the following code snippet:

import mx.transitions.Tween;
import mx.transitions.easing.*;
new Tween(ball_mc, "_alpha", Strong.easeIn, 100, 0, 3, true);

Instead of moving around the Stage, now ball_mc fades from 100 percent visible to completely transparent in three seconds flat. If you want the symbol to fade out quicker, then you can change the duration parameter from 3 to 1 or 2.

Instead of using seconds, you can fade the symbol over a few frames. To set the duration in frames instead of seconds in the Tween class, you change the final parameter, useSeconds, from true to false. When you set the parameter to true, you tell Flash that the specified duration is in seconds. Or, if you set the parameter to false, the duration is the number of frames you want to use for the tween. For example, examine the following code:

import mx.transitions.Tween;
import mx.transitions.easing.*;
new Tween(ball_mc, "_alpha", Strong.easeIn, 100, 0, 24, false);

The previous snippet fades out the ball_mc instance using the Strong.easeIn easing method. Instead of fading the instance for three seconds, it fades the instance across 24 frames. Using frames instead of seconds offers you a lot more flexibility, but remember that the duration is tied to the frame rate of the current Flash document. If your Flash document uses a frame rate of 12 frames per second (fps), then the previous code snippet fades the instance over two seconds (24 frames/12 fps = 2 seconds). However, if your frame rate is 24 fps, then the same code fades the instance over one second (24 frames/24 fps = 1 second). If you use frames to measure duration, you can significantly change the speed of your animation when you change the document's frame rate, without modifying your ActionScript.

The Tween class has a few more cool tricks that you can use. For example, you can write an event handler that triggers when the animation completes, as seen in the following snippet:

import mx.transitions.Tween;
import mx.transitions.easing.*;
var tween_handler:Object = new Tween(ball_mc, "_alpha", Strong.easeIn, 100, 0, 3, true);
tween_handler.onMotionFinished = function() {
    //place your action here
    trace("onMotionFinished triggered");
};

If you test this ActionScript in your FLA file, you see the message "onMotionFinished triggered" appear in the Output panel after ball_mc finishes fading on the Stage.

About Continuing Animations

What if you want to move the ball after the initial animation completes? There are at least two ways you can handle this. The first, and perhaps the most obvious solution, is to re-animate the ball using the onMotionFinished event handler function. While this solution works, the Tween class offers a simpler solution: the continueTo() method. The continueTo() method instructs the tweened animation to continue from its current value to a new value. You can see this in the following ActionScript:

import mx.transitions.Tween;
import mx.transitions.easing.*;
var ball_tween:Object = new Tween(ball_mc, "_x", Regular.easeIn, 0, 300, 3, true);
ball_tween.onMotionFinished = function() {
    ball_tween.continueTo(0, 3);
};

After the initial tween finishes, the ball_mc movie clip tweens back to its original position at 0 pixels. You can see the function prototype for the continueTo() method in the following snippet (edited for space):

function continueTo (finish:Number, duration:Number):Void {
    /* omitted to save space. */
}

There are only two arguments that pass to the continueTo() method, instead of the seven arguments for the Tween method, as seen in the following snippet:

function Tween (obj, prop, func, begin, finish, duration, useSeconds) {
    /* omitted to save space. */
}

The five missing arguments (obj, prop, func, begin, and useSeconds) in the continueTo() method use the arguments that you defined earlier in the call to the Tween class. When you call the continueTo() method, you assume the obj, prop, func (easing type), and useSeconds arguments are the same as in the earlier call to the Tween class. The continueTo() method uses the finish value from the call to the Tween class, instead of specifying a value for the begin argument.

But what does this all mean? Take another look at the following ActionScript:

import mx.transitions.Tween;
import mx.transitions.easing.*;
var ball_tween:Object = new Tween(ball_mc, "_x", Regular.easeIn, 0, 300, 3, true);
ball_tween.onMotionFinished = function() {
     ball_tween.continueTo(0, 3);
};

This code moves the ball_mc instance along the X-axis from 0 pixels to 300 pixels in three seconds. After the animation finishes, the onMotionFinished event handler triggers and calls the continueTo() method. The continueTo() method tells the target object (ball_mc) to proceed from its current position and animate for three seconds along the X-axis to 0 pixels, and to use the same easing method. You use the values that you specify in the earlier call to the Tween constructor for any parameters that you don't define in the continueTo() method. If you don't specify a duration for the continueTo() method, it uses the duration you specify in the call to the Tween constructor.

Creating Animations That Continue Endlessly

You can even make an animation continue animating back and forth along the X-axis without stopping. The Tween class also accommodates this kind of animation with the aptly named yoyo() method. The yoyo() method waits for the onMotionFinished event handler to execute, and then it reverses the begin and finish parameters. The animation begins again, as demonstrated in the following example.

1. Select File > New and create a new Flash document called yoyo.fla.

2. Select the Rectangle tool, and set the stroke color to No Color and the fill color to red in the Tools panel. Draw a rectangle on the Stage that is approximately 20 pixels wide and the entire height of the Stage (see Figure 3).

   

   Figure 3. Draw a rectangle on the Stage.

3. Select the Selection tool, and click the rectangle to select the fill. Press F8 to convert the shape into a movie clip. Name the symbol box, set the behavior to Movie Clip, and set the registration point to the upper-left corner. Click OK when you are finished.
4. Select the rectangle on the Stage, and use the Property inspector to give the rectangle the instance name box_mc. Before you deselect the instance, set both the X and Y coordinates to 0 pixels to move the shape to the upper-left corner of the Stage.
5. Insert a new layer in the Timeline above Layer 1. Rename the layer stroke.
6. Select the Rectangle tool, and change the fill color to No Color and the stroke color to black in the Tools panel.

7. Draw a rectangle on the stroke layer, and then select the stroke using the Selection tool. Change the width of the rectangle to match the width of the Stage (550 pixels by default), match the height of the rectangle to the height of the Stage (400 pixels by default). Then set the X and Y coordinates of the stroke to 0 pixels so the stroke outlines the Stage dimensions.

   

   Figure 4. The fill-less rectangle outlines the Stage.

8. Insert another new layer above the two existing layers, like you did in step 5. Rename the new layer actions. Add the following ActionScript to frame 1 of the actions layer:

   import mx.transitions.Tween;
   import mx.transitions.easing.*;
   var box_tween:Object = new Tween(box_mc, "_x", Regular.easeInOut, 0, Stage.width, 3, true);
   box_tween.onMotionFinished = function() {
        box_tween.yoyo();
   };
   

9. Select Control > Test Movie. The box animates from left to right, and back. If the animation isn't smooth, you might want to increase the document's frame rate from 12 fps to 24 fps.

10. As the box approaches the right edge of the Stage, you'll notice that the box animates outside of the stroke that you create in step 7. While this might not seem like a huge deal in the authoring environment, if you view your animation in a web browser (File > Publish Preview > HTML) you see that the rectangle disappears when it approaches the right edge of the Stage. To fix this, you need to animate the rectangle from 0 pixels to the width of the Stage minus the width of the box_mc movie clip. You can see this in the following revised code from step 8:

    import mx.transitions.Tween;
    import mx.transitions.easing.*;
    var box_tween:Object = new Tween(box_mc, "_x", Regular.easeInOut, 0, Stage.width-box_mc._width, 3, true);
    box_tween.onMotionFinished = function() {
        box_tween.yoyo();
    };
    

Now test the animation, and the box stops easing before it exits the boundaries of the Stage.

About Applying Easing Methods to Version 2 Components

Another use for the various easing methods is to apply them on version 2 components. Note that you can apply the easing methods only to the following components: Accordion, ComboBox, DataGrid, List, Menu and Tree. Each of the components allows different customizations using the easing methods. For example, the Accordion, ComboBox and Tree components enable you select an easing class to use for their respective open and close animations. By contrast, the Menu component only enables you to define the number of milliseconds that the animation takes.

Applying Easing Methods to an Accordion Component

This example shows you how to add an Accordion component to a Flash document, add a few children screens and change the default easing method and duration. If you decide to use this code in an actual project, you will probably want to reduce the value of the openDuration property, because really slow animations tend to annoy users when they open and close the accordion.

Follow these steps to apply a different easing method to the Accordion component:

1. Create a new Flash document and save it as accordion.fla.
2. Drag a copy of the Accordion component onto the Stage and give it the instance name my_acc in the Property inspector.
3. Insert a new layer above Layer 1 and rename it actions.

4. Add the following ActionScript to frame 1 of the actions layer:

   import mx.transitions.easing.*;
   my_acc.createChild(mx.core.View, "studio_view", {label:"Studio"});
   my_acc.createChild(mx.core.View, "dreamweaver_view", {label:"Dreamweaver"});
   my_acc.createChild(mx.core.View, "flash_view", {label:"Flash"});
   my_acc.createChild(mx.core.View, "coldfusion_view", {label:"ColdFusion"});
   my_acc.createChild(mx.core.View, "contribute_view", {label:"Contribute"});
   my_acc.setStyle("openEasing", Bounce.easeOut);
   my_acc.setStyle("openDuration", 3500);
   

   This code imports the easing classes, so you can type Bounce.easeOut instead of referring to each of the classes with fully-qualified names like mx.transitions.easing.Bounce.easeOut. Next, you add five new child panes to the Accordion component (Studio, Dreamweaver, Flash, ColdFusion, and Contribute). The final two lines of code set the easing style from the default easing method to Bounce.easeOut, and set the length of the animation to 3500 milliseconds (3.5 seconds).

5. Save the document, and then select Control > Test Movie to preview the file in the test environment.
6. Click each of the different header (title) bars to view the modified animations, and switch between each pane. If you want the animation to increase its speed, decrease openDuration from 3.5 seconds to a smaller number. The default duration for the animation is 250 milliseconds, or a quarter of a second.

Applying Easing Methods to the ComboBox

The process to change the default easing method on a ComboBox component is similar to the previous example in which you modify the Accordion component's animation. In the following example, you use ActionScript to dynamically add the component to the Stage at runtime.

1. Create a new Flash document and save it as combobox.fla.

2. Drag a copy of the ComboBox component from the Components panel onto the Stage. Select the component, and then press the Backspace or Delete key to delete it from the Stage.

   Note: Although you remove the component from the Stage, the component still remains in the current document's library.

3. Insert a new layer and rename it actions. Make sure the actions layer is above Layer 1.

4. Add the following ActionScript to frame 1 of the actions layer:

   import mx.transitions.easing.*;
   this.createClassObject(mx.controls.ComboBox, "my_cb", this.getNextHighestDepth());
   var product_array:Array = new Array("Studio", "Dreamweaver", "Flash", "ColdFusion", "Contribute", "Breeze", "Director", "Flex");
   my_cb.dataProvider = product_array;
   my_cb.setSize(140, 22);
   my_cb.setStyle("openDuration", 2000);
   my_cb.setStyle("openEasing", Elastic.easeOut);
   
   

   The this keyword in the second line of code refers to the main Timeline of the SWF file. After you import each of the easing methods (which occurs in the first line of code) the createClassObject() method creates an instance of the ComboBox component. This line of code puts the component on the Stage at runtime, and gives it the instance name my_cb.

   Next, you create an array named product_array that contains a list of Macromedia software. You use this array in the following line of code to set the dataProvider property to the array of product names. Then you use the setSize() method to resize the component instance, set openDuration to 2000 milliseconds (2 seconds), and change the easing method to Elastic.easeOut.

   Note: Like earlier examples, you import the easing classes, which enable you to use the shortened version of the class name instead of using the fully qualified class name of mx.transitions.easing.Elastic.easeOut.

5. Save the current document, and select Control > Test Movie to view the document in the test environment.

6. Click the ComboBox component on the Stage to animate your dropdown list of product names using the specified easing class.

   Note: Just because you can use an easing method such as Elastic or Bounce for your ComboBox or Accordion components doesn't mean you should. Some users might find it distracting if your options take a long time to stop moving before they can read and select from the menu. Test your individual applications and settings, and decide whether the easing methods enhance or detract from your project.

Animating the DataGrid

Flash MX Professional also enables you to tweak the animations you use when you select items in a component (such as the DataGrid, Tree, ComboBox or List components). Although the animations are subtle, in some cases it is nice to be able to control small details or just speed up the animation. For an example, follow these steps:

1. Create a new Flash document and save it as datagrid.fla.
2. Drag an instance of the DataGrid component onto the Stage and give it the instance name my_dg.
3. Insert a new layer and rename it actions. Make sure you place the actions layer above Layer 1.

4. Add the following ActionScript to the actions layer:

   import mx.transitions.easing.*;
   my_dg.setSize(320, 240);
   my_dg.addColumn("product");
   my_dg.getColumnAt(0).width = 304;
   my_dg.rowHeight = 60;
   my_dg.addItem({product:'Studio'});
   my_dg.addItem({product:'Dreamweaver'});
   my_dg.addItem({product:'Flash'});
   my_dg.setStyle("selectionEasing", Elastic.easeInOut);
   my_dg.setStyle("selectionDuration", 1000);
   
   

   This ActionScript imports the easing classes, and resizes the component instance on the Stage to 320 pixels (width) by 240 pixels (height). Next, you create a new column named product, and resize the column to 304 pixels (width). The data grid itself is 320 pixels wide, although the scroll bar is 16 pixels wide, which leaves a difference of 304 pixels. Then you set the row height to 60 pixels high, so the easing animations are easier to see.

   The next three lines of ActionScript add items to the data grid instance so you can click and see the animations. Finally the selectionEasing and selectionDuration properties are set using the setStyle() method. The easing method is set to Elastic.easeInOut and the duration is set to 1000 milliseconds (one second, which is five times longer than the default value of 200 milliseconds).

5. Save the document and select Control > Test Movie to view the result in the test environment. When you click an item in the DataGrid instance, you see the selection ease in and out using the elastic effect. The animation should be easy to see because the duration is significantly increased.

   Note: The same properties (selectionEasing and selectionDuration) can also be used with the ComboBox, List, and Tree components.

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.

About the author