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.

8 thoughts on “Sequencing effects in Flex using the mx:Sequence tag

  1. Hi,
    Thank you for your tutil ,
    but I don’t know how to create Sequence using actionscript,
    can you teach me?

  2. That’s a good article indeed. A very simple and handy one, that any flexer can try to implement. Thanks for all your effort

  3. Good article but…
    can’t find anywhere how to apply such effect sequence on 2 different objects with diffrent time scale.
    For exemple:
    When flash is loaded (T0), object #1 appears and has an effect during 10 seconds.
    At T0+3sec Object #2 appears and has an effect (different from object #1) of 3 seconds.

    I can’t figure out how to achieve this!
    Thanks for any tips.
    Cheers

  4. Sometimes I getting mad about Flex and working with that not-working things then look for a assumption about my situation. 99% I found my solution at blog.flexexamples. Thank you!

Comments are closed.