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://degrafa.org/source/CapacityIndicator/CapacityIndicator.html

要创建自定义预加载器，我想我使用了这个tute： http://iamjosh.wordpress.com/2007/12/18/flex-custom-preloader/

然后创建一个单独的类，负责动态调整上面链接的degrafa组件中的值。当然，在SWFDownloadProgress函数中（在Progress Event上），您可以相应地调整这些值。

我发现这是最快捷，最干净的方式：）

祝你好运！

如何在Flex / Actionscript中动态填充进度条？

2 个答案: