创建具有 ProgressBar 的应用程序

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

在事件模式下创建具有 ProgressBar 组件的应用程序:

  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 设置为轮询模式。在轮询模式下,进度的确定方式为:侦听正在加载的内容上的 progress 事件并使用其 bytesLoadedbytesTotal 属性计算进度。此示例加载一个 Sound 对象,侦听其 progress 事件,并使用其 bytesLoadedbytesTotal 属性计算加载百分比。它将加载百分比同时显示在标签和"输出"面板中。

在轮询模式下创建具有 ProgressBar 组件的应用程序:

  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 设置为手动模式。在手动模式下,必须通过调用 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。除此之外,它还重复上一示例的功能,即在手动模式下创建 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 上的向上箭头,以推进进度栏。