Как динамически заполнить индикатор выполнения во 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 (в событии Progress) вы можете соответствующим образом настроить эти значения.

Я нашел, что это самый быстрый и довольно чистый способ сделать это:)

Удачи!