flex 애니메이션 으로 html marquee 기능 구현

<?xml version="1.0" encoding="utf-8"?>
<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="hello javaeye  hello javaeye hello javaeye hello javaeye  hello javaeye hello javaeye hello javaeye"
            editable="false"
            fontSize="24"
            left="100" right="100"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="init();"
            resize="init();"
            rollOver="anim.pause();"
            rollOut="anim.resume();" />
  
</s:Application>