How to dynamically fill a progress bar in Flex/Actionscript?

Question

I want to create a progress bar of which a % of it is filled in with a different color based on some variable. For example 33 % would fill 33 % of the progress bar with a different color and then 40 % would likewise, fill 40 % of it. What is the best way to do this in Actionscript and Flex 3?

Answer 1

The way I've done this in the past is to create a custom progress bar skin, then set the fill to be a gradient that goes the entire length of the bar (even though a smaller portion of the bar actually gets drawn.) Sounds strange to use a gradient for something that has hard stops to the colors, but it's actually pretty easy. You set the stop for the next color right next to an end stop for the previous color. Here's an example where the color changes from green to red at the mid point:

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

    }
}

You then set this skin to the barSkin style on your progress bar, either in CSS or in the tag where you use the progress bar.

Hope that helps.

Answer 2

I had to do this a while back and opted to take the following route:

I built a custom preloader by extending the DownloadProgressBar and then integrated it with this Degrafa component. http://degrafa.org/source/CapacityIndicator/CapacityIndicator.html

To create the custom preloader, I think I used this tute: http://iamjosh.wordpress.com/2007/12/18/flex-custom-preloader/

and then created a separate class that was responsible for dynamically adjusting the values in that degrafa component linked above. And then of course in your SWFDownloadProgress function (on the Progress Event), you can adjust those values accordingly.

I found this to be the quickest and a fairly clean way of doing it :)

Good luck!