Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
From the author of

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.

  1. 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.

  • + Share This
  • 🔖 Save To Your Account