Question

I’m trying to Resize a panel using a Resize Effect using its center as the anchor point. I’ve been googling for some information and the only thing I have found is to set the horizontalCenter and verticalCenter to 0, but this is not working for me. The panel keeps resizing from top/left corner.

Could anybody explain more clearly how to accomplish this?.

Thanks in advance.

Answer 1

As Jonathan suggests, the parent container of your Panel probably doesn’t use a BasicLayout, but some liquid layout (like VerticalLayout). When you use a liquid layout you can not use absolute position attributes, like ‘x’, ‘y’, ‘horizontalCenter’, ‘verticalCenter’, ‘left’, ‘right’, ‘top’ or ‘bottom’. They will simply be ignored, which of course makes sense because the objects have to be laid out relative to one another.

Anyway, this works perfectly:

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

    <s:states>
        <s:State name="small" />
        <s:State name="big" />
    </s:states>

    <s:transitions>
        <s:Transition>
            <s:Resize target="{panel}" />
        </s:Transition>
    </s:transitions>

    <s:Panel id="panel" horizontalCenter="0" verticalCenter="0"
             width.small="200" height.small="100"
             width.big="400" height.big="200">

        <s:Button label="toggle size" 
                  click="currentState = currentState == 'small' ? 'big' : 'small'" />
    </s:Panel>

</s:Application>