Flash Countdown Timer

In this tutorial, you will learn how to create a timer in Adobe Flash that will count down the time to a given date in days, hours, minutes, and seconds. If you were looking for a great Flash tool for counting down holidays, birthdays, etc, this is the tutorial for you.

Also, this Flash countdown timer tutorial allows you to preset any day of your choice with in AS2 and AS3. Have fun!

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://flashspeaksactionscript.com/files/CountdownAS2/countDownTimer.swf” width=”500″ height=”200″ targetclass=”flashmovie”]Get Adobe Flash player

[/kml_flashembed]

Create the Flash Countdown Timer in AS2

This tutorial will go over the basics on constructing a Flash countdown timer within Actionscript 2.0.

Step 1: Create a dynamic text field with the string value of “00:00:00:00”. Note:this is simply to get the text field to the size needed for the dynamic content.

Step 2: Delete the string value of text field and name the text field “time_txt”.

Step 3: Create a new layer named “actions” and insert the following code in the first keyframe:

Source File: countDownTimer.fla

[box type=”note”]Update: Based on your feedback on this tutorial, I decided to create a hassle free CountdownTimer AS3 class that will assist in creating your very own flash countdown timer. Learn how to create a Flash Countdown in AS3 using this class.[/box]

//onEnterFrame allows for a function to be called every tick
this.onEnterFrame = function()
{
	//Stores the current date
	var today:Date = new Date();
	//Stores the Current Year
	var currentYear = today.getFullYear();
	//Stores the Current Time
	var currentTime = today.getTime();
	//Creates and stores the target date
	var targetDate:Date = new Date(currentYear,11,25);
	var targetTime = targetDate.getTime();
	//Determines how much time is left.  Note: Leaves time in milliseconds
	var timeLeft = targetTime - currentTime;
	var sec = Math.floor(timeLeft/1000);
	var min = Math.floor(sec/60);
	var hours = Math.floor(min/60);
	var days = Math.floor(hours/24);
	//Takes results of var remaining value.  Also converts "sec" into a string
	sec = String(sec % 60);
	//Once a string, you can check the values length and see whether it has been reduced below 2.
	//If so, add a "0" for visual purposes.
	if(sec.length < 2){
		sec = "0" + sec;
	}
	min = String(min % 60);
	if(min.length < 2){
		min = "0" + min;
	}
	hours = String(hours % 24);
	if(hours.length < 2){
		hours = "0" + hours;
	}
	days = String(days);

	if(timeLeft > 0 ){
		//Joins all values into one string value
		var counter:String = days + ":" + hours + ":" + min + ":" + sec;
		time_txt.text = counter;
	}else{
		trace("TIME'S UP");
        var newTime:String = "00:00:00:00";
        time_txt.text = newTime;
        delete (this.onEnterFrame);
	}
}

104 thoughts on “Flash Countdown Timer

  1. Hi, thank for this tutorial, it’s very usefull.
    Do you now how I could make this countdown auto-repeat?
    Example: if my event occures every 2 days and I don’t want to change the time in the source file when it ends… Could the reset be automatic?

    Thanks for the answear!

  2. This is great! Does anyone know how to make the countdown stop and display "00:00:00" on the final end time? And to make sure it continues to display double digits as it counts closer to the end time (e.g. 00:00:09:48) ?
    Thanks!

  3. Has anybody has issues with this. I downloaded the Actionscript 2.0 and put into my site. I changed the target date to 8/30/2008. The calculation is not correct! It displays a 101 days. There are only 71 days until this date from today 6/20/2008.

    Any Help would be appreciated.

  4. @Scott, the date needs to be set starting from 0 not 1. For example, if you want August as your target month, you would need to indicate month #7 not #8. That is why you are exactly 1 month ahead.

  5. It seems if you are using this code to update a UI, or simply print out the time left to an output window as in the example. It will finish at the correct time, but the output will skip seconds occasionally, and will update at inconsistent intervals (the actual time between ticks can be +/- a few hundred ms). This is due to processing time and a non-exact Timer class. I’d suggest that you set your interval to be something quicker (maybe 100ms) and on each update, you save the current time. If the current time recorded is different than the previously saved time, then you can assume that an actual second has elapsed and update your UI or print out your time left.

  6. Hey Mela- Here’s how you stop the counter and set time_txt to “0:00:0:00” (or anything for that matter). Add this…

    if((d <= "0")&&(hrs <= "0")&&(min <= "0")&&(sec <= "0")){
    countdownTimer.stop();
    var newTime:String = "0:00:00:00";
    time_txt.text = newTime;
    }

  7. Really like this. Does anyone know how to get this to stop at a specific TIME on a specific DAY? For example, stop at 2008,00,08 at 10AM?

  8. Sounds good to me – though it is not exactly what I will be needing.

    I am looking for a weekly countdown for an event that let’s say starts every Tuesday at 4 pm. So once placed on the site it will show the countdown to the next date. Any suggestions?

    • Klaus did you get a work around with the countdown clock resetting and counting down to a particular date and time every month? – I noticed that you didnt get a reply and need the same code.

      Pelase help
      Matt

  9. this tutorial’s very useful.it helps that it’s really concise and clear as well.
    however,i wonder whether a user can input any time he wants through an interface without having to access the actionscript, say 10 minutes and start counting down from there.how can this be done?i have yet to find any tutorial on this!

  10. Hi , how to make the countdown go to frame 2 when the count is ended…I want to show a text on frame 2 after the count is finished !!!
    Thanks for help !!!!!

  11. Would it be possible to convert the remaining days to hours? I want to have a clock that counts back from 48 hours instead of 1 day and 24 hours…
    I hope someone can help me!

  12. @James Sanz and warhouse
    You would set up a function to check at some interval. Like this, but with proper indentation:

    var timeCheck:Number = setInterval(checkTime, 25);
    function checkTime():Void {
    if(counter == 00:00:00:00){
    gotoAndPlay(2);
    }

    So, to explain this code, you create the variable (it can be anything, I just used whatever came to my head first)and make it a number. You then use the set interval method to check the function that you put in the parentheses, at however many milliseconds you put in there, too. You then create the function that the setInterval method is going to run. Whatever variable you used to replace counter in your code from the original code up at the top of the page must be put in the if statement. So, when it reaches 0, it will goto and play (you can put in gotoAndStop if you want) frame 2 or whatever you have there.

  13. I can NOT get this goober to work. I’ve tried it twice with the same result. I’ve checked and checked the action script, and it all seems to be EXACTLY what he’s typing, but I cannot get it to work.

    This (very uninteresting) result is what I get:

    Any help?

  14. By the way, here’s my code. It’s quite possible that I’m being a total dumbass and missing something somewhere, which I wont’ rule out; I’m a designer, not a coder, and AS drives me batty:

    ActionScript pasted into a Pastie snippet

  15. @Doug, For the most part your code looks fine, however, are your textfields dynamic?  If so, are they embedded correctly?

  16. Great Tutorial. Simple and well explained.
    IΒ΄ve noticed that in both AS2 and AS3 when I change the “flash month” number, from 3 up to 9, I get an “hour less” result.
    This problem does not happen with “flash month” numbers 0 (Jan), 1, 2, 10, 11 (Dec).
    I appreciate your reply.

  17. Someone else asked… but does anyone know how to set it for a certain time on the end date. I need the countdown to end at 7:35 on Dec. 28

  18. For stopping the movie after it reaches zero, I don’t know where to insert the above “if statement” posted by “worked”. Also is it possible that it shows a blank page after it reaches zero. I don’t want that it shows negative numbers. Does anyone know? Please help.

  19. @George: If you are using the AS2 version, you can add it at the end of the onEnterFrame function.  If you are using AS3, place it below the existing code within the updateTime function.  That should do it.  You are basically checking it after everything gets updated.  Keep in mind, this is a sloppy solution, yet effective.  I plan to rewrite this countdown timer within the upcoming weeks to include many of the requested features.

  20. Ok. It is working. However, when I change the time on the PC the timer also changes. How can I make it independent of PC time and make it use the server time?
    Thanks.

  21. Have you noticed that the second jumps from 2 to zero. It does not go 2, 1, 0. Just change your pc time to 2007 and you will see on the banner above that seconds jump. How can we fix this problem?

  22. @George: I see what you are saying. I am sure you can set this up via PHP + ActionScript. However, I don’t believe all servers are synced up to the same time. It is a nice way to know exactly what the front end user will be viewing at all times.

  23. Hi,

    Thanks for this tutorial! It works fine!

    Could anyone of you possibly know how I can link my countdown clock with an external URL?

    It’s not as easy as used to be with AS2, and unfortunately I haven’t found similar countdown clock in actionscript 2.

    Thanks in Advance,

    Rns

  24. Thanks for your prompt reply Angel!

    Please let me explain you the situation:

    I work for a company and we’re having an important event in May 1st 2009.

    I’ve been asked to design a countdown clock banner so as to promote the event into different websites. My real problem is that I want to make it work as a button so when a user clicks on it he/she visits our webpage directly. (getURL)

    Thanks to your tutorial I’ve managed to design the timer but I can’t make it work as a button.

    Although, I found this code which works perfectly alone.

    function gotoPage(event:MouseEvent):void
    {
    var targetURL:URLRequest = new URLRequest("http://mywebpage.com/");
    navigateToURL(targetURL);
    }
    myBtn.addEventListener(MouseEvent.CLICK, gotoPage);

    But when I put together the two different set of actions it doesn’t work at all.

    Do you have any suggestions?

    I hope it makes sense..

    Thanks in advance.

    Rns

    • @Rns: The code above looks fine. Why don’t you place an invincible MovieClip over the entire timer and add that existing code in reference to the new MovieClip? Logically that should easily fix that problem for you. Let me know how it works out.

  25. Hi Angel! Thanks for your advice! It works fine! πŸ™‚

    There’s one more thing I’d want to short out!

    I want to make the timer stop when it will reach the date (00:00:00:00)
    Above if found this code from “Worked” but I’m not sure where to put this within the code.

    if((d <= β€œ0?)&&(hrs <= β€œ0?)&&(min <= β€œ0?)&&(sec <= β€œ0?)){
    countdownTimer.stop();
    var newTime:String = β€œ0:00:00:00?;
    time_txt.text = newTime;

    Any ideas?

    Thanks in advance and I hope you have a great weekend!

    Rns
    }

  26. Hi Angel,

    Thank you very much! I placed an invisible movie click and it works fine!

    Could you please tell me how I can make the timer stop at 00:00:00:00?

    I found this actionscript above

    if((d <= β€œ0?)&&(hrs <= β€œ0?)&&(min <= β€œ0?)&&(sec <= β€œ0?)){
    countdownTimer.stop();
    var newTime:String = β€œ0:00:00:00?;
    time_txt.text = newTime;
    }

    …but I’m not sure where to place it within the rest code.

    Thanks again for your support and I look forward to hearing from you.

    Have a nice day πŸ™‚

    Rns

    • @Rns: I’m glad things worked out. You are going to basically need to wrap a case around the script you posted to check whether or not the target time has been hit or not. Check out this Pastie. It basically shows you what you basically need to do.

  27. @Rns: The existing code should already do it. The only thing that is missing is adding the extra 0 to the new time string. Hope this helps!

  28. Thanks for this script and tutorial. It works perfect as intended, however I’d like to know how I can make the flash movie jump to frame #2 when the counter reaches zero (Action Script 3)? I know absolutely nothing about AS3, so I need to know exactly what to write, and where. =)

  29. Oh and by the way, the reason I want to jump to frame 2 when the counter reaches zero, is that the counter should start counting down to a new date. Maybe this isn’t possible, as I was planning on just copying the action script from frame 1 and just change the end date?

  30. Hi Guys
    I have the code below set for the timer but I need the clock to stop at 9.am on 2nd March 2009

    and I’m stuck

    I can get it to stop at midnight on the 2nd

    can someone help – I’m desperate for this

    ActionScript pasted into a Pastie snippet

  31. var targetDate:Date = new Date(2009,01,25, 13, 57, 0, 0);

    use this to set a deadline time ie 13.57

    the only problem I have is I need the clock to stop at this time

    once reached it goes past and comes up with -1;-1;-1;-1 and counts away from the time

    HELP

  32. Hi Angel,

    Could you please tell me a trick how to stop the clock shrinking when the value is for example 11:11:11:11?

    Many thanks in advance.

    Rns

  33. Hi Angel

    I am having trouble with something.. if the countdown reach 00:00:00:00 I want count up like 00:00:00:01 .. insted of -1:-1:-1:-1. Can you please help me with it ? sorry about my english.
    thank you.

    kalap

    • Hey Kalap, Check out this Pastie. You are basically going to check whether or not the target time has been hit or not. This should fix your problem! Let me know if it does or not.

  34. THIS IS URGENT!! I NEED THIS QUESTION ANSWERED ASAP!!
    I’ve pasted the following AS but it’s not working properly. It’s no longer counting down, it only has “00:00:00:00”. What do I need to fix in order for it to continue to countdown?

    ActionScript pasted into a Pastie snippet

    • Hey Rishele, looks like you had an extra bracket when you declared your onEnterFrame function. I cleaned up the formatting and pasted it into a pastie.

  35. thanks for the script.. but how can i use the countdown timer with input parameter?

    regards,
    emilio7000

  36. Thanks so much—this was really helpful.

    I am having difficulty with applying this to what I want to do. I want the countdown timer to hit zero, and then launch an animation that will start at the next frame. I am finding multiple levels of difficulty with this. First, the code that people have suggested to end the timer

    e.g.
    if((d <= β€œ0?)&&(hrs <= β€œ0?)&&(min <= β€œ0?)&&(sec <= β€œ0?)){
    countDownTimer.stop();
    var newTime:String = β€œ00:00:00:00?;
    time_txt.text = newTime;
    }else {
    time = d + β€œ:” + hrs + β€œ:” + min + β€œ:” + sec;
    time_txt.text = time;
    }

    is either not having any effect, or causing the timer to not work at all. I can’t figure out if the code is just doing nothing, or I am putting it in the wrong place. I have tried it in several places, and I have no idea where it should go.

    Second, when I add a second frame in the scene, the animation just plays back and forth between the frames. I know that I need some sort of command in the if,then,else statement but I have no idea how to do it. Any help that anyone could give me would be much appreciated. I can find nothing online as helpful as here.

  37. ActionScript2:
    To add a specific time to your countdown simply add to this string:
    var targetDate:Date = new Date(currentYear, 11, 25);

    Example: End countdown at 3:30 pm on August 8th.
    var targetDate:Date = new Date(currentYear, 07, 08, 15, 30);

    Date holds variables as listed: Date(year, month, day, hour, minute, second, ms)

    As for AS3 I am unsure, I have not familiarized myself with this yet.

  38. How would I call a function within a different frame.

    I want to wait for a certain length of time 7000ms so the first pic is displayed then interrupt every 4000ms and call a nextImage function in a different frame.

    ActionScript pasted into a Pastie snippet

  39. Hey guys,

    I know I’m missing something… but how can I manipulate the above code so that it is just showing MINUTES?

  40. for whatever reason…my time is not showing up when I check it at the end. I copied the tutorial verbatim, and checked it 3 times…are there some settings I’m missing? I’m using Flash 8 Pro with AS2.

  41. I keep getting complier errors:
    The class or interface ‘Timer’ could not be loaded.
    The class or interface ‘TimerEvent’ could not be loaded.

    I’m using Flash CS4 and AS3 by the way.
    How would I fix this?

  42. This works great, however I have a non-flash client who would like to change the date every so many days via an external TXT file (and of course they don’t want to come back to me to change it). How do I incorporate this into the code?

  43. Thanks for great tutorial. But I want to countdown to a date in next year. until jan 15. when I write nextyear in the Actionscript I only get 00:00:00:00. can anybody help me???

  44. I have a weird problem. I’ve gone through every countdown tutorial I’ve found and I see no difference in my code… The timer runs fine usually for about 6 hours and then suddenly it starts counting hours as fast as second and after a while minutes too pass as fast as seconds.

    I’m getting desperate with this problem, so if anyone can even guess what might be the problem I’d be most thankful.

  45. How can i change the code to do that my countdown finish in a specific time…

    I was checking the code and i see that the code take the time that the computer have in that moment… For example in my computer I changed the time and the code addpated the limit date to that time… And I dont know how can i change this code…

    I dont know if you understand me… I need help..

    Just i want to know how can i change or addpated this code for an specific time, not taking the time of the computer…

    Thnks

    Blessings!!!

  46. Hi! thanks for the additional feature we can add to our website. But then i wonder how i can crop the size of the frame.
    I want only 185 width 50 height. But then when i resizing my countdown timer flash inserted in my page it affect also the font size, which became very small and hard to read.. Please help me how to resizing the flash without affecting the size of the object.. thank you

  47. I am getting error – 1120: Access of undefined property time_txt.
    Just cut and pasted code. Did I miss something?

  48. Is there a way to use the time of a server? So that if you post this countdown on a website, that no matter in what timezone you are, you always know that the countdown will show the correct information? Cause right now it is using the time of the computer.

    Thanks!

  49. I am using the code, but I don't need the seconds, minutes or hours. How can I get a dynamic countdown that shows days left until XX? When I remove the sec, min or hour code, I get a NA/error.

  50. Thanks everybody for your comments. Based upon your feedback there is an updated version of this Countdown Timer available. Unless you are in need of an AS2 version of a Countdown Timer, you can find an AS3 version of a Flash Countdown Timer that I developed earlier this year.

    It provides much more useful features like being able to easily define and update your target date up to the hour and minute and custom countdown events dispatched for easy application usage.

    You can find it here http://flashspeaksactionscript.com/flash-countdow

  51. hey this was a great tutorial but I’ve got a little question, I’m using this code to create a countdown to an event, like:
    5 days, 12 hours, 45 minutes and 3 seconds until the event starts,

    and a second frame for when the event starts like
    ‘the wait is over”

    so my question is how can I turn the timer reaching 00:00:00 into a condition? like
    if(“here would be what I don’t know”){gotoAndStop2}

    peace,
    King Poop

  52. Please help!

    I am looking for a weekly countdown for an event that let's say starts every Tuesday at 4 pm every wk. So once placed on the site it will show the countdown to the next date and so on…. Any suggestions?

      • Thanks for your reply but I want to use this in a banner that is just 1 swf (also very size dependant) and not have external AS files. What would you think would be the best method?

        Thanks
        Matt

      • Hi Angel,

        I need to use AS2 and be contained in one file. Is this possible with this code? I noticed a few people asking about this in above thread. Hope you can help.

        Matt

        • Hey Matt, I will come up with a solution for you tonight and post it on this thread. Now that I know your requirements…let me see what I can brew up.

    • Hey Matt, here you go! The countdown's target end date will be updated so that it is of Tuesday at 4.pm. If it happens to time out as the swf is loaded, it will then add 7 days to the target end date to accommodate the new target end date.

      I've pasted it into a pastie. Let me know how it works out!

      • THanks alot for this Angel looks cool. So to understand I have been trying to set other date and have a play.

        eg
        var tuesday:Number = 2;
        var fourPM:Number = 16;

        Tuesday is second day of the week and 4pm is the 16th hour but I must be missing something else how can I edit it if in future the day or time changes?

        THanks
        Matt

  53. VERY URGENT … i need to display TWO countdowns … but if i just repeat the code – and change the instande name of the 1 dynamic text box, it only displays the first timer … second is blank ….. HELP!!!! what do i do????

Comments are closed.