Flex4, centering and resizing a image inside a group container

Question

I'm looking for the best way to get a flex 4 image object to resize and horizontally center whenever its parent container (a custom component based on group) resizes. I cannot set horizontalCenter="0" to accomplish the image centering because I use a move transition to "slide" the image in and out of view.

I'm externally setting the image source in the component. Here is a simplified example of my component code that only addresses resizing the image.

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/halo" >

    <fx:Script>
        <![CDATA[                   
            public function assignImage(imgUrl:String):void
            {
                imgA.source = imgUrl;
                imgA.visible = true;
            }

            override protected function updateDisplayList(w:Number,h:Number):void
            {
                imgA.width = w;
                imgA.height = h;
                super.updateDisplayList(w,h);           
            }        
        ]]>

    </fx:Script>         

    <s:Image id="imgA" visible="false" top="0" maintainAspectRatio="true"  />        
</s:Group>

Any help is greatly appreciated -- I'm also open to an alternate method of resizing the image if it makes more sense.

Thanks in advance

Answer 1

I'd probably approach this like so:

<s:Group ... creationComplete="parentingGroupCreationCompleteListener()">
<fx:Script>
<![CDATA[
    private function parentingGroupCreationCompleteListener():void
    {
        this.addEventListener(ResizeEvent.RESIZE, parentingGroupResizeListener);
    }

    private function parentingGroupResizeListener(e:ResizeEvent):void
    {
        updateImageDimensionsAndPosition(this.width, this.height);
    }

    private function updateImageDimensionsAndPosition(w:Number, h:Number):void
    {
        imgA.width = w;
        imgA.height = h;

        // If you want to center the image, uncomment the following
        //imgA.x = s.width/2 - imgA.width/2;
        //imgA.y = s.height/2 - imgA.height/2;

    }

    override public function updateDisplayList(w:Number, h:Number):void
    {
        updateImageDimensionsAndPosition(w,h);
        super.updateDisplayList(w,h);
    }

]]>
</fx:Script>

</s:Group>

Hope that's useful.

Answer 2

rhtx was on the right track, but there is no easy way to center the image control with his solution. After some testing I came up with the following to solve this problem. I hope it saves you all some time.

Here is the code for the custom component based on a group that contains the image control.

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"  
         xmlns:s="library://ns.adobe.com/flex/spark"  
         xmlns:mx="library://ns.adobe.com/flex/halo" 
         creationComplete="group1_creationCompleteHandler(event)" 
         > 

    <fx:Script> 
        <![CDATA[                    
            public function assignImage(imgUrl:String):void 
            { 
                imgA.source = imgUrl; 
                imgA.visible = true; 
            } 

           protected function group1_creationCompleteHandler(event:FlexEvent):void
            {
                this.addEventListener(ResizeEvent.RESIZE, SinglePageViewer_resizeHandler); 
            }    

            protected function group1_resizeHandler(event:ResizeEvent):void
            {                           
                updateImageDimensionsAndPosition(this.width, this.height);
            }           

            private function updateImageDimensionsAndPosition(w:Number, h:Number):void 
            { 
                var aspect:Number = imgA.width / imgA.height;    
                var containerAspect:Number = w / h;

                if ( isNaN(aspect) == false )
                {                       
                    if (aspect <= containerAspect)  
                    { 
                        imgA.height = h; 
                        imgA.width = aspect * imgA.height;                  
                    } 
                    else  
                    { 
                        imgA.width = w; 
                        imgA.height = imgA.width / aspect; 
                    } 

                    // If you want to horizontally center the image, uncomment the following 
                    /*
                    var oldX:Number = imgA.x;                           
                    var newX:Number = w/2 - imgA.width/2; 
                    if ( (oldX != newX) && (newX > 0) )
                    {
                        imgA.x = newX;
                    }
                    */                  
                }            
            } 
        ]]>  
    </fx:Script>          

    <s:Image id="imgA" visible="false" top="0" maintainAspectRatio="true"  />         
</s:Group> 

The only other part is in the main application you must specify a maxWidth and maxHeight for the custom component.

<components.myCustomImageGroup id="cig" maxWidth="500" maxHeight="400" />