flex 4 scroller skin自定义2

?根据前一篇的理论 ，想要自定义一个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,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>