О компоненте ProgressBar

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

По умолчанию, компоненты экспортируются в первый кадр. Это означает, что компоненты будут загружены в фильм до начала проигрывания первого кадра. Если требуется создать предзагрузчик, то необходимо отключить экспорт в первый кадр в диалоге Linkage (он доступен в меню библиотеки фильма). Однако сам ProgressBar должен быть установлен для экспорта в первый кадр, чтобы полностью эмулировать предзагрузчик.

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

ProgressBar позволяет показывать прогресс загрузки данных. Имеется несколько способов (режимов) использования компонента ProgressBar. Тип режима можно установить с помощью инспектора свойств (параметр mode). Наиболее используемы два режима: event и polled. Первый режим использует события продвижения (progress) и окончания (complete) загрузки данных (event - событие), второй использует для своей работы методы getBytesLoaded() и getBytesTotal(). Компонент ProgressBar также поддерживает режим manual (ручного управления), в котором вручную определяются свойства maximum, minimum, и indeterminate, и используется метод ProgressBar.setProgress() для установки количества загруженных данных.

Параметры ProgressBar

Для каждого экземпляра компонента ProgressBar в инспекторе свойств или инспекторе компонента можно изменить следующие параметры:

• mode - режим работы компонента ProgressBar. Может принимать одно из 3-ех значений: event, polled, или manual. Значение по умолчанию - event.

• source - строка, которая будет преобразована в объект, представляющая имя экземпляра источника.

• direction указывает направление, в котором продвигается полоса прогресса. Данное свойство может быть принимать следующие значения: right(правое) или left (левое). Значение по умолчанию right.

• label - текст, отображающий прогресс загрузки. Этот параметр - строка в формате "%1 out of %2 loaded (%3%%)". В этой строек %1 - указывает количество загруженных байтов, %2 - общие количество байт, и %3 - процентное отношение загруженных данных к их общему количеству. Символы "%%" означают отображение символа процента - "%". Если величина для %2 неизвестна, на ее месте будут стоять два знака вопроса (??). Если свойство неопределенно, то текст не будет показан.

• labelPlacement указывает положение текста полосы прогресса. Параметр может принимать одно из следующих значений: top, bottom, left, right, center. Значение по умолчанию - bottom.

• conversion - число, на которое будут поделены величины %1 и %2 в свойстве label перед тем как будут отображены. Значение по умолчанию - 1.

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

Следующий план объясняет, как добавить компонент ProgressBar к фильму на этапе проектирования. В примере компонент работает в режиме event. В режиме event отображение прогресса загрузки данных основано на использовании событий progress и complete.

1. Перетащите компонент ProgressBar с панели Components на сцену.
2. В инспекторе свойств сделайте следующее:
   • Введите имя экземпляра pBar.
   • Установите параметр mode в значение event.
3. Перетащите компонент Loader с панели Components на сцену.
4. В инспекторе свойств имя экземпляра для данного компонента loader.
5. Выделите ProgressBar и в инспекторе свойств для параметра source введите loader.
6. Выделите первый кадр, откройте панель Actions, и введите следующий код, который загружает JPEG файл в компонент Loader:

   loader.autoLoad = false;
   loader.contentPath = "http://imagecache2.allposters.com/images/86/017_PP0240.jpg";
   pBar.source = loader;
   // loading does not start until load() is invoked
   loader.load();
   

В следующем примере используется режим polled. В данном режиме отображение прогресса осуществляется за счет применения методов getBytesLoaded() и getBytesTotal().

1. Перетащите компонент ProgressBar с панели Components на сцену.
2. В инспекторе свойств сделайте следующее:
   • Введите имя экземпляра pBar.
   • Установите параметр mode в значение polled.
   • Введите для параметра source значение loader.
3. Выделите первый кадр, откройте панель Actions, и введите следующий код, который создает объект Sound (переменная loader) и вызывает его метод loadSound() для загрузки звука в фильм:

   var loader:Object = new Sound();
   loader.loadSound("http://soundamerica.com/sounds/sound_fx/A-E/air.wav", true);
   

В следующем примере используется режим manual. Ручной режим управления подразумевает самостоятельную установку свойств maximum, minimum, indeterminate и использование метода setProgress() для отображения процесса загрузки данных.

1. Перетащите компонент ProgressBar с панели Components на сцену.
2. В инспекторе свойств сделайте следующее:
   • Введите имя экземпляра pBar.
   • Установите параметр mode в значение manual.
3. Выделите первый кадр, откройте панель Actions, и введите следующий код, который вручную устанавливает количество загруженных данных с помощью метода setProgress():

   for(var:Number i = 1; i <= total; i++){
     // insert code to load file
     pBar.setProgress(i, total);
   }
   

ProgressBar.complete

Использование

Вариант 1:

on(complete){
  ...
}

Вариант 2:

listenerObject = new Object();
listenerObject.complete = function(eventObject){
  ...
}
pBar.addEventListener("complete", listenerObject);

Объект события

В дополнении к стандартным свойствам объект события ProgressBar.complete имеет два специфичных свойства: current (текущее количество загруженных данных), и total (общие количество).

Описание

Событие; оповещает все зарегистрированные листнеры после завершения загрузки данных.

Первый вариант обработки события использует синтаксис on() и должен быть расположен непосредственно на экземпляре ProgressBar. Ключевое слово this, внутри конструкции on() указывает на экземпляр компонента. Например, следующий код, расположенный на экземпляре pBar, посылает строку "_level0.pBar" в панель Output:

on(complete){
  trace(this);
}

Второй вариант основан на использовании модели генератор-листенеры. Экземпляр компонента (pBar) генерирует событие (в данном случае complete), и вызывает функцию обработчик листенера, имя которой совпадает с названием события. При вызове функции ей передается объект события, который содержит информацию о наступившем событии. С помощью метода EventDispatcher.addEventListener() регистрируется листенер для определенного типа события.

Пример

Регистрируется объект листенер для события complete. Реакция на произошедшее событие будет вывод сообщения в панель Output:

form.complete = function(eventObj){
  // eventObj.target is the component that generated the complete event,
  // i.e., the progress bar.
  trace("Current ProgressBar value = " + eventObj.target.value);
}
pBar.addEventListener("complete", form);