Simple TextField Marquee
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.
#1 by Robert on October 28th, 2009 ·
Great snippet, and very simple!
#2 by jackson on October 28th, 2009 ·
Thanks. Apparently you and I have both been thinking about TextFields recently. :)
#3 by GordonFlash on March 9th, 2010 ·
Thank You very much Jackson for this Code, been looking for a simple solution for a while!
Regards!!!
#4 by naive on March 16th, 2010 ·
Thanx bro .it helped a lot
#5 by cesar on July 27th, 2010 ·
Hey nice job, a great class for as3!!!
#6 by ilu on October 19th, 2011 ·
Hai Its Very useful information.But the Size of text is Very Small,How Can i add the size and Color?
#7 by jackson on October 19th, 2011 ·
Sure, just put something in the constructor of
MarqueeTextField
like this:These could easily be parameters to the constructor for easy customization.
For more formatting options, see Adobe’s documentation
#8 by ilu on October 20th, 2011 ·
ya thankyou i got it.But the Screen Displays the 6 letter Only.i need to display the Full Screen.how Can i do this?
#9 by jackson on October 20th, 2011 ·
You can also size the
MarqueeTextField
however you’d like. For examples:Note that I moved
defaultTextFormat
out of the constructor, which on second thought I think is a better idea design-wise.#10 by Naresh kumar on December 2nd, 2011 ·
it was wonderful example to everyone i got how to fix the problem of height for text thanks soo much plzz provide few more examples on the flash by next time
#11 by bala on March 3rd, 2012 ·
good work.
#12 by Dan on March 30th, 2012 ·
This is great cheers, is there a way of making the animation any smoother? Cheers
#13 by jackson on April 2nd, 2012 ·
There are definitely ways of making the animation smoother, but this class is intended to be simple. If you’d like to, try using a
scrollRect
ormask
on theMarqueeTextField
to cut off some of the text and combine this with a smaller timer value (e.g. 50) to update more often. Exactly how to implement this is an exercise for the reader. :)