10 Minutes with Flash: Creating a Loader Component for Flash Player 7

Date: Jun 25, 2004

Don't like writing the same script more than once? In just 10 minutes, Robert Hoekman, Jr. will show you how to turn a pre-loader script into a reusable component.

Awhile back, I wrote an installment of the "10 Minutes with Flash" series called "ActionScript You'll Never Have to Write Again" about writing a shell of a script and saving it for later use. I used a MovieClipLoader object for the example because it is something developers need frequently while developing for Flash Player 7. Today, we'll take the concept further by turning a modified version of the same script into a component that preloads external assets by incrementing a percentage value in a text field. That's right—it's a pre-loader. And once you build it, you'll never have to build it again.

The Movie Clip

First, we need a new file and a movie clip. (Components are really just movie clips that are compiled into self-contained .swc files.)

Launch Flash MX 2004 or Flash Pro and save a new document as The_Loader.fla.
Create a new Movie Clip symbol called The_Loader. (I just love it when things are totally obvious.)

To increment a percentage value in a text field, we need to add a text field to the movie clip.

Activate the Text tool and choose Dynamic from the Text type menu in the Property inspector.
Click on the Stage to create a dynamic text field. Drag the text field's handle to make it about two inches long.
With the field still selected, enter message_txt into the instance name field of the Property inspector.
Set the font for the text field to, let's say, 12 pt. Arial.
Save your work, but leave the file open.

I've got about eight minutes left.

Now that we have the text field ready, we can start writing the script for the pre-loader. So far, your file should match Figure 1.

Figure 1 The dawn of a new age...er...component.

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:

Create a new layer in Edit mode for The_Loader movie clip and call it actions.
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:

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.addListener(the_listener);
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.

The Component

There's not much further to go now. We just need to do some component definition and export a .swc file. To do this:

Open the library for The_Loader.fla.
In the library, right-click The_Loader and choose Component Definition from the menu.
In the Component Definition dialog box (shown in Figure 2), click the small + symbol to add a parameter.

Figure 2 Component definition at its finest.

In the Name field, enter Load this. In the Variable field, enter loadThis, which is the variable we used earlier in the loadClip() method. You can leave the Value field blank if you want, but I added my.jpg to it just to have an example asset name there by default. For Type, choose String.
Repeat Steps 3 and 4 to add a second parameter, using Load it here for the Name, loadItHere for the Variable, _parent.clip_mc for the Value, and String as the Type.
In the Options section of the dialog box, check Parameters are locked in instances and Display in Components panel.
Click OK to close the dialog box.

The two parameters we defined here allow us to assign values to the loadThis and loadItHere variables using the Property inspector. You'll see how this works in a moment.

To finish up the component:

Right-click The_Loader in the library once more and choose Export SWC file.
In the Export File dialog box, name the file The_Loader.swc and navigate to the Components folder of your Flash install directory. Add a folder there called Custom (or anything you like).
Click OK to save the .swc file into your Components/Custom folder.

The component is done. Let's test it out.

The Test

To make sure that this technological masterpiece is working, let's pop it into a new document and use it to load something.

Open the Components panel. Nope—the component doesn't show up there yet, so don't bother looking for it.
Open the options menu in the Component panel and choose Reload. Now The_Loader should appear in a folder called Custom (or whatever you named it).
Create a new Flash document and drag an instance of The_Loader to the Stage.
In the Load this field in the Property inspector, enter the path to an image or .swf file, as shown in Figure 3.

Figure 3 The dern thing works...I hope.

NOTE

Note: The onLoadProgress() method does not fire when loading assets from your own computer. The asset must be loaded over http. To test the component, simply enter the path to an image on the Web. If you don't have your own site, use the URL to an image from a Google image search. (It helps if the image you're loading has a large file size.)

The Load it here field says to load the asset into _parent.clip_mc (remember, the loadItHere variable is inside the component, so _parent refers to the main timeline in this case), so add a movie clip to the stage and assign it the instance name clip_mc.
Run a test movie.

Voila!

If you've followed along, the text field in the component runs a percentage count, starting at 0% and incrementing to 100%. When the image is fully loaded, the number disappears and the image is displayed.

Building this component may have been a little time-consuming, but now that you've done it, you can toss it into any project. All you have to do is enter the path to the asset and the name of the clip in which to load the asset.

This component works only with Flash Player 7, so if you want to pre-load assets in older players, you'll have to find yourself another tutorial. (Sorry.)

Until next time, happy Flashing.