Recipe 10.8 Creating Timers and Clocks

10.8.1 Problem

You want to create a timer or perform actions at set intervals.

10.8.2 Solution

Use the setInterval( ) function.

10.8.3 Discussion

This recipe explains how to perform actions at set intervals and create a clock showing the absolute time. Refer to Recipe 10.6 for details on creating timers that show the elapsed time.

The setInterval( ) function, added in Flash MX, lets you set up a timer that calls a function or a method at a specific time interval. The function returns a reference to the interval so that you can abort the action in the future. You can choose from several variations depending on how you want to use setInterval( ). If you want to call a function at a specific interval without passing it any parameters, you can call setInterval( ) with a reference to the function and the number of milliseconds between function invocations.

// This example uses the custom format(  ) method, so it requires the Date.as file.
#include "Date.as"

// This function is called by setInterval(  ), and it displays the current time.
function displayTime(  ) {
  var d = new Date(  );
  trace(d.format("hh:mm a"));
}

// This example invokes displayTime every 60,000 milliseconds (once per minute).
dtInterval = setInterval(displayTime, 60000);

The setInterval( ) function invokes the function or method at approximately the specified interval. The interval between calls is dependent on the processor of the client computer and is not exact or consistent.

You can also use setInterval( ) to pass parameters to the called function. When you pass additional parameters to the setInterval( ) function, those values are passed along to the function that is called at the interval. You should note, however, that the parameters sent to the function cannot be dynamically updated with each call. The setInterval( ) function calls the function multiple times, but setInterval( ) itself is called only once. Therefore, the values of the parameters that are passed to the function are evaluated only once as well:

// Create a function that displays the value passed to it.
function displayValue (val) {
  trace(val);
}

// Create an interval such that displayValue(  ) is called every five seconds and is 
// passed a parameter. Notice that even though the parameter is Math.random(  ) (a
// method that generates a random value between 0 and 1), the same value is always
// passed to displayValue(  ) because Math.random(  ) is evaluated only once.
dvInterval = setInterval(displayValue, 5000, Math.random(  ));

You can also use setInterval( ) to call methods of an object, in which case you must pass it at least three parameters. The first parameter is a reference to the object, the second parameter is the string name of the method, and the third parameter is the number of milliseconds for the interval.

// Include the DrawingMethods.as file from Chapter 4 for its drawTriangle(  ) method.
#include "DrawingMethods.as"

// Create a movie clip object and draw a triangle in it.
_root.createEmptyMovieClip("triangle", 1);
triangle.lineStyle(1, 0x000000, 100);
triangle.drawTriangle(300, 500, 60);

// Add a method to the triangle that moves the 
// movie clip 10 pixels in the x and y directions.
triangle.move = function (  ) {
  this._x += 10;
  this._y += 10;
};

// Call the move(  ) method of the triangle movie clip every two seconds.
trInterval = setInterval(triangle, "move", 2000);

You can pass parameters to an object's method via setInterval( ) by listing the parameters after the milliseconds parameter in the setInterval( ) call:

// Include the DrawingMethods.as file from Chapter 4 for its drawTriangle(  ) method.
#include "DrawingMethods.as"

_root.createEmptyMovieClip("triangle", 1);
triangle.lineStyle(1, 0x000000, 100);
triangle.drawTriangle(300, 500, 60);

// Modify the move(  ) method to accept parameters. 
triangle.move = function (x, y) {
  this._x += x;
  this._y += y;
};

// Call the move(  ) method every two seconds and pass it the values 10 and 10.
trInterval = setInterval(triangle, "move", 2000, 10, 10);

The following example uses setInterval( ) to create a clock movie clip in which the display is updated once per second:

// Include the DrawingMethods.as file from Chapter 4 for its drawCircle(  ) method.
#include "DrawingMethods.as"

// Create the clock_mc movie clip on _root and place it so it is visible on stage.
// This movie clip contains the hands and face movie clips.
_root.createEmptyMovieClip("clock_mc", 1);
clock_mc._x = 200;
clock_mc._y = 200;

// Add a face_mc movie clip to clock_mc and draw a circle in it.
clock_mc.createEmptyMovieClip("face_mc", 1);
clock_mc.face_mc.lineStyle(1, 0x000000, 100);
clock_mc.face_mc.drawCircle(100);

// Add the hour, minute, and second hands to clock_mc. Draw a line in each of them.
clock_mc.createEmptyMovieClip("hourHand_mc", 2);
clock_mc.hourHand_mc.lineStyle(3, 0x000000, 100);
clock_mc.hourHand_mc.lineTo(50, 0);
clock_mc.createEmptyMovieClip("minHand_mc", 3);
clock_mc.minHand_mc.lineStyle(3, 0x000000, 100);
clock_mc.minHand_mc.lineTo(90, 0);
clock_mc.createEmptyMovieClip("secHand_mc", 4);
clock_mc.secHand_mc.lineStyle(1, 0x000000, 100);
clock_mc.secHand_mc.lineTo(90, 0);

// Create a method for the clock_mc movie clip that updates the clock display based
// on the client computer's current time.
clock_mc.updateDisplay = function (  ) {

  // Extract the hour, minute, and second from the current time.
  var d = new Date(  );
  var hour = d.getHours(  );
  var min = d.getMinutes(  );
  var sec = d.getSeconds(  );

  // Set the rotation of the hands according to the hour, min, and sec values, The
  // _rotation property is in degrees, so calculate each value by finding the
  // percentage of the hour, min, or sec relative to a full rotation around the clock
  // (and multiply by 360 to get the degrees). Also, subtract 90 degrees from each
  // value to correctly offset the rotation from 12 o'clock rather than from the 3
  // o'clock position.
  this.hourHand_mc._rotation = (((hour + min/60)/12) * 360) - 90;
  this.minHand_mc._rotation = (((min + sec/60)/60) * 360) - 90;
  this.secHand_mc._rotation = ((sec/60) * 360) - 90;
};

// Call the updateDisplay(  ) method of the clock_mc movie clip once per second.
clockInterval = setInterval(clock_mc, "updateDisplay", 1000);

10.8.4 See Also

It is left as an exercise for you to add a digital display to the preceding clock example using the techniques shown in Recipe 10.6 and Recipe 10.3. Also refer to Recipe 1.7.