Dynamic Image resizing

Question

In my flex app there's an item renderer for a TileList that I am using. I load the image into the Item Renderer at runtime. I am using the following code to resize the image width and height. But it doesn't seem to be working. I debugged the flex app and find that the actual width and height values are getting assigned. But the image never looks the right size. Here's my code:

    private function Init() :void
{
 tileImg = new Image();
 tileImg.source = data.ICON;
 tileImg.toolTip = data.TITLE;
 tileImg.buttonMode = true;
 tileImg.addEventListener(Event.COMPLETE, AdjustImageDimensions); 
 this.addChild(tileImg);
} 

private function AdjustImageDimensions(e:Event):void
{ 
 tileImg.width = (e.currentTarget as Image).contentWidth; 
 tileImg.height = (e.currentTarget as Image).contentHeight;
}

Answer 1

The value of contentWidth and contentHeight properties are not final when the complete event is triggered. You can get the value after the updateComplete event is triggered.

Answer 2

Ok, I had a problem just like this the other day and I fixed it by using the Loader class. You can grab the information after the file has been loaded. You need an event listener attached to the loader as well. Where are you getting the image from anyways? A URL or a FileSystem?

Here is a quick example:

package

{ import flash.display.Loader; import flash.events.Event; import flash.net.FileReference;

import mx.controls.Image;

public class MyItemRenderer
{
 private var fileRef:FileReference = new FileReference();
 private var myLoader:Loader = new Loader();
 public var myDynamicImage:Image;

 public function MyItemRenderer()
 {
  fileRef.addEventListener(Event.SELECT, loadImageToCache);
  fileRef.addEventListener(Event.COMPLETE, sendToLoader);

  fileRef.browse( /* put file types in this array */ );
 }

 private function loadImageToCache(e:Event):void
 {
  fileRef.load();
 }

 private function sendToLoader(e:Event):void
 {
  myLoader.loadBytes(fileRef.data);
  myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, createImage);
 }

 private function createImage(e:Event):void
 {
  var file:Loader = Loader(e.target);

  myDynamicImage = new Image();
  myDynamicImage.source = file;
  myDynamicImage.width = file.width;
  myDynamicImage.height = file.height;
 }
 //now that would be great if you can control the width and height 
 //of these images at runtime, BUT, 
 //chances are if their dynamically loaded, you can't so here...

 private function getImgAR(file:Loader):Number
 {
  return file.width/file.height;
 }

 //then use this createImage function instead...

 /*

 private function createImage(e:Event):void
 {
  var file:Loader = Loader(e.target);
  myDynamicImage = new Image();
  myDynamicImage.source = file;
  myDynamicImage.width = 120*getImgAR(file); //you can substitue 120 for your required size
  myDynamicImage.height = 120;//same here
 }

 */
}

}

hope that helps