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
プロパティの値が表示されます。
-
新しい Flash (ActionScript 3.0) ドキュメントを作成します。
-
ProgressBar コンポーネントをコンポーネントパネルからステージにドラッグします。
-
プロパティインスペクターで、インスタンス名として
aPb
と入力します。
-
「パラメーター」セクションに X 値として
200
と入力します。
-
Y 値として
260
と入力します。
-
mode
パラメーターで
event
を選択します。
-
Button コンポーネントをコンポーネントパネルからステージまでドラッグします。
-
Label コンポーネントをステージにドラッグし、インスタンス名を
progLabel
にします。
-
アクションパネルを開いて、メインタイムライン内でフレーム 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
と入力します。
-
X 値として
185
と入力します。
-
Y 値として
225
と入力します。
-
Label コンポーネントをステージにドラッグし、プロパティインスペクターで次の値を入力します。
-
アクションパネルを開いて、メインタイムライン内でフレーム 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
プロパティを設定しません。この例では、NumericStepper コンポーネントを使用し、ProgressBar を最大値 250 までインクリメントできるようにしています。 NumericStepper の値が変更されて
CHANGE
イベントがトリガーされると、イベントハンドラー(
nsChangeHander
)で
setProgress()
メソッドが呼び出されて ProgressBar を進行します。また、指定された最大値を基準として、進行が完了したパーセンテージも表示されます。
-
新しい Flash (ActionScript 3.0) ドキュメントを作成します。
-
ProgressBar コンポーネントをコンポーネントパネルからステージにドラッグし、プロパティインスペクターで次の値を設定します。
-
インスタンス名として
aPb
と入力します。
-
X 値として
180
と入力します。
-
Y 値として
175
と入力します。
-
NumericStepper コンポーネントをステージにドラッグし、プロパティインスペクターで次の値を入力します。
-
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 を進行します。
|
|
|