Applying behaviors to a ViewStack container -- Flex 2.01

You can assign effects to the ViewStack container or to its children. For example, if you assign the WipeRight effect to the creationCompleteEffect property of the ViewStack control, Flex plays the effect once when the ViewStack first appears.

To specify the effects that run when the ViewStack changes children, use the children's hideEffect and showEffect properties. The effect specified by the hideEffect property plays as a container is being hidden, and the effect specified by the showEffect property plays as the newly visible child appears. The ViewStack container waits for the completion of the effect specified by the hideEffect property for the container that is being hidden before it reveals the new child container.

The following example runs a WipeRight effect when the ViewStack container is first created, and runs a WipeDown effect when each child is hidden and a WipeUp effect when a new child appears.

<?xml version="1.0"?>
<!-- containers\navigators\VSLinkEffects.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:WipeUp id="myWU" duration="300"/>
    <mx:WipeDown id="myWD" duration="300"/>
    <mx:WipeRight id="myWR" duration="300"/>

    <mx:VBox>
        <mx:LinkBar dataProvider="{myViewStack}" 
            borderStyle="solid"
            backgroundColor="#EEEEFF"/>

        <mx:ViewStack id="myViewStack" 
            borderStyle="solid" 
            width="100%"
            creationCompleteEffect="{myWR}">

            <mx:Canvas id="search" 
                label="Search"
                hideEffect="{myWD}" 
                showEffect="{myWU}">
                <mx:Label text="Search Screen"/>
            </mx:Canvas>

            <mx:Canvas id="custInfo" 
                label="Customer Info"
                hideEffect="{myWD}" 
                showEffect="{myWU}">
                <mx:Label text="Customer Info"/>
            </mx:Canvas>

            <mx:Canvas id="accountInfo" 
                label="Account Info"
                hideEffect="{myWD}" 
                showEffect="{myWU}">
                <mx:Label text="Account Info"/>
            </mx:Canvas>
        </mx:ViewStack>
    </mx:VBox>
</mx:Application>

Notice that the showEffect property of a container is only triggered when the container's visibility changes from false to true. Therefore, you use the creationCompleteEffect property to trigger the effect when Flex first creates the component.