DOWNLOAD THE SOURCE FILE FOR THIS TUTORIAL

Posted by webzo



We are going to make a simple slideshow that loads images and sets the time between slides from an xml file.

Create a new Movie Clip called "Bar", this is going to be our progress bar between slides.

Draw a bar like this:



Drag the Movie Clip to the stage and set the instance name to "Bar".

Now drag a loader component and make it the same size of the stage. Instance name "imgLoader".



Create an xml file in the notepad that looks like this (remember that the XML file has to be in UTF-8 encoding):

Code: Select all<xml>
// the time between slides
<interval time = "2000" />

//path to the first image.
<image path = "1.jpg" />

//you can put as much images as you want.
<image path = "2.jpg" />
<image path = "3.jpg" />
<image path = "4.jpg" />
<image path = "5.jpg" />
</xml>

And save it with the name "images.xml" in the same folder your project.

Go back to the flash, open the actions for the first frame and paste this:

Code: Select all//new XML object to load our xml file
var img_xml = new XML()

//ignore white to prevent problems
img_xml.ignoreWhite = true;

//load the xml
img_xml.load("images.xml");

//new array to store the path to the images
var imgArray = new Array();

//when the xml load this is called
img_xml.onLoad = function()
{
//get the timer from the first node of the xml file
var slideTimer:Number=Number(img_xml.firstChild.firstChild.attributes.time);

//loop for the number of nodes inside the xml
for (i = 1; i < img_xml.firstChild.childNodes.length; i++)
{
//populate the imgArray with the images
_root.imgArray[ i - 1] = img_xml.firstChild.childNodes[ i ].attributes.path;
}

//loads the first image inside the loader component
imgLoader.load( _root.imgArray[0] );

//"setInterval" to call the function "nextImage" every 2
//secs if slideTimer is equal to 2000 milliseconds
setInterval(nextImage, slideTimer);
}

//the current image is 0, the first.
var curImage = 0;

_root.onEnterFrame = function()
{
//if the image isn't 100% loaded
if (imgLoader.percentLoaded != 100)
{
//Bar is visible
Bar._visible = true

//and scale it by the percentage loaded
Bar._xscale = imgLoader.percentLoaded
} else {
//if the image is completely loaded
//the Bar needs to be invisible.
Bar._visible = false
}
}

//called by "setInterval"
function nextImage()
{
//increases current image by 1.
_root.curImage++

//if curImage is the last image then
//go back to the first one
if (_root.curImage == _root.imgArray.length)
{
//first image
_root.curImage = 0;
}

//loads the new image using the path in the imgArray.
_root.imgLoader.load( _root.imgArray[curImage]);
}

Done, test your code. To see the progress bar working use the "Simulate Download" option on the flash debugger.

Code Explanation

Code: Select allvar img_xml = new XML();
img_xml.ignoreWhite = true;
img_xml.load("images.xml");

Load the xml file "images.xml" to the XML object.

Code: Select allvar imgArray = new Array();

We will populate this array with the paths to the images when the xml finished loading.

Code: Select allimg_xml.onLoad = function()
{
var slideTimer = Number(img_xml.firstChild.firstChild.attributes.time);

Get the attribute of the first node on the xml file and transform that attribute in a number using the Number(string) function.
We need this to be a number because we will use it on our setInterval().

Code: Select allfor (i = 1; i < img_xml.firstChild.childNodes.length; i++)
{
_root.imgArray[i - 1] = img_xml.firstChild.childNodes[ i ].attributes.path;
}

Populate the array with the paths to the images.

Code: Select allimgLoader.load( _root.imgArray[0] );

Load the first image using the first path inside the array.

Code: Select allsetInterval(nextImage, slideTimer);

The function setInterval calls another function every x milliseconds. In our case it will call the function "nextImage" every 2 seconds if slideTimer equals 2000 milliseconds.

Code: Select allsetInterval(function name, time in milliseconds);
}
var curImage = 0;

This variable is the current image being displayed. 0 is the first one.

Code: Select all_root.onEnterFrame = function()
{
if (imgLoader.percentLoaded != 100)
{
Bar._visible = true
Bar._xscale = imgLoader.percentLoaded

If the image is not completely loaded set the bar visibility to true and scale the bar using the percentage loaded.

Code: Select all } else {
Bar._visible = false
}
}

If the image is loaded set the bar visible to false.

Code: Select allfunction nextImage()
{
_root.curImage++;

Increase the "curImage" variable by one. The new value will be the image we need to load if it is not the last image.

Code: Select allif (_root.curImage == _root.imgArray.length)
{
_root.curImage = 0;
}

Set "curImage" to 0 if it's equal to the length of the "imgArray" because we would be displaying the last image and we need to loop to the fist one.

Code: Select all _root.imgLoader.load( _root.imgArray[curImage] );
}

Load the image with the path in the index "curImage" inside the "imgArray".