Question

I have a component with 2 states and I have added transitions for switching between the states, where 2 Move affects are applied to 2 different objects. This all works fine, however, after the transition from the first state to the second has completed the second state doesn not render correctly. It contains a TextInput control which is not visible, and a Button with a custom skin that is only sometimes visible and vanishes if you click on it. I have tried called invalidateDisplayList() and validateNow() after loading the second state but that has done nothing. I also have a VBox with a cornerRadius property set, strangely this does not seem to apply anymore and the corners are square, where they displayed correctly before I added the transition in. Does anyone have any ideas?

Thank you!

Here is the code for my states and their transitions:

<!-- different states of this component -->
<mx:states>
    <s:State name="useForFree"
             enterState="renderState()"/>
    <s:State name="enterLicence"
             enterState="renderState()"/>
</mx:states>


<!-- transitions between different states -->
<mx:transitions>

    <!-- transition from useForFree to enterLicence state -->
    <s:Transition id="toEnterLicence"
                  fromState="useForFree"
                  toState="enterLicence">
        <s:Parallel id="p1"
                    targets="{[freeBtn, _enterLicenceMask]}">               
            <s:Move yFrom="250"
                    yTo="0"
                    duration="500"
                    targets="{[freeBtn]}"/>
            <s:Move yFrom="289"
                    yTo="39"
                    duration="500"
                    targets="{[_enterLicenceMask]}"/>
        </s:Parallel>       
    </s:Transition>

    <!-- transition from enterLicence to useForFree state -->
    <s:Transition id="toUseForFree"
                  fromState="enterLicence"
                  toState="useForFree">
        <s:Parallel id="p2"
                    targets="{[enterLicenceBtn, _useForFreeMask]}">             
            <s:Move yFrom="0"
                    yTo="240"
                    duration="500"
                    targets="{[enterLicenceBtn]}"/>
            <s:Move yFrom="-250"
                    yTo="0"
                    duration="500"
                    targets="{[_useForFreeMask]}"/>
        </s:Parallel>       
    </s:Transition>
</mx:transitions>

and here is the code for my layout:

<mx:Canvas id="freeStateCanvas"
           width="100%">

    <mx:VBox width="100%"
             horizontalAlign="center"
             top="0"
             mask="{_useForFreeMask}">

        <mx:VBox id="freeBox"
                 includeIn="useForFree">
            <s:Label text="some text"/>
            <s:Spacer height="20"/>
            <s:Image source="image path"/>
            <s:Spacer height="20"/>
            <mx:Button id="connectBtn"/>
            <s:Spacer height="10"/>
            <mx:HBox >
                <s:Label text="some text"/>/>
            </mx:HBox>
        </mx:VBox>

        <s:Label text="some text"
                 includeIn="useForFree"/>           
    </mx:VBox>

        <mx:Button id="enterLicenceBtn"
                   includeIn="useForFree"/>

</mx:Canvas>

<!-- enter licence state -->

<mx:Canvas id="enterLicenceStateCanvas"
           width="100%">

        <mx:VBox id="enterLicenceBox"                    
                 mask="{_enterLicenceMask}"
                 includeIn="enterLicence">

            <s:Label text="some text"/>
            <s:Spacer height="20"/>
            <s:TextInput id="licenceInput"
                         width="200"
                         height="30"/>
            <s:Spacer height="20"/>
            <mx:Button id="registerBtn"/>
            <s:Spacer height="10"/>
            <mx:HBox>
                <s:Label text="some text"/>
                <s:Label text="some more text"/>
            </mx:HBox>
        </mx:VBox>

        <mx:Button id="freeBtn"
                   includeIn="enterLicence"/>

</mx:Canvas>

where the variables being set as masks are UIComponent instances where I have used their graphics property to draw a rectangle.

Answer 1

Okay, so I found what the problem was, but thanks for trying to help shaunhusain.

In my code you can see I have 2 VBox containers called “freeBox” and “enterLicenceBox” and these actually had a white background and rounded corners, and a DropShadowFilter applied to them (I removed these properties when putting up the code as I felt they were irrelevant, that was a mistake).

This DropShadowFilter was the cause of all my problems and on removing it, the transitions worked fine and all content was rendered correctly. I assume this is just a strange Flex bug, and I didn’t find a workaround, I just used images as the box backgrounds for a quick fix.