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.
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??