Создание Flash Preloader’а

Этот учебник научит вас созданию простейшего прелоадера (англ. preloader или говоря по-русски предзагрузчика, хотя что лучше звучит даже не знаю, будем придерживаться оригинала), для ваших Flash роликов, используя ActionScript 3.0. Прелоадер является достаточно важной составляющей в каждом отдельном Flash ролике, который вы размещаете в интернете, так как он предотвращает попытку проиграть сам ролик, когда ещё не весь его контент загрузился, и, также, показывает пользователю, как долго осталось ждать полной загрузки ролика. Этот учебник не требует каких-то особых знаний ActionScript 3.0 и использует всего один класс LoaderInfo для получения данных о загрузке.

Как выглядит прелоадер

 

 

 

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

Подготовка графической части Прелоадера

Начните с создания нового Flash ролика с ActionScript версии 3.0. Цвет фона, число кадров в секунду, и размер сцены в этом учебнике не играет роли.

Наш проект будет содержать всего две вещи, контент и ActionScript. Мы собираемся расположить слои на временной диаграмме так, чтобы один был под контент, а второй под ActionScript. Двойной щелчок по названию нашего единственного слоя в окне Timeline и переименуйте его в Content. Далее щелкните по кнопке Insert Layer(New Layer) для создания ещё одного слоя и назовите его Actions.

Так, с временной диаграммой готово, далее Кликните один раз по слою Content, чтобы добавить на него содержимое. Выберите инструмент Rectangle Tool (R), установите цвет Stroke Color на какой-нибудь темный и цвет Fill Color на какой-нибудь светлый. Я выбрал  черный для Stroke Color и голубой для Fill Color. Эти два элемента должны отличаться друг от друга, т.е. иметь разные цвета, чтобы в нашем прелоадере было понятно по рамке, насколько заполнена полоска с левого края. Как только вы задали эти два цвета, просто нарисуйте вашу полоску прелоадера на сцене.

Теперь у нас есть графическое изображение прелоадера, но пока мы не можем взаимодействовать с ним посредством ActionScript до тех пор, пока не конвертировали его в Movie Clip Symbol. Нам нужно отделить рамку от тела этой полоски, потому что тело полоски будет растягиваться, заполняя пустое пространство внутри рамки, отображая тем самым процесс загрузки. Чтобы все это сделать, вам нужно использовать инструмент Select Tool (в виде черной стрелочки), чтобы выделить только рамку нашего прелоадера. После того, как выделите её, нажмите на клавиатуре F8 для конвертации рамки в символ. Выберите Movie Clip в качестве типа символа и назовите его Outline.

Теперь нам нужно сделать тоже самое для тела нашего прелоадера. Щелкните по телу прелоадера и нажмите F8 чтобы сделать его символом. Установите тип Movie Clip и имя Barи наконец, установите точку Registration Point окна Convert to Symbol на левую сторону, перед тем, как нажмете на OK. Registration point — это точка, от которой наша полоска будет растягиваться в определенном направлении, или расти, если мы оставим её по центру, то наша полоска будет расширяться от центра рамки в обе стороны, но мы хотим, чтобы полоска росла слева направо, так что кликните по маленькому квадратику с левой стороны поля Registration Point.

Для того, чтобы получить доступ к нашей полоске через ActionScript, нам нужно присоединить к ней Instance Name (имя для данного экземпляра объекта), чтобы это сделать, вам нужно, чтобы появилось меню Properties Inspector, этого можно достичь выделив нашу полоску, а далее введите bar_mc для instance name.

Как вы могли заметить, наша полоска в данный момент загораживает рамку, это может быть немного неудобно, поэтому, чтобы наша полоска не закрывала рамку, мы собираемся переместить полоску на задний план сцены. Для того, чтобы это сделать, перейдите в меню Modify>Arrange>Send to Back или же нажмите комбинацию клавиш Ctrl+Shift+Стрелка вниз.

С полоской закончено, но в нашем прелоадере должен быть цифровой индикатор, отображающий процент загруженных данных. Для создания необходимого для этой задачи текстового поля, используйте инструмент Text Tool (T) и нарисуйте текстовое поле немного ниже полоски, затем перейдите в меню Properties Inspector и установите тип текста(Text type) как Dynamic Text, это такой тип текста, который может взаимодействовать с ActionScript. Установите тип шрифта(Family) как _sans и, наконец, впишите в параметр Instance Name текст loader_txt.

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

Написание кода для нашего прелоадера, используя ActionScript 3.0

Перед тем, как мы приступим к основному коду прелоадера, нужно убедиться, что ролик не будет проигрываться, пока не будет проверено, что все данные загружены. Чтобы остановить проигрывание ролика, используйте команду stop() в начале кода, для этого, просто напишите stop():

stop();

Код нашего прелоадера будет получать количество данных, которые уже загружены, и, сравнивать их с общим размером нашего SWF файла. Этот код прелоадера будет постоянно делать проверку, пока ролик не будет загружен. Чтобы вызвать повторяющуюся проверку, мы создадим обработчик события (event listener), который мы прикрепим к основной временной диаграмме(таймлайну), и затем вызовем функцию загрузки с помощью этого обработчика. Событие ENTER_FRAME выполняется определенное количество раз и зависит от количества кадров в секунду нашего проекта, то есть, данного ролика.

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void{
}

Теперь нам нужно написать функцию loading(), эта функция будет иметь следующие задачи:

  1. Получать количество уже загруженных данных и и общее количество данных файла.
  2. Изменять размер полоски в зависимости от этого значения.
  3. Отображать, сколько процентов данных загружено.
  4. И делать проверку, что если все данные загружены, то запустить ролик.

Итак, приступим к реализации всего этого поочередно. Для начала — это получение информации о байтах нашего movie clip’а, поэтому, мы используем новое свойство loaderInfo, которое выполняет эту задачу. Мы собираемся получить необходимые нам значения и и прицепить их к двум переменным:

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void{

var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;

}

Теперь мы собираемся использовать две эти переменные для выполнения второй задачи, где нам нужно изменять размер полоски в зависимости от того, сколько данных уже загружено, мы можем добиться этого путем деления значения загруженных данных на значение данных всего, и затем прицепить это значение к свойству scaleX нашей полоски, интересно, да? 🙂

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void{

var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;

bar_mc.scaleX = loaded/total;

}

Это было легко, но теперь у нас ещё одна задача, отобразить количество загруженных данных в процентах, и снова мы можем добиться этого делением количества загруженных данных на значение данных всего, и затем умножить полученное значение на 100 и установить его в качестве свойства text для нашего текстового поля loader_txt.

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void{

var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;

bar_mc.scaleX = loaded/total;
loader_txt = (loaded/total)*100;

}

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

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void{

var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;

bar_mc.scaleX = loaded/total;
loader_txt.text = Math.floor((loaded/total)*100);

}

И теперь, если мы хотим добавить значок процента в конец этого текста, мы можем добиться этого, используя оператор +:

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void{

var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;

bar_mc.scaleX = loaded/total;
loader_txt.text = Math.floor((loaded/total)*100)+ «%»;

}

Вот и все, последняя задача для нашего прелоадера это проверка, загружены ли все данные, мы может сделать это, используя оператор сравнения «==» внутри условного. Если значение истинно, то мы запустим наш ролик:

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void{

var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;

bar_mc.scaleX = loaded/total;
loader_txt.text = Math.floor((loaded/total)*100)+ «%»;

if (total == loaded){
play();
}

}

Имея хороший опыт, так же необходимо после завершения загрузки удалять обработчик, так как он больше не нужен, это поможет улучшить производительность:

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void{

var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;

bar_mc.scaleX = loaded/total;
loader_txt.text = Math.floor((loaded/total)*100)+ «%»;

if (total == loaded){
play();
this.removeEventListener(Event.ENTER_FRAME, loading);
}

}

Ну, вот мы и закончили! Теперь можете закрыть панель Actions, но для того, чтобы нормально протестировать ваш загрузчик, нужно поместить что то большое в ролик, чтобы посмотреть как работает прелоадер. Перейдите к таймлайнуправый щелчок по второму кадру и выберите Insert Blank Keyframe, чтобы выделить место под объект.

Теперь перейдите в File>Import и импортируйте большое изображение  в этот кадр. Можете добавить столько объектов и кадров, сколько вам нужно. Когда закончите, перейдите в меню Control>Test Movie а далее в открывшемся окне в меню View>Simulate Download, чтобы посмотреть как работает ваш прелоадер (Или нажмите Ctrl+Enter дважды, чтобы выполнить ту же функцию). И вы увидите его в работе. Если в вашем ролике один кадр, вы можете наблюдать мигание в конечном счете, так как проигрывание ролика после загрузки входит в цикл. Чтобы это предотвратить, можете использовать метод stop() в последнем кадре вашего ролик, для предотвращения проигрывания снова и снова, начиная с прелоадера.

Это заключение нашего учебника, надеюсь, вы узнали из него что-то новое для себя. Вы можете скачать конечный вариант работы здесь. Так же не бойтесь задавать вопросы на форуме Oman3D Forum и в комментариях.

— Конец учебника

 

Перевод: Кирилл SKV1991 Салтыков

Оригинал

skv1991

Начал заниматься созданием сайтов ещё в 2006 году. Так же занимаюсь уличной акробатикой, паркуром. Увлекаюсь видео съемкой монтажом, фотографией, 3D графикой, 3D анимацией, рисованием на планшете, и другим.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *