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.
Comments
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.
Amazing…
Thanks
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.
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.
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.
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.
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"
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
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,
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.
ok
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.
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.
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.
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.
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
I’ve downloaded your components but I don’t see how I can implement the component into a project of mine.
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.
This is awesome! Exactly what I was looking for~ Thanks!
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.
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″ />
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
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.
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()
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.
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
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.
Well, it would be nice to get credit, but the code on these pages for available freely.