Использование компонента ProgressBar

Компонент ProgressBar отображает ход загрузки содержимого и используется для подстраховки в случае загрузки большого файла и задержки выполнения приложения. Компонент ProgressBar полезно использовать для отображения прогресса загрузки изображений или компонентов приложения. Процесс загрузки может быть как определенным, так и неопределенным. Определенный индикатор прогресса является линейным представлением хода выполнения задачи, которое используется, когда объем загружаемого содержимого известен. Неопределенный индикатор прогресса используется, когда объем загружаемого содержимого неизвестен. Также можно добавить компонент Label, чтобы отображать выполнение загрузки в процентном выражении.

Компонент ProgressBar использует 9-фрагментную шкалу и включает обложку полосы, обложку трека и неопределенную обложку.

Взаимодействие пользователей с компонентом ProgressBar

Существует три режима использования компонента ProgressBar. Чаще всего используются режимы события и опроса. Эти режимы определяют процесс загрузки, отправляющий события progress и complete (режимы событий и опроса) или сообщающий свойства bytesLoaded и bytesTotal (режим опроса). Компонентом ProgressBar можно также воспользоваться в ручном режиме, установив вручную свойства maximum , minimum и value и выполнив вызовы метода ProgressBar.setProgress() . Можно задать свойство indeterminate, чтобы указать, будет ли экземпляр ProgressBar заполняться полосками и иметь источник с неизвестным размером ( true ), либо он будет заполняться сплошной заливкой и иметь источник с известным размером ( false ).

Чтобы задать режим экземпляра ProgressBar, необходимо определить свойство mode либо через параметр mode в Инспекторе свойств или Инспекторе компонентов, либо с помощью ActionScript.

Если компонент ProgressBar используется для отображения состояния обработки, например разбора 100000 элементов, и если он находится в одном цикле кадра, то обновления ProgressBar останутся незаметны, так как не будет перерисовываться экран.

Параметры компонента ProgressBar

В Инспекторе свойств или Инспекторе компонентов можно задать следующие параметры для каждого экземпляра ProgressBar: direction , mode и source . Каждый из этих параметров имеет соответствующее свойство ActionScript с тем же именем.

Можно создать код ActionScript для управления этими и дополнительными параметрами компонента ProgressBar с помощью его свойств, методов и событий. Дополнительные сведения см. в описании класса ProgressBar в справочнике ActionScript® 3.0 для Adobe® Flash® Professional CS5 .

Создание приложения с компонентом ProgressBar

Ниже описывается процедура добавления компонента ProgressBar в приложение в ходе разработки. В этом примере компонент ProgressBar использует режим событий. В режиме событий загружаемое содержимое отправляет события progress и complete , которые экземпляр ProgressBar использует для отображения прогресса. Когда происходит событие progress , обновляется метка, отражающая загруженного содержимого. Когда происходит событие complete , отображается текст «Загрузка завершена» и значение свойства bytesTotal , представляющее размер файла.

  1. Создайте новый документ Flash (ActionScript 3.0).

  2. Перетащите компонент ProgressBar с панели «Компоненты» в рабочую область.

    • В Инспекторе свойств введите aPb в качестве имени экземпляра.

    • В разделе «Параметры» введите значение 200 для значения Х.

    • Введите 260 для значения Y.

    • Выберите значение event для параметра mode .

  3. Перетащите компонент Button с панели «Компоненты» в рабочую область.

    • В Инспекторе свойств введите loadButton в качестве имени экземпляра.

    • Введите 220 для параметра Х.

    • Введите 290 для параметра Y.

    • Введите значение Загрузить звук для параметра label .

  4. Перетащите компонент Label в рабочую область и присвойте экземпляру имя progLabel .

    • Введите 150 для значения ширины (W).

    • Введите 200 для параметра Х.

    • Введите 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 для значения Х.

    • Введите 225 для значения Y.

  3. Перетащите компонент Label в рабочую область и введите следующие значения в Инспекторе свойств.

    • Введите progLabel в качестве имени экземпляра.

    • Введите 180 для значения Х.

    • Введите 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 . В примере используется компонент NumericStepper с максимальным значением 250 для увеличения значения ProgressBar. Когда значение в экземпляре NumericStepper изменяется и отправляет событие CHANGE , обработчик события ( nsChangeHander ) вызывает метод setProgress() для увеличения значения ProgressBar. Также на основе максимального значения вычисляется и отображается процент выполненного процесса.

  1. Создайте новый документ Flash (ActionScript 3.0).

  2. Перетащите компонент ProgressBar с панели «Компоненты» в рабочую область и введите для него следующие значения в Инспекторе свойств.

    • Введите aPb в качестве имени экземпляра.

    • Введите 180 для значения Х.

    • Введите 175 для значения Y.

  3. Перетащите компонент NumericStepper в рабочую область и введите следующие значения в Инспекторе свойств.

    • Введите aNs в качестве имени экземпляра.

    • Введите 220 для значения Х.

    • Введите 215 для значения Y.

    • В разделе «Параметры» введите 250 для параметра maximum, 0 для параметра minimum, 1 для параметра stepSize и 0 для параметра value .

  4. Перетащите компонент Label в рабочую область и введите следующие значения в Инспекторе свойств.

    • Введите progLabel в качестве имени экземпляра.

    • Введите 150 для значения ширины (W).

    • Введите 180 для значения Х.

    • Введите 120 для значения Y.

    • В разделе «Параметры» очистите значение «Метка» параметра text.

  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.

Создание компонента ProgressBar с помощью ActionScript

В этом примере компонент 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.