Creating a simple animated text ticker using the Spark TextInput control in Flex 4

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 www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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.

8 thoughts on “Creating a simple animated text ticker using the Spark TextInput control in Flex 4

    1. the both “txtInput.textDisplay” and “txtInput.textView” are giving compilation troubles to me
      the error is “undefined property contentWidth and width”

  1. If I rollOver the text after it stops at END to hold it, then it doesn’t resume where it left off; it snaps to BEGIN and starts scrolling from BEGIN to END again, and vice versa. It’s not programmed properly!

  2. modifications needed to use this Ticker in Flex 4.5:

    add:
    import spark.components.RichEditableText;

    Replace the following Line:
    pth.valueTo = friendNameLabel.textDisplay.contentWidth - friendNameLabel.textDisplay.width;

    With this Line:
    pth.valueTo = (friendNameLabel.textDisplay as RichEditableText).contentWidth - (friendNameLabel.textDisplay as RichEditableText).width;

Comments are closed.