Делаем прелоадер

Создание прелоадера с полосой загрузки Итак, сегодня мы научимся делать прелоадер – один из важнейших компонентов любого Flash-ролика. Сначала пару слов о том, что такое прелоадер и для чего он нужен. Прелоадер предназначен для того, чтобы показывать пользователю, сколько времени/килобайтов/процентов осталось до полной загрузки ролика. Располагается он всегда до основного содержания ролика и выглядит в виде изменяющихся процентов, точных данных о загрузке, меняющейся анимации или полосы загрузки. Мы с вами попытаемся сделать прелоадер с полосой загрузки, над которой будет отображаться в процентах количество информации, загруженной пользователем.
Начнём:
1. Откройте Flash и создайте новый документ с совершенно любыми параметрами. На главной сцене создайте 2 пустых кадра. В 1-м у нас будет располагаться сам прелоадер, во 2-м – то, что он будет грузить. Импортируйте во 2-ой кадр какую-нибудь картинку, чтобы было, что загружать.

2. Сначала пишем сам код простейшего прелоадера, потом будем в него встраивать всякие дополнительные возможности.Следующий код нужно разместить в 1-м кадре (этот кадр пустой, картинка только во 2-м):
stop();//Ролик нужно остановить на прелоадере, чтобы он не проигрывался до полной загрузки
_root.onEnterFrame=function(){
btotal=_root.getBytesTotal();//сколько всего байт в ролике
bloaded=_root.getBytesLoaded();//сколько уже загружено
if(bloaded==btotal){//Если ролик загрузился полностью
gotoAndStop(2);//Действие, которое нужно выполнить при загрузке
}
}

3. Теперь займёмся непосредственно полосой загрузки.

Нарисуйте прямоугольник в любом месте на главной сцене в первом кадре (для этого лучше создать новый слой «Line»). Выделите его и выберите Правая кнопка – Convert to Symbol (Преобразовать в Символ). В открывшемся окне выберите Movie Clip (Ролик). В новом символе создайте 3 слоя. На 1 слое (самом нижнем) располагается ваш прямоугольник. Остальные - пустые. Во 2-м кадре нарисуйте другой прямоугольник больше первого по высоте и расположите его как показано на скриншоте.

Преобразуйте его в мувиклип, в его instance name (имя копии) введите line и зайдите в него. Выделите 1-й кадр в мувиклипе line и измените Tween (Пара) на Shape (Форма) (находится на панели Properties (Свойства)). Теперь выделите 100-й кадр и создайте в нём ключевой кадр. Теперь в этом кадре измените форму прямоугольника, как показано на скриншоте.
В 1-й и 100-й кадры вставьте stop();
Вернитесь в родительский мувиклип с 3-мя слоями. Выделите кадр в нижнем слое и выберите Правая кнопка – Copy (Копировать). Затем выделите кадр на самом верхнем слое и выполните Правая кнопка – Paste (Вставить), затем сделайте этот слой маской (выделите слой и выберите Правая кнопка – Mask (Маска)). Под маской должен быть только средний слой.

4. Теперь нужно связать полосу загрузки и прелоадер. Вернитесь на главную сцену и выделите прямоугольник. В instance name (имя копии) введите preloader. Теперь будем дополнять код, который у нас находится в 1-м кадре главной временной шкалы. Вставьте туда следующие строки:
percentage=Math.floor(bloaded/btotal*100);//рассчитываем сколько процентов загрузилось
_root.preloader.line.gotoAndStop(percentage);//положение линии загрузки
Эти строки кода расположите перед условием
if(bloaded==btotal){

5. Нажимаем ctrl + Enter и проверяем с помощью симулирования загрузки работу прелоадера. Осталось только добавить проценты и прелоадер будет готов. Для этого создайте динамическое поле и расположите его на главной сцене. В поле Var (переменная) введите имя переменной – percentage. Теперь прелоадер создан. Жмём ctrl + Enter и любуемся…