How To Build Countdown Timer in ActionScript 2

– taterboy | April 14th, 2010

Filed under: General Info

The Settings:
The first thing in our code is deciding if our timer is going to blink every second or not. Blinking gives the impressing of time passing and is easier to notice then just one or two numbers incrementing. Just set “blinking” to true or false

^?View Code ACTIONSCRIPT

/** timer settings  ****************************************************************/
var blinking:Boolean = true;	// allow timers to blink every second
var osecs:Number = 0; 			//used to enable flashing

The Dates:
The countdown timer takes a future date and figures out how many days, hours, mins, and seconds from now until that date arrives. The next thing we need to do is enter in our future date for the timer to count to. To make things easy, the date is broken into year, month, day, hour, min, sec, and millisecond.

^?View Code ACTIONSCRIPT

/** date settings  ****************************************************************/
// set the target date
var timeToYear:Number = 2012; 	// full year 2010
var timeToMonth:Number = 12; 	// month 1 - 12
var timeToDate:Number = 21; 	// date 1 - 31 depending on month
var timeToHour:Number = 0; 		// hour 0 - 23
var timeToMin:Number = 0; 		// min 0 - 59
var timeToSec:Number = 0; 		// sec 0 - 59
var timeToMilSec:Number = 0; 	// milliseconds 0 - 999

Dealing with Time-Zones:
Most timers need to sync across time-zones, this can be a pain, complicated by day-light savings. We only need to set a time-zone offset if our timer’s target date based on a particular location and we wanted people from other locals to countdown at the exact same time. Say we have an event occurring in New York City, we want everyone in the world to know the exact time the event is going to occur. We will need to set “timeZone” to -5 for eastern standard time unless the date falls in the summer time, then we should use -4 for eastern daylight time.

^?View Code ACTIONSCRIPT

var timeZone:Number =  0;	// time-zone offset - set this if the target time is time-zone based.

The Target Date vs. Todays Date:
After all the settings are made, it is time to setup our current date and compare it to a future date. Since we do not want our countdown timer to count if our target date has past, then we need to check for that. If the target date is not in the future we will reset all the values to 0 and stop the timer.

^?View Code ACTIONSCRIPT

// gets todays date as Universal Time 
var today:Date = new Date(Date.UTC());
 
// sets the target date as Universal Time
var targDate:Date = new Date(Date.UTC(timeToYear,timeToMonth - 1,timeToDate,timeToHour,timeToMin,timeToSec,timeToMilSec));
 
// check to make sure target date is in the future
if(targDate < today){
	targDate = today;
}

The Magic:
Here is where all the magic happens. We create a new date on every frame, add the time-zone offset then compare it to the target date. The difference of the two dates is what we use to fill in the countdown clock. In this timer we are counting down by days, but we could modify it to count down years and months as well. When we compare dates, the value that is returned is in milliseconds, so we have to convert that very large number into our desired time increment.

var days:Number = ((((target date – current date) / 1000)/60)/60)/24;
This line of code takes the target date and subtracts the current date which returns the difference in milliseconds. To convert the difference into our base time we need to divide.

Here are some samples for converting different time increments from milliseconds to create out base time increment.

milliseconds
target date – current date

seconds
(target date – current date) / 1000

minutes
((target date – current date) / 1000)/60

hours
(((target date – current date) / 1000)/60)/60

days
((((target date – current date) / 1000)/60)/60)/24;

months (A)
getting this value is more complex, here is a rough, quick value.
((((((target date – current date) / 1000)/60)/60)/24)/365)*12

months (B)
for more exact values, we will need to get the difference in months using Date.getMonth().
1. get the years
var yearsTill:Number = ((((((target date – current date) / 1000)/60)/60)/24)/365);

2. get the difference in months
var monthsTill:Number = target date – current date .getMonth() – today.getMonth();

3. check if the amount of months is a negative number
if(monthsTill < 0){
    mulitply years by 12, then add the amount of months till the end of the year.
    trace((Math.floor(yearsTill) * 12) + (11 + monthsTill));
}
else{
    multiply years by 12, plus the difference in months.
    trace((Math.floor(yearsTill) * 12) + (monthsTill));
}

years
(((((target date – current date) / 1000)/60)/60)/24)/365

After we get a value for our base increment, we round it down (Math.floor()) and take the remainder to create all of the smaller increments. In the line below, we take the total days and subtract the days rounded down. This returns a percent of a day so we need to multiply it by 24 to get the total amount of hours. We will repeat this process, until we have reduced the remaining value into all of the smaller time increments.

hours = (total days – Math.floor(total days))*24;
minutes = (total hours – Math.floor(total hours))*60;
seconds = Math.floor((total minutes – Math.floor(total minutes))*60);

^?View Code ACTIONSCRIPT

/** timer animation magic  ********************************************************/
// start on Enterframe event and handler only if target date is in the future
if(targDate > today){
	this.onEnterFrame = function(){
 
			// if target date is not in the future, stop counter.
			var dateArr:Date = new Date(Date.UTC());
			if(dateArr >= targDate){
				days.dyt.text = "000";
				hrs.hrt.text = "00";
				mins.mnt.text = "00";
				secs.sct.text = "00";
 
				delete this.onEnterFrame;
				return;
			}
 
			// set the hours and adjust if there is time-zone offset
			dateArr.setHours(dateArr.getHours() + timeZone);
 
			// DAYS - get the time difference in days
			var daysData:Number = ((((targDate - dateArr) / 1000)/60)/60)/24;
			// round down days
			var daysTill:Number = Math.floor(daysData);
 
			// HOURS - get the difference in hours
			var hoursData:Number = (daysData - Math.floor(daysData))*24;
			//round down hours
			var hoursTill:Number = Math.floor(hoursData);
 
			// MINUTES - get the difference in minutes
			var minsData:Number = (hoursData - Math.floor(hoursData))*60;
			// round down minutes
			var minsTill:Number = Math.floor(minsData);
 
			// SECONDS - get difference in seconds
			var secsTill:Number = Math.floor((minsData - Math.floor(minsData))*60);
 
			// do timer blinking every second (if enabled)
			var blinkThis:Boolean = false;
			if(secsTill != osecs){
				if(blinking){
					blinkThis = true;
				}
			}
			osecs = secsTill;
 
 
			// format days till number
			if(daysTill > 99){
				days.dyt.text = daysTill;
			}
			else if(daysTill > 9){
				days.dyt.text = "0" + daysTill;
			}
			else{
				days.dyt.text = "00" + daysTill;
			}
 
			// add timer info to the correct text fields
			if(!blinkThis){
				hoursTill < 10 ? hrs.hrt.text = "0" + hoursTill: hrs.hrt.text = hoursTill;
				minsTill < 10 ? mins.mnt.text = "0" + minsTill: mins.mnt.text = minsTill;
				secsTill < 10 ? secs.sct.text = "0" + secsTill: secs.sct.text = secsTill;
			}
			else{
				// handle blinking (if enabled)
				days.dyt.text = "";
				hrs.hrt.text = "";
				mins.mnt.text = "";
				secs.sct.text = "";
				blinkThis = false;
			}
	}
}

You can download a source FLA here.

In an earlier post, I created a timer that you can add to your site or blog and configure using flashVars in the HTML object/embed code. Flash AS2 Count Down Timer

Technorati Tags: ActionScript 2, AS2, countdown, Date, Flash, timer, Tutorial

5 Comments »

[...] H&#959w T&#959 Build Countdown Timer &#1110&#1495 ActionScript 2 | Taterboy.com: Graphics, Multimedi… [...]

Pingback by What is the best web hosting service for a small company that needs…? | Host Rage — April 16, 2010 @ 9:54 pm
I just use your code above but then I just want to display the miliseconds, seconds, minutes and hours.
Will it still output if I remove days and year. And I want my application to stop the at a certain time.

Comment by Jun — August 3, 2010 @ 7:28 am
You can just comment out the lines that refer to the day and year TextFields.
ex: hrs.hrt.text = hoursTill;

The timer will count down to a specified date or time, then show zeros if the time has past.

Here is where I check if the time has past,
if(dateArr >= targDate){ …..

You can put anything you want inside the brackets.

Comment by taterboy — August 3, 2010 @ 9:17 am
Hi,
How do I make it say “Happy New Year” when it reaches zero? Any help would be AMAZING.

Comment by Anthony — December 13, 2010 @ 9:03 am
Here is the section of code you want to modify:

if(dateArr >= targDate){
days.dyt.text = “000″;
hrs.hrt.text = “00″;
mins.mnt.text = “00″;
secs.sct.text = “00″;

delete this.onEnterFrame;

//timer has reached 0, happy new year!!!!
days.visible = false;
hrs.visible = false;
mins.visible = false;
secs.visible = false;
happyNewText.visible = true;

return;
}

before the “return;” add the code to display Happy New Year.

Personally I would make a graphic or textField that said “happy new year”, make it visible = false (invisible), then when the counter reaches 0s (in the code above) hide all the counter text fields and make the happy new year visible.

Comment by taterboy — December 13, 2010 @ 9:13 am