Setting a creation complete effect on an Accordion container in Flex

The following example shows how you can set a creation complete effect on a Flex Accordion container by setting the creationCompleteEffect style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/22/setting-a-creation-complete-effect-on-an-accordion-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:String id="str" source="lorem.txt" />

    <mx:Accordion id="accordion"
            creationCompleteEffect="Dissolve"
            width="400"
            height="300">
        <mx:VBox id="vBox1"
                label="Red (WipeUp)"
                icon="@Embed('assets/bullet_red.png')"
                backgroundColor="red"
                creationCompleteEffect="WipeUp"
                width="100%"
                height="100%">
            <mx:Text text="{str}" width="100%" height="100%" />
        </mx:VBox>
        <mx:VBox id="vBox2"
                label="Orange (WipeDown)"
                icon="@Embed('assets/bullet_orange.png')"
                backgroundColor="haloOrange"
                creationCompleteEffect="WipeDown"
                width="100%"
                height="100%">
            <mx:Text text="{str}" width="100%" height="100%" />
        </mx:VBox>
        <mx:VBox id="vBox3"
                label="Yellow (WipeLeft)"
                icon="@Embed('assets/bullet_yellow.png')"
                backgroundColor="yellow"
                creationCompleteEffect="WipeLeft"
                width="100%"
                height="100%">
            <mx:Text text="{str}" width="100%" height="100%" />
        </mx:VBox>
        <mx:VBox id="vBox4"
                label="Green (WipeRight)"
                icon="@Embed('assets/bullet_green.png')"
                backgroundColor="haloGreen"
                creationCompleteEffect="WipeRight"
                width="100%"
                height="100%">
            <mx:Text text="{str}" width="100%" height="100%" />
        </mx:VBox>
        <mx:VBox id="vBox5"
                label="Blue (Iris)"
                icon="@Embed('assets/bullet_blue.png')"
                backgroundColor="haloBlue"
                creationCompleteEffect="Iris"
                width="100%"
                height="100%">
            <mx:Text text="{str}" width="100%" height="100%" />
        </mx:VBox>
    </mx:Accordion>

</mx:Application>