Home / Tutorials / Navigation / XML Image Slideshow with Preloader /

Flash Tutorials

XML Image Slideshow with Preloader - Page 3

Posted by : webzo on Mar 09, 2008

 

5.0/5

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

Please login to post comments.