The example shown below illustrates the Date class, which simply pulls time and date information from the user's computer. However, unlike the Timer class, there are no events fired by the Date class, so although one can set and/or get the time & date, there is nothing inherent in the Date class that will accomplish the constantly updated information shown in the example.
To accomplish this, we employ a bit of trickery. We use a Timer object to update the system date and time every 10 milliseconds. (Of course, most of the time this results in no change on the screen from the user's point of view.)
Why don't we use the Timer object with a one second delay? Well even though the Timer object's delay is supposed to be very precise (It's measured in millimeters after all!), it is affected by other system processes, complexities in the Flash program, and rendering time of multiple graphics. If the real delay is even a tiny bit longer than one second, we would run the risk of having our clock skip a second. In the current implementation, the clock will be accurate to within a small fraction of a second, which is sufficient since we are only displaying the time to the nearest full second. If we were timing an Olympic sprint, we would require a better solution!
Example
Setting up the Stage
Other than instructions, titles and credits, the stage contains four dynamic textboxes: txtSecs, txtMins, txtHrs, and txtDate. (The colons for the date are in carefully placed static textboxes.)
The Code
We begin by creating a timer that will fire an event every 10 milliseconds. Since there is no second argument (for repeatCount), the timer event will repeat indefinitely.
var tm:Timer = new Timer(10);
The update function will be called each time the timer object fires. In this handler function, we use the hours, minutes, and seconds properties and the toDateString() method of a Date object. See the help files for "Date class" for more available options.
tm.addEventListener(TimerEvent.TIMER, update);
function update(tevt:TimerEvent):void {
var now:Date = new Date();
var hr:Number = now.hours;
var min:Number = now.minutes;
var sec:Number = now.seconds;
/*
If hr is bigger than 12, then subtract 12. Put the result into the txtHrs textbox. Remove the following three lines if you want to display 24-hour (military) time.
*/
if (hr > 12) {
hr -= 12;
}
txtHrs.text = String(hr);
/*
If min is a single digit number, then put a 0 into the txtMins textbox; otherwise, simply clear the txtMins textbox. After this, appending the value of min to the textbox contents will correctly display 07 when min=7 and 17 when min=17.
*/
if (min < 10) {
txtMins.text = "0";
}
else {
txtMins.text = "";
}
txtMins.appendText(String(min));
/*
If sec is a single digit number, then put a 0 into the txtSecs textbox; otherwise, simply clear the txtSecs textbox. After this, appending the value of sec to the textbox contents will correctly display 04 when sec=4 and 34 when sec=34.
*/
if (sec < 10) {
txtSecs.text = "0";
}
else {
txtSecs.text = "";
}
txtSecs.appendText(String(sec));
/*
The toDateString() method is a preformatted string. See the help files for the Data object if you would like to access the component parts of the date.
*/
txtDate.text = now.toDateString();
}
The last line of the script simply starts the timer.
tm.start();
Downloads
The source file for this example can be downloaded here: clock.fla. The source file for all examples in this tutorial can be downloaded together in timers.zip.
