Creating a clock in Actionscript 3.0 with the Date class.

January 2nd, 2009

<p> Flash needed to view this</p>

After seeing a recent application, for some reason recently created and built in AS2!!?? I thought it would be great to create a similar application in AS3 to show how simple, effective and great this would be.
As you can see from the code, I have created an instance of the  Date class to ascertain the current date for the date display at the bottom of the swf , this is also called upon on completion of the timer event, which is called every second and updates the state of the clock face.
To get the days and months of the date display, as flash assigns numbers to these elements, 0-6 for the days and 0-11 for the months etc, this runs in well with the Array elements so an array is created and then referenced to in the call to this on creating the text.

PLAIN TEXT
Actionscript:
  1. private function init(e:Event)
  2.         {
  3.             var currentTime:Date = new Date();
  4.             var month:Array = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
  5.             var dayOfWeek:Array = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
  6.            
  7.             date_text.text = dayOfWeek[currentTime.getDay()] + " " + currentTime.getDate() + " " + month[currentTime.getMonth()] +  " " + currentTime.getFullYear();

Note that I have chosen the Timer calss to use for keeping the time updated rather that an Enter_Frame event, the reason for this is that the timer class runs at the specified time (every second in this case) rather than at the frame rate of the swf which can slow down depending on the users cpu, which could slow the time on the clock down, this would also run at a certain times per second (the frame rate of the swf) resulting in too many checks, when really, only one a second would suffice, so this method would result in a more accurate looking and better running clock.

The date class has to be called upon each second to update the time, as if this is created before the function as called the time stays the same. This seems to be the best method I could find as the Date class doesn't seem to have an update() method, if somebody else finds a better work around please do feel free to let me know.

PLAIN TEXT
Actionscript:
  1. private function timeListener(e:Event):void
  2.         {
  3.            
  4.             var currentTime:Date = new Date();     
  5.             var minutes = currentTime.getMinutes();
  6.             var seconds = currentTime.getSeconds();
  7.             var hours = currentTime.getHours() * 30 + currentTime.getMinutes() / 2;
  8.             seconds_hand.rotation = seconds * 6;
  9.             minutes_hand.rotation = minutes * 6;
  10.             hours_hand.rotation = hours;
  11.         }

Just to add a bit of fun to the clock I have made the colour changeable and the clock draggable through the centre of the face.
Have fun!
Get the source here.

Categories: Actionscript 3.0, Tutorials | Tags: , , | 24 Comments