AS3 Countdown Timer - Creating a Simple Countdown Timer in Flash Using ActionScript 3

In this tutorial, we'll learn how to create a very simple AS3 countdown timer in Flash.

Step 1
Create a new Flash ActionScript 3 document. Select the text tool once your document opens up.

Step 2
Go to the Properties Inspector and choose the following options:

• Text field type: Classic - Dynamic Text
  
  
• For the font family, you can choose either _sans, _serif, or _typewriter
  
  
• Anti-alias: Use device fonts
  
  
• For the text color, make sure that it's different from the background color of your stage
• You can choose whatever font size that you want

Step 3
Then click on the stage to add the text field. Make sure that the text field is big enough for whatever font size you chose.

Step 4
Make sure that your text field is selected, then go back to the Properties Inspector and give it an instance name. Let's name this timer_txt.

Step 5
Create a new layer for the actions, then select the first keyframe of this new layer, and open up the Actions panel.





Step 6
In the script pane of the Actions panel, create a number variable. Let's initialize it with a value of 10.

var nCount:Number = 10;

This will be our countdown number. We will be subtracting 1 from this number every 1 second in order to create the countdown effect.

Step 7
Assign the nCount variable to the text property of the timer_txt text field.

var nCount:Number = 10;

timer_txt.text = nCount.toString();

This will display the number in the text field. We have to use the toString() method so that the number gets converted into a string. It needs to be converted into a string so that it can be displayed as text.

Step 8
Test your movie. You should see the number displayed in the text field.

Step 9
Go back to the code, and this time, create a Timer object with a delay of 1000. And for the repeatCount parameter, let's pass the nCount variable. The delay is the first value we pass to the Timer() constructor. The repeatCount is the second value that we pass.

var nCount:Number = 10;
var myTimer:Timer = new Timer(1000, nCount);

timer_txt.text = nCount.toString();

This creates a new Timer object named myTimer with a delay of 1000. The 1000 stands for 1000 milliseconds. This means that the timer will count every 1000 milliseconds (or 1 second). For the repeatCount, it's going to have the same value as the initial value of nCount. Since our nCount variable has a value of 10 when we pass it to the repeatCount parameter, then repeatCount will also be 10. This means that our timer will count 10 times and then stop.

Step 10
Now let's create an event listener function for the TimerEvent.TIMER event. This event gets dispatched at a rate that depends on the delay that was specified. Since we specified a delay of 1000 milliseconds, then this means that the event listener function will get called every 1 second. Let's name this event listener function as countdown.

var nCount:Number = 10;
var myTimer:Timer = new Timer(1000, nCount);

timer_txt.text = nCount.toString();

myTimer.addEventListener(TimerEvent.TIMER, countdown);

function countdown(e:TimerEvent):void
{

}

Step 11
In the event listener function, we want to subtract nCount by 1 so that each time the function gets called, nCount will decrease. And then we'll display the new value in the timer_txt text field again so that it gets updated.

var nCount:Number = 10;
var myTimer:Timer = new Timer(1000, nCount);

timer_txt.text = nCount.toString();

myTimer.addEventListener(TimerEvent.TIMER, countdown);

function countdown(e:TimerEvent):void
{
 nCount--;
 timer_txt.text = nCount.toString();
}

Don't test the movie just yet. We still need to add one more line of code.

Step 12
Lastly, let's make sure that we start the timer using the start() method of the Timer class. If we don't start the timer, then we won't see anything happen.

var nCount:Number = 10;
var myTimer:Timer = new Timer(1000, nCount);

timer_txt.text = nCount.toString();
myTimer.start();

myTimer.addEventListener(TimerEvent.TIMER, countdown);

function countdown(e:TimerEvent):void
{
 nCount--;
 timer_txt.text = nCount.toString();
}

Step 13
Test the movie. You should now have a working countdown timer.