 Variable Scrollbar Width for CS3 ComponentsPosted on May 30, 2007 by Grant SkinnerI’ve seen a few people asking for the ability to have variable scrollbar widths in the Flash CS3 component set. Unfortunately, it wasn’t something we were able to get in for the release, but since then I have put a bit of time into the feature, and believe I have it working satisfactorily with all components. I added two styles: scrollBarWidth and scrollArrowHeight. The former controls the width of the scroll bar (or height in a horizontal scroll bar), the latter controls the height of its arrows (allowing you to have irregularly sized arrows). It’s important to note that this modification has not seen comprehensive testing, and it is not connected with Adobe in any way. Any mistakes are my own, and I’d appreciate if you can let me know about them in the comments.
Here’s a simple demo showing the global scrollBarWidth and scrollArrowHeight set to 10, TileList’s scrollArrowHeight set to 25 (to create rectangular arrows), and the top instance of a scrollBar component set to 25/25 (requires Flash Player 9): You can download the code package by clicking here. To use, simply copy the fl directory into your project directory (or your project class path). The modified classes will override the component classes that shipped with CS3. Note that it may slightly increase your compile time, as these classes are not pre-compiled. I’d appreciate knowing if this is useful for people, as I plan to release more updates and feature additions if this is well received. Also, if anyone is curious, I’m waiting to hear from Adobe on what the official word in the EULA is regarding distributing component code like this. In the interim, I have received special permission to distribute some of my own updates – note that it may not be legal to do so if you do not have this permission. I will post about the details as soon as I have them.
Follow @gskinner on Twitter for more news and views on interactive media.
|
|
|
48 Comments
This looks great... sadly the link is broken.
Posted by: Dan on May 30, 2007 11:22am
Thanks for letting me know. It's fixed now (darn case sensitive URLs).
Posted by: Grant Skinner on May 30, 2007 11:24am URL: http://gskinner.com/
It's great ! along with the scrollbar skinning it is extremely usefull.
Thank you,
Posted by: Maz on Jul 2, 2007 2:20am URL: http://www.bubble-mind.com
Nice. Should be official.
Posted by: Intoxopox on Jul 3, 2007 9:48am URL: http://professorfripples.com/blog
Hi,
is there anyway to use this with actionscript 2.0?
Posted by: Yasha Rozov on Aug 15, 2007 5:48am
This is *very* useful. Thanks! I love the fact that the source is included in the CS3 components so you can modify if required.
Posted by: felix on Aug 30, 2007 5:26pm URL: http://www.airtightinteractive.com
how about scrollThumbHeight?
Posted by: damo on Oct 14, 2007 12:38am
damo,
Not so cool as using styles, but you can comment line 993:
//thumb.height = Math.max(13,_pageSize / per * track.height);
on updateThumb method to avoid thumb vertical resizing.
Posted by: Saulo on Oct 24, 2007 2:10pm URL: http://www.weka.com.br
I've attached a scrollbar to a text field in my fla. Works fine when I publish it but when I upload the swf to my server it becomes invisible. It still works you just can't see it. Has anyone run into this?
Posted by: jwerre on Mar 26, 2008 4:18pm
Tnx man, it works great!
Posted by: cloetensbrecht on May 30, 2008 10:31am URL: http://www.cloetensbrecht.be
I noticed this update did not make it into an update for CS3 and is not in CS4. Any word on an update to the components.
Posted by: sean on Jan 21, 2009 11:12am
sean - no, sorry. Adobe is the only one that can answer that question.
Posted by: Grant Skinner on Jan 21, 2009 11:28am URL: http://gskinner.com/blog/
Thank you for this! I've been searching and trying other solutions for hours with no success. Your fix works great! Thanks again.
Posted by: Eric on Mar 16, 2009 4:17pm
for some reason, i'm having a very hard time moving the code out of Flash and into Flex Builder. I'm getting some error with the TileList.
Posted by: mike connor on Mar 17, 2009 4:52pm
Great! Thanks so much, this was driving me insane! Now, how can we resize the checkbox component as well? :)
Posted by: Evan M on Mar 20, 2009 11:09am URL: http://www.bytestudios.com
Thank god for that!
I thought I was having some kind of brain meltdown, couldn't believe that there wasn't something buried in the original class definitions
Posted by: Jeff on Mar 23, 2009 11:19pm
Thanks you so much for theses classes, it's all i needed
Posted by: Nicolas on Apr 14, 2009 1:50am
Excellent work sir..you rock! :)
Posted by: Gurpreet Hanjra on May 12, 2009 5:41am URL: http://urbanedezign.com
this is what i was looking for.....
thanks thanks a lot!!!!
but thanks ... and hiper thanks!!!!!
iiiiiuuuujjuuuu
i spend a week searching and trying to do it!!
ja ja ja ja ....
if i can help you someday, let me know, im, graphic Designer!!!
Posted by: Hugo Fortis on May 21, 2009 7:01pm URL: http://www.stampadesign.com.mx
Fabulous... just trying this to see if it'll solve my issues with custom scrollbar buttons on a scrollpane... has anybody tested and proven this?
I've spent hours trying to find out how to do this in CS3!
Thanks Grant!
Posted by: Robert on May 27, 2009 12:51pm URL: http://www.robertturrall.com/blogs
Excellent! Works a treat on ScrollPane ScrollBars - thanks Grant!
Come on Adobe - get this stuff in the product!
Posted by: Robert on May 27, 2009 12:57pm URL: http://www.robertturrall.com/blogs
Grant, Folks like you are heroes! I spent an afternoon trying to work throught what is an Adobe bug. Thank Adobe, NOT!
Posted by: Jeff Green on Jun 14, 2009 5:28pm
hallelujah! I have been searching for HOURS trying to find a simple solution to resizing the scroll bars! I was just about to alter the original classes myself, but was not looking forward to it! Thanks so much.
Posted by: exoboy on Jun 16, 2009 3:58pm URL: http://clarencebowman.com
Hello, Thannk you very much for this solution.
I took me about 5 hours to find it. I could not believe that there is no 'regular' way to do it....
Posted by: Andreas Walz on Jun 25, 2009 9:27am
Wow thank you! This helped me out with a project at work big time! Works great!
Posted by: Nicolas Hansen on Sep 11, 2009 6:03am URL: http://subver.com
Oh man, also - is there a way to change the scrollbar Height? Not the entire track's height, just the bar..
Not a huge deal if not, hopefully you get this comment soon enough, though.
Thanks man.
Posted by: Nicolas Hansen on Sep 11, 2009 6:08am URL: http://subver.com
Hey there,
This is exactly what I needed for a project at work, what's the legality surrounding using this for a commercial project? Otherwise I'll have to code my own TileList.. And that'll just take time.
Cheers
Joe
Posted by: Joe on Oct 19, 2009 4:05am URL: http://www.joe-best.com
its nice! thanx
Posted by: saintist on Oct 30, 2009 3:33pm URL: http://saintist.ru
I don't understand this:
To use, simply copy the fl directory into your project directory (or your project class path). The modified classes will override the component classes that shipped with CS3.
Can someone explain it to me like I'm 5?
thanks,
Posted by: Karen on Nov 24, 2009 2:42pm
This is great!
I spent hours trying to find open source components that gave me the control I was missing in Flash.
I wish there were more methods to modify the Flash default components.
It annoys me that I need to go to open source and Flex to create useful components.
Great job. Thanks.
Posted by: Daniel on Feb 26, 2010 1:15pm
thanks you so much!
god bless people like you!
Posted by: tib on Apr 10, 2010 3:03pm
Works great! Thanks much...
-w
Posted by: Wyeth Stiles on Jun 22, 2010 4:03pm URL: http://www.inflightstudio.com
Nice one, but: it seems that I cannot change the skin of the scrollbars? :(
If I write "StyleManager.setComponentStyle(TippyScrollPane, "scrollBarWidth", 50);"
It works, but then I want to change the Skin with: "StyleManager.setComponentStyle(TippyScrollPane, "upArrowUpSkin", new ScrollUpArrow());" the arrow disappears completely. Without the first line my own skin appears, but of course not in the right size ;)
Posted by: CrashOverwrite on Aug 17, 2010 4:59am
Nice, thanks! But I cannot change the skins of the scrollbars?
If I write this:
"StyleManager.setComponentStyle(TippyScrollPane, "scrollBarWidth", 50);
StyleManager.setComponentStyle(TippyScrollPane, "thumbUpSkin", new ScrollTrack());"
the Thumb disappears completely :(
If I write only the first line I get my Thumb, but not the correct size of course.
I looks like I can only either change the size or the skin?
(TippyScrollPane is just a own ScrollPane extending ScrollPane).
Posted by: CrashOverwrite on Aug 17, 2010 7:26am
This seriously saved my life, as I had a very picky client with very specific combo box sizes and styles. Being able to implement this in a matter of seconds saved me from having to create a custom component, etc. Nicely done!
Posted by: Anthony Hessler on Jan 6, 2011 11:55am URL: http://www.hesslerdesign.com
many thanks. its really great!!!
Posted by: pavel on Jan 27, 2011 2:20am
Nice. Much needed and appreciated
Posted by: chris albon on Mar 24, 2011 4:47am URL: http://www.odbo.co.uk
Thanks very much for this, it's really helped me out.
Posted by: Andy on Apr 24, 2011 4:24am
Great! Saved me a lot of time and fantastic that guys like you look for solutions like this!
Posted by: Thankful guy on Apr 27, 2011 3:07am
This is a great addition.One thing I feel is missing is adjusting the scrollbar's tracker's height. The thingy you pull up or down in the scrollbar by not using the buttons.
Other than that it is great!
Posted by: mike on Jun 3, 2011 6:17pm
Really cool post!
Posted by: Sandman on Jun 16, 2011 4:38am
Letting users control only the length is virtually useless for scrollbars in text fields since it'll be unlikely that the length of a scrollbar, (in both orientations) will not match that of the text field it's associated with. In cases where that may happen it will most likely due to a design-driven choice rather than a functional one.
On the contrary allowing control of thickness it will be surely more useful since it would allow to control a dimension that could be used to increase accessibility (thicker scrollbar) as well as look and feel (thinner, minimal look or personalizing elements in the scrollbar with custom skinned ones). It would be self evident that thickness of the scrollbar should be a property that designers and developers should be able to modify, but that doesn't seem a point of view shared by Adobe.
What's appalling is that Adobe after 4 years and countless posts all over the web about this issue this issue continues to be ignored despite having such nice people like GS who are providing free component to build upon (and issues with stability of the GS component is irrelevant since it was originally posted as a WIP)
We are not talking about last year, this thread started in mid 2007... this really gives a new meaning to "talk to the hand!"
Thanks GS for trying here... and a "Thanks... NOT" to Adobe! For making people waste countless hours digging for a way to accomplish the simple task to have a scrollable text area with a customized scrollbar.
I ended up using MinimalComps' by bit101 since that fit best what I needed for the project at hand... but again, shame on you Adobe.
Posted by: freakqnc on Jul 24, 2011 11:26pm
Man, you are a star. It works very well. Thanks
Posted by: Ehab Saleh on Sep 7, 2011 12:22pm URL: http://www.jawebny.net
Mr. Grant Skinner I salute you for this. Thank you. And it is appalling after so long Adobe hasn't thought to include something so obvious as this.
Posted by: TimT on Sep 14, 2011 6:12pm
Thank you very much ! This helped me after hours of agony with fl.controls.TileList
Posted by: richard7854 on Nov 29, 2011 3:11pm
HI .. thanks for this. Can you please put an example with multiple classes? I use your code in my googlemap class, but it shows some problems. If I have an example, I think it will solve my problem. Anyway nice job .. : ) ,,
Posted by: Emperor on Nov 29, 2011 3:54pm URL: http://www.kataxco.com
Great work, thanks for this.
Just one issue - it seems you've neglected to import the DataProvider class in your example.
import fl.data.DataProvider;
Posted by: Craig Grummitt on Dec 5, 2011 9:11am URL: http://www.theflashstudio.com
Thanks a lot. This helped me after three days of trying to skin ScrollPane ScrollBars in accordance with my app design.
Posted by: Mike on Jan 9, 2012 5:21am