Madness and Flash

В этом уроке будут показаны два варианта создания показателя загрузки
1) Процентный
2) Кадровый


Первый вариант - Процентный

Как это работает?
Идея работы прелоадера очень проста: мы используем возможности ActionScript для того, чтобы узнать, сколько байт клипа уже загружено у пользователя, и сколько их всего. А потом просто сравниваем -- если заргруженных меньше, чем всего, то значит клип еще не загрузился, а если равное количество, то мы можем уже стартовать просмытривать его. Вдобавок ко всему, мы привяжем к коду графический индикатор загрузки, который покажет, сколько % загружено.

Шаг 1
Создадим клип со стандартными размерами 550 на 400 пикселей

Шаг 2
Настроим Timeline
Теперь делаем новый слой на Временной Линии(далее ВЛ), называем его Действия(или Actions, если хотите), а который уже был, назовем Контент(или Contents). Это не даст нам запутаться, все коды и действия будут в слое Action, а графика в Contents
З.Ы. Если вы раскладываете все слои по папкам, то можно и эти два слоя поместить в какую-нибудь папку.
Правый клик на ВЛ слоя Actions, затем Insert Keyframe, или просто F6. После этого нужно создать обычный фрейм на слое Contents. Выбираем ВЛ этого слоя и нажимаем F5 или правой кнопкой Insert Frame.
У нас получается, что на нижнем слое второй кадр ничем не будет отличаться от первого, т.е. все изменения на первом повлекут за собой изменения на втором, а на верхнем второй кадр никак не зависит от первого. Вообще советую не злоупотреблять Keyframe там, где можно обойтись обычными Frame, ведь чем больше ключевых кадров, тем больше вес мувика.

Шаг 3.
Создаем показатель загрузки
Поскольку груфика у нас на слое Contents, то и рисовать тоже будем там. Выбираем на панели инструментов(Tools), инструмент Rectangle и рисуем в центре сцены прямоугольник.

Шаг 4.
Мувиклип
Теперь нам нужно превратить наш прямоугольник в мувиклип, чтобы выполнять с ним действия через ActionScipt. Сейчас нужно правильно выделить части прямоугольника. Выделяем ТОЛЬКО РАМКУ вокруг нашего бара.

Шаг 5.
Мувиклип рамки
Преобразуем румку в мувиклип, для этого нажимаем F8 и среди трех типов выбираем мувиклип. Назовите его как хотите, это не имеет значения.

Шаг 6.
Мувиклип бара
Сейчас выбираем инструментом Selection Tool сам прямоугольник. Вновь нажимаем F8. Только теперь ОБЯЗАТЕЛЬНО измените регистр, выбрав левую сторону квадрата. Называем Bar, но не обязательно.

Шаг 7.
Небольшой ньюанс
Рамка должна быть вокруг прямоугольника, и ни в коем случае не налазить на него. Шанс этого очень мал, потому что мы создали рамку первой и не двигали ее, однако всякое может быть, так что лучше проверить сейчас, чем потом мучатся с ней. Если рамка и прямоугольник не совпадают, опять берем Selection Tool и двигаем стрелками на клавиатуре рамку.

Шаг 8.
И вот последние шаги. Заходим в настройки нашего бара и задаем ему в instance name - load_bar

Шаг 9.
Создание процентного поля
Это один из простейших шагов, просто выбираем Text Tool и созадем небольшое текстовое поле под прелоадером. В Настройках измените Text Type на Dynamic и задайте instance name - load_text. Шрифт и размер можете поставить любой, я выбрал to _sans размером 12px черного цвета.

Шаг 10.
Завершение. Применение Actionscript
Переходим на слой Actions, на второй кадр и добавляем в разделе Actions следующий код:




Первая часть кода

if (_root.getBytesTotal() != _root.getBytesLoaded()){
gotoAndPlay(1);
}

проверяет, сколько байт загружено у пользователя и сравнивает с тем, сколько есть на самом деле. Если Значения не равны (!=), то возвращаемся на первый кадр. Далее мы растягиваем прямоугольник на столько процентов, сколько загружено:

load_bar._xscale=(_root.getBytesLoaded()/_root.getBytesTotal())*100;

и задаем текстовому полю процентное значение + "%":

load_text.text=Math.round((_root.getBytesLoaded()/_root.getBytesTotal())*100)+"%";

Все наш показатель готов! Теперь содержимое можно разместить в 3 кадре.
ПРИМЕР:
В 3 кадр вставьте рисунок большого размера(File > Import > Import to Stage и выбираем картинку)
Теперь жмем Ctrl+Enter и имитируем загрузку, идя View > Simulate Download, или нажимаем Ctrl+Enter дважды и наслаждаемся тем, как идет загрузка
Спасибо за просмотр!
Продолжение следует...