Flash CS3 UIScrollBar Not Scrolling Bug
So I’m updating an old Flash project to AS3, and I need a quick solution to add a few scrollbars onto a few textboxes. So I get out the Flash CS3 UIScrollBar. Only problem is, it’s not working. Works in a standalone FLA, but when I bring it into my app, there’s no scroll bar, no arrows, and the component is unresponsive to textfield content changes.
The UIScrollBar class is a simple scrollbar component that ships with Flash CS3 and CS4, that when associated with a given TextField, enables you to scroll that TextField. Simple, right? Or it should be. After cursing the gods for yet another buggy Flash component — I mean, I thought the days of hacking through the Flash component set to get it to frakin work were done with! So after slogging through a few useless hacks — like purposefully populating the textfield with a gazillion line feeds to get the scrollbar to initialize, then deleting them — I figured out a solution.
There must be a bug with the component, because it was not registering new text being added to the TextField. If the TextField was populated with more text than vertical space allows before the UIScrollBar initialized, then the scrollbar would work. But this was the exception to the rule, since most textfields in the app would be dynamically populated form an XML file. So I needed a way to force an update of the scrollbar when the content in the TextField had changed.
First I tried listening for the Event.CHANGE event, but that only seems to respond to user changes to the textfield, not programmatic changes. Then I tried Event.RENDER, thinking that might work, but not all TextField content changes were causing this event to be called (which is actually a good thing, or performance would suffer). Finally, I tried Event.SCROLL, which by the wording of the docs sounded like it would only respond to a user scroll, like when you select the text and drag down, but it did actually work for programmatic changes to the textfield where the text scrolled.
So here’s the solution:
- import fl.controls.UIScrollBar;
- uiScroller.setStyle("scrollBarWidth",10);
- uiScroller.setStyle("scrollArrowHeight",12);
- // Hack to get UIScrollBar to work.
- textBox.addEventListener(Event.SCROLL,updateScrollBar);
- function updateScrollBar(evt:Event):void{
- uiScroller.update();
- }
You actually don’t need the style declarations, these I used with Grant Skinner’s UIScrollbar update, which enables you to customize the dimensions of the scrollbar.
Since I also used the UIScrollBar for a quick and dirty live trace panel, I also needed one particular TextField to be scrolled to the bottom of the text when the user was not interacting with the scrollbar, so for anyone who’s interested, I came up with this solution:
- import fl.controls.UIScrollBar;
- uiScroller.setStyle("scrollBarWidth",10);
- uiScroller.setStyle("scrollArrowHeight",12);
- // Hack to get UIScrollBar to work.
- traceTxt.addEventListener(Event.SCROLL,updateScrollBar);
- function updateScrollBar(evt:Event):void{
- uiScroller.update();
- // This locks the scrollbar into the bottom position
- // when the user is not interacting with it.
- if(scrollLock)
- uiScroller.scrollPosition = traceTxt.bottomScrollV;
- }
- var scrollLock:Boolean = true;
- uiScroller.addEventListener(MouseEvent.MOUSE_DOWN,
- function(){scrollLock = false;});
- uiScroller.addEventListener(MouseEvent.MOUSE_UP,
- function(){scrollLock = true;});
I found that if you don’t release the scrollPosition when the user clicks on the UIScrollBar, it won’t go anywhere, and your TextField will be locked in the maxScroll position.
Hope that helps someone out there who’s cursing this component as we speak.
on June 14th, 2009 at 6:30 pm
Mr. JoeFlash, You are awesome. It’s amazing that Adobe cannot get this right and I wasted an afternoon, thinking I was doing something wrong. You’re a hero. Cheers, Jeff
on June 21st, 2009 at 7:01 am
Thanks for this! I was indeed cursing this component and was so glad when I stumbled across your post. You’re a lifesaver =)
on June 29th, 2009 at 9:38 am
Thanks so much, that was incredibly annoying how that wasn’t working. It definitely has simplified my day!
on September 14th, 2009 at 11:21 am
Thanks for this. I’ve had a couple of days of awful trying to skin this component!
on September 21st, 2009 at 12:06 pm
After four hours of testing and searching this fixed it. Thank you for taking the time to post this!!
on November 11th, 2009 at 5:50 pm
Thank you, thank you! I’ve also spent 3 - 4 hours trying to work around this. Your hack did the trick.
on December 25th, 2009 at 12:31 am
OH MY GOSH!!!! Thank you so much for this script :) :) :)
Have a safe and happy holiday!
on January 18th, 2010 at 9:44 pm
Thought this was going to be another “non-fixing” fix I would try. It definitely fixed my issue. Scrollbar would load fine when first run, but then become “disabled” when the Textfield was dynamically updated.
on June 6th, 2010 at 1:10 pm
welll, great code, it works for me in some test-cases, but…
on my actual “real” project it doesn’t…
the event and function gets fired (multiple times, due to caurina text-ani),
but the uiSroller doe not activate… :(
i’m really stuck on this and ask myself why Adobe publishes something if it doesn’t work for so much people, i mean; why use this, if it does’nt even scroll dynamic-content? isn’t just that the reason to use it???
although,
cheers mate and thanks a lot!
Cay
on July 13th, 2010 at 5:10 pm
Thank you SOOOOOOOOOOOOOO much for this… took me an hour or two before i started thinking that it wasnt my fault!!!! :D heh….
on July 20th, 2010 at 2:15 am
Thank you so much! Great solution. I was trying for hours to fix it.
thanks!