In ActionScrirpt 3.0 the way to load external media content like images or .swf files is to use the Loader class. The instance of this class is a DisplayObject too (actually a DisplayObjectContainer) which loads the content inside it and has to be added to display list to be viewed, just like any other DisplayObject.
The way you have to load the external content is a little bit different in AS3 using the Loader class than in AS2, using the well known MovieClip.loadMovie() method or loadMovieNum(). It resembles more on using the MovieClipLoader class from AS2.
Here is an example. If you want to load an image called flower.jpg and display it, here’s what you have to do:
- - create the loader object:
var loaderObject:Loader = new Loader(); - - set the coordinates:
loaderObject.x = 150;
loaderObject.y = 45; - - add the loader to the display list:
addChild(loaderObject);
At this point, anything you load inside it will be visible on the stage. If you would load the content without adding the loader object to the stage, there wouldn’t be anything displayed until the addChild() method call.
- - you need to create a URLRequest object which is based on the URL of the content itself:
var request:URLRequest = new URLRequest("flower.jpg"); - - now you can instruct the Loader instance to load the image:
loaderObject.load(request);
You could use a shortcut and combine the previous two lines into a single line of code:
loaderObject.load(new URLRequest("flower.jpg"));
Sometimes the content you want to load has a larger size than the stage or the area where you want to display it. So, you’ll have to resize the loader. Doing it write after the load() method call would result in not displaying anything, even if the content has been successfully loaded. This is because the loader gets resized after the load() method but before the content gets fully loaded (especially if it has a larger file size).
The solution for this problem is to always resize the Loader object after the content has completely loaded. To do this, you need to listen for the event the loader dispatches when it finishes loading the content: Event.COMPLETE:
loaderObject.contentLoaderInfo.addEventListener(Event.COMPLETE, resizeLoader);
function resizeLoader(evtObj:Event):void {
loaderObject.width = 400;
loaderObject.height = 300;
}
I tried it, but the image loaded is still displaying with the original size. I have no idea about it.
@june_zhuhui
Try debugging the problem. First trace out the initial size of the Loader instance after it completely loaded the content, change the size of the content and then trace out the new size again to see if there’s any change. Normally it should work so I don’t really see what the problem could be.
I have solved the problem. Thank you.
But, I need to change the code below:
loaderObject.addEventListener(Event.COMPLETE, resizeLoader);
to
loaderObject.contentLoaderInfo.addEventListener(Event.COMPLETE, resizeLoader);
@june_zhuhui
Thanks for noticing that. Indeed you need to add the listener to the contentLoaderInfo object and not directly to the loader object. I corrected the code. Thanks again.
The fun part is trying to get the loaded swf object to communicate with the loader swf object and vice versa.
To call a function of the loader object from the loaded object, you can do this:
var parentObject:Object = this.parent.parent as Object;
//now call a method in the loader
parentObject.test();
However, how do you read/write variables in the loader?
so if the loader has a variable: var testVar:String = “hello”;
How can I change it to “goodbye” from the loaded swf?
If you can answer that, you are a genius. Thanks
try this:
MovieClip(this.parent.parent).testVar = “goodbye”
Thanks for this. The solution to this problem is not as intuitive as one would think.
try this: MovieClip(loader.content).var = “bye bye”;
Thanx!! It solved all my problems!!
Hi, I know that this is an old post. But your last tip helped me a lot (:
Thanks!
Now I have a little doubt. What if I want to reset width and height in percentages? Do you know how can I do these? I want to display it and adjust in fullscreen mode. Can I do that?
Thanks again and in advance.
@Jorge
The size for display objects is always expressed in pixels. So you must always specify the width and height of the loader in pixels.
To use percentages, you need to make the math yourself, meaning that you need to calculate the new size (width and height values) in pixels according to the percentages you need. So, for example if you want to set the width to 60% (of the loader’s container or stage width or whatever reference point you have), you need to calculate the corresponding width in pixels and then set the loader’s width property.
You could create your own loader class that extends the existing Loader class and add it two more parameters for size that accept the size as percentages. It shouldn’t be so hard. You just need to pay attention to the math behind it.
I hope this helps.
Thanks a lot,,, it worked :)
Add A Comment