The Date object introduced in Macromedia Flash 5 makes it simple to have a clock in a Flash movie. The following steps explain how to make a simple clock that displays the time in a Hours:Minutes:Seconds am/pm format. For steps on making a clock with separate hour, minute, and second hands see Using the Date object: Building a clock in Flash 5.

To make a Flash clock:

  1. Create a new movie clip symbol (Insert > New Symbol).
  2. Using the text tool, drag out a text field in this new symbol. This is the text field that will display the current time.
  3. Select the text field with the Arrow tool, and open the Text Options panel (Window > Panels > Text Options.
  4. In the Text Options panel, choose Dynamic Text from the pop-up menu, and give the text field a variable name oftime.

  5. Double-click in the first frame of the symbol to open the Actions panel, and enter the following script:
    function getTime () {  var time = new Date();  var hour = time.getHours();  var minute = time.getMinutes();  var second = time.getSeconds();  var temp = ""+((hour>12) ? hour-12 : hour);  temp += ((minute<10) ? ":0" : ":")+minute;  temp += ((second<10) ? ":0" : ":")+second;  temp += (hour>=12) ? " P.M." : " A.M.";  return temp; }
  6. Place an instance of this new symbol on the main Timeline of the movie.
  7. Select the new movie clip instance, and open the Actions panel (Window > Actions) if it's not already open.
  8. Enter the following script into the Actions panel:
    onClipEvent (enterFrame) {  time = getTime(); }
  9. Test the movie (Control > Test Movie).

How it works

The getTime() function first creates a new Date object, which is used to get the current hour, minutes, and seconds. Next, several ?: conditional operators (a compact form of anif..else statement) are used to determine the proper formatting for the time string (HH:MM:SS P.M/A.M), and assign the string to the variable temp. For example, the following line of code checks if the value of hours is greater than 12. If so, 12 is subtracted from hour and assigned to temp. Otherwise, the value ofhour is assigned to temp, as is.

var temp = ""+((hour>12) ? hour-12 : hour);

For minute and seconds, similar logic is used to check if their values are less than 10. If so, a ":0" is appended to temp before the minutes or seconds. Otherwise, the value of minute or second is appended to temp, as is. Finally, "P.M" is appended to temp if the current hour is greater than or equal to 12, otherwise "A.M." is appended.

Note: If you don't care to display seconds or an A.M./P.M. modifier in the time string, simply insert comments (//) at the beginning of the function statements that append that information to temp.

Finally, in step 8, the statement within the onClipEvent(enterFrame) handler assigns the return value of getTime() to time, the variable name assigned to the text field created in step 1. TheenterFrame event is triggered as each frame of the movie is played, so the time updates at each frame. This dependency on frame rate can effect the clock's accuracy over long periods, but should be fine for most applications, as long as the frame rate is 12 FPS or greater.

Additional information

For In versions of Flash Player 5 prior to5,0,41,0, the getHours() function on Windows may return the incorrect hour. See Incorrect hour returned by getHours() and getUTCHours() (TechNote 14964) for more information.

For another example of using movie clip events see Detecting a double-click in the Flash Player (TechNote 14461).

Keywords: time; date; UTC; GMT; clipevent; enterframe; tn_15184

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy