Tuesday, July 1, 2008

Flex scrolling text component with html support

For one of my websites I would like to have a scrolling text bar with the lasted updates of that website. This is easy in flex, Peter Ent already made a flex builder 3 library project. This project only supports scrolling text. I want to click on the scrolling text and flex should redirect the browser to the right update. So I changed Peter Ent project so it supports the htmlText and Link event. With htmlText you can markup the scrolling text.
With this new library projectI made a flex application which reads a xml with all the scrolling text entries. Now I only have to update the xml if I make a change to the website. You can click on one of the scrolling entries and the link event redirects this to the right url. Here is an picture of the scrolling bar.
Here is the xml which I use as input for the scrolling htmlText.

<update date="28-06-2008" link="" label="Raceteam"/>
<update date="26-06-2008" link="" label="Kerkdriel race 2"/>
<update date="26-06-2008" link="" label="Kerkdriel race 1"/>
<update date="24-06-2008" link="" label="Fotoalbum"/>

My Flex project code which reads the input xml and handles the link event.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=""
width="100%" height="25"
backgroundGradientColors="[#CCCCCC, #CCCCCC]"
verticalScrollPolicy="off" layout="absolute">

public function linkHandler(event:TextEvent):void {
navigateToURL(new URLRequest(event.text), '_self')

private function resultHandler(event:ResultEvent):void {
var resultObj:Object = event.result as Object;
var i:int;
var updatesText:String = "<font color='#000000' size='14'>"
+"Laatste updates: ";
for ( i = 0 ; i < resultObj.updates.update.length ; i++ ) {
updatesText += "<a href='event:"+resultObj.updates.update[i].link+"'>"
+"<b>"+resultObj.updates.update[i].date+"</b> "
+resultObj.updates.update[i].label+"</a> ";

scroll.htmlText = updatesText;
scroll.addEventListener("link", linkHandler);

private function mouseOver():void {
private function mouseOut():void {

<mx:HTTPService id="service" url="updates.xml"
showBusyCursor="true" />
<comp:ScrollingText id="scroll" width="100%" height="100%"
color="black" speed="3" x="0" y="0"
mouseOver="mouseOver()" mouseOut="mouseOut()"/>


  1. Hi Edwin,
    I am tryig to use you component to make a scrolling news ticker. I have it woking quite well, and the content is refreshed every 10 minutes via XML. however as soon as I have more text than can fit on the screen at once the component resizes and I get scrollbars. I have it inside a Panel as in your example but I have the width at 100% so that it fills the screen. is there a way to prevent the scrollbars appearing?

  2. Hi Martin,

    I will take a look.

    Thanks Edwin

  3. Hi Martin,

    I changed the mxml so there is no scrollbars and if you do a mouse over the scrolling text stops so you can click on the update.

    Thanks Edwin

  4. I'm trying to do something very similar to this and tried to use your code just as is. I am fairly new to Flex but know the basics. I imported the project and then copied your MXML contents into a new MXML document in the project. I get an error that says:
    "046: Type was not found or was not a compile-time constant: ScrollingText. RSS2/src RSS3.mxml line 49 1221706942592 190"
    Any ideas?

  5. Hi

    are you using Flex 3 and did you download my library component and add this to the project.

    thanks Edwin

  6. Hi Edwin,

    Thanks for posting this online. It was a very helpful find!

    In case anyone else needed this... I was able to smooth out the scrolling animation by adding a 'frameRate="60"' attribute to my mx:Application tag.

  7. Hi Edwin,

    Thanks for putting this together, first of all. :)

    I'm having a small problem, though. I need to have line-breaks in my scroller - it's a vertically-scrolling list of urls. I can't seem to get it to recognise
    tags, although I had understood that the main reason for your creating your version was to allow more HTML to be used. I also tried using the \n type of line-break, but all that happens then is that it displays the first item and nothing else.

    Can you suggest what I might be doing wrong?

  8. You don't need that hack .. to have html text in Peter Ent's Scrolling Text it's enaugh to change lines 198 - 199 from this:

    cache[0].text = text;
    cache[1].text = text;

    to this:

    cache[0].htmlText = text;
    cache[1].htmlText = text;

  9. Its an xcellent job... working very much fine and was looking for this component.. thanks

  10. hi edwin,
    how to display the text with some linebreak if i use this component? pls advice