- 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 a Row of Clocks
You have one final flourish left. You're going to set all the analogue clocks along the bottom of each time zone. Because you'll be setting these clocks more than once, you're going to follow my earlier advice and build this process into a function.
The clock-hand drawing routines will use much the same technique as you used for the larger clocks. The main difference this time is that you're going to wrap your code within a couple of loops. The first of these loops will ensure that all three instances of the map movie (left, right, and center) are updated. The second loop will run through all 24 time zones, creating a new Date object for each. The properties of the object will then be used to drive the hands of the clock.
Add this code below the other function definitions in the onClipEvent(load) section:
// FUNCTION: to set clock times function setClocks() { // Cycle through maps for (var i = 1; i < 4; i++) { // Cycle through clocks for (var j = 1; j <= 24; j++) { // Get zone offset converted to minutes zoneOffset = (j - 13) * 60; // Apply zone offset zone = new Date(); zone.setMinutes(now.getUTCMinutes() + zoneOffset); // Draw clock hands this["map" + i]["clock" + j].Hands.Hour_hand._rotation = (zone.getUTCHours() * 30) + (zone.getUTCMinutes() / 10); this["map" + i]["clock" + j].Hands.Minute_hand._rotation = (zone.getUTCMinutes() * 6) + (zone.getUTCSeconds() / 10); } } }There's a lot going on in this routine, but each individual line is pretty straightforward. The two loops make sure that every clock on every map gets attended to. The important variable in all this is zoneOffset:
zoneOffset = (j - 13) * 60;
This is derived by removing 13 from loop j (the time zone loop) to generate a number between -12 and +12. This is effectively the UTC time zone offset in hours. When you multiply it by 60, you are converting it from hours to minutes.
zone.setMinutes(now.getUTCMinutes() + zoneOffset);
When you add this minute value to the current value of .UTCminutes, the new properties of the zone Date object will reflect the local time in that zone.