The following example will use custom images to customize the appearance of the Flex Horizontal Scroll Bar (HScrollBar).
First I created the art work for the custom HScrollBar. The elements that this example changes are: downArrow, upArrow, thumb and the track.
This is how the finished custom HScrollBar will appear:
For the downArrow skin and the upArrow skin I used three images that correspond to the up state, down state and over state of the custom VScrollBar.
After the artwork is created, the next thing to do is to embed images in Flex and use them as the skin for the custom VScrollBar. This is done with CSS
Here is the source code:
<?xml version="1.0" encoding="utf-8"?> <!--http://www.popamihai.com/2009/08/flex/customizing-the-appearance-of-the-flex-vertical-scroll-bar-vscrollbar-2/--> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" viewSourceURL="srcview/index.html"> <mx:Style> HScrollBar { downArrowUpSkin: Embed(source="../assets/downArrow.png"); downArrowOverSkin: Embed(source="../assets/downArrowOver.png"); downArrowDownSkin: Embed(source="../assets/downArrowDown.png"); upArrowUpSkin: Embed(source="../assets/upArrow.png"); upArrowOverSkin: Embed(source="../assets/upArrowOver.png"); upArrowDownSkin: Embed(source="../assets/upArrowDown.png"); thumbDownSkin: Embed(source="../assets/thumb.png", scaleGridLeft="7", scaleGridTop="5", scaleGridRight="8", scaleGridBottom="7"); thumbUpSkin: Embed(source="../assets/thumb.png", scaleGridLeft="7", scaleGridTop="5", scaleGridRight="8", scaleGridBottom="7"); thumbOverSkin: Embed(source="../assets/thumb.png", scaleGridLeft="7", scaleGridTop="5", scaleGridRight="8", scaleGridBottom="7"); trackSkin: Embed(source="../assets/scrolltrack.png", scaleGridLeft="4", scaleGridTop="20", scaleGridRight="10", scaleGridBottom="28" ); } </mx:Style> <mx:Canvas width="300" height="200" > <mx:Canvas width="400"/> </mx:Canvas> </mx:Application> |
I used downArrowUpSkin, downArrowOverSkin, downArrowDownSkin, upArrowUpSkin, upArrowOverSkin, upArrowDownSkin, thumbDownSkin, thumbUpSkin, thumbOverSkin, and trackSkin to specify all the elements that make up the skin.
Here are the results:
View Source is enabled in the above example. To view the source files right click on the swf and choose “View Source” from the context menu.