This animate flash tutorial series show how to use Transition effect with TransitionManager and other animation with ActionScript 3. We can create very interesting animation with transition effect and other animation classes. The two flash tutorials have the same effect. In the first example, the island and sea picture has been inserted into the Flash Movie. In the second tutorial, the island and sea picture is an external file. The picture will be loaded into the Flash Movie by ActionScript.

Example 1

The finished Flash Movie of this tutorial is shown as below. The transition effect of the landscape was created with TransitionManager. While the sun motion animation was created with Tween animation.

Animate Flash ActionScript Codes:

//Classes to use the Transition Effect
import fl.transitions.*;
import fl.transitions.easing.*;

//Create a Timer object and store it in a variable called timer.
//The timer will trigger in 3000 milliseconds (3 seconds)
//1000 milliseconds = 1 second
//The repeatCount is 1, i.e. timer will trigger only ONE time
//Summary:
//Create a Timer instance that will trigger in 4 seconds for one time
var timer:Timer = new Timer(4000, 1);

//Timer object created will not start automatically
//You have to start it
timer.start();

//Add an event listener to the timer object (timer)
//The event that listen is called TIMER that will trigger after 4 seconds
//When the TIMER event is triggered, it will call the sunrise function
timer.addEventListener(TimerEvent.TIMER, sunrise);

 

function sunrise(e:TimerEvent):void {
//Apply Tween animation to the sun
var TweenX:Tween = new Tween(sun_mc, "x", Regular.easeOut, sun_mc.x, 200, 5, true);
var TweenY:Tween = new Tween(sun_mc, "y", Regular.easeOut, sun_mc.y, 210, 5, true);

//Remove listener that no longer in use
timer.removeEventListener(TimerEvent.TIMER, sunrise);
}

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

Example 2

This animate Flash Transition Effect tutorial has the same effect as the previous example except that the island and sea picture is an external file. The picture will be loaded into the Flash Movie by ActionScript.

In previous Flash Transition Effect example, the landscape was inserted into the Flash Movie. However some people would like to use the picture as external file. In other words, the picture will be loaded into the Flash Movie by ActionScript. This animate Flash Transition Effect tutorial will show how to do that.

The effect of this finished Flash Movie is same as example 1. The transition effect of the landscape was created with TransitionManager. While the sun motion was created with Tween animation.

Flash ActionScript Codes:

//Classes to use the Transition Effect
import fl.transitions.*;
import fl.transitions.easing.*;

//Create a Timer object and store it in a variable called timer.
//The timer will trigger in 3000 milliseconds (3 seconds)
//1000 milliseconds = 1 second
//The repeatCount is 1, i.e. timer will trigger only ONE time
//Summary:
//Create a Timer instance that will trigger in 4 seconds for one time
var timer:Timer = new Timer(4000, 1);

//Timer object created will not start automatically
//You have to start it
timer.start();

//Add an event listener to the timer object (timer)
//The event that listen is called TIMER that will trigger after 4 seconds
//When the TIMER event is triggered, it will call the sunrise function
timer.addEventListener(TimerEvent.TIMER, sunrise);

 

function sunrise(e:TimerEvent):void{
//Apply Tween animation to the sun
var TweenX:Tween = new Tween(sun_mc, "x", Regular.easeOut, sun_mc.x, 200, 5, true);
var TweenY:Tween = new Tween(sun_mc, "y", Regular.easeOut, sun_mc.y, 210, 5, true);

//Remove listener that no longer in use
timer.removeEventListener(TimerEvent.TIMER, sunrise);

}

 


//URL of the external image content
var myRequest:URLRequest=new URLRequest("island.png");

//Create a new Loader to load the image
var loader:Loader = new Loader()

//Load the external image into the Loader
loader.load(myRequest)

// Listen when the loading of image is completed
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadTheImage);

 

function loadTheImage(evt:Event):void {
//Display the Loader on the MainTimeline
//The holder_mc (new symbol) was created before by
//Insert -> New Symbol
holder_mc.addChild(loader)

//Start the TransitionManager
TransitionManager.start(holder_mc, {
type: PixelDissolve,
direction: Transition.IN,
duration: 3,
easing: None.easeNone,
xSections: 20,
ySections: 20
}
);
}

Download Source File:

TransitionManager-Animation-Pack.zip

Downloaded zip file contains:
transitionmanager-animation-1.fla
transitionmanager-animation-2.fla