Flash slide show with a XML source
This tutorial will show you how to create flash slide show.
Download files that are used in this tutorial here;
Original version (This version is a little buggy ) Preview Here
Flash Mx 2004 file format (This version is slightly different than this tutorial, includes major bug fixes and uses Mx 2004 components) Preview Here
Custom version ( Image titles as a dropdown menu)
You can use html in description field now.Please refer to Macromedia Flash TechNote
Basic features of this slide show are:
- Dynmically laods image, image title and image description from the xml source.
- Preloads every image
- Auto and manual mode. Manual mode includes next and previous buttons and a jump to image drop down menu. Auto mode includes timer selection.
- Fade in and fade out every image
Since this flash movie uses a XML file as a source, lets start with the xml file. If you open up the images.xml file you we see this code;
<?xml version="1.0"?>
< mySlideShow>
< myImage titled = "Istanbul" description = "Istanbul / Turkey" media = "istanbul.jpg">
< /myImage>
< myImage titled = "Bodrum" description = "Bodrum / Turkey" media = "bodrum.jpg">
< /myImage>
< myImage titled = "Antalya" description = "Antalya / Turkey" media = "antalya.jpg">
< /myImage>
< /mySlideShow>
It's not complicated right? If you think it's, lets go over it or check out the examle chapter of Learning XML:
First line of the XML 1 <?xml version="1.0"?> is the standard XML declaration.
Second line 2 < mySlideShow> is first element of the xml which will include myImage elements. Ex:
< myImage titled = "Istanbul" description = "Istanbul / Turkey" media = "istanbul.jpg">
< /myImage>
myImage element is the element that we get the information for every image that we want to load into the flash movie. We have 3 attributes for this element.
titled attribute contains the title information for the image
description attribute contains the description information for the image
media attribute contains the file information for the image
So if we want to add more images to the slide show, all we need to do is add a new myImage element for every image.
Enough with the XML mambo jambo? Lets jump to the actual flash file that shows the slide show:
Ok. You probably didn't like the XML part, I hope you will like this part cause it's much more complicated :)
If you open up the xmlSlide.fla file, you will see the timeline :
To make it easy to read, I created a different layer for every function.
The first two keyframes of the timeline includes the main preloader for the movie. Instead of explaning the code, I wanted to use line by line comments, so here it is:
//Preloader
if (_framesloaded >= _totalframes)
{
//Check if the movie is loaded
gotoAndStop(3);
// Go to and show the layout
}
else
{
percent = getBytesLoaded() / getBytesTotal() * 100;
percent = Math.round(percent);
//Set the percent text field
preLoadBar._width = percent;
//Change the preloder bar
}
After the preloder, here comes the hard part. Lets start with the XML layer:
If you click the third frame of the XML layer you will see the code that is used to load the images.xml file into the flash movie.
currentRecord = 0;
//Variable used to keep track of the current image
//function for onLoad method of xmlObject
function dataLoaded(complete) {
if (complete) {
_root.man_mc.dynGo.removeAll();
nodeCount = this.firstChild.childNodes.length;
//Check the image count from the xml file
showRecord(1);
_root.man_mc.dynGo.rowCount = nodeCount;
//set the rowcount of jump menu
for (i=1; i<=nodeCount; i++) {
// Add numbers to jump menu
_root.man_mc.dynGo.addItem(i);
}
_root.man_mc.dynGo.rowCount = 20;
}
}
// XML declaration and loading
xmlObject = new XML();
xmlObject.ignoreWhite = true;
xmlObject.onLoad = dataLoaded;
xmlObject.load("images.xml");
// function to be run by "next" button
function showNext() {
if (currentRecord == nodeCount) {
loadNumber = 1;
} else {
loadNumber = currentRecord+1;
}
imgSlide();
}
// function to be run by "previous" button
function showPrevious() {
if (currentRecord == 1) {
loadNumber = nodeCount;
} else {
loadNumber = currentRecord-1;
}
imgSlide();
}
// function to set variable names/display fields
function showRecord(recordNumber) {
var nodeObject = xmlObject.firstChild.childNodes[recordNumber-1];
titled = nodeObject.childNodes[0].childNodes[0].nodeValue;
//description.html = true;
description = nodeObject.childNodes[1].childNodes[0].nodeValue;
media = nodeObject.childNodes[2].childNodes[0].nodeValue;
trace(media);
slideFilename = "img/"+media+"";
image_mc.loadMovie(slideFilename);
onEnterFrame = function () {
bytesLoaded = _root.image_mc.getBytesLoaded();
if (bytesLoaded == _root.image_mc.getBytesTotal()) {
// check if the image is loaded
delete onEnterFrame;
show();
}
};
currentRecord = recordNumber;
_root.man_mc.dynGo.setSelectedIndex(currentRecord-1);
}
OK,You probably hated this layer so let's go to the slide function:
If you click the third frame of theslide function layer you will see the code that is used create the actual slide show and fade in/out function.
image_mc._alpha = 0;
//Hide the image movie clip
//Declare variables
var numFadeRate = 5;
/* Fade in and out rate. You can change it if you want a faster or slower fade in and out.
Slide Function (Fade out and unload pictures from the image_mc movie clip) */
function imgSlide() {
onEnterFrame = function () {
image_mc._alpha -= numFadeRate;
if (image_mc._alpha<0) {
delete onEnterFrame;
image_mc.unloadMovie();
showRecord(loadNumber);
}
};
}
//Fade in function
function show() {
onEnterFrame = function () {
image_mc._alpha += numFadeRate;
if (image_mc._alpha>100) {
delete onEnterFrame;
}
};
}
// Load slide function. Dynamicly load pictures from "img" folder.
function autoSlide() {
if (currentRecord == nodeCount) {
loadNumber = 1;
} else {
loadNumber = currentRecord+1;
}
imgSlide();
}
//Jump to image function
function goToImage() {
if (loadNumber != _root.man_mc.dynGo.getSelectedItem().label) {
loadNumber = _root.man_mc.dynGo.getSelectedItem().label;
imgSlide();
}
}
That's about it for the main slide show functions. The rest is for fancy controls. Let's check out the auto timer function :
If you click the third frame of the auto layer you will see the code that is used set the timer for the auto slide function:
function setTimerCtrl()
{
if (_root.image_mc.getBytesLoaded() == _root.image_mc.getBytesTotal())
{
autoTimer = Number(((_root.timer_mc.setTimer.getSelectedItem().label) * 1000) + 2000);
//Check the selected timer
clearInterval(intervalID);
//Clear the interval for auto slide
intervalID = setInterval(autoSlide, autoTimer);
//Set an interval for auto slide
}
}
And let's not forget the function for the auto and manual switch function:
_root.man_mc._visible = false;
//Show manual controls
setTimerCtrlAuto();
function setTimerCtrlAuto() {
//autoTimer = Number(_root.timer_mc.setTimer.getSelectedItem().label)*1000;//Check the selected timer
//clearInterval(intervalID);//Clear the interval for auto slide
intervalID = setInterval(autoSlideNew, 4000);
//Set an interval for auto slide
}
function autoSlideNew() {
if (currentRecord == nodeCount) {
loadNumber = 1;
} else {
loadNumber = currentRecord+1;
}
imgSlide();
}
function selectState() {
if (auto.getState()) {
//Check if the auto radio button is selected
setTimerCtrl();
//Check the seleced timer control
_root.man_mc._visible = false;
//Hide manual controls
_root.timer_mc._visible = true;
//Show auto controls
//Hide the arrows
} else if (manual.getState()) {
//Check if the manual radio button is selected
_root.man_mc._visible = true;
//Show manual controls
_root.timer_mc._visible = false;
//Hide auto controls
clearInterval(intervalID);
//Clear the interval created from the auto state.
}
}
And the event handlers:
_root.man_mc.dynGo.setChangeHandler("goToImage", _root);//Set the event handler for image jump menu
_root.timer_mc.setTimer.setChangeHandler("selectState", _root);//Set the event handler for auto timer
That's about it. I hope this tutorial will help you in some way. Fell free to drop me an email if you have any questions.
