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

Home > Articles

  • Print
  • + Share This
From the author of

The Time Zone Button Layer

To get you started, I've already added some basic interactivity to the time zone map. To understand how this works, you're going to dig down a few layers and see what's going on.

NOTE

Each zone is allocated a letter and is referred to by that letter's military call sign. For example, the letter for the prime meridian is Z; thus, UTC is sometimes referred to as "Zulu" time. There are only 24 time zones, yet all 26 letters of the alphabet have been allocated. Although they lie within the same zone, each side of the international dateline receives a letter (M and Y). The remaining letter, J, is used to refer to the current local time of the observer.

  1. Click anywhere on the map to select it. Right-click (Ctrl-click on Mac) and select Edit in Place.

    Inside the map movie, you will notice that there are actually three maps of the world side by side. These are all instances of the same movie. Having them side by side enables you to scroll the map right and left.

  2. Click anywhere on Map2 (the one in the middle) to select it. Right-click and select Edit in Place.

    Here you will find the map graphics and a blue-colored layer called timeZones. This layer contains a movie that's also called timeZones. This is the movie you are going to investigate next.

  3. Right-click (Ctrl-click on Mac) the timezones movie and select Edit in Place.

    This movie contains a jigsaw of interlocking buttons, one for each possible time zone. If a button has a hit area but no graphics, it shows up in the editing environment as a transparent blue shape.

  4. Select any button you like and examine the code in the ActionScript window. The code should look similar to this:

    on (rollOver) {
      _root.zone = -5;
    }

    Each zone has a button, and each button has code similar to this. The prefix _root refers to the top level of the movie hierarchy. Rolling over the button will set the value of a variable called zone in the main timeline. The value being set is the difference in hours between the time in the zone and the UTC. This is what is commonly called the time zone offset.

Figure 5Figure 5 The rollover code for each zone.

  • + Share This
  • 🔖 Save To Your Account