Beta 2? *gasp*

You should update to a new nightly build, ASAP. http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

I managed to get a semi-transparent VScrollBar track in Flex 4 Scroller by creating a custom VScrollBar skin and setting the skinClass style using CSS.

Main app:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               backgroundColor="red">
    <s:controlBarContent>
        <s:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION + ' | ' + Capabilities.version;" />
    </s:controlBarContent>
   
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
       
        s|Scroller s|VScrollBar {
            skinClass: ClassReference("skins.TransVSB");
        }
    </fx:Style>
   
    <s:Scroller width="500" height="400">
        <s:Group>
            <s:TextArea text="The quick brown fox jumps over the lazy dog." height="900" width="90%" />
        </s:Group>
    </s:Scroller>
   
</s:Application>

And my custom VScrollBar skin, skins/TransVSB.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="15" minHeight="35"
             alpha.disabled="0.5"
             alpha.inactive="0.5" >
   
    <fx:Metadata>
        [HostComponent("spark.components.VScrollBar")]
    </fx:Metadata>
   
    <fx:Script fb:purpose="styling">
        /* Define the skin elements that should not be colorized.
        For scroll bar, the skin itself is colorized but the individual parts are not. */
        static private const exclusions:Array = ["track", "thumb", "decrementButton", "incrementButton"];
       
        override public function get colorizeExclusions():Array {
            return exclusions;
        }
       
        override protected function initializationComplete():void {
            useChromeColor = true;
            super.initializationComplete();
        }
    </fx:Script>
   
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="inactive" />
    </s:states>
   
    <!---  The default skin class is VScrollBarTrackSkin. -->
    <s:Button id="track" top="16" bottom="15" height="54"
              focusEnabled="false"
              alpha="0.2"
              skinClass="spark.skins.spark.VScrollBarTrackSkin" />
   
    <!--- The default skin class is VScrollBarThumbSkin. -->
    <s:Button id="thumb"
              focusEnabled="false" visible.inactive="false"
              skinClass="spark.skins.spark.VScrollBarThumbSkin" />
   
    <!--- The default skin class is ScrollBarUpButtonSkin. -->
    <s:Button id="decrementButton" top="0" enabled.inactive="false"
              focusEnabled="false"
              skinClass="spark.skins.spark.ScrollBarUpButtonSkin" />
   
    <!---  The default skin class is ScrollBarDownButtonSkin. -->
    <s:Button id="incrementButton" bottom="0" enabled.inactive="false"
              focusEnabled="false"
              skinClass="spark.skins.spark.ScrollBarDownButtonSkin" />
   
</s:SparkSkin>

Peter

@ Peter

Very nice elegant solution indeed.

Thank you, Peter.

However there is one strange inconsistency:

if I add to the function two other elements -

scrllr.verticalScrollBar.thumb.alpha = sl.value;

scrllr.verticalScrollBar.incrementButton.alpha = sl.value;

the thumb and the bottom incrementButton are changing their transparency, but the top incrementButton completely ignores the change - it stays completely opaque.

Any particular reasons for that?

Thanks,

FTQuest

@franto,

I dont know of a way off the top of my head, but I'm not a Scroller expert.

I tried setting the "right" property on the verticalScrollBar but that didnt seem to work. The only other idea I had was to disable horizontal and vertical scrollbars on the Scroller altogether and use your own s:VScrollBar in the main app and just position it over the Scroller wherever you want (you could just wrap the Scroller and VScrollBar in a s:Group container or something).

Peter