使用 ProgressBar 組件

與 ProgressBar 組件的使用者互動
ProgressBar 組件參數
建立具有 ProgressBar 的應用程式

此 ProgressBar 組件會顯示載入內容的進度，不斷提醒使用者內容龐大時可能會耽擱應用程式的執行。當您需要顯示載入影像或應用程式特定部分的進度時，ProgressBar 就非常有用。載入過程有兩種情況：確定式及非確定式。「確定式」的進度列代表工作進度隨著時間呈線性遞增，使用於已確知所要載入內容的數量時。「非確定式」的進度列則是使用於不確定所要載入內容的數量時。您也可以加入 Label 組件，顯示載入進度百分比。

ProgressBar 組件會使用 9 分割縮放，而且具有列外觀元素、軌道外觀元素和非確定式外觀元素。

與 ProgressBar 組件的使用者互動

ProgressBar 組件有三種使用模式。最常用的模式為事件模式與輪詢模式。這些模式指定的載入程序會發出 progress 和 complete 事件 (事件與輪詢模式)，或者顯露 bytesLoaded 和 bytesTotal 屬性 (輪詢模式)。您也可藉由設定 maximum 、 minimum 和 value 屬性，同時呼叫 ProgressBar.setProgress() 方法，以使用手動模式的 ProgressBar 組件。如果 indeterminate 屬性為 true ，表示 ProgressBar 具有條紋填色及不明大小的載入來源， false 則表示具有純色填色及已知大小的載入來源。

若要設定 ProgressBar 的模式，請透過「屬性」檢測器或「組件檢測器」設定 mode 參數，或使用 ActionScript 設定 mode 屬性。

如果您在單一影格迴圈中使用 ProgressBar 顯示處理的狀態 (例如剖析 100,000 個項目)，ProgressBar 就不會反映更新情形，因為螢幕重繪並未發生。

ProgressBar 組件參數

您可以在「屬性」檢測器或「組件檢測器」中，為每個 ProgressBar 實體設定下列參數： direction 、 mode 和 source 。這些參數都具有相對應的 ActionScript 同名屬性。

您可以撰寫 ActionScript 利用 ProgressBar 組件的屬性、方法和事件，來控制上列各種選項及其它選項。如需詳細資訊，請參閱 Flash Professional 的 ActionScript 3.0 參考中的 ProgressBar 類別。

建立具有 ProgressBar 的應用程式

下列程序說明如何在編寫時將 ProgressBar 組件加入應用程式。在此範例中，ProgressBar 使用事件模式。若為事件模式，載入內容時會發出 progress 和 complete 事件，這些是由 ProgressBar 所傳送用來指示進度的事件。當 progress 事件發生時，範例就會更新標籤，以顯示已下載內容的百分比。當 complete 事件發生時，範例則會顯示 "Loading complete" 和 bytesTotal 屬性的值 (代表檔案大小)。

建立新的 Flash (ActionScript 3.0) 文件。
將 ProgressBar 組件從「組件」面板拖曳到「舞台」。
- 在「屬性」檢測器中，輸入實體名稱 aPb 。
- 在「參數」區段，輸入 200 做為 X 值。
- 輸入 260 做為 Y 值。
- 選取 event 做為 mode 參數的值。
將 Button 組件從「組件」面板到「舞台」。
- 在「屬性」檢測器中，輸入 loadButton 做為實體名稱。
- 輸入 220 做為 X 參數的值。
- 輸入 290 做為 Y 參數的值。
- 輸入 Load Sound 做為 label 參數的值。
將 Label 組件拖曳到「舞台」，並且為它指定實體名稱為 progLabel 。
- 輸入 150 做為 W 值。
- 輸入 200 做為 X 參數的值。
- 輸入 230 做為 Y 參數的值。
- 在「參數」區段，清除 text 參數的值。

開啟「動作」面板，選取主要「時間軸」中的「影格 1」，然後輸入下列 ActionScript 程式碼，載入 mp3 音效檔：

import fl.controls.ProgressBar; 
import flash.events.ProgressEvent; 
import flash.events.IOErrorEvent; 
 
var aSound:Sound = new Sound(); 
aPb.source = aSound; 
var url:String = "http://www.helpexamples.com/flash/sound/song1.mp3"; 
var request:URLRequest = new URLRequest(url); 
 
aPb.addEventListener(ProgressEvent.PROGRESS, progressHandler); 
aPb.addEventListener(Event.COMPLETE, completeHandler); 
aSound.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler); 
loadButton.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function progressHandler(event:ProgressEvent):void { 
        progLabel.text = ("Sound loading ... " + aPb.percentComplete); 
} 
 
function completeHandler(event:Event):void { 
    trace("Loading complete"); 
    trace("Size of file: " + aSound.bytesTotal); 
    aSound.close(); 
    loadButton.enabled = false; 
} 
 
function clickHandler(event:MouseEvent) {         
    aSound.load(request); 
} 
 
function ioErrorHandler(event:IOErrorEvent):void { 
    trace("Load failed due to: " + event.text); 
}

選取「控制 > 測試影片」。

建立具有輪詢模式 ProgressBar 組件的應用程式

下列範例將 ProgressBar 設定為輪詢模式。輪詢模式會藉由偵聽當前所載入內容的 progress 事件來判斷進度，而進度的算法則是依據 bytesLoaded 和 bytesTotal 屬性。此範例會載入 Sound 物件、偵聽該物件的 progress 事件，並使用物件的 bytesLoaded 和 bytesTotal 屬性來計算載入百分比。載入百分比將顯示於標籤上及「輸出」面板。

建立新的 Flash (ActionScript 3.0) 文件。
將 ProgressBar 組件從「組件」面板拖曳到「舞台」，然後在「屬性」檢測器中輸入下列值：
- 輸入 aPb 做為實體名稱。
- 輸入 185 做為 X 值。
- 輸入 225 做為 Y 值。
將 Label 組件拖曳到「舞台」，然後在「屬性」檢測器中輸入下列值：
- 輸入 progLabel 做為實體名稱。
- 輸入 180 做為 X 值。
- 輸入 180 做為 Y 值。
- 在「參數」區段，清除 text 參數的值。

開啟「動作」面板，選取主要「時間軸」中的「影格 1」，然後輸入下列 ActionScript 程式碼，建立 Sound 物件 ( aSound ) 並呼叫 loadSound() 將聲音載入 Sound 物件中：

import fl.controls.ProgressBarMode; 
import flash.events.ProgressEvent; 
import flash.media.Sound; 
 
var aSound:Sound = new Sound(); 
var url:String = "http://www.helpexamples.com/flash/sound/song1.mp3"; 
var request:URLRequest = new URLRequest(url); 
 
aPb.mode = ProgressBarMode.POLLED; 
aPb.source = aSound; 
aSound.addEventListener(ProgressEvent.PROGRESS, loadListener); 
 
aSound.load(request); 
 
function loadListener(event:ProgressEvent) { 
    var percentLoaded:int = event.target.bytesLoaded / event.target.bytesTotal * 100; 
    progLabel.text = "Percent loaded: " + percentLoaded + "%"; 
    trace("Percent loaded: " + percentLoaded + "%"); 
}

選取「控制 > 測試影片」，執行應用程式。

建立具有手動模式 ProgressBar 組件的應用程式

下列範例將 ProgressBar 設定為手動模式。使用手動模式時，必須呼叫 setProgress() 方法，並傳遞目前值與最大值供其判斷進度的範圍，藉以手動設定進度。在手動模式中無法設定 source 屬性。此範例會使用最大值為 250 的 NumericStepper 組件來遞增 ProgressBar。一旦 NumericStepper 的值變更而觸發 CHANGE 事件，事件處理常式 nsChangeHander 隨即呼叫 setProgress() 方法將 ProgressBar 往前推進。另外還會根據最大值，顯示完成進度百分比。

建立新的 Flash (ActionScript 3.0) 文件。
將 ProgressBar 組件從「組件」面板拖曳到「舞台」，然後在「屬性」檢測器中為組件指定下列值：
- 輸入 aPb 做為實體名稱。
- 輸入 180 做為 X 值。
- 輸入 175 做為 Y 值。
將 NumericStepper 組件拖曳到「舞台」，然後在「屬性」檢測器中輸入下列值：
- 輸入 aNs 做為實體名稱。
- 輸入 220 做為 X 值。
- 輸入 215 做為 Y 值。
- 在「參數」區段，輸入 250 做為 maximum 參數的值、輸入 0 做為 minimum 參數的值、輸入 1 做為 stepSize 參數的值、輸入 0 做為 value 參數的值。
將 Label 組件拖曳到「舞台」，然後在「屬性」檢測器中輸入下列值：
- 輸入 progLabel 做為實體名稱。
- 輸入 150 做為 W 值。
- 輸入 180 做為 X 值。
- 輸入 120 做為 Y 值。
- 在「參數」索引標籤中，清除 text 參數的值 Label。

開啟「動作」面板，選取主要「時間軸」中的「影格 1」，然後輸入下列程式碼：

import fl.controls.ProgressBarDirection; 
import fl.controls.ProgressBarMode; 
import flash.events.Event; 
 
aPb.direction = ProgressBarDirection.RIGHT; 
aPb.mode = ProgressBarMode.MANUAL; 
aPb.minimum = aNs.minimum; 
aPb.maximum = aNs.maximum; 
aPb.indeterminate = false; 
 
aNs.addEventListener(Event.CHANGE, nsChangeHandler); 
 
function nsChangeHandler(event:Event):void { 
    aPb.value = aNs.value; 
    aPb.setProgress(aPb.value, aPb.maximum); 
progLabel.text = "Percent of progress = " + int(aPb.percentComplete) + "%"; 
}

選取「控制 > 測試影片」，執行應用程式。
按一下 NumericStepper 上的「向上箭頭」，讓 ProgressBar 往前進。

使用 ActionScript 建立 ProgressBar

此範例會使用 ActionScript 建立 ProgressBar。除了這點不同以外，功能與前述範例一樣，仍是建立手動模式 ProgressBar。

建立新的 Flash (ActionScript 3.0) 文件。
將 ProgressBar 組件拖曳到「元件庫」面板。
將 NumericStepper 組件拖曳到「元件庫」面板。
將 Label 組件拖曳到「元件庫」面板。

開啟「動作」面板，選取主要「時間軸」中的「影格 1」，然後輸入下列程式碼：

import fl.controls.ProgressBar; 
import fl.controls.NumericStepper; 
import fl.controls.Label; 
import fl.controls.ProgressBarDirection; 
import fl.controls.ProgressBarMode; 
import flash.events.Event; 
 
var aPb:ProgressBar = new ProgressBar(); 
var aNs:NumericStepper = new NumericStepper(); 
var progLabel:Label = new Label(); 
 
addChild(aPb); 
addChild(aNs); 
addChild(progLabel); 
 
aPb.move(180,175); 
aPb.direction = ProgressBarDirection.RIGHT; 
aPb.mode = ProgressBarMode.MANUAL; 
 
progLabel.setSize(150, 22); 
progLabel.move(180, 150); 
progLabel.text = ""; 
 
aNs.move(220, 215); 
aNs.maximum = 250; 
aNs.minimum = 0; 
aNs.stepSize = 1; 
aNs.value = 0; 
 
aNs.addEventListener(Event.CHANGE, nsChangeHandler); 
 
function nsChangeHandler(event:Event):void { 
aPb.setProgress(aNs.value, aNs.maximum); 
progLabel.text = "Percent of progress = " + int(aPb.percentComplete) + "%"; 
}

選取「控制 > 測試影片」，執行應用程式。
按一下 NumericStepper 上的「向上箭頭」，讓 ProgressBar 往前進。