Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Создание процентного показателя загрузки


alt

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

Шаг 1

Наличие показателя закрузки (прелоадера) сегодня является просто необходимым для клипов, объемом от 200 килобайт. Прелоадер предотвращает начало проигрывания клипа до того, как он полностью загрузится, иначе клип может некоректно отображаться у пользователя. В этом уроке вы научитесь создавать показатель закрузки, для начала самый простой в плане графики, но все они делаются по одному принципу, поэтому стиль загрузчика в ваших проектах будет зависить только от вас. Для изучения этого урока, вам совсем не нужны какие-то глубокие познания в ActionScript, урок достаточно простой, и понять его может даже человек, изучающий флеш всего второй день.

alt

Как это работает?

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

Шаг 2

Начнем с того, что создадим новый клип со стандартными размерами сцены и частотой смены кадров.

Создание процентного показателя загрузки

Шаг 3

Настроим Timeline

Создадим новый слой на timeline'e, переименуем его в Actions, а слой, который уже был - в Contents. Это поможет нам не запутаться: графика у нас будет на первом слое, а код на втором. Также это является хорошим тоном среди флешеров, ведь если кто-то кроме вас будет изучать исходник, ему тоже будет значительно легче понять, где что.

Правый клик мыши на линии со слоем Actions и выбираем Insert Keyframe, или просто F6. Теперь правый клик на Contents и выбираем Insert Frame (F5). У нас получается, что на нижнем слое второй кадр ничем не будет отличаться от первого, т.е. все изменения на первом повлекут за собой изменения на втором, а на верхнем второй кадр никак не зависит от первого. Вообще советую не злоупотреблять Keyframe там, где можно обойтись обычными Frame, ведь чем больше ключевых кадров, тем больше вес мувика.

Создание процентного показателя загрузки

Шаг 4

Создание индикатора

Поскольку графика у нас на слое Contents, то и графический индикатор загрузки мы будем рисовать на этом слое. Один раз кликаем на нем, и выбираем Rectangle Tool. С помощью этого инструмента рисуем по центру сцены прямоугольник, как на рисунке ниже.

alt

alt

Шаг 5

Теперь нам необходимо перевести наш прямоугольник в мувиклип, чтобы выполнять с ним действия через ActionScipt. Нам нужно разделить заливку рамку вокруг нее. Для этого используем Selection Tool и выделяем ТОЛЬКО РАМКУ вокруг бара.

alt

alt

Шаг 6

Теперь преобразуем рамку в мувиклип. Жмем F8 на клавиатуре, в появившемся окошке выбираем Movie clip и называем наш символ как вам нравится, мне, например, нравится Outline :)

Создание процентного показателя загрузки

Шаг 7

Теперь выделяем сам прямоугольник с помощью того же Selection Tool, жмем F8 и видим уже знакомое нам окошко. Нам нужно изменить Registration Point, т.е. положение, из которого начинает "рости" наш прямоугольник. Для этого выбираем левую сторону квадрата в окошке Conver to Symbol, как на рисунке ниже. Также выбираем Movie clip, называем Bar.

Создание процентного показателя загрузки

Шаг 8

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

alt

Шаг 9

Теперь последний, завершающий шаг: выделяем наш прямоугольник и открываем панель Properties и задаем ему instance name - bar_mc. Это нам необходимо для того, чтобы ActionScript понял, с каким именно ему объектом делать команды, которые мы сейчас ему зададим.

Создание процентного показателя загрузки

Шаг 10

Создание поля с %

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

alt

alt

alt

Шаг 11

Добавление ActionScript

Переходим на первый слой Actions. Идем на ВТОРОЙ кадр и добавляем на панель Action следующий код:
if (_root.getBytesTotal() != _root.getBytesLoaded()){
gotoAndPlay(1); 
}
bar_mc._xscale=(_root.getBytesLoaded()/_root.getBytesTotal())*100; 
loader_txt.text=Math.round((_root.getBytesLoaded()/_root.getBytesTotal())*100)+"%";
Первая часть кода

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

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

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

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

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

Все, наш прелоадер готов, теперь все содержимое мы можем размещать с третьего кадра. Для примера разместим на третьем кадре картинку большого веса и проверим работу загрузчика (File > Import > Import to Stage и выбираем картинку). Теперь жмем Ctrl+Enter и имитируем загрузку, идя View > Simulate Download, или нажимаем Ctrl+Enter дважды.

alt


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.