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 · 7 Comments

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 Responses to Positioning a dynamically loaded image in ActionScript 2.0 and ActionScript 3.0 using the MovieClipLoader class and Loader class

wes says:

April 11, 2008 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?

Reply
wes says:

April 11, 2008 at 10:16 am

btw, i’m using the as2 method

Reply
Chris says:

March 17, 2009 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?

Reply
Peter deHaan says:

March 18, 2009 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

Reply
Dan says:

April 1, 2009 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)
}

Reply
Aleem says:

September 9, 2009 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

Reply
Supriya Tenany says:

January 20, 2010 at 3:22 am

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

Reply