Using MovieClipLoader to Preload a SWF

An example of preloading and resizing a swf

The same method we looked at for loading external jpgs can also be used to load a swf, showing the loading progress and applying any changes in size or position once it's loaded. To create a preloader for the sheep dart game, for example (because it has background sound, which almost always requires preloading if put on the web), we start out with a blank movie called loader.fla.

Making the loader fla

Loader.fla will have two items on stage: a loading bar movieclip (a rectangle with upper left registration) named bar_mc and a blank movieclip named holder_mc, placed in the location we want to load the swf into. Your loader can also have any other necessary graphics, like a TV for instance, if you wanted to load the game onto the screen and resize it to fit there. We'll copy the moviecliploader code framework from this page and modify it so that bar_mc shows the progress of the loading swf and then is hidden when the movie has loaded (added parts shown in bold):

var loader:MovieClipLoader = new MovieClipLoader();
var loadHandler:Object = new Object();
loader.addListener(loadHandler);
bar_mc._xscale = 0;

// define what should happen when the jpg/swf is completely loaded
// use _mc to refer to the loaded jpg/swf
loadHandler.onLoadInit = function(_mc:MovieClip) {
   bar_mc._visible = false;
};

// define what should happen while the jpg/swf is loading
// use _mc to refer to the jpg/swf and loaded & total to refer to the number of bytes
// currently loaded and to be loaded, respectively
loadHandler.onLoadProgress = function(_mc:MovieClip, loaded:Number, total:Number) {
   bar_mc._xscale = loaded / total * 100;
};

// start loading specified jpg/swf into blank movieclip holder_mc on stage
loader.loadClip("game.swf", holder_mc);

Changes to the swf

If you want the swf to be controllable by a loader (eg, for its sound not to start until it's completely loaded), you'll need to make some changes to the fla to allow that. For instance, in our sheep game, we create two sound objects at the start of the game and immediately set them to 50%. We also start the sheep moving across the stage immediately with the onEnterFrame assignments. If we want to postpone both of those things so that they don't happen until the movie is loaded, we could set the sound volume to 0 initially, and put all of the rest of the initializing into an init function, like this:

function init() {
   snoresound.setVolume(50);
   vegassound.setVolume(50);
   // define the sheep's behavior
   sheep1.onEnterFrame = 
   sheep2.onEnterFrame = 
   sheep3.onEnterFrame = 
   sheep4.onEnterFrame = 
   sheep5.onEnterFrame = function() {
      // when sheep goes offstage:
      if (this._x > STAGEWIDTH) {
         // reposition on left, between 0 and 50 pixels to the left of the stage
         this._x = -this._width - Math.random()*50;
         // randomly change size +/- up to 5%
         this._xscale = this._yscale = -5 + this._xscale + Math.random()*10;
         // set back to normal view
         this.gotoAndStop(1);
			
      // while bubble is still onstage:
      } else {
         // easier to check here against dart rather than vice versa
         // MUST check if in frame 1 or command will be executed repeatedly
         if (this.hitTest(dart) && this._currentframe==1) {
            this.gotoAndPlay("explode");
            dart._visible = false;
         }
            this._x += SHEEPSPEED;
      }
   }
}

That way, all of the behavior is defined, but won't be carried out until init is actually called. We'll have loader call the init function (instead of doing it in the game fla), and only when the movie is actually loaded.

Finishing the loader

We've already added the code to loader.fla to control bar_mc while the swf is loading. Now we'll put in code to make the movie invisible until it's loaded, and set its scale to 50%, and start it going by calling its init function (changes in bold):

var loader:MovieClipLoader = new MovieClipLoader();
var loadHandler:Object = new Object();
loader.addListener(loadHandler);
bar_mc._xscale = 0;
holder_mc._visible = false;

// define what should happen when the jpg/swf is completely loaded
// use _mc to refer to the loaded jpg/swf
loadHandler.onLoadInit = function(_mc:MovieClip) {
   bar_mc._visible = false;
   _mc._visible = true;
   _mc._xscale = 50;
   _mc._yscale = 50;
   _mc.init();
};

// define what should happen while the jpg/swf is loading
// use _mc to refer to the jpg/swf and loaded & total to refer to the number of bytes
// currently loaded and to be loaded, respectively
loadHandler.onLoadProgress = function(_mc:MovieClip, loaded:Number, total:Number) {
   bar_mc._xscale = loaded / total * 100;
};

// start loading specified jpg/swf into blank movieclip holder_mc on stage
loader.loadClip("game.swf", holder_mc);

Notice that we set the scale of the movie instead of setting its _width and _height after loading it. That's because setting the _width of the movie takes into account all of the movie's content, onstage and off (in our case, including the sheep to the left of the stage), so setting the width to 100, eg, would shrink all of the content (stage + sheep) into 100 pixels, rather than just shrinking the stage to that size. Setting the _xscale and _yscale instead allows us to retain the original proportions of the movie.

You can see this preloader working if you clear the cache and look at the sheep game again.