Создание флеш баннера

30.01.2009

как делать флеш баннер - флеш анимация

 

Как делать флеш баннер

Попробую рассказать как я делаю монтаж  флеш анимации для создания интересных баннеров. Технология простая, без использования всяких вспомогательных программ и скриптов, новичкам может показаться сложно, т.к. во время разработки надо учесть много разных факторов. Например, вес файла не должен превышать 50кб, в некоторых случаях, на сайтах где размещается реклама, требования к флеш баннерам очень жесткие, максимальный вес не должен превышать 30 кб. Если баннер состоит из голого текста, то такой баннер будет весить очень мало, но если это слайдшоу из нескольких фотографий то лимит в 30 кб достигается примерно в 3-4 фотки. Можно поиграть качеством фотографий, если кадры меняются быстро, то артефакты от низкого качества почти не заметны. Другая проблема может быть в том, что многие компьютеры до сих пор еще не обновили свои флешплееры (пример: админ заблокировал доступ к реестру всего офиса, в итоге никто не может обновить). Если флешплеер броузера не обновлен, во флеше уже не сработают маски, и придется выкручиваться либо прозрачным гифом либо сломать цельность картинки и превратить ее в заливку. После обрезать ненужную часть элементов объекта. Если честно, я сам еще не понимаю названия большинства функций, но в силу моей развитой интуиции я все изучил методом "научного тыка". У меня до сих пор стоят все программы на английском, большинство функций даже не знаю как переводятся на русский, но знаю для чего они нужны 

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

Создаю новый проект размеров 240 на 400 (стандарт бокового баннера фотору). Рисую два фона на котором будет вся анимация. Ничего сложного, простой градиент со всякими каракулями по форме напоминающими горы и травку.

фон для флеш баннера - день фон для flash баннера - ночь

Ну вот когда есть фон, я размещаю его в два разных слоя "день" должен находится выше "ночи" чтобы потом можно было сделать переход день-ночь.

Создаю объекты для анимации. Это три вида телескопов

виды телескопов для баннера

И разнообразные текст "подарки и скидки", "при покупке", логотип "sky-watcher" ну и конечно "солнышко"

объекты для флеш баннера

Это сцена для передачи идеи акции. "При покупке скайвотчер скидки и подарки" каждый элемент должен находится в отдельном слое.

Процесс анимации объекта во флеше очень прост. Вы рисуете или вставляете картинку, выделяете,  нажимаете f8 и в появившемся окне (конвертировать в символ) выбираете три варианта (создать мувклип, кнопку или графику). В данной сцене я создавал графику, т.к. у меня простая анимация из объектов.

Итак пример простого перемещения объекта из точки А в точку В. Создаю объект, в монтажной линейке, выделяю и кликнув правой кнопкой мышки задаю параметр анимации между точками (motion tween). В первой точке стартовая позиция объекта в другой точке финишная позиция объекта,

пример создания анимации во флеш

 

Эффект появления надписи "скидки и подарки" я сделал маской. Делается это примерно так, для неподвижного объекта создается слой с параметром "MASK". В этот слой добавляем другой объект, относительно границ этого объекта будет виден  нижний объект. У меня это увеличивающийся шарик.

пример использования маски во флеше

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

Переход день-ночь я сделал просто. В один слой поставил день, в другой нижний слой ночь. В том месте где мне нужно сделать переход, я просто объект день сделал анимацию, в начальном кадре в свойствах задал 100% видимость, а в конечном кадре 0% видимость, что дало постепенной проявление нижнего объекта.

как сменить эффект смены кадров во флеше

мульитк инопланетянин во флеше

Инопланетянин состоит из простых объектов, голова, тело, руки, ноги. Руки симметрично дублированы. Как раз для рук я создал объект не графику а мувклип,это дает возможность циклической анимации внутри объекта, даже когда объект не двигается. примерно внутренняя анимация объекта выглядит так:

создание анимации инопланетянина во флеше

анимация руки состоит из двух объектов, обязательно нужно установить ось вращения объекта, чтобы руки сгибались как надо. Вот соединив все объекты вместе я выделяю их, нажимаю f8 и задаю параметр объекта (мувклип) чтобы в объекте была анимация рук когда этот лунатик будет прыгать по горам.

Анимация прыжков этого лунатика выполнена при помощи вспомогательного слоя с направляющей. В англ. версии флеша параметр слоя называется "Add motion guide. Создав этот слой для лунатика я опять создал две точки в монтажной линейке для перемещения лунатика, и добавил путь по которой лунатик будет перемещаться.

путь для анимации объекта во флеше

 

ну вот наконец что получилось:

 

Вот такой не хитрый способ создать анимацию. Конечно для разных идей разные способы. Я постараюсь в след раз рассказать о другом способе. Если есть пожелания напишите мне к какой их моих работ мне написать детали процесса. Я постараюсь рассказать.

автор: Шумейко Роман



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

Добавить комментарий


Защитный код
Обновить