OS X Lion -like scrollbar in Flash Builder 4.5

[Video Chat]

Creating a transparent, black scrollbar (thumb without track and arrows) similar to OS X Lion or Facebook scrollbar in Flash Builder 4.5, with three simple steps. In Flash Builder 4.5 a thumb-skin is used instead of images or shapes (Flex builder), the arrows and track are excluded.

1. create a style reference in your main .mxml application or use your default css file, example (MXML code, not PHP):

PHP Code:

<fx:Style source="../assets/style.css"></fx:Style> 


2. in the css file, add the following:

PHP Code:

mx|TextArea {
    verticalScrollBarStyleName: scrollBarStyle;
    horizontalScrollBarStyleName: scrollBarStyle;
}

mx|TextInput {
    verticalScrollBarStyleName: scrollBarStyle;
    horizontalScrollBarStyleName: scrollBarStyle;
}

.scrollBarStyle {
    up-arrow-skin: ClassReference(null);
    down-arrow-skin: ClassReference(null);
    trackSkin: ClassReference(null);
/*    thumbSkin: ClassReference(null); */
    thumbSkin: ClassReference("skins.ScrollBarSkin");
} 


3. create the "skins" package with the "ScrollBarSkin.mxml" MXML Skin, inside, using the following code:

PHP Code:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin name="LionScrollBarThumbSkin"
             xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    
    <fx:Script>
        <![CDATA[
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
    
    <!-- background -->
    <s:Rect left="0" top="-1" right="0" bottom="-1" minWidth="6" radiusX="3" radiusY="3">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.15" alpha.over="0.25" alpha.down="0.2"/>
        </s:fill>
    </s:Rect>
    
</s:SparkSkin> 


[Video Chat]

If you receive the error "Namespace not found"
Namespace not found. style.css /5.9/assets line 3 Flex Problem

add these lines at the beginning of your style.css file:

PHP Code:

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";