OS X Lion -like scrollbar in Flash Builder 4.5

  • 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):

    2. in the css file, add the following:

    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:

     <s:sparkskin name="LionScrollBarThumbSkin" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"><s:states><s:state name="up"><s:state name="over"><s:state name="down"><s:state name="disabled"></s:state></s:state></s:state></s:state></s:states></s:sparkskin> 

  • 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:

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

Log in to reply