Resize layout after a loaded image gets resized

Question

So I'm loading a really big pic in this mx:Image manteinAspectRatio enabled with a height constraint and as usual it doesn't work (Flex is definitely not for me):

<?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx">

        <s:Rect top="0" right="0" bottom="0" left="0">
            <s:fill>
                <mx:SolidColor color="#000000"/>
            </s:fill>
        </s:Rect>

        <s:VGroup id="a" top="0" right="0" bottom="0" left="0" horizontalAlign="center" verticalAlign="middle">

            <s:Group id="b">

                <s:Rect id="c" top="0" right="0" bottom="0" left="0" radiusX="10" radiusY="10">
                    <s:fill>
                        <mx:SolidColor color="#cccccc"/>
                    </s:fill>
                </s:Rect>

                <s:VGroup id="d" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">

                    <mx:Image id="e" source="big.jpg" maxHeight="300" maintainAspectRatio="true" />

                </s:VGroup>

            </s:Group>

        </s:VGroup>

    </s:Application>

The big.jpg has more width than height so when it's resized the wrapping containers get the correct new height but they still have the old width.

I've tried to call validateNow() on every element, invalidate, callLater(), resize event, compete event... I'm a noob getting tired of AS 3.0

UPDATE:

Reading J_A_X answer I ended up with this:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[

        import flash.events.Event;
        import mx.controls.Image;

        private function fix(event:Event):void {

            var img:Image = event.target as Image;
            var h:uint = 300;

            img.width *= h / img.height;
            img.height = h;
            img.removeEventListener("updateComplete", fix);

        }

        ]]>
    </fx:Script>

    <s:Rect top="0" right="0" bottom="0" left="0">
        <s:fill>
            <mx:SolidColor color="#000000"/>
        </s:fill>
    </s:Rect>

    <s:VGroup top="0" right="0" bottom="0" left="0" horizontalAlign="center" verticalAlign="middle">

        <s:Group>

            <s:Rect top="0" right="0" bottom="0" left="0" radiusX="10" radiusY="10">
                <s:fill>
                    <mx:SolidColor color="#cccccc"/>
                </s:fill>
            </s:Rect>

            <s:VGroup paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">

                <mx:Image source="big.jpg" maintainAspectRatio="false" updateComplete="fix(event)" />

            </s:VGroup>

        </s:Group>

    </s:VGroup>

</s:Application>

I hope that helps another one dealing with Flex.

I havent try your code, but maybe you should try without so many containers. There is one of them that resize your image. — papachan
I don't understand what isn't working. What is the wrapping container? Why are you expecting the container to resize itself? There is nothing in your code that makes me think it should. Are you resizing the image, or leaving it as is? Is this your full code? — JeffryHouser

J_A_X J_A_X · Accepted Answer · 2011-06-02T16:27:15

After looking at Image, it seems that it needs explicit height/width or else it won't scale down properly. It's a bit stupid not to scale to the maxHeight, but you could always use Flex 4.5 Image class instead or just create your own to handle max height/width.

Resize layout after a loaded image gets resized

1 Answers