Скрипты

job-portal-v3-5-сервис-по-поиску-работы Портал вакансий разработан для создания интерактивной вакансии для кандидатов. Это веб-приложение задумано в его текущей форме как динамический сайт,...
lcrm-saas-v1-0-5-сервис-saas LCRM SAAS-это программное обеспечение CRM, которое вы можете запускать на своем собственном сервере и предлагать его в качестве продукта SAAS бесплатно...
smartend-v4-1-панель-администратора-laravel-с-интерфейсом-и-restful-api SmartEnd-это отличительная админ панель (панель управления) со всеми опциями, которые вам могут понадобиться для создания любых типов веб-сайтов на...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Создание прелоадера

end_resu

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

Итак приступим, для начала разберёмся как это всё работает. Принцип работы прелоадера прост, с помощью ActionScript  проверяется информация какой размер клипа и сколько уже загружено к пользователю если меньше чем всего значит загрузка ещё не завершена, а если равно можно начинать просмотр. К тому же мы добавим графический индикатор который покажет сколько процентов уже загружено.
Шаг-1
Создаём новый клип со стандартными настройками

stage_se

Шаг-2
Создаём новый слой  и назовём его Actions,  а который уже был в Contents. Графика у нас будет на первом слое а код на втором и это поможет не запутаться.
Нажимаем правой кнопкой  мыши линии слоя Actions и из выпадающего меню выбираем Insert Keyframe, а на слое Contents выбераем Insert Frame, тем самым у нас на нижнем слое второй кадр не будет отличается от первого, а на слое Actions второй кадр не зависит от первого.

timeline

Шаг-3 создаём индикатор
Так как графика у нас будет находиться на слое Contents выделяем его и с помощью инструмента Rectangle Tool рисуем в центре сцены прямоугольник как показано на рисунке.
rectanglbar00000

Шаг-4
Теперь надо перевести прямоугольник в мувиклип, чтобы мы могли воздействовать на него через ActionScipt, но сначала разделим заливку и рамку используя Selection Tool и выделяем только рамку
selectiooutline_

Шаг-5
Преобразуем рамку в мувиклип, нажимаем F8 и в открывшимся окне выбираем Movie clip называем наш символ допустим Outline.

convert_

Шаг-6
Выделяем заливку прямоугольника с помощью Selection Tool, жмем F8 проделывая  тоже что и с рамкой но здесь нам надо определить положение с которого будет начинать расти прямоугольник. Для этого левую сторону квадрата выбираем в окошке Conver to Symbol, как на рисунке ниже.

bar_conv

Шаг-7
Для того чтобы дать понять ActionScript с каким именно обектом ему работать выделим неаш прямоугольник и откроем панель Properties и задаем ему instance name - bar_mc.

outline0

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

properti

Шаг-9
Добавление ActionScript

На слое Actions идём на второй кадр и вставляем в окно  панели Actions следующий код

1
2
3
4
5
6
7
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)+"%";
 

Давайте немного поподробней разберём этот код

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

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

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

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

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

 

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

 

Normal 0 false false false RU X-NONE X-NONE

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

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



  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...