A common question people ask is how to load multiple external images in Actionscript 3. In AS3 you need to use the Loader and URLRequest classes to load external assets. Firstly, lets start by loading one single image. Loading one image only needs three lines of code.
//Creates a new instance of the Loader class.
//Add the URLRequest call to load the external image.
//And add the loader on the stage.
var loader:Loader = new Loader();
loader.load(new URLRequest('example.jpg'));
addChild(loader);
If you have a large image you may want to wait until the image has finished loading before adding it onto the stage. For this you need to add an 'on complete' event. To use events with the Loader class you need to use a property called 'contentLoaderInfo'.
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
loader.load(new URLRequest('example.jpg'));
function loaded(e:Event):void{
addChild(e.target.content);
}
There are a couple different ways you can load multiple images. The first method loads the external images sequentially by calling the loadImage function every time an image has loaded. When all the image are loaded they get added to the stage.
var imagesArray:Array = new Array('image1.jpg', 'image2.jpg','image3.jpg','image4.jpg');
var loadedArray:Array = new Array();
var counter:int = 0;
function loadImage():void{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
loader.load(new URLRequest(imagesArray[counter]));
}
function loaded(e:Event):void{
loadedArray.push(e.target.content);
if(counter == imagesArray.length-1){
for(var i:uint = 0; i < loadedArray.length; i++){
loadedArray[i].x = 0 + i * 100;
addChild(loadedArray[i]);
}
}
else{
counter++;
loadImage();
}
}
loadImage();
Another method is to load all the image using a For loop. However, a drawback of this method is that the images don't load sequentially.
var imagesArray:Array = new Array('image1.jpg', 'image2.jpg','image3.jpg','image4.jpg');
var loadedArray:Array = new Array();
function loadImage():void{
for(var i:uint = 0; i < imagesArray.length; i++){
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
loader.load(new URLRequest(imagesArray[i]));
}
}
function loaded(e:Event):void{
loadedArray.push(e.target.content);
if(loadedArray.length == imagesArray.length){
for(var i:int = 0; i < loadedArray.length; i++){
loadedArray[i].x = 0 + i * 100;
addChild(loadedArray[i]);
}
}
}
loadImage();
