The following code creates an empty movie clip called perfMon (performance monitor) and attaches an onEnterFrame( ) event handler to it. This event handler calculates the average frame duration (in milliseconds) using the last two timer measurements, creating a rolling average. This rolling average, time, is compared against the expected duration, FRAME_DUR, and a Boolean flag, slow, is set to true or false based on whether the Flash Player is achieving the target frame rate.

function performanceMonitor( ) {
 this.createEmptyMovieClip("perfMon", 10000);
 perfMon.onEnterFrame = function( ) {
 time = (getTimer( ) - lastTime) / 2;
 lastTime = getTimer( );
 // Set <em class="replaceable"><code>slow</code></em> to a Boolean based on whether the 
 // elapsed time exceeds the allowed frame duration
 slow = time > FRAME_DUR;
 };
}
// Set FRAME_RATE to match the movie's target frame rate
var FRAME_RATE:Number = 18;
var FRAME_DUR:Number = (1 / FRAME_RATE) * 1000;
var time:Number = 0;
var lastTime:Number = getTimer( );
performanceMonitor( );

A slow value of false indicates that we can make the Flash Player do more without compromising performance because it is completing all its tasks before the start of the next frame. Ideally, we would want the Flash Player to finish all tasks for the current frame just as the next frame starts. We know this is happening when our rolling average, time, is equal to the expected frame duration, FRAME_DUR.

Let's see how to make Flash increase or decrease the animation's complexity based on the performance monitor's calculation. One simple approach is to draw more or fewer movie clips depending on the value of our slow flag. For the sake of example, let's use a star field particle effect [Hack #33] . The following code assumes a default Stage size of 550 400 pixels, with a dark background color. The effect works best with a frame rate of 18-24 fps. To set the background color and frame rate, select Modify?Document and adjust the properties as desired. The following code assumes a frame rate of 24 fps, and if you choose any other rate, you will need to change the following line to reflect this:

var FRAME_RATE:Number = 24;

Note that you have to do this manually because there is no property or method in Flash that returns the movie's target frame rate (strange but true!).

We've modified the starfield( ) function from [Hack #33] to draw a single star at a time. Instead of setting the slow flag when the animation is running slowly, we use an if statement to adjust the animation's complexity. If the animation is running quickly enough, it draws additional stars by calling starfield( ); otherwise, it deletes stars to maintain performance.

Again, it is important to realize that we are not varying the frame rate (and doing so would not be transparent to the rest of the SWF, in any case), but rather the complexity of the animation so that the time taken to render each frame in the animation is equal to all the available time per frame.

function performanceMonitor( ) {
 var perfMon:MovieClip = this.createEmptyMovieClip("perfMon", 10000);
 perfMon.onEnterFrame = function( ) {
 time = (getTimer( ) - lastTime) / 2;
 if (time < (FRAME_DUR)) {
 // Speed is okay
 stars++;
 starField( );
 } else if (time > (FRAME_DUR + 10)) {
 // Running too slowly
 _root["star" + stars].removeMovieClip( );
 stars--;
 }
 lastTime = getTimer( );
 };
}
function mover( ) {
 this._y += this.speed;
 this._yscale += this.speed;
 if (this._y > 275) {
 this._y = 0;
 this.speed = Math.ceil(Math.random( ) * 10);
 this._yscale = 100;
 }
}
function starField( ) {
 var star:MovieClip = this.createEmptyMovieClip("star" + stars, stars);
 star._rotation = Math.random( )*360;
 star._x = 275;
 star._y = 200;
 var dot:MovieClip = star.createEmptyMovieClip("dot", 0);
 dot.speed = Math.ceil(Math.random( ) * 10);
 dot.lineStyle(1, 0xFFFFE0, 100);
 dot.moveTo(0, 2);
 dot.lineTo(0, 5);
 dot.onEnterFrame = mover;
}
// Set FRAME_RATE to match the movie's target frame rate
var FRAME_RATE:Number = 24;
var FRAME_DUR:Number = (1 / FRAME_RATE) * 1000;
var time:Number = 0;
var lastTime:Number = 0;
var stars:Number = 0;
performanceMonitor( );

If you run the preceding code, you will see the star field build from no stars up to a maximum of several hundred stars, as shown in Figure 9-7. Use the Variables tab in the Debugger panel to view the variables on the main timeline, which displays results similar to those shown in Figure 9-7