A coworker recently needed to marquee some text in a TextField. Having searched for this on the internet and found nothing for AS3, I decided to implement it. Turns out it’s really simple. The code is below.

My strategy is to simply move the first character to the end every N milliseconds. A timer makes this really easy:

var tf:TextField = new TextField();
tf.text = "Super Long Message Goes Here ";
tf.x = tf.y = 300;
addChild(tf);
var t:Timer = new Timer(200);
t.addEventListener(
    TimerEvent.TIMER,
    function(ev:TimerEvent): void
    {
        tf.text = tf.text.substr(1) + tf.text.charAt(0);
    }
);
t.start();

Most of that code is to set up the TextField. You could also wrap this functionality in a class:

package
{
    import flash.utils.Timer;
    import flash.text.TextField;
    import flash.events.TimerEvent;
 
    /**
    *   A text field that supports marqueeing
    *   @author Jackson Dunstan
    */
    public class MarqueeTextField extends TextField
    {
        /** Timer that ticks every time the marquee should be updated */
        private var __marqueeTimer:Timer;
 
        /**
        *   Make the text field
        */
        public function MarqueeTextField()
        {
            __marqueeTimer = new Timer(0);
            __marqueeTimer.addEventListener(TimerEvent.TIMER, onMarqueeTick);
        }
 
        /**
        *   Callback for when the marquee timer has ticked
        *   @param ev TIMER event
        */
        private function onMarqueeTick(ev:TimerEvent): void
        {
            this.text = this.text.substr(1) + this.text.charAt(0);
        }
 
        /**
        *   Start marqueeing
        *   @param delay Number of milliseconds between wrapping the first
        *                character to the end or negative to stop marqueeing
        */
        public function marquee(delay:int): void
        {
            __marqueeTimer.stop();
            if (delay >= 0)
            {
                __marqueeTimer.delay = delay;
                __marqueeTimer.start();
            }
        }
    }
}

And here is the same example from above, but this time using the MarqueeTextField class:

var tf:MarqueeTextField = new MarqueeTextField();
tf.text = "Super Long Message Goes Here ";
tf.x = tf.y = 300;
tf.marquee(200);
addChild(tf);

Feel free to adapt this simple marqueeing functionality to any base TextField class you may have in any framework you use.