Sequencing effects in Flex using the mx:Sequence tag

The following example shows how you can use the <mx:Sequence /> MXML tag in Flex to create combined effects which execute in order. This example shows how to fade a display object in, pause, and then fade a display object out. Also, the same thing but with a combination of Wipe effects.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/19/sequencing-effects-in-flex-using-the-mxsequence-tag/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function fade_click():void {
                fader.stop();
                fader.play([box]);
            }

            private function wipe_click():void {
                wiper.stop();
                wiper.play([box]);
            }
        ]]>
    </mx:Script>

    <mx:Sequence id="fader">
        <mx:Fade alphaFrom="0.0" alphaTo="1.0" />
        <mx:Pause duration="{slider.value}" />
        <mx:Fade alphaFrom="1.0" alphaTo="0.0" />
    </mx:Sequence>

    <mx:Sequence id="wiper">
        <mx:SetPropertyAction name="alpha" value="1.0" />
        <mx:WipeRight showTarget="true" />
        <mx:Pause duration="{slider.value}" />
        <mx:WipeRight showTarget="false" />
        <mx:SetPropertyAction name="alpha" value="0.0" />
    </mx:Sequence>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="fade box"
                click="fade_click();" />
        <mx:Button label="wipe box"
                click="wipe_click();" />

        <mx:Spacer width="100%" />

        <mx:Label text="effect pause ({slider.value} ms):" />
        <mx:HSlider id="slider"
                minimum="1000"
                maximum="3000"
                value="1500"
                labels="[1000,2000,3000]"
                liveDragging="true"
                showTrackHighlight="true"
                snapInterval="100"
                tickInterval="500"
                dataTipPrecision="0" />
    </mx:ApplicationControlBar>

    <mx:Box id="box"
            width="100%"
            height="100%"
            backgroundColor="haloSilver"
            alpha="0.0" />

</mx:Application>

View source is enabled in the following example.