So the task at hand, was to create a Flash/XML based slideshow type component that would cycle through as little as 5 images with captions at a rate of about 5 seconds per image, that was fed dynamically from an xml file which controlled the image path, frame delay, and image url.

Similar flash components can be seen on many popular sites such as gamespot.com, hgtv.com, and foodnetwork.com to name a few. I based my initial code off of a tutorial I found from kirupa.com.

I added the following features to existing slideshow:

  • Added a clickable button action that grabs a url from the xml file
  • Added a background button that allows you to click an image and grabs the same url from the xml file
  • Added Play/Pause Buttons
  • Pulled the slideshow image delay from the actionscript file and put it into the xml file as an editable parameter

10/15/06 UPDATE: The flash slideshow will accept jpg’s and animated .swf files.

11/4/07 UPDATE: I will be adding dynamic nav based on this tutorial Dynamic Arrays in Flash 8
The flash feature can be viewed at dLife.com and NewBridge International Realty, two companies where I have implemented the code.

To download the full source code, please use this link: [download#3].

Dontations are highly appreciated!





My ActionScipt Code:
[as]//———————–
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
url = [];
delay = [];
total = xmlNode.childNodes.length;
for (i=0; i0) {
p–;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
url_btn = url[p];
go_btn = url[p];
picture_num();
}else{
p = total – 1;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}

function firstImage() {
previous_btn._visible = 0;
next_btn._visible = 100;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
url_btn = url[0];
go_btn = url[0];
picture_num();
slideshow();

}
}
function picture_num() {
current_pos = p 1;
pos_txt.text = current_pos ” / ” total;
}

function slideshow() {
myInterval = setInterval(pause_slideshow, delay[p]);
}

function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}
}
[/as]
My XML Code:
[as]

nov-06.swf

Learn more about traveling safely and maintaining your diabetes management.

http://www.dlife.com
6000
[/as]

1 thought on “Flash 8 Slideshow Tutorial with XML”

XML Slideshow gallery · January 28, 2009 at 12:33 pm

[…] Flash 8 XML Slideshow Tutorial […]

Leave a Reply

Your email address will not be published. Required fields are marked *