Как сделать прелоадер на флеш
Итак, сегодня я разберу процесс, как сделать простой флеш прелоадер, прямой, т.е. полоса загрузки и круглый, его еще называют прелоадер в виде круговой диаграммы.
Для начала сразу скажу, что код там простой и примерно одинаковый. Суть только в том, как мы прелоадер изображаем. Вообще, существует много типов прелоадеров на флеш, но в их основе почти тот же код, что и в основе этих двух простых типов. По своей сути, прелоадер, или индикатор загрузки - это какая-то анимация, дающая понять пользователю, что с флешкой не косяк, просто надо подождать пока она загрузится. Поэтому, простейшим прелоадером является просто надпись «Загрузка» или там «Loading…» или «Please, stand by», вариантов много, и циферки процентов загрузки рядом.
Приступим.
Полоса загрузки, прямой прелоадер.
Сам прелоадер будет выглядеть, как двигающаяся по мере загрузки ролика, полоска.
Примерно так:
Рисуем прямоугольник без обводки. Какого хотите цвета. Ну или какого вам нужно. И упаковываете его в Клип (Movie Clip). Помещаете на сцену. Прописываете ему Имя (Instance Name) в панели Свойств. Пусть будет poloska.
В слое выше, делаете второй кадр ключевым и в кадре, в панели Действия (Actions) пишете следующее:
gotoAndPlay(1);
}
poloska._xscale=(_root.getBytesLoaded()/_root.getBytesTotal())*100;
Таким образом, мы можем не создавать никакой анимации с полоской, ее нужно просто сделать той максимальной длины, на которую она будет тянуться, т.к. скрипт сам будет ее тянуть по мере загрузки.
Итак, в первом кадре у нас сама полоска, во втором кадре уже должен быть пустой ключевой кадр с кодом, ну а с третьего кадра запускается основное действие ролика. Не забудьте в конце этого действия сделать ключевой кадр со скриптом
То есть типа так:
Да, кстати. Мы же можем сюда добавить проценты загрузки. Тогда нам надо добавить под полоской еще один слой, в котором сделать динамическое текстовое поле и дать ему Имя txt, к примеру. Ну и в скрипт добавим еще одну строчку:
Круговой прелоадер.
Здесь конечно же немного сложнее. Здесь процент загрузки показывается по мере заполнения полосы, завернутой в кружок. А значит нам надо сделать анимацию заполнения. Создаем новый Клип (Movie Clip), даем ему Имя, допустим, krug и в нем рисуем кружок. Разрезаем его напополам. Упаковываем еще в один клип.
Делаем tween-анимацию поворота половинки вокруг центра круга. Кадров на 50. Чтобы поворот осуществлялся вокруг центра, установите точку трансформации на центр круга. И я рекомендую сделать две анимации: из первого кадра в положении 1 в 25 кадр до положения 2 и 50 кадр до положения 3. Вот эти положения:
Слоем выше кладем наш Клип с этой половинкой еще раз, но уже зеркально отраженный. И поворачиваем его снова, получится полный круг.
Внимание! В первом кадре прописываем
Над кружками делаем круговую полоску. Рекомендую сделать ее так: нарисовать круг одного цвета, меньшим диаметром чем наши основные кружки. В нем нарисовать еще один круг еще меньшего диаметра и другого цвета. Оба они должны быть в одном слое. Потом выделяем внутренний, меньший круг и удаляем его, жмем delete. Круговую полоску делаем маской для основных кружков.
В каком-нибудь слое над кружками положим динамическое текстовое поле. И зададим ему переменную text. Переменная – не Имя. В Свойствах есть другое поле специально для ввода такого названия. Пусть и проценты отсчитываются.
Выходим на главную сцену и в слое выше, в первом кадре пишем код:
zagruzheno = _root.getBytesLoaded();
procent = int(zagruzheno / vsego * 100);
krug.text = procent + "%";
krug.gotoAndStop(procent);
if (zagruzheno == vsego)
{
gotoAndPlay(3);
}
Думаю, понятно, что верхние строчки дают понять, сколько кб в ролике всего и сколько загружено. Затем определяются проценты загрузки и соответственно дается команда текстовому полю показывать эти самые проценты. Кстати, в поле следует что-то напечатать, к примеру 99% тем шрифтом, который вы хотите использовать. Учтите, что если будете использовать нестандартный шрифт, то его символы нужно добавить в ролик через меню Внедрить (Embed).
Во втором кадре пишем
а начиная с третьего, уже располагаем основное действие флешки.
Выходит вот так:
Вообще, удобно всю анимацию сложить в один главный клип и просто поместить его одного в третий кадр на главное сцене.
В принципе, под эту базу можно подвести все что угодно. Даже такие оригинальные решения, как у . Уже баян, конечно, но от этого не становится менее интересно просмотреть.
Также, несложный, но оригинальный прелоадер можно найти в блоге флешера Михаила Иванчука. Там же есть и урок.
Если вам данная публикация показалась полезной, рекомендую .
Все вопросы в комментарии, пож-та.
Боже мой, я уже и забыл как это, 21 век уже, пора бы забыть про кадровые циклы.
var _preloaderInterval:Number;
stop();
_preloaderInterval = setInterval(this,”getProgress”,200);
function getProgress():Void{
var total:Number = this.getBytesTotal();
var loaded:Number = this.getBytesLoaded();
var percent:Number = 100 * Math.round(loaded/total);
this.preloader_mc.preloaderLine_mc._xscale = percent;
if (percent == 100){
clearInterval(_preloaderInterval);
gotoAndPlay(2);
}
}
Все варианты имеют право на существование, поскольку работают. Прагматичней стоит смотреть на вещи, я так считаю.
Спасибо за комментарий.
[...] Как делать прелоадер во флэшках? (одна из тех самых необходимых мелочей в [...]
Спасибо! Давно искал.. Всегда делал без него… но смотрю у всех почти есть – буду и я флешки с ним делать…
Еще раз спасибо!