Уроки Flash: Preloader

Источник: demiart

Don Carleone

Этот урок посвящен созданию простых, но красивеньких и функциональных прелоадеров. Возможно, опытным мастером читать его не стоит, а вот новичкам в самый раз.

Часть 1 (loader.fla)

1. Создадим новый документ со стандартными размерами 550 х 400. Фон сделаем черным.

Рис. 1

2 .Единственный слой, который у нас пока есть, назовем "Background".Создадим новый слой, который назовем "Progress Bar".

Рис. 2

3. Теперь вставляем новый символ, ему присваиваем имя "Progress Bar Fill" (рис. 3). Это будет наша полоска, которая будет двигаться.

Рис. 3

4. Мы автоматически перейдем в режим редактирования этого символа. Рисуем красный прямоугольник с красными границами размером 165 х 20 с помощью Rectangle Tool. Если кто не знает, как задавать размеры: выбираем Rectangle Tool:

Рис. 4

Затем перемещаем мышку на рабочее поле, нажимаем "Alt", щелкаем левой клавишей мышки (не отпуская "Alt") и перед нами появляется следующее поле (Рис. 5).

Рис.5

Width - ширина, Height - высота. Draw from center - необязательно отмечать, все равно нам его еще предстоит двигать.

5. Теперь, пожалуй, самое важное: разместить красный прямоугольник, который мы только что нарисовали так, чтобы центр МувиКлипа находился в его верхнем углу (рис. 6).

Рис. 6

6. С редактированием символа закончили. Переходим на основную временную шкалу. Вставляем МувиКлип "Progress Bar Feel" в первый ключевой кадр слоя "Progress Bar". Центруем его (рис. 7).

Рис. 7

7. Создаем текстовое поле в этом же слое. Привязываем ему переменную loadingMessage

Рис. 8

8. Подгоняем текстовое поле по размерам к МувиКлипу и размещаем точно на нем.

Рис. 9

9. Шрифт увеличиваем до 15-ого.

10. Пришло время Action Script-а (АС). Создаем второй ключевой кадр слоя "Progress Bar Feel", удаляем все, что там появилось (копия первого ключевого кадра) и импортируем любую картинку, в панели AC пишем stop (); . Второму ключевому кадру присваиваем имя "start", а в первом ключевом кадре в панели AC тоже пишем stop ();

В первом ключевом кадре слоя "Progress Bar" в символ "Progress Bar Feel" в панели AC пишем:

CODE

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

11. Тестим: "Ctrl" + "Enter". Сразу же появится картинка второго ключевого кадра, но (для пользователей Flash 8) жмем View - Simulate Download и увидим уже прелоадер, потому что Flash будет симулировать закачку из Интернета. View - Download Settings - можно выбрать скорость Интернета для симулирования закачки.

12. Красная полосочка тускло смотрится, поэтому создадим новый слой и назовем его "Border". В первом ключевом кадре этого слоя точно по контору символа "Progress Bar Feel" нарисуем прямоугольник с белыми границами и любым цветом внутри, альфу ему делаем нулевой, и он становится невидимым. Таким образом получили очень красивую границу возле прелоадера (рис. 11).

Рис. 11

Если никак не получается подогнать по размеру границу и символ полосы-загрузки, то увеличьте границу, поставив ей толщину 2 или 3, как это сделал я.

Это наш первый обычный прелоадер, который обязан делать каждый Флэш-мастер. Теперь, конечно, дело за вашей фантазией и вкусом. В итоге, чтобы вы ни делали, это должно быть красиво. Экспериментируйте. Можно сделать красивенький МувиКлип над прелоадером с надписью "Loading" или даже разместить мини-игру, типа крестиков-ноликов, чтобы юзеры не скучали. Опять же повторюсь, нет предела совершенству. Вдохновляйтесь и творите.

Часть 2 (loader2.fla)

Разобравшись в части первой и поняв технику создания прелоадеров, осложним ее в части второй.

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

1. В слое "Progress Bar" в первом ключевом кадре создаем новое текстовое поле, к которому привязываем переменную loadingBytes. Настройки текста аналогичны п.7 Части 1. Цвет, размер, шрифт устанавливаете по вкусу.

2. Теперь в панели Actions для Progress Bar Feel пишем следующий скрипт:

CODE

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

3. Тестируем и любуемся: Ctrl + Enter.

Часть 3 (loader3.fla)

Теперь создадим прелоадер не только с процентным и количественным отношением загруженной информации, но и скоростью загрузки и оставшимся временем.
К имеющимся у нас еще из Части 2 двум текстовым полям добавим два новых в первой ключевой кадр слоя "Progress Bar". Параметры выставляем аналогично пункту 7 Части первой. К одному из этих текстовых полей прикрепляем переменную speedMessage, а к другому timeMessage. В символ "Progress Bar Feel" пишем такой код:

CODE

onClipEvent(load) {
// Определяем начальные параметры
totalFileSize = _root.getBytesTotal();
startTime = getTimer();
startBytes = _root.getBytesLoaded();

// Прячем полосу загрузки
this._xscale = 0;
}

onClipEvent(enterFrame) {

// Выясняем, сколько байт уже загружено
bytesLoaded = _root.getBytesLoaded();

// Преобразуем это значение в величину от 0 до 1
amountLoaded = bytesLoaded/totalFileSize;

// Преобразуем полученное значение в величину от 0 до 100
percentLoaded = Math.floor(100*amountLoaded);

// Определяем масштаб полосы загрузки
this._xscale = percentLoaded;

// Узнаем скорость
timeSoFar = getTimer() - startTime;
speed = bytesLoaded/timeSoFar;

// Узнаем, сколько осталось
bytesLeft = totalFileSize - bytesLoaded;
timeLeft = (bytesLeft/speed)/1000;

// Скорость загрузки (преобразование)
speed = Math.floor(10*speed)/10;

// устанавливаем текстовые поля
_root.loadingMessage = percentLoaded + "%";
_root.loadingBytes = Math.floor(bytesLoaded/1000) + " kb / " + Math.floor(totalFileSize/1000) + " kb";
_root.speedMessage = speed + " kb/sec";
_root.timeMessage = Math.floor(timeLeft) + " seconds remaining";

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