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

56 Comments

  1. This looks great… sadly the link is broken.

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

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

    Thank you,

  4. Nice. Should be official.

  5. Hi,

    is there anyway to use this with actionscript 2.0?

  6. 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. how about scrollThumbHeight?

  8. 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. 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. Tnx man, it works great!

  11. 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. sean – no, sorry. Adobe is the only one that can answer that question.

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

  14. 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. Great! Thanks so much, this was driving me insane! Now, how can we resize the checkbox component as well? πŸ™‚

  16. 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. Thanks you so much for theses classes, it’s all i needed

  18. Excellent work sir..you rock! πŸ™‚

  19. 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. 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. Excellent! Works a treat on ScrollPane ScrollBars – thanks Grant!

    Come on Adobe – get this stuff in the product!

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

  23. 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. 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. Wow thank you! This helped me out with a project at work big time! Works great!

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

  28. 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,

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

  30. thanks you so much!

    god bless people like you!

  31. Works great! Thanks much…

    -w

  32. 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 πŸ˜‰

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

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

  35. many thanks. its really great!!!

  36. Nice. Much needed and appreciated

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

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

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

  40. Really cool post!

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

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

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

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

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

  46. 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;

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

  48. Great thanks. You best!

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

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

  51. Excellent! Makes app development possible with the current controls πŸ™‚

  52. Exactly. Thanks

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

  54. I know this is an old post, but you Sir, are the man, thanks πŸ™‚

  55. Nice. Thanks. πŸ™‚

Leave a Reply

Your email address will not be published. Required fields are marked *