原文地址:http://hi.baidu.com/sheng00/item/ec3498c7fdc83263f7c95d80
trackbar是整个的条
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
minHeight="13" >
<fx:Script>
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
</fx:Script>
<!-- layer 1: border -->
<s:Rect left="0" right="0" top="0" bottom="0" width="199"
topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6"
bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">
<s:stroke>
<s:LinearGradientStroke rotation="90">
<s:GradientEntry color="0xFFFFFF"
alpha=".12" />
<s:GradientEntry color="0xFFFFFF"
alpha="0.8" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 2: inner border -->
<s:Rect left="1" right="1" top="1" bottom="1"
topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6"
bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">
<s:stroke>
<s:SolidColorStroke color="0x939393" alpha="1" />
</s:stroke>
</s:Rect>
<!-- layer 3: fill -->
<s:Rect left="2" right="2" top="2" bottom="2"
topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6"
bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xeeeeee"
alpha="1" />
<s:GradientEntry color="0xeeeeee"
alpha="1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 4: inner shadow -->
<s:Rect left="2" top="2" bottom="2" width="1" >
<s:fill>
<s:SolidColor color="0x000000" alpha="0.12" />
</s:fill>
</s:Rect>
<s:Rect right="2" top="2" bottom="2" width="1" >
<s:fill>
<s:SolidColor color="0x000000" alpha="0.12" />
</s:fill>
</s:Rect>
<s:Rect left="3" top="2" right="3" height="1" >
<s:fill>
<s:SolidColor color="0x000000" alpha="0.12" />
</s:fill>
</s:Rect>
</s:SparkSkin>
bar是当前进度条
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" >
<fx:Script>
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
</fx:Script>
<!-- layer 1: fill -->
<s:Rect left="2" right="2" top="2" bottom="2"
topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6"
bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x154c87"
alpha="1" />
<s:GradientEntry color="0x154c87"
alpha="1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: border -->
<s:Rect left="2" right="2" top="2" bottom="2"
topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6"
bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">
<s:stroke>
<s:LinearGradientStroke rotation="90">
<s:GradientEntry color="0x154c87"
alpha=".9" />
<s:GradientEntry color="0x154c87"
alpha="0.5" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 3: right edge -->
<s:Rect right="1" top="2" bottom="2" width="1" >
<s:fill>
<s:SolidColor color="0xffffff" alpha="0.55" />
</s:fill>
</s:Rect>
</s:SparkSkin>
用的时候
pbar = new ProgressBar();
pbar.setStyle("trackSkin",CustomProgressBarTrackSkin);
pbar.setStyle("barSkin",CustomProgressBarSkin);
当然也可以
<mx:ProgressBar barSkin="skins.CustomProgressSkin"
trackSkin="skins.CustomProgressBarTrackSkin"/>
效果如图: