Subscribe By RSS | Email

Flex | Flash | Air | AS3
Tutorials, Resources,
Tips & Tricks

New Year Countdown with AS3

December 29th, 2009 in Flash

For the last tutorial of 2009, let’s create with actionscript 3 a countdown for the coming of 2010 new year.

1. Create a new flash file (Actionscript 3.0) and save it as countdown.fla.

2. On the first frame, create 4 dynamic text boxes to display numbers of days, hours, minutes and seconds remaining. Give them instance name of “day_txt”, “hour_txt”, “min_txt”, “sec_txt”.

3. Create a blank keyframe and put in here what you want do display when the countdown is finished. Here we simply put a “Happy New Year ~ 2010″ text.

3. With the first frame selected open the actions panel to add some code.
First put a stop() and create a date object to store the 2010 new year date. Note that with AS3 month begins with 0, this is why we put month minus 1.
Next create a timer and set its parameter to 1000 (1000ms = 1s). Add a timer event listener and call the start() method.

stop();

var year:Number = 2010;
var month:Number = 1;
var day : Number = 1;

var finalDate:Date = new Date(year,month-1,day); 

var timer:Timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, updateTime);
timer.start();

4. Inside the updateTime function that handles the Timer event, create a new date object, to store the current date that will be updated every second.
To calculate the remaining time, we simply make the difference between the final date and the current date.

function updateTime(e:TimerEvent):void{

	var now:Date = new Date();
	var remainTime:Number = finalDate.getTime() - now.getTime();

}

5. Still inside the updateTime function , we check whether the remaining time is superior to 0. If so, we make a series of calculations to retrieve the days, hours, minutes and seconds remaining. Also we check if the numbers are 2 digits so that we can add a 0 before to those who are just 1 digit. Finally we set the text properties of the 4 text boxes that we’ve put on the stage to their respective values.

if (remainTime >0) {

		var secs:Number = Math.floor(remainTime/1000);
		var mins:Number = Math.floor(secs/60);
		var hours:Number = Math.floor(mins/60);
		var days:Number = Math.floor(hours/24);

		var secsText:String = (secs%60).toString();
		var minsText:String = (mins%60).toString();
		var hoursText:String = (hours%24).toString();
		var daysText:String = days.toString();

		if (secsText.length < 2) {secsText = "0" + secsText;}
		if (minsText.length < 2) {minsText = "0" + minsText;}
		if (hoursText.length < 2) {hoursText = "0" + hoursText;}
		if (daysText.length < 2) {daysText = "0" + daysText;}

		day_txt.text = daysText;
		hour_txt.text = hoursText;
		min_txt.text = minsText;
		sec_txt.text = secsText;
}

6. Else if the remaining time is <= 0 we remove the listener, stop the timer and display the second frame to wish you a Happy New Year.

Here’s the final code, test your movie to see it in action.

stop();

var year:Number = 2010;
var month:Number = 1;
var day : Number = 1;

var finalDate:Date = new Date(year,month-1,day); 

var timer:Timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, updateTime);
timer.start();

function updateTime(e:TimerEvent):void{

	var now:Date = new Date();
	var remainTime:Number = finalDate.getTime() - now.getTime();

	if (remainTime >0) {

		var secs:Number = Math.floor(remainTime/1000);
		var mins:Number = Math.floor(secs/60);
		var hours:Number = Math.floor(mins/60);
		var days:Number = Math.floor(hours/24);

		var secsText:String = (secs%60).toString();
		var minsText:String = (mins%60).toString();
		var hoursText:String = (hours%24).toString();
		var daysText:String = days.toString();

		if (secsText.length < 2) {secsText = "0" + secsText;}
		if (minsText.length < 2) {minsText = "0" + minsText;}
		if (hoursText.length < 2) {hoursText = "0" + hoursText;}
		if (daysText.length < 2) {daysText = "0" + daysText;}

		day_txt.text = daysText;
		hour_txt.text = hoursText;
		min_txt.text = minsText;
		sec_txt.text = secsText;
	}

	else {
		timer.removeEventListener(TimerEvent.TIMER, updateTime);
		timer.stop();
		gotoAndStop(2);
	}
}

Terms of Use

The source codes downloaded from RiaCodes can be used for you own projects, commercial or non-commercial, without any attribution.

All files downloaded from RiaCodes may not be used for resale or redistribution.

You may not reproduce or publish in full or large part, the tutorials on this site, without written permission from RiaCodes.

ABOUT

RiaCodes is a site dedicated to web developers and designers providing tutorials and resources on Flash, Flex and Air technologies.

Our site is here to help you to build compelling, engaging and rich applications both for the web and for the desktop.

Now it's time to get your users a better and richer experience!