How to Load External Images in Actionscript 3.0

Andrew Christensen — Thu, 12 Mar 2009 03:37:12 +0000

Using the flash.display.Loader class in AS3, you can load in external image files to display in flash. The loader class supports loading in JPG, SWF, PNG, or GIF file types. The Loader class sounds more like a loading manager that watches load progress, rather than a display object. Fact is, the Loader is treated as a DisplayObject, so when it’s ready you just add it to the stage. Pretty simple, so let’s get started!

First, you will need to create an instance of the loader class and add a couple event listeners to it. One to watch load progress, and one to watch for when the loading is complete.

1
2
3

var myLoader:Loader = new Loader();
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoaderProgress);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);

You’ll notice that I’m not adding the event listener to the loader instance (myLoader), but instead adding them to a property of myLoader called contentLoaderInfo. The Loader class has a special property that controls all the loading events. This property is an instance of the LoaderInfo class, so we will listen to it for events, rather than our Loader instance.

Next, we will call the Loader.load() method to initiate the loading sequence. You will need to create a new variable that will be an instance of the URLRequest class. This new variable will be passed to the load() method.

1
2
3
4
5
6

Ok, so that’s pretty much it. All that is left is to create our callback methods for each of our eventListeners. Our final code should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var myLoader:Loader = new Loader();
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgressStatus);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderReady);

var fileRequest:URLRequest = new URLRequest("myImage.jpg");
myLoader.load(fileRequest);

public function onProgressStatus(e:ProgressEvent) {
// this is where progress will be monitored
trace(e.bytesLoaded, e.bytesTotal);
}

public function onLoaderReady(e:Event) {
// the image is now loaded, so let's add it to the display tree!
addChild(myLoader);
}

Geek.blog » external images

How to Load External Images in Actionscript 3.0