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>