JoJo
JoJo

Reputation: 20115

Set dimensions of a loaded image in Flash

How do I set the width and height of a loaded image in Flash? Setting the dimensions immediately after requesting it does not work. The width and height remain zero.

var poster:Loader = new Loader();
Stage.addChild(poster);
poster.load(new URLRequest('http://example.com/image.jpg'));
poster.width = 320;
poster.height = 240;
trace(poster.width); // 0
trace(poster.height); // 0

If I wait a short moment and then set the dimensions, it will work.

I tried listening for the Event.INIT event and Event.COMPLETE events before resizing as suggested by some tutorials. Neither of the events were triggered.

public function theClass() {
    this.poster = new Loader();
    this.poster.contentLoaderInfo.addEventListener(Event.INIT, this.imageLoaded);
    this.poster.contentLoaderInfo.addEventListener(Event.COMPLETE, this.imageLoaded);
    Stage.addChild(this.poster);
    this.poster.load(new URLRequest('http://example.com/image.jpg'));
}

private function imageLoaded(event:Event):void {
    trace('image is loaded');
    this.poster.width = 320;
    this.poster.height = 240;
}

Upvotes: 0

Views: 4355

Answers (3)

jhocking
jhocking

Reputation: 5577

In the listener for Event.COMPLETE is the way to do it, so there must be something wrong in your loader code if that event isn't being triggered. I notice you appear to create a local variable "poster" at the top of the code you posted but don't declare it inside of theClass() but I don't know if that's causing your problem here.

Also, customarily you wait until after the image has completed loading before you add it, but again I don't know if that's causing your problem here.

I mean, I just wrote the following code as a minimal test and it works fine:

public function Main():void {
  var loader:Loader = new Loader();
  loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
  loader.load(new URLRequest("image.png"));
}
private function onComplete(e:Event):void {
  var img:Bitmap = Bitmap(e.target.content);
  this.addChild(img);
  img.width = 100;
  img.height = 100;
}

Upvotes: 4

Adam Smith
Adam Smith

Reputation: 1937

Is the image on a different domain than your swf? If so, and your Event.COMPLETE listener isn't working, it could be due to a security exception. The server with the file must have a crossdomain.xml policy file that allows access to the domain your swf is hosted on, otherwise you won't be able to manipulate the size of the loaded image directly as shown in jhocking's example.

If you know there is a policy file on the server hosting the image (by going to http://site.com/crossdomain.xml and seeing that it allows your domain or a wildcard that covers your domain), then create a loaderContext for your loader to use that sets the checkPolicyFile flag to true:

var context:LoaderContext = new LoaderContext();
context.checkPolicyFile = true;
this.poster.load(new URLRequest('http://site.com/image.jpg'),context);

In your onComplete handler, check Loader.childAllowsParent to see if you have access to the loader content. If so, set the loader.content.width and loader.content.height.

Upvotes: 1

Myk
Myk

Reputation: 6215

It's generally a good idea to add an IOErrorEvent listener to all loads. If there's a problem then this will tell you:

this.poster.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);

function errorHandler(e:IOErrorEvent):void {
trace("Error on load: " + e);
}

If there is a problem in the load process, this is how you catch it.

Upvotes: 0

Related Questions