Tuesday, September 13, 2011

ActionScript 3 Timer Class


ActionScript 3 timers are used to run pieces of code on a specific time sequence. They come in real handy when you want something to be done repeatedly, but not in every frame. This tutorial teaches you the basics of ActionScript timers and how to use them in your flash movies.

Setting up the environment

1. Create a new Flash ActionScript 3.0 document of size 400×400.
2. Create a dynamic text field of size 100×60. You can draw it anywhere on the stage.
3. Embed the numerals of the text field. We need to do this, because we’ll be animating the numbers later on. Give the text field an instance name of “myNumberTextBox”.
Embed numerals
4. Convert the text field into a movie clip. Name it myNumberMC. Set the registration point in the center.
5. Linkage the movie clip to a class called “NumberMovieClip”.
6. Remove the movie clip from the stage.

Moving to ActionScript 3.0

Now it’s time for the timer. Create a layer for ActionScript and type the following.
//We need these for the animation
import fl.transitions.*;
import fl.transitions.easing.*;
 
/* 
Create a timer that is called once every second (1000 milliseconds).
This timer will be called infinitely, because the second parameter is zero.
*/
var timer:Timer = new Timer(1000,0);
timer.addEventListener (TimerEvent.TIMER, changeNumber);
timer.start ();
 
//Create the smaller number seen on the stage
var myNumber:NumberMovieClip = new NumberMovieClip();
 
//Position the number in the center of the stage
myNumber.x = stage.stageWidth / 2;
myNumber.y = stage.stageHeight / 2;
 
//Add it to the stage
addChild (myNumber);
 
//Make it invisible at the beginning
myNumber.visible = false;
 
//Create the larger number seen on the stage
var myNumberBig:NumberMovieClip = new NumberMovieClip();
 
//Position the number in the center of the stage
myNumberBig.x = stage.stageWidth / 2;
myNumberBig.y = stage.stageHeight / 2;
 
//Make it a lot bigger (you can change these to whatever you want)
myNumberBig.scaleY = 20;
myNumberBig.scaleX = 20;
 
//Reduce the alpha
myNumberBig.alpha = 0.1;
 
//Add it to the stage
addChild (myNumberBig);
 
//Make it invisible at the beginning
myNumberBig.visible = false;
 
/* 
Our timer calls this function.
The timer delay defines how frequently this function is called.
*/
function changeNumber (e:Event):void {
 
 /*
 Make our numbers visible.
 */
 myNumber.visible = true;
 myNumberBig.visible = true;
 
 //Assign a new numerical value for the movie clip
 myNumber.myNumberTextBox.text = String(e.target.currentCount - 1);
 
 /*
 Animate the smaller number using the TransitionManager.
 The animation lasts exactly as long as our timer delay is.
 */
 TransitionManager.start (myNumber, {type:Fade, direction:Transition.IN, 
  duration:(timer.delay * 0.001), easing:Regular.easeIn});
 
 //Assign a new numerical value for the movie clip
 myNumberBig.myNumberTextBox.text = String(e.target.currentCount - 1);
 
 /*
 Animate the larger number using the TransitionManager.
 The animation lasts exactly as long as our timer delay is.
 */
 TransitionManager.start (myNumberBig, {type:Zoom, direction:Transition.IN, 
  duration:(timer.delay * 0.001), easing:Regular.easeIn});
}
Test your movie, and you should have a similar movie as mine. There is one other timer event available for you to use. It’s called the “timerComplete”. As the name suggests, it is called when the timer finishes. In this tutorial, that would be never, since our timer will run infinitely. That’s the end of this tutorial. If you have any question concerning the timer, please post them in the forum.

No comments:

Post a Comment