Monday, 29 June 2009

Countdown Timer in Actionscript 3

In this tutorial you will learn how to create a countdown timer in Actionscript 3.0. This is an update from the previous countdown in timer in AS2. The AS2 version used the setInterval function, but this has now been removed and been replaced with the Timer Class in AS3. I have used a Flash CS4 for this tutorial and start the countdown at 60 seconds, but this can easily be changed.

Countdown Timer in Actionscript 3

Step 1

Create a new Flash AS3 file.
Select the static text tool and type a message on the stage. I have used impact font type, but you can use whatever font you wish.




Step 2

Select the dynamic text tool and drag a rectangle shape like below:




Step 3

Select your dynamic text and give the instance name “myText_txt” like below:




Step 4

On the timeline insert a new layer called “Actions”. Right click on the 1st frame and select Actions then enter the following code:

//1.
var count:Number = 60;

//2.
var myTimer:Timer = new Timer(1000,count);

//3.
myTimer.addEventListener(TimerEvent.TIMER, countdown);

//4.
myTimer.start();

//5.
function countdown(event:TimerEvent):void {
myText_txt.text = String((count)-myTimer.currentCount);
}

Code:
1. This is the starting number of the countdown. I have used 60, but you can change this number to whatever you wish.
2. This creates a new timer with the instance name “myTimer”. The first parameter is the interval value in milliseconds, so an interval of 1000 would be equally to a one second interval. The second parameter is the count, which is the number of times, the timer will countdown before it stops.
3. This is an event listener for the timer. The “Timer.event.Timer” is the event and countdown is the function which is called every time for the event.
4. This is needed to starts the timer.
5. This is the countdown function which converts a number into a string and subtracts the count from the “currentCount”. The “currentCount” actually counts from 1 – 60, but subtracting the count allows you to go from 60 – 0.


Step 5

Test your countdown timer Ctrl + Enter.



You should now have a countdown timer in Actionscript 3.0. If you wish to trigger an action after the countdown has reached zero. You need to add the following code inside the countdown function.
if(myText_txt.text == "0"){
gotoAndStop(2)
}
The code above will stop at frame 2 when the countdown timer has reached zero. You can change this line of code to whatever you wish.

19 comments:

royshubhojit 1 July 2009 at 19:17  

gud start but wat do i do if I want to extend it.

iliketo 2 July 2009 at 03:43  

@royshubhojit

Change "var count:Number = [any number];"

Anonymous 8 July 2009 at 05:22  

I did it the same way and it works fine, but for some weird reason if I want to upload it in an online page it does not work :-/. What idea what this could be?

iliketo 8 July 2009 at 08:09  

@above message

Where are you hosting yhe SWF file ?

Steven 23 December 2009 at 08:47  

Hey,
This is great but I have an issue with the counter counting down to zero then going to a different frame. Please help.
-------Here's what I have so far--------
stop();

var count:Number = 10;

var myTimer:Timer = new Timer(1000,count);

myTimer.addEventListener(TimerEvent.TIMER, countdown);


myTimer.start();

function countdown(event:TimerEvent):void {
myText_txt.text = String((count)-myTimer.currentCount);
count--;
trace("this"+count);

if(count == 0){
gotoAndPlay('2');
}
}

iliketo 23 December 2009 at 13:47  

@Steven

Your code is incorrect, try this:

stop();

var count:Number = 10;
var myTimer:Timer=new Timer(1000,count);
myTimer.addEventListener(TimerEvent.TIMER, countdown);
myTimer.start();

function countdown(event:TimerEvent):void {
myText_txt.text=String((count)-myTimer.currentCount);

if(myText_txt.text == "0"){
gotoAndStop(2);
}
}

Anonymous 30 December 2009 at 10:39  

What code do you have on the reset button? Thanks.

iliketo 30 December 2009 at 10:55  

@Anonymous

I used the following code for the reset button.

reset_btn.addEventListener(MouseEvent.Click, resetCountDown);
function resetCountDown(event:MouseEvent):void{
myTimer.reset();
myText_txt.text=String(count);
myTimer.start();
}

Desirae 11 January 2010 at 12:04  

Finally, just a simple seconds countdown tutorial. I have been looking for this for 2 days.

Easy to understand. Thank you very much.

Ayumi 7 March 2010 at 07:12  

If after enter frame 2, there is a button to go back to frame 1, after gotoAndPlay(1), the countdown start again automatically. How can we do that?

iliketo 8 March 2010 at 10:57  

Use the start() method.

aleksandar 30 May 2010 at 13:09  

How to do some action when countdown is finished?!?!?!?! exc gotoandplay...

iliketo 31 May 2010 at 13:18  

@aleksandar

I've added a line of code in the tutorial above.

karlplduckett 8 October 2012 at 16:13  

Great easy to understand tutorial.
How would I got about adding or subtracting time as the timer is playing.

For example a button that minuses 10 seconds from the countdown instantly?

Thanks for your help.

iliketo 9 October 2012 at 13:27  

@karlplduckett

Simply add/substract 10 from the count variable with a click event listener.

Lorenzo de Jongh 30 October 2012 at 08:41  

Is it possible to display a alert box/dialog with the text 'Time's up!'. The user then needs to click okay and then manually start the timer again. Is this possible?

Thank you in advance.

iliketo 2 November 2012 at 22:19  

@Lorenzo,

Yes its possible.

C BiF 4 September 2013 at 02:47  

can u update methods like timerComplete.
More reliable then an If, I think :)

iliketo 4 September 2013 at 13:10  

@C Bif,

Yes, that would also work.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP