Relax Breath of Solution.

Applying an effect when an HBox container is resized in Flex

The following example shows how you can apply a resize effect to a Flex HBox container by setting the resizeEffect style/effect.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="HBox_resizeEffect_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:HDividedBox id="hDividedBox"
            width="100%"
            height="100%">
        <mx:HBox id="hBox1"
                backgroundColor="haloGreen"
                resizeEffect="Resize"
                width="100%"
                height="100%" />
        <mx:HBox id="hBox2"
                backgroundColor="haloBlue"
                resizeEffect="Resize"
                width="100%"
                height="100%" />
    </mx:HDividedBox>

</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="HBox_resizeEffect_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.effects.Resize;

            private function init():void {
                hBox1.setStyle("resizeEffect", Resize);
                hBox2.setStyle("resizeEffect", Resize);
            }
        ]]>
    </mx:Script>

    <mx:HDividedBox id="hDividedBox"
            width="100%"
            height="100%">
        <mx:HBox id="hBox1"
                backgroundColor="haloGreen"
                width="100%"
                height="100%" />
        <mx:HBox id="hBox2"
                backgroundColor="haloBlue"
                width="100%"
                height="100%" />
    </mx:HDividedBox>

</mx:Application>