Photo

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:

Download Source MX 2004 Download Source MX

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.

On the next page, 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..

Onwards to the next page!

---

page 1 of 3

---