Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
From the author of

The Script

All we need to do to create the functionality for our pre-loader component is write a little code. Here's how it works:

  1. Create a new layer in Edit mode for The_Loader movie clip and call it actions.

  2. On frame 1 of the actions layer, enter the following script. You can copy and paste it if you want, but it's better to write it yourself. You may want to create other types of pre-loaders in the future, and knowing how to do it means that you won't have to read this article ever again:

  3. var the_mcl:MovieClipLoader = new MovieClipLoader();
    var the_listener:Object = new Object();
    the_listener.onLoadError = function (mc) {
      message_txt.text = "Error";
    the_listener.onLoadProgress = function (mc, loadedBytes, totalBytes) {
      message_txt.text = Math.floor(loadedBytes/totalBytes * 100) + "%";
    the_listener.onLoadComplete = function(mc){
      message_txt.text = "";
    the_mcl.loadClip (loadThis, loadItHere);

Wanna know what all this means? Of course you do. Let me explain.

Using ActionScript 2.0 syntax, we create a variable called the_mcl, which is an instance of the MovieClipLoader class. Then, we create a listener object (the_listener) that will handle running methods for the_mcl. Why did we do this? Because having a listener object means that we can have other objects run the same code. This isn't actually necessary to make the pre-loader work, but it's good practice because it makes the code more modular, and that's what ActionScript is all about.

Next, we told the listener object to run some methods. To start, we use it to run the onLoadError() method of the MovieClipLoader class, which basically has one job: to report an error if an asset fails to load correctly. In this case, we're telling Flash to spout the word Error into the text field on the Stage if the load fails.

After that, we use the listener object to run the onLoadProgress() method, which determines the number of bytes currently loaded and the total number of bytes that need to be loaded. Then we used the Math class to turn that number (which is a floating-point integer) into a nice whole number, add a percentage sign to the end of it, and display it in the message_txt field on the Stage.

We're also running the onLoadComplete() method from the listener object. This method simply checks to see if the load is done; if it is, it clears the text field. Next, we simply assign the listener object to the_mcl.

Finally, we are using the loadClip() method to load an asset and tell it where to go. Notice, though, that we used two undefined variables, loadThis and loadItHere, as parameters. See, to turn a MovieClipLoader script into a pre-loader component, we need a way to tell it what asset to load into the movie and where to load it. Typically, we'd hard-code the path to the asset into the script and specify a target using the loadClip() method. But we don't know yet which files will include this little widget of ours, and we don't want to have to edit the script later on. That would defeat the whole purpose of having a component.

So instead of passing set parameters into the loadClip() method, we use variables. The value of each variable will be defined using the Property inspector when we're done. In other words, you'll be able to drop this pre-loader onto the stage of any file being published for Flash Player 7, enter a path and a target, and publish. Simple as that.

  • + Share This
  • 🔖 Save To Your Account