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

Home > Articles

  • Print
  • + Share This
From the author of

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.

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

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

  3. 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 10Figure 10 The real-time clock code in place.

  • + Share This
  • 🔖 Save To Your Account