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

Для начала сразу скажу, что код там простой и примерно одинаковый. Суть только в том, как мы прелоадер изображаем. Вообще, существует много типов прелоадеров на флеш, но в их основе почти тот же код, что и в основе этих двух простых типов. По своей сути, прелоадер, или индикатор загрузки - это какая-то анимация, дающая понять пользователю, что с флешкой не косяк, просто надо подождать пока она загрузится. Ну знаете, полоса обратного отсчета на flash. Поэтому, простейшим прелоадером является просто надпись «Загрузка» или там «Loading…» или «Please, stand by», вариантов много, и циферки процентов загрузки рядом.

Приступим.

Полоса загрузки, прямой прелоадер.

Сам прелоадер будет выглядеть, как двигающаяся по мере загрузки ролика, полоска.

Примерно так:

Рисуем прямоугольник без обводки. Какого хотите цвета. Ну или какого вам нужно. И упаковываете его в Клип (Movie Clip). Помещаете на сцену. Прописываете ему Имя (Instance Name) в панели Свойств. Пусть будет poloska.

В слое выше, делаете второй кадр ключевым и в кадре, в панели Действия (Actions) пишете следующее:

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

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

То есть типа так:

Да, кстати. Мы же можем сюда добавить проценты загрузки. Тогда нам надо добавить под полоской еще один слой, в котором сделать динамическое текстовое поле и дать ему Имя txt, к примеру. Ну и в скрипт добавим еще одну строчку:

Круговой прелоадер.

Здесь конечно же немного сложнее. Здесь процент загрузки показывается по мере заполнения полосы, завернутой в кружок. А значит нам надо сделать анимацию заполнения. Создаем новый Клип (Movie Clip), даем ему Имя, допустим, krug и в нем рисуем кружок. Разрезаем его напополам. Упаковываем еще в один клип.

Делаем tween-анимацию поворота половинки вокруг центра круга. Кадров на 50. Чтобы поворот осуществлялся вокруг центра, установите точку трансформации на центр круга. И я рекомендую сделать две анимации: из первого кадра в положении 1 в 25 кадр до положения 2 и 50 кадр до положения 3. Вот эти положения:

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

Внимание! В первом кадре прописываем

Над кружками делаем круговую полоску. Рекомендую сделать ее так: нарисовать круг одного цвета, меньшим диаметром чем наши основные кружки. В нем нарисовать еще один круг еще меньшего диаметра и другого цвета. Оба они должны быть в одном слое. Потом выделяем внутренний, меньший круг и удаляем его, жмем delete. Круговую полоску делаем маской для основных кружков.

В каком-нибудь слое над кружками положим динамическое текстовое поле. И зададим ему переменную text. Переменная – не Имя. В Свойствах есть другое поле специально для ввода такого названия. Пусть и проценты отсчитываются.

Выходим на главную сцену и в слое выше, в первом кадре пишем код:

Думаю, понятно, что верхние строчки дают понять, сколько кб в ролике всего и сколько загружено. Затем определяются проценты загрузки и соответственно дается команда текстовому полю показывать эти самые проценты. Кстати, в поле следует что-то напечатать, к примеру 99% тем шрифтом, который вы хотите использовать. Учтите, что если будете использовать нестандартный шрифт, то его символы нужно добавить в ролик через меню Внедрить (Embed).

Во втором кадре пишем

а начиная с третьего, уже располагаем основное действие флешки.
Выходит вот так:

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

Скачать исходнички.

В принципе, под эту базу можно подвести все что угодно. Даже такие оригинальные решения, как у промо сайта Хонды. Уже баян, конечно, но от этого не становится менее интересно просмотреть.

Также, несложный, но оригинальный прелоадер можно найти в блоге флешера Михаила Иванчука. Там же есть и урок.

Если вам данная публикация показалась полезной, рекомендую Подписаться на RSS.

Все вопросы в комментарии, пож-та.