An Applet and the Code

In this simple example, we show how to use the Loader class to load a sequence of images at runtime at consecutive clicks of a button. We show how to instantiate the Loader class, add all the necessary listeners, and display load progress.

Download

You can find a simpler version of the applet, in which only one image is loaded, at: How To Load an Image at Runtime in AS3 and Display Load Progress.

The Code

We load images called space1.jpg, space2.jpg, space3.jpg, space4.jpg. The image files are located in the same directory as the fla file for the applet, htseqload.fla, but more importantly, the image files will be located in the same directory on the server as the swf and html files corresponding to this applet. That is why, within 'doLoad' function, we pass the local addresses "space1.jpg", "space2.jpg", etc. to the URLRequest. If the file is not in the same directory, you pass the corresponding local addresses of your image files on your server to the URLRequest. Loading from remote domains may cause Flash Player security errors. We do not try to catch security errors in this How-To.

In htseqload.fla, we created on the Stage some static text and a dynamic TextField with the instance name 'infoBox'. In this field, we display messages to the user about loading. We also created on the Stage a button with the instance name 'btnLoad'.

Now, the code. We create an instance of the AS3 Loader class and store the instance in a variable called, in our case, 'loader'. The simplest way to add loaded content to the Display List, is to add 'loader' itself to the Display List. We make it a child of the MainTimeline ('this' stands for the MainTimeline.)

We store addresses of the image files in an Array, picsArray. (If you write for Flash Player 10, you would use
Vector.<String> instead of an Array.) As the user clicks on the button, we loop through picArray and pass the corresponding address to loader.load(...) method.

 

var loader:Loader =new Loader();

this.addChild(loader);

loader.x=65;

loader.y=70;

 

//The Array of addresses of the image files to be loaded. In our

//case, the files will be placed in the same directory on our server

//as the swf and html files corresponding to this applet.

//Thus, each address is simply the name of the corresponding file.

 

var picsArray:Array=["space1.jpg","space2.jpg","space3.jpg","space4.jpg"];

var numPics:int=picsArray.length;

var nextPic:int=0;

 

//Note: listeners are added to the contentLoaderInfo property of 'loader'

//and not to 'loader' itself.

 

loader.contentLoaderInfo.addEventListener(Event.COMPLETE,doneLoad);

 

//If you don't expect loading errors and do not care to display

//loading progress, you don't need the next two listeners.

 

loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,loadingError);

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,updateInfo);

 

btnLoad.addEventListener(MouseEvent.CLICK,doLoad);

 

//We call the function that loads the first image.

 

loadInitImg();

 

function doLoad(e:MouseEvent):void {

loader.load(new URLRequest(picsArray[nextPic]));

infoBox.visible=true;

infoBox.text="Loading starts...";

 

//We disable the button during loading.

 

btnLoad.mouseEnabled=false;

}

 

function updateInfo(e:ProgressEvent):void {

infoBox.text="Loading: "+String(Math.floor(e.bytesLoaded/1024))+" KB of "+String(Math.floor(e.bytesTotal/1024))+" KB.";

}

 

function loadingError(e:IOErrorEvent):void {

infoBox.text="There has been an error loading the image. The server may be busy. Refresh the page and try again.";

loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,doneLoad);

loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS,updateInfo);

loader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR,loadingError);

}

 

function doneLoad(e:Event):void {

infoBox.text="";

infoBox.visible=false;

 

//If the number of the next image exceeds the number of images,

// nextPic=0, and we go back to the beginning of our picsArray.

 

nextPic=(nextPic+1)%numPics;

btnLoad.mouseEnabled=true;

}

 

function loadInitImg():void {

loader.load(new URLRequest(picsArray[nextPic]));

infoBox.visible=true;

infoBox.text="Loading starts...";

btnLoad.mouseEnabled=false;

}

 

Comments

If you want to load many images concurrently rather than consecutively, we recommend our custom ImageLoader classs: 3D Menu on a Cube with Perspective.

For comments on Flash Player security see: 3D Card Flips with Tweens in Flash CS4 and CS3.

The image of the outer space that you see in the applet above is courtesy of NASA: NASA multimedia collection.

Back to AS3 How To and Tips              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.