Resizing & Positioning Children within a Panel

Question

I'm trying to insert an element into a Panel that has a vertical layout, and create a transition that smoothly inserts the new item in between 2 existing items in the base state of the application.  My goal is for the bottom text field to remain anchored to the bottom of the panel as the panel resizes, instead of jumping to its new position, so that the middle text input can then gracefully fade in.
Am I just missing something in how I'm defining the transitions, or will the effects not yet account for the positioning of items from layout?  Attached is the MXML app and the compiled SWF.
Thanks.

Answer 1

This will get you what you want. There's a tricky interaction between adding the new element and the vertical layout. The third item won't make room for the second one unless the second one is actually added to the parent. But adding it will immediately make it visible, which is not what you want. So I tweaked the effect to add it but make it non-visible (alpha==0), then Resize the second element itself (the panel will resize automatically), *then* fade in the second element.
            <s:Sequence>
                <s:SetAction target="{secondTxt}" property="alpha" value="0"/>
                <s:Resize target="{secondTxt}" heightFrom="0"/>
                <s:Parallel>
                    <s:Move target="{thirdTxt}" />
                    <s:Fade target="{secondTxt}" alphaTo="1"/>
                </s:Parallel>
            </s:Sequence>
Chet.