Animate Flash Wipe transition effect with TransitionManager Class. As the name implied, the transition effect is that MovieClip will be wiping across the stage.
The finished Flash Movie of this wipe transition effect tutorial is shown as below. Click on the Movie and play around. Please change the “easing” and “startPoint” to compare the difference in transition effects. Wipe transition effect should be the most commonly used animation or transition effect by Flash developers.
Flash ActionScript Codes:
//Use ComboBox controls
import fl.controls.ComboBox;
//Add items to easingMethodCombo
easingMethodCombo.addItem( {label: "Regular.easeIn" } );
easingMethodCombo.addItem( {label: "Regular.easeOut" } );
easingMethodCombo.addItem( {label: "Regular.easeInOut" } );
easingMethodCombo.addItem( {label: "Bounce.easeIn" } );
easingMethodCombo.addItem( {label: "Bounce.easeOut" } );
easingMethodCombo.addItem( {label: "Bounce.easeInOut" } );
easingMethodCombo.addItem( {label: "None.easeNone" } );
//Add items to startPointCombo
startPointCombo.addItem( {label: "1" } );
startPointCombo.addItem( {label: "2" } );
startPointCombo.addItem( {label: "3" } );
startPointCombo.addItem( {label: "4" } );
startPointCombo.addItem( {label: "5" } );
startPointCombo.addItem( {label: "6" } );
startPointCombo.addItem( {label: "7" } );
startPointCombo.addItem( {label: "8" } );
startPointCombo.addItem( {label: "9" } );
//Declare the easeMethod
var easeMethod:Function;
//Declare startPoint
var startPointValue:int;
//import transition classes
import fl.transitions.*;
import fl.transitions.easing.*;
/*
type -> Transition type
There are total 10 Transition type working with TransitionManager
They are:
Blinds, Fade, Fly, Iris, Photo,
Rotate, Squeeze, Wipe, PixelDissolve, Zoom
*/
/*
direction:Transition.IN -> Appear with Transition effect
direction:Transition.OUT -> Disppear with Transition effect
*/
/*
duration -> Time in seconds to finish the Transition effect
This is an integer
*/
/*
easing -> easing effect
easing:easingClass.easingMethod
There are 6 easing classes:
Back:
Extends the animation beyond the transition range at one
or both ends at 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.
The 6 easing classes each have 3 easing methods:
easeIn: easing effect at the beginning of the transition.
easeOut: easing effect at the end of the transition.
easeInOut: easing effect at both beginning and end of transition.
*/
/*
startPoint -> Transition Start From:
Number: 1 - 9
1: Left Top Corner
2: Upper Middle
3: Right Top Corner
4: Left Middle
5: Center
6: Right Middle
7: Left Bottom Corner
8: Bottom Center
9: Right Bottom Corner
*/
enter_btn.addEventListener(MouseEvent.CLICK, runTransition);
function runTransition(evt:MouseEvent):void {
//easing Method
if (easingMethodCombo.selectedIndex == 0) {
easeMethod = Regular.easeIn;
} else if (easingMethodCombo.selectedIndex == 1) {
easeMethod = Regular.easeOut;
} else if (easingMethodCombo.selectedIndex == 2) {
easeMethod = Regular.easeInOut;
} else if (easingMethodCombo.selectedIndex == 3) {
easeMethod = Bounce.easeIn;
} else if (easingMethodCombo.selectedIndex == 4) {
easeMethod = Bounce.easeOut;
} else if (easingMethodCombo.selectedIndex == 5) {
easeMethod = Bounce.easeInOut;
} else if (easingMethodCombo.selectedIndex == 6) {
easeMethod = None.easeNone;
}
//startPoint
if (startPointCombo.selectedIndex == 0) {
startPointValue = 1;
} else if (startPointCombo.selectedIndex == 1) {
startPointValue = 2;
} else if (startPointCombo.selectedIndex == 2) {
startPointValue = 3;
} else if (startPointCombo.selectedIndex == 3) {
startPointValue = 4;
} else if (startPointCombo.selectedIndex == 4) {
startPointValue = 5;
} else if (startPointCombo.selectedIndex == 5) {
startPointValue = 6;
} else if (startPointCombo.selectedIndex == 6) {
startPointValue = 7;
} else if (startPointCombo.selectedIndex == 7) {
startPointValue = 8;
} else if (startPointCombo.selectedIndex == 8) {
startPointValue = 9;
}
//Start the TransitionManager
TransitionManager.start(island_mc, {
type: Wipe,
direction:Transition.IN,
duration: 3,
easing:easeMethod,
startPoint:startPointValue
}
);
}
Remarks:
The startPoint seems a bit difficult to remember at first glance. The following table help you to remember the startPoint with ease:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
Download Source File:
The download zip file contains the following files:
transitionmanager-wipe.fla
transitionmanager-zoom.fla
transitionmanager-squeeze.fla
transitionmanager-blinds.fla
transitionmanager-fade.fla
transitionmanager-fly.fla
transitionmanager-iris.fla
transitionmanager-photo.fla
transitionmanager-pixeldissolve.fla
transitionmanager-rotate.fla
Leave a Reply