如何在Flex/Actionscript中動態填充進度條？

Question

我想創造出的它的％是基於一些變量不同的顏色填充的進度條。例如33％將填補用不同顏色的進度條的33％，然後40％將同樣，填充它的40％。在Actionscript和Flex 3中執行此操作的最佳方法是什麼？

Answer 1

我已經在過去這樣做的方法是創建一個自定義進度欄皮膚，然後設置填充到是去酒吧（即使酒吧的一小部分實際上得到的整個長度上的梯度繪製。）聽起來很奇怪使用的東西，有難停到顏色的漸變，但它實際上是很容易的。您爲下一個顏色設置停止位置，緊接着前一個顏色的結束停止位置。這裏有一個例子，其中從綠色的顏色變爲紅色中點處：

package some.package.skins 
{ 
    import flash.display.GradientType; 
    import flash.geom.Matrix; 

    import mx.core.UIComponent; 
    import mx.skins.halo.ProgressBarSkin; 

    public class ColoredProgressBarSkin extends ProgressBarSkin 
    { 
     override protected function updateDisplayList(w:Number, h:Number):void { 
      super.updateDisplayList(w, h); 
      graphics.clear(); 

      var fullWidth:int = w; 
      if (parent != null && (parent as UIComponent).mask != null) 
       fullWidth = (parent as UIComponent).mask.width; 

      var matrix:Matrix = new Matrix(); 
      matrix.createGradientBox(fullWidth, h); 
      var colors:Array = [0x00ff00, 0x00ff00, 0xff0000, 0xff0000]; 

      this.graphics.lineStyle(); 
      this.graphics.beginGradientFill(GradientType.LINEAR, colors, [1,1,1,1], [0,128,128,255], matrix); 
      this.graphics.drawRoundRect(2, 2, w - 4, h - 4, h - 4); 
     } 

    } 
} 

然後，您可以設置這個皮膚到barSkin風格的進度條上，無論是在CSS或者在您使用進度條的標籤。

希望有所幫助。

Answer 2

我不得不這樣做而回，並選擇採取以下途徑：

我建立了一個自定義的預加載通過擴展DownloadProgressBar，然後用這個Degrafa組件集成它。 http://degrafa.org/source/CapacityIndicator/CapacityIndicator.html

要創建自定義預加載，我想用這種土特： http://iamjosh.wordpress.com/2007/12/18/flex-custom-preloader/

，然後創建一個單獨的類，這是負責在上述連結的可degrafa部件動態地調整的值。然後，當然在你的SWFDownloadProgress功能（在進度事件），您可以相應地調整這些值。

我發現這是最快的和做的相當乾淨的方式:)

祝你好運！