Создание Flash-игр



Экран загрузки

Хотя вы всегда должны стремиться, чтобы размер готового файла был минимальным, у вас наверняка будут ролики, загрузка которых займет больше, чем несколько секунд при работе через модем. Если игра имеет размер в сотни килобайт, у некоторых пользователей ее загрузка может занять несколько минут.
Для таких больших роликов разработчики, как правило, создают экраны загрузки во Flash или Shockwave. Обычно экран загрузки представляет собой первый кадр или сиену ролика, таким образом, это первые данные, которые пройдут через модем пользователя. Затем на экране появляется надпись "Loading Game..." (Загрузка игры), чтобы пользователи знали, что происходит.
Во время загрузки ролика вы можете предоставлять еще какую-либо информацию пользователю. С использованием языка ActionScript можно показывать, какая часть ролика уже загружена или какую часть еще надо загрузить.

Создание полосы загрузки

Исходный файл: Loader1.fla

На рис. 17.3 показан первый кадр ролика Loader1.fla. Этот кадр появится перед пользователем после того, как несколько килобайт ролика будут загружены. Затем с помощью строки, расположенной в центре экрана, пользователь увидит, как идет процесс загрузки.

Рисунок 17.3 Полоса, отражающая прогресс загрузки и текстовое поле, сообщают пользователю о том, как проходит загрузка ролика


Код для этого довольно прост. С помощью функции getBytesTotal () можно определить, каков размер клипа. Если перед функцией getBytes Total () поставить префикс _root, это позволит выяснить объем всего ролика. Чтобы определить, сколько килобайт уже загружено, надо воспользоваться функцией getBytesLoaded().
В ролике Loaderl.fla на рабочем поле находится экземпляр клипа, который представляет собой простой прямоугольник. Он называется "Progress Bar Fill" (Заполнение полосы загрузки). Этот экземпляр был создан так, чтобы центр клипа располагался в верхнем левом углу прямоугольника. Точно также был создан индикатор запаса горючего в игре "Луноход" (см. главу 16). Так как центр клипа находится в верхнем левом углу прямоугольника, свойству _xscale можно присвоить любое значение от 0 до 100, ширина клипа будет изменяться, то есть он будет заполнять область, расположенную справа от его центра.
К экземпляру клипа прикрепите небольшой сценарий, который с помощью функции getBytesLoaded() основной временной шкалы выяснит, сколько байт уже загружено, и в соответствии с этим изменит вид прямоугольника. Когда весь ролик будет загружен, временная шкала перейдет к кадру "complete" (рис. 17.4). В этом кадре появляется сообщение о том, что загрузка завершена. Для того чтобы начать игру, пользователь должен щелкнуть по кнопке, расположенной в этом кадре. Такая кнопка -очень полезный элемент ролика, так как во время долгой загрузки пользователь может не смотреть на монитор, а вы бы не хотели, чтоб он пропустил начало анимации.

Рисунок 17.4 В кадре "complete" ролик ждет, пока игрок не щелкнет по кнопке, и лишь затем продолжается воспроизведение анимации

onClipEvent(load) {
// Определяем размер файла.
totalFileSize = _root.getBytesTotal();
// Прячем полосу загрузки.
this._xscale = 0;
}
onClipEvent(enterFrame) {
// Выясняем, сколько байт уже загружено.
bytesLoaded = _root.getBytesLoaded();
// Преобразуем это значение в величину от 0 до 1.
amountLoaded = bytesLoaded/totalFileSize;
// Преобразуем полученное значение в величину от 0 до 100.
percentLoaded = int(100*amountLoaded);
// Определяем масштаб полосы загрузки.
this._xscale = percentLoaded;
// Устанавливаем текстовое поле в основной временной шкале.
_root.loadingMessage = percentLoaded + "%";
// Проверяем, все ли уже загружено,
if (amountLoaded >= 1.0) {
_root.gotoAndStopt"complete") ;
}}

Просмотрите ролик Loaderl.fla, чтобы понять, как работает приведенный код. Загрузка выполняется в первой сцене, а остальная часть ролика - во второй. Когда пользователь щелкает по кнопке Play (Начать игру), с помощью команды play() ролик переходит от кадра "complete" к последующим.
Обратите внимание, что если вы откроете swf-файл Loaderl.fla и просмотрите его во Flash, то увидите немногое. С вашего локального жесткого диска ролик грузится слишком быстро, чтобы можно было увидеть экран загрузки. Вам нужно разместить файл на вашем Web-сайте, а затем просмотреть его с помощью браузера.

Намного проще все-таки использовать возможность Rash эмулировать модемное соединение. В меню окна предварительного просмотра выберете View->Show Streaming (или нажмите Ctrl+Enter) и ролик будет отображаться так же, как если бы он загружался по модемному, то есть очень медленному соединению. Пропускную способность этого виртуального соединения вы можете установить, выбрав пункт меню Debugging в окне предварительного просмотра.

Сложные экраны загрузки

Исходный файл: Loader2.fla

На рис. 17.3 видно, что в текстовом поле отображается величина 63%. Вместо такого метода измерения можно сообщать пользователю, сколько байт уже загружено и каков размер всего ролика. Для этого нужно изменить значение loadingmessage, записав следующее:

_root.loadingmessage = int(bytesLoaded/1000) + "kb/" + int(totalFileSize/1000) + "kb";

Тогда вместо 63% вы увидите 90 Kb/143 Kb, что лично мне больше нравится.
Выполняя несложные математические вычисления, вы можете сообщить пользователю, как быстро идет загрузка. Для этого нужно создать переменные, в которых будет храниться количество загруженных байт и время на их загрузку. Теперь вы можете определить скорость загрузки, разделив первую величину на вторую. Это позволит спрогнозировать, сколько времени займет загрузка всего ролика.
Следующий код представлен в ролике Loader2.fla. Он похож на предыдущий фрагмент кода, только здесь на экран выводится еще и дополнительная информация: скорость загрузки и оставшееся время.

onClipEvent(load) {
// Получаем исходную информацию.
totalFileSize = _root.getBytesTotal();
startTime = getTimer О;
startBytes = _root.getBytesLoadedf);
// Прячем полосу загрузки,
this. _xscale = 0;}
onClipEvent(enterFrame) {
// Выясняем, сколько байт уже загружено.
bytesLoaded = _root.getBytesLoaded();
// Преобразуем это значение в величину от 0 до 1.
amountLoaded = bytesLoaded/totalFileSize;
// Преобразуем полученное значение в величину от 0 до 100.
percentLoaded = int(100*amountLoaded);
// Определяем масштаб полосы загрузки.
this._xscale = percentLoaded;
// Определяем скорость загрузки.
timeSoFar = getTimerО - startTime;
speed = bytesLoaded/timeSoFar;
// Выясняем, сколько времени осталось до конца загрузки.
bytesLeft = totalFileSize - bytesLoaded; timeLeft = (bytesLeft/speed)/1000;
// 'Преобразуем полученное значение
// в величину с одной цифрой после запятой.
speed = int(10*speed)/10;
// Устанавливаем текстовые поля.
_root.bytesMessage = int(bytesLoaded/1000) + "kb/" + int(totalFileSize/1000) + "kb";
_root.speedMessage = speed + "k/sec";
_root.timeMessage = int(timeLeft) + " seconds remaining";

Поскольку мы округлили значение timeLeft до целого числа, то в течение последней секунды загрузки в соответствующем окне будет отображаться ноль. Если вас не устраивает такое положение дел, то вы можете округлить это значение до одного или большего количества знаков после запятой.

// Проверяем, все ли уже загружено.
if (amountLoaded >= 1.0) {
_root.gotoAndStop("complete");
}}

Другие типы экранов загрузки

Только что рассмотренные экраны загрузки - стандартные. Кроме них существует множество других вариантов. Самый простой: можно отображать только статический кадр с надписью "Loading, Please Wait..." (Идет загрузка, пожалуйста, подождите...). Когда загрузка будет завершена, ролик просто перейдет следующему кадру.
Этот вариант можно усложнить и поместить какую-либо повторяющуюся анимацию в кадр.
Еще более сложный вариант: каждый кадр будет отображать различные этапы загрузки. Например, будет собираться некая картинка: чем ближе загрузка будет подходить к концу, тем более целостным будет становиться изображение.
Возможно, для создания таких экранов загрузки функции getBytesTotal () и getBytesLoaded () не понадобятся. Вместо них можно воспользоваться функцией ifFrameLoaded (), чтобы узнать, загружены ли все графические объекты определенного кадра. Эта функция пригодится, если вы хотите, чтобы пользователь начал какую-то часть игры, но не смог продолжить до тех пор, пока необходимые кадры не будут готовы.
Но лучше сделать время загрузки полезным для игрока. Например, поместить в кадр руководство к игре. Вместо того чтобы просто сидеть и смотреть, как заполняется полоса загрузки, игрок сможет узнать полезную и необходимую для него информацию.

Назад Начало Вперед



Книжный магазин