Scrolling Text Component

Here’s another example of a Flex component. This one scrolls a message within a fixed area. The message can be scrolled vertically or horizontally. You can give it a try right here:

This component shows how to use custom properties, meta data to work with Flex Builder, and overriding functions.

Click here to download the source code. The download is a Flex Builder 3 Beta 3 project – if you do not have Flex Builder 3 Beta 3 from Adobe Labs, you can open the file as a regular archive and use the source code.

27 Responses to Scrolling Text Component

  1. Lordy says:

    Thanks for the component, perfect timing as my project needed this. Was doing the same effect using canvas, didn’t think about using the mask.
    BTW when is it better to use Label instead of UItextfield? I thought for custom components UItextfield was the prefered component to use.
    Thanks
    —————
    Peter: You should be able to use UITextField in this case, too. In general, if you start with UIComponent and need static text, use UITextField as it is lighter weight. I tend to use Label in example because it is a bit easier to understand and more familiar to new Flex users.

  2. Ivan says:

    Amazing…
    Thanks

  3. I am relatively new to flex.. I was looking for something like this. I have a project where I would like to use your component. I am currently running Flex Builder 3 Beta 3. I have the swc included in the libs folder of my project and have the following code to create an instance:

    <controls:ScrollingText text=”Balaji Ramesh” direction=”leftToRight” speed=”2″ width=”100%” />

    The code compiles fine but I don’t see the scroller. Am i missing something here?

    Thanks,
    Balaji Ramesh
    ——————
    Peter: You also need to specify a height; the default is 0.

  4. Hi Peter,

    Thanks for your response. I tried setting the height but still could not get it to work. I am not sure if i am doing something wrong. Can you enable view source on the above example. Maybe that would help.

    – Balaji
    ————-
    Peter: There is a link in the article to download the source code.

  5. I did get the source code from the link and thats how i got the SWC file but what i wanted was the markup required to create the scroller. This is what i am using and i still dont see it 🙁 Sorry if i am being a little pesky:

    ——————
    Peter: If you take the sample application and replaces the constraints (left, top, right, bottom) on the ScrollingText tag with height=”10%” width=”50%” you should still see it working.

    If that is true for you as well, then my guess is that 10% of the container’s height (or 50% of the width) in your example is just too small.

  6. oscar says:

    It seems that you are missing one line for the
    RIGHT_TO_LEFT moveText() function
    cache[currentIndex].x -= messageSpeed;
    Without that, the text woudln’t scroll from left to right wouldn’t go
    ————
    Peter: Hmm. I thought I posted the code right when I made the example of the page. I must have messed around with it a bit first. Thanks for catching that. I’ll try to repost the code.

  7. steve says:

    Hi, I’m getting a blank canvas, here is my application code:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml&quot;
    xmlns:comp="peter.*" layout="absolute">

    <mx:Canvas id="myCanvas" width="500" height="500"
    backgroundColor="blue">
    <comp:ScrollingText text="Hello World" direction="rightToLeft"
    speed="5" width="100%" />

    </mx:Canvas>
    </mx:Application>

    I’m using the latest version of Flex beta 3

    I created a folder ‘peter’ and created a new actionscript class ‘ScrollingText.as’ and ran it, no errors, I turned on debugging, it does go into the class and executes. . .
    any ideas? thanks,
    ———–
    Peter: Sorry for the delay, I was on vacation. You need to do 2 extra thngs: 1) give the ScrollingText component an id (eg, id=’scrollingText’) and then 2) start it scrolling by doing scrollingText.start() from an event handler like

  8. steve says:

    How hard would it be to make the text ‘clickable’ (open up a new window)?
    how would I do that? use an htmltext field?
    thanks,

  9. korb3n says:

    Good work for this component!

    I’m working with Builder 2 and try to use htmlText property like you suggest to steve.

    I’ve just replace some code like ‘text’ reference for ‘htmlText’.

    It works with a sample text and or tags but no with tag or .

    Have you a idea ?

    Something else : Text in my ScrollingText component doesn’t do any line break when line is larger than box and content was truncated.
    Is there a solution ?

    Thank you and sorry for my english..
    ————
    Peter: I’m afraid I’m not really sure what you are trying to do. As for the line break – the component uses a Label which does not do that. You’d have to change it to a Text component and then set a specific width – that is the only way to get the line break.

  10. korb3n says:

    Sorry for the holes in my previous post.

    I was saying that when i use the htmlText property in your class to get my text, it displays fine ‘b’ or ‘font’ tags but no ‘br’ or ‘a’ tag.

    For line breaks, i’ll try to do with your answer. Perhaps it will resolve my other problem.

    Thank you Peter.

  11. gopinathan says:

    hello all ! i need a help i want a guidlines for scrolling a text in label box in vb 6.0.and it should have to updated automatically
    ———
    Peter: I’m sorry, but I don’t know VB – this is my blog about Adobe Flex.

  12. gordon says:

    I’m scrolling a large font text and it looks a little choppy even at 30 fps. Is there a way to make the movement smoother?
    —————
    Peter: You might try setting the two Label’s cacheAsBitmap flag to true and maybe use an embedded font. In my tests I didn’t notice any real improvement, but give it a shot.

  13. Alex says:

    This is great many thanks!

    I’d like to freeze the text if it is smaller than the control. I use measuredWidth to check that but then if I call stop() the text doesn’t display at all. Any way around that?

    Thanks,
    Alex
    ————————-
    Peter: I’ll have to experiment with that. Simply calling stop() does make it freeze and it still displays. I’ll look into this as soon as I can.

  14. Edwin Biemond says:

    Hi Peter,

    I changed your project so it’s supports htmlText and the link event.

    http://biemond.blogspot.com/2008/07/flex-scrolling-text-component-with-html.html

    thanks for the great example

  15. Jason Wright says:

    I’ve downloaded your components but I don’t see how I can implement the component into a project of mine.

  16. Peter Ent says:

    You can either drop the source directly into your project and create a new Flex Library Project (assuming you are using Flex Builder) and create a .SWC which you can then add to your project’s build path.

  17. Ruishi says:

    This is awesome! Exactly what I was looking for~ Thanks!

  18. Steph Mad says:

    Hi Peter,

    Thanx for the great component and really handy.

    I have a small problem though, maybe you’ll have an idea.
    I’m using the ScrollingText as well as a TileList; They are in different containers. They somehow seem to interfere with each other.

    My TileList randomly displays images. The image change is based on a timer tick. When the TileList has no associated transition effect the ScrollingText behaves perfectly.
    But as soon as I define and use an effect in the TileList, the speed of the text accelerates and the TileList transitions just stop happening. When the scrolling of the text programatically stops, the TileList starts behaving normally again.

    I’ve looked at the code and I can’t understand why both interact this way. My code uses a Timer to change the contents of the Tiled images, I’m not even using the ENTER_FRAME event.

    Any idea ??
    Thanx
    —————
    Peter: Post your question to Flex Coders; someone there may be able to help.

  19. David says:

    Can you post a working Flex Project with source for this? The source provided does not include usage of the component.
    I can’t for the life of me get this to display the text I pass to it. When I view redraw regions, I can see an empty rect scrolling up in the ScrollingText component’s area, and when I do some traces, it doesn’t appear to measure things properly…

    Here is my component usage:

    <controls:ScrollingText id=”scrollingText” creationComplete=”scrollingText.start()” text=”hello world” direction=”bottomToTop” speed=”1″ height=”324″ width=”160″ x=”18″ y=”306″ />

  20. neo says:

    Hi, i have a flex builder 3.0. As i am new to it, i have no idea how i actually test out your sample program.

    Could you provide a step by step tutorial set up guide for it?

    Thanks a million in advance

  21. Peter Ent says:

    1. Create a new project in Flex Builder.
    2. Select the src directory in the project, then Import->Archive File.
    3. Browse to the zip file and select it.
    4. De-select the / directory and expand it. Select just the asdoc-output and com directories. This was created for a beta version of Flex, so just bring in these two directories. Pick Finish.
    5. In your main application, add the scrolling text tag from the blog article or event something as simple as this:

    <controls:ScrollingText width=”400″ text=”This is a test”
    verticalCenter=”0″
    horizontalCenter=”0″
    creationComplete=”event.target.start()” />

    That should do it.

  22. marco says:

    I got this errror when try to run the SWF. Can you help me ? Tks

    VerifyError: Error #1014: Class flash.events::NativeWindowBoundsEvent could not be found.

    at flash.display::MovieClip/nextFrame()
    at mx.managers::SystemManager/deferredNextFrame()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\SystemManager.as:299]
    at mx.managers::SystemManager/preloader_initProgressHandler()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\SystemManager.as:2211]
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at mx.preloaders::Preloader/timerHandler()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\preloaders\Preloader.as:398]
    at flash.utils::Timer/_timerDispatch()
    at flash.utils::Timer/tick()

  23. Peter Ent says:

    When you say, “try to run the SWF” – are you referring to the SWF that’s on the blog page or trying to run your own version from say, Flex Builder?

    If you are having trouble simply viewing the page in the blog, I’m not sure what I can do to help. I’ve tested this on Windows, Linux, and Mac OS X with IE, Safari, and Firefox.

  24. marco says:

    I am sorry Peter for lack of information. I tried to run the project from Flex Builder. The error already disappeared but when I run it, only blank page showed. Below is the mxml code. Any problem with this code ?

    Thanks

  25. june says:

    hi, peter. thanks for your great work.
    I see your codes in book that printed in Korea. It’s name was ‘Flex 3 Knowhow Bible’, author is ‘vallila roi(Korea RIA Solution Company)’ and publisher is ‘daerim’. Page 307 to 320 from that book, it printed your codes, but I can’t find your name. Do you know this? If it was illegal use, I will complain to its author and publisher.

  26. Peter Ent says:

    Well, it would be nice to get credit, but the code on these pages for available freely.