by Grant Skinner

Variable Scrollbar Width for CS3 Components

I’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.

Grant Skinner

The "g" in gskinner. Also the "skinner".

@gskinner

If you enjoyed this, you might like these articles…

StyleCollection for CS3 Components, Adding CSS Support to the CS3 Components, Building the V3 Components for Flash 9, Third party components? Not legally.

56 Comments

  1. Dan May 30, 2007 at 11:22am

    This looks great… sadly the link is broken.

  2. Grant Skinner May 30, 2007 at 11:24am

    Thanks for letting me know. It’s fixed now (darn case sensitive URLs).

  3. Maz July 2, 2007 at 2:20am

    It’s great ! along with the scrollbar skinning it is extremely usefull.

    Thank you,

  4. Intoxopox July 3, 2007 at 9:48am

    Nice. Should be official.

  5. Yasha Rozov August 15, 2007 at 5:48am

    Hi,

    is there anyway to use this with actionscript 2.0?

  6. felix August 30, 2007 at 5:26pm

    This is *very* useful. Thanks! I love the fact that the source is included in the CS3 components so you can modify if required.

  7. damo October 14, 2007 at 12:38am

    how about scrollThumbHeight?

  8. Saulo October 24, 2007 at 2:10pm

    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.

  9. jwerre March 26, 2008 at 4:18pm

    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?

  10. cloetensbrecht May 30, 2008 at 10:31am

    Tnx man, it works great!

  11. sean January 21, 2009 at 11:12am

    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.

  12. Grant Skinner January 21, 2009 at 11:28am

    sean – no, sorry. Adobe is the only one that can answer that question.

  13. Eric March 16, 2009 at 4:17pm

    Thank you for this! I’ve been searching and trying other solutions for hours with no success. Your fix works great! Thanks again.

  14. mike connor March 17, 2009 at 4:52pm

    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.

  15. Evan M March 20, 2009 at 11:09am

    Great! Thanks so much, this was driving me insane! Now, how can we resize the checkbox component as well? 🙂

  16. Jeff March 23, 2009 at 11:19pm

    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

  17. Nicolas April 14, 2009 at 1:50am

    Thanks you so much for theses classes, it’s all i needed

  18. Gurpreet Hanjra May 12, 2009 at 5:41am

    Excellent work sir..you rock! 🙂

  19. Hugo Fortis May 21, 2009 at 7:01pm

    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!!!

  20. Robert May 27, 2009 at 12:51pm

    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!

  21. Robert May 27, 2009 at 12:57pm

    Excellent! Works a treat on ScrollPane ScrollBars – thanks Grant!

    Come on Adobe – get this stuff in the product!

  22. Jeff Green June 14, 2009 at 5:28pm

    Grant, Folks like you are heroes! I spent an afternoon trying to work throught what is an Adobe bug. Thank Adobe, NOT!

  23. exoboy June 16, 2009 at 3:58pm

    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.

  24. Andreas Walz June 25, 2009 at 9:27am

    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….

  25. Nicolas Hansen September 11, 2009 at 6:03am

    Wow thank you! This helped me out with a project at work big time! Works great!

  26. Nicolas Hansen September 11, 2009 at 6:08am

    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.

  27. Joe October 19, 2009 at 4:05am

    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

  29. Karen November 24, 2009 at 2:42pm

    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,

  30. Daniel February 26, 2010 at 1:15pm

    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.

  31. tib April 10, 2010 at 3:03pm

    thanks you so much!

    god bless people like you!

  32. Wyeth Stiles June 22, 2010 at 4:03pm

    Works great! Thanks much…

    -w

  33. CrashOverwrite August 17, 2010 at 4:59am

    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 😉

  34. CrashOverwrite August 17, 2010 at 7:26am

    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).

  35. Anthony Hessler January 6, 2011 at 11:55am

    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!

  36. pavel January 27, 2011 at 2:20am

    many thanks. its really great!!!

  37. chris albon March 24, 2011 at 4:47am

    Nice. Much needed and appreciated

  38. Andy April 24, 2011 at 4:24am

    Thanks very much for this, it’s really helped me out.

  39. Thankful guy April 27, 2011 at 3:07am

    Great! Saved me a lot of time and fantastic that guys like you look for solutions like this!

  40. mike June 3, 2011 at 6:17pm

    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!

  41. Sandman June 16, 2011 at 4:38am

    Really cool post!

  42. freakqnc July 24, 2011 at 11:26pm

    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.

  43. Ehab Saleh September 7, 2011 at 12:22pm

    Man, you are a star. It works very well. Thanks

  44. TimT September 14, 2011 at 6:12pm

    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.

  45. richard7854 November 29, 2011 at 3:11pm

    Thank you very much ! This helped me after hours of agony with fl.controls.TileList

  46. Emperor November 29, 2011 at 3:54pm

    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 .. : ) ,,

  47. Craig Grummitt December 5, 2011 at 9:11am

    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;

  48. Mike January 9, 2012 at 5:21am

    Thanks a lot. This helped me after three days of trying to skin ScrollPane ScrollBars in accordance with my app design.

  49. ksu May 1, 2012 at 9:41am

    Great thanks. You best!

  50. Jose November 9, 2012 at 11:14pm

    This is really great! Thanks for posting it.

    Is there any chance to upgrade it to flash 10? I’m using that and I don’t know if there could be any problem with this classes that are 9.0 based.

    Regards!

  51. jendabek September 17, 2013 at 7:18am

    Even in 2013 I really appreciate your work as I am working on important project that needed this customization.
    Many thanks also for any other valuable tips on your excellent blog!

  52. Bubba the Hut October 7, 2013 at 10:18pm

    Excellent! Makes app development possible with the current controls 🙂

  53. maaa November 6, 2013 at 9:56pm

    Exactly. Thanks

  54. Kurt December 7, 2013 at 9:58am

    Once again, great job Grant. Still using your original spell checker! No problem using this fix with FlashDevelop 4 (with Adobe Flex SDK 4.6 and AIR 3.7). Just put your ‘fl’ folder in the ‘scr’ director, and add the imports. Helped with my Flash based Apps.

  55. Viggo Smith April 24, 2014 at 3:24pm

    I know this is an old post, but you Sir, are the man, thanks 🙂

  56. Manish May 20, 2014 at 1:40pm

    Nice. Thanks. 🙂

Comments are closed.