I will now provide a quick summary of everything in our thumbnail code, from the previous pages, and what causes it to work.

First, you decide that you want to have thumbnails. You make the necessary modifications to the XML file by adding in the path for your thumbnail images. Now that you have your XML file modified, your next course of action is to modify the loadXML function in your FLA. You tell Flash to loop through each node and pick out the thumbnail image path and store it in an array.

So, now, you have reached a point where data from XML has been retrieved, processed, and stored as an array in Flash. What do you do with an array full of thumbnail image paths? You create an empty movie clip for each thumbnail and load that thumbnail into it!

Loading the thumbnail is only one part of our whole thumbnail scroller. You have to make sure that each image is spaced accordingly by taking into account each image's width and not loading the next successive image on top of a previous image! That is where our hit_left and hit_right movie clips first gain importance.

The second part of the thumbnail scroller is to actually scroll when our mouse is on the left or right edges of our thumbnail. In this tutorial, I used the two movie clips, hit_left and hit_right to simulate the left and right boundaries of our thumbnail scroller. If the mouse was both within the thumbnail area and touching either the left or right hit movie clips, your thumbnails will scroll provided there are thumbnails left to scroll.

Since most of the code is based on the existing photo gallery code, it was not difficult to load the larger image when a thumbnail is clicked. Each thumbnail contained a number that was equivalent to a number used in loading images in the photo gallery. Passing that number to our existing functions from our photo gallery was all it took to getting images to load.

I have provided a ZIP file containing both our final thumbnail FLA and the modified images.xml file.

Download Source MX 2004

page 7 of 7