ActionScript 3 Scrolling Text Class
The NpTextScroller Class is a ActionScript 3 Implementation of scrolling text. Similar to the NpScrollingPanel Class.
The class supports scrolling via the provided scrollBar, keyboard (UP and DOWN arrows) or via the mouse wheel. I’ve also included and added in support for the mouse wheel on Macs. That support is courtesy of the great class provided by pixelbreaker. The class is scrollRect based. I chose a scrollRect for a performance gain it offers when scrolling text. The downside in this implementation is that when you are blur scrolling the text, the top and bottom of the rect tends to look blurred as well.
The Class uses an enterframe for it’s scrolling, rather than a tween engine. The enterframe events are always removed when scrolling etc stops.
I have not tested this on a PC, so let me know if it has issues. I think Safari might have an issue with it, judging by some of the comments from pixel breakers blog posts.
Class Features
- Scroll Y
- Either CSS or TextFormat Styles for text
- Supports HTML text
- Scroll via MouseWheel, Keyboard, Slider Bar
- Selectively choose what listeners to add, or remove
- Slider Bar is fully configurable
- Slider Bar auto hides if there is not enough text to scroll
- Use custom asset for Slider Bar Drag Handle
- Append text
- Replace text at runtime
- Scroll programatically to particular points
- Control blurring amounts
- Control scroll speed and easing
View Example
Here is an example. It’s using external text, with the left hand text block controlled via a TextFormat Object and an embedded font. The right is controlled via an external CSS StyleSheet, using Arial. Clicking the “load new text” button swaps the right hand block of text to a TextFormat Object.; http://www.noponies.com/dev/as3_textscroller/
Source Files
Donator only file!
Dependencies
The .fla’s use the Memory and Framerate monitoring component from Grant Skinner, which you can get here: http://www.gskinner.com/blog/archives/2008/04/simple_componen.html, But, simply delete this out, for a production use.
Mac MouseWheel Scrolling pixelbreaker
January 9th, 2009 at 6:58 am
Hi:
Beautifully executed in my opinion like all you other classes – first class! I have visited your test link for this class on a Windows XP 32-Bit system, a Vista 32-Bit system and a Vista 64-Bit System all using Flash Player 10 and they work flawlessly including the mouse scroll functionality which I particularly like.
Hope this helps a little and look forward to the source files being launched soon (and making a donation for your other goodies).
Chris.
January 11th, 2009 at 8:25 am
man perfect timing…I was just about to buy one that didn’t work this well on flashden.
Can the text be smooth/anti-alias? When will you have it tested? It works fine on my windows XP via VMware Fusion 2.0. |: ^ )
Cheers,
Cameron
January 11th, 2009 at 11:36 pm
Hi
it works but the scroll wheel part is messed up. If I scroll down on my mouse wheel the text moves up and vice versa. Work’s fine with keyboard arrows. I’m using Vista 32 Bit system and the mouse is some wireless logitech.
January 12th, 2009 at 9:31 am
Hi, theres no control over antialiasing at the moment, but I’ll add it in.
It will be ready in a few days.
January 13th, 2009 at 1:08 am
Its ready for use.
February 15th, 2009 at 9:03 pm
Hey
Got a problem: If I first load a long text into the textscroll, the scrollbar appears, if i load a short text the scrollbar disappears as expected…
BUT
if i load a long text again the scrollbar do not reappear – how come?
anyway to make it appear again maually at least?
February 16th, 2009 at 8:09 pm
@Knalle,
Hmm, it should be automatically appearing again. Have you got a test file I could look at?
February 17th, 2009 at 9:06 pm
I just tried replicating the problem with your demo (from the source files). The bug seems to appear there too.
try this first:
textScroll2.addScrollText(”TEST TEXT – THIS IS VERY SHORT”, createTextFormat(8, 0xFFFF00,false, Standard,0,0));
textScroll2.scrollTextToPoint(0, false);
and then afterwards:
textScroll2.addScrollText(myTextLoader.loadedText, createTextFormat(8, 0xFFFF00,false, Standard,0,0));
textScroll2.scrollTextToPoint(0, false);
February 17th, 2009 at 11:21 pm
Knalle,
Ok, looks like I forgot to copy an if statement over correctly.
In the NpTextScroller.as file, at around line 470, replace the if test with this;
//check to see if we need to make the scrollBar visible, if its not already visible
if(_textRectHeight > _sHeight) {
_textScrollBar.visible = true;
if(_dragBarAsset!=null){
_dragBarAsset.visible = true;
}
}else{
_textScrollBar.visible = false;
if(_dragBarAsset!=null){
_dragBarAsset.visible = false;
}
}
That should fix it.
February 17th, 2009 at 11:44 pm
It would be nice if you write and fullscreen-scrolling class, some like http://www.rizn.bg
February 18th, 2009 at 5:42 am
The scroller when you view their work? That is quite nice. I actually wrote a scrollRect based fullscreen scroller last week when I was bored, and to see if it would work, it does, kinda. I’ll clean it up and post it.
February 18th, 2009 at 11:19 am
I used the http://hasseg.org/blog/?p=138 mousewheel for scrolling NpContentScroller ans it works pretty well. Actually last week I wrote fullscreen scroller, but got some bugs after resizing. For me it would be interesting to see your way.
February 18th, 2009 at 9:23 pm
Dale,
PERFECT
May 19th, 2009 at 10:26 pm
I can’t get a scroll button to show up when I add it to the code. Basically, I have movieclip “panel” which creates a new dynamic movieclip which holds a NpTextScroller instance. Here is the code that creates the text:
private function createScrollingTextCss():void
{
addChild(_ScrollBtn);
textScroll2 = new NpTextScroller();
textScroll2.dragBarAsset = _ScrollBtn;
textScroll2.dragHandleOffSetX = -2;
textScroll2.scrollEase = .25;
textScroll2.scrollWidth = 240;
textScroll2.scrollHeight = 140;
textScroll2.useEmbeddedFont = true;
textScroll2.sliderXPos = 240;
textScroll2.sliderYPos = 0;
textScroll2.sliderBarWidth = 4;
textScroll2.sliderBarColour = 0xd1d1d1;
textScroll2.sliderBarHeight = 140;
textScroll2.textScrollBlur = false;
textScroll2.mouseWheelScrolling = true;
textScroll2.addScrollText(myTextLoader.loadedText, sheet);
addChild(textScroll2);
}
Problem is, a black box shows up the same size as the MC that is supposed to be. The “_ScrollBtn” is added dynamically from the library, it isn’t on a stage anywhere. Any ideas what’s going on?
Thanks in advance
May 28th, 2009 at 3:23 am
Mr NoPonies -
Thanks so much for the class – I’ve got it working ‘almost’ perfectly -
The issue I’m having is with embedfonts = true…
I’m trying to use various weights of my desired font – all variations are sitting in my library with linkage –
I’m controlling the styles via a CSS file.
When I have embedfonts = true – all my different styles fly out the window… but the text is nicely antialiased.
When I have embedfonts = false – all my different styles are represented… but the text looks like a dog’s breakfast.
I am calling my fonts via their “real” names, as I am finding trying to call the linkage from CSS font-family: no text appears.
Do you know if there is a way where I can have BOTH sexy antialiased text AND CSS styles?
Thanks in advance,
Paulie C
June 19th, 2009 at 5:40 pm
How can I get this class to test it and if possible use in my projects?
Thanks
July 1st, 2009 at 6:08 pm
I’m wondering the same thing as Nelson, where can I get this class, it’s a really sleek scroller and would love to try it out.
k.
July 4th, 2009 at 9:53 am
Its a donator file, you have to donate to get it. Its says that in the post..
August 14th, 2009 at 6:44 pm
I’m having a problem when adding a custom drag handle. It’s placing the drag handle behind the slider bar on the stage. Any ideas? All I can think of is the order in which it’s being added to the display list but the drag handle needs to be added before the NPTextScroller so I’m not sure…
private var customDragBar:MovieClip = new MovieClip;
…
customDragBar.graphics.beginFill(0xA12122);
customDragBar.graphics.drawCircle(0,10,11);
this.addChild(customDragBar);
customDragBar.graphics.endFill();
…and I instantiate the scroller
textScroll = new NpTextScroller(customDragBar);
The result looks like http://www.stowns.net/images/example.png
any help would be greatly appreciated!!!
August 14th, 2009 at 6:55 pm
Got It!!…moved this.addChild(customDragBar) to the end of the createScroll method instead of instantiating it before. Worked…
August 19th, 2009 at 2:41 pm
Cool, glad you got it to go. Instantiation order can be a pita.