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"){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.
gotoAndStop(2)
}
21 comments:
gud start but wat do i do if I want to extend it.
@royshubhojit
Change "var count:Number = [any number];"
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?
@above message
Where are you hosting yhe SWF file ?
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');
}
}
@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);
}
}
What code do you have on the reset button? Thanks.
@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();
}
Finally, just a simple seconds countdown tutorial. I have been looking for this for 2 days.
Easy to understand. Thank you very much.
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?
Use the start() method.
How to do some action when countdown is finished?!?!?!?! exc gotoandplay...
@aleksandar
I've added a line of code in the tutorial above.
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.
@karlplduckett
Simply add/substract 10 from the count variable with a click event listener.
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.
@Lorenzo,
Yes its possible.
can u update methods like timerComplete.
More reliable then an If, I think :)
@C Bif,
Yes, that would also work.
iliketo,
Thanks in advance for the code and the help. I am trying to make the timer restart. This is what I have, but it does not work.
function countdown(event:TimerEvent):void {
C10txt.text = String((count)-myTimer.currentCount)
if(C10txt.text == "0"){
myTimer.start();
}
}
@Fairway,
Try this
function resetCountDown(event:MouseEvent):void{
myTimer.reset();
myText_txt.text=String(count);
myTimer.start();
}
Post a Comment