You just survived a painstaking page of getting the thumbnails to work from the previous page, but how did all of those various steps combine into getting our thumbnails to work? Hopefully, this page will answer that and more!

First, let's take a look at out the movie clips and shapes we added for our photo gallery modification. The following image (color/opacity added for emphasis) provides details on the symbols I will be discussing:

As you recall from the first page, the thumbnails were constrained by boundaries on both the left and right sides. Those boundaries are determined, not by the hit_left and hit_right, but primarily by the mask rectangle shape colored blue in the above image.

Note that the thumbnails are all loaded into the thumbnailMC movie clip, masking the movie clip with the giant rectangle ensured that the contents of thumbnailMC, the thumbnail images, would not be visible unless they were within the boundaries of the mask rectangle.

So, what role do hit_left and hit_right play? They tell Flash where the boundaries are for determining whether the row of thumbnails have actually reached their left or right boundaries. While the mask rectangle ensured that you only saw thumbnails within the boundary specified by the mask, the hit_left and hit_right movie clips help Flash to make sure that you don't overscroll in either the left or right directions. The scrolling should stop when the last thumbnail crosses the hit_right movieclip or when the first thumbnail is to the left of the hit_left movie clip.

I can't elaborate more on the function of hit_left and hit_right without taking look at the code. Most of the code should be familiar to you from the photo gallery tutorial, so I'll only elaborate on the code that is new to what we are doing now.

Let's take a look at the first section code:

function loadXML(loaded) {

if (loaded) {

xmlNode = this.firstChild;

image = [];

description = [];

thumbnails = [];

total = xmlNode.childNodes.length;

for (i=0; i<total; i++) {

image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;

description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;

thumbnails[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;

thumbnails_fn(i);

}

firstImage();

} else {

content = "file not loaded!";

}

}

In the above section of code, the data from the XML file is formatted and stored in various arrays. You can see how that is done in great detail here: http://www.kirupa.com/developer/mx2004/xml_flash_photogallery4.htm

thumbnails = [];

In this line of code, I am initializing a new variable called thumbnails that will act as an array.

thumbnails[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;

thumbnails_fn(i);

The above two lines (three if count the break caused by the formatting) are contained in the for loop that goes through each line of your XML file and assigns that data to the appropriate variables.

The thumbnail data is the third element in the i-th node. Recall that the numbering for positions in an XML file starts at 0, so the third element would be represented by a 2 - hence, childNodes[2].

Each thumbnail element is itself a child of a larger node, and that node is accessed by childNodes[i], and i is a variable that runs between 0 and the total number of nodes in our XML file. All of that data, is stored in our thumbnails array which we initialized just a few lines ago!

Finally, I make a call to a function called thumbnails_fn. I also pass the variable i to the thumbnails_fn function. Let's talk about the thumbnails_fn function on the next page!

page 4 of 7