진행 바 스타일 변경

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="vertical" 
        verticalAlign="middle" 
        backgroundColor="white"> 
  
    <mx:Script> 
        <![CDATA[ 
            import mx.events.SliderEvent; 
  
            private function init():void { 
                var c:Class = progressBar.getStyle("indeterminateSkin"); 
                progressBar.setStyle("barSkin", c); 
                progressBar.setProgress(15, 100); 
            } 
  
            private function progressBar_change(evt:SliderEvent):void { 
                progressBar.setProgress(evt.value, 100); 
            } 
        ]]> 
    </mx:Script> 
  
    <mx:ApplicationControlBar dock="true"> 
        <mx:Form styleName="plain"> 
            <mx:FormItem label="value:"> 
                <mx:HSlider id="slider" 
                        minimum="0" 
                        maximum="100" 
                        value="15" 
                        liveDragging="true" 
                        snapInterval="1" 
                        tickInterval="10" 
                        dataTipPrecision="0" 
                        change="progressBar_change(event);" /> 
            </mx:FormItem> 
        </mx:Form> 
    </mx:ApplicationControlBar> 
  
    <mx:ProgressBar id="progressBar" 
            mode="manual" 
            labelPlacement="center" 
            height="50" 
            creationComplete="init();" /> 
  
</mx:Application>

또한, BarSkin 스타일 을. CSS 파일 이나 < mx: Style / > 에 정의 할 수 있 습 니 다. 대체적으로 아래 와 같 습 니 다.

ProgressBar { 
    barSkin: ClassReference("mx.skins.halo.ProgressIndeterminateSkin"); 
}

또는 MXML 에서 아래 코드 를 이용 하여 barSkin 스타일 을 설정 할 수 있 습 니 다: < mx: ProgressBar

id="progressBar" 
        barSkin="mx.skins.halo.ProgressIndeterminateSkin" 
        mode="manual" 
        labelPlacement="center" 
        height="50" />