Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
OS X Lion -like scrollbar in Flash Builder 4.5
08-27-2011, 06:37 AM, (This post was last modified: 08-27-2011, 06:39 AM by Video Chat.)
#1
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):
PHP Code:
<fx:Style source="../assets/style.css"></fx:Style

2. in the css file, add the following:
PHP Code:
mx|TextArea {
    
verticalScrollBarStyleNamescrollBarStyle;
    
horizontalScrollBarStyleNamescrollBarStyle;
}

mx|TextInput {
    
verticalScrollBarStyleNamescrollBarStyle;
    
horizontalScrollBarStyleNamescrollBarStyle;
}

.
scrollBarStyle {
    
up-arrow-skinClassReference(null);
    
down-arrow-skinClassReference(null);
    
trackSkinClassReference(null);
/*    thumbSkin: ClassReference(null); */
    
thumbSkinClassReference("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> 
I love video chat!
Reply
08-28-2011, 08:30 AM,
#2
Namespace not found error in CSS
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 "library://ns.adobe.com/flex/spark";
@namespace 
mx "library://ns.adobe.com/flex/mx"
I love video chat!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)