Using the Timer Class in ActionScript 3.0

Advertisement

The Timer Class in AS3 lets you execute any code repeatedly over specific time intervals. It is an extensive class which offers functionality that exceeds the older setInterval() method which is more commonly used in previous versions of ActionScript. This tutorial will teach you the basics on how to use the Timer Class to execute any code repeatedly over a period of time. You are expected to know the very basics of the system to follow this tutorial.

The example below shows how the Timer Class is used rotate a movie clip a little bit each second:

Basic Usage of the Timer Class

The Timer Class is used to execute any code repeatedly after certain time periods. For example, in the movie shown above we are using the Timer Class to make the movie clip rotate a little bit more every second. In code terms, this is done by the Timer Class by triggering an event called TIMER at the specified interval which are then caught using an event listener.

In order to use the Timer Class the following procedure must be followed:

1. Create an instance of the Timer Class and set the delay period and the repeat count when as you create the new instance.
2. Listen to the TimerEvent.TIMER using the .addEventListener method.
3. Create your event listener function to execute the code you wish to run repeatedly.
4. Start your timer using the .start() method.

The generalized code below illustrates this whole procedure.

var myIndetifier:Timer = new Timer(delay, repeat-count);
myIdentifier.addEventListener(TimerEvent.TIMER, timerListener);
function timerListener (e:TimerEvent):void{
//commands
}
myIdentifier.start();

An actual code example illustrating the same thing is as follows:

var myTimer:Timer = new Timer(2000,8);
myTimer.addEventListener(TimerEvent.TIMER, timerListener);
function timerListener (e:TimerEvent):void{
trace("Timer is Triggered");
}
myTimer.start();

We are going to explain this code step by step. The first step for using the Timer Class is by creating an instance of it (instantiation), this is a regular procedure required for using the majority of AS classes which simply requires using the new operator. The Timer Class can be configured at the instance of creation by settings its two main properties delay and repeat count at instantiation. The delay property is the time interval in milliseconds at which the Timer Class is to be triggered. For example, if we want our box to rotate once every 3 seconds we would set the delay property to 3000 milliseconds. If we want this rotation to be triggered once every half a second, we would set this property to 500.

The repeat count property on the other hand is the number of times the Timer Class is triggered. If you want to have only 5 repeat counts simply set this property to true. If you want your Timer to run infinitely then omit this property altogether.

So if we want to create a new instance of the Timer Class named myTimer and let it execute our code 8 times at 1 second intervals we would do that this way:

var myTimer:Timer = new Timer(2000,8);

A 1000 milliseconds equal 1 second.

The second step for using the Timer Class involves using an event listener to track the special event TimerEvent.TIMER. We are simply going to use the .addEventListenermethod to listen to this event and attach an event listener function that we will define later. Note that the Timer Event must be listened to by an instance of the Timer Class:

var myTimer:Timer = new Timer(2000,8);
myTimer.addEventListener(TimerEvent.TIMER, timerListener);

Please review ourTutorial to learn about adding interactivity to your ActionScript projects.

The third step is to define the event listener function. There is no difference at all between this listener function and listener functions created to track other events. Our function will have the simple task of outputting the phrase "Timer is Triggered" on the screen using the trace() command.

var myTimer:Timer = new Timer(2000,8);
myTimer.addEventListener(TimerEvent.TIMER, timerListener);
function timerListener (e:TimerEvent):void{
trace("Timer is Triggered");
}

The final step simply requires us to start the timer using the .start() method:

var myTimer:Timer = new Timer(2000,8);
myTimer.addEventListener(TimerEvent.TIMER, timerListener);
function timerListener (e:TimerEvent):void{
trace("Timer is Triggered");
}
myTimer.start();

You can paste this on the timeline of your movie and test it to see the message "Timer is Triggered" in the output pop up each two seconds eight times.

You can use this process to repeat any amount of code over a period of time. Simply change the parameters you've used when instantiating the Timer Class and change the content of the timerListener to execute a different code.

That was the basic usage of the Timer Class. It is possible to stop the timer manually at any time using the .stop() method and it is also possible to react the natural termination of the timer sequence by listening to the TimerEvent.TIMER_COMPLETE event. We will discuss this two points next.

Stopping the Timer Manually

It is possible to stop the timer at any time before the expiry of the repeat count by using the .stop() method. The usage of this in practice will depend on the needs of your project. To use the .stop() method you will have to apply it directly to your instance of the Timer Class instance this way:

myTimer.stop();

This will usually be done through a conditional or another event listener triggered by a click over a button. To create such a button you will need to create the button and then use the addEventListener method to attach the function to it:

my_btn.addEventListener(MouseEvent.CLICK, stopTimer);
function stopTimer(e:MouseEvent):void{
myTimer.stop();
}

Please review our  Tutorial to learn about adding interactivity to your ActionScript projects.

Using the .stop() method and the .start() method it is possible to create control buttons for a timer that let's you start and stop it at any time. Here is the code for creating such a project:

var myTimer:Timer = new Timer(1000);
myTimer.addEventListener(TimerEvent.TIMER, timerListener);
function timerListener (e:TimerEvent):void{
logo_mc.rotation+=20;
}

start_btn.addEventListener(MouseEvent.CLICK, onStart);
function onStart(e:MouseEvent):void{
myTimer.start();
}

stop_btn.addEventListener(MouseEvent.CLICK, onStop);
function onStop(e:MouseEvent):void{
myTimer.stop();
}

And here is a movie showing the example above:

This is almost everything you need to know about the .stop() method. It is a pretty easy command to use.

Executing a Specific Code at the Completion of the Timer

The Timer Event can inform the player of the completion of the repeat count so that you can execute a certain code at that time. This again will be helpful in certain projects that require special commands to be executed only once all the repeat counts expire naturally. To catch this event and react to it you can simply use the .addEventListenermethod to register for the event TimerEvent.TIMER_COMPLETE, the code below shows a simple example:

var myTimer:Timer = new timer(1000,8);
myTimer.addEventListener(TimerEvent.TIMER, timerListener);
function timerListener (e:TimerEvent):void{
trace("Timer is Triggered");
}
myTimer.start();

myTimer.addEventListener(TimeEvent.TIMER_COMPLETE, timerDone);
function timerDone(e:TimerEvent):void{
trace("Timer finishing!");
}

To show the usage of this in a semi practical example, we are going to create an example where a semi transparent graphic is moved 10 pixels each second for ten seconds and when it finally stops we will make it completely opaque. This can be easily done using what we learnt earlier along with this TimerEvent.TIMER_COMPLETE event:

var myTimer:Timer = new Timer(1000,8);
myTimer.addEventListener(TimerEvent.TIMER, timerListener);
function timerListener(e:TimerEvent):void {
logo_mc.x+=20;
}
myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onComplete);
function onComplete(e:TimerEvent):void {
logo_mc.alpha=1;
}
start_btn.addEventListener(MouseEvent.CLICK, onStart);
function onStart(e:MouseEvent):void {
myTimer.start();
logo_mc.alpha=.5;
logo_mc.x=20;
}

This concludes our tutorial. You can download the source file for our last example  The Time Class is one of the fundamental new utility classes that can be used in a variety of projects and which you should surely explore. Feel free to post at the if you have any questions or comments.

Share This