Flash MX 2004 - Simple Preloader

Flash MX 2004 - Simple Preloader
Making a preloader doesn't have to be complicated. Using the MX 2004 ProgressBar and Loader components and a few of lines of simple AS, you can have a basic preloader in minutes.




Start by creating a new Flash document, and open the Component panel if it's not up (Ctrl+F7 or Windows > Development Panels > Components). Double click on the Loader component to add it to the stage. In the Properties Inspector (Ctrl+F3 or Window > Properties) and adjust the size of the Loader to match the width (W) and height (H) of the JPG or SWF you're going to load. While there, give it an Instance Name of loader. All the parameters will be set through Actionscript so don't worry about it here.

Now go back to your Component panel and double click the Progressbar component to add it to the stage. In the Properties Inspector give it an Instance Name of pBar. We'll set all the parameters for the progress bar through Actionscript too.

Now for the Actionscript. Select Frame 1 of the main timeline and bring up the Actions panel (F9). Copy and paste this code:

loader.contentPath = "your_file";
pBar.source = loader;

For the first line, change "your_file" to the full path to the JPG or SWF you want to load. If everything will be in the same folder, you can just add the file name. The second line simply tells the progress bar what source it will be watching to follow it's progress, which is the Loader component. That's it! Or is it? Well, technically yes, this is the minimum you need in order for the progress bar to work. If you want more control over the progress bar, then continue reading.

If you don't want the JPG or SWF to load instantly, you can add one more line of code to the above 2 lines, which is:

loader.autoLoad = false;

Which will give you:

loader.autoLoad = false;
loader.contentPath = "your_file";
pBar.source = loader;

Then you can trigger it when you want by using the code:

loader.load();

Depending on where you trigger it, you may have to target the loader in a different way. This is all assuming the components are on the main timeline and the loader will be triggered from the main timeline.

You can also change the label of the progress bar. This property is a string in the format "%1 out of %2 loaded (%3%%)"; %1 is a placeholder for the current bytes loaded, %2 is a placeholder for the total bytes loaded, and %3 is a placeholder for the percent of content loaded. The characters "%%" are a placeholder for the "%" character. If a value for %2 is unknown, it is replaced by "??". If a value is undefined, the label doesn't display. The default value is "LOADING %3%%"

To change this, add one more line of code to the above:

pBar.label = "%1 out of %2 loaded (%3%%)";

This would produce how many bytes of the full amount of bytes is loaded, and the percentage of the bytes loaded in parentheses. Ex: 500 out of 1000 loaded (50%). You can place your own text in there too, if you wanted it to look like 500 bytes out of 1000 bytes loaded, instead of just the numbers by themselves.

So if everything has been added, our code now looks like this:

loader.autoLoad = false;
loader.contentPath = "your_file";
pBar.label = "%1 out of %2 loaded (%3%%)"
pBar.source = loader;

Now we're getting somewhere, but wouldn't it be better to display your loaded files in Kilobytes (KB) instead of bytes? Well that's no problem by adding one more line to the existing Actionscript.

pBar.conversion = 1024;

1024 equals the amount of bytes in one (1) Kilobyte, just for the record. So now we should have the following Actionscript in place:

loader.autoLoad = false;
loader.contentPath = "your_file";
pBar.label = "%1 out of %2 loaded (%3%%)"
pBar.conversion = 1024;
pBar.source = loader;

Only 5 lines of Actionscript, not bad right? But I hear the screams now. You want to know how to get rid of that green progress bar. Well, that's not a problem using the setStyle() method. If you want to change the green bar to another color, add this line of Actionscript to the existing code:

pBar.setStyle("themeColor", "0xcolor");

Changing "color" to a hex color that you want (for example red would be 0xFF0000). If you want to change the label color, add this line:

pBar.setStyle("color", "0xcolor");

Again changing "color" (the 2nd one). So finally, we should end up with the following Actionscript code:

loader.autoLoad = false;
loader.contentPath = "your_file";
pBar.setStyle("themeColor", "0xcolor");
pBar.setStyle("color", "0xcolor");
pBar.label = "%1 out of %2 loaded (%3%%)"
pBar.conversion = 1024;
pBar.source = loader;

That should be enough to get a nice functional progress bar, but one last thing. If you want the progress bar to disappear after the loader is done, add one more line of code:

pBar.mode = "polled";

I won't get into it too much, this is just the parameter to specify a loading process that emits progress and complete events, like a Loader component. The complete event is what we'll be looking for. Click on your progress bar to select it, bring up the Actions panel and add the following code:

on (complete) {
this.setVisible(false);
}