使用 ProgressBar 组件

ProgressBar 组件用于显示内容加载进度，这在内容较大而导致应用程序执行延迟时可消除用户的疑虑。ProgressBar 对于显示图像和部分应用程序的加载进度非常有用。加载进程可以是确定的也可以是不确定的。当要加载的内容量已知时，请使用 确定的 进度栏。确定的进度栏是一段时间内任务进度的线性表示。当要加载的内容量是未知时，请使用 不确定的 进度栏。还可以添加 Label 组件，以将加载进度显示为百分比。

ProgressBar 组件使用 9 切片缩放，并具有条形外观、轨道外观和不确定外观。

与 ProgressBar 组件的用户交互

可以采用三种模式来使用 ProgressBar 组件。最常用的模式是事件模式和轮询模式。这两种模式指定一个发出 progress 和 complete 事件（事件模式和轮询模式）或公开 bytesLoaded 和 bytesTotal 属性（轮询模式）的加载进程。还可以在手动模式下使用 ProgressBar 组件，方法是：设置 maximum 、 minimum 和 value 属性，并调用 ProgressBar.setProgress() 方法。可以设置不确定的属性，以指示 ProgressBar 是用条纹图案填充并且源的大小未知 ( true )，还是纯色填充并且源的大小已知 ( false )。

ProgressBar 的模式是通过设置其 mode 属性设置的，具体方法为：在“属性”检查器或“组件”检查器中设置 mode 参数，或使用 ActionScript。

使用 ProgressBar 显示处理状态（如正在分析 100,000 项）时，如果它处于单个帧循环中，则屏幕将不会重绘，因而看不到进度栏的更新。

ProgressBar 组件参数

您可以在“属性”检查器或“组件”检查器中为每个 ProgressBar 实例设置下列参数： direction 、 mode 和 source 。其中每个参数都有对应的同名 ActionScript 属性。

您可以编写 ActionScript，通过利用 ProgressBar 组件的属性、方法和事件来控制该组件的这些选项以及其他选项。有关详细信息，请参阅 《用于 Adobe® Flash® Professional CS5 的 ActionScript® 3.0 参考》 中的 ProgressBar 类。

创建具有 ProgressBar 的应用程序

下面的过程展示了如何在创作时将 ProgressBar 组件添加到应用程序。在此示例中，此 ProgressBar 使用事件模式。在事件模式下，加载的内容发出 progress 和 complete 事件，ProgressBar 调度这两个事件来显示进度。当发生 progress 事件时，该示例将更新标签以显示已加载内容的百分比。当发生 complete 事件时，该示例将显示“Loading complete”以及 bytesTotal 属性的值，该属性值为文件的大小。

  1. 创建一个新的 Flash (ActionScript 3.0) 文档。

  2. 将 ProgressBar 组件从“组件”面板拖到舞台上。

    • 在“属性”检查器中，输入实例名称 aPb 。

    • 在“参数”部分中，输入 200 作为 X 值。

    • 输入 260 作为 Y 值。

    • 选择 event 作为 mode 参数。

  3. 将 Button 组件从“组件”面板拖到舞台中。

    • 在“属性”检查器中，输入 loadButton 作为实例名称。

    • 输入 220 作为 X 参数。

    • 输入 290 作为 Y 参数。

    • 输入 Load Sound 作为 label 参数。

  4. 将一个 Label 组件拖到舞台上，然后为其指定实例名称 progLabel 。

    • 输入 150 作为 W 值。

    • 输入 200 作为 X 参数。

    • 输入 230 作为 Y 参数。

    • 在“参数”部分中，清除 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 作为实例名称。

    • 输入 185 作为 X 值。

    • 输入 225 作为 Y 值。

  3. 将一个 Label 组件拖到舞台上，并在“属性”检查器中输入以下值：

    • 输入 progLabel 作为实例名称。

    • 输入 180 作为 X 值。

    • 输入 180 作为 Y 值。

    • 在“参数”部分中，清除 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 属性。该示例使用一个最大值为 250 的 NumericStepper 组件来逐渐增加 ProgressBar 中的进度。当 NumericStepper 中的值发生变化，从而触发 CHANGE 事件时，事件处理函数 ( nsChangeHander ) 将调用 setProgress() 方法来推进 ProgressBar。它还显示已完成进度相对于最大值的百分比。

  1. 创建一个新的 Flash (ActionScript 3.0) 文档。

  2. 将 ProgressBar 组件从“组件”面板拖到舞台上，并在“属性”检查器中为其指定以下值：

    • 输入 aPb 作为实例名称。

    • 输入 180 作为 X 值。

    • 输入 175 作为 Y 值。

  3. 将一个 NumericStepper 组件拖到舞台上，并在“属性”检查器中输入以下值：

    • 输入 aNs 作为实例名称。

    • 输入 220 作为 X 值。

    • 输入 215 作为 Y 值。

    • 在“参数”部分中，输入 250 作为 maximum 参数，输入 0 作为 minimum 值，输入 1 作为 stepSize 参数，输入 0 作为 value 参数。

  4. 将一个 Label 组件拖到舞台上，并在“属性”检查器中输入以下值：

    • 输入 progLabel 作为实例名称。

    • 输入 150 作为 W 值。

    • 输入 180 作为 X 值。

    • 输入 120 作为 Y 值。

    • 在“参数”选项卡中，清除 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 上的向上箭头，以推进进度栏。

使用 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 上的向上箭头，以推进进度栏。