How to Load External Images in Actionscript 3.0
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 | 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); |
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); } |
Thanks. Don’t take this down yet!
I don’t plan on taking it down anytime soon
I am wondering this, as i sit here working on this.
what if i wanted to use xml and?or local connection to load these images? to make them more dynamic.
how could we add that functionality?
Chad,
This tutorial shows how to load images using the Loader class. The matter of how you get the URL for the image(s) to load is up to you. In the example above I have the URL for the image hard coded. You could use XML or other methods to obtain the URL string for the image to load.
You can learn how to load XML here:
http://blog.728media.com/2008/06/23/loadingand-parsing-xml-in-actionscript-3-part-1/
Also, here are a few great tutorials on loading/parsing XML:
http://www.gotoandlearn.com/play?id=64
http://www.gotoandlearn.com/play?id=65
Seems like a mistake in the line –
var fileRequest:URLRequest = new URLRequest(“myImage.jpg”);
URLRequest needs a URL format, so even a local file needs to be
file:///User/username/path/myImage.jpg
ibarra,
That is not correct. If no directory is provided, it will determine and start in the root folder for the file. In the case of the Flash IDE, this would be the swf publish directory. In the case of the web browser and an html file that has your swf embedded, it will be the html directory.
For this reason of the double standard, I either only test through Flex Builder and a web browser, or I put a check for flash.system.Capabilities.playerType and add the appropriate string to the front of it.
Hope that makes sense.
Pertaining to the article:
I was also going to suggest that if you need to load more than one image, I prefer to store the images in some sort of array at the time each image gets loaded in. If you add directly to the stage without storing a reference anywhere else, you’ll be forced to use getChildAt(in) every time you need to access your image again. For multiple images, arrays can be helpful for looping through them in a slideshow style manner.
In your onLoaderReady function, is there a way to get the myLoader object back out of the argument e? For my purposes, I’d prefer to set up and run the loader object within a function, and not have to refer to another object that is outside the function’s scope…
Thanks for posting this and keeping this up… I’m just getting around to learning AS 3 now, and I’m finding this blog very helpful.
Greg,
Yup, you can get the loader object by calling e.target. The LoaderInfo object that fires the event passes the loader instance as the target.
Just noticed a bit of a typo. In the first set of code, the callback function for contentLoaderInfo PROGRESS event is “onLoaderProgress”, but in the second and third code blocks, you’ve named this function, “onProgressStatus”
ok, the second callback function also changes names. It’s first called, “onLoaderComplete” and later named, “onLoaderReady”
I was not able to get this working.. I opened a blank AS3 fla and added the code put my image in the same directory with the fla and swf and nothing happens. I also seem to be getting a compile error messsage saying that :
1114: The public attribute can only be used inside a package.
public function onLoaderReady(e:Event) {
update to my last post after removing the “public” declaration it worked.
Wonderful!
I am find to it very long time.
Working perfect, thank again..
hi, thanks for sharing this article. I was searching for this solution and helped me this exactly what i wanted….