Flex: how to make progressbar skins?

Question

I wanna set a custom skin on my progressBar, but it's not working out the way I want it to. My skin has 3 different colors on it (green, yellow, red) and green should show until it's about 50%, then I want the yellow to appear after green and the red at 90% after green and yellow. So at 100% they should all show.

The problem is that the ProgressBar only sets the width of my skin so all colors are showing at all times. But if I use the indeterminateSkin but dont set indeterminate to true that doesn't happend.

How can I make a skin that doesn't just change width? Atm I'm just using a MovieClip for a skin.

Answer 1

I've done this in the past using programmatic skins. You need to create your own versions of ProgressBarSkin and ProgressBarMaskSkin and optionally ProgressBarTrackSkin. In your ProgressBarSkin, you can override the updateDisplayList method like so:

    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 = [0xd00000, 0xf0d000, 0x00ff00];

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

And in your ProgressBarMaskSkin do this:

    override protected function updateDisplayList(w:Number, h:Number):void {
        super.updateDisplayList(w, h);
        graphics.clear();

        this.drawRoundRect(2, 2, w - 4, h - 4, (h - 4) / 2, 0xffffff, 1); 
    }

Then you assign your skin classes to your progress bar and you are set. Hope that helps.