ActionScript 3 Timer Class

February 6, 2009 by: smonte

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.

  • Digg
  • Sphinn
  • del.icio.us
  • Mixx

Related tutorials:

  1. Falling Bits Animation
  2. ActionScript 3 Color Picker
  3. Basic Preloader
  4. ActionScript 3 TransitionManager
  5. Random Boxes Text Effect with ActionScript 3



Filed under: ActionScript 3 Basics
Tags:

Comments

6 Responses to “ActionScript 3 Timer Class”
  1. Jorgesys says:
    July 6, 2009 at 3:45 pm

    Well thats the idea… we could use the TextFormat like Alex wrote. :)

    Log in to Reply
  2. Jorgesys says:
    July 6, 2009 at 3:43 pm

    Well Matt thats the idea.. we could use a TextFormat like Alex said… :D

    Log in to Reply
  3. Alex says:
    June 3, 2009 at 6:29 am

    Thanks but I have to add this:

    var tff:TextFormat = new TextFormat(“Arial”,19,0xFFFFFF);

    //var myNumber:NumberMovieClip = new NumberMovieClip();
    myNumber.myNumberTextBox.defaultTextFormat = tff;
    myNumber.myNumberTextBox.backgroundColor = 0×000000;

    //var myNumberBig:NumberMovieClip = new NumberMovieClip();
    myNumberBig.myNumberTextBox.defaultTextFormat = tff;
    myNumberBig.myNumberTextBox.backgroundColor = 0×000000;

    to get a black box with white color. Is this the right way?
    Alex

    Log in to Reply
  4. AK47 says:
    April 17, 2009 at 8:52 am

    Mine do neither… It’s like the big number is fading out in the upper left corner…

    Log in to Reply
  5. jamie says:
    April 1, 2009 at 3:57 am

    hey i really need some help with my coursework
    im trying to insert a timer for a pelican crossing
    anyone wiling to help?
    email
    \
    thx

    jamie

    Log in to Reply
  6. Matt says:
    February 26, 2009 at 7:23 am

    Weird, it works but final code doesn’t produce what the example looks like.

    Log in to Reply

Leave a Reply

You must be logged in to post a comment.