11 Replies Latest reply on Mar 7, 2010 1:16 PM by Shongrunden

    Transparent ScrollBar for Scroller

    franto kormanak Level 1

      Hi,

       

      I need to figure it out, how to have semi-transparent track for VScrollBar. content behind Scrollbar should be visible. When I have skinned Scorrlbar and set alpha to track, it doesnt work, when I have set alpha to s:Scroller, whole content was semiTransparent, so I dont how to do that. Is it possible?

       

      thanks

        • 1. Re: Transparent ScrollBar for Scroller
          kevinklin Adobe Employee

          Hi,

           

          Do you mind attaching a test case? I would assume setting the alpha on the track should work as long as the Scroller points to that specific skin in its skin.

           

          Thanks,

          -Kevin

          • 2. Re: Transparent ScrollBar for Scroller
            franto kormanak Level 1

            <!--- Defines the skin class for the HScrollBarSkin's track. The default skin class is HScrollBarTrackSkin. -->
                <components:DefaultButton id="track" left="0" right="0" height="100%" width="30"
                          focusEnabled="false" alpha="0.5"
                          skinClass="my.scrollbars.VScrollBarTrackSkin"
                          />
               
                <!--- Defines the skin class for the HScrollBarSkin's thumb. The default skin class is HScrollBarThumbSkin. -->
                <components:DefaultButton id="thumb" width="28" horizontalCenter="0"
                          focusEnabled="false" visible.inactive="false"
                          skinClass="my.scrollbars.VScrollBarThumbSkin"
                          />

             

            I've also try to set alpha inside my.scrollbars.VScrollBarTrackSkin, but still doesnt work. I;m using SDK Beta 2

            • 3. Re: Transparent ScrollBar for Scroller
              Peter deHaan Level 4

              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

              • 4. Re: Transparent ScrollBar for Scroller
                Peter deHaan Level 4

                Or you could try setting it via ActionScript and no custom skin needed.

                 

                <?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:HSlider id="sl"
                                   minimum="0.0" maximum="1.0"
                                   value="1.0"
                                   snapInterval="0.1" stepSize="0.1"
                                   change="sl_changeHandler(event)" />
                        <s:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION + ' | ' + Capabilities.version;" />
                    </s:controlBarContent>
                   
                    <fx:Script>
                        <![CDATA[
                            protected function sl_changeHandler(evt:Event):void {
                                scrllr.verticalScrollBar.track.alpha = sl.value;
                            }
                        ]]>
                    </fx:Script>
                   
                    <s:Scroller id="scrllr" width="500" height="400">
                        <s:Group>
                            <s:Rect width="100%" height="900">
                                <s:fill>
                                    <s:LinearGradient rotation="45">
                                        <s:GradientEntry color="red" />
                                        <s:GradientEntry color="haloGreen" />
                                        <s:GradientEntry color="haloBlue" />
                                    </s:LinearGradient>
                                </s:fill>
                            </s:Rect>
                        </s:Group>
                    </s:Scroller>
                   
                </s:Application>

                 

                Peter

                • 5. Re: Transparent ScrollBar for Scroller
                  FTQuest Level 3

                  @ 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

                  • 6. Re: Transparent ScrollBar for Scroller
                    Peter deHaan Level 4

                    @FTQuest,

                     

                    Sure, the top one is the decrementButton skin part. The incrementButton is the bottom button.

                     

                    protected function sl_changeHandler(evt:Event):void {

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

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

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

                    }

                     

                     

                    Peter

                    • 7. Re: Transparent ScrollBar for Scroller
                      franto kormanak Level 1

                      Peter, (or anyone else ) is it possible to move vertical scrollbar above content? I mean I want to see scrolled content behind sme-transparent VScrollBar. something like minViewportInset=-30 just for right side. (i'm not talking about scroll position, but move scrollbar component inside Scroller

                       

                      thank you

                      • 8. Re: Transparent ScrollBar for Scroller
                        FTQuest Level 3

                        @Peter

                        Oh, boy!

                        Thank you, Peter.

                        FTQuest

                        • 9. Re: Transparent ScrollBar for Scroller
                          Peter deHaan Level 4

                          @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

                          1 person found this helpful
                          • 10. Re: Transparent ScrollBar for Scroller
                            franto kormanak Level 1

                            Thanks Peter,

                             

                            <s:VScrollBar id="vsb" top="34" bottom="0" right="0" viewport="{planGroup}" /> works Thanks again for your help

                             

                            Franto

                            • 11. Re: Transparent ScrollBar for Scroller
                              Shongrunden Adobe Employee

                              Regarding moving the position of scrollbars in a Scroller:

                               

                              You can't reposition the scrollbars that are inside of a Scroller.  Scroller uses its own layout algorithm to position the scrollbars (in order to support auto scroll policies).

                               

                              Scroller is designed not to be re-skinned beyond changing the skin of its VScrollBar and HScrollBar.  Just like franto kormanak did above, if you would like to move scrollbars around you are encouraged to hook up your own VScrollBar/HScrollBar instead of using a Scroller.  See http://flexponential.com/2009/10/09/changing-the-position-of-the-scroll-bars-in-a-spark-li st/ for an example.