ProgressBar コントロールは、処理の進行状況を時間経過に沿って視覚的に表現するものです。ProgressBar コントロールには、確定型と不確定型の 2 つの種類があります。確定型の ProgressBar コントロールでは、時間の経過に伴う処理の進行状況が比例直線的に表現されます。ユーザーを長時間待たせる必要があるとき、その処理の規模が事前にわかっている場合に使用します。

不確定型の ProgressBar コントロールは、処理の規模が不確定である場合に、処理の経過時間に基づいて進捗状況を表現します。処理の規模が明らかな場合は、確定型の ProgressBar コントロールを使用することをお勧めします。

次の例は、ProgressBar コントロールの両方の種類を示しています。

ProgressBar コントロールは、処理の完了まで長時間にわたってユーザーを待たせる必要がある場合に使用します。ProgressBar コントロールは、あらゆるタイプのコンテンツロード処理に適用できます。どの程度のコンテンツがロード済みであるかを表示するラベルを使用することもできます。

ProgressBar コントロールのモード

ProgressBar コントロールの動作モードを指定するには、mode プロパティを使用します。ProgressBar コントロールは、次の動作モードをサポートしています。

event 

progress イベントと complete イベントを送出するロードプロセスを、source プロパティを使って指定します。例えば、SWFLoader コントロールと Image コントロールはファイルのロードの過程で、これらのイベントを送出します。一般に、このモードでは、確定型の ProgressBar を使用します。ProgressBar コントロールは、source プロパティの値が EventDispatcher クラスを拡張するものである場合のみ更新されます。これがデフォルトのモードです。

また、イメージを再ロードする場合や、SWFLoader コントロールと Image コントロールで複数のイメージをロードする場合など、複数のロードプロセスについて進捗状況を評価したいときにもこのモードを使用します。

polled 

bytesLoaded プロパティおよび bytesTotal プロパティを実装するロードプロセスを、source プロパティを使って指定します。これらのプロパティは、SWFLoader コントロールと Image コントロールなどに実装されています。一般に、このモードでは、確定型の ProgressBar を使用します。

manual 

maximum、minimum、indeterminateの各プロパティを設定し、setProgress() メソッドを呼び出します。一般に、このモードでは、不確定型の ProgressBar を使用します。

ProgressBar コントロールの作成

次の例のように、MXML で ProgressBar コントロールを定義するには、<mx:ProgressBar> タグを使用します。MXML で他の場所（別のタグ内または ActionScript ブロック内）にあるコンポーネントを参照する場合は、id 値を指定します。

次の例では、Image コントロールで、デフォルトの event モードを使用して、イメージのロード状況を追跡します。

<?xml version="1.0"?>
<!-- controls\pbar\PBarSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            public function initImage():void {
              image1.load('http://localhost:8100/flex/assets/DSC00034.JPG');
            }
        ]]>
    </mx:Script>

    <mx:VBox id="vbox0" 
        width="600" height="600">
        <mx:Canvas>
            <mx:ProgressBar width="200" source="image1"/>
        </mx:Canvas>
        <mx:Button id="myButton" 
            label="Show" 
            click="initImage();"/>
        <mx:Image id="image1" 
            height="600" width="600" 
            autoLoad="false" 
            visible="true"/> 
    </mx:VBox>
</mx:Application>

この例を最初に実行した後は、通常、ブラウザのキャッシュ内に大きなイメージが格納されます。2 回目にこの例を実行する前に、ProgressBar コントロールが完了するのを確認できるように、ブラウザのキャッシュをクリアします。ブラウザのキャッシュをクリアしないと、Flash Player はキャッシュからイメージをロードするので、ProgressBar コントロールが 0% から 100% に変わる速度が速すぎて、その間の処理状況が追跡されていることを確認できないことがあります。

このモードでは、Image コントロールはロード中に progress イベントを生成し、ロードが完了したときに complete イベントを生成します。

<mx:Image> タグには bytesLoaded プロパティと bytesTotal プロパティが実装されているため、次のように、polled モードを使用することもできます。

<mx:ProgressBar width="200" source="image1" mode="polled"/>

manual モード（mode="manual"）で使用するには、不確定モードの ProgressBar コントロールで maximum プロパティと minimum プロパティ、および setProgress() メソッドを使用します。setProgress() メソッドのシグネチャを次に示します。

setProgress(Number completed, Number total)

completed 処理の進行量を、maximum から minimum の範囲内の値で指定します。例えば、ロードされたバイト数を追跡する場合は、既にロード済みのバイト数を指定します。

total 処理の合計を指定します。例えば、ロードされたバイト数を追跡する場合は、ロードの対象となる合計バイト数を指定します。通常は、maximum と同じ値になります。

進捗状況を評価するには、setProgress() メソッドを明示的に呼び出して ProgressBar コントロールを更新する必要があります。

ProgressBar コントロールのラベルの定義

デフォルトでは、ProgressBar に「LOADING xx%」（xx はロード済みイメージの割合）のように表示されます。他のテキストストリングを指定するには、label プロパティを使用します。

label プロパティでは、ラベルテキストのストリングに次の特殊文字を使用できます。

%1 

現在ロード済みのバイト数に相当します。

%2 

合計バイト数に相当します。

%3 

ロードが完了した比率に相当します。

%% 

% 記号に相当します。

例えば、ラベルに次のように表示させたいとします。

Loading Image 1500 out of 78000 bytes, 2%

次のコードを使用します。

<?xml version="1.0"?>
<!-- controls\pbar\PBarLabel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            public function initImage():void {
              image1.load('http://localhost:8100/flex/assets/DSC00034.JPG');
            }
        ]]>
    </mx:Script>

    <mx:VBox id="vbox0" 
        width="600" height="600">
        <mx:Canvas>
            <mx:ProgressBar 
                width="300" 
                source="image1" 
                mode="polled" 
                label="Loading Image %1 out of %2 bytes, %3%%" 
                labelWidth="400"/>        
        </mx:Canvas>
        <mx:Button id="myButton" 
            label="Show" 
            click="initImage();"/>
        <mx:Image id="image1" 
            height="600" width="600" 
            autoLoad="false" 
            visible="true"/> 
    </mx:VBox>
</mx:Application>

前の例と同様に、この例を 2 回目に実行する前に、ブラウザのキャッシュをクリアするようにしてください。