Scaling and resizing flex component

Question

I have custom flex component inherited from UIComponent (compiled, no source code access). It has fixed width-to-height proportions and it's scalable. If I set its width and height to 100%, it's trying to fit parent's size, but it keeps width-to-height proportion, so if it's proportion does not equal parent's proportion, there can appear empty space near this component when resizing parent.

What I need, is to fit my component completely to parent's size. Is there any nice way to do this? I could listen to parent's resize event, and play with component's scaleX and scaleY, but may be any better way exists to solve my problem (any property?). Thanks.

Answer 1

A great way is to use greensock's AutoFitArea. Coding is as simple as the following

var area:AutoFitArea = new AutoFitArea(this, 50, 70, 300, 100);
area.attach(myImage, {scaleMode:ScaleMode.PROPORTIONAL_OUTSIDE, crop:true});

which would constrain whatever is inside do the given dimensions (300,100) from there on out, you can just change the area's width and that will figure it all out for you.

hope it helps

Answer 2

Personally, what I would do is have the component within the parent set at width/height 100%, then within the component itself, override the updateDisplayList function (which returns the unscaled width/height) and then resize whatever children you're trying to display depending on the width/height of this container. Something like this:

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
    if(this._child!= null)
    {
        if(unscaledWidth > unscaledHeight)
        {
            this._child.height = unscaledHeight;
            this._child.scaleX = this._video.scaleY;
        }else{
            this._child.width = unscaledWidth;
            this._child.scaleY = this._video.scaleX;
        }
    }
}

Should do it.

Answer 3

Should the component keep its proportion? If not, you could just, as you said, listen to the resize event of the parent and set the width and height to the components values.

If the component should keep its proportion you could resize the background of your component so that it fits the parents size and resize the content of you component with its proportion seperatly.