Recipe 15.10 Monitoring Load Progress Without a Progress Bar Component

15.10.1 Problem

You want to monitor the load progress of an asset without having to use the Progress Bar component.

15.10.2 Solution

Create a movie clip and define an onEnterFrame( ) method that monitors the load progress of the asset, or use an interval function. Alternatively, you can create a custom LoadMonitor class.

15.10.3 Discussion

The Progress Bar component is a handy, pre-built resource for graphically representing the progress of an operation, such as asset loading. However, the Progress Bar component is overkill if you merely want to monitor the download progress in the background in order to trigger other actions when appropriate.

You can use a movie clip with an onEnterFrame( ) method to monitor the load progress of an asset. Within the onEnterFrame( ) method, you should continually check the percentage of the asset that has loaded.

// Create a movie clip and begin loading a .swf file into it.
_root.createEmptyMovieClip("swfHolder", 1);
swfHolder.loadMovie("externalSWF.swf");

// Create a movie clip to monitor the load progress.
_root.createEmptyMovieClip("loadMonitorMc", 2);

// Define an onEnterFrame(  ) method for the monitor movie clip.
loadMonitorMc.onEnterFrame = function (  ) {

  // Execute trace(  ) once the .swf file has finished loading.
  if (_root.swfHolder.isLoaded) {
    trace("SWF has loaded");
  }
};

Or, you can achieve similar results using an interval function instead of a movie clip:

// Create a movie clip and begin loading a .swf file into it.
_root.createEmptyMovieClip("swfHolder", 1);
swfHolder.loadMovie("externalSWF.swf");

// Define a function to call at an interval.
function monitor (  ) {
  // Execute trace(  ) once the .swf file has finished loading.
  if (swfHolder.isLoaded) {
    trace("SWF has loaded");
  }
};

// Invoke monitor(  ) every 100 milliseconds to update the load status.
monitorInterval = setInterval("monitor", 100);

You can also write a custom LoadMonitor class that you can reuse in multiple movies. You can add the following code to a LoadMonitor.as file in your Flash Include directory for easy inclusion in other projects:

// The LoadMonitor constructor accepts a reference to the object it should monitor.
// This object can be a Sound object or a movie clip.
_global.LoadMonitor = function (obj) {

  // Create a property with the value of the monitored object.
  this.monitored = obj;

  // Set the interval.
  this.interval = setInterval(this, "monitor", 100);
};

// The setChangeHandler(  ) method allows you to define a callback function that is
// invoked automatically each time there is load progress. The method accepts a
// reference to the callback function.
LoadMonitor.prototype.setChangeHandler = function (callback) {
  this.callback = callback;
};

LoadMonitor.prototype.monitor = function (  ) {

  // If the percent loaded is greater than the last time monitor(  ) was called, invoke
  // the callback function, passing it a reference to the monitored object. The
  // parameter makes it convenient to reference the monitored object within the
  // callback function.
  var pLoaded = this.monitored.percentLoaded;
  if (pLoaded != this.percent) {
    this.callback(this.monitored);
  }
  this.percent = pLoaded;

  // If the monitored object is fully loaded, delete the interval so as to avoid
  // unnecessarily calling this method again.
  if (this.loadingObj.isLoaded) {
    clearInterval(this.interval);
  }
};

You can use the custom LoadMonitor class as follows:

#include "LoadMonitor.as"

// Include the Sound.as file from Chapter 13 for its createNewSound(  ) method.
#include "Sound.as"

// Define the callback function.
function playSound (obj) {
  if (obj.isLoaded) {
    obj.start(  );
  }
}

// Create the Sound object.
mySound_sound = Sound.createNewSound(  );

// Load an MP3 from the same directory as the Flash movie. Set streaming to false.
mySound_sound.loadSound("myMP3.mp3", false);

// Create the LoadMonitor object to monitor the progress of mySound_sound and set the
// callback function.
lm = new LoadMonitor(mySound_sound);
lm.setChangeHandler(playSound);

Consider using the LoadMonitor class in situations in which you want to monitor the load progress of assets, but you don't want to visually represent this to the user. The resulting .swf will have a slightly smaller file size, and you can include the LoadMonitor class without having to add a component to your library or attach a movie clip to your movie.

15.10.4 See Also

Recipe 15.9 and Recipe 15.11