Flash Countdown Timer

Published by Angel on Tagged Flash Tutorials, Tutorials

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 tickthis.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;
 
}

Related Posts

• Flash Stock of the Day: Flash Countdown Timers
• A Fire Particle Effect in Adobe Flash
• Flash Stock of the Day: Flash Live Text
• Morphing Text in Flash
• Create A Realistic Flash Animation Lip-Sync

May 30th, 2008