Week 8 - Building XML & Flash Objects


Learning Objectives for this Section:

Building a Flash Random Image loader
Stopping a Key logger


Lecture:

In keeping with the photo concept this week we will build a photo loader. Again we are using AS 2 for this tutorial. This tutorial will show you how to create random images that are loaded from external sources, XML file.

First of all, the tutorial consist of several files:

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:

<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'.
Free Flash Tutorials, XML, Random Images Slideshow

Put this movie clip on top left corner of the document, and name the instance 'picture_mc'.
Free Flash Tutorials, XML, Random Images Slideshow

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

pauseTime = 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.


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;

Here is the zip file for you to check out.