Get dynamic image dimensions

[viceversarohan]

Just wondering how I can do this and have access to the values later?

I'm loading an image into a movie clip dynamically, but I need to know its width. I can get it during the call back function for the complete event but how to I access this variable later on? If I trace its host mc's width outside of that function it returns '0' for the width...which I find a little confusing...

thanks in advance!

[Pier25]

var myLoader:Loader = new Loader;

myLoader.contentLoaderInfo.addEventListener(Event. INIT, loaded);

function loaded(e:Event):void{
trace("width: " + e.target.content.width + " height: " + e.target.content.height);
}



That should do it ;)

[viceversarohan]

Thanks Pier25, but how do I access these values in my code later?

[snickelfritz]

assign them to variables.


var imgWidth:Number;
var imgHeight:Number;
var myLoader:Loader = new Loader;
myLoader.contentLoaderInfo.addEventListener(Event. INIT, loaded);

function loaded(e:Event):void{
imgWidth = e.target.content.width;
imgHeight = e.target.content.height;
trace(imgWidth, imgHeight);
}

[viceversarohan]

right...so I can create empty variables before the loaded event happens and then fill them in when the event occurs...and the scope is okay?

That's nice but I didn't think it would work like this! Thanks!!

[viceversarohan]

sorry but if I try to trace these values outside of that function...it returns NaN NaN....

here is my code:


var imageLoader:Loader;
var mapWidth:Number;
var mapHeight:Number;

//define the function that loads the image

function loadImage(url:String):void {
imageLoader = new Loader();
imageLoader.load(new URLRequest(url));
imageLoader.contentLoaderInfo.addEventListener(Eve nt.INIT, getDimensions);
imageLoader.contentLoaderInfo.addEventListener(Pro gressEvent.PROGRESS, imageLoading);
imageLoader.contentLoaderInfo.addEventListener(Eve nt.COMPLETE, imageLoaded);
}

loadImage("assets/bigmap-1.png");


function getDimensions (e:Event):void {
mapWidth = e.target.content.width;
mapHeight = e.target.content.height;
//trace(mapWidth, mapHeight);
}
function imageLoading(e:ProgressEvent):void {

}

function imageLoaded(e:Event):void {
map_mc.addChild(imageLoader);
}

trace(mapWidth, mapHeight);

[luiner]

your trace outside functions is called before init or complete at all so you will never get proper variables in this moment**.

But i expect you are looking for better way:

try
((map_mc.getChildAt(0) as loader).content as Bitmap).width

instead of "((map_mc.getChildAt(0) as loader)" you can use
"imageLoader" if it is still accesable.
Also it could be good for better acces to strip your loader after loading and put there directly bitmap:
function imageLoaded(e:Event):void
{
map_mc.addChild(Bitmap(imageLoader.content));
}

hopefully i did small amout of bugs here :P
Cheers

** - calling loader creates seperated thread which works independetly to your main thread and it reaches your trace before reaching server for file.

[viceversarohan]

hmm AS3 is hard...I need to read up more, thanks for the help guys, but I'm completely lost here.

[Pier25]

sorry but if I try to trace these values outside of that function...it returns NaN NaN....


Of course, you need to trace those values once the event has been triggered = when the data has been received. If you trace it before that your variables will be empty.

[viceversarohan]

Of course, you need to trace those values once the event has been triggered = when the data has been received. If you trace it before that your variables will be empty.

Sorry please excuse my noobness...

but how does tracing do anything? This is more of a general AS3 question now...I'm going through the Kirupa AS3 XML tutorial now too, and it seems as though I am missing something. Does tracing a variable inside of a function somehow give me access to it later? I don't get it.

This code is not related to the original post but its the same principle...


var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();

xmlLoader.load(new URLRequest("xml/myXml.xml"));
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

function LoadXML(e:Event):void {

xmlData = new XML(e.target.data);
Parse(xmlData);

}

function Parse(input:XML):void {

trace(input);

}

Now I understand how everything works...but how do I get access to input outside of Parse()??

Once again thanks for all the help!

[viceversarohan]

Okay, here is my code:


var imageLoader:Loader;
var mapWidth:Number;
var mapHeight:Number;

//LOAD THE MAP

function loadImage(url:String):void {
imageLoader = new Loader();
imageLoader.load(new URLRequest(url));
imageLoader.contentLoaderInfo.addEventListener(Eve nt.INIT, getDimensions);
imageLoader.contentLoaderInfo.addEventListener(Pro gressEvent.PROGRESS, imageLoading);
imageLoader.contentLoaderInfo.addEventListener(Eve nt.COMPLETE, imageLoaded);
}

loadImage("assets/bigmap-1.png");


function getDimensions (e:Event):void {
mapWidth = e.target.content.width;
mapHeight = e.target.content.height;
}

function imageLoading(e:ProgressEvent):void {

}

function imageLoaded(e:Event):void {
_map.addChild(imageLoader);
}

_map.mask = _mask;

//POSITIONING [init]

function matchScreen (element):void {

element.width = myStage.stageWidth;
element.height = myStage.stageHeight;
}

function center (element):void {

element.x = myStage.stageWidth/2;
element.y = myStage.stageHeight/2;
}

function centerMap (element):void {

element.x = myStage.stageWidth/2 - element.width;
element.y = myStage.stageHeight/2 - element.height;

}

matchScreen(_mask);
center(_mask);
centerMap(_map);

//FIRST TRACE
trace(_map.width);

//POSITIONING [resize]

stage.addEventListener(Event.RESIZE, resizeHandler);

function resizeHandler (e:Event):void {

center(_mask);
matchScreen(_mask);

}

_controls._right.addEventListener(MouseEvent.MOUSE _OVER, MoveRight);

function MoveRight (e:Event):void {

var mapX:int = _map.x;
var mapW:int = _map.width;
var ww = myStage.stageWidth;

//SECOND TRACE
trace(mapW);

}

the first trace outputs 0, the second gives the real width of the map, 2582.

Can anyone tell me why?