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;
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!
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!
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.
@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.
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.
Thanks for this great tutorial!
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;
}
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?
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?
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!
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 !!!!!
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!
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.
@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.
Thanks for posting a quick solution to this! I haven’t had time to look into it. Thanks once again!
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?
omg …. i did it !!!!
Got it.. i am a goober and was calling out the actionscript to the wrong folder.. so sorry and thanks
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?
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…
@Doug, For the most part your code looks fine, however, are your textfields dynamic? If so, are they embedded correctly?
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.
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
Remember that months starts with 0…. 0 = january, 1 = February…
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.