The Growing Effect in AS3

To achieve the growing effect seen in some Flash animation clips, such as animated growing flowers or growing shoots, use the TransitionManager class in ActionScript 3. With only a few lines of code, AS3 expedites work far faster than other processes, such as stop-motion animation. Two AS3 transition types that are especially useful for a growing effect are the Zoom and Fly transitions.

1. Preparation

   • Before using ActionScript to make an image grow, you first must convert the image to a movie clip symbol. Press "F8" on the keyboard. Then give the symbol an instance name in the Properties panel. You can give it any name; however, the example code in this article uses "_grow" as the symbol name. Before entering any code into the Actions-Frame panel, first select the current timeline by clicking it in the Timeline panel. Then paste the following two lines of code to call on the ActionScript TransitionManager and easing classes:

     import fl.transitions.*;
     import fl.transitions.easing.*;

   Growth Using Zoom

   • The Zoom transition type is useful for making objects appear to grow outward. An image of a small flower, for example, using the zoom effect will appear to grow into a larger flower. This example uses the "myGrowth" variable to be used with the Zoom transition type. The duration attribute specifies the time in seconds for the animation to be completed. Copy and paste the following code in lines 3 and 4 of the Actions panel. You can then preview the animation using the "Publish Preview" option in the File menu.

     var myGrowth:TransitionManager = new TransitionManager(_grow);
     myGrowth.startTransition({type:Zoom, duration:3});

   Vertical Growth Using Fly

   • The Fly transition type can be used to make an image appear to grow in one direction, such as a shoot growing from the grass or a vine growing downward or from left or right. This transition type uses the "startPoint" parameter to determine where the object starts. The example below uses "8" to start from the bottom of the stage. You can change this to "7" for the lower left corner or "9" for the lower right. You can use "1" for the upper left corner, "2" for the center or "3" for the upper right corner. To begin from the left or right edge, you can use "4" or "6." Paste the following code in the Actions-Frame panel to use the Fly transition:

     var myGrowth2:TransitionManager = new TransitionManager(_grow);
     myGrowth2.startTransition({type:Fly, direction:Transition.IN, duration:5, startPoint:8});

   Easing Parameters

   • You can use easing parameters to change the rate of growth in an animation in four ways. "Regular" and "Strong" easing causes the animation to gradually accelerate or decelerate at a regular or strong rate. "Back" easing creates a bounce effect, making the image grow slightly larger than normal, then shrink backward to its normal size. "Elastic" easing is the same as back easing, but with a stronger effect. Apply three different attributes to each of these parameters to have the easing begin at the start, at the end or at both the start and end of the animation. These attributes are "easIn," "easeOut," and "EaseInOut." Place the "easing" parameter after the "duration" parameter to see its effects; for example:

     import fl.transitions.*;
     import fl.transitions.easing.*;
     var myGrowth:TransitionManager = new TransitionManager(_grow);
     myGrowth.startTransition({type:Zoom, duration:5, easing:Strong.easeOut});