Wipe Transition

Wipe Transition

Flash CS4 ActionScript 3.0 Tutorial


How to Create Wipe Transition Using Flash ActionScript



There are several transitions available to the Flash developer. Transitions allow you to transition from one Movie Symbol on the stage to another Movie Symbol. In other words, you may have element a on top of element b. By applying the transition to element a, then element b is revealed with a transition.

There are multiple transition options with ActionScript. For more information on other types of transitions, see topics, Blinds Transition, Fade Transition, Fly Transition, Iris Transition, Photo Transition, Pixel Dissolve Transition, Rotate Transition, Squeeze Transition and Zoom Transition.

Tutorial Elements

Movie Symbol with instance name transObj_mc

Movie Symbol with no instance name


Step One

Add two Movie Symbols of the same size to the stage and select the top symbol with the Selection tool. For information on creating a Movie Symbol, see topic, Movie Symbol Basics.

Step Two

Open the Properties panel (Cmd/F3 (PC-Ctrl/F3)) and type in the name transObj_mc for the Instance Name.

Step Three

Add a new layer called Actions to the top of the stack.

Step Four

Option double-click (PC - Alt double-click) the keyframe in the Actions layer to open the ActionScript panel.

Step Five

Copy/Paste the following code to the ActionScript panel.

import fl.transitions.*;

import fl.transitions.easing.*;

TransitionManager.start(transObj_mc, {type:Wipe, direction:Transition.IN, duration:2, easing:Bounce.easeOut, startPoint:4});

Step Six

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The lower symbol transitions to the symbol above.

Dissecting the Code

The first two lines import the transitions and easing packages into your document. The next line starts the Transition Manager and sets it's parameters. The type of transition is Wipe and the transition makes your symbol appear. The duration length is 2 seconds and it occurs as a Bounce ease. The starting point is from the left as defined by setting the Start Point to 4.

More Options

Transition.IN can be changed to Transition.OUT to make your symbol disappear.

You can specify the duration value. Bounce can be changed to Back, Elastic, None, Regular, or Strong. For more information, see topics, Back Easing, Bounce Easing, Elastic Easing, Regular Easing, and Strong Easing.

The value for easeOut can also be set to easeIn, easeInOut, or easeNone. You can change the start point to by inputting values 1 thru 9.

1=top left

2=top center

3=top right

4=left center


6=right center

7=bottom left

8=bottom center

9=bottom right

Need More Predictable Results?

Double-click the Symbol and move the symbol object to change the object's registration point. The registration point is used to set the starting point of the transition.


Shutterfly 50 Free Prints 160x600