<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Flex Examples &#187; Sequence</title>
	<atom:link href="http://blog.flexexamples.com/category/sequence/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.flexexamples.com</link>
	<description>Just a bunch of Adobe Flex Examples</description>
	<lastBuildDate>Wed, 26 Jan 2011 18:09:51 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Sequencing effects in Flex using the mx:Sequence tag (redux)</title>
		<link>http://blog.flexexamples.com/2008/04/23/sequencing-effects-in-flex-using-the-mxsequence-tag-redux/</link>
		<comments>http://blog.flexexamples.com/2008/04/23/sequencing-effects-in-flex-using-the-mxsequence-tag-redux/#comments</comments>
		<pubDate>Thu, 24 Apr 2008 03:41:33 +0000</pubDate>
		<dc:creator>Peter deHaan</dc:creator>
				<category><![CDATA[Effects]]></category>
		<category><![CDATA[Fade]]></category>
		<category><![CDATA[Pause]]></category>
		<category><![CDATA[Sequence]]></category>
		<category><![CDATA[SetPropertyAction]]></category>
		<category><![CDATA[WipeRight]]></category>

		<guid isPermaLink="false">http://blog.flexexamples.com/2008/04/23/sequencing-effects-in-flex-using-the-mxsequence-tag-redux/</guid>
		<description><![CDATA[<p>In a previous example, <a href="http://blog.flexexamples.com/2007/09/19/sequencing-effects-in-flex-using-the-mxsequence-tag/">&#8220;Sequencing effects in Flex using the mx:Sequence tag&#8221;</a>, we saw how you could sequence tween effects using the &#60;mx:Sequence /&#62; tag.</p> <p>The following example shows how you can create the same sequenced effects using ActionScript instead of MXML.</p> <p>Full code after the jump.</p> <p></p> <p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/Sequence_test_2/bin/srcview/source/main.mxml.html">View MXML</a></p> &#60;?xml version="1.0" [...]]]></description>
			<content:encoded><![CDATA[<p>In a previous example, <a href="http://blog.flexexamples.com/2007/09/19/sequencing-effects-in-flex-using-the-mxsequence-tag/">&#8220;Sequencing effects in Flex using the mx:Sequence tag&#8221;</a>, we saw how you could sequence tween effects using the &lt;mx:Sequence /&gt; tag.</p>
<p>The following example shows how you can create the same sequenced effects using ActionScript instead of MXML.</p>
<p>Full code after the jump.</p>
<p><span id="more-605"></span></p>
<p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/Sequence_test_2/bin/srcview/source/main.mxml.html">View MXML</a></p>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- http://blog.flexexamples.com/2008/04/23/sequencing-effects-in-flex-using-the-mxsequence-tag-redux/ --&gt;
&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"&gt;

    &lt;mx:Script&gt;
        &lt;![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]);
            }
        ]]&gt;
    &lt;/mx:Script&gt;

    &lt;mx:ApplicationControlBar dock="true"&gt;
        &lt;mx:Button label="fade box"
                click="fade_click();" /&gt;
        &lt;mx:Button label="wipe box"
                click="wipe_click();" /&gt;

        &lt;mx:Spacer width="100%" /&gt;

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

    &lt;mx:Box id="box"
            width="100%"
            height="100%"
            backgroundColor="haloSilver"
            alpha="0.0" /&gt;

&lt;/mx:Application&gt;
</pre>
<p class="information"><a href="http://blog.flexexamples.com/wp-content/uploads/Sequence_test_2/bin/srcview/index.html">View source</a> is enabled in the following example.</p>
<p><iframe src="http://blog.flexexamples.com/wp-content/uploads/Sequence_test_2/bin/main.html" width="100%" height="250"></iframe></p>
<div class="evernoteSiteMemory"><a href="javascript:" onclick="Evernote.doClip({title: 'Sequencing effects in Flex using the mx:Sequence tag (redux) on FlexExamples.com',url: 'http://blog.flexexamples.com/2008/04/23/sequencing-effects-in-flex-using-the-mxsequence-tag-redux/',contentID: 'post-605',code: 'Pete9667',suggestNotebook: 'FlexExamples',suggestTags: '',providerName: 'FlexExamples.com',styling: 'text' });return false" class="evernoteSiteMemoryLink"><img src="http://static.evernote.com/article-clipper-remember.png" class="evernoteSiteMemoryButton" />
				</a>				<div class="evernoteSiteMemoryClear">&nbsp;</div>
</div>]]></content:encoded>
			<wfw:commentRss>http://blog.flexexamples.com/2008/04/23/sequencing-effects-in-flex-using-the-mxsequence-tag-redux/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Creating a custom creation complete effect on a Flex Alert control</title>
		<link>http://blog.flexexamples.com/2007/10/12/creating-a-custom-creation-complete-effect-on-a-flex-alert-control/</link>
		<comments>http://blog.flexexamples.com/2007/10/12/creating-a-custom-creation-complete-effect-on-a-flex-alert-control/#comments</comments>
		<pubDate>Fri, 12 Oct 2007 17:07:01 +0000</pubDate>
		<dc:creator>Peter deHaan</dc:creator>
				<category><![CDATA[Alert]]></category>
		<category><![CDATA[Fade]]></category>
		<category><![CDATA[Parallel]]></category>
		<category><![CDATA[Rotate]]></category>
		<category><![CDATA[Sequence]]></category>
		<category><![CDATA[Zoom]]></category>
		<category><![CDATA[@font face]]></category>
		<category><![CDATA[creationCompleteEffect]]></category>
		<category><![CDATA[local()]]></category>

		<guid isPermaLink="false">http://blog.flexexamples.com/2007/10/12/creating-a-custom-creation-complete-effect-on-a-flex-alert-control/</guid>
		<description><![CDATA[<p>The following example shows how to specify an effect which gets played when an Alert control is displayed by setting the Alert control&#8217;s creationCompleteEffect style. You can also see how to embed both the normal and bold font using CSS and @font-face.</p> <p>Full code after the jump.</p> <p></p> <p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/Alert_creationCompleteEffect_test/main.mxml">View MXML</a></p> &#60;?xml version="1.0" encoding="utf-8"?&#62; [...]]]></description>
			<content:encoded><![CDATA[<p>The following example shows how to specify an effect which gets played when an Alert control is displayed by setting the Alert control&#8217;s <code>creationCompleteEffect</code> style. You can also see how to embed both the normal and bold font using CSS and @font-face.</p>
<p>Full code after the jump.</p>
<p><span id="more-231"></span></p>
<p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/Alert_creationCompleteEffect_test/main.mxml">View MXML</a></p>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- http://blog.flexexamples.com/2007/10/12/creating-a-custom-creation-complete-effect-on-a-flex-alert-control/ --&gt;
&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"&gt;

    &lt;mx:Style&gt;
        @font-face {
            src: local("Verdana");
            fontFamily: VerdanaEmbedded;
        }

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

        Alert {
            fontFamily: VerdanaEmbedded;
            creationCompleteEffect: myEffect;
        }
    &lt;/mx:Style&gt;

    &lt;mx:Script&gt;
        &lt;![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");
            }
        ]]&gt;
    &lt;/mx:Script&gt;

    &lt;mx:Sequence id="myEffect"&gt;
        &lt;mx:Parallel&gt;
            &lt;mx:Zoom /&gt;
            &lt;mx:Fade /&gt;
        &lt;/mx:Parallel&gt;
        &lt;mx:Rotate /&gt;
    &lt;/mx:Sequence&gt;

    &lt;mx:Button label="Launch Alert" click="button_click();" /&gt;

&lt;/mx:Application&gt;
</pre>
<p class="information"><a href="http://blog.flexexamples.com/wp-content/uploads/Alert_creationCompleteEffect_test/bin/main.html">View source</a> is enabled in the following example.</p>
<p><iframe src="http://blog.flexexamples.com/wp-content/uploads/Alert_creationCompleteEffect_test/bin/main.html" width="100%" height="400"></iframe></p>
<div class="evernoteSiteMemory"><a href="javascript:" onclick="Evernote.doClip({title: 'Creating a custom creation complete effect on a Flex Alert control on FlexExamples.com',url: 'http://blog.flexexamples.com/2007/10/12/creating-a-custom-creation-complete-effect-on-a-flex-alert-control/',contentID: 'post-231',code: 'Pete9667',suggestNotebook: 'FlexExamples',suggestTags: '@font face,creationCompleteEffect,local()',providerName: 'FlexExamples.com',styling: 'text' });return false" class="evernoteSiteMemoryLink"><img src="http://static.evernote.com/article-clipper-remember.png" class="evernoteSiteMemoryButton" />
				</a>				<div class="evernoteSiteMemoryClear">&nbsp;</div>
</div>]]></content:encoded>
			<wfw:commentRss>http://blog.flexexamples.com/2007/10/12/creating-a-custom-creation-complete-effect-on-a-flex-alert-control/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Sequencing effects in Flex using the mx:Sequence tag</title>
		<link>http://blog.flexexamples.com/2007/09/19/sequencing-effects-in-flex-using-the-mxsequence-tag/</link>
		<comments>http://blog.flexexamples.com/2007/09/19/sequencing-effects-in-flex-using-the-mxsequence-tag/#comments</comments>
		<pubDate>Thu, 20 Sep 2007 06:52:39 +0000</pubDate>
		<dc:creator>Peter deHaan</dc:creator>
				<category><![CDATA[Effects]]></category>
		<category><![CDATA[Fade]]></category>
		<category><![CDATA[Pause]]></category>
		<category><![CDATA[Sequence]]></category>
		<category><![CDATA[SetPropertyAction]]></category>
		<category><![CDATA[WipeRight]]></category>

		<guid isPermaLink="false">http://blog.flexexamples.com/2007/09/19/sequencing-effects-in-flex-using-the-mxsequence-tag/</guid>
		<description><![CDATA[<p>The following example shows how you can use the &#60;mx:Sequence /&#62; 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.</p> <p>Full code after [...]]]></description>
			<content:encoded><![CDATA[<p>The following example shows how you can use the &lt;mx:Sequence /&gt; 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.</p>
<p>Full code after the jump.</p>
<p><span id="more-195"></span></p>
<p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/Sequence_test/main.mxml">View MXML</a></p>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- http://blog.flexexamples.com/2007/09/19/sequencing-effects-in-flex-using-the-mxsequence-tag/ --&gt;
&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"&gt;

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

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

    &lt;mx:Sequence id="fader"&gt;
        &lt;mx:Fade alphaFrom="0.0" alphaTo="1.0" /&gt;
        &lt;mx:Pause duration="{slider.value}" /&gt;
        &lt;mx:Fade alphaFrom="1.0" alphaTo="0.0" /&gt;
    &lt;/mx:Sequence&gt;

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

    &lt;mx:ApplicationControlBar dock="true"&gt;
        &lt;mx:Button label="fade box"
                click="fade_click();" /&gt;
        &lt;mx:Button label="wipe box"
                click="wipe_click();" /&gt;

        &lt;mx:Spacer width="100%" /&gt;

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

    &lt;mx:Box id="box"
            width="100%"
            height="100%"
            backgroundColor="haloSilver"
            alpha="0.0" /&gt;

&lt;/mx:Application&gt;
</pre>
<p class="information"><a href="http://blog.flexexamples.com/wp-content/uploads/Sequence_test/bin/srcview/index.html">View source</a> is enabled in the following example.</p>
<p><iframe src="http://blog.flexexamples.com/wp-content/uploads/Sequence_test/bin/main.html" width="100%" height="250"></iframe></p>
<div class="evernoteSiteMemory"><a href="javascript:" onclick="Evernote.doClip({title: 'Sequencing effects in Flex using the mx:Sequence tag on FlexExamples.com',url: 'http://blog.flexexamples.com/2007/09/19/sequencing-effects-in-flex-using-the-mxsequence-tag/',contentID: 'post-195',code: 'Pete9667',suggestNotebook: 'FlexExamples',suggestTags: '',providerName: 'FlexExamples.com',styling: 'text' });return false" class="evernoteSiteMemoryLink"><img src="http://static.evernote.com/article-clipper-remember.png" class="evernoteSiteMemoryButton" />
				</a>				<div class="evernoteSiteMemoryClear">&nbsp;</div>
</div>]]></content:encoded>
			<wfw:commentRss>http://blog.flexexamples.com/2007/09/19/sequencing-effects-in-flex-using-the-mxsequence-tag/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>

