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 values needed are the target year, month, and day. There are also optional hour and second values just in case you needed extreme flexibility in the target end date.
// This creates a new CountdownTimer instance and sets it target end date var myCountdown:CountdownTimer = new CountdownTimer(year, month, day, hour(optional), second(optional));
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!
