DOWNLOAD SOURCE FILE FOR THIS TUTORIAL

Posted by webzo

This tutorial will show you how to create random images that are loaded from external sources, XML file. This tutorial is based on "Retrieve Data from XML file". You will need to have basic understanding about XML and how to load it into Flash document before start this tutorial.

First of all, the tutorial consist of several files:
- XML file

- Pictures files

- Flash file

XML file is xml document that list all the pictures that you want to load. The XML file is included in the source code if you download it. Here's how the XML file looks like:

Code: Select all<xml>
<images>
<a title = "pic1.jpg" />
<b title = "pic2.jpg" />
<c title = "pic3.jpg" />
</images>
</xml>

Please note that the pictures filename in XML file has to match the pictures files that you have. Otherwise, the code will not be able to load the pictures.
If you don't have this XML file yet, you can easily create one. Just open up your text editor (Notepad) and copy and paste the above text to your text editor. You can write XML with any text editor. One thing that you have to remember is to save it with UTF-8 encoding.

Pictures files are files that you want to load. The pictures' filename don't have to be 'pic1.jpg' or 'pic2.jpg'. You can use whatever the name you want. However, if you use another name, you have to change the XML file accordingly.

Flash file is Flash document that we will write. We don't have this file yet, but we will go ahead and create one.
Open up your Flash and create a new Flash document.

Create the document size as big as you want. I recommend to create the document size as big as the picture size. You can change the document size by going to menu 'Modify > Document'.

Next, create a new symbol ('Insert > New Symbol' or CTRL + F8). Name this new symbol 'pictureMC' and change the type to 'Movie Clip'.



Put this movie clip on top left corner of the document, and name the instance 'picture_mc'.



Now, click on the first frame of 'Layer 1' and open up the 'Actions' window ('Windows > Actions' or 'F9') and paste in this code:

Code: Select allpauseTime = 2000;

xmlImages = new XML();
xmlImages.ignoreWhite = true;
xmlImages.onLoad = loadImages;
xmlImages.load("images.xml");

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();
}
}
function randomImage() {
if (loaded == filesize) {
var ran = Math.round(Math.random() * (totalImages - 1));
picture_mc.loadMovie(imageFileName[ran], 1);
pause();
}
}
function pause() {
pauseInterval = setInterval(pause_slideshow, pauseTime);
function pause_slideshow() {
clearInterval(pauseInterval);
randomImage();
}
}

Code Explanation

The code is divided in 4 part: Load XML, put XML data into variable, show the random images, pause / delay while viewing.

Code: Select allxmlImages = 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.

Code: Select allfunction 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:

Code: Select allfor (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.

Code: Select allfunction 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.

Code: Select allvar 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.

Code: Select allpicture_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.

Code: Select allfunction 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:

Code: Select allpauseTime = 2000;

Well, that's all the tutorial, I hope you enjoy it and happy coding!