Photo
Slideshow Using XML and Flash
        by kirupa  |  28 December 2004

Alright! Now that you know what we are trying to accomplish, from the previous page, let's go through the code. To start our tour, let's take a look at the slideshow() function:

function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}
}
}

The above function contains (among other things) the setInterval code required to cause the animation to pause and resume after a fixed amount of time:

myInterval = setInterval(pause_slideshow, delay);

setInterval takes two arguments: a function and a number representing time in milliseconds. I assign the setInterval function to the variable myInterval because it now allows me to manipulate or access the setInterval code throughout the proper scope in the animation.

With setInterval, what you are doing is telling Flash to execute a function every x milliseconds. In our code, I am telling Flash to execute the pause_slideshow function after a delay specified by the delay variable. I explain the delay variable towards the end.

function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}
}

You have the pause_slideshow function nested inside the slideshow function. Before I do anything in the function, I first run clearInterval to remove the setInterval call from earlier. When you clear a call to your setInterval function, Flash stops calling the setInterval instance (assigned to myInterval in our case) specified by your clearInterval function. I will explain in a few paragraphs why I clear the setInterval call in greater detail.

if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}

The above code is used to loop the slideshow once you reach the last image in your sequence of images. I check to see if you reach the last image. If you remember from our photo gallery, the variable p keeps track of which image is currently showing. If we reach the last image (total - 1), then we reset the counter p to 0. We also tell Flash to call our firstImage() function that displays the first image. If we are not at our last image, I simply call the nextImage() function.

So, we have our slideshow function created, but it doesn't actually do anything unless it is actually called first. We can't just randomly place a call to our slideshow function at the end of our movie. We want to call it after the image has loaded.

Remember - we don't want to have our timer start while the image is preloading. We only want to start our countdown initiated by setInterval only after the image has loaded. A good place to place our slideshow would be after the actual preloader code:

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 firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
slideshow();
}
}

Since we have two functions that call an image - nextImage & firstImage - we place our call to the slideshow function inside our if statement that executes code only after the image has fully loaded.

Phew - we are done with the major chunks of code now. Yet, I still have not given a good enough reason as to why I clear the setInterval by using the clearInterval function! When a setInterval is called, after a specified amount of time (the second argument to setInterval), the function is called again. The function keeps getting called, theoretically, for an indefinite period of time! That would work great for a clock!

Unfortunately, the non-terminating nature of setInterval is a problem for us with regards to our slideshow. We only want our slideshow function to be called after an image is loaded. Our nextImage function contains a call to the slideshow function also. After one or two image changes, you will have multiple calls to setInterval that each call the nextImage function. You have the first setInterval call, then you have another setInterval call called by nextImage, and then you keep repeating that until you have a LOT of setInterval calls running simultaneously. Calling a new setInterval procedure does not override any existing setInterval procedures. They simply get called along with any previous incarnations of setInterval calls.

Therefore, we must find a way to remove or stop old setInterval calls. ClearInterval is a good built-in function that accomplishes just that. We clear our setInterval calls in order to prevent multiple calls that causes Flash to simply zoom through all of the images in a fraction of the time.

After we call our slideshow function, I immediately make a call to clear the interval assigned by myInterval. That ensures that only one instance of myInterval runs at any given time, and therefore the pause between successive images remains the same!

delay = 3000;
//-----------------------

When calling our setInterval function, we passed in an argument called delay that takes in a number in milliseconds. We declare our delay variable early on because there is no harm in doing so, but more importantly, it is easier for you to spot it amidst all of the other code.

In my example, I have delay set to 3000. 3000 equates to 3 seconds, for the value is actually in milli (1/1000) seconds. The higher the number, the longer your image will be displayed before proceeding to the next image.


That is all there is to extending our photo gallery in order to make a slideshow. I have provided the MX 2004 and MX source files for this file:

Download Source MX 2004
Download Source MX

If you have a question about this or any other topic, the easiest thing is to drop by our forums where a bunch of the friendliest people you'll ever run into will be happy to help you out!

THE KIRUPA NEWSLETTER

Get cool tips, tricks, selfies, and more...personally hand-delivered to your inbox!

( View past issues for an idea of what you've been missing out on all this time! )

GOT A QUESTION?

 


page 3 of 3

 

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.