this tutorial will show you how to create random images that are loaded from external sources

7/29/2019 This Tutorial Will Show You How to Create Random Images That Are Loaded From External Sources

1/5

This tutorial will show you how to create random images that are loaded from external sources, XML file. Thistutorial 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 filePictures 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 sourcecode if you download it. Here's how the XML file looks like:

Please note that the pictures filename in XML file has to match the pictures files that you have. Otherwise, thecode 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 toremember 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 fileaccordingly.

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'


2/5

Now, click on the first frame of 'Layer 1' and open up the 'Actions' window ('Windows > Actions' or 'F9') andpaste 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


3/5

The code is divided in 4 part: Load XML, put XML data into variable, show the random images, pause / delaywhile 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


4/5

make sense to load the images that we don't have, so we will use 'totalImages' variable to generate the randomnumber.

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) becausewe 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:

You can add many more child nodes to as long as you have those images inside the folder.


5/5

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 .xmlimages.load("images.xml");

Here we declare a variable that corresponds to the child nodes of the 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.

this tutorial will show you how to create random images that are loaded from external sources

Documents