I am trying to attach some of my actionscript class, inherited from Sprite, to my Flex application by attaching it to a UIComponent, then add UIComponent to a panel. However, the size of my Sprite class appears to be larger than the panel. So, I try to resize it using DisplayObject.scale property, but I need to know the size of my container. Since I try to make my code reusable, I figure that I should let my Sprite class handle the resize by getting it via its parent property (let's say, I can resize it by set

this.scaleX = this.parent.Width/this.width or something like this)

However, my Sprite class's parent, which is the UIComponent, has width/height of 0. So, my question is: 1) Is there any better way to resize DisplayObject class to fit its container when attached to Flex object? 2) If you know, why my UIComponent's size remain 0 and my DisplayObject still appears at its full size?

Here's my code, using Flash Builder 4:

private var loader:Loader = new Loader();
private function testLoader():void {
  var urlRequest:URLRequest = new URLRequest("http://localhost/welcome.png");
  loader.load(urlRequest);
  loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoaderLoadComplete);
}

private function onLoaderLoadComplete(e:Event):void {
  loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,onLoaderLoadComplete);
  var ui : UIComponent = new UIComponent();
  ui.addChild(loader);
  panelTest.addElement(ui);
  trace("ui.width = " + ui.width);
  trace("ui.height = " + ui.height);
  trace("loader.width = " + loader.width);
  trace("loader.height = " + loader.height);
  trace("panelTest.width = " + panelTest.width);
  trace("panelTest.height = " + panelTest.height);
}

And this is the result when run:

ui.width = 0
ui.height = 0
loader.width = 571
loader.height = 411
panelTest.width = 480
panelTest.height = 320