1 Reply Latest reply on Sep 14, 2010 11:43 PM by Shongrunden

    SKin SCroller

    Phuong Thanh Level 1

      Hello! now i want to make custom scroller. I have done custom verticalScroll bar by Flash catalyst. I want to use skin that for sroller but it don't run. Have anyone idea?? IF u have to another way custom scolller, can you help me???

        • 1. Re: SKin SCroller
          Shongrunden Adobe Employee

          Here's an example.

           

          Main.mxml:

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark">

              <s:Scroller skinClass="MyCustomScrollerSkin" width="200" height="200">
                  <s:Group>
                      <s:Button label="large content" width="500" height="500" />
                  </s:Group>
              </s:Scroller>
             
          </s:Application>


          MyCustomScrollerSkin.mxml (copied from the default ScrollerSkin and changed the skinClass of the VScrollBar to point to your VScrollBar skin):

          <s:SparkSkin>
              <fx:Metadata>
                  <![CDATA[
                  [HostComponent("spark.components.Scroller")]
                  ]]>
              </fx:Metadata>
             
              <fx:Script>
                  <![CDATA[   
                      /**
                       *  @private
                       */
                      override public function beginHighlightBitmapCapture() : Boolean
                      {
                          var needUpdate:Boolean = super.beginHighlightBitmapCapture();
                         
                          // Draw an opaque rect that fill our entire skin. Our background
                          // is transparent, but we don't want focus/error skins to
                          // poke through.  This is safe to do since we don't have any
                          // graphic elements as direct children.
                          graphics.beginFill(0);
                          graphics.drawRect(0, 0, width, height);
                          graphics.endFill();
                         
                          return needUpdate;
                      }
                     
                      /**
                       *  @private
                       */
                      override public function endHighlightBitmapCapture() : Boolean
                      {
                          var needUpdate:Boolean = super.endHighlightBitmapCapture();
                         
                          // Clear the rect we drew in beginBitmapCapture();
                          graphics.clear();
                         
                          return needUpdate;
                      }
                  ]]>
              </fx:Script>
             
              <s:VScrollBar id="verticalScrollBar" skinClass="MyCustomVScrollBarSkin" visible="false" />
              <s:HScrollBar id="horizontalScrollBar" visible="false" />
             
          </s:SparkSkin>