XML Random Image Slideshow
| Category | : Flash | Views | : 37716 | ||
| Version | : 8 | Rating | : | ||
| Type | : Text | Source File | : xml-random-image-slideshow.zip | ||
| Result | : See the result | ||||
Code Explanation
The code is divided in 4 part: Load XML, put XML data into variable, show the random images, pause / delay while viewing.
xmlImages = new XML();
xmlImages.ignoreWhite = true;
xmlImages.onLoad = loadImages;
xmlImages.load("images.xml");
This code will load 'images.xml' file that we create earlier into xmlImages variable. xmlImages is XML object that we create in the first line of the code.When we load XML data into 'xmlImages', we call 'loadImages' function, line 3 of code.
Then, in the line 4, we pass 'images.xml' value to our 'loadImages' function that we called earlier on line 3.
function loadImages(loaded) {
if (loaded) {
xmlFirstChild = this.firstChild;
imageFileName = [];
totalImages = xmlFirstChild.childNodes[0].childNodes.length;
for (i=0; i<totalImages; i++) {
imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
}
randomImage();
}
}
This code is used to put XML data into variables. The variables that we create are: 'imageFileName' (array) and 'totalImages'.'imageFileName' is an array and is used to store all the pictures filename that we want to display. You can create an array variable by using '[]' for the value of the variable. This variable is still empty because we don't fill the value just yet.
As for the 'totalImages', we fill the value with the total child nodes in the XML file (images.xml). You can get the total nodes by adding properties '.length' at the end of the nodes.
After we have got the total images that are in our XML file, we can now fill in 'imageFileName' variable. The code to fill in the variables is:
for (i=0; i<totalImages; i++) {
imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
}
The reason we have to get variable 'totalImages' first is because we need it in order to fill 'imageFileName' variable. And because 'imageFileName' is an array, we have to fill ALL filename into this array variable by using 'for' statement.The last thing we do after we create all the variables is calling the 'randomImage' function.
function randomImage() {
if (loaded == filesize) {
var ran = Math.round(Math.random() * (totalImages - 1));
picture_mc.loadMovie(imageFileName[ran], 1);
pause();
}
}
The purpose of 'randomImage' function is to call images that are already in 'imagesFileName' variable randomly. To do this, we have to first generate random number that are in our total images range. It doesn't make sense to load the images that we don't have, so we will use 'totalImages' variable to generate the random number.
var ran = Math.round(Math.random() * (totalImages - 1));
The 'Math.random' function is used to generate random number.The reason we use 'totalImages - 1' is because our 'totalImages' variable is not index based variable. It only contains one number, which is the number of total images. We need index-based number (start with 0) because we will combine this random number to call our 'imageFileName' array variable.
picture_mc.loadMovie(imageFileName[ran], 1);
This code is to load and display the picture to visitors. We use 'imageFileName[ran]' to refer to our picture filename in 'imageFileName'. Since 'ran' will be random number, the output of 'imageFileName' will also be random. This way, we get random image out of our images collection.After we display the picture, we will need to make a little pause so that visitors can see our pictures. For this purpose, we create and call pause() function.
function pause() {
pauseInterval = setInterval(pause_slideshow, pauseTime);
function pause_slideshow() {
clearInterval(pauseInterval);
randomImage();
}
}
To pause the image shown, we use 'setInterval' statement. 'setInterval' statement needs two attributes: the function to call after the pause (interval) and the pause (interval) time.We call 'pause_slideshow()' function after the pause which will clear the interval and call 'randomImage()' function again. This will repeat the process of random image.
As for the 'pauseTime', this is the pause time that we need to show the picture to visitors. The 'pauseTime' variable can be found on very top of the code where it says:
pauseTime = 2000;
Well, that's all the tutorial, I hope you enjoy it and happy coding!
 |
 |
 |
 |
 |