ProgressBar コンポーネントの使用

ProgressBar コンポーネントは、コンテンツのロードの進行状況を表示します。これにより、コンテンツが大きく、アプリケーションの実行までに時間がかかる場合でも、ユーザーを安心させることができます。ProgressBar は、イメージやアプリケーションのロードの進行状況を表示させるときに役立ちます。 ロードプロセスは有限または無限にすることができます。 有限のプログレスバーは、処理の進行状況を時間経過に沿って直線的に表現するもので、ロードするコンテンツの量が事前にわかっているときに使用します。無限のプログレスバーは、ロードするコンテンツの量が不明なときに使用します。Label コンポーネントを追加して、ロードの進行状況をパーセンテージとして表示することもできます。

ProgressBar コンポーネントでは、9 スライスの拡大 / 縮小を使用しており、バーのスキン、トラックのスキン、および無限のバーのスキンが使用されます。

ProgressBar コンポーネントのユーザー操作

ProgressBar コンポーネントには、使用するモードが 3 種類あります。 最もよく使用されるのは、イベントモードおよびポーリングモードです。 これらのモードは、ロードプロセスで progress イベントと complete イベントを実行するのか(イベントモードおよびポーリングモード)、または bytesLoaded プロパティと bytesTotal プロパティを公開するのか(ポーリングモード)を指定します。また、ProgressBar コンポーネントをマニュアルモードで使用することもできます。その場合は、 maximum minimum および value プロパティを設定し、 ProgressBar.setProgress() メソッドを呼び出します。indeterminate プロパティを設定して、ProgressBar にサイズ不明のソースをストライプ模様のバーで表示するのか( true )、またはサイズのわかっているソースを塗りつぶして表示するのか( false )を指定できます。

ProgressBar のモードは、 mode プロパティを設定して指定します。このプロパティは、プロパティインスペクターまたはコンポーネントインスペクターの mode パラメーターを設定するか、ActionScript を使用して設定します。

100,000 個のアイテムを解析するような処理の状況を ProgressBar を使用して表示する場合、その処理が単一フレーム内でループするときは、画面が再描画されないので、ProgressBar の表示内容は更新されません。

ProgressBar コンポーネントのパラメーター

プロパティインスペクターまたはコンポーネントインスペクターで ProgressBar の各インスタンスに設定できるパラメーターは、 direction mode および source です。これらの各パラメーターには、対応する同名の ActionScript プロパティがあります。

ActionScript を記述すれば、ProgressBar コンポーネントのプロパティ、メソッド、イベントを使用して、これらのオプションやその他のオプションを制御できます。 詳しくは、「 Adobe Flash Professional CS5 用 ActionScript 3.0 リファレンスガイド 」の ProgressBar クラスを参照してください。

ProgressBar を使用したアプリケーションの作成

次の手順は、オーサリング時に ProgressBar コンポーネントをアプリケーションに追加する方法を示しています。 この例では、ProgressBar でイベントモードを使用します。 イベントモードでは、コンテンツのロードで progress イベントと complete イベントが実行されます。このイベントを ProgressBar が送り出して進行状況を示します。 progress イベントが発生すると、ラベルが更新されて、ロードされたコンテンツのパーセンテージが表示されます。 complete イベントが発生すると、「ロード完了」というメッセージと、ファイルのサイズを示す bytesTotal プロパティの値が表示されます。

  1. 新しい Flash (ActionScript 3.0) ドキュメントを作成します。

  2. ProgressBar コンポーネントをコンポーネントパネルからステージにドラッグします。

    • プロパティインスペクターで、インスタンス名として aPb と入力します。

    • 「パラメーター」セクションに X 値として 200 と入力します。

    • Y 値として 260 と入力します。

    • mode パラメーターで event を選択します。

  3. Button コンポーネントをコンポーネントパネルからステージまでドラッグします。

    • プロパティインスペクターで、インスタンス名として loadButton と入力します。

    • X パラメーターとして 220 と入力します。

    • Y パラメーターとして 290 と入力します。

    • label パラメーターとして サウンドをロード と入力します。

  4. Label コンポーネントをステージにドラッグし、インスタンス名を progLabel にします。

    • W 値として 150 と入力します。

    • X パラメーターとして 200 と入力します。

    • Y パラメーターとして 230 と入力します。

    • 「パラメーター」セクションで、 text パラメーターの値をクリアします。

  5. アクションパネルを開いて、メインタイムライン内でフレーム 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); 
    }
  6. 制御/ムービープレビューを選択します。

ポーリングモードの ProgressBar コンポーネントを使用したアプリケーションの作成

次の例では、ProgressBar をポーリングモードに設定します。 ポーリングモードでは、ロードされているコンテンツで発生する progress イベントをリスンし、コンテンツの bytesLoaded プロパティと bytesTotal プロパティを使用して計算することにより進行状況が決定されます。この例では、Sound オブジェクトをロードし、その progress イベントをリスンし、 bytesLoaded プロパティおよび bytesTotal プロパティを使用してロードされたパーセンテージを計算します。ラベルと出力パネルの両方に、ロードされたパーセンテージが表示されます。

  1. 新しい Flash (ActionScript 3.0) ドキュメントを作成します。

  2. ProgressBar コンポーネントをコンポーネントパネルからステージにドラッグし、プロパティインスペクターで次の値を入力します。

    • インスタンス名として aPb と入力します。

    • X 値として 185 と入力します。

    • Y 値として 225 と入力します。

  3. Label コンポーネントをステージにドラッグし、プロパティインスペクターで次の値を入力します。

    • インスタンス名として progLabel と入力します。

    • X 値として 180 と入力します。

    • Y 値として 180 と入力します。

    • 「パラメーター」セクションで、text パラメーターの値をクリアします。

  4. アクションパネルを開いて、メインタイムライン内でフレーム 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 + "%"); 
    }
  5. 制御/ムービープレビューを選択して、アプリケーションを実行します。

マニュアルモードの ProgressBar コンポーネントを使用したアプリケーションの作成

次の例では、ProgressBar をマニュアルモードに設定します。 マニュアルモードでは、現在の値と最大値を指定して setProgress() メソッドを呼び出し、進捗状況を決定して、進行状況を手動で設定する必要があります。マニュアルモードでは source プロパティを設定しません。この例では、NumericStepper コンポーネントを使用し、ProgressBar を最大値 250 までインクリメントできるようにしています。 NumericStepper の値が変更されて CHANGE イベントがトリガーされると、イベントハンドラー( nsChangeHander )で setProgress() メソッドが呼び出されて ProgressBar を進行します。また、指定された最大値を基準として、進行が完了したパーセンテージも表示されます。

  1. 新しい Flash (ActionScript 3.0) ドキュメントを作成します。

  2. ProgressBar コンポーネントをコンポーネントパネルからステージにドラッグし、プロパティインスペクターで次の値を設定します。

    • インスタンス名として aPb と入力します。

    • X 値として 180 と入力します。

    • Y 値として 175 と入力します。

  3. NumericStepper コンポーネントをステージにドラッグし、プロパティインスペクターで次の値を入力します。

    • インスタンス名として aNs と入力します。

    • X 値として 220 と入力します。

    • Y 値として 215 と入力します。

    • 「パラメーター」セクションで、maximum パラメーターとして 250 、minimum 値として 0 stepSize パラメーターとして 1 value パラメーターとして 0 をそれぞれ入力します。

  4. Label コンポーネントをステージにドラッグし、プロパティインスペクターで次の値を入力します。

    • インスタンス名として progLabel と入力します。

    • W 値として 150 と入力します。

    • X 値として 180 と入力します。

    • Y 値として 120 と入力します。

    • パラメーター」タブで、text パラメーターの Label の値をクリアします。

  5. アクションパネルを開いて、メインタイムライン内でフレーム 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) + "%"; 
    }
  6. 制御/ムービープレビューを選択して、アプリケーションを実行します。

  7. NumericStepper で上向き矢印を押して、ProgressBar を進行します。

ActionScript を使用した ProgressBar の作成

この例では、ActionScript を使用して ProgressBar を作成しています。これは、マニュアルモードで ProgressBar を作成する前の例の機能と重複しています。

  1. 新しい Flash (ActionScript 3.0) ドキュメントを作成します。

  2. ProgressBar コンポーネントをライブラリパネルにドラッグします。

  3. NumericStepper コンポーネントをライブラリパネルにドラッグします。

  4. Label コンポーネントをライブラリパネルにドラッグします。

  5. アクションパネルを開いて、メインタイムライン内でフレーム 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) + "%"; 
    }
  6. 制御/ムービープレビューを選択して、アプリケーションを実行します。

  7. NumericStepper で上向き矢印を押して、ProgressBar を進行します。