Flash Countdown Timer

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!

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://flashspeaksactionscript.com/wp-content/uploads/2010/01/FlashCountdownTimer.swf” width=”520″ height=”340″ targetclass=”flashmovie”]Get Adobe Flash player

[/kml_flashembed]

Download

31 thoughts on “Create A Flash Countdown Timer in AS3 Using A Class

    • 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

  1. 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.

  2. 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.

  3. I couldn’t modify this.

    var countdown:CountdownTimer=new CountdownTimer(currentYear,currentMonth,currentDay,currentHour,currentMinute+5);

    it outputs TIME’S UP

    • 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!

  4. 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);

  5. 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.

    • @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!

  6. 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?

  7. 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?

  8. 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";
    }

    • @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: 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!

    • 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

Comments are closed.