Create A Flash Countdown Timer in AS3 Using A Class
Due to the popularity of one of my earlier posts, I’ve decided to extend the topic with a helpful Countdown Timer class. This handy utility provides a flexible and easy way to tie in countdown timer functionality into just about any design. It is designed to handle the grunt work of developing a Countdown Timer. It is not meant to replace the Countdown Timers available to the Flash community. It is purely meant to easily implement Countdown Timer functionality to you own custom design without reinventing the wheel.
Features Include:
- Easily define a new Countdown Timer instance
- Access to the countdown’s remaining days, hours, minutes and seconds
- Easily update the target end date
- Custom events that trigger upon Countdown updating and on complete
Getting started creating a fresh Countdown Timer
Implementing your new countdown timer design will require minimal ActionScript as the this utility will handle key events and updating of the remaining time. All you need to implement this countdown functionality is a design and some time. Enjoy!
Step 1: Importing the necessary classes
In order to use this utility within your Flash file, you would need to import the following two classes: CountdownTimer.as and CountdownEvent.as. Note: Make sure that the classes are local to your .fla file or if you are more comfortable modifying your ActionScript settings to accommodate the location of the classes, feel free doing so.
// Importing of the CountdownTimer Class import com.flashspeaks.utils.CountdownTimer; // Importing the CountdownEvent (used to update and notify upon countdown completion) import com.flashspeaks.utils.CountdownEvent;
Step 2: Creating a new Countdown Timer Instance
Creating a new instance of the Countdown Timer is as easy as defining a new Countdown Timer instance and providing the target end date within the parameter. The only value needed is a target Date() object.
// This creates a new CountdownTimer instance and sets it target end date var targetDate:Date = new Date(2011, 11, 25); var myCountdown:CountdownTimer = new CountdownTimer(targetDate);
Step 3: Retrieve the remaining days, hours, minutes, and seconds
In order to provide flexibility, I have provided public properties to obtain the days, hours, minutes, and seconds remaining separately allowing you to determine how you would like to display the remaining time. There is also a property called time that will return the remaining time as a whole number separated by colons. (00:00:00:00)
In order to retrieve the time, a new COUNTDOWN_UPDATE event listener needs to be established as it will be mapped to a function that will update upon every tick. It can be easily done like so.
myCountdown.addEventListener(CountdownEvent.COUNTDOWN_UPDATE, onCountdownUpdate, false, 0, true);
function onCountdownUpdate(e:CountdownEvent):void {
// Update on screen visuals like text
}
Countdown has expired…what to do?
One of the requested key features was a way to easily determine when the countdown had expired. Some wanted to load a new timer, change on screen text to read 00:00:00:00 ,etc. Setting this up using CountdownTimer is fairly easy. To do so, you would essentially create a new COUNTDOWN_COMPLETE event listener and supplying what it is that you would like to occur within the event handler function. Check it out below!
countdown.addEventListener(CountdownEvent.COUNTDOWN_COMPLETE, onCountdownComplete, false, 0, true);
function onCountdownComplete(e:CountdownEvent):void {
// Countdown finished...
// HAPPY NEW YEAR
}
Change the target end date on the fly
Another huge request was to provide a solution to easily update the target end date via run-time. CountdownTimer provides a function called updateEndDate(new Date()) which allows you to simply provide a new target end date through its parameter. Your on screen visuals will automatically update to accommodate the new end date.
For example, let’s say you wanted to add a month to the target end date every time that it has expired you can to so by simply adding one month to current month within the onCountdownComplete event handler.
Complimentary Flash Countdown Timer design
What’s good Countdown Timer functionality without a good Countdown Timer design? Here’s a complimentary design that I will be providing with the download. It includes the example source and provides all of the source from this tutorial. Feel free to implement your own design! I’d love to see them!
676
71
30 Comments
Ryan
09.15.2010
Awesome! I have been looking for something like this for a while now. Great follow up to your Flash Countdown Timer post from a while back.
ced
12.08.2010
hi, thank u very much for this very usefull tool. I managed to change the date but not the time… i would like it to stop on the 15th december 10:00 am… how can i do that ?? thank you
Angel Romero
12.12.2010
You can easily set that up by instantiating the Countdown Timer instance like so. Hope this helps!
var countdown:CountdownTimer=new CountdownTimer(2010,12,15, 10);Ben/EverythingFLA
09.19.2010
Fantastic job Its dynamic and you left out the best part that its really easy to skin and change all the visuals are on the timeline so its easy to change around. Great job this will be a life saver for many.
Terry
09.21.2010
Nice.
One small fix. This line:
dispatchEvent(new CountdownEvent(CountdownEvent.COUNTDOWN_UPDATE));
should be moved after this line:
_time = _days + ":" + _hours + ":" + _minutes + ":" + _seconds;Otherwise, you'll get a null value for 'time' after the first update.
Angel Romero
09.26.2010
Oh wow! Thanks! I don’t know how I missed that. I will update as soon as possible.
Brunorubio
12.10.2010
This would be perfect, but I can't seem to open it . HelP!
Angel Romero
12.12.2010
Hey, what is it that you can't open – the .fla or the .zip?
jason
12.12.2010
how do you make this work?
Angel Romero
12.12.2010
Check out the download and the post above. What in particular did you need help with?
Onur
01.11.2011
I couldn’t modify this.
var countdown:CountdownTimer=new CountdownTimer(currentYear,currentMonth,currentDay,currentHour,currentMinute+5);
it outputs TIME’S UP
Angel Romero
01.30.2011
Hey Onur, there might be a minor bug here. I am going to take a look tonight. Sorry for the late reply.
Angel Romero
02.14.2011
Alright, figured it out. The month property of the AS3 date object offsets the month by one which the Countdown Timer Util also does. I will be providing an update soon that addresses this.
To bypass this right now add 1 month to the returned date object. Hope this helps!
john
01.29.2011
I do not know its always getting Time Up.
var myString:String = “2011-01-30T01:01:01″ ;
var year:int = Number(myString.substr(0,4));
var month:int = Number(myString.substr(4,2));
var day:int = Number(myString.substr(8,2));
var hour:int = Number(myString.substr(11,2));
var min:int = Number(myString.substr(14,2));
var sec:int = Number(myString.substr(17,2));
var countdown:CountdownTimer=new CountdownTimer(year, month, day, hour, sec);
john
01.30.2011
I use a date which is about 2 days away, but it shows Time Up. Are you sure there is no bug?
Angel Romero
01.30.2011
Hey John, just saw the comment. I will take a look at it tonight. I will get back to you on what I find.
Frededrick
02.05.2011
hello,
I have a custom class that creates a countdoen event (I modified one I found online). I am creating a datagrid from a custom class (I'm creating this in the .fla) and calling a new instance of te countdown to be added to the but I only get [Object TextField] added to the grid. when I do a trace, I can see teh timer counting down. Can anyone help me with this? I want to see teh timer in teh grid instead of [Object TextField].
var timerTxt:TextField = new TextField();var myTimerObject:TimerCountDown = new TimerCountDown(timerTxt, 2, "You're minute is up!");
dg.addItem({Seat:"Test1", Section:"1", Price:"$5", Time:timerTxt, Remove:"t"});
Any help will be appreciated.
thanks.
Angel
07.07.2011
@Frededrick: Are you trying to display the value of the TextField that you have defined? If so, you would have to define your Time property using the timerTxt.text.
dg.addItem({Seat:"Test1", Section:"1", Price:"$5", Time:timerTxt.text, Remove:"t"});Hope this helps!
Tom
04.20.2011
i have tried to open all of your examples “fla” files with ADOBE FLASH CS3 PROFESSIONAL VERSION 8.0
and i just keep getting the message “unexpected file format” each time, why doesn’t it open?
TOM
04.20.2011
i have tried to open all of your examples “fla” files with ADOBE FLASH CS3 PROFESSIONAL VERSION 8.0 but i keep getting the message “unexpected file format” for each “fla” file of yours that i’m trying to open….. do you have any ideas what can it be?
Angel Romero
04.21.2011
Hey Tom, I believed the files will only open in Flash CS4 or higher. Let me take a look to see if I can get it supported for CS3.
John
04.26.2011
I had the same problem until I used Flash CS4.
Zheq
05.05.2011
Hey!
I would like to ask if theres a better way to set the timer to 00:00:00:00 after its exipres,or the way i did is proper?
i used the following code:
function onCountdownComplete(e:CountdownEvent):void {timerObj.days.numberText.text="00";
timerObj.hours.numberText.text="00";
timerObj.minutes.numberText.text="00";
timerObj.seconds.numberText.text="00";
}
Angel Romero
07.07.2011
@Zheq: Yeah…using the example that I had provided, there really is no other way on doing so. But let\’s say that you have one TextField storing the entire remaining time. You can set the text of that TextField using the .time property of CountdownTimer.
remainingTimeText.text = countdownTimer.time;ekspa
06.09.2011
how replace the year , day, hour?
Angel Romero
07.07.2011
@ekspa: You can easily update the target end date by creating and passing a new Date() object into the parameter of your CountdownTimer instance. See ActionScript snippet above.
Hope this helps!
André
07.07.2011
Nice, but where is the CountdownTimer class?
Angel
07.07.2011
@Andre: You can download the source files via http://dl.dropbox.com/u/272056/Downloads/FlashSpeaksActionScript/FlashCountdownTimerAS3.zip
zwensi
10.13.2011
always have 30 days plus…f.e. if there are 2 dys left, it shows 32 days.. Where do i fix this?
Angel Romero
10.13.2011
Let me take a look at this tonight. In the mean time, how are you instantiating the Countdown Timer? Can you past the line? Thanks
Flash Countdown Timer | Flash Speaks Actionscript
11.27.2010
[...] Update: Based on your feedback on this tutorial, I decided to create a hassle free CountdownTimer AS3 class that will assist in creating your very own flash countdown timer. Learn how to create a Flash Countdown in AS3 using this class. [...]
There are no trackbacks to display at this time.