Monday, 6 June 2011

Date countdown using XML in AS3

In this tutorial you will learn how to create a simple date countdown in Actionscript 3. The date will continue to countdown until the specified day is reached. The countdown date is set in the XML file.

Date countdown using XML in AS3

Step 1

Open up a text editor and type out the following XML. You can change the year, month, and day accordingly to suit your needs. Then save the file with the name: date.xml

<?xml version="1.0" encoding="utf-8" ?>

Step 2

Open up an AS3 FLA file and save it with the name: ‘DateCountdown’ in the same directory as the XML file. Set the stage dimensions to 430 x 130 pixels and the FPS to 30.

Step 3

In the timeline change the name of layer 1 to ‘text fields’. Then select the Text tool with dynamic text and create four text fields on the stage. Give the text fields the instance names: day_txt, hour_txt, min_txt, and second_txt. Select all the text fields and convert into a movie clip (F8) with the instance name: tfCountDown.

Step 4

Insert a new layer on the timeline called ‘text labels’. Select the Text tool with static text and type the following: Day, Hours, Minutes and Seconds. Place the static text fields underneath the appropriate dynamic text field. Select the static text fields and convert into a movie clip (F8) with the instance name: tfLabels.

Insert another new layer on the timeline with name: finish message. Select the Text tool with static text and type the end message: ‘The target date is reached’. Convert in a movie clip (F8) with the instance name: endMessage.

Step 5

Open up a new AS3 class file and save it with the name: DateCountDownXML and set it as the document class of the FLA file. In the Class file add the following imports statements and variables. I have used the TweenNano tweening engine.

 import flash.display.Sprite;
 import flash.utils.Timer;
 import com.greensock.TweenNano;
 public class DateCountDownXML extends Sprite 
  private static var XMLFILE:String = 'date.xml';
  private var xml:XML;
  private var targetDate:Date;
  private var timer:Timer;
  public function DateCountDownXML() 

In the constructor add the following code. This clears the dynamic text fields, hides the text labels and loads the XML file using the URLLoader() class.
//clears text fields
tfCountDown.day_txt.text  = '';
tfCountDown.hour_txt.text = '';
tfCountDown.min_txt.text  = '';
tfCountDown.sec_txt.text  = '';
//hide text labels
tfLabels.visible = false;
endMessage.alpha = 0;
//load xml
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
xmlLoader.load(new URLRequest(XMLFILE));

Now add the remaining code outside of the constructor. The xmlLoaded function calls the ready() function when the XML has loaded. The ready() function assigns the target date loaded from the XML file, starts the timer and shows the text field labels.
private function xmlLoaded(e:Event):void
 xml = new XML(;
private function ready():void
 //set target date
 targetDate = new Date()
 targetDate.fullYear = xml.year;
 targetDate.month    = xml.month - 1;     =;
 targetDate.hours    = xml.hours;
 targetDate.minutes  = xml.minutes;
 targetDate.seconds  = xml.seconds;
 //start timer
 timer = new Timer(1000);
 timer.addEventListener(TimerEvent.TIMER, timerHandler);
 //show text labels
 tfLabels.visible = true;

The timerHandler function stops the timer and removes the timer listener when the target date is reached and displays the countdown numbers in the dynamic text fields. The date difference of the target date and the current date is calculated using the getTime() method. This method returns the date in milliseconds. We can use the date difference to figure out the target date. The format function adds an extra ‘0’ when the dynamic text field has a single digit number.
private function timerHandler(e:TimerEvent):void
 var dateDifference:Number = targetDate.getTime() - new Date().getTime();

 if(dateDifference < 0)
  timer.removeEventListener(TimerEvent.TIMER, timerHandler);
  var seconds:Number = uint(dateDifference / 1000);
  var minutes:Number = uint(seconds / 60);
  var hours:Number   = uint(minutes / 60);
  var days:Number    = uint(hours / 24);
  tfCountDown.day_txt.text  = format(days);
  tfCountDown.hour_txt.text = format(hours%24);
  tfCountDown.min_txt.text  = format(minutes%60);
  tfCountDown.sec_txt.text  = format(seconds%60)
private function showEndMessage():void
 tfCountDown.day_txt.text  = '00';
 tfCountDown.hour_txt.text = '00';
 tfCountDown.min_txt.text  = '00';
 tfCountDown.sec_txt.text  = '00';, 0.5, {alpha:1});
private function format(number:Number):String
 if( number < 10 ) return ("0"+number);
 else return number.toString();

Step 6

Export the movie Ctrl + Enter.


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP