AS3自訂HSlider

AS3自訂HSlider

效果：

改動的地方：
1.HSliderSkin 控制項主皮膚
2.HSliderTrackSkin 軌道皮膚
3.HSliderThumbSkin 滑塊皮膚

1.HSliderSkin 添加以下代碼:

<!-- 滑塊左邊的藍色條 -->

其中right是設定藍色條的右邊距，自己修改成合適的產生方法

<!-- blur -->
<s:Rect left="1" right="{1 + (100 - hostComponent.value)/100*this.width}" top="3.5" bottom="3.5"
radiusX="2" radiusY="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x9ac6df"/>
<s:GradientEntry color="0xafe2ff"/>
</s:LinearGradient>
</s:fill>
</s:Rect>

2.HSliderTrackSkin 修改為以下代碼:

<!-- fill -->
<s:Rect left="1" right="1" top="3.5" bottom="3.5" radiusX="2" radiusY="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xCECECE"/>
<s:GradientEntry color="0xDEDEDE"/>
</s:LinearGradient>
</s:fill>
</s:Rect>

3.HSliderThumbSkin 代碼如下:

<!-- border -->
<s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="4" radiusY="4">
<s:fill>
<s:SolidColor color="0x4F4F4F"  />
</s:fill>
</s:Rect>

<!-- fill -->
<s:Rect left="-0.5" right="-0.5" top="-0.5" bottom="-0.5" radiusX="3" radiusY="3">
<s:fill>
<s:LinearGradient>
<s:GradientEntry color="0xFFFFFF" 
color.over="0xE5E5E5"
color.down="0x999999" />
</s:LinearGradient>
</s:fill>
</s:Rect>