Recipe 7.8 Performing Repeated Actions on Movie Clips

7.8.1 Problem

You want to perform a particular action on a movie clip repeatedly.

7.8.2 Solution

Use an onEnterFrame( ) event handler method or use setInterval( ).

7.8.3 Discussion

Every movie clip's onEnterFrame( ) method is called repeatedly during a Flash movie's playback. If a movie clip's onEnterFrame( ) method is defined, any actions it contains are automatically invoked at the frequency of the movie's frame rate. For example, if a movie's frame rate is set to 12 frames per second, actions defined within a movie clip's onEnterFrame( ) method are invoked 12 times per second. Here is an example using onEnterFrame( ), which shows that it is called at approximately the frame rate. You will notice that it is not exact. The precision to which the movie plays back at the correct frame rate depends on the computer's processor and what else is being processed at the same time as the Flash movie.

// Define an onEnterFrame(  ) method for an existing movie clip named myMovieClip.
myMovieClip.onEnterFrame = function (  ) {

  // Store the number of milliseconds since the movie started to play.
  var currentTime = getTimer(  );
 
  // Calculate the difference between the current time and the time of the previous
  // call to onEnterFrame(  ), which gives you the elapsed time between calls. The
  // first time through, prevTime is undefined.
  var timeElapse = currentTime - this.prevTime;

  // Display the timeElapse times 12 (or the movie's frame rate if it is not 12).
  // This will tell you how many milliseconds it takes for 12 calls to the
  // onEnterFrame(  ) method. The output should generally be around 1000 milliseconds,
  // which means that the method is called 12 times per second.
  trace(timeElapse * 12);

  // Set prevTime to the current time. prevTime needs to be a property so that it is
  // accessible the next time onEnterFrame(  ) is called. Local variables disappear
  // between calls to the method.
  this.prevTime = currentTime;
};

There are many useful things you can do using an onEnterFrame( ) method. For example, you can continuously animate a movie clip's position by adjusting its _x and/or _y properties:

// At the current frame rate, increment myMovieClip's _x and _y properties. This
// animates the movie clip slowly in a diagonal to the lower-right corner and
// eventually off the Stage.
myMovieClip.onEnterFrame = function (  ) {
  this._x++;
  this._y++;
};

onEnterFrame( )'s only limitation is that it is always called at the frame rate of the movie. If you want to create intervals that differ from the movie's frame rate, use the setInterval( ) function. If the screen updates should be more frequent than the frame rate, make sure to include a call to updateAfterEvent( ) at the end of your interval function.

function myIntervalFunction (  ) {
  myMovieClip._x++;
  updateAfterEvent(  );
}

myMovieClipInterval = setInterval(myIntervalFunction, 10);

7.8.4 See Also

For more details on how to use setInterval( ), see Recipe 1.7. To test a movie's frame rate, see the time-tracker tool at http://www.moock.org/webdesign/flash/actionscript/fps-speedometer.