Делаем простейший анимированный баннер

Сэкономил - считай, заработал! Почему бы бизнесменам и обычным пользователям не научиться делать флэш-баннеры самостоятельно? Это не так трудно, и нервы нормальным флэшерам сэкономите:). Почему я так говорю? Хорошо, если попадается заказчик, который дает аниматору полную свободу действий. Гораздо чаще пытаются вмешаться в процесс - постоянно нужно что-то поменять и т.п. В общем, что мне вам рассказывать? Причем баннеров нужно всегда много, это и акции, и какие-то тонкие нюансы. Именно теме создания мы и посвятим данный материал, объясним более-менее простыми словами, как делается баннер.

Почему Flash?

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

Анимированный GIF - это последовательность воспроизводимых картинок (статических изображений). При этом есть ограничения по количеству цветов в используемой гамме - до 256, а также в количестве кадров. Чем больше кадров, тем "весомее" баннер, хотя существуют специальные технологии оптимизации, в том числе и расчета-сжатия промежуточных изображений.

Что такое Flash? Если я вам скажу, что это векторная графика во всех ее проявлениях, то наверняка поставлю многих начинающих в тупик. Дело в том, что элементы флэш-анимации (кроме используемых импортированных изображений) сохраняются как совокупность кривых, то есть все представляется в виде некой математической модели. Причем сам подход к созданию баннеров/мультипликации взят из профессиональной сферы. Математическая модель имеет ряд преимуществ, то есть, она не занимает много памяти, по сравнению с вариантом, когда каждый кадр хранится в виде отдельной картинки. Во-вторых, появляется гораздо больше анимационных возможностей, плюс вы можете быстро переводить изготовленный баннер из одного формата/размера в другой без существенных искажений и потерь в качестве.

Единственный недостаток использования Flash'a заключается в том, что такого рода анимация должна воспроизводиться с помощью специального плеера - Flash Player или плагин для браузера. Конечно, далеко не каждый местный пользователь такой плагин себе скачивает и устанавливает, хотя большинство серьезных ресурсов напропалую используют флэш. Он более красочен, анимационен.

Вы решили вступить в рекламную гонку...

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

• конкретных площадок, то есть выдается список ресурсов (сайтов), и вы сами указываете, где именно хотите рекламироваться;
• времени показов. Например, вас интересует только вечер с 20.00 до 22.00, при этом вы указываете конкретные дни (например, только будни).

Деньги обычно берутся или за количество показов, или за количество кликов (нажатий) на баннеры. Часто возникает вопрос о том, что лучше? В принципе, тут можно провести явную параллель с тарифами для мобильных телефонов. Они разные, но, по существу, вы платите практически одни и те же деньги.

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

Когда вы определились с размещением, начинайте читать технические характеристики, предъявляемые к баннерам. Главным образом, это размеры, а на втором месте именно для Flash'а указывается "вес", то есть, например, баннер такого-то размера должен быть не больше 30 Кб.

Составляем проект баннера

Для того чтобы работа спорилась, необходимо поступать как профессионалы-аниматоры. Изначально они делают раскадровку - от руки на листе бумаги рисуют ключевые кадры, если простыми словами: "Что это должно быть?".

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

Запускаем Adobe Flash

Запускаем нашу программу. Из предложенного списка выбираем Create New -> Flash Site (ActionScript 2.0). Программировать мы практически не будем, нам только в последний момент нужно набрать (скопировать) несколько строк кода, которые потом будут использоваться при опубликовании. Другими словами, поместим ссылку, на которую этот баннер будет осуществлять переход.

Теперь рассматриваем интерфейс Flash'а. Слева находится меню инструментов (примерно такое же, как и в Photoshop). Сверху находится панель анимации Timeline. Снизу - окно с закладками Properties ("Свойства"), Parameters ("Параметры"), Actions ("Программный код"). По существу, нам понадобится только Properties. Справа еще дополнительное меню, но оно нам пока не нужно.

В окне Properties указываем размеры баннера, например, стандартный 468х60. В этом же окне указываем цвет фона, у нас темное небо, поэтому выбираем или черный, или темно-синий. Частота смены кадров по умолчанию составляет 12 fps (кадров в секунду), оставляем. Теперь для удобства увеличиваем масштаб просмотра до 200%.

Составляем небольшое техническое задание

Графика во флэше делается по слоям (в окне Timeline по умолчанию у нас уже есть один такой, называется Layer 1), причем следующий слой будет накладываться на предыдущий, но они независимы друг от друга. Специфика точно такая же, как и в Photoshop.

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

Итак:

• Layer 1: Синий фон со звездами
• Layer 2: Надпись "С Рождеством и Новым годом!".

Теперь нам нужно рассчитать хронометраж. Сначала появляется надпись. На это потратится 1 секунда (при 12 fps это 12 кадров), надпись скачет и искажается - примерно 9 секунд (108 кадров), и в конце уходит - 1 секунда (12 кадров). Вся сцена длится 11 секунд (132 кадра). Обратите внимание на то, что баннер воспроизводится циклично, поэтому нужно учитывать фрагменты начала/завершения.

Все. Приступаем к реализации слоев.

Layer 1

Фон мы уже выбрали. Нужно расставить звезды. Для этого воспользуемся инструментом "Кисточка" (Brush Tool). Нажав на него, подбираем размер, образ и цвет (светло-желтый).

Делаем точки.

Layer 2

Чтобы создать новый слой, можно воспользоваться главным меню Insert > Timeline > Layer либо просто поднести курсор мыши в самом окне Timeline к первому слою, нажать правую кнопку. В контекстном меню выбрать пункт Insert Layer. Появился новый слой. Он активен. Что это значит? Это говорит о том, что на первом слое мы сейчас не работаем. Теперь нужен текст.

Надпись можно сделать с использованием инструмента "Text" либо нарисовать от руки.

Внимание! Очень часто встречаемая ошибка! Если вы используете "Text", то для последующего воспроизведения баннера он будет восприниматься как текстовый объект, то есть, плееру сообщаются координаты расположения, шрифт, размер, кодировка и т.п., после чего он это воспроизводит своими средствами. Если у пользователя на компьютере нет в наличии такого шрифта или даже стоит другая кодировка, то текст будет преобразован к его стандартам. Я думаю, многие видели, как на баннерах выводится вместо слов белиберда в другой кодировке - причина именно в этом.

Чтобы избежать этого, а также в случаях использования эксклюзивных шрифтов, сохраняйте текст как изображение на прозрачном фоне (это можно сделать в любом профессиональном графическом редакторе). Мы же нарисуем текст от руки, то есть указателем мыши, опять же, с использованием инструмента "Кисточка" (Brush Tool). Нажав на него, подбираем размер и образ. С фирменными шрифтами может получиться и красивее, но мы выберем мультяшный стиль. Рисовать удобнее не на баннере, а в свободном пространстве над ним в рамках рабочей области.

Нарисовали, раскрасили. Если не вложились в размеры - не беда, подправим. Теперь указателем мыши объединяем/выделяем всю надпись, после чего нажимаем F8. Что нам предлагается сделать в данном случае? Сохранить всю эту совокупность линий как один объект. Мы выбираем вариант Graphic. Теперь надпись воспринимается как единое целое, а объект выделяется синим прямоугольником.

Чтобы подогнать размеры, используйте вариант выделения Free Transform Tool (панель инструментов), в результате чего рамка станет активной. Вы можете вращать объект, уменьшать/увеличивать по вертикали или горизонтали, поднимать с одной из сторон (для чего поднесите курсор мыши к линии, а не к квадратику, в результате появится стрелка).

Все сделали, переносим объект на баннер.

Анимируем

Этот вопрос вызывает у новичков сложности, но мы объясним все просто. Работать будем с автоматической анимацией по ключевым кадрам (keyframes). Это еще повелось с Уолта Диснея. Профессиональные художники рисовали главные (ключевые) кадры, а обычные потом дорисовывали то, что должно происходить между ними. Работу "обычных художников" будет выполнять Flash.

Итак, мы поместили надпись на форму, рассчитали, что вся сцена будет длится 132 кадра, находимся на втором слое. Первым делом в Timeline ищем 132-й кадр, выделяем его, нажимаем правую кнопку мыши и в контекстном меню выбираем Insert Keyframe. Появилась длинная серая полоса - все нормально. Такую же операцию сделайте и с первым слоем, иначе звезды будут видны только в первом кадре.

Переходим обратно к Layer 2. За первые 12 кадров наша надпись должна прилететь. Поэтому выделяем 12-й кадр и таким же образом делаем его ключевым. Он обозначился точкой. Теперь переходим к первому кадру и ставим надпись поверх видимой области баннера. Осталось только одно действие. В пространстве между 1-м и 12-м кадром нажимаем правую кнопку мыши и в контекстом меню выбираем пункт Create Motion Tween. На серой полоске появляется изображение стрелки, а если вы переведете курсор на первый кадр и нажмете клавишу Enter, то воспроизведется анимация с прилетающей надписью. Все очень просто. Дальнейшие действия идентичны. Сделайте, чтобы надпись плясала, растягивалась и сжималась.

Ставим ссылку

После того, как баннер готов, нужно сделать ссылку. Как? Я опишу самый простой способ. Для этого нам понадобится еще один слой. В нем поверх всего баннера рисуем прямоугольник, выбрав соответствующий инструмент. Выделяем этот прямоугольник, нажимаем F8, но в данном случае обозначим объект не как Graphic, как мы делали раньше, а как Button (кнопка). Есть. Теперь заходим в окно свойств Properties для этой кнопки. В поле Instance Name вводим ее название, например, bt1. В этом же окне свойств есть окошко с выпадающим списком Color, в нем выбираем Alpha (прозрачность), ставим ее в 0%. В результате наша кнопка (прямоугольник) уже не видна. Теперь кликаем на первый кадр в Layer3 (окно Timeline), нажимаем F9. В результате появляется окно Actions, где вводим следующие строки:

bt1.onRelease=function() {
 getURL("http://www.kv.by", "_blank");
} 

Как вы можете заметить, ссылка в данном случае ведет на сайт "Компьютерных Вестей", вы можете поставить свою. После введения кода на первом кадре третьего слоя появился значок альфы (это значит, что там есть код).

Важно понимать: активные элементы в последнем слое перекрывают все, что находится под ними на нижнем. Если бы мы растянули кнопку только на половину баннера, то работала бы только эта половина.

В завершение

Экспортируете баннер в swf. Все. В данном материале рассказаны только основы. Вы можете экспериментировать с большим количеством слоев, создавать более сложные сцены и так далее. С праздниками!

Кристофер,
christopher@tut.by