Flash Countdown Timer
Published by Angel on Tagged Flash Tutorials, TutorialsIn 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 at 9:19 am
Hi, thank for this tutorial, it’s very usefull.
Do you now how I could make this countdown auto-repeat?
Example: if my event occures every 2 days and I don’t want to change the time in the source file when it ends… Could the reset be automatic?
Thanks for the answear!
June 11th, 2008 at 3:36 pm
This is great! Does anyone know how to make the countdown stop and display “00:00:00″ on the final end time? And to make sure it continues to display double digits as it counts closer to the end time (e.g. 00:00:09:48) ?
Thanks!
June 20th, 2008 at 3:19 pm
Has anybody has issues with this. I downloaded the Actionscript 2.0 and put into my site. I changed the target date to 8/30/2008. The calculation is not correct! It displays a 101 days. There are only 71 days until this date from today 6/20/2008.
Any Help would be appreciated.
June 20th, 2008 at 5:46 pm
@Scott, the date needs to be set starting from 0 not 1. For example, if you want August as your target month, you would need to indicate month #7 not #8. That is why you are exactly 1 month ahead.