Home > ActionScript 3.0 Basics > Countdown timer with ActionScript 3.0

Countdown timer with ActionScript 3.0





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:

Character embedding

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:

Liked this tutorial? Share and Enjoy:

  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Reddit
  • blogmarks
  • StumbleUpon
  • Technorati
  • TwitThis
  • Yahoo! Buzz
  • NewsVine
  • Slashdot
  1. bphillips
    August 27th, 2013 at 19:26 | #1

    There is a brief delay before the time remaining shows. Is there a way to get it to start as soon as my movie loads? thanks!

  2. December 12th, 2013 at 15:47 | #2

    how to install this in blogger based website??????????

  3. January 21st, 2014 at 18:00 | #3

    If you waոt to increase үour knoѡ-how just keep visiting tɦis
    web рage and be updated ѡith the newest news update posted ɦere.

Comment pages
1 2 37
  1. December 29th, 2010 at 07:45 | #1
  2. May 12th, 2013 at 11:30 | #2
  3. September 18th, 2013 at 05:35 | #3
  4. October 4th, 2013 at 19:15 | #4
  5. April 12th, 2014 at 20:34 | #5