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!
Create the Flash Countdown Timer in AS3
This tutorial will cover the basics of using the Date() class and the Timer() class in ActionScript 3.0.
Step 1: Create a dynamic text field
Step 2: Embed the font characters in your Flash file that are needed so your users don’t end up viewing your font all weird. In this case, you simply might only need to embed numbers and symbols.
Step 3: Create a new layer named “actions” and insert the following code in the first keyframe.
Source file: countdown.fla
Source: Craig Campbell’s Tutorial:Creating a Timer in ActionScript 3
//Create your Date() object
var endDate:Date = new Date(2008,7,20);
//Create your Timer object
//The time being set with milliseconds(1000 milliseconds = 1 second)
var countdownTimer:Timer = new Timer(1000);
//Adding an event listener to the timer object
countdownTimer.addEventListener(TimerEvent.TIMER, updateTime);
//Initializing timer object
countdownTimer.start();
//Calculate the time remaining as it is being updated
function updateTime(e:TimerEvent):void
{
//Current time
var now:Date = new Date();
var timeLeft:Number = endDate.getTime() - now.getTime();
//Converting the remaining time into seconds, minutes, hours, and days
var seconds:Number = Math.floor(timeLeft / 1000);
var minutes:Number = Math.floor(seconds / 60);
var hours:Number = Math.floor(minutes / 60);
var days:Number = Math.floor(hours / 24);
//Storing the remainder of this division problem
seconds %= 60;
minutes %= 60;
hours %= 24;
//Converting numerical values into strings so that
//we string all of these numbers together for the display
var sec:String = seconds.toString();
var min:String = minutes.toString();
var hrs:String = hours.toString();
var d:String = days.toString();
//Setting up a few restrictions for when the current time reaches a single digit
if (sec.length < 2) {
sec = "0" + sec;
}
if (min.length < 2) {
min = "0" + min;
}
if (hrs.length < 2) {
hrs = "0" + hrs;
}
//Stringing all of the numbers together for the display
var time:String = d + ":" + hrs + ":" + min + ":" + sec;
//Setting the string to the display
time_txt.text = time;
}
Create the Flash Countdown Timer in AS2
This video 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
//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);
//Joins all values into one string value
var counter:String = days + ":" + hours + ":" + min + ":" + sec;
time_txt.text = counter;
}
May 30th, 2008 at 9:19 am
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!
June 11th, 2008 at 3:36 pm
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!
June 20th, 2008 at 3:19 pm
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.
June 20th, 2008 at 5:46 pm
@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.
July 23rd, 2008 at 7:25 pm
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.
July 28th, 2008 at 12:08 pm
Thanks for this great tutorial!
August 21st, 2008 at 10:40 am
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;
}
September 18th, 2008 at 12:05 pm
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?
October 16th, 2008 at 1:40 pm
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?
October 20th, 2008 at 10:36 am
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!
October 25th, 2008 at 11:53 pm
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 !!!!!
November 5th, 2008 at 11:12 am
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!
November 17th, 2008 at 10:10 pm
Hey, I have the same question as ‘warhouse’,
What is the code that you add to make the counter show a different frame when it’s over?
Thank’s,
SRS.
November 20th, 2008 at 11:24 pm
@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.
November 21st, 2008 at 12:21 pm
Thanks for posting a quick solution to this! I haven’t had time to look into it. Thanks once again!
November 24th, 2008 at 2:04 pm
After I make the modification for December 7, 2008 date and put it in my site, it will not show up on the site? Any suggestions or reasons?
November 24th, 2008 at 2:09 pm
omg …. i did it !!!!
November 24th, 2008 at 2:37 pm
Got it.. i am a goober and was calling out the actionscript to the wrong folder.. so sorry and thanks
December 4th, 2008 at 1:07 am
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:
http://www.geocities.com/dougcollins02/counter_flash.swf
Any help?
December 4th, 2008 at 1:10 am
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:
this.onEnterFrame = function() {
var today:Date = new Date();
var currentYear = today.getFullYear();
var currentTime = today.getTime();
var targetDate:Date = new Date(2009,0,15);
var targetTime = targetDate.getTime();
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);
sec = String(sec % 60);
if(sec.length < 2){
sec = “0″ + sec;
}
min = String(min % 60);
if(min.length < 2){
min = “0″ + min;
}
hours = String(hours % 24);
if(hrs.length < 2) {
hrs = “0″ + hrs;
}
days = String(days);
var counter:String = days + “:” + hours + “:” + min + “:” + sec;
time_text.text = counter;
}
December 11th, 2008 at 6:01 pm
@Doug, For the most part your code looks fine, however, are your textfields dynamic? If so, are they embedded correctly?
December 14th, 2008 at 8:14 am
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.
December 16th, 2008 at 2:30 pm
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
January 13th, 2009 at 8:42 am
Remember that months starts with 0…. 0 = january, 1 = February…
January 14th, 2009 at 2:11 am
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.
January 14th, 2009 at 7:09 pm
@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.
January 24th, 2009 at 8:39 pm
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.
January 25th, 2009 at 1:23 pm
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?
January 26th, 2009 at 6:33 pm
I couldn’t find an example online that includes year and month in the count down information So I created this example (AS2): http://interactivesection.wordpress.com/2008/07/17/example-countdown-display-including-year-and-month-information-as2/
January 27th, 2009 at 12:31 pm
@Hu: I’ve been working on a solution similar to yours. Nice example by the way!
January 27th, 2009 at 12:37 pm
@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.
January 30th, 2009 at 6:36 am
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
January 30th, 2009 at 9:06 am
@Rns: What exactly do you mean “with an external URL”?
January 30th, 2009 at 10:59 am
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
January 30th, 2009 at 1:45 pm
@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.
February 1st, 2009 at 9:26 am
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
}
February 4th, 2009 at 3:41 am
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
February 4th, 2009 at 10:08 am
@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.
February 4th, 2009 at 11:59 am
It works fine! Many thanks
February 4th, 2009 at 12:00 pm
Angel, there’s one more thing… Could you please tell me how to make it stop like 00:00:00:00?
February 4th, 2009 at 3:23 pm
@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!
February 5th, 2009 at 6:52 pm
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. =)
February 5th, 2009 at 6:59 pm
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?
February 24th, 2009 at 9:02 am
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
this.onEnterFrame = function() {
if((d <= “0″)&&(hrs <= “0″)&&(min <= “0″)&&(sec <= “0″)){
countdownTimer.stop();
var newTime:String = “00:15:00:00″;
time_txt.text = newTime;
}else {
time = d + “:” + hrs + “:” + min + “:” + sec;
time_txt.text = time;
}
var today:Date = new Date();
var currentYear = today.getFullYear();
var currentTime = today.getTime();
var targetDate:Date = new Date(2009,01,24);
var targetTime = targetDate.getTime();
var timeLeft = targetTime - currentTime;
var sec = Math.floor(timeLeft/1000);
var min = Math.floor(sec/60);
var hrs = Math.floor(min/60);
var days = Math.floor(hrs/24);
sec = string(sec % 60);
if (sec.length < 2) {
sec = “0″ + sec;
}
min = string(min % 60);
if (min.length < 2) {
min = “0″ + min;
}
hrs = string(hrs % 24);
if (hrs.length < 2) {
hrs = “0″ + hrs;
}
days = string(days);
var counter:String = days + “:” + hrs + “:” + min + “:” + sec;
time_txt.text = counter;
}
February 25th, 2009 at 8:03 am
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
March 10th, 2009 at 12:00 pm
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
March 13th, 2009 at 11:32 am
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
March 13th, 2009 at 6:46 pm
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.
March 30th, 2009 at 2:54 pm
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?
this.onEnterFrame = function () {}
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;
var today:Date = new Date();
var currentYear = today.getFullYear();
var currentTime = today.getTime();
var targetDate:Date = new Date(currentYear, 3, 01);
var targetTime = targetDate.getTime();
var timeLeft = targetTime - currentTime;
var sec = Math.floor(timeLeft/1000);
var min = Math.floor(sec/60);
var hrs = Math.floor(min/60);
var days = Math.floor(hrs/24);
sec = string(sec % 60);
if (sec.length < 2) {
sec= “0″ + sec;
}
min =string(min % 60);
if (min.length < 2) {
min= “0″ + min;
}
hrs = string(hrs % 24);
if (hrs.length < 2) {
hrs= “0″ + hrs;
}
days = string(days);
var counter:String = days + “:” + hrs + “:” + min + “:” + sec;
time_txt.text = counter;
}
March 30th, 2009 at 5:16 pm
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.
May 6th, 2009 at 12:52 pm
Does anyone notice that the result has 30 more days than it actually is? I change endDate to today and it show 30 days xx hours xx mins xx secs… (It’s the same problem as Kirupa’s example http://www.kirupa.com/developer/mx/countdown.htm). Is any bug with getTime() or other math stuff I havent figured out? Thanks for the help.
May 6th, 2009 at 1:11 pm
Oh i just saw the question has been answered. Sorry to re-post it.
May 7th, 2009 at 11:51 pm
I can’t figure out why it won’t say 00:00:00:00! It just goes into the negatives. Please help!
//onEnterFrame allows for a function to be called every tick
this.onEnterFrame = function()
{
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;
}
//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,4,8,1,49,0);
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);
//Makes the numbers so that it rounds the remainder.
//Makes sure that there are 2 places for the number. Makes these numbers into strings
sec = String(sec % 60);
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);
//Joins all values into one string value
var counter:String = days + “:” + hours + “:” + min + “:” + sec;
time_txt.text = counter;
}
June 24th, 2009 at 11:12 pm
tnx for the info good job