- 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
Keeping Time with the ActionScript Date Object
The Date object is a convenient package within which you store a unique set of date and time variables. There is enough information in each Date object to pinpoint any single moment in time. Internally a Date object distills down to a value in milliseconds before or after 1st January 1970. This is a common epoch among operating systems and programming languages.
NOTE
Unlike the SI unit of time, there is no international body to regulate the world's time zones. The offset from GMT/UTC is determined entirely at the whim of the governing body of the region. This has given rise to some strange situations. For example, if you pan around the zones on the map, you'll discover that some territories have elected to offset their clocks by halves of an hour.
Go back to your text editor and add this code below the INITIALISE title in the onClipEvent (load) section:
// Create new Date object now = new Date();
This line creates a new instance of a Date object called now. When you use the Date constructor you have the option of passing it variables for the year, month, day etc. If you don't pass any parameters the new Date will default to the current date and time. As with any object, once created, you can examine its properties.
You use the Date property .getTimezoneOffset() to return the difference in time between UTC and the viewer's own time zone. Next, you are going to make use of this value to center the world map on the viewer's location.
NOTE
It's worth noting that although time zones generally are offset in hours, the .getTimezoneOffset() property is returned in minutes. The name of this property is fairly misleading because its value also contains an offset for daylight saving time (DST).
On the next line, add this code:
// Create timezone offset value // Convert mins to hours and express as negative now_timezoneOffset = -(now.getTimezoneOffset() / 60);
These first two lines are comments, which act as reminders and guideposts to help you understand the code in its context after you've finished. The last line finds the viewer's time zone by checking the .getTimezoneOffset() property. This property is always returned in minutes, so you divide it by 60 to convert it to hours.
On the next line, add this code:
// Create timezone offset string TimezoneOffsetString = setTimezoneOffsetString(now_timezoneOffset); _root.zone = now_timezoneOffset;
The resulting variable now_timezoneOffset becomes your initial or default offset zone. This value can then be passed through the function you created earlier to display it onscreen.
On the next line, add this code:
// Set map x-coordinate to users timezone zoneWidth = Stage.width / 24; this._x = (-now_timezoneOffset * zoneWidth);
The last piece of code centers the map on the viewer's world position by adjusting the x coordinate of the map. The x coordinate is calculated from the viewer's time zone offset and the width of a single time zone. The formula to calculate the width of a zone makes use of a handy new object called Stage. This object returns the dimensions and scale of the movie stage. Although not used here, the Stage object also has a very useful Listener method, which can be used to react to the resizing of the browser.
)
Figure 8 The initialization code.
Defining Functions for a Real-Time Display
A common misconception with the Date object is that it is a pointer to the current time. This is incorrect. The properties of a Date object are static. They only hold the date and time values given to them at the moment of their creation. If you check those values later, they will be unchanged. Before you build yourself a real-time clock, you are first going to prepare a few functions.
Go back to your text editor and add this code next to the other functions in the onClipEvent(load) section:
// FUNCTION: to return a number as a double digit string function doubleDigits(val) { if (val > 9) {return val} else {return "0" + val} }This first function is really a little helper for the next two. As a rule of thumb, if you use a block of code more than once, you should turn it into a function. In this case, you're going to be parsing some dates and times into a readable format, and this function will really help with that.
It takes a number parameter and, by adding a preceding zero if the number is less than nine, returns a double-digit string. The important command here is return. Whenever a function encounters the return statement, it terminates and returns a value to wherever it was called from.
Add this code below the other functions in the onClipEvent(load) section:
// FUNCTION: to return the time formatted with zeros function timeString(inDate) { return doubleDigits(inDate.getUTCHours()) + " : " + doubleDigits(inDate.getUTCMinutes()) + " : " + doubleDigits(inDate.getUTCSeconds()); }This function makes use of the above function to format the hours, minutes, and seconds of a Date object. You access these individual elements using the .get methods of the Date object.
For example, to find the Hours value for a Date object called inDate, use the syntax inDate.getHours(), which returns the number of hours in the local time. To find what the value of Hours was, unadjusted for time zones and DST, use the syntax inDate.getUTCHours().
This function checks these time properties in turn and returns a string in the familiar colon-separated, double-digit format of digital clocks everywhere.
Add this last function below the other functions in the onClipEvent(load) section:
// FUNCTION: to return the date as a string function dateString(inDate) { return inDate.getUTCDayName() + " " + inDate.getUTCDate() + " " + inDate.getUTCMonthName() + " " + inDate.getUTCFullYear(); }This third function does for the date what the last function did for time. More experienced readers will notice, though, that this function is making calls to two Date properties that don't actually exist! Don't panic. This is okay because you're going to add them in a minute.