Finding the width of a component

Question

I'm using the file below to load a series of images into a container named containerSprite. The size of each image will vary and I want to be able to calculate the width of the container so I can place navigation buttons relative to the position of containerSprite. My code does not work when the first image is loaded-- when I use trace("WIDTH="+containerSprite.width) I get 0 the first time through.
How or where should I set up an event listener that will fire only when the image has finished loading.
Thanks for helping me think through this process.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()" >
    <mx:Script>
        <![CDATA[
            import mvc.SlideShowTextView;
            import flash.display.*;
            import flash.events.*;
            import flash.net.URLRequest;
            import mvc.SlideShowModel;
            import mvc.SlideShowView;
            import mvc.Model;
            import mvc.View;
            import flash.text.TextField;
            private var slideModel:SlideShowModel;
            private var slideView:SlideShowView;
            private var textView:SlideShowTextView;
            private var req:URLRequest=new URLRequest("data.xml");
            private var containerSprite:Sprite;
            private var s:Shape;
            private var titleText:TextField
            private var numbersText:TextField
            private function init():void{
                titleText=new TextField;
                numbersText=new TextField;
                containerSprite=new Sprite;
                containerSprite.addEventListener(MouseEvent.CLICK, containerClicked)
                s=new Shape;
                containerSprite.addChild(s)
                holder.addChild(containerSprite)
                holder.addChild(titleText)
                holder.addChild(numbersText)
                slideView=new SlideShowView(containerSprite);
                slideModel=new SlideShowModel;
                textView=new SlideShowTextView(titleText,numbersText);
                slideView.model=slideModel;
                textView.model=slideModel;
                slideModel.addEventListener(Model.MODEL_CHANGE, dataChanged);
                slideModel.load(req);
                titleText.x=0//containerSprite.x
                titleText.y=500//containerSprite.y+containerSprite.height+10
                numbersText.x=500//containerSprite.x+containerSprite.width-100
                numbersText.y=titleText.y
            private function dataChanged(event:Event):void{
                trace("WIDTH="+containerSprite.width)
            private function containerClicked(event:MouseEvent):void{
                slideModel.setCurrentIndex(slideModel.currentIndex+1)
        ]]>
    </mx:Script>
<mx:UIComponent id="holder"  horizontalCenter="-250" />
</mx:Application>

Answer 1

You will need to catch the Event.COMPLETE from each Image
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui