Inside the onClipEvent, create a new Date object and assign a name to it:
onClipEvent (enterFrame) {
myclock=new Date() ;
}
Digital Clock
Digital Clock
This time we’re going to do something similar, but we’re going to retrieve the user’s current system time and use it to fill in a digital clock.
To start off with, create a frame/design container for your clock.
Draw a new text field on a new layer above your clock. Fill it with whatever text you’d like; we’ll be overwriting it, so it doesn’t matter.
In the Properties panel, set the text box’s type to Dynamic Text so that we can write its contents—you guessed it—dynamically, and then assign an instance name to it so that we can reference it in ActionScripts.
Create a new movie clip; the size and shape don’t matter, but it should be hidden underneath your clock. The purpose of this movie clip isn’t to be seen; it’s just something to attach our ActionScripts to so that it acts as a controller for the text box.
Make sure the text be selected, and select Actions to open the Actions Panel.
We’re going to start off by inserting an onClipEvent, with the event as enterFrame. We want the clock to keep ticking along instead of retrieving the time on loading and then stopping. As long as you’ve got at least one frame per second (or the default twelve) and no stops on your frames, then the movie will replay and every time the timeline enters the frame, it’ll check the system time and update.
I’ve created a new variable named clocktime, and told Cool Motion that clocktime is equal to the fetched value of the system time’s hours, minutes, and seconds, separated by a colon:
onClipEvent (enterFrame) {
myclock=new Date() ;
clocktime = ((myclock.getHours())+ ":" + (myclock.getMinutes()) + ":" + (myclock.getSeconds())) ;
}
This is very similar to what we did with the date in the Basic Date Functions lesson. getHours( ) retrieves the hours in 24-hour time (values from 0 to 24) ; getMinutes( ) retrieves the current minutes; getSeconds( ) retrieves the current seconds. All of this is based on the system time on the current user’s computer. For instance, as I was testing this, the clock that I viewed said 21:32 (9:32 p.m.) ; at the same time I IMed the URL to the exact same SWF file to a friend in Lancaster, UK, and his read 3:35 (as he’s six hours ahead of me, and apparently his computer’s a few minutes off).
Using + ties everything together into a single string, and placing the colons inside quotations (“:”) tells Cool Motion to display them as actual text rather than reading them as operators/code.
Now we just need to tell Cool Motion that the text displayed in Dynamic Text box timeclock on the root level should be the concatenated string clocktime:
onClipEvent (enterFrame) {
myclock=new Date() ;
clocktime = ((myclock.getHours())+ ":" + (myclock.getMinutes()) + ":" + (myclock.getSeconds())) ;
_root.timeclock.text=clocktime;
}
Right now, we have a working twenty-four-hour clock.
This code both adjusts from twenty-four hour time to twelve hour time, and corrects a problem where hours, minutes, and seconds less than 10 only display a single digit:
onClipEvent (enterFrame) {
myclock=new Date() ;
var findhours = ((myclock.getHours())) ;
var findminutes=((myclock.getMinutes())) ;
var findseconds=((myclock.getSeconds())) ;
if (findhours<12) { _
root.ampm.text="AM";
}
else {
_root.ampm.text="PM";
}
while (findhours>12) {
findhours=findhours-12;
}
if (findhours<10) {
findhours="0" + findhours;
}
if (findminutes<10) {
findminutes="0" + findminutes;
}
if (findseconds<10) {
findseconds="0" + findseconds;
}
_root.timeclock.text=findhours + ":" + findminutes + ":" + findseconds;
}
Confused? The next step will be an explanation of what this code does.
This is actually quite similar to the twenty-four hour clock code, even if it looks ten times longer. Instead of just retrieving hours, minutes, and seconds before concatenating them into a string and sending it to the dynamic text box, instead the script retrieves the three values, assigns each to its own variable, and then checks for certain conditions.
First it checks to see if the value of the hour returned is less than 12 (so basically from midnight until 11 AM) and, if so, it writes to a second dynamic text box telling it to display “AM”. If that condition isn’t met, then the else statement writes “PM” to the second text box.
Then the while statement says that while the value of the hour is greater than twelve, then twelve should be subtracted from the number assigned to the hour’s variable. So if getHours ( ) returns 13, then findhours will be set to 1 (1 p.m.).
Then it checks to see if the values of the hour, minutes, and seconds is less than 10, and if so, appends a text 0 in front of the value.
Lastly, it strings them all together and writes them to the dynamic text box.