Flash CS3 ドキュメンテーション 
ActionScript 3.0 コンポーネントガイド > UI コンポーネントの使用 > ProgressBar の使用 > ProgressBar を使用したアプリケーションの作成

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

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

event モードの ProgressBar コンポーネントを使用したアプリケーションを作成するには :

  1. 新しい Flash ファイル (ActionScript 3.0) ドキュメントを作成します。
  2. ProgressBar コンポーネントを [コンポーネント] パネルからステージにドラッグします。
  3. Button コンポーネントを [コンポーネント] パネルからステージまでドラッグします。
  4. Label コンポーネントをステージにドラッグし、インスタンス名を progLabel にします。
  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 を polled モードに設定します。polled モードでは、ロードされているコンテンツで発生する progress イベントを待機し、コンテンツの bytesLoaded プロパティと bytesTotal プロパティを使用して計算することにより進行状況を確認します。この例では、Sound オブジェクトをロードします。そのオブジェクトの progress イベントを待機し、bytesLoaded プロパティと bytesTotal プロパティを使用してロードされたパーセンテージを計算します。ラベルと [出力] パネルの両方に、ロードされたパーセンテージが表示されます。

polled モードの ProgressBar コンポーネントを使用したアプリケーションを作成するには :

  1. 新しい Flash ファイル (ActionScript 3.0) ドキュメントを作成します。
  2. ProgressBar コンポーネントを [コンポーネント] パネルからステージにドラッグし、プロパティインスペクタで次の値を入力します。
  3. Label コンポーネントをステージにドラッグし、プロパティインスペクタで次の値を入力します。
  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 を manual モードに設定します。manual モードでは、現在の値と最大の値を指定して setProgress() メソッドを呼び出し、どこまで進んだかを確認して、進行状況を手動で設定する必要があります。manual モードでは source プロパティを設定しません。この例では、NumericStepper コンポーネントを使用し、ProgressBar を最大値 250 までインクリメントできるようにしています。NumericStepper の値が変更されて CHANGE イベントがトリガされると、イベントハンドラ (nsChangeHander) で setProgress() メソッドが呼び出されて ProgressBar の表示を進めます。また、指定された最大値を基準として、進行が完了したパーセンテージも表示されます。

manual モードの ProgressBar コンポーネントを使用したアプリケーションを作成するには :

  1. 新しい Flash ファイル (ActionScript 3.0) ドキュメントを作成します。
  2. ProgressBar コンポーネントを [コンポーネント] パネルからステージにドラッグし、プロパティインスペクタで次の値を設定します。
  3. NumericStepper コンポーネントをステージにドラッグし、プロパティインスペクタで次の値を入力します。
  4. 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 を作成しています。これは、manual モードで ProgressBar を作成することを除けば、前の例の機能を複製したものです。

ActionScript を使用して 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 の表示を進めます。

 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート

現在のページ: http://livedocs.adobe.com/flash/9.0_jp/main/00000455.html