Countdown timer with ActionScript 3.0
Tweet
In this tutorial I will show you how to use Timer and Date classes to create a nice countdown timer using Actionscript 3.
Well, each of us is waiting for something nice – birthday, vacation, weekend. As a soccer fan I am waiting for the FIFA World Cup 2010 which takes place in South Africa and begins on 11th June 2010. I am counting down the days but I can say it’s not that easy. Because of this I made a Flash countdown timer and now it is much easier.
So let’s get started with our countdown timer.
1. Create a new Flash CS3 document and save it under the name “countdown.fla”.
2. Now create a new dynamic text field and name it “time_txt”. Here we’ll put the time that remains to the beginning of the world cup championship. For this tutorial I am using font downloaded from here. To fully complete this tutorial you have to download this font and to install it on your system. Choose #009900 for font color and 24 for font size. Embed the font like this:
3. Now we have to move to actionscript. Create a new layer called “actions” and on its first keyframe press F9 to go to the “Actions” panel. Here is the code:
//First we create a date object. Note that we count the months from "0"!
var endDate:Date = new Date(2010, 5, 11);
//next we create a timer that will update the time every second
var timer:Timer = new Timer(1000);
//we add an event listener to the timer and then we start it
timer.addEventListener(TimerEvent.TIMER, updateTime);
timer.start();
//Calculate the time remaining as it is being updated
function updateTime(e:TimerEvent):void{
//we create a variable to hold the current date
var currentDate:Date = new Date();
//we calculate the time to FIFA World Cup 2010
var timeLeft:Number = endDate.getTime() - currentDate.getTime();
//we convert 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);
seconds %= 60;
minutes %= 60;
hours %= 24;
//we convert the numbers to strings
var sec:String = seconds.toString();
var min:String = minutes.toString();
var hrs:String = hours.toString();
var d:String = days.toString();
//if we have a single digit we add "0" in front of it
if (sec.length < 2) {
sec = "0" + sec;
}
if (min.length < 2) {
min = "0" + min;
}
if (hrs.length < 2) {
hrs = "0" + hrs;
}
//we create a variable to hold all elements and then we add it to our text field
var time:String = d + ":" + hrs + ":" + min + ":" + sec;
time_txt.text = time;
}And here is the final result:
Very nice of you to show the usage of actionscript 3 for the creation of a simple countdown timer. It looks very familiar to me, though. I am going to check up every once in a while for updates on your blog. Keep up the good work.
You know so many interesting infomation. You might be very wise. I like such people. Don’t top writing.
Thank you for the code above. Can you explain what code I would use if I just wanted to have the timer in minutes ONLY?
Thanks,
Tony
Sure.
Remove this part of the code: minutes %= 60;
You should do this because you want to show all of the minutes.
Then change this:
var time:String = d + “:” + hrs + “:” + min + “:” + sec;
to:
var time:String = min;
That’s all.
Hi, how would you add code for milliseconds?
Awesome job and thanks in advance!
how can i set the target date through an external xml file.
plz, help me ASAP.
thanks
saeef
Can someone PLEASE tell me how to do a simple (days only) count down? I need it to count down to April 19, 2010. THANKS so much for any help. I tried modifying this tutorial, but no luck.
Thanks
Every time I make a change to the line
var endDate:Date = new Date(2010, 5, 11);
The result never adds up to the right day. I put April 19th 2010 and it says there is 65 days remaining. Should be more like 13 days.
Thanks for your help.
I want, date with hours: example
countdown to 18 april 2010 at 5:00 pm
Please can anybody help me with this
Nice work its awesome
How i stop when countdown finish the? Because she is giving number negative finish after
@Luis Felipe
Hi Luis
I had the same problem until I came across another tutorial which showed how to stop the counter at 0.
if(time_txt.text == “0:00:00:00″){
delete this.onEnterFrame;
}
The above depends on whether you are using days:hrs:mins:secs
Hope it helps
@Steve
In your code of… new Date(2010, 5, 11);
You are setting the date to be 2010, June 11th
If you use numbers for months remember that months start at “0″ not 1
So January = 0
February = 1
March = 2
April = 3
etc
as you wanted April 19th 2010
you shd have had… new Date(2010, 3, 19);
Hi I am after a 2 minute countdown timer in Action Script 3 can anybody help me.
Thank you
Chris
How can i update the hours
@Ron, stopping the timer by polling if the string is “0:00:00:00″ will only work if the application is running when that happens. reloading the swf will still generate a negative timer. the solution is to simply compare the two dates to determine if the currentData is later (or greater than) the endData:
if (currentDate.getTime() > endDate.getTime())
time_txt.text = “0:00:00:00″;
else
time_txt.text = time;
i have 2 timers running at once to display time until each game for the rugby world cup how can i get each timer to stop when it reaches zero. And display zero or a message while letting the other timers to continue running any help would be great thanks
this.onEnterFrame = function() {
var today:Date = new Date () ;
var currentYear = today.getFullYear ();
var currentTime = today.getTime () ;
var targetDate:Date = new Date(currentYear,8,7,12,17);
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;
var today:Date = new Date () ;
var currentYear = today.getFullYear ();
var currentTime = today.getTime () ;
var targetDate:Date = new Date(currentYear,8,17,18,00);
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_txt1.text = counter;
}
@Ron Pumfleet
THANKS!!! i wondered why the date is always wrong….