In this tutorial, you will learn how to create a slideshow that loads image data from an XML file. While I will explain the new concepts and code used in making the slideshow, you must understand how my earlier photo gallery explained in the xml photo gallery tutorial works.

The reason is that I will extend my earlier photo gallery code to work in this slideshow format. The following is an example of a slideshow you will create:

[ the slideshow automatically progresses to the next image ]

Most of this tutorial involves using recycled code and interface elements from my earlier tutorial. Therefore, you should download and open the final photo gallery source file provided below:

If you want, you can test your movie now itself. You should see a fully functioning photo gallery.

Make sure you open the source file from above into your version of Flash. Select the frame in the action layer and press F9 to view the Actions. Highlight all of the code you see and overwrite it with the following code:

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

If you test your animation now, you will see that the photo gallery cycles through your images automatically using data from the images.xml file. If you want, you can remove the next and previous buttons, for you probably won't need it.

In the next section, I will point out the few, yet important, differences between the photo gallery code and the new slideshow code. After that, I will explain setInterval and how it works..

---

---

In the previous section, 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 section, 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. In the next section, I will run through the code and explain how it accomplishes all of our above goals.

---

---

Alright! Now that you know what we are trying to accomplish, from the previous section, 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:

---

---

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇