Your skin constrains the location of the thumb in terms of bottom/top. I suspect that you don't want to do that.
The simplest way for me to skin a component is to start with the existing skin and then modify it. This will help with the scroller skin and ensure that you are contraining and positioning things correctly. I suggest copying the existing VScrollBar skin, and then substitute your customs skin parts and adjust positioning relative to what's in the original skin.
I removed the top/bottom constraints on the thumb skin, still not luck, it behaves the same way.
I cannot hold the thumb and move up or down, rather it steps up or down as though i click on the track.
Any references to a working solution....will be appreciated.
1. Create a new MXML skin and copy the default VScrollBar skin code into it.
2. Create another MXML skin and copy the contents of VScrollBarThumbSkin into it.
3. In the custom VScrollBar skin, scroll down to the Button with id thumb and substitute the skinClass with the newly created skin in step 2.
4. Open the custom thumb skin and delete everything below the states declaration except for the background (you'll need this for positioning).
5. Add your image there and position and size it the same as the existing background rect.
6. Delete the background rect.
Here's a sample that creates a scrollbar skin with an image as the thumb:
In CustomVScrollBarSkin, everything is default except for this:
In CustomThumbSkin, leave the metadata and script tags as is, and replace the rest with this. You can set different sources for the states if you wish.
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
<s:BitmapImage left="0" top="1" right="0" bottom="2" minWidth="14" minHeight="14"
Hope this helps.
Thanks for your reply but this did not help. i feel somehow the thumb looses focus and when i try to click on the thumb, the track gets the focus and hence unable to move up/down using thumb.
i tried varying focusEnabled property to true/false for both thumb and skin and still cant get around it...
this is driving me nuts now...
For your scrollbar skin, try it in this order:
top="20" bottom="20" left="1" right="2"
<s:Button id="decrementButton" top="0" left="0"
<s:Button id="incrementButton" bottom="0" left="0"
where all of the skin parts have focusEnabled="false", the top/bottom constraints from the thumb has been removed, and the order of the parts appears as above. The order of the components is important because the stacking order on screen starts with the first component on the bottom. I think the problem you were having was that the "track" was placed after the "thumb". This means that on screen, the "thumb" is actually underneath the track so that when you click the thumb, you're still clicking the track. Let me know if you have anymore questions or troubles.
Hope this helps,
Thanks much Kevin. My issue is now resolved. This drove me nuts, never found in any of the docs about the order of skin parts being important.