Question

I am trying to create a nice state transition where I have 2 containers (in the example below I have used panels).

When the state changes, I want to fade away the upper panel, then move the lower panel to the top of the screen, and below that I want to fade in a new ‘lower’ panel.

In the code below, the fades are working fine, but the panel doesn’t move to the top of the box, it just goes to it’s new position without a transition.

Also the ‘reverse’ transition doesn’t happen at all. I tried to set autoReverse to true, and I also tried to build an opposite transition, both no result, there was no transition.

When I replace the VGroup (in which it all happens) for VBox, I get a slightly better result, the transition works in one way. The reverse transition still doesn’t work at all.

<?xml version="1.0" encoding="utf-8"?>

<fx:Script>
    <![CDATA[
        private function switchMode():void
        {
            if (currentState == "up")
                currentState = "down";
            else
                currentState = "up";
        }
    ]]>
</fx:Script>

<s:states>
    <s:State name="up" />
    <s:State name="down" />
</s:states>

<s:transitions>
    <s:Transition fromState="up" toState="down">
        <s:Sequence>
            <s:Fade target="{upperGrid}" />
            <s:RemoveAction target="{upperGrid}" />
            <s:Move target="{panel1}" />
            <s:AddAction target="{lowerGrid}" />
            <s:Fade target="{lowerGrid}" />
        </s:Sequence>
    </s:Transition>

    <s:Transition fromState="down" toState="up">
        <s:Sequence>
            <s:Fade target="{lowerGrid}" />
            <s:RemoveAction target="{lowerGrid}" />
            <s:Move target="{panel1}" />
            <s:AddAction target="{upperGrid}" />
            <s:Fade target="{upperGrid}" />
        </s:Sequence>
    </s:Transition>
</s:transitions>

<s:VGroup width="100%" height="100%" top="10" left="10" right="10" bottom="10">
    <s:Panel id="upperGrid" width="100%" height="100%" includeIn="up" title="upper panel" />
    <s:Panel id="panel1" width="100%" title="Panel">
        <s:Button label="Switch mode" click="switchMode()" />
    </s:Panel>
    <s:Panel id="lowerGrid" width="100%" height="100%" includeIn="down" title="lower panel" />
</s:VGroup>

When I get rid of the VGroup or VBox, and use absolute positions, the transitions work fine:

<s:Panel id="upperGrid" left="10" right="10" top="10" bottom="{panel1.height + 20}" includeIn="up" title="upper panel" />
<s:Panel id="panel1" left="10" right="10" top.up="{upperGrid.height + 20}" top.down="10" title="Panel">
    <s:Button label="Switch mode" click="switchMode()" />
</s:Panel>
<s:Panel id="lowerGrid" left="10" right="10" top="{panel1.height + 20}" bottom="10" includeIn="down" title="lower panel" />

Should you always use absolute positioning if you want these kind of moving transitions or is it possible to use these transitions in a VGroup or VBox combined with includeIn and excludeFrom properties? And if so, how could I correct that in the example above?

Answer 1

The problem is that you’re using a container that is meant to ‘layout’ it’s children. You could try to create your own layout that could know when it’s children are currently in an effect and not touch them until they’re done, or use an absolutely positioned layout container (like Group) instead.