How to Make a Flash Countdown Tool with AS 3.0 & XML

Home
Blog
Tutorials
How to Make a Flash Countdown Tool with AS 3.0 & XML

8441 views

Many flash AS learners want to know how to create a counter that would count down time from a given date in days, hours, minutes, and seconds. Today we will show you the easiest way to do this with AS 3 and XML. Bellow we'll explain everything step by setp.

STEP 1. Create a URLLoader, load xml setting file.

function init():void
{
       var xmlLoader:URLLoader = new URLLoader();
      xmlLoader.load(new URLRequest('settings.xml'));
      xmlLoader.addEventListener(Event.COMPLETE, xmlLoadedHandler);
}

STEP 2. After xml file is loaded, set end time. Then create timer to refresh time string every 0.2 second.

var target:Date;
function xmlLoadedHandler(e:Event):void
{
      //get the target time from xml data.
      var xml:XML = new XML(e.target.data);
      var countDownDateStr:String = xml.child("countDownDate");

      var cdArr:Array = countDownDateStr.split(",");
      target = new Date(cdArr[0], cdArr[1], cdArr[2]);

      //start the timer to refresh the remaining time.
      var timer:Timer = new Timer(0.2);
      timer.addEventListener(TimerEvent.TIMER, onTimerHander);
      timer.start();
}

STEP 3. Refresh the time textfield when timer runs. The addZero function is used to add a "0" when the value's length is below 2.

function onTimerHander(e:TimerEvent):void
{
      //get left time
      var now:Number = new Date().getTime();
      var endTime:Number = target.getTime();
      var timeLeft = endTime - now;
      var sec = Math.floor(timeLeft / 1000);
      var min = Math.floor(sec / 60);
      var hours = Math.floor(min / 60);
      var days = Math.floor(hours / 24);

      // add a "0" when the value's length is below 2.
      sec = addZero(String(sec % 60));
      min = addZero(String(min % 60));
      hours = addZero(String(hours % 24));
      days = String(days);

      //display the remaining time in the text field.
      if (timeLeft > 0)
      {
            timeTxt.text = days + ":" + hours + ":" + min + ":" + sec;
      }
}