- 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
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.
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.
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.
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.
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 5 The rollover code for each zone.