In this tutorial I will show you how to create a very simple yet effective flash countdown timer using actionscript 2. This is great for use in flash games or multimedia applications. The final result will be a countdown timer like this:
I will also show you how to make a standard game timer, with just a few tweaks of the actionscript.
STEP 1
Well first off create a new actionscript 2 file, and create a new layer. Rename your layers to ‘timer’ and ‘actions’. Lock the actions layer, and select the timer layer. Select the text tool from your toolbar, and draw a text box on stage. In the properties panel, set the text box type to dynamic, and in the Var: box type ‘timer’:
This is what the actionscript will use to display the countdown. You can also change the font, colour and size of your text in this panel.
STEP 2
Now we need to add the actionscript. Select the first frame on the actionscript layer and press f9. First off we need to set the default for our timer, the value it will ocunt down from. We will go with 100 for now, so enter the following code:
timer = 60;
Next we need to create the function that will control the countdown:
countdown = function(){
timer--;
}
Simply, the lines of code abouve create a function called ‘countdown’, and when this function is run it will remove 1 from the total number of the ‘timer’ variable.
STEP 3
The problem with this is that even after the timer reaches 0, it is going to continue counting into the minuses. We need to add the following ‘if’ statement into the function:
if(timer==0){
clearInterval(countdownInterval);
}
This is basically saying if the timer is equal to 0, clear the interval called ‘countdownInterval’. (We have yet to create this interval, this is the next step) Your function should now look like this:
countdown = function(){
timer--;
if(timer==0){
clearInterval(countdownInterval);
}
}
STEP 4
Lastly, we need to create a 1 second interval to run the function, therefore removing one digit every second (genius, I know!). Insert the last line of code beneath the function:
countdownInterval = setInterval(countdown,1000);
This declares a new interval called ‘countdownTimer’, and sets it to fun the function called ‘countdown’ at an interval of 1000 milliseconds (equivilent to 1 second).
Your final code should look like this:
timer = 60;
countdown = function(){
timer--;
if(timer==0){
clearInterval(countdownInterval);
}
}
countdownInterval = setInterval(countdown,1000);
Hit CTRL + Enter and watch your countdown!
STEP 5 - BONUS - MAKE A TIMER
This code can be easily altered to make a timer that counts up, just make the following changes:
timer = 0;
countup = function(){
timer++;
}
countupInterval = setInterval(countup,1000);
Im sure you can work it our, but basically set the timer to 0, remove the if statement (unless you want a time limit, in which case set the if statement equal value to your chosen time limit) and set the timer to ++ instead of — to add one each time the function is run. I have also changed the function and interval names for good measure.
Well thats it for now, I hope this helped you!
The Dude
Did this tutorial help you? If so, click the bookmark button, stumble me, add me to your twitter and tell your friends! Alternatively, sign up and leave a comment!
Not what you were looking for? Then leave a comment or email me and we’ll get you the tutorials you need.
Help me out by voting for this tutorial
Did this post help you? If so help us continue to grow and Digg this page or Share on Twitter!
If you haven't already, sign up to our RSS feed or register to recieve updates direct to your email!
I have a question about the countdown,
It counts from 3 to 0, but in my game you have to click fast on something so you are going to another frame, but when I am in the other frame, the function of the timer will still go on: gotoandplay(105). My question is: how can i stop this?
Hi Jesse,
You need to add a clear interval function in the code for your movieClip/button. For example:
yourButton.onRelease=function(){
clearInterval(countdownInterval);
gotoAndPlay(105);
}
This will stop the countdown for you
i was wondering how i could get the count down time when it hits zero, what code i could use to get it to go to another frame?
Hi J3zuz,
Just another variation on the above code -
countdown = function(){
timer–;
if(timer==0){
clearInterval(countdownInterval);
gotoAndPlay(”yourframename”);
}
}
This will stop the countdown at 0, then go to the frame you specify.
The Dude
do you know the code to get it to go to a different frame when you reach a certian score and thanks a lot for the help.
Hi Again J3zuz,
Very similar to the above code, here is an example:
var score:Number = 0;//declare score variable
if(score==200){//set the score trigger value here
gotoAndPlay(”yourframe”);//set the frame to jump to here
}
The Dude
Nice AS :)can this be converted to minutes and seconds?
Hi Phil.
Currently the timer is set to a 1 second interval. Flash counts in milliseconds, 1000 milliseconds being equivilent to 1 second.
You basically need to add another text box and counter to count minutes so everytime the seconds timer reaches 0, the minute value decreases by one and seconds is reset to 59.
I will create another tutorial to countdown in minutes / seconds as soon as I get a chance.
The Dude
Hi Dude,
I want to set a timer in my first game, and i want to set it in such a way that when the time runs out it goes to another frame. I used the coding which you have suggested to J3zuz. It works but the problem is that when it goes to the specified frame and when i click on the back button which i have made so that it goes to the same frame again where the timer runs, the timer becomes really fast. It moves at the speed of 3 or 5 seconds. although i have used the coding which you gave wherein timer should move every 1 second. Please advise.
Kamran
Hi Kamran,
It sounds like you need to set a clearInterval on the back button, otherwise when you go back it is duplicating the countdownInterval.
Try adding:
backButton.onRelease{
clearInterval(countdownInterval);
//your code here
}
Without seeing your code I can’t be sure, but try the above first.
The Dude
Thanks Dude it worked. By the way this is how my coding looks like:-
on (press) {
gotoAndStop(2);
clearInterval(countdownInterval);
}
Hey Dude,
can you add a hitTest tutorial also with the easiest code possible
Hi Kamran,
Glad I could help. Certainly, I will add a basic hit-test tutorial today / tomorrow. Sign up an account and i’ll mail u when it’s on
The Dude
Hi Kamran,
Hit Test tutorial has added.
The Dude
could you make a tutorial for when you click on a button like the left or right key it goes to a different movie clip?
Ok this is how it goes down.
BIG thanks for the code but have prob
I have a count down on a maze game (thanks to your code)
But my problem is that I have two game over frames one for ‘hit’ as in hit wall or trap and one for ‘Time’ All is well on the time one but when on the ‘hit’ frame the timer is still running so it says you died from hit and if left flicks to died from time out….
Hope you get what I’m saying and a little help would go a long way
I have a problem, when the timer rund out, It goes to game over but when it restarts, it goes faster than it should.
Please help!
I need a countdown clock that goes from 1 minute to 0 seconds and it needs to be activated by clicking on a button. Can you help, I am at my wits end! Thanx!!!
@ Mikey
Like Kamran you need a clear interval before the timer restarts, so put one on the game over screen, code is in post 10
@Donna
This tutorials is a 60 sec / 1 min timer, counts from 60 to 0. Im not to sure what you mean :s
The Dude
Hi was wondering if you could help me. How do you put in the code in the text box? i need to convert it to a symbol :/ anyway if you have msn plz email me, cause i might not look on this site much cause just found it but if you see my email leave me a message i just begin with flash;)
Great one! I’ve allways used getTimer(); in my timers
I feel like an idiot. This really helped a lot
hi, it’s great
but can you give me the timer with hours:minutes:seconds
thanks
i am creating a sniper game and at the moment its pretty basic… i cant seem to get a win screen to work… i will post my script in the next comment.
stop();
s = new Sound();
s.attachSound(”gunshot”);
Mouse.hide();
startDrag(”scope”, true);
kills = 0;
num_people = 3;
_root.p1.dir = 0;
if(kills==3){
gotoAndPlay(”win”);
}
this.onEnterFrame = function() {
mover(_root.p1, 250, 350);
};
onMouseDown = function () {
s.start(0, 1);
for (i=1; imax && ob.dir != 2) {
ob.dir = 0;
}
if (ob._x<min && ob.dir != 2) {
ob.dir = 1;
}
}
timer = 5;
countdown = function () {
timer–;
if (timer == 0) {
clearInterval(countdownInterval);
gotoAndPlay(”lose”);
}
};
countdownInterval = setInterval(countdown, 1000);
plz help me
Tried that
gotoAndPlay(”yourframename”);
To make it so that when the timer ends itll go to the game over page. But it doesnt seem to work… Maybe its my frame number that keeps messing it up? I’m trying to get it out of scene 1 on frame 3 so would I make it “1,3″? Just 3 doesnt work either.
hey The Dude,
cool actionscript there!
by the way, how can i make the timer continue throughout scenes?
hello the dude,
your timer works fine in my sheep herding game the first time round but after the gameover screen when the game cycles round the timer behaves erratically - counts really fast and lumpily. what do you reckon is going on?
(p.s. current version of the game is not on the blog)
thanks a million for being so generous in just helping people.
ta, nettodog.
nettodogs last blog post..the best flash game ever?
[...] 72. Count down timer [...]
Hi Dude,
I think you are great man!
Can you also give me a leo help with this:
———————
I have a Maze game. I want to make a scoreboard and i want the scores to work in such way that if i have given 10 seconds for one level of the game and the player gets to the end point, whatever second that is left will be added to their score.
Note that the end point is a button.
Ta!
Can you please tell me how i make a timer stop on a certain frame?
Hello
i typed all the actions but i cant see any timer. do i need to type something in the textbox?
How do i make a timesup button cover the screen upon the timer reaching “0″?
Thanks
The Dude,
I am making a shooting game where you see how many times you can shoot an object for one minute. The code for the timer worked great and the code for j3zuz worked to but in mine, whenever you click one the object it will flash yellow(gun shot). Please let me know if there is a way to make it so that when it flashes it will automaticly go to the original frame(like gotoAndPlay(frame36) and the timer will still be going? Please help.
hey pepo
was woundering if any1 could help. Im maiing a game with 3 levels. I have put the above timer on level 2, if the users runs out of time they get taken to a fail page. The probelem is even if the user continues and gets taken to the next level before the timer runs out, the timer keeps running through the next level and when reaches 0 goes to the fail page. Is there any way of putting a stop on the timer if the user passes the level so the timer stops working?
Please help asap
thanx
Hey Dude,
very nice tutorial.
It’s the only one that did work fine for my maze game.
tnx
Hi, I’m making the timer count down from 2009 to 1967, and I got that to work fine (thanks heaps!) but was wondering if there is anyway to speed the timer up? Thanks in advance
hey i was wondering how u cld make a bar that counted down time so you see it move down
*my current code*
onClipEvent(enterFrame)
{
timer = 5;
countdownInterval = setInterval(countdown,1000);
countdown = function()
{
timer–;
this._yscale = timer;
}
if(timer==0)
{
clearInterval(countdownInterval);
}
}
it doesn’t work
can u help??
Hello,
Great tutorial I used it in a project of mine and it works perfectly! I was wondering… I need the counter to restart after zero (52sec to 0, then back to 52 and begin count down again) and also add each time the counter hits 0
Could you offer me some help?
how can i add a start button?
Hey The Dude!
You’ve got the best tutorials on the web.
My clearInterval never seems to work!
I have a user controlled movieclip with the following code on it. when it hits the “turtle” I want it to go slower for four seconds. this works fine the first time, but whenever you hit the turtle again, its only slow for three or less seconds. here’s my code:
onClipEvent (load) {
function speedReset() {
clearInterval(slowInterval);
moveit = 10;
}
speedReset();
}
onClipEvent (enterFrame) {
if (this.hitTest(_root.turtle)) {
moveit = 3;
slowInterval = setInterval(speedReset, 4000);
}
if ((Key.isDown(Key.RIGHT))) {
this._x += moveit;
} else if ((Key.isDown(Key.LEFT))) {
this._x -= moveit;
}
if ((Key.isDown(Key.DOWN))) {
this._y += moveit;
} else if ((Key.isDown(Key.UP))) {
this._y -= moveit;
}
}
I am making a looping animation with a button that makes it stop, and I want to post how long they watched it. Like if they watched for 52 seconds and hit the button, I can make scene that goes something like…
“Congrats! You lasted seconds!”
and the 52 would appear in the area.
Can you help?
Hi guys i am new to flash and i dont how to write the code. Here i have a problem that i have make the timer in my quiz with this code
timer = 10;
countdown = function()
{
timer–;
}
if(timer==0)
{
clearInterval(countdownInterval);
}
countdown = function()
{
timer–;
if(timer==0)
{
clearInterval(countdownInterval);
}
}
countdownInterval = setInterval(countdown,1000);
Then i have a problem that if that 10 seconds will over then he/she should return to the other page and how can i give the link and where i have to place that code. I have tried above codes but i didnt understand where i have to put that code and i am getting errors like syntax error. pls help me plssss
thanks for all the great timer action here.
i am trying to stop & start the timer with buttons.
this stops it “on (press) {clearInterval(countdownInterval);}
but on (press) { countdown();} only advances 1 second per mouse click.
any solutions?
thanks again
Hi i’am making a game where you have to complete it as fast as possible and need the time in which it was completed to be printed onto the next scene.
Can you please help?
Thanks! We’re creating some eLearning games with countdown timers. This tutorial was perfect!
Hi.
First, thanks for a great, easy to understand tutorial. Before I check out the other tutorials on this page I have a small question:
I’m making the timer count up and showing the time on the last game frame. I’ve managed to show the time, but the timer keeps counting when the game is over. Could you please tell me how I could make the timer stop so that I can show the final time in the last frame?
Thanks again for a great tutorial
Hi The Dude
Thanks for your great tutorial, it’s really easy to understand. I am using the timer for an animation similar to the 24 title sequence. I was wondering is there any way to make the timer have 2 digits when you get from 9 to 0 for example: 09, 08, 07, 06?
This would really help me create the right look. Can you help?
hi there,
Thanks guys for ur comments found em very useful. But i’ve got a problem.
I’m making a rocket game where the rocket falls from the top of the screen and u gotta make it land on a base.
I wanted a timer before all this takes place, like they do on normal games (nothing moves but only after the the numbers are cleared 3,2,1,0 then START LEVEL) my game is still active (although nothing is supposed to move) and the 0 doesn’t clear either it’s still there on the screen. Please help.
Hi The Dude,
I am making a Apple Catch Flash Game and I want a countdown timer from 20 seconds to 0 and I cant seem to get the code right. When the time reaches 0 I would like the level to be repeated again. I was wondering if you would be able to help me with my problem.
Thanks.
Hey how can i reset this timer once it has counted down (i.e. on a button press)
Hi how come i can create a button with the timers?
hi
i was wondering how can we make the countdown to end. so we can determine the total elapsed time
thanx ;D
Hey The Dude, I was wondering if you could help me with a small problem. I’ve managed to stop the countdown-timer when clicking on a button using ‘j4y5on’s code, but like him, I can’t get it start again when clicking on another button. Could you please help?
thanks in advance. -QrK
This is a very useful countdown timer. I was thinking of using it on my website. Hs anyone used it for that rather than for games?
can i use the one countdown timer to start another countdown timer?
Hi Dude,
Your Timer was Great Helpful Thanks. Keep Posting new tutorials and keep up the good work Thanks. Youre a good man
!!!Youre Genius!!!