The Preloader
A very important feature of this photo gallery is the preloader. The code for the preloader is the following:

this.onEnterFrame = function() {

filesize = picture.getBytesTotal();

loaded = picture.getBytesLoaded();

preloader._visible = true;

if (loaded != filesize) {

preloader.preload_bar._xscale = 100*loaded/filesize;

} else {

preloader._visible = false;

if (picture._alpha<100) {

picture._alpha += 10;

}

}

};

Let's break this down into chewy, bite-size pieces.

this.onEnterFrame = function() {

I use onEnterFrame because, unlike the other event handlers, I need a method of continuously looping the contained section of code automatically without requiring any user input. The onEnterFrame handler fits that requirement nicely.

filesize = picture.getBytesTotal();

loaded = picture.getBytesLoaded();

Before I explain the code, you should know that picture is the instance name of the empty movie clip that will eventually end up holding our pictures. Now, back to the code.

The variable filesize receives the total file size of the picture MovieClip. I get the file size by using the movie clip's name followed by the getBytesTotal() function. Hence, our resulting code picture.getBytesTotal().

In the second line, I find out how much of the picture movie clip has been loaded. That is accomplished by using the getBytesLoaded() function. I store the data returned by the getBytesLoaded() function into the variable loaded.

So, now I have one variable that stores how much of an image in a movie clip has been loaded. I have another variable that stores the total filesize of the image inside the movie clip. My ultimate goal, then, is to ensure that the amount loaded equals the total file size of the image. If the image has not been fully loaded, I want to display approximately what percent of the image has been loaded. Once the image loads, I want to fade-in the image and hide the preloader animation.

The above criteria is accomplished with the following code:

if (loaded != filesize) {

preloader.preload_bar._xscale = 100*loaded/filesize;

} else {

preloader._visible = false;

if (picture._alpha<100) {

picture._alpha += 10;

}

}

In the first line, I check to see if the image has fully loaded. If the image is in the process of being downloaded, the variable loaded will not equal the variable filesize. That makes our condition true, and thus, we display our preloader.

Preloader Information

I don't want to dwell on my implementation of preloader, but I will provide a brief summary as to how it worked. The preloader is a fairly simple movie clip that contains, inside it, another movie clip called preloader_bar. The mc preloader_bar is just a rectangle. According to our code, that rectangle is scaled by: 100*loaded/filesize. Ideally, when the image is fully loaded, mathematically, loaded/filesize will equal 1. Therefore, the _xscale property for the bar will reach 100% because loaded/filesize is actually multiplied by 100. When the image is being downloaded, the variable loaded will be smaller than the variable filesize, therefore loaded/filesize will only be a fraction - a number less than 1. Therefore, if loaded / filesize equals a number such as .5, multiplying that number by 100 yields 50. Finally, that would mean that _xscale for the preload_bar movie clip is 50 - only half its width. Naturally, if only a small portion of your image has been loaded, your preloader's width - horizontal scale - will be very small. Only a small portion of your preloader will be visible. If a large portion of your image has been loaded, your preloader's horizontal scale will be larger and display a greater portion of itself. Lastly, the preloader_bar movie clip is masked to prevent the bar from becoming too large, for scaling a movie clip increases its width on both the left and right sides! I could have used the _width property, but I prefer dealing with a percent value as opposed to a pixel value. All your visitors will see is a cool preloader that resembles a percentage loader bar. They don't have to know how the preloader works =)

If the image is fully loaded, the condition for our if statement becomes false, and the code in our else statement is invoked:

preloader._visible = false;

if (picture._alpha<100) {

picture._alpha += 10;

}

Once our image is loaded, there is no need to display a preloader. Therefore, I set the _visible property for our preloader movie clip to false. That ensures that our preloader is not visible while the image is fading into view.

Speaking of fading into view, the last two lines help our images to do just that - fade an image in from obscurity. There is a line of code elsewhere that sets the alpha (transparency) of your image to zero, thus making it completely invisible. Therefore, if the transparency is below 100, the alpha is increased by 10. You may want to make the < operator a <= operator if you are planning on incrementing using smaller numbers.