使用 ActionScript 3.0 组件 |
|
|
|
| 使用 UI 组件 > 使用 ProgressBar > 创建具有 ProgressBar 的应用程序 | |||
下面的过程展示了如何在创作时将 ProgressBar 组件添加到应用程序。在此示例中,此 ProgressBar 使用事件模式。在事件模式下,加载的内容发出 progress 和 complete 事件,ProgressBar 调度这两个事件来显示进度。当发生 progress 事件时,该示例将更新标签以显示已加载内容的百分比。当发生 complete 事件时,该示例将显示"Loading complete"以及 bytesTotal 属性的值,该属性值为文件的大小。
在事件模式下创建具有 ProgressBar 组件的应用程序:event 作为 mode 参数。label 参数。text 参数的值。
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 设置为轮询模式。在轮询模式下,进度的确定方式为:侦听正在加载的内容上的 progress 事件并使用其 bytesLoaded 和 bytesTotal 属性计算进度。此示例加载一个 Sound 对象,侦听其 progress 事件,并使用其 bytesLoaded 和 bytesTotal 属性计算加载百分比。它将加载百分比同时显示在标签和"输出"面板中。
在轮询模式下创建具有 ProgressBar 组件的应用程序: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 设置为手动模式。在手动模式下,必须通过调用 setProgress() 方法来手动设置进度,并为其提供当前值和最大值来确定进度。在手动模式中不需要设置 source 属性。该示例使用一个最大值为 250 的 NumericStepper 组件来逐渐增加 ProgressBar 中的进度。当 NumericStepper 中的值发生变化,从而触发 CHANGE 事件时,事件处理函数 (nsChangeHander) 将调用 setProgress() 方法来推进进度栏。它还显示已完成进度相对于最大值的百分比。
在手动模式下创建具有 ProgressBar 组件的应用程序:
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) + "%";
}
下面的示例使用 ActionScript 创建一个 ProgressBar。除此之外,它还重复上一示例的功能,即在手动模式下创建 ProgressBar。
使用 ActionScript 创建 ProgressBar:
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) + "%";
}
|
|
|
|