Change progress bar color in flex

Question

How to chnage progress bar color to green in the following code

<?xml version="1.0" encoding="utf-8"?>
 <mx:Application 
xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute" 
width="100"
height="100"
creationComplete="init()">

<mx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import flash.net.NetStream;

        private var myMic:Microphone;
        private var nc:NetConnection;


        private function init():void {
            initMic("0x19D319");


            myMic = Microphone.getMicrophone();
            myMic.setSilenceLevel(0);
            myMic.rate = 44;
            myMic.gain = 100;
            //myMic.setUseEchoSuppression(true);
            Security.showSettings(SecurityPanel.MICROPHONE);
            micLevel.visible = true;
            myMic.setLoopBack(true);


            addEventListener(Event.ENTER_FRAME, showMicLevel);
            if (myMic != null) 
            {
                micLevel.setProgress(myMic.activityLevel, 100);

            }


        }


        private function showMicLevel(event:Event):void{
            micLevel.setStyle("barColor", 0xf4b60f);

            switch (recordingState){
                case "idle" :

                    micLevel.setProgress(myMic.activityLevel, 100);
                    break;
                case "idle" :
                    Alert.show("2");
                    micLevel.setProgress(myMic.activityLevel, 100);
                    break;
                case "playing" :
                    micLevel.setProgress(ns.time, myDuration);
                    break;

            }
        }
        private function initMic(myColor:String):void{
            micLevel.setStyle("barColor", myColor);
        }

    ]]>
</mx:Script>

<mx:ProgressBar x="0" y="36" mode="manual" id="micLevel" label="" labelPlacement="bottom" width="100" fontSize="10" fontWeight="normal"/>


 </mx:Application>

Answer 1

You have the following properties to control the appearance of the progress bar

barColor="undefined"
barSkin="ProgressBarSkin"
borderColor="0xAAB3B3"
color="0x0B333C"
disabledColor="0xAAB3B3"

For more detailed information, refer to the documentation .

Answer 2

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:ProgressBar indeterminate="true" width="100%" 
        label="Ankur Sharma" bottom="10" barColor="#FF0000" trackHeight="15"/>

    <mx:ProgressBar indeterminate="true" width="100%" fontWeight="normal" 
        trackHeight="20" barColor="#333333" verticalGap="0" label="caseable.com"/>

</mx:Application>

hi, Check this progress bar work, may be u'd be luking for this

Ankur

Answer 3

barColor style property must be set to container that contains ProgressBar. From docs:

This style has no effect on other components, but can be set on a container to control the appearance of all progress bars found within.