- It Works Like This
- Preparing to Work
- Using #include to Load ActionScript from a Text File
- Running Conditional Code with OnClipEvent
- The Time Zone Button Layer
- Using Functions to Repeat Common Tasks
- Keeping Time with the ActionScript Date Object
- Using Prototype to Extend the Date Object
- Updating in Real Time
- Updating the Mouse Time Zone
- Setting an Analogue Clock
- Setting a Row of Clocks
- Using setInterval to Update the Clocks
- Summary
- About This Article
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Setting an Analogue Clock
Although the properties of the Date object are returned as numbers, they don't have to be displayed as such. Next you're going to use these values to drive the hands of an analogue clock. The second hand of the clock movie is not visible by default. You want to show the second hand on the two large clocks, so the first line of code makes this hand visible.
Back in your text editor, add this code to the onClipEvent(enterFrame) section:
// Draw UTC clock _root.UTCClock.Hands.Second_Hand._visible = true;
The clock hand movies have been drawn so that their registration point (the little cross that represents the origin) is located at the position where you would want to rotate it. With these pivot points already set, all you have to do to set the hands of the clock is change the rotation property of each movie.
Add this code immediately after the last block:
_root.UTCClock.Hands.Second_Hand._rotation = (now.getUTCSeconds() * 6); _root.UTCClock.Hands.Hour_hand._rotation = (now.getUTCHours() * 30) + (now.getUTCMinutes() / 10); _root.UTCClock.Hands.Minute_hand._rotation = (now.getUTCMinutes() * 6) + (now.getUTCSeconds() / 10);These three lines convert the value of the Date properties to a corresponding _rotation value in degrees. For example, in the case of seconds, you take a value from 0 to 59 and multiply it by 6 to give you a _rotation value in degrees between 0 and 354.
Strictly speaking, the second sections of each formula are not actually required. They are merely micro adjustments to smooth the transitions of the larger hands. You can use an almost identical block of code to drive the time zone clock.
Add this code immediately after the last block:
// Draw zone clock _root.ZoneClock.Hands.Second_Hand._visible = true; _root.ZoneClock.Hands.Second_Hand._rotation = (MouseZone.getUTCSeconds() * 6); _root.ZoneClock.Hands.Hour_hand._rotation = (MouseZone.getUTCHours() * 30) + (MouseZone.getUTCMinutes() / 10); _root.ZoneClock.Hands.Minute_hand._rotation = (MouseZone.getUTCMinutes() * 6) + (MouseZone.getUTCSeconds() / 10);
)
Figure 10 The real-time clock code in place.