Simple Flex Count Down Timer

There was a request in the Adobe Cookbooks for an example of how to create a countdown timer in Flex. I thought I would post the example here too.

Creating a countdown timer involves using the Timer class along with the Date class. The Timer will be used to trigger a method periodically so that the Date class can be polled for the current time. Before we get into the logic, first we need to define some input and display components for this example. We’ll need an input for the user to select how many seconds to countdown, a label to describe what is required for the input, a ‘Start’ button, and a label to show the count down. Those 4 components are shown below:

<mx:TextInput id="secondsInput" restrict="0-9"/>
<mx:Label text="Enter time in seconds for count down"/>
<mx:Button id="startButton" label="Start Count Down" click="onStartTimer()"/>
<mx:Label id="countDownTimerDisplay"/>

Notice, that we use a restrict=”0-9″ attribute so that the user ca only enter number is the input since we are looking for a number of seconds to be entered.  Also, notice, that we have a listener on the startButton click event to trigger a onStartTimer() method.

In our onStartTimer() method we’ll need to do a several things:

1. Disable the start button and input so the user cannot edit anything while we are counting down.
2. Store the start time by storing a new Date Object.
3. Store an end time which will be the current time plus the amount of seconds the user entered.
4. Display the starting count down value in our countDownTimerDisplay.
5. Start a timer which will go off in half a second (500 milliseconds) so that the countDownTimerDisplay can be updated.

The code implementing the above points is shown here:

private var timer:Timer;
private var startTime:Number;
private var endTime:Number;
 
private function onStartTimer():void{
  startButton.enabled = secondsInput.enabled = false;
  startButton.label = "Counting Down!";
  startTime = new Date().time;
  endTime = new Date().time + Number(secondsInput.text) * 1000;
  countDownTimerDisplay.text = secondsInput.text;
  if(timer==null)
    timer = new Timer(500);
  timer.addEventListener(TimerEvent.TIMER, onTimerInterval);
  timer.start();
}

We see in the above code example that we add a listener on the timer which has a callback timer called onTimerInterval().  This method will need to do a few things:

1. Check if the current time is past the endTime we stored above.
2. If the countdown is complete, change the countDownTimerDisplay to “Count Down Completed” and renable all the inputs for the user.
3. If the countdown isn’t complete, update the countDownTimerDisplay to show the current amount of time left and restart the half second timer.

The code implementing the above points is shown below:

private function onTimerInterval(event:Event):void{
  var now:Number = new Date().time;
  if(endTime <= now){
    countDownTimerDisplay.text = "Count Down Completed";
    startButton.enabled = secondsInput.enabled = true;
    startButton.label = "Start Count Down";
  }else{
    countDownTimerDisplay.text = Math.round((endTime - now)/1000).toString();
    timer.start();
  }
}

That's it! You should now have a fully functional example of a count down timer.

A running demo of this code and the full source (right click -> view source) can be viewed below: