<?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; Animate</title>
	<atom:link href="http://blog.flexexamples.com/category/animate/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>Creating a simple animated text ticker using the Spark TextInput control in Flex 4</title>
		<link>http://blog.flexexamples.com/2009/08/25/creating-a-simple-animated-text-ticker-using-the-spark-textinput-control-in-flex-4/</link>
		<comments>http://blog.flexexamples.com/2009/08/25/creating-a-simple-animated-text-ticker-using-the-spark-textinput-control-in-flex-4/#comments</comments>
		<pubDate>Tue, 25 Aug 2009 14:02:46 +0000</pubDate>
		<dc:creator>Peter deHaan</dc:creator>
				<category><![CDATA[Animate]]></category>
		<category><![CDATA[beta1]]></category>
		<category><![CDATA[RichEditableText]]></category>
		<category><![CDATA[TextInput (Spark)]]></category>
		<category><![CDATA[contentWidth]]></category>
		<category><![CDATA[Gumbo]]></category>
		<category><![CDATA[horizontalScrollPosition]]></category>
		<category><![CDATA[motionPaths]]></category>
		<category><![CDATA[repeatBehavior]]></category>
		<category><![CDATA[repeatCount]]></category>
		<category><![CDATA[repeatDuration]]></category>
		<category><![CDATA[SimpleMotionPath]]></category>
		<category><![CDATA[textDisplay]]></category>

		<guid isPermaLink="false">http://blog.flexexamples.com/?p=1738</guid>
		<description><![CDATA[<p>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.</p> <p>Full code after the jump.</p> <p></p> &#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&#62; &#60;!-- http://blog.flexexamples.com/2009/08/25/creating-a-simple-animated-text-ticker-using-the-spark-textinput-control-in-flex-4/ --&#62; &#60;s:Application name=&#34;Spark_TextInput_textDisplay_horizontalScrollPosition_test&#34; xmlns:fx=&#34;http://ns.adobe.com/mxml/2009&#34; xmlns:s=&#34;library://ns.adobe.com/flex/spark&#34; xmlns:mx=&#34;library://ns.adobe.com/flex/halo&#34;&#62; &#160; &#60;fx:Script&#62; &#60;!&#91;CDATA&#91; protected function [...]]]></description>
			<content:encoded><![CDATA[<p>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 <code>horizontalScrollPosition</code> property.</p>
<p>Full code after the jump.</p>
<p><span id="more-1738"></span></p>
<p class="alert">The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see <a href="http://bit.ly/crThlI">http://www.adobe.com/products/flex/</a>. To download the latest nightly build of the Flex 4 SDK, see <a href="http://bit.ly/Flex4SDK">http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4</a>.<br/><strong>For more information on getting started with Flex 4 and Flash Builder 4, see the official <a href="http://bit.ly/dCkecm">Adobe Flex Team blog</a>.</strong></p>

<div class="wp_syntax"><div class="code"><pre class="mxml" style="font-family:monospace;"><span style="color: #000000;">&lt;?xml version=<span style="color: #ff0000;">&quot;1.0&quot;</span> encoding=<span style="color: #ff0000;">&quot;utf-8&quot;</span>?<span style="color: #7400FF;">&gt;</span></span>
<span style="color: #000000;"><span style="color: #808080; font-style: italic;">&lt;!-- http://blog.flexexamples.com/2009/08/25/creating-a-simple-animated-text-ticker-using-the-spark-textinput-control-in-flex-4/ --&gt;</span></span>
<span style="color: #000000;"><span style="color: #7400FF;">&lt;s:Application</span> name=<span style="color: #ff0000;">&quot;Spark_TextInput_textDisplay_horizontalScrollPosition_test&quot;</span></span>
<span style="color: #000000;">        xmlns:fx=<span style="color: #ff0000;">&quot;http://ns.adobe.com/mxml/2009&quot;</span></span>
<span style="color: #000000;">        xmlns:s=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/spark&quot;</span></span>
<span style="color: #000000;">        xmlns:mx=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/halo&quot;</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;fx:Script</span><span style="color: #7400FF;">&gt;</span></span>
        <span style="color: #000000;">&lt;!<span style="color: #66cc66;">&#91;</span>CDATA<span style="color: #66cc66;">&#91;</span></span>
<span style="color: #000000;">            protected function init<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:void <span style="color: #66cc66;">&#123;</span></span>
<span style="color: #000000;">                anim.stop<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</span>
<span style="color: #000000;">                pth.valueFrom = <span style="color: #cc66cc;">0</span>;</span>
<span style="color: #000000;">                pth.valueTo = txtInput.textDisplay.contentWidth - txtInput.textDisplay.width;</span>
<span style="color: #000000;">                anim.play<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#91;</span>txtInput.textDisplay<span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span>;</span>
<span style="color: #000000;">            <span style="color: #66cc66;">&#125;</span></span>
<span style="color: #000000;">        <span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#93;</span><span style="color: #7400FF;">&gt;</span></span>
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;/fx:Script</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;fx:Declarations</span><span style="color: #7400FF;">&gt;</span></span>
        <span style="color: #000000;"><span style="color: #7400FF;">&lt;s:Animate</span> id=<span style="color: #ff0000;">&quot;anim&quot;</span></span>
<span style="color: #000000;">                duration=<span style="color: #ff0000;">&quot;10000&quot;</span></span>
<span style="color: #000000;">                repeatBehavior=<span style="color: #ff0000;">&quot;reverse&quot;</span></span>
<span style="color: #000000;">                repeatCount=<span style="color: #ff0000;">&quot;0&quot;</span></span>
<span style="color: #000000;">                repeatDelay=<span style="color: #ff0000;">&quot;500&quot;</span><span style="color: #7400FF;">&gt;</span></span>
            <span style="color: #000000;"><span style="color: #7400FF;">&lt;s:motionPaths</span><span style="color: #7400FF;">&gt;</span></span>
                <span style="color: #000000;"><span style="color: #7400FF;">&lt;s:SimpleMotionPath</span> id=<span style="color: #ff0000;">&quot;pth&quot;</span></span>
<span style="color: #000000;">                        property=<span style="color: #ff0000;">&quot;horizontalScrollPosition&quot;</span> <span style="color: #7400FF;">/&gt;</span></span>
            <span style="color: #000000;"><span style="color: #7400FF;">&lt;/s:motionPaths</span><span style="color: #7400FF;">&gt;</span></span>
        <span style="color: #000000;"><span style="color: #7400FF;">&lt;/s:Animate</span><span style="color: #7400FF;">&gt;</span></span>
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;/fx:Declarations</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;s:TextInput</span> id=<span style="color: #ff0000;">&quot;txtInput&quot;</span></span>
<span style="color: #000000;">            text=<span style="color: #ff0000;">&quot;BEGIN -- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus laoreet porttitor. Nullam a urna eget augue lacinia sodales ornare in justo. -- END&quot;</span></span>
<span style="color: #000000;">            editable=<span style="color: #ff0000;">&quot;false&quot;</span></span>
<span style="color: #000000;">            fontSize=<span style="color: #ff0000;">&quot;24&quot;</span></span>
<span style="color: #000000;">            left=<span style="color: #ff0000;">&quot;100&quot;</span> right=<span style="color: #ff0000;">&quot;100&quot;</span></span>
<span style="color: #000000;">            horizontalCenter=<span style="color: #ff0000;">&quot;0&quot;</span> verticalCenter=<span style="color: #ff0000;">&quot;0&quot;</span></span>
<span style="color: #000000;">            creationComplete=<span style="color: #ff0000;">&quot;init();&quot;</span></span>
<span style="color: #000000;">            resize=<span style="color: #ff0000;">&quot;init();&quot;</span></span>
<span style="color: #000000;">            rollOver=<span style="color: #ff0000;">&quot;anim.pause();&quot;</span></span>
<span style="color: #000000;">            rollOut=<span style="color: #ff0000;">&quot;anim.resume();&quot;</span> <span style="color: #7400FF;">/&gt;</span></span>
&nbsp;
<span style="color: #000000;"><span style="color: #7400FF;">&lt;/s:Application</span><span style="color: #7400FF;">&gt;</span></span></pre></div></div>

<p class="information"><a href="http://blog.flexexamples.com/wp-content/uploads/spark/Spark_TextInput_textDisplay_horizontalScrollPosition_test/bin/srcview/">View source</a> is enabled in the following example.</p>
<p><iframe src="http://blog.flexexamples.com/wp-content/uploads/spark/Spark_TextInput_textDisplay_horizontalScrollPosition_test/bin/main.html" width="100%" height="150"></iframe></p>
<p class="alert">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.</p>
<div class="evernoteSiteMemory"><a href="javascript:" onclick="Evernote.doClip({title: 'Creating a simple animated text ticker using the Spark TextInput control in Flex 4 on FlexExamples.com',url: 'http://blog.flexexamples.com/2009/08/25/creating-a-simple-animated-text-ticker-using-the-spark-textinput-control-in-flex-4/',contentID: 'post-1738',code: 'Pete9667',suggestNotebook: 'FlexExamples',suggestTags: 'contentWidth,Gumbo,horizontalScrollPosition,motionPaths,repeatBehavior,repeatCount,repeatDuration,SimpleMotionPath,textDisplay',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/2009/08/25/creating-a-simple-animated-text-ticker-using-the-spark-textinput-control-in-flex-4/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>

