A while back the blog Flex Wares had a simple marquee component. But, I can’t seem to download it anymore, so, I decided to write my own. It was simple and only took a few minutes. Note, it may not be the most efficient, but, its just an example of using some of the Flex effect properties that don’t get as much press like repeatCount=0 (which makes an effect play forever) and repeatDelay. Here is the Flex Marquee in an Application:
Demo: indexMarquee.swf
Sample Code: indexMarquee.mxml, MyMarquee.mxml
The MyMarquee component is based on a Canvas, so you can change any of the properties or styles on it such as its width, height, backgroundColor etc. I’ve also added in a few other custom properties including:
direction: “left” or “right”. The default is “left”.
moveDuration: The time in milliseconds for the marquee to show the full text.;
marqueeText: The text displayed by the marquee;
textStyleName: A class selector defining the styles for the text. In the example, I change the default color, fontSize and fontWeight.
So, here is the code from my sample using the MyMarquee component:
| <MyMarquee id=”mm” width=”200″ moveDuration=”20000″ marqueeText=”Thunder and lightning are rare in San Francisco.” textStyleName=”myText” backgroundColor=”0x000000″ borderStyle=”inset” borderThickness=”2″ /> |
Butterflies and Bugs 
Thanks for posting this – it will come in handy.
This is a great component. Just a quick question though…how would you set an infinite loop repeat on this?
This actually is on an infinite loop, if you watch the demo long enough. It is put on an infinite loop by setting the repeatCount property of the effect in MyMarquee.mxml to 0.
Ah yes, I apologize for my stupidity. Thanks!
I was just experimenting with the component and I thought of something. The speed of the scrolling is dependent on the length of the string because you are using an effect duration. So, a big string will move much faster than a smaller string given the same time duration. Is there anyway to make the speeds constant no matter what length the strings are?
I was looking for this. Thanks. Grate work.
I was trying to implement a similar component and was looking for a way to turn off the scroller when my text reaches the end of the container.
I saw from your example that I should use horizontalScrollPolicy=”off”.
Thanks for the tip!
Its amazing Thanks this is very useful component
Nice work!
To those asking about linear movement (constant marquee speed regardless of string length), you’ll need two things:
1. An easing function from the mx.effects.easing package,
import mx.effects.easing.Linear;
newEffect.easingFunction = Linear.easeNone;
2. A proper calculation for the total duration of the animation.
var speedPixelsPerSecond:Number = 100;
newEffect.duration = (( theText.width + width ) / speedPixelsPerSecond) * 1000;
So, in the createEffect() function in the code sample, add:
newEffect.easingFunction = Linear.easeNone;
var speedPixelsPerSecond:Number = 100;
newEffect.duration = (( theText.width + width ) / speedPixelsPerSecond) * 1000;
And along with the other import statements, add:
import mx.effects.easing.Linear
Good Luck!
how to convert Mymarquee.XML format to HTML format
Guys..!! this is really handy, can someone help me to add similar style(marquee) to images
How would pause functionality when a user mouses over the marquee be coded?
@noob: Add an event listener on the marquee component for the mouseOver event. On this event handler, call pause() on the effect that is being played. Add another event listener for the mouseOut event. On this event handler, call resume() on the effect.
@jlafferty: thank you!
Great component. I modified it somewhat to fit my needs. I have it so that it scrolls linearly, and the label goes back and forth with pauses in between (it’s for an mp3 playing app).
Does anyone now how to add html text to the marqueer textfield? and in the event of stop how to add a background only to a part of the text (the one that i has mouse over)? Thanks for the help.
Thanks you for sharing your knowledge with the rest of us …
Dimitrios from Athens .
Great component m8! thanx!
Great!
But there’s a problem when you add long long text, it seems be slowed and didn’t show text correctly.
Could you help me fix this, jlafferty ?