Photo

In the previous page, you downloaded the photo gallery source and overwrote the code with the revised code. If you are curious as to what the differences are between this code and the photo gallery code, the following code box should help:

delay = 3000;

//-----------------------

function loadXML(loaded) {

if (loaded) {

xmlNode = this.firstChild;

image = [];

description = [];

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;

}

firstImage();

} else {

content = "file not loaded!";

}

}

xmlData = new XML();

xmlData.ignoreWhite = true;

xmlData.onLoad = loadXML;

xmlData.load("images.xml");

/////////////////////////////////////

listen = new Object();

listen.onKeyDown = function() {

if (Key.getCode() == Key.LEFT) {

prevImage();

} else if (Key.getCode() == Key.RIGHT) {

nextImage();

}

};

Key.addListener(listen);

previous_btn.onRelease = function() {

prevImage();

};

next_btn.onRelease = function() {

nextImage();

};

/////////////////////////////////////

p = 0;

this.onEnterFrame = function() {

filesize = picture.getBytesTotal();

loaded = picture.getBytesLoaded();

preloader._visible = true;

if (loaded != filesize) {

preloader.preload_bar._xscale = 100*loaded/filesize;

} else {

preloader._visible = false;

if (picture._alpha<100) {

picture._alpha += 10;

}

}

};

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();

slideshow();

}

}

}

function prevImage() {

if (p>0) {

p--;

picture._alpha = 0;

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

desc_txt.text = description[p];

picture_num();

}

}

function firstImage() {

if (loaded == filesize) {

picture._alpha = 0;

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

desc_txt.text = description[0];

picture_num();

slideshow();

}

}

function picture_num() {

current_pos = p+1;

pos_txt.text = current_pos+" / "+total;

}

function slideshow() {

myInterval = setInterval(pause_slideshow, delay);

function pause_slideshow() {

clearInterval(myInterval);

if (p == (total-1)) {

p = 0;

firstImage();

} else {

nextImage();

}

}

}

I have colored the above code to make it easier to explain what is happening. All of the code in gray is no different from our photo gallery tutorial. The code that is colored has been added for the slideshow. The code in red is optional. You may remove it for the slideshow, for it will not add any extra functionality. In my version of the slideshow in the previous page, I removed the code in red.

What We Intend to Accomplish
Before explaining the new code, I will try to explain what needs to be done. Before even implementing your slideshow, you had the photo gallery that displayed a new image when either of the next/previous buttons were pressed or the left or right arrow keys were pressed. Each key or mouse press invoked the nextImage() function that loaded the next image. What we are trying to do is automate the process of going to the next image. In other words, we try to create a procedure that calls the nextImage function after a set interval (setInterval) of time.

With that said, another subtle problem arises. Each image is preloaded before actually being displayed. Do we start our timer, that counts the number of seconds between images, after an image has been loaded, or do we start our timer immediately when the nextImage function is invoked? In the first method, the timer counts the number of seconds the image is actually displayed. In our second method, the timer counts the number of seconds the image is displayed along with the time it takes to preload the image.

Ideally, you want the timer to display the actual image for the specified amount of time. You don't want to run-down the timer for preloading the images, for you may run into a situation where the timer invokes the nextImage function even before the current image is displayed. For example, it may take 30 seconds to load the next image in your slideshow, yet the timer is set to change images after 5 seconds. At that rate, you may never see any image before you are switched to the next one. Starting the timer after your image fully loads stops that problem.

Lastly, you want to have a method for looping through the slideshow once you reach the end. It's just an optional feature that I felt would be useful since I saw a few members on the kirupa.com Forums asking how to accomplish that.

So, that's what we want our slideshow to do. On the next page, I will run through the code and explain how it accomplishes all of our above goals.

Onwards to the next page!

---

page 2 of 3

---