Shuffling Images Loaded from an XML List

Another effect that uses these ideas is the random placement on a page of a list of images. This can be used to create a random tiling or to "scramble" images at the start of a game or puzzle. It is also an easy adaptation to make the application choose a random subset of the total set of available images. This simple change is pointed out in the code comments below.

Refresh your browser window to see a random arrangement of the four images (by Jess Ensley) whose names are specified in an external xml file

Setting up the XML data file

The data file for this application is exactly the same as it was (and still called called filelist.xml) on the previous page. Note again 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. We repeat the contents of the file below for ease of reference. The file itself is available in the Download section at the bottom of this page.

<?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

As in the previous example, there is nothing on the stage in this application, so all the work will be in the Actions panel. The file with this code already in place is shufflePix.fla, available in the Download section at the bottom of this page.

We begin by specifying 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.

var pHeight:Number = 200;

var pWidth:Number = 200;

As in the previous example, we use a URLLoader for the xml data file, but here we also set up an array of Loaders for the images and an array of Bitmaps for the pictures themselves once loaded. We also declare the variable numImages so that it will be global in scope when we need it.

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

var arrPicLoaders:Array = new Array();

var arrPicList:Array = new Array();

var numImages:Number

Once the XML file is loaded, the function goList will be executed. This function first puts the data into an XML object and defines a variable numImages for the number of items in the pix array. The arrShuffled array holds a random arrangement of the numbers 0, 1, 2, ..., numImages - 1, thanks to the shuffleList helper function that is defined below the gotList function. We use this random array to create another array (arrPicLoaders) containing Loader objects, each of which calls the gotPic function when its loading is complete. We will address the details of the gotPic function below.

listLoader.addEventListener(Event.COMPLETE, gotList);

 

function gotList(evt:Event):void {

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

numImages = xmlData.pix.length();

var arrShuffled:Array = shuffleList(numImages);

var stImage:String;

for (var i=0; i<numImages; i++) {

stImage = xmlData.pix[arrShuffled[i]].toString();

arrPicLoaders[i] = new Loader();

arrPicLoaders[i].contentLoaderInfo.addEventListener(Event.COMPLETE, gotPic);

arrPicLoaders[i].load( new URLRequest(stImage) );

}

listLoader.removeEventListener(Event.COMPLETE, gotList);

}

The helper function shuffleList takes an input n and returns an array containing the numbers 0, 1, 2, ..., n - 1 in random order. We accomplish this by starting with an array with the numbers in order and randomly remove elements from the starting array and place them in order into the ending array, which is returned when the process is complete. To choose a random subset of the images, just change the "n" in the second for loop to be the smaller number of images you wish to be returned. (The same value should be used in the declaration of endList on the third line below.)

function shuffleList(n:Number):Array {

var startList:Array = new Array(n);

var endList:Array = new Array(n);

var i,j:Number;

for (i=0; i<n; i++) {

startList[i] = i;

}

for (i=0; i<n; i++) {

j = Math.floor(Math.random()*startList.length);

endList[i] = startList.splice(j,1)[0];

}

return(endList);

}

The gotPic function is called when the "load" is complete for each image file. Its job is to get the content of the file as a Bitmap object, scale it properly (as addressed on the previous page), and place it into an array of bitmaps. When the array of bitmaps is finally the same size as the number of images (numImages) in the original XML list, we call a function that places the Bitmap objects onto the stage.

function gotPic(evt:Event):void {

var thisBmp:Bitmap = Bitmap(evt.target.content);

var thisWidth:Number = thisBmp.width;

var thisHeight:Number = thisBmp.height;

thisBmp.scaleX = pWidth/thisWidth;

thisBmp.scaleY = pHeight/thisHeight;

arrPicList.push(thisBmp);

if (arrPicList.length == numImages) {

placePictures();

}
}

The placement of the images is based on division and remainders so that it could be generalized in the future. Specifically, the first "2" below dictates the number of columns and the second "2" dictates the number of rows. Once the position is determined, the addChild method places the Bitmap object onto the main timeline.

function placePictures():void {

for (var i=0; i<arrPicList.length; i++) {

arrPicList[i].x = pWidth*Math.floor(i/2);

arrPicList[i].y = pHeight*(i%2);

addChild(arrPicList[i]);

}

}

Download

The files used on this page of the tutorial are shufflePix.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.