Web-разработка с Macromedia Studio MX



Создание индикатора загрузки


Во время загрузки материала имеет смысл показать пользователю приблизительное состояние процесса. Это обычно выполняется с помощью индикатора загрузки, перемещающегося слева направо.
Чтобы создать индикатор загрузки, выполните следующие действия.
1. Выделите первый кадр слоя видео. Это — тот кадр, в котором индикатор загрузки должен стать видимым. Выберите инструмент Rectangle. Установите отсутствие границы (Stroke: None) и темно-серый цвет заполнения.
2. Нарисуйте на экране прямоугольник. Выберите инструмент Direct Selection и щелчком выделите этот прямоугольник. Откройте окно Property, установите для прямоугольника ширину, равную 175 пикселям, а высоту — 17 пикселям/ Этот прямоугольник и будет служить индикатором загрузки.



Рис. 10.11. Видео импортировано во Flash MX. Добавлены слои Actions и Labels. Обратите внимание на метку в 10-м кадре слоя Labels и ее имя в окне Property

3. Выделите индикатор загрузки и преобразуйте его в символ Movie Clip. Для этого выберите в меню пункт Insert^Convert To Symbol или нажмите клавишу <F8>. Когда откроется диалоговое окно Convert To Symbol, присвойте символу имя Ваг и задайте тип его поведения как Movie Clip. Для этого в окне Property выберите Movie Clip и щелкните на верхнем левом прямоугольнике блока Registration. Это установит точку регистрации индикатора загрузки в верхний левый угол графики. Если диалоговое окно Convert to Symbol напоминает приведенное на рис. 10.12, щелкните на кнопке ОК. Вернитесь к основному видеоряду, выделите Movie Clip в кадре 1 и в окне Property присвойте экземпляру имя bar.



Рис. 10.12. Индикатор загрузки преобразован в символ Movie Clip, и ему присвоено имя. Его точка регистрации установлена в верхний левый угол объекта

4. Выделите клип Ваг в видеоряде и снова преобразуйте его в символ Movie Clip. Присвойте новому клипу имя Progress Bar, а его экземпляру — progressbar.
5. Откройте новый клип Progress Bar, дважды щелкнув на нем в библиотеке. Добавьте в фильм новый слой над уровнем, содержащим клип Ваг, и присвойте ему (слою) имя Progress Bar.
6. Измените название первого слоя в Ваr Layer. Выделите клип Ваг и выберите в меню пункт Edit=>Copy. Щелкните на первом кадре слоя Progress Bar, после чего выберите в меню пункт Edit=>Paste in Place. Копия клипа будет помещена на новый слой.
7. Выделите первый кадр слоя Progress Bar, чтобы выделить новый объект. Щелкните еще раз на объекте в видеоряде, установите имя экземпляра progress и, чтобы изменить цвет индикатора, выберите в окне свойств Color=>Tint.
8. Индикатор загрузки дает общее представление о том, насколько далеко продвинулась загрузка и сколько осталось загрузить. Добавьте новый слой Indicator в клип Progress Bar. Перетащите этот слой под слой Ваг.
9. Щелкните на первом кадре слоя Indicator. Выберите инструмент Text и создайте текстовое поле под цветной полоской на видеоряде. Установите следующие параметры: свойство текста — Dynamic Text; шрифт — 18-точечный, Arial; имя переменной поля — percentageDisp. Имя переменной имеет большое значение — оно будет вставлено в программу, управляющую предварительной загрузкой. Параметры Layers и Text клипа Progress Bar приведены на рис. 10.13.



Рис. 10.13. Установленные элементы и слои клипа. Обратите внимание на имя переменной в поле Varoma свойств

Создание программы на ActionScript для предварительной загрузки
Хорошим стилем написания программ является предварительное создание псевдокода. С его помощью мы описываем, что должно произойти, и согласно этому сценарию пишем саму программу. В случае с предварительным загрузчиком произойти должно многое. Основной фильм должен остановиться на кадре 1. Предварительный загрузчик должен продвинуться вперед до метки StartMovie и задать простой вопрос: достаточно ли загружено кадров для того, чтобы обеспечить безостановочное воспроизведение фильма? Это можно определить с помощью Bandwidth Profiler. После этого можно определить, сколько кадров или байт должно быть загружено до того, как начнет воспроизводиться фильм. В данном случае мы будем принимать в расчет количество байт.
Если из основного видеоряда не было загружено правильное количество кадров, выполните следующие действия.
1. Проверьте, сколько кадров уже загружено. Вычислите процент загрузки. Для этого количество загруженных кадров поделите на их общее количество и умножьте на 100.
2. Измените ширину индикатора загрузки слоя Progress Bar клипа Progress Bar в соответствии с вычисленным процентом.
3. Поместите число процентов в поле Dynamic Text.
4. Оставьте заголовок воспроизведения в кадре 1 и повторяйте действия 1-3, пока процент не станет равным 100.
Если в основном видеоряде было загружено правильное количество кадров, переместите заголовок воспроизведения на метку StartMovie и начните воспроизведение.
Ниже описывается, как используется ActionScript для обслуживания раздела предварительной загрузки, добавленного в фильм.
1. Выделите первый кадр на слое Script основного видеоряда и щелкните правой кнопкой мыши. Для кадра откроется контекстное меню, в котором нужно выбрать Actions. Откроется панель Actions.
2. В списке режимов панели Actions выберите пункт Normal Mode. На панели в левой части окна выберите Actions book, откройте Movie Actions и дважды щелкните на действии Stop.
3. В программной области окна Action вы увидите оператор stop ();. Закройте редактор действий. Действие Stop будет добавлено в первый кадр слоя Script, что будет обозначено на экране буквой "а".
4. Откройте клип Progress Bar и добавьте новый слой Actions. Переместите этот слой в самый верх.

Совет
Если при работе с Flash MX существуют слои Actions и Labels, второй всегда помещается над первым. Слой Actions всегда находится выше слоев содержания. Это помогает немного организовать видеоряд. Нахождение слоя Labels на верхнем уровне позволяет сразу же находить и использовать нужные метки видеоряда. Слой Scripts хранит все действия, производимые в кадрах.

5. Откройте панель Actions и выберите в списке режимов ввода Expert Mode. В этом режиме можно вводить текст непосредственно в область Actions.
6. Введите приведенную ниже программу. Строки, начинающиеся с двойной косой черты, являются комментариями. В данном случае мы будем объяснять каждую строку программы. При выполнении строки комментариев игнорируются.

This.onEnterFrame = function() {
preloadAmount = _root.getBytesTotal()/1.5
//количество байт, которые предстоит загрузить
//здесь подразумевается использование модемов 28.8К
loadedWidth = bar._Width
//ширина индикатора загрузки
if ( _root.getBytesLoaded() < preLoadAnount)
{
var ;percentage=(_root.getBytesLoaded()/preLoadAmount);
//Если загрузка все еще продолжается, вычисляем процент
//загруженного
progress._width=parselnt(loadedWidth*percentage);
//устанавливаем ширину индикатора, используя
//процент от общей ширины
percentageDisp=parse!nt(percentage*100)+"%";
//если отображается текстовый индикатор,
//получаем целочисленное представление процента
//и помещаем в текстовое поле
}
else
(
root.gotoAndPlay("MovieStart");
//если для воспроизведения загружено достаточно,
//даем указание на воспроизведение основного видео
} }

В приведенной выше программе прокомментированы действия, выполняемые каждой строкой. Первая строка устанавливает клип Progress Bar так, чтобы он выполнял приведенную программу каждый раз, когда Flash попытается переместиться к следующему кадру. После того как загружен достаточный объем видео, предварительный загрузчик перемещается к кадру с меткой StartMovie и начинает воспроизведение. Когда видео начнет воспроизводиться, о клипе Progress Bar и программе можно забыть.
7. В меню панели выберите пункт Check Syntax или нажмите комбинацию клавиш <Ctrl+T>. Откроется диалоговое окно Notification, в котором вы будете проинформированы об отсутствии или наличии ошибок. Если ошибок нет, в этом диалоговом окне щелкните на кнопке ОК и закройте окно Actions. Если ошибки будут обнаружены, перейдите к указанной строке и убедитесь в отсутствии орфографических ошибок и лишних пробелов, поскольку это — две самые распространенные ошибки.
8. Протестируйте фильм. Для этого выберите в меню пункт Control=>Test или нажмите комбинацию клавиш <Ctrl+Enter>. Самой лучшей проверкой загрузчика будет имитация реальных условий, т.е. включение Bandwidth Profiler и Streaming. Для этого выберите в меню пункты View=>Bandwidth Profiler и ViewoShow Streaming. Таким способом можно получить приблизительное представление о том, как будет загружаться фильм при различных пропускных способностях канала.