14 June 2005
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:
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 ]
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
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
[ 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
page 1 of 7