Adding

A popular tutorial on this site is the Photo Gallery using XML and Flash tutorial. As time went on, the forums were filled with requests to make modifications to the tutorial. In this tutorial, I will address several of the more common requests I noticed. The modifications I explain in this tutorial are:

• Thumbnails
  You can now see and cycle through smaller images that offer a preview of the larger image.

• Better use of onEnterFrame
  Valuable CPU resources were being used up even when the photo gallery wasn't doing anything. In this version, onEnterFrame calls are removed when not in use.

The following is an example of the modified photo gallery tutorial:

[ use your arrow keys or press the Next and Previous buttons ]

	NOTE
This tutorial is a modification over the original Photo Gallery tutorial. If you have not finished that, you may be a bit lost in this tutorial, for I will not be repeating concepts already covered in the previous tutorial

Thumbnails
Let's first discuss how we are going to approach implementing thumbnails into Flash.

The obvious first step, is to procure the smaller images that will make up our thumbnails. Ideally, you would want your thumbnail images to be considerably smaller than your main images. If your images are too large, it defeats the purpose of having a quick-loading preview of all the images.

Next, we need to find a way of displaying our thumbnails. There are two popular ways you can choose to display thumbnails: the grid and scroller.

The grid is where all of the thumbnail images are displayed in, surprise surprise!, a grid:

[ the grid ]

The scroller, similar to what you see in the above animation, is the method where you scroll through a row of images:

[ the scroller ]

I prefer the scroller simply because the thumbnail images I'm using are a bit too large to efficiently fit in a small area. Because I am going to be using a scroller, I need to figure out an efficient way of scrolling the images and stopping the scrolling if there are no images left to be scrolled or your mouse cursor is not over the thumbnail area.

Finally, and most importantly, the thumbnail data will need to be taken from an XML file. That means we need to make our thumbnail code expandable so that, even if you use some images that are oddly sized, your photo gallery adapts to it nicely. We don't want to mess with our FLA a whole lot!

Now that we have a better idea of how to approach the thumbnails, let's start creating them in Flash. Onwards to the next page!

---

page 1 of 7

---