Flex 4 - Scroller skin

I'm trying to skin the Scroller in my application so that it looks like the example mentioned in http://insideria.com/2009/11/flex-101-customize-scrollbars.html

This example was done in Flex 3 and images are set in CSS.

I tried to create a skin for the component Scroller and saw that it uses VScrollBar and HScrollBar. I tried to put skins for these components. VScrollBar uses separate skins for the track, thumb, decrement/increment buttons.

I tried to make some changes in the skin, but they were not reflected at all in the application.

Can some one kindly tell me if I'm heading in the right direction?

I just want to create a customized scroll bar in Flex 4 with custom thumbs. Would appreciate if you could give me suggestions on this.

Solution

Create skin files for the following: VScrollBarSkin, VScrollBarThumbSkin, VScrollBarTrackSkin, HScrollBarSkin, HScrollBarThumbSkin and HScrollBarTrackSkin. (I generally use the default skins as a starting point.) Make sure the VScrollBarSkin and HScrollBarSkin files refer to your new track/thumb skins. Then set them in your CSS like so:

s|HScrollBar {
    skinClass: ClassReference("my.path.to.skins.HScrollBarSkin");
}

s|VScrollBar {
    skinClass: ClassReference("my.path.to.skins.VScrollBarSkin");
}

Hope that helps.