Accessibility

Flash Article

 

Using the Tween and Transition Classes in Flash MX 2004


Table of Contents

  1. Introduction
  2. Adding Tweens and Transitions to a File
  3. Using the Transition and Tween Classes
  4. About Easing Classes and Methods
  5. About the Tween Class
  6. About Continuing Animations
  7. Creating Animations that Continue Endlessly
  8. About Applying Easing Methods to V2 Components
  9. Combining the Transition and Tween Classes
Comments

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.

Page 2 of 9
Previous Page
Next Page