Flex进度条

时间:2023-12-19 18:26:50

Flex中,进度条的皮肤,以及使用Timer让它自动增加~

mxml中:

 <mx:ProgressBar id="proBar"
verticalCenter="0"
horizontalCenter="0"
trackSkin="probar.borderskin"
fontSize="12"
height="24"
color="#336699"
label="正在加载..."
labelPlacement="center"
maskSkin="probar.maskskin"
maximum="100"
direction="right"
mode="manual"
minimum="0"
barSkin="probar.updatedisplay_"
visible="false"
alpha="0.9"> </mx:ProgressBar>

as中:

(注意:没有贴上整个的,只是取了其中相关的)

 private var requestDataTimer:Timer = new Timer(50);

 public function complete():void
{
//register event.
requestDataTimer.addEventListener(TimerEvent.TIMER, progressOnRequestDataTimer);
} private function progressOnRequestDataTimer(event:TimerEvent):void
{
if (progressInt > separateProgressInt)
{
proBar.label = "数据量大或网络慢, 请耐心...";
requestDataTimer.stop();
return;
} proBar.setProgress(progressInt, 100);
proBar.label = "当前进度: " + progressInt.toString() + "%" + "(正在请求数据...)";
progressInt++;
}

呵呵,皮肤是在网上找来的(其实本人对flex研究不深,这皮肤里面的弯弯绕绕也没完全看明白,而且感觉flex的每次升级都变动很大,皮肤相关的很多属性都不是以前能用的,导致学习成本都很高啊~所以拿过来修改一番能用就用上了):

1.borderskin.as

 import mx.skins.halo.ProgressTrackSkin;
import mx.skins.Border;
import mx.styles.StyleManager;
import mx.utils.ColorUtil; /**
* ...
* @author Thyiad
*/
public class borderskin extends ProgressTrackSkin
{ public function borderskin()
{
super();
} override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h); // User-defined styles
var borderColor:uint = getStyle("borderColor");
var fillColors:Array = getStyle("trackColors") as Array;
this.styleManager.getColorNames(fillColors); // ProgressTrack-unique styles
var borderColorDrk1:Number = ColorUtil.adjustBrightness2(borderColor, -30); graphics.clear(); drawRoundRect(0, 0, w, h, 0, [borderColorDrk1, borderColor], 0, verticalGradientMatrix(0, 0, w, h)); drawRoundRect(1, 1, w - 2, h - 2, 0, fillColors, 0, verticalGradientMatrix(1, 1, w - 2, h - 2));
} }

2.maskskin.as

         import flash.display.Graphics;

     import mx.skins.halo.ProgressMaskSkin;

     /**
* ...
* @author Thyiad
*/
public class maskskin extends ProgressMaskSkin
{ public function maskskin()
{
super();
} override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h); // draw the mask
var g:Graphics = graphics;
g.clear();
g.beginFill(0xFFFF00);
//g.drawRect(1, 1, w - 2, h - 2);
g.drawRoundRect(1, 1, w - 2, h - 2, 20, 20);
g.endFill();
}
}

3.updatedisplay_.as

     import flash.display.Graphics;
import mx.skins.halo.ProgressIndeterminateSkin;
import mx.styles.StyleManager;
import mx.utils.ColorUtil;
import mx.controls.ProgressBar;
import mx.skins.halo.ProgressTrackSkin; /**
* ...
* @author Thyiad
*/
public class updatedisplay_ extends ProgressIndeterminateSkin
{ public function updatedisplay_()
{
super();
} override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h); var barColorStyle:* = 0xff9935; //blue
var barColor:uint=this.styleManager.isValidStyleValue(barColorStyle) ? barColorStyle : getStyle("themeColor"); var barColor0:Number = ColorUtil.adjustBrightness2(barColor, 0);
var hatchInterval:Number = getStyle("indeterminateMoveInterval"); if (isNaN(hatchInterval))
hatchInterval = 28; var g:Graphics = graphics; g.clear(); if (w == 0)
{
}
else
{
g.beginFill(barColor0, 1);
g.moveTo(0, 1);
g.lineTo(w, 1);
g.curveTo(w + 10, h / 2, w, h - 1);
g.lineTo(0, h - 1);
g.lineTo(0, 1);
g.endFill();
}
} }