The code on the previous page was just a setup to the real code that is, coincidentally, on this page. Let's take a look at the thumbnails_fn function that I briefly mentioned towards the end of the last page:

Before I go over each line of the code, let me briefly summarize what this function does. This function takes in a number, k, as an argument from the loadXML function. This number determines which image is being loaded, and this function is only active while the for loop in the loadXML function is still looping.

In that brief period of time, this function creates a new movie clip for each new value of k that is passed to it, and each new movie clip acts as a holder for each thumbnail image. After each image is loaded, we then give it the onRollOver and onRelease properties so that people can click on each image and have it's larger counterpart be loaded in the top frame.

Let's dissect this code:

thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());

I am creating a new empty movieclip called ("t"+k), inside the movie clip thumbnail_mc. In order to do that, I'm using the createEmptyMovieClip function that takes in the arguments for instance name and depth provided I call the function from the target movie clip: thumbnail_mc.

For example, movie clips created will be called t0, t1, t2,...., tn where n is the value for k. Speaking of k, it is the value that is passed to the thumbnails_fn function from the loadXML function. More specifically, k is similar to the variable p that is used throughout the photo gallery code.

Notice also that I don't give an arbitrary value for the depth, but instead use the getNextHighestDepth() function to ensure that each movie clip created into thumbnail_mc has a different depth.

tlistener = new Object();

This line is fairly straightforward. I simply declare the tlistener variable as an object. No tricky alternative meanings here.....I hope!

image_mcl = new MovieClipLoader();

image_mcl.addListener(tlistener);

image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);

Let's jump a number of lines down and look at the last three lines. This and the above tlistener definition are part of the functioning for the MovieClipLoader() class that I assign to the variable image_mcl.

Instead of explaining this, Macromedia's documentation for the MovieClipLoader along with loadClip does a brilliant job of explaining this. They even provide a good example. Therefore, I will skip explaining the technical functioning of this function.

Before I leave, take note that thumbnail[k] references the thumbnail array, and combined with the index position k, returns the path to the image that needs to be loaded. The same path that we earlier defined in our XML file.

tlistener.onLoadInit = function(target_mc) {

If you recall, tlistener is the variable that I declared as an object earlier. Under the MovieClipLoader class, tlistener is used to gauge the progress of the loaded images, and if the image has both loaded AND initialized, any code contained here is executed.

One last feature is that this function takes in the argument target_mc, which is passed to it from the loadClip method: "thumbnail_mc.t"+k, of course, k is replaced with a number referencing the index position of your array.

target_mc._x = hit_left._x+(target_mc._width+5)*k;

This line is responsible for placing each thumbnail in the row format. Surprisingly, all of the above produces a simple number - the x position of a particular thumbnail.

hit_left._x returns the x position of the hit_left movie clip. This produces an offset so that your thumbnails don't load at the very left-most boundary of your movie. You could simply use a number such as 10 or 20 to produce the necessary offset, but if you were to vary your thumbnail gallery beyond what I created, then you'll have to go back and change the numbers manually. In this case, simply moving the hit_left movieclip to accommodate a different photo gallery will automatically adjust the positioning of the thumbnails also.

(target_mc._width+5)*k is the line that positions each thumbnail relative to the preceding thumbnail. I offset the position of each future thumbnail by the width of the current thumbnail. The value of k places each thumbnail far away so that you don't overlap an existing thumbnail. The value, 5, is simply the spacing between each thumbnail, so you have a small gap between each image.

target_mc.pictureValue = k;

I am assigning the value k to a variable pictureValue in our target_mc movie clip. Remember that target_mc varies depending on the value of k in the loadClip action. This is a very effective way of assigning a variable to a movieclip that you can easily access later without worrying about variable scope and other fun issues that I won't address at this time!

target_mc.onRelease = function() {

p = this.pictureValue-1;

nextImage();

};

target_mc.onRollOver = function() {

this._alpha = 50;

thumbNailScroller();

};

target_mc.onRollOut = function() {

this._alpha = 100;

};

In these series of lines, I give each thumbnail the ability to execute some code when clicked on or rolled over/out.

The code for onRelease is similar to pressing the Previous and Next buttons in the photo gallery. The only difference is that the number p varies, for you may skip over a few images when clicking on an image to load after all. So, we need to determine the value of p for each image. Luckily, if you remember, I assigned each movie clip the value of k in the pictureValue variable, and k is the variable p in disguise for this function!

For the onRollOver action, I set the alpha of the thumbnail to 50. There is no real reason behind me doing that besides informing the users that rolling over the thumbnail does something similar to a button. I also call the thumbNailScroller() function, and you will learn more about that later.

When you roll out of the thumbnail, I return the alpha of the movie clip back to 100. I'm trying to simulate the Over and Default states of a button with this movie clip.

Alright, we are almost done. Let's now take a look at our thumbNailScroller_fn function that moves the thumbnails left and right depending on where your mouse cursor is. Onwards to the next page!

page 5 of 7