Flex Examples » Fade http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting a fade transition on a Spark DropDownList component in Flex Gumbo http://blog.flexexamples.com/2009/04/28/setting-a-fade-transition-on-a-spark-dropdownlist-component-in-flex-gumbo/ http://blog.flexexamples.com/2009/04/28/setting-a-fade-transition-on-a-spark-dropdownlist-component-in-flex-gumbo/#comments Wed, 29 Apr 2009 06:59:25 +0000 Peter deHaan http://blog.flexexamples.com/2009/04/28/setting-a-fade-transition-on-a-spark-dropdownlist-component-in-flex-gumbo/ The following example shows how you can fade in a Spark DropDownList pop up menu in Flex Gumbo by creating a custom DropDownList skin and setting the transitions property to a transition Fade effect.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex [...]]]> The following example shows how you can fade in a Spark DropDownList pop up menu in Flex Gumbo by creating a custom DropDownList skin and setting the transitions property to a transition Fade effect.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/28/setting-a-fade-transition-on-a-spark-dropdownlist-component-in-flex-gumbo/ -->
<s:Application name="Spark_DropDownList_transitions_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">

    <fx:Declarations>
        <s:ArrayList id="arrList"
                source="[Red,Orange,Yellow,Green,Blue]" />
    </fx:Declarations>

    <s:DropDownList id="dropDownList"
            dataProvider="{arrList}"
            requiresSelection="true"
            skinClass="skins.CustomDropDownListSkin"
            horizontalCenter="0"
            top="20" />

</s:Application>

The custom Spark DropDownList skin, CustomDropDownListSkin.mxml, is as follows:

View skins/CustomDropDownListSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/28/setting-a-fade-transition-on-a-spark-dropdownlist-component-in-flex-gumbo/ -->
<s:SparkSkin name="CustomDropDownListSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        alpha.disabled="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>
    <s:transitions>
        <s:Transition fromState="normal" toState="open">
            <s:Fade target="{popup}" duration="3000" />
        </s:Transition>
    </s:transitions>

    <!-- host component -->
    <fx:Metadata>
        <![CDATA[
            [HostComponent("spark.components.DropDownList")]
        ]]>
    </fx:Metadata>

    <!--- Defines the appearance of the DropDownList component's drop down area. -->
    <s:PopUp id="popup"
            open.normal="false" open.open="true"
            includeIn="open"
            left="0" right="0" top="0" bottom="0"
            visible.open="true" visible.normal="false"
            placement="below">
        <s:Group id="dropDown"
                maxHeight="134" minHeight="22"
                visible.open="true" visible.normal="false">
            <!-- border -->
            <s:Rect left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <s:SolidColorStroke color="0x686868" weight="1"/>
                </s:stroke>
            </s:Rect>

            <!--- fill --->
            <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
                <s:fill>
                    <s:SolidColor id="bgFill" color="0xFFFFFF" />
                </s:fill>
            </s:Rect>

            <s:Scroller left="1" top="1" right="1" bottom="1" >
                <s:DataGroup id="dataGroup" itemRenderer="spark.skins.default.DefaultItemRenderer">
                    <s:layout>
                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
                    </s:layout>
                </s:DataGroup>
            </s:Scroller>

            <s:filters>
                <s:DropShadowFilter blurX="20" blurY="20" distance="5" angle="90" alpha="0.6" />
            </s:filters>
        </s:Group>
    </s:PopUp>

    <s:Button id="button" left="0" right="0" top="0" bottom="0" focusEnabled="false"
        skinClass="spark.skins.default.DropDownListButtonSkin" />
    <s:SimpleText id="labelElement" verticalAlign="middle"
        left="7" right="30" top="2" bottom="2" verticalCenter="1" />

</s:SparkSkin>

View source is enabled in the following example.

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

 
]]> http://blog.flexexamples.com/2009/04/28/setting-a-fade-transition-on-a-spark-dropdownlist-component-in-flex-gumbo/feed/ 7 Creating a custom creation complete effect on a Flex Alert control (redux) http://blog.flexexamples.com/2008/09/15/creating-a-custom-creation-complete-effect-on-a-flex-alert-control-redux/ http://blog.flexexamples.com/2008/09/15/creating-a-custom-creation-complete-effect-on-a-flex-alert-control-redux/#comments Tue, 16 Sep 2008 04:12:18 +0000 Peter deHaan http://blog.flexexamples.com/2008/09/15/creating-a-custom-creation-complete-effect-on-a-flex-alert-control-redux/ In a previous example, “Creating a custom creation complete effect on a Flex Alert control”, we saw how you could specify an effect which gets played when an Alert control is displayed by setting the Alert control’s creationCompleteEffect style.

The following example shows how you can apply a parallel Fade/Move effect when the Alert [...]]]> In a previous example, “Creating a custom creation complete effect on a Flex Alert control”, we saw how you could specify an effect which gets played when an Alert control is displayed by setting the Alert control’s creationCompleteEffect style.

The following example shows how you can apply a parallel Fade/Move effect when the Alert control is created by setting the the creationCompleteEffect effect/style in MXML and ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/15/creating-a-custom-creation-complete-effect-on-a-flex-alert-control-redux/ -->
<mx:Application name="Alert_creationCompleteEffect_test_3"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.effects.easing.*;

            private function showAlert():void {
                var a:Alert = Alert.show("Nam vel nunc sed arcu fringilla fringilla. Cras dapibus nunc ut nisi.\\n" +
                        "Nullam porttitor mi et mauris.\\n" +
                        "Suspendisse hendrerit, turpis eu ornare suscipit, nulla sem tempus lorem,\\n" +
                        "sit amet semper nibh mi cursus neque.\\n" +
                        "Nulla vel purus. Sed a nulla. Quisque venenatis laoreet mi.",
                        "Lorem ipsum dolor sit amet, consectetuer adipiscing elit");
                a.isPopUp = false;
                a.cacheAsBitmap = true;
            }
        ]]>
    </mx:Script>

    <mx:Style>
        @font-face {
            src: local("Verdana");
            fontFamily: VerdanaEmbedded;
        }

        @font-face {
            src: local("Verdana");
            fontFamily: VerdanaEmbedded;
            fontWeight: bold;
        }

        Alert {
            fontFamily: VerdanaEmbedded;
            creationCompleteEffect: alertCreationCompleteEffect;
        }
    </mx:Style>

    <mx:Parallel id="alertCreationCompleteEffect">
        <mx:Fade duration="500" />
        <mx:Move yFrom="0"
                easingFunction="Elastic.easeOut"
                duration="1000" />
    </mx:Parallel>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="button"
                label="Click me"
                click="showAlert();" />
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/15/creating-a-custom-creation-complete-effect-on-a-flex-alert-control-redux/ -->
<mx:Application name="Alert_creationCompleteEffect_test_3"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.controls.Alert;
            import mx.controls.Button;
            import mx.effects.easing.*;
            import mx.effects.Fade;
            import mx.effects.Move;
            import mx.effects.Parallel;

            [Embed(systemFont="Verdana",
                    fontName="VerdanaEmbedded",
                    fontWeight="normal",
                    mimeType="application/x-font")]
            private const verdanaEmbeddedNormal:Class;

            [Embed(systemFont="Verdana",
                    fontName="VerdanaEmbedded",
                    fontWeight="bold",
                    mimeType="application/x-font")]
            private const verdanaEmbeddedBold:Class;

            public var alertCreationCompleteEffect:Parallel;

            private var button:Button;

            private function init():void {
                var fader:Fade = new Fade();
                fader.duration = 500;

                var mover:Move = new Move();
                mover.yFrom = 0;
                mover.easingFunction = Elastic.easeOut;
                mover.duration = 1000;

                alertCreationCompleteEffect = new Parallel();
                alertCreationCompleteEffect.addChild(fader);
                alertCreationCompleteEffect.addChild(mover);

                button = new Button();
                button.label = "Click me";
                button.addEventListener(MouseEvent.CLICK, button_click);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(button);
                addChildAt(appControlBar, 0);

                var alertStyles:CSSStyleDeclaration;
                alertStyles = StyleManager.getStyleDeclaration("Alert");
                alertStyles.setStyle("fontFamily", "VerdanaEmbedded");
            }

            private function button_click(evt:MouseEvent):void {
                showAlert();
            }

            private function showAlert():void {
                var a:Alert = Alert.show("Nam vel nunc sed arcu fringilla fringilla. Cras dapibus nunc ut nisi.\\n" +
                        "Nullam porttitor mi et mauris.\\n" +
                        "Suspendisse hendrerit, turpis eu ornare suscipit, nulla sem tempus lorem,\\n" +
                        "sit amet semper nibh mi cursus neque.\\n" +
                        "Nulla vel purus. Sed a nulla. Quisque venenatis laoreet mi.",
                        "Lorem ipsum dolor sit amet, consectetuer adipiscing elit");
                a.setStyle("creationCompleteEffect", alertCreationCompleteEffect);
                a.isPopUp = false;
                a.cacheAsBitmap = true;
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/09/15/creating-a-custom-creation-complete-effect-on-a-flex-alert-control-redux/feed/ 6 Sequencing effects in Flex using the mx:Sequence tag (redux) http://blog.flexexamples.com/2008/04/23/sequencing-effects-in-flex-using-the-mxsequence-tag-redux/ http://blog.flexexamples.com/2008/04/23/sequencing-effects-in-flex-using-the-mxsequence-tag-redux/#comments Thu, 24 Apr 2008 03:41:33 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/23/sequencing-effects-in-flex-using-the-mxsequence-tag-redux/ In a previous example, “Sequencing effects in Flex using the mx:Sequence tag”, we saw how you could sequence tween effects using the <mx:Sequence /> tag.

The following example shows how you can create the same sequenced effects using ActionScript instead of MXML.

Full code after the jump.

View MXML

<?xml version="1.0" [...]]]> In a previous example, “Sequencing effects in Flex using the mx:Sequence tag”, we saw how you could sequence tween effects using the <mx:Sequence /> tag.

The following example shows how you can create the same sequenced effects using ActionScript instead of MXML.

Full code after the jump.

View MXML

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

    <mx:Script>
        <![CDATA[
            import mx.effects.Fade;
            import mx.effects.Pause;
            import mx.effects.Sequence;
            import mx.effects.SetPropertyAction;
            import mx.effects.WipeRight;

            private var fader:Sequence;
            private var wiper:Sequence;

            private function fade_click():void {
                var fadeIn:Fade = new Fade();
                fadeIn.alphaFrom = 0.0;
                fadeIn.alphaTo = 1.0;

                var fadeOut:Fade = new Fade();
                fadeOut.alphaFrom = 1.0;
                fadeOut.alphaTo = 0.0;

                var pause:Pause = new Pause();
                pause.duration = slider.value;

                fader = new Sequence();
                fader.addChild(fadeIn);
                fader.addChild(pause);
                fader.addChild(fadeOut);

                fader.stop();
                fader.play([box]);
            }

            private function wipe_click():void {
                var wipeIn:WipeRight = new WipeRight();
                wipeIn.showTarget = true;

                var wipeOut:WipeRight = new WipeRight();
                wipeOut.showTarget = false;

                var pause:Pause = new Pause();
                pause.duration = slider.value;

                var alphaOn:SetPropertyAction = new SetPropertyAction();
                alphaOn.name = "alpha";
                alphaOn.value = 1.0;

                var alphaOff:SetPropertyAction = new SetPropertyAction();
                alphaOff.name = "alpha";
                alphaOff.value = 0.0;

                wiper = new Sequence();
                wiper.addChild(alphaOn);
                wiper.addChild(wipeIn);
                wiper.addChild(pause);
                wiper.addChild(wipeOut);
                wiper.addChild(alphaOff);

                wiper.stop();
                wiper.play([box]);
            }
        ]]>
    </mx:Script>

    <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.

 
]]> http://blog.flexexamples.com/2008/04/23/sequencing-effects-in-flex-using-the-mxsequence-tag-redux/feed/ 6 Setting effects with ActionScript in Flex http://blog.flexexamples.com/2008/02/27/setting-effects-with-actionscript-in-flex/ http://blog.flexexamples.com/2008/02/27/setting-effects-with-actionscript-in-flex/#comments Thu, 28 Feb 2008 03:55:23 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/27/setting-effects-with-actionscript-in-flex/ The following example shows how you can set effects on a Flex Image control using ActionScript by setting the showEffect and hideEffect effects using the setStyle() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/27/setting-effects-with-actionscript-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Script> <![CDATA[ import mx.effects.easing.*; private function [...]]]> The following example shows how you can set effects on a Flex Image control using ActionScript by setting the showEffect and hideEffect effects using the setStyle() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/27/setting-effects-with-actionscript-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;

            private function init():void {
                img.setStyle("showEffect", rotate);
                img.setStyle("hideEffect", fade);
            }
        ]]>
    </mx:Script>

    <mx:Fade id="fade" />
    <mx:Rotate id="rotate"
            angleFrom="-180"
            angleTo="0"
            easingFunction="Elastic.easeInOut"
            duration="2000" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="visible:">
                <mx:ToggleButtonBar id="toggleButtonBar"
                        itemClick="img.visible = event.item.data;">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="Show" data="true" />
                            <mx:Object label="Hide" data="false" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ToggleButtonBar>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Image id="img"
            source="@Embed('assets/flashplayer_icon.jpg')"
            width="100"
            height="100" />

</mx:Application>

View source is enabled in the following example.

Or, you can also create the effect using ActionScript instead of MXML, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/27/setting-effects-with-actionscript-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;
            import mx.effects.Fade;
            import mx.effects.Rotate;

            private var fade:Fade;
            private var rotate:Rotate;

            private function init():void {
                // Fade effect
                fade = new Fade();
                // Rotate effect
                rotate = new Rotate();
                rotate.angleFrom = -180;
                rotate.angleTo = 0;
                rotate.easingFunction = Elastic.easeInOut;
                rotate.duration = 2000;

                img.setStyle("showEffect", rotate);
                img.setStyle("hideEffect", fade);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="visible:">
                <mx:ToggleButtonBar id="toggleButtonBar"
                        itemClick="img.visible = event.item.data;">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="Show" data="true" />
                            <mx:Object label="Hide" data="false" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ToggleButtonBar>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Image id="img"
            source="@Embed('assets/flashplayer_icon.jpg')"
            width="100"
            height="100" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/27/setting-effects-with-actionscript-in-flex/feed/ 21 Creating a custom creation complete effect on a Flex Alert control http://blog.flexexamples.com/2007/10/12/creating-a-custom-creation-complete-effect-on-a-flex-alert-control/ http://blog.flexexamples.com/2007/10/12/creating-a-custom-creation-complete-effect-on-a-flex-alert-control/#comments Fri, 12 Oct 2007 17:07:01 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/12/creating-a-custom-creation-complete-effect-on-a-flex-alert-control/ The following example shows how to specify an effect which gets played when an Alert control is displayed by setting the Alert control’s creationCompleteEffect style. You can also see how to embed both the normal and bold font using CSS and @font-face.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> [...]]]> The following example shows how to specify an effect which gets played when an Alert control is displayed by setting the Alert control’s creationCompleteEffect style. You can also see how to embed both the normal and bold font using CSS and @font-face.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/12/creating-a-custom-creation-complete-effect-on-a-flex-alert-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Verdana");
            fontFamily: VerdanaEmbedded;
        }

        @font-face {
            src: local("Verdana");
            fontFamily: VerdanaEmbedded;
            fontWeight: bold;
        }

        Alert {
            fontFamily: VerdanaEmbedded;
            creationCompleteEffect: myEffect;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private var alert:Alert;

            private function button_click():void {
                alert = Alert.show("The quick brown fox jumped over the lazy dog", "Lorem Ipsum");
            }
        ]]>
    </mx:Script>

    <mx:Sequence id="myEffect">
        <mx:Parallel>
            <mx:Zoom />
            <mx:Fade />
        </mx:Parallel>
        <mx:Rotate />
    </mx:Sequence>

    <mx:Button label="Launch Alert" click="button_click();" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/10/12/creating-a-custom-creation-complete-effect-on-a-flex-alert-control/feed/ 8 Sequencing effects in Flex using the mx:Sequence tag http://blog.flexexamples.com/2007/09/19/sequencing-effects-in-flex-using-the-mxsequence-tag/ http://blog.flexexamples.com/2007/09/19/sequencing-effects-in-flex-using-the-mxsequence-tag/#comments Thu, 20 Sep 2007 06:52:39 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/19/sequencing-effects-in-flex-using-the-mxsequence-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 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.

 
]]> http://blog.flexexamples.com/2007/09/19/sequencing-effects-in-flex-using-the-mxsequence-tag/feed/ 8