根据前一篇的理论 ，想要自定义一个scroller皮肤，最简易的。用于dropdownlist以及datagrid等组件。要求如下：

1.没有上下按钮

2.thumb（拖动条）宽度细一些

3.鼠标划过和按住的时候显示橙色#ff9900，其他时候是灰色#222222

4.确保加载到dropdownlist上时不影响其他功能。


经过测试，代码和效果图如下：

1.dropdownlist skin添加

s:Scroller   skinClass="skins.skin_scroller"

2.新建皮肤skin_scroller,自定义VScrollBar皮肤

<!---  A vertical scrollbar that lets you control the portion of data that is displayed

           when there is too much data to fit vertically in a display area.

           The Scroller determines whether the vertical ScrollBar is visible. -->

   <s:VScrollBar id="verticalScrollBar" visible="false" skinClass="skins.myVscrollBar" fixedThumbSize="false"/>

3.新建皮肤myVscrollBar

<?xml version="1.0" encoding="utf-8"?>


<!--


   ADOBE SYSTEMS INCORPORATED

   Copyright 2008 Adobe Systems Incorporated

   All Rights Reserved.


   NOTICE: Adobe permits you to use, modify, and distribute this file

   in accordance with the terms of the license agreement accompanying it.


-->


<!--- The default skin class for the Spark VScrollBar component. The thumb and track skins are defined by the

VScrollBarThumbSkin and VScrollBarTrackSkin classes, respectively.  


      @see spark.components.VScrollBar

      @see spark.skins.spark.VScrollBarThumbSkin

      @see spark.skins.spark.VScrollBarTrackSkin


     @langversion 3.0

     @playerversion Flash 10

     @playerversion AIR 1.5

     @productversion Flex 4

-->

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

   <![CDATA[

       /**

        * @copy spark.skins.spark.ApplicationSkin#hostComponent

        */

       [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"];


       /**

        * @private

        */

       override public function get colorizeExclusions():Array {return exclusions;}


       /**

        * @private

        */

       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.  

@copy spark.components.supportClasses.TrackBase#track

@see spark.skins.spark.VScrollBarTrackSkin -->

<s:Button id="track" top="5" bottom="5" height="54"

 focusEnabled="false" tabEnabled="false" visible="false"

 skinClass="spark.skins.spark.VScrollBarTrackSkin" />


<!--- The default skin class is VScrollBarThumbSkin.

@copy spark.components.supportClasses.TrackBase#thumb

@see spark.skins.spark.VScrollBarThumbSkin -->

<s:Button id="thumb" skinClass="skins.skin_Vscroller_thumb" horizontalCenter="0" width="6"

 focusEnabled="false" visible.inactive="false" tabEnabled="false"

 />


</s:SparkSkin>


4.新建skin_Vscroller_thumb

<?xml version="1.0" encoding="utf-8"?>


<!--


   ADOBE SYSTEMS INCORPORATED

   Copyright 2008 Adobe Systems Incorporated

   All Rights Reserved.


   NOTICE: Adobe permits you to use, modify, and distribute this file

   in accordance with the terms of the license agreement accompanying it.


-->


<!--- The default skin class for the Spark Button component.  


      @see spark.components.Button


     @langversion 3.0

     @playerversion Flash 10

     @playerversion AIR 1.5

     @productversion Flex 4

-->

<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"

            xmlns:s="library://ns.adobe.com/flex/spark"

            xmlns:fb="http://ns.adobe.com/flashbuilder/2009"


            alpha.disabled="0.5">


   <fx:Metadata>

       <![CDATA[

       /**

        * @copy spark.skins.spark.ApplicationSkin#hostComponent

        */

       [HostComponent("spark.components.Button")]

       ]]>

   </fx:Metadata>


   <fx:Script fb:purpose="styling">

       <![CDATA[        

           import spark.components.Group;

           /* Define the skin elements that should not be colorized.

           For button, the graphics are colorized but the label is not. */

           static private const exclusions:Array = ["labelDisplay"];


           /**

            * @private

            */    

           override public function get colorizeExclusions():Array {return exclusions;}


           /**

            * @private

            */

           override protected function initializationComplete():void

           {

               useChromeColor = true;

               super.initializationComplete();

           }  




       ]]>        

   </fx:Script>


   <!-- states -->

   <s:states>

       <s:State name="up" />

       <s:State name="over" />

       <s:State name="down" />

       <s:State name="disabled" />

   </s:states>


   <!-- layer 1: shadow -->

   <!--- @private -->

   <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="0">

       <s:fill>

           <s:LinearGradient rotation="90">

               <s:GradientEntry color="0x000000"

                                color.down="0xFFFFFF"

                                alpha="0.01"

                                alpha.down="0" />

               <s:GradientEntry color="0x000000"

                                color.down="0xFFFFFF"

                                alpha="0.07"

                                alpha.down="0.5" />

           </s:LinearGradient>

       </s:fill>

   </s:Rect>


   <!-- layer 2: fill -->

   <!--- @private -->

   <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="0">

       <s:fill>

           <s:LinearGradient rotation="90">

               <s:GradientEntry color="0x222222"

                                color.over="0xff9900"

                                color.down="0xee7700"

                                alpha="0.85" />

               <s:GradientEntry color="0x222222"

                                color.over="0xff9900"

                                color.down="0xee7700"

                                alpha="0.85" />

           </s:LinearGradient>

       </s:fill>

   </s:Rect>




   <!-- layer 5: highlight stroke (all states except down) -->

   <!--- @private -->

   <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="0" excludeFrom="down">

       <s:stroke>

           <s:LinearGradientStroke rotation="90" weight="1">

               <s:GradientEntry color="0x222222" alpha.over="0.22" />

               <s:GradientEntry color="0x222222" alpha.over="0.22" />

           </s:LinearGradientStroke>

       </s:stroke>

   </s:Rect>


   <!-- layer 6: highlight stroke (down state only) -->

   <!--- @private -->

   <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="0" includeIn="down">

       <s:stroke>

           <s:LinearGradientStroke rotation="90" weight="1">

               <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />

               <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />

               <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />

               <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />

               <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />

           </s:LinearGradientStroke>

       </s:stroke>

   </s:Rect>

   <!--- @private -->

   <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="0" includeIn="down">

       <s:stroke>

           <s:LinearGradientStroke rotation="90" weight="1">

               <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />

               <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />

           </s:LinearGradientStroke>

       </s:stroke>

   </s:Rect>




</s:SparkButtonSkin>