Loading a Random Image from an XML List

All of the elements of this tutorial exist elsewhere on the Flashandmath.com site, but these other tutorials involve some more complex ideas as well, so they may be unsuitable for someone trying to get a first grasp on the ideas. (To find out more about loading XML files, see Using an External XML File in the Advanced section. To find out more about loading image files, see 3D Menu, Bitmap Fills and Loading External Images in Flash CS3 in the Advanced section.)

Setting up the XML data file

The data file for this application is kept as simple as possible. The goal is to have only the image file names specified in the xml file, so we use the following structure in a file called filelist.xml, available in the Download section at the bottom of this page. Note that the four file names are really URLs, so if they do not reside in the same subdirectory as the swf file we will create, we will have loading errors.

<?xml version="1.0" encoding="utf-8"?>
<imagelist>
<pix>pic1.jpg</pix>
<pix>pic2.jpg</pix>
<pix>pic3.jpg</pix>
<pix>pic4.jpg</pix>
</imagelist>

The ActionScript Code

In this application, there is nothing on the stage at all, so all work will be in the Actions panel. (For the version shown on the previous page of this tutorial, we did resize the stage to be 200 by 200 so that the loaded picture fills the space.) See the comments within the code below for the discussion of what is going on.

We specify the finished size of the pictures we wish to load. This can be omitted if you "size" the pictures properly outside of Flash beforehand. Note that we did have to "size" our pictures to be square ahead of time anyway so that the resizing to 200 by 200 does not skew the pictures. Also, large images take longer to load, so some consideration needs to be given to this issue.

var pHeight:Number = 200;

var pWidth:Number = 200;

We define a URLLoader for the xml data file and a Loader for the image file. Note that the URLLoader is "executed" when the constructor is called, so we don't have to call a load method. The picLoader is declared here so that it has global scope. Finally, we tell Flash to execute the gotList function when the URLLoader has completed its loading of the xml file, so the next bit will be the definition of the gotList function.

var listLoader:URLLoader = new URLLoader( new URLRequest("filelist.xml") );

var picLoader:Loader = new Loader();

listLoader.addEventListener(Event.COMPLETE, gotList);

In the gotList function we get the data from the URLLoader object and cast it as an XML object. Next we get the length of the pix array (created implicitly be the fact that there are several <pix> tags in our xml file) and we let stImages be a random file name from the list of file names in the XML object. Note that since the picLoader is a Loader object, we have to call the load method to have it load the image. Once the load is complete, the gotPic function will be executed, so that definition will be next.

function gotList(evt:Event):void {

var xmlData:XML = XML(listLoader.data);

var numImages:Number = xmlData.pix.length();

var stImage:String = xmlData.pix[Math.floor(numImages*Math.random())].toString();

picLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, gotPic);

picLoader.load( new URLRequest(stImage) );

listLoader.removeEventListener(Event.COMPLETE, gotList);

}

The following function casts the content of the picLoader as a Bitmap object so that we can scale it before adding it as a child of the main timeline. Note that we use scaleX and scaleY to resize the image to be pWidth by pHeight, regardless of its original proportions. This will not always be what you want to do!

function gotPic(evt:Event):void{

var thisBmp:Bitmap = Bitmap(picLoader.content);

 

thisBmp.x = 0;

thisBmp.y = 0;

 

var thisWidth:Number = thisBmp.width;

var thisHeight:Number = thisBmp.height;

 

thisBmp.scaleX = pWidth/thisWidth;

thisBmp.scaleY = pHeight/thisHeight;

 

addChild(thisBmp);

picLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, gotPic);

}

Download

The files used on this page of the tutorial are randomPic.fla, filelist.xml, pic1.jpg, pic2.jpg, pic3.jpg, and pic4.jpg. To save time, you can download the file randompic.zip to get all the source files and sample images for this tutorial.

Back to Basic Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.