Cycling Through Images
An important aspect of the photo gallery is the ability to cycle through images. Let me introduce you to the first function that is responsible for cycling forward through your images:

function nextImage() {

if (p<(total-1)) {

p++;

if (loaded == filesize) {

picture._alpha = 0;

picture.loadMovie(image[p], 1);

desc_txt.text = description[p];

picture_num();

}

}

}

What I am trying to accomplish with this code is first determine whether this image is the last in the series of images defined by the XML file. If there are 9 images, and you are on image number 9, you should not be able to load a 10th image. That's what the first if statement checks. The variable p acts like a counter variable, and it is initially declared to be zero.

If you are on your first image, then p is less than the total number of images. I use total - 1 because of the discrepancy between how XML data is numbered starting with 0 while the total number of nodes is counted starting from 1. I briefly explained that earlier.

Immediately, I make sure to increment the variable p by one - thus signifying that the next image is about to be loaded.

In the nested, second if statement, I check to make sure that the image is completely loaded by checking to see if the values for loaded and file size are equal. The previous page contains extra information about the loaded and file size variables.

If the image is, in fact, fully loaded, I set the alpha of the image to zero. If you remember, the fading-in effect of the images is dependent on the condition that the alpha be less than 100. Setting the alpha to zero allows the onEnterFrame event outlined in the previous page to successfully fade the image into view.

picture.loadMovie(image[p], 1);

desc_txt.text = description[p];

These two lines are actually responsible for loading the image into the proper location and to display the appropriate caption text into the text field.

Because image[p] and description[p] are arrays, accessing the relevant image and caption information using the p variable as an index position is easy.

Finally, I call the picture_num function. If you recall from an earlier page, the picture_num function is responsible for updating the number of the picture you are on with respect to the total number of pictures your XML file contains data on.

Now, here is the code for the back arrow that displays the previous image:

function prevImage() {

if (p>0) {

p--;

picture._alpha = 0;

picture.loadMovie(image[p], 1);

desc_txt.text = description[p];

picture_num();

}

}

In the above, I undo the increase in p caused by the nextImage function. I set alpha back to zero because I want the previous image to fade in also, for I'm an equal opportunity fader after all. Ok - I'll avoid the cheesy one-liners for the rest of the tutorial...

The next two lines are exactly the same as that of their brethren in the fadeImage function. The image is loaded, and the description text field (desc_text) is updated with the previous image number. Note that the only thing that really changed in this function is the variable p.

Because p is one number less than what it was before accessing the prevImage() function, the data accessed in the image and description arrays is less by one number. To use our ladder example, you simply climbed down by one rung on your ladder. The ladder stays the same - only where you were standing dropped by one rung. Pretty nifty!

function firstImage() {

if (loaded == filesize) {

picture._alpha = 0;

picture.loadMovie(image[0], 1);

desc_txt.text = description[0];

picture_num();

}

}

This function is responsible for displaying the first image automatically when the animation loads without requiring any user input. I check one more time to make sure that the image is fully loaded, set the alpha to zero to enable fading, and then I load the movie.

Instead of using image[p] like I did in the prevImage() and nextImage() functions, I am using image[0]. The reason is that I want to display the first image - I am not interested in any of the other values, for there is only one first image. Therefore, I can get away with using a constant number! I use a similar method for the description array, for I use description[0] as opposed to description[p].