Making the ultimate dynamic image gallery in Flash 8 — part 8

12.3. Creation of the MovieClipLoader and Listener objects and the functions that enable preloading

If you wish to preload external JPEG images into Flash across all browsers, the best method available is the one that uses the MovieClipLoader object. This particular object is specifically made for external content loading. It is great and you will use it to load and preload both the thumbnails and the big images! Here's how it works:

1. The first thing that you must do is create an instance of the MovieClipLoader object. I chose to call the variable which will contain it loader.

var loader:MovieClipLoader = new MovieClipLoader();

2. Then, you need to make a listener object, which can be a movie clip or an Object object (a generic object, let's say so). It will listen to what the MovieClipLoader object is doing and will react when things start happening: for example, when the loading is started by the MovieClipLoader or is in progress, the listener is aware of that and reacts by running specific functions (which will, for example, tell Flash how much has been loaded, etc). I called the listener object myListener.

var myListener:Object = new Object();

3. And to have the MovieClipLoader and the listener work together nicely, you must associate the listener object to the MovieClipLoader, like this, using the addListener method:

loader.addListener(myListener);

Fine. But, before any loading/preloading is going to be done, you must first and foremost write two important functions:

• One that will tell Flash what to do while an image is being loaded (called onLoadProgress),
• And the other that will tell it what to do once the loading is complete (called onLoadInit).

I repeat, these functions must be created before any loading begins. Flash must know what to do in advance! On a sideline note, this method of preloading is also explained extensively in my menu preloader system tutorial. Let me show you now how have I set up the listener object's onLoadInit() function for the gallery.

myListener.onLoadInit = function(target:MovieClip) {
if (whatIsLoading == "thumb") {
currentThumbnail.percent_txt._visible = false;
currentThumbnail.filters = thumbsFilter;
thumbClickable();
tracker++;
if (tracker<howManyImages) {
loadThumbnail();
} else {
enableThumbs();
}
} else if (whatIsLoading == "big") {
target._alpha = 0;
displayBigImage.percent_txt._visible = false;
displayBigImage.filters = thumbsFilter;
bigClickable();
fadeIn();
}
};

Flash will automatically execute the onLoadInit() function once the external JPG image (or a SWF, or a GIF...) has been entirely downloaded to the user's hard disk.

First, the function is defined with a parameter (the thing between the function's parenthesis): the target variable which is a Movie clip. This is the empty movie clip into which the external image will be loaded.

myListener.onLoadInit = function(target:MovieClip) {

Inside the function (meaning between its curly braces: { and }), the first thing that shows up is an if/else if conditional statement:

if (whatIsLoading == "thumb") {
currentThumbnail.percent_txt._visible = false;
currentThumbnail.filters = thumbsFilter;
thumbClickable();
tracker++;
if (tracker<howManyImages) {
loadThumbnail();
} else {
enableThumbs();
}
} else if (whatIsLoading == "big") {
target._alpha = 0;
displayBigImage.percent_txt._visible = false;
displayBigImage.filters = thumbsFilter;
bigClickable();
fadeIn();
}

As you can see, this conditional statement looks at the value of the whatIsLoading variable to decide what to do next. This value is of the string type (meaning it's text) and can equal either "thumb" or "big". These two values stand for thumbnail and big image. I defined them as such because it's logical and I can instantly see what do they refer to.

As I said, this function is defined before the actual loading starts. So, as you will see later, once the loading of an external JPEG image has been triggered, the value of the whatIsLoading variable will be set to either "thumb" or "big". It is set to "thumb" when the user clicks on a gallery section button — when the thumbnails of that section should be loaded and displayed. It is set to "big" when the user has clicked on a thumbnail to see the big image.

So, what happens when the value is set to "thumb"? The following:

currentThumbnail.percent_txt._visible = false;
currentThumbnail.filters = thumbsFilter;
thumbClickable();
tracker++;
if (tracker < howManyImages) {
loadThumbnail();
} else {
enableThumbs();
}

Here is the above code, broken down line by line:

• The dynamic text field inside the thumbnail holder movie clip of the currently loaded thumbnail is hidden by setting its _visible property to false (remember, this is the text field that you created earlier in this tutorial, where the percentage preloader will show up during preloading).
• The drop shadow effect is applied to the thumbnail holder via the movie clip's filters property.
• The thumbClickable() function is invoked (meaning it is called), which will define what will happen when the user clicks on a thumbnail: she or he will begin the loading of its bigger counterpart (the big image). This function comes later in the code, you'll see it explained too.
• The tracker variable is incremented by one (1 is added to its current value) — that's what the two plus signs (++) stand for. Remember, this variable is used to let Flash know which thumbnail is currently being loaded/has been loaded, where it should be placed, etc.
• Then, an if/else conditional statement shows up, which does the following:
• if the value of tracker variable is lesser than the value of howManyImages variable, the loadThumbnail() function will be invoked and the next thumbnail will be loaded.
• If that condition isn't true (when tracker's value is equal to or bigger than howManyImages' value), then the thumbnails will be enabled. This means that they will be clickable.

The above means the following: tracker keeps track of the number of thumbnails in the current gallery section (the one that the user chose to see). The variable howManyImages holds the number of images that exist in the chosen gallery section. So, if the current thumbnail isn't the last one — meaning if there are more to be loaded — more will be loaded.

And when all the thumbnails have been loaded, they are all enabled. This means that the user isn't able to click on any of the thumbnails until all of them have been completely loaded. I made this to be so because I like it like that and also because I don't have to deal with additional interaction stuff which I'd have to, if I hadn't done this.

And now, what happens when the value of the whatIsLoading variable has been set to "big"? A slightly different thing:

target._alpha = 0;
displayBigImage.percent_txt._visible = false;
displayBigImage.filters = thumbsFilter;
bigClickable();
fadeIn();

Here's the breakdown of the above code:

• The _alpha property (transparency) of the target movie clip (the one into which the big image will be loaded) is set to zero, meaning that it will become invisible. I have chosen to do this to be able to apply the nice fade-in effect to the big image later :). Why make a simple instant appearance when you can create a cool fade-in effect?
• Then, as was the case with the thumbnails, the dynamic text field of the big image holder is made invisible (_visible = false), because the percentage preloader needs to disappear once the big image has been fully loaded.
• The drop shadow filter is applied to the big image, as it was for the thumbnails.
• The big image is made clickable by calling the bigClickable() function, which you'll see later. This makes possible for the user to click the big image, and once that has been done, the image will be removed and the thumbnails will be visible again.
• And finally, the fadeIn() function is invoked to smoothly fade in the big image, from invisibility to complete opaqueness.

Cool! What comes next is the onLoadProgress() function which monitors the downloading of the image(s) to the user's computer. This function is used to create the preloaders.

myListener.onLoadProgress = function(target:MovieClip, loaded:Number, total:Number) {
percent = Math.floor(loaded/total*100);
if (whatIsLoading == "thumb") {
currentThumbnail.percent_txt._visible = true;
currentThumbnail.percent_txt.text = percent+"%";
} else if (whatIsLoading == "big") {
displayBigImage.percent_txt._visible = true;
displayBigImage.percent_txt.text = percent+"%";
}
};

This function comes with three parameters:

• target — the empty movie clip which into which the external JPEG is loaded,
• loaded — how much of the image has been loaded so far, in bytes and
• total — the total file size of the image that is being loaded.

Inside the function, the first line servers to calculate the percentage of the image that has been loaded so far (loaded/total*100) which is then rounded to the nearest lower value with the floor() method of the Math object.

percent = Math.floor(loaded/total*100);

Next comes a conditional if/else if statement, which, much like in the previous function, determines if the value of the whatIsLoading variable equals either "thumb" or "big". Then, whether it is a thumbnail that is being loaded or a big image, what goes on is basically the same: the percent_txt dynamic text field inside the image holder becomes visible and inside it the information on how much of the image has been loaded so far is displayed, using the percent variable followed by the % character.

For the thumbnail:

currentThumbnail.percent_txt._visible = true;
currentThumbnail.percent_txt.text = percent+"%";

...as well as for the big image:

displayBigImage.percent_txt._visible = true;
displayBigImage.percent_txt.text = percent+"%";

The currentThumbnail and displayBigImage variables are defined later, you'll see. There is a lot going on here in those two functions that hasn't appeared or been defined in your code yet, but that is, I repeat, because these functions, which are connected to the MovieClipLoader object and its associated listener object have to be defined before you actually proceed to load the external JPEG images.

Great! Let's move on to the XML loading part now.

Top of page

12.4. Loading XML

To load XML data from an external XML file into Flash, you must do the following:

1. Create a new XML object.
2. Create an onLoad() function which will tell Flash what to do after loading has been finished, whether it was performed successfully or not.
3. Tell Flash to load the XML data from the external XML file.

Here is the code that does exactly that:

var imageGallery:XML = new XML();
imageGallery.ignoreWhite = true;
imageGallery.onLoad = function(success) {
if (success) {
parseGalleries();
} else {
descText.text = "Sorry the image data just didn't load.";
}
};
imageGallery.load("gallery/gallery.xml");

The first line creates a new XML object. I chose to call it imageGallery.

var imageGallery:XML = new XML();

The second one tells Flash to ignore the white space between the chunks of data inside the XML file:

imageGallery.ignoreWhite = true;

This must be done, yes, because blank spaces in an XML file are considered by Flash as data, too. That's why you must tell Flash to skip it because otherwise you'll have a mess to deal with.

Now comes the onLoad() function of your XML object. This function (similarly as the ones used for preloading with the MovieClipLoader and its listener) must be defined before the actual XML loading takes place. Flash must know in advance what to do once the XML data has been loaded.

imageGallery.onLoad = function(success) {
if (success) {
parseGalleries();
} else {
descText.text = "Sorry the image data just didn't load.";
}
};

As you can see above, the onLoad() function has one parameter: success. This is a parameter that gets automatically passed to this function upon XML data loading. It holds a Boolean type of value, which means that it equals either true or false. It yields as true if the XML data loading was performed successfully and false if it was not.

Inisde the function, there is a simple if/else conditional logic used to help Flash decide what to do if the loading was successful or not. The line

if (success)

is the shorthand way of writing

if (success == true)

And the else part, of course, is activated only when success turns out to be false. So, when XML data loading has been successful, the parseGalleries() function is invoked (invoked means called in programmers' jargon). I chose that name for the function, because it will literally parse the XML data to extract every bit of information that is needed for the creation of the image gallery.

parseGalleries();

If the loading of XML data fails, you have to inform your users about that.

descText.text = "Sorry the image data just didn't load.";

The above text is what will appear in the big dynamic text field. Basically, I don't know what else can be done if the loading process fails. The user can try to reload the page, but most likely he or she will just close the page with the image gallery and move. If you have created a good XML file and tested your SWF and seen that it works online with no problems, there is not much that you can do if now and then some user can't see the gallery because the XML data failed to load. That is beyond your power: maybe the server where you host your image gallery went down for a moment or the user has a too strong firewall, router, etc. But it happens rarely. Most people should see your Flash image gallery with no problems at all.

And now, once you have defined what Flash should do upon loading the XML data, tell it to load it! LIke this:

imageGallery.load("gallery/gallery.xml");

Notice the path to the XML file: it is stored inside the gallery folder that you have created earlier in this tutorial, when you created the whole folder structure. This can be a source of problems too! If you change the folder inside which your XML file resides or the name of the XML file itself, you must change it in the above line of code too!

REMEMBER When loading external data, you must reference it in relation to the HTML file inside which your SWF file is embedded, NOT in relation to the SWF file itself, regardless where it is situated. The HTML page is what's important!

Proceed to the next page to see how parsing of XML data is done.