Home > ActionScript 3.0 > Building a simple clock application in as3

Building a simple clock application in as3

Yesterday I posted how the Date class worked in ActionScript 3.  Today I though I would build a simple clock application using the Date class.

Building the clock app involves using the Date class in a couple of ways. The Date class returns the current date and time of when the method is called and only once per object created. Basically the example I gave in my previous Date class post performed this once.

To have our clock continually roll through the time and date, a new Date object must be created and the methods of the Date class that return the date and time properties must be called at regular intervals to display the changing time. To create our clock application, we will use the Timer class.

The following code will create a TextField object to display the time and a Timer object that updates every 1/10th of a second in the updateTime() event handler for the Timer event of the Timer class.

When the updateTime() event handler is called on each TIMER event, a new Date object and a new variable for the time are created, concatenated, and set as the text property for myDisplay.

A new Date object needs to be created each time because the Date class stores only the time and date values for the time in which the object was created.

Alright.. Let's get into the code..

  1. var myDisplay:TextField = new TextField();
  2. var myTimer:Timer = new Timer(100);
  3.  
  4. myTimer.addEventListener(TimerEvent.TIMER, updateTime);
  5.  
  6. function updateTime(evt:TimerEvent):void{
  7.  
  8. var localDate:Date = new Date();
  9. var hour:int = localDate.getHours();
  10. var minute:String;
  11. var second:String;
  12.  
  13. /* Note that if the second and minute
  14. values are less than 10 we add a 0 to the
  15. single digit */
  16.  
  17. if(localDate.getMinutes()<10){
  18. minute = String(0)+localDate.getMinutes();
  19. }else{
  20. minute = String(localDate.getMinutes());
  21. }
  22.  
  23. if(localDate.getSeconds()<10){
  24. second = String(0)+localDate.getSeconds();
  25. }else{
  26. second = String(localDate.getSeconds());
  27. }
  28.  
  29. myDisplay.text = hour+':'+minute+':'+second;
  30.  
  31. }
  32.  
  33. myTimer.start();
  34. addChild(myDisplay);

Hope this helps ...  Peace...

  1. RockFall
    October 17th, 2009 at 15:01 | #1

    Good little tut but there are a few errors. On the if(localDate.getMinutes()<10){ and if(localDate.getSeconds()<10){ lines you should have used:

    if(localDate.getMinutes()<=9)
    if(localDate.getSeconds()<=9)

    im not sure if &lt is a shorthand command but as its not in my AS lib i would guess that most people dont have it. Just thought i would add that in case someone had errors thrown that they didnt understand.

  2. RockFall
    October 17th, 2009 at 15:04 | #2

    never mind, i see the problem, & lt ; changes to a < on the comments here but it didnt change on your code blurb :P

    my bad

  3. July 23rd, 2011 at 17:28 | #3

    Nice snippet – a slight improvement would be including import statements.
    Keep it up :)

  1. April 3rd, 2010 at 02:53 | #1
SEO Powered by Platinum SEO from Techblissonline