XML Image Slideshow with Preloader - Page 3
Posted by : webzo on Mar 09, 2008
Code Explanation
var img_xml = new XML();
img_xml.ignoreWhite = true;
img_xml.load("images.xml");
- Load the xml file "images.xml" to the XML object.
var imgArray = new Array();We will populate this array with the paths to the images when the xml finished loading.img_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().
for (i = 1; i < img_xml.firstChild.childNodes.length; i++)
{
_root.imgArray[i - 1] = img_xml.firstChild.childNodes*.attributes.path;
}
Populate the array with the paths to the images.
imgLoader.load( _root.imgArray[0] ); Load the first image using the first path inside the array.
setInterval(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.
setInterval(function name, time in milliseconds);
}
var curImage = 0;
This variable is the current image being displayed. 0 is the first one.
_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.
} else {
Bar._visible = false
}
}
If the image is loaded set the bar visible to false.
function 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.
if (_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.
_root.imgLoader.load( _root.imgArray[curImage] );
}
Load the image with the path in the index "curImage" inside the "imgArray".

no comment
Add comment