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: <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: 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; Well, that's all the tutorial, I hope you enjoy it and happy coding! Retrieve Data From XML File XML files are a great option to customization in flash; you can simply create a XML and tell your movie to load variables from it.Let's say you want to create a movie that randomly loads one of three images. But you think that later you may want to add more images or change their path, so you need a XML file. That's what we are going to do is this tutorial. First create the xml file: <xml> <images> <a title = "pic1.jpg" /> <b title = "pic2.jpg" /> <c title = "pic3.jpg" /> </images> </xml> You can add many more child nodes to <images> as long as you have those images inside the folder.

Save the xml as "images.xml" and create a button in your project. Give it the instance name of "ranImage" and open the actions for the first frame. Paste this code: var images = new XML(); images.ignoreWhite = true; images.load("images.xml"); ranImage.onRelease = function() { var images_paths = _root.images.firstChild.firstChild.childNodes; var ran = Math.round(Math.random() * (images_paths.length - 1)); _root.createEmptyMovieClip("holder", 1); loadMovie(images_paths[ran].attributes.title, "holder"); _root.holder._xscale = 50; _root.holder._yscale = 50; } //Here we declare a new XML object var images = new XML() //Sometimes white spaces in a xml file can cause problems so we tell our XML object to ignore them images.ignoreWhite = true; //load() function, loads our .xml images.load("images.xml"); Here we declare a variable that corresponds to the child nodes of the <images> node in the xml file. var images_paths = _root.images.firstChild.firstChild.childNodes; Now we get a random number between 0 and the length of the images_paths array minus 1. var ran = Math.round(Math.random() * (images_paths.length - 1)) Create a holder Movie Clip. _root.createEmptyMovieClip("holder", 1); Load the image. loadMovie(images_paths[ran].attributes.title, "holder"); Title is an attribute of this node, so we need to call it like this inside our code: (node).attributes.title Scale the image. _root.holder._xscale = 50; _root.holder._yscale = 50; Try to add more images to the xml; you will notice that they will work exactly as they should. This could also be very useful to create dynamic slideshows.