Using the Tween and TransitionManager Classes
When you install Flash Basic 8 or Flash Professional 8, you also install two powerful classes: the Tween and TransitionManager classes. This section describes how to use these classes with movie clips and Macromedia V2 components (included with Flash MX 2004 and Flash 8) to add animation easily to your SWF files.

If you create a slide presentation or form application with Flash Professional 8 (ActionScript 2.0 only), you can select behaviors that add different kinds of transitions between slides, which is similar to when you create a PowerPoint presentation. You add this functionality into a screen application by using the Tween and TransitionManager classes, which generate ActionScript that animates the screens depending on the behavior you choose.

You can also use the Tween and TransitionManager classes outside of a screen-based document in either Flash Basic 8 or Flash Professional 8. For example, you can use the classes with the component set of version 2 of the Macromedia Component Architecture, or with movie clips. If you want to change the way a ComboBox component animates, you can use the TransitionManager class to add some easing when the menu opens. You can also use the Tween and TransitionManager classes, instead of creating motion tweens on the Timeline or writing custom code, to create your own animated menu system.

Note: The Tween and TransitionManager classes are available only in ActionScript 2.0, but these classes are available in both Flash Basic 8 and Flash Professional 8.

Tween Class
The Tween class enables you to use ActionScript to move, resize, and fade movie clips easily on the Stage by specifying a property of the target movie clip to be tween-animated over a number of frames or seconds. The Tween class also enables you to specify a variety of easing methods. Easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. For example, the options on a drop-down list component you create might gradually increase their speed near the beginning of an animation as the options appear, but slow down before the options come to a full stop at the end of the animation as the list is extended. Flash provides many easing methods that contain equations for this acceleration and deceleration, which change the easing animation accordingly.

The Tween class also invokes event handlers so your code may respond when an animation starts, stops, or resumes or increments its tweened property value. For example, you can start a second tweened animation when the first tween invokes its Tween.onMotionStopped event handler, indicating that the first tween has stopped.

TransitionManager Class
The TransitionManager class and the effect-defining transition-based classes enable you to apply impressive transition animation effects quickly to slides and movie clips.

As its name implies, the TransitionManager class manages transitions by implementing animation events. It enables you to apply one of 10 animation effects to movie clips. The transition effects are defined in a set of transition classes that all extend the base class mx.transitions.Transition.

Combining Animation, Filters, and the Tween Class
You can use ActionScript, such as the Tween class, to animate filters at runtime, which enables you to apply interesting, animated effects to your Flash applications. In the following example, you see how to combine the Blur filter with the Tween class to create an animated blur that modifies the Blur filter between a value of 0 and 10 at runtime.

To animate blurs using the Tween class:

1. Create a new Flash document and save it as animatedfilter.fla.
2. Add the following ActionScript to Frame 1 of the Timeline:

   
   import flash.filters.BlurFilter;
   import mx.transitions.Tween;
   import mx.transitions.easing.*;
   
   this.createEmptyMovieClip("holder_mc", 10);
   holder_mc.createEmptyMovieClip("img_mc", 20);
   
   var mclListener:Object = new Object();
   mclListener.onLoadInit = function(target_mc:MovieClip) {
      target_mc._x = (Stage.width - target_mc._width) / 2;
      target_mc._y = (Stage.height - target_mc._height) / 2;
      var myTween:Tween = new Tween(target_mc, "blur", 
      Strong.easeInOut, 0, 20, 3, true);
      myTween.onMotionChanged = function() {
         target_mc._parent.filters = 
   	  [new BlurFilter(target_mc.blur, target_mc.blur, 1)];
      };
      myTween.onMotionFinished = function() {
         myTween.yoyo();
      }
   };
   var my_mcl:MovieClipLoader = new MovieClipLoader();
   my_mcl.addListener(mclListener);
    my_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg",
   holder_mc.img_mc);
   

   The preceding code is separated into three sections. The first section imports the required classes and packages. The second section creates a nested movie clip that is used to load an image and apply filters to the holder movie clip. The final section creates a new MovieClipLoader instance and a listener for the movie clip loader.

   The listener object defines a single event handler function, onLoadInit, which is started once the image successfully loads and is available on the Stage. First the image is repositioned to the center of the Stage and then a new Tween object is created that animates the movie clip and applies a Blur filter of 0 and 10.

3. Select Control > Test Movie to test the Flash document.

The following procedure loads a JPEG image and dynamically masks the image so you can reveal the image slowly after it loads by tweening the image's mask.

To animate dynamic masks:

1. Create a new Flash document and save it as dynmask.fla.
2. Add the following ActionScript to Frame 1 of the Timeline:

   
   import mx.transitions.Tween;
   import mx.transitions.easing.*;
   var mclListener:Object = new Object();
   mclListener.onLoadInit = function(target_mc:MovieClip) {
      target_mc._visible = false;
      // Center the image on the Stage.
      target_mc._x = (Stage.width - target_mc._width) / 2;
      target_mc._y = (Stage.height - target_mc._height) / 2;
      var maskClip:MovieClip = target_mc.createEmptyMovieClip("mask_mc", 20);
      with (maskClip) {
         // Draw a mask that is the same size as the loaded image.
         beginFill(0xFF00FF, 100);
         moveTo(0, 0);
         lineTo(target_mc._width, 0);
         lineTo(target_mc._width, target_mc._height);
         lineTo(0, target_mc._height);
         lineTo(0, 0);
         endFill();
      }
      target_mc.setMask(maskClip);
      target_mc._visible = true;
      var mask_tween:Object = new Tween
      (maskClip, "_yscale", Strong.easeOut, 0, 100, 2, true); };
      this.createEmptyMovieClip("img_mc", 10);
   var img_mcl:MovieClipLoader = new MovieClipLoader();
   img_mcl.addListener(mclListener);
    img_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg",
   img_mc);
   

   This code example imports the Tween class and each of the classes in the easing package. Next it creates an object that acts as the listener object for a MovieClipLoader instance that's created in a later section of the code. The listener object defines a single event listener, onLoadInit, which centers the dynamically loaded JPEG image on the Stage. After the code repositions the image, a new movie clip instance is created within the target_mc movie clip (which contains the dynamically loaded JPEG image). The Drawing API code draws a rectangle with the same dimensions as the JPEG image within this new movie clip. The new movie clip masks the JPEG image by calling the MovieClip.setMask() method. After the mask is drawn and set up, the mask uses the Tween class to animate, which causes the image to slowly reveal itself.
3. Save the Flash document and select Control > Test Movie to test the SWF file.

You can use alpha masks if you apply runtime bitmap caching. See an sample FLA file demonstrate this feature on the Flash Samples page (http://macromedia.com/support/documentation/en/flash/fl8/samples.html#alpha_mask ).

Instructional Media Development (IMD)
Macromedia Documentation
Editor: Jen deHaan
www.flash8forums.com

Reviewer: Chris Georgenes
www.mudbubble.com

• Flash Animation Learning Guide (Part I)

• Figure 1
• Figure 2
• Figure 3
• Figure 4
• Figure 5