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); 
     } 

    } 
} 

あなたはその後、CSSにしたり、プログレスバーを使用したタグのいずれかで、あなたのプログレスバー上barSkinスタイルにこのスキンを設定します。

希望に役立ちます。

Answer 2

私はしばらく前にこれをしなければならなかったし、次のルートを取ることにしました：

私はDownloadProgressBarを拡張してカスタムプリローダーを構築し、その後、このDegrafaコンポーネントとそれを統合しました。 http://iamjosh.wordpress.com/2007/12/18/flex-custom-preloader/

、その後、動的上記のリンクそのdegrafaコンポーネントの値を調整するための責任があった別のクラスを作成しました：

http://degrafa.org/source/CapacityIndicator/CapacityIndicator.htmlはカスタムプリローダーを作成するために、私はこのtuteを使用したと思われます。もちろん、進行状況イベントのSWFDownloadProgress関数では、これらの値を適宜調整することができます。

私はこれが最速とそれをやって、かなりきれいな方法:)

幸運であることが判明！