Flex Examples
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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
If anyone had compilation troubles with
“txtInput.textDisplay”
then try
“txtInput.textView”
@Reegz,
Correct. The property was named
textViewin earlier versions of the beta Flex 4 SDK.Peter
the both “txtInput.textDisplay” and “txtInput.textView” are giving compilation troubles to me
the error is “undefined property contentWidth and width”
Hi, how do I apply the same concept for Label or Text component in flex gumbo?
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!
i use it in window air application but it is not smooth.
can i smooth this ticker?
how it is possible?
Damn, your blog is so awesome. Thanks man, for all these examples.
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;