scrollPane background customization – as3

I was trying to customize a scrollPane component (as3) and ran into some difficulties, I wanted to change the background of the panned area. The default background is kinda gray with rounded corners, I wanted it dark and strait corners.

scrollPane default backround

After far too much time searching Adobe’s Livedoc (what a shame, didn’t find the answer there), and reading countless posts, I eventually found the answer via Flash Help Panel.

scrollPane customized backround

Apparently the only way is to change the default skin of the component, to do that you simply prepare a MovieClip to serve as skin and give it linkage name, then set the component instance style to use the skin you prepared, like this:

aSp.setStyle( "upSkin", newSkinClip );

upSkin is the default skin class, and I’m setting it to use the skin I made.

Adobe really should find a way to make those livedoc easier for use and orientation, it takes too long for pages to load, and I keep finding my self clicking in loops..

11 thoughts on “scrollPane background customization – as3

  1. Excellent .. was looking for this same solution. Any ideas on how to change the alpha of the scrollBar itself without affecting the loaded source content?

  2. Hi Michael,
    I couldn’t find a way, indeed it seems the content is an internal asset of the component and changing visibility or alpha of the component also affects the content.
    But I’m not sure I understand why you want this, once the scrollBar is hidden, there’s no need for a scrollPane component.. couldn’t you use a plain mask?

  3. //Alpha solution for bar

    mainCenterScrollPane.verticalScrollBar.alpha = 0;

    /////////////////
    //Code for backbround

    var newSkinClip:MovieClip = new MovieClip();
    newSkinClip.graphics.clear();
    newSkinClip.graphics.beginFill(uint(0xdddddd), 0.8);
    newSkinClip.graphics.drawRect(0,0,272.0, 191.0);
    newSkinClip.graphics.endFill();

    mainCenterScrollPane.setStyle( “skin”, newSkinClip ); //ScrollPane_upSkin
    mainCenterScrollPane.setStyle( “upSkin”, newSkinClip );

    //////////////////

  4. Perfect! Just what I had been looking for (fruitlessly) in the Adobe doc. I’d like to see this type of info added to the livedocs.

    Thanks again!
    jb

  5. For those who want to know how to change the alpha (opacity) of the scrollpane:

    1.Double click the scrollpane, it will bring up the ScrollPane edit view.

    2.From within that view, double click the Normal Skin symbol.

    3.This brings up a 2nd edit symbol view, this one called “ScrollPane upSkin”. Select the rectangle.

    4.Change the alpha under the Scrollpane’s properties->color effects->alpha tab.

    HAPPYHAM OWNS YOU ALL

  6. Does anyone know how to change the position of the scrollbars? Specifically, I would like to move the vertical scroller from the right edge of the box to the left edge. Seems simple, but I don’t know enough actionscript to solve the problem. Thanks!

  7. Thanks bro, for this tip, it saved me a headache. Best Wishes from across the oceans :), you are the best.

Leave a Reply

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