Flash AS3 Tutorials Center | Interesting Flash Animation Tutorials | Valuing Flash Animation Tutorials | Flash ActionScript and Animation Home

AS3 Beginner Tutorials | AS3 Basic Lessons | AS3 Valuing Courses | AS3 Components Tutorials | AS3 and PHP Interaction Tutorials
AS3 Practical Tutorials | AS3 Animation Techniques | AS3 Transition Effects Tutorials | AS3 Download Upload Files | AS3 Particle Systems
Communication Between Flash Movies with AS3 | AS3 and JavaScript interaction | AS3 Matrix Transformation | AS3 Physics Simulation Tutorials

Flash ActionScript Pixel Dissolve Transition Effect with TransitionManager Class

This Flash ActionScript tutorial shows how to use Pixel Dissolve transition effect with TransitionManager Class with Flash ActionScript 3.

Please update flash player to view this Flash ActionScript tutorial!

Flash Tutorial Content:

Flash Pixel Dissolve transition effect with TransitionManager Class. The transition effect is a mimic of the building up of image pixel by pixel or dissolving of the image pixel by pixel.

The finished Flash Movie of this tutorial is shown as above. Click on the above Flash Movie and play around. Please change the "easing", "xSections" and 'ySections" to compare the difference in transition effects. An interesting transition effect I always use.

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 the xSecionsCombo
xSectionsCombo.addItem( {label: "20" } );
xSectionsCombo.addItem( {label: "30" } );
xSectionsCombo.addItem( {label: "50" } );

//Add items to the ySecionsCombo
ySectionsCombo.addItem( {label: "20" } );
ySectionsCombo.addItem( {label: "30" } );
ySectionsCombo.addItem( {label: "50" } );

//Declare the easeMethod
var easeMethod:Function;

//declare xSecions
var xSectionsValue:int;

//declare ySecions
var ySectionsValue: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.
*/

/*
xSections -> Number of masks along x-axis
value: 1 - 50
ySections -> Number of masks along y-axis
value: 1 - 50
*/


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;}

//xSections
if (xSectionsCombo.selectedIndex == 0) {
xSectionsValue = 20;
} else if (xSectionsCombo.selectedIndex == 1) {
xSectionsValue = 30;
} else if (xSectionsCombo.selectedIndex == 2) {
xSectionsValue = 50;
}


//ySections
if (ySectionsCombo.selectedIndex == 0) {
ySectionsValue = 20;
} else if (ySectionsCombo.selectedIndex == 1) {
ySectionsValue = 30;
} else if (ySectionsCombo.selectedIndex == 2) {
ySectionsValue = 50;
}


//Start the TransitionManager
TransitionManager.start(island_mc, {
type:PixelDissolve,
direction:Transition.IN,
duration:3,
easing:easeMethod,
xSections:xSectionsValue,
ySections:ySectionsValue
}
);

}

Download Flash Source File:

Flash Source File transitionmanager-pixeldissolve.fla

Remarks:

This Flash ActionScript tutorial shows how to use Pixel Dissolve transition effect with TransitionManager Class.