Positioning a dynamically loaded image in ActionScript 2.0 and ActionScript 3.0 using the MovieClipLoader class and Loader class

by Peter deHaan on March 3, 2008

in Loader, MovieClipLoader, migration

The following examples show how you can dynamically load an image, calculate its width and height, and center the image on the Stage in ActionScript 2.0 and ActionScript 3.0 using the MovieClipLoader class (ActionScript 2.0) and the Loader class (ActionScript 3.0).

Full code after the jump.

The following example shows how you can load and position an image in ActionScript 2.0 using the MovieClipLoader class and the onLoadInit event handler.

// ActionScript 2.0
var url:String = "http://www.helpexamples.com/flash/images/image2.jpg";
var movieClip:MovieClip = createEmptyMovieClip("movieClip", 0);
 
var listenerObj:Object = new Object();
listenerObj.onLoadInit = function (target_mc:MovieClip):Void {
    target_mc._x = (Stage.width - target_mc._width) / 2;
    target_mc._y = (Stage.height - target_mc._height) / 2;
}
 
var movieClipLoader:MovieClipLoader = new MovieClipLoader();
movieClipLoader.addListener(listenerObj);
movieClipLoader.loadClip(url, movieClip);

The following example shows how you can load and position an image in ActionScript 3.0 using the Loader class and the complete event on the Loader object’s contentLoaderInfo property.

// ActionScript 3.0
var url:String = "http://www.helpexamples.com/flash/images/image2.jpg";
var urlRequest:URLRequest = new URLRequest(url);
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loader_complete);
loader.load(urlRequest);
addChild(loader);
 
function loader_complete(evt:Event):void {
    var target_mc:Loader = evt.currentTarget.loader as Loader;
    target_mc.x = (stage.stageWidth - target_mc.width) / 2;
    target_mc.y = (stage.stageHeight - target_mc.height) / 2;
}

{ 7 comments… read them below or add one }

1 wes 04.11.08 at 10:15 am

Hey guys, this works great when I view the exported swf. but when I put it in an html page on a server, it gets off centered. is this because it’s centering before the image loads? or does it possibly have something to do w/ my embed method?

2 wes 04.11.08 at 10:16 am

btw, i’m using the as2 method

3 Chris 03.17.09 at 1:09 pm

This is great but what if you want to center the image somwhere other than the center of the stage? Say at an x cordinate?

4 Peter deHaan 03.18.09 at 6:34 am

Chris,

Then set the x and/or y property to whatever coordinates you want. I think I randomly chose to position them in the middle of the stage because it was a bit different in ActionScript 2.0 vs ActionScript 3.0.

Peter

5 Dan 04.01.09 at 11:27 am

I am using a button to load an image into a movie clip so how can I use this code to center the image in the movie clip? This code successfully loads the image into the movieclip:

btn1.addEventListener(MouseEvent.CLICK, img1);

function img1(event:Event):void {
var i =new Loader();
i.load(new URLRequest(“paintings/musicroom.jpg”));
ldr1.addChild(i)
}

6 Aleem 09.09.09 at 10:43 pm

Chris,
This is good example but I need to set a preloader with this image and I am confuse how to set it.

regards,
Aleem

7 Supriya Tenany 01.20.10 at 3:22 am

how can i modify the code of AS2 for multiple images display?

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Previous post:

Next post: