On ScrollPane (or, “Scroll Pain”) Customization

It seems that documentation and clear examples for how to customize Flash 8’s ScrollPane component are somewhat scarce. In fact, just a quick Google search yields many messageboard postings bemoaning the difficulty of using ScrollPane, with little to nothing in response.

It’s important to note that the old methods of UI Component customization – setting values for “face”, “arrow,” “scrollTrack,” and the like, seem to have fallen by the wayside.

The recommended method these days is something much more in-depth and complicated, with poor documentation thrown in just to make sure you don’t get it right the first time. For example, the documentation on LiveDocs provides the following table of applicable styles for ScrollPane:

Style Theme Description
themeColor Halo The base color scheme of a component. Possible values are "haloGreen", "haloBlue", and "haloOrange". The default value is "haloGreen".
borderStyle Both The ScrollPane component uses a RectBorder instance as its border and responds to the styles defined on that class. See RectBorder class.The default border style is "inset".
scrollTrackColor Sample The background color for the scroll track. The default value is 0xCCCCCC (light gray).
symbolColor Sample The color of the arrows on the scrollbar buttons. The default value is 0x000000 (black).
symbolDisabledColor Sample The color of disabled arrows on the scrollbar buttons. The default value is 0x848384 (dark gray).

Great! Looks like we can change the arrow or track color of the scrollbar on a ScrollPain instance. All you need to do is set myScrollPane.scrollTrackColor, right?

Wrong.

Try it. Put a ScrollPane on the stage and set that scrollTrackColor. Set it all day long until you’re 0x0000FF in the face. You won’t see any changes to the scrollbar’s appearance.

Why?

Pay close attention to that “theme” column. It provides the key to why your customization isn’t going as planned. If you want to customize the scroll track or arrow color, those properties are available but what isn’t mentioned here is that you must first install the “Sample” theme from Macromedia’s libraries. A detailed description of how to do this is available in “About Themes” on LiveDocs.

So, we’ve dragged the Library over, installed the sample theme, and Presto! We now have a customized scrollbar color. We can also set symbolColor to change the color of the arrows.

It’s only a slight improvement. The problem is, we’ve now been left with chunky, gray, Windows 3.1-style scrollbars, and the only ActionScript customization options are for the arrows and the track.

You can improve the look and feel of the arrows manually, by editing the symbols in the Scrollbar Assets folder we dragged over during the Sample theme install. But who has the time or energy for that?

A little bit of digging around in the symbols that the Sample theme carried over reveals some hidden, undocumented goodness: there is also a highlightColor and shadowColor property available to these scrollbars. highlightColor applies to the “main” color of the arrow buttons and “thumb” element, while shadowColor is the small shadow to the bottom right of each piece.

(To see this for yourself, have a look at the “BrdrHilght,” “BrdrFace”, “BrdrBlk”, and “BrdrShdw” symbols.)

Here’s a diagram of the different parts of the scrollbar and where the different colors apply. Note: Please, never, under any circumstances, for any reason, use a color scheme like this. I only did it so I can show where the different parts are.

Sometime’s, it’s really amazing what you can find just by poking around in Macromedia’s samples.

, ,

Advertisements
  1. #1 by Don on January 5, 2007 - 5:07 pm

    Thank You soo much for pointing this out. I have tried to make this work for 8 hours now. Why wouldn’t they just say that.

  2. #2 by Acidcat on January 10, 2007 - 6:43 am

    Thanks, very useful.

    I also noticed that the BrdrBlk symbol contains a “borderColor” property which sets the border color on the outside of shadowColor.

    It can be set as follows:
    myScrollPane.setStyle(“borderColor”,0xFF0000);

  3. #3 by fatma on February 2, 2007 - 12:38 pm

    thanx a bunch.i was stuck up with this thing for days. thank u

  4. #4 by fatma on February 2, 2007 - 3:04 pm

    but now i cant make the background of the scrollpane transparent :S any ideas?

  5. #5 by admin on February 2, 2007 - 3:41 pm

    Fatma, Did the background transparency stop working only happen after you did this?

    Here’s a trick that usually works but I have no idea if installing and editing a theme would disable it:

    1. Right click the scrollpane on the stage and choose “Edit”.
    2. Unlock the bounding box layer.
    3. Click on the bounding box layer to selelct it. Then click on the scrollpane and set its alpha to 0% or whatever you choose.

    Good luck! let me know how it works.

  6. #6 by fatma on February 2, 2007 - 7:41 pm

    yeah, i checked again and thats exactly what happens.
    the problem is “edit” is not available on my scrollpane :S i dont know why…
    by the way let me tell u how i added the scrollpane cos i didnt use any movieclip while adding it like most of other people;
    i dragged the scrollpane component from the components panel to the stage and i gave its instance name as “page_mc” -dont ask why i named it mc :D- then on the 1. frame i wrote this

    var page_mc:mx.containers.ScrollPane;

    and it was working great, with transparent background. now i still want a transparent bg but the scrollbars, arrows etc colored.
    thanx for helping 🙂

  7. #7 by pukky8 on September 24, 2007 - 12:56 pm

    Where is the diagram? I really need to see it!

  8. #8 by nerdabilly on September 24, 2007 - 2:05 pm

    Diagram has been re-added. Sorry about that.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

  • Least-Old Tweets

    Error: Twitter did not respond. Please wait a few minutes and refresh this page.

%d bloggers like this: