XML Image Slideshow with Preloader
| Category | : Flash | Views | : 49558 | ||
| Version | : 8 | Rating | : | ||
| Type | : Text | Source File | : xml-image-slideshow-with-preloader.zip | ||
| Result | : See the result | ||||
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[i].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".
 |
 |
 |
 |
 |
Video tutorial: Forex trading
Sponsors
