Flex Demo 6 - Simple Transitions

View Flex Demo 6

This demo is very similar to Demo 5, but we have added a simple transition between each screen. The ViewStack now looks like this:

    <mx:ViewStack id="screens"> 
        <s:NavigatorContent id="screen1" showEffect="{screenShow}" hideEffect="{screenFade}"> 
            <components:Screen1/> 
        </s:NavigatorContent> 
        <s:NavigatorContent id="screen2" showEffect="{screenShow}" hideEffect="{screenFade}"> 
            <components:Screen2/> 
        </s:NavigatorContent> 
    </mx:ViewStack> 

And the effects themselves can be found in the declarations area:

    <fx:Declarations> 
        <mx:Fade id="screenShow" duration="500" alphaFrom="0.0" alphaTo="1.0"/> 
        <mx:Fade id="screenFade" duration="500" alphaFrom="1.0" alphaTo="0.0"/> 
    </fx:Declarations>