Flex Examples » SimpleMotionPath http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Creating blinking text on a Spark RichText control in Flex 4 http://blog.flexexamples.com/2010/08/13/creating-blinking-text-on-a-spark-richtext-control-in-flex-4/ http://blog.flexexamples.com/2010/08/13/creating-blinking-text-on-a-spark-richtext-control-in-flex-4/#comments Fri, 13 Aug 2010 21:09:54 +0000 Peter deHaan http://blog.flexexamples.com/?p=3239 The following example shows how you can create a blinking text effect on a Spark RichText control in Flex 4 using a simple property animation with the Animate and SimpleMotionPath classes to tween the alpha property.

I’d like to dedicate this post to the two people that searched for this on my blog [...]]]> The following example shows how you can create a blinking text effect on a Spark RichText control in Flex 4 using a simple property animation with the Animate and SimpleMotionPath classes to tween the alpha property.

I’d like to dedicate this post to the two people that searched for this on my blog (who may be the only people to want to bring back the old HTML blinking text effect).

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/08/13/creating-blinking-text-on-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_blink_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Declarations>
        <s:Animate id="fader"
                duration="500"
                repeatBehavior="reverse"
                repeatCount="0"
                target="{lbl}">
            <s:SimpleMotionPath property="alpha"
                    valueFrom="1.0" valueTo="0.0" />
        </s:Animate>
    </fx:Declarations>
 
    <s:Label id="lbl"
            text="BLINKING TEXT, I HATE YOU!"
            color="red"
            fontSize="32"
            creationComplete="fader.play();" />
 
</s:Application>

This entry is based on a beta version of the Flex 4 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 4 SDK.

 
]]> http://blog.flexexamples.com/2010/08/13/creating-blinking-text-on-a-spark-richtext-control-in-flex-4/feed/ 7 Creating an animated transition when scrolling through items in a Spark HGroup container in Flex 4 http://blog.flexexamples.com/2009/11/11/creating-an-animated-transition-when-scrolling-through-items-in-a-spark-hgroup-container/ http://blog.flexexamples.com/2009/11/11/creating-an-animated-transition-when-scrolling-through-items-in-a-spark-hgroup-container/#comments Wed, 11 Nov 2009 15:17:48 +0000 Peter deHaan http://blog.flexexamples.com/?p=2183 The following example shows how you can create a simple horizontal list using a HGroup container and do an animated scroll using the Animate and SimpleMotionPath classes and the getHorizontalScrollPositionDelta() method

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/11/11/creating-an-animated-transition-when-scrolling-through-items-in-a-spark-hgroup-container/ --> <s:Application name="Spark_HGroup_horizontalScrollPosition_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:Script> <![CDATA[ import spark.core.NavigationUnit;   protected [...]]]> The following example shows how you can create a simple horizontal list using a HGroup container and do an animated scroll using the Animate and SimpleMotionPath classes and the getHorizontalScrollPositionDelta() method

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/11/creating-an-animated-transition-when-scrolling-through-items-in-a-spark-hgroup-container/ -->
<s:Application name="Spark_HGroup_horizontalScrollPosition_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:Script>
        <![CDATA[
            import spark.core.NavigationUnit;
 
            protected function scrollToThere(dir:uint):void {
                var value:Number = hGr.getHorizontalScrollPositionDelta(dir);
                if (value != 0) {
                    pth.valueBy = value;
                    anim.play();
                }
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:Animate id="anim" target="{hGr}" duration="500">
            <s:motionPaths>
                <s:SimpleMotionPath id="pth" property="horizontalScrollPosition" />
            </s:motionPaths>
        </s:Animate>
    </fx:Declarations>
 
    <s:Panel title="HGroup horizontalScrollPosition test"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:HorizontalLayout verticalAlign="middle" />
        </s:layout>
        <s:Button label="&lt;"
                click="scrollToThere(NavigationUnit.PAGE_LEFT);"
                width="30" />
        <s:HGroup id="hGr"
                requestedColumnCount="3"
                columnWidth="100"
                variableColumnWidth="false"
                height="100"
                clipAndEnableScrolling="true">
            <s:Label text="One" backgroundColor="red" backgroundAlpha="0.1" height="100%" />
            <s:Label text="Two" backgroundColor="red" backgroundAlpha="0.2" height="100%" />
            <s:Label text="Three" backgroundColor="red" backgroundAlpha="0.3" height="100%" />
            <s:Label text="Four" backgroundColor="red" backgroundAlpha="0.4" height="100%" />
            <s:Label text="Five" backgroundColor="red" backgroundAlpha="0.5" height="100%" />
            <s:Label text="Six" backgroundColor="red" backgroundAlpha="0.6" height="100%" />
            <s:Label text="Seven" backgroundColor="red" backgroundAlpha="0.7" height="100%" />
            <s:Label text="Eight" backgroundColor="red" backgroundAlpha="0.8" height="100%" />
            <s:Label text="Nine" backgroundColor="red" backgroundAlpha="0.9" height="100%" />
            <s:Label text="Ten" backgroundColor="red" backgroundAlpha="1.0" height="100%" />
        </s:HGroup>
        <s:Button label="&gt;"
                click="scrollToThere(NavigationUnit.PAGE_RIGHT);"
                width="30" />
    </s:Panel>
 
</s:Application>

This entry is based on a beta version of the Flex 4 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 4 SDK.

 
]]> http://blog.flexexamples.com/2009/11/11/creating-an-animated-transition-when-scrolling-through-items-in-a-spark-hgroup-container/feed/ 8 Creating a simple animated text ticker using the Spark TextInput control in Flex 4 http://blog.flexexamples.com/2009/08/25/creating-a-simple-animated-text-ticker-using-the-spark-textinput-control-in-flex-4/ http://blog.flexexamples.com/2009/08/25/creating-a-simple-animated-text-ticker-using-the-spark-textinput-control-in-flex-4/#comments Tue, 25 Aug 2009 14:02:46 +0000 Peter deHaan http://blog.flexexamples.com/?p=1738 The following example shows how you can create a simple, animated text ticker using a Spark TextInput control in Flex 4 by using the Animate and SimpleMotionPath classes to tween the horizontalScrollPosition property.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/25/creating-a-simple-animated-text-ticker-using-the-spark-textinput-control-in-flex-4/ --> <s:Application name="Spark_TextInput_textDisplay_horizontalScrollPosition_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:Script> <![CDATA[ protected function [...]]]> The following example shows how you can create a simple, animated text ticker using a Spark TextInput control in Flex 4 by using the Animate and SimpleMotionPath classes to tween the horizontalScrollPosition property.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/25/creating-a-simple-animated-text-ticker-using-the-spark-textinput-control-in-flex-4/ -->
<s:Application name="Spark_TextInput_textDisplay_horizontalScrollPosition_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:Script>
        <![CDATA[
            protected function init():void {
                anim.stop();
                pth.valueFrom = 0;
                pth.valueTo = txtInput.textDisplay.contentWidth - txtInput.textDisplay.width;
                anim.play([txtInput.textDisplay]);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:Animate id="anim"
                duration="10000"
                repeatBehavior="reverse"
                repeatCount="0"
                repeatDelay="500">
            <s:motionPaths>
                <s:SimpleMotionPath id="pth"
                        property="horizontalScrollPosition" />
            </s:motionPaths>
        </s:Animate>
    </fx:Declarations>
 
    <s:TextInput id="txtInput"
            text="BEGIN -- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus laoreet porttitor. Nullam a urna eget augue lacinia sodales ornare in justo. -- END"
            editable="false"
            fontSize="24"
            left="100" right="100"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="init();"
            resize="init();"
            rollOver="anim.pause();"
            rollOut="anim.resume();" />
 
</s:Application>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 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 4 SDK.

 
]]> http://blog.flexexamples.com/2009/08/25/creating-a-simple-animated-text-ticker-using-the-spark-textinput-control-in-flex-4/feed/ 8