Урок по созданию flash баннера. Как flash-баннер сделать ссылкой

Бесплатный редактор для создания флеш-баннеров без использования скриптов.

Говоря сегодня о создании флэш-анимации, в 90% случаев подразумевают программу Adobe Flash. На данном этапе развития — это самый мощный инструмент, позволяющий создавать практически все — от небольших баннеров, до сложнейших и красивых сайтов или игр.

Однако еще несколько лет назад лидером была программа Macromedia Flash (которую Adobe, кстати, выкупил вместе с компанией Macromedia и присоединил к себе). К чему я это все веду? А к тому, что сегодня мы рассмотрим бесплатную программу, которая поможет нам создавать несложную флэш-анимацию и при этом очень напоминает ранние версии уже упомянутой Macromedia Flash. Это программа LiveSwif lite.

Как Вы уже наверне догадались, приставка lite значит, что мы имеем дело с несколько урезанной версией более «продвинутой» программы. Так и есть — LiveSwif — это полноценная среда флэш-разработки, от которой lite-версия отличается отсутствием поддержки ActionScript.

То есть, сложных игр и сайтов в программе сотворить не получится, однако она прекрасно подойдет для создания анимированных баннеров или небольших презентационных роликов. LiveSwif lite — это единственная на сегодняшний день более или менее приличная альтернатива платному софту данной категории, поэтому предлагаю сравнить ее возможности с флагманом флэш-разработки Adobe Flash:

Сравнение LiveSwif lite с платным аналогом Adobe Flash

Помимо этого в LiveSwif lite отсутствует ряд привычных инструментов таких, как «Ластик», «Пипетка», «Лассо» и т.д. Отличается и управление программой. Так, например, сначала очень непривычно отсутствие контекстных меню для объектов кадра или раскрытие меню инструментов (чтобы открыть и выбрать альтернативный инструмент следует зажать левую клавишу мыши на нужной иконке и потянуть вправо). Но не будем забегать наперед…

Установка флеш-редактора LiveSwif lite

Для начала установим LiveSwif lite. Скачиваем архив с инсталляционным файлом и запускаем его. Теперь Вам остается только постоянно нажимать кнопку «Next» и через пару секунд установка завершится. Запустим программу:

Интерфейс редактора

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

Центральная часть окна LiveSwif lite разделена на три окна: окно инструментов, текущей сцены и файловых библиотек. Последние разделены на два подраздела — «Library», в котором отображаются объекты и спрайты текущего проекта, и «FileLib», где Вы найдете подборку готовых объектов (в основном кнопки).

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

С интерфейсом более или менее разобрались, а теперь давайте поработаем в среде LiveSwif lite. Предлагаю нарисовать баскетбольный мяч и его анимировать.

Создание объектов в LiveSwif lite

Для начала зайдем в меню «Edit» и выберем пункт «Movie Properties».

Здесь мы сможем настроить размер холста проекта, частоту кадров и цвет фона.

Жмем «Ok» и идем дальше. Каждая сцена в флэше формируется из большого количества объектов, на которые в свою очередь можно наложить любые изображения, которые называются спрайтами. Если мы хотим получить анимированный баскетбольный мяч, то начать следует именно с создания спрайта. Для этого нажмите на кнопку «New Scene (Sprite/Button)» и выберите пункт «New Sprite». Теперь можно начинать творить.

Поскольку мяч имеет форму круга, выберем соответствующий инструмент. Наведите мышь на инструмент «Прямоугольник» («Rectangle Tool»), зажмите левую клавишу и потяните мышь вправо. В открывшемся меню выбираем круг («Circle Tool»).

Нарисуем круг на рабочем поле. Теперь раскрасим его. По умолчанию инструмент «Заливка» отвечает за однотонное заполнение определенным цветом выбранной области («Flat fill»). Раскроем меню заливки и активируем инструмент «Радиальное заполнение» («Radial fill»).

Чтобы иметь возможность произвести заливку, следует сначала выделить редактируемый объект, а затем уже провести прямую инструментом «Радиальная заливка» (при этом точка начала прямой будет точкой блика).

Теперь возьмем инструмент «Увеличение» («ZoomIn») и приблизим наш мяч. Нарисуем на нем соответствующие полосы. Для этого выбираем инструмент «Свободное рисование» («Freehand tool» — Карандаш) и от руки нанесем нужный узор.

Обратите внимание на значение «Smooth» (по умолчанию — 30). Это коэффициент выравнивания рисуемой линии. То есть Вы можете нарисовать линию и не очень ровно, но она автоматически будет сглажена.

Работа с кадрами и объектами

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

Перетаскиваем из библиотеки наш спрайт на рабочую сцену и устанавливаем его в нужном месте. Мы получили первый кадр. Давайте сымитируем подскакивание нашего мяча. Для этого следует задать ему движение по ломанной кривой. Выделим мяч и в меню «Insert» активируем инструмент «Tranform motion».

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

Теперь, нажав на панели инструментов кнопку «Play», Вы сможете увидеть, как будет двигаться объект.

Трансформация объектов

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

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

Теперь следует выделить сначала нарисованную траекторию движения, а затем, зажав SHIFT, и сам объект. Осталось только зайти в меню «Insert» и выбрать уже упомянутый выше инструмент «Path motion».

Вставка изображений и музыки

Если Вы были внимательны, то заметили, что в меню «Insert» находятся еще несколько опций, которые позволяют украсить создаваемые проекты. Это вставка изображений и фоновой музыки. Таким образом — вот Вам еще один вариант использования LiveSwif lite — создание фотоальбомов или даже презентаций!

Советую также заглянуть в меню «File» и ознакомится с некоторыми приведенными примерами в разделе «Samples». Отсюда Вы сможете почерпнуть информацию о работе с текстом или, например, о создании кнопок.

Выводы

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

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.

Время выполнения:
новички: 1-3 дня
advanced: 3-4 часа
pro: 1-2 часа

Перечень используемых сокращений:
LMB - Left Mouse Button - "щелчок" левой кнопкой мыши
RMB - Right Mouse Button - "щелчок" правой кнопкой мыши
DC - Double Click - двойной "щелчок" левой кнопкой мыши
D&D - drag&drop - "перетащить и бросить"
MC - MovieClip
AS - Action Script

В этом уроке рассмотрено исполнение коммерческой работы - баннера - step-by-step. Урок кажется длинным, но в "реальном времени" такая работа занимает не так уж много времени - от часа до двух. Поскольку урок является фактически "стенограммой", есть в нем и обычные в такой работе "шаги назад", и поправки по ходу дела, - в общем, он несколько отличается от "гладкого выполнения задания". С другой стороны, некоторые движения, вроде конвертации шейпа в мувиклип/разгруппировки, выполнение "наплыва" MotionTween-ами, и т.п., в такой работе должны быть доведены до полного автоматизма. Что, кстати, в равной мере пригодится и в просто творческой работе - ведь хорошо бы решать творческие задачи, а не занимать голову мелкими вопросами вроде "где ж эта кнопка", верно?
Я надеюсь, что в полном описании-стенограмме этой, в сущности, очень небольшой и во многом рутинной работы новички найдут хотя бы несколько новых приемов и способов решить насущные проблемы, advanced-flasher-ы, владеющие техникой флэша на приличном уровне - несколько "экспресс-соображений" по композиции, планированию работы, умению видеть в начале работы ее дальнейшие возможные направления и работать "с чистого листа" в условиях ограниченного времени (а чего уж там - при работе на заказ оно почти всегда ограничено, и довольно жестко - хотя бы разумной оценкой собственных трудозатрат и их соотношения с реальной ценой работы), дизайнеры-pro... может быть, и им не будет скучно сделать что-то подобное на спор с самими собой за 1,5 часа. За 1 час. за 40 минут. Не теряя качества, коллеги, не теряя качества и не выбиваясь из 45 Кб.

Как и в предыдущем уроке, о необходимости периодически сохраняться я более упоминать не буду - Ctrl+S лучший друг любого компьютерщика, а дизайнера тем более. Так же я буду считать, что если я один раз подробно расписал, напр., как делается Motion Tween, то второй раз я могу этого не расписывать, а просто написать - "делаем M. Tween с такого-то по такой-то кейфрейм в таком-то слое" - в особенности если на эту тему в разделе есть отдельный(е) урок(и). Ибо, если я не могу так считать - то занятие наше останется пустою забавою...

Поехали.

Любой заказ начинается с получения исходных материалов. В данном случае требования заказчика следующие:

Я обычно сразу же копирую все тексты-ТЗ из письма в текстовый файл, который кладу в папку, заведенную для работы над конкретным заказом. В дальнейшем гораздо удобнее "копипейстить" тексты или просто сверяться с ТЗ. Туда же - и все картинки из аттачмента.

Для начала внимательно вчитаемся в материал и всмотримся в предлагаемые картинки.
На этот раз все в порядке, но бывает, что стоит задать заказчику дополнительные вопросы. В данном случае картинка, кроме логотипа, одна, и заказчик требует ее использовать - было б странно, если бы было иначе, ибо на ней, собственно, товар. Однако другие картинки - из клипарта или "рукодельные" - мы уже вряд ли сможем использовать: предельный размер - 45 Кб, а имеющуюся картинку явно придется использовать почти на всю ширину баннера, иначе товар просто "пропадет". И даже если удастся "ужать" картинку до 20-25 Кб, нужно еще в этот объем вложить всю остальную анимацию.

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

Поскольку вопросы обтравки не входят в основную тему, подробно я на этом останавливаться не буду.
Рисуем "пером" замкнутый path по линии, по которой нам нужно "обтравить" объект, Ctrl+LMB на пути в меню Path. Объект выделен.

Смягчим выделение...

И Ctrl+C, Ctrl+V (выделенное уже на новом слое), удаляем слой Background и обрезаем инструментом "Crop" в габариты нашего "навигатора".

В таком размере нам эта картинка не нужна - слишком большая. Сделаем ее меньше, прикинув отношение к ширине и высоте баннера. Пожалуй, могут пригодиться два размера (флаш отвратительно масштабирует картинки - обходом этого момента нам еще придется заняться): на 400 пикселов по ширине (не забыв сразу записать в psd-формат с соответствующим именем) и на 200. Для второго случая нам понадобится ее немного обработать фильтром "Unsharp Mask" для повышения четкости изображения.

Логотип никакой особенной обработки не требует. Только проверим "пипеткой", действительно ли его фон - равномерно-черный (возможно, нам понадобится подложить под него черную "плашку" - он должен сливаться по цвету в этом случае) и обрежем "под самые края". И записываем, опять-таки, в psd-формат.

Для работы в таком формате, стандартном для этого постоянного заказчика, есть у меня небольшой набор темплейтов на несколько стандартных размеров. В каждом из них определены уже нарисованы бэкграунд, "кнопка" (целиком прозрачная), рамка (border) - ее наличие в баннере зависит от ТЗ, ведь она может быть выведена и с помощью css в том HTML-layer-е/таблице, в которой будет стоять баннер на сайте, и "двойная" рамка будет грубой ошибкой, но в данном случае рамка нужна, - прелоадер и скрипт, управляющий кнопкой. Также в этом темплейте уже есть слой для Action Script (всегда удобнее и грамотнее создавать отдельный слой для AS - тогда ключевые кадры в нем можно создавать в любом месте анимации, да и удобнее выбирать кадры с AS - гарантированно не будет ничего случайно сдвинуто) и добавлено сотни три фреймов в основной сцене, а в конце прописан "stop()" в ключевом кадре.
Чтобы и у Вас был такой же, вкратце опишу последовательность действий по его созданию:
- заводим новый документ, задаем ему необходимые размеры и FPS (для определенности - напр., 25). Цвет фона - белый или в цвет того сайта, на котором будет стоять баннер. Фон мы все равно нарисуем новый. В качестве формата вывода выбираем AS2 / Flash Player 8
- переименовываем наш единственный слой в "as" - пригодится в дальнейшем. У меня он обычно - самый нижний.
- создаем новый слой, переименовываем в "back"
- создаем фон, т.е. - рисуем залитый прямоугольник и задаем ему в свойствах размеры 1:1 с баннером и координаты 0,0
- создаем еще один слой, переименовываем его в "border".
- создаем рамку любого цвета прямоугольник контуром толщиной 2 px, задаем ему размеры 1:1 с баннером и координаты 0,0. Координаты задаются по середине линии, поэтому "рамкой" у нас будет работать только 1 "внутренний" пиксел, а один - "срежется" при вставке страницу.
- и то, и другое превращаем в movie-clip (F8), называем получившиеся MC соответственно "back" и "border"
- создаем еще один слой - над слоями back и border, в нем создаем кнопку - т.е., напр., рисуем прозрачный прямоугольник в размер баннера, задаем координаты 0,0, F8 -> Button, имя кнопки - "btn" -> ок, и экземпляр этой кнопки тоже называем btn. Кнопке задаем alpha равным нулю в "properties".
- создаем копию сцены. Я сцены обычно сразу преименовываю во что-либо вроде "pre" (для прелоадера) и "s" (для основной сцены), но это совершенно необязательно.
- создаем в сцене, идущей первой, прелоадер. Я не буду описывать здесь процесс создания прелоадера, поскольку он описан в других уроках этого раздела. Скажу только, что увлекаться эффектами тут совершенно не стоит - баннер маленький, и прелоадер "промельнет" довольно быстро даже у дайл-ап-пользователей.
- добавим несколько фреймов во все слои основной сцены. У меня в темплейте порядка трехсот фреймов, но Вы можете поставить меньше, поскольку наш баннер будет покороче.
- последний фрейм на слое "as" превращаем в кей-фрейм (F6), открываем Actions-панель (F9) и пишем gotoAndPlay(1); (здесь и далее: короткие строчки кода, которые не имеет смысла оформлять в codebox, я буду выделять цветом и шрифтом) У меня в темплейте стоит stop(); , но этот баннер у нас будет зацикленным - т.е. "крутиться" по кругу до бесконечности.

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

В моем темплейте стоит розовый цвет рамки, который нам совершенно ни к чему. Впрочем, какого бы цвета рамку не нарисовали Вы, мы придумаем кое-что поинтереснее. Для этого "заберемся в" MC (у меня в темплейте символ рамки сделан "графикой", а не MC, и мне придется изменить и содержимое библиотеки, и оба экземпляра рамки - и в прелоадере, и в соновной сцене - но Вы сразу создавали MC, поэтому у Вас все должно быть замечательно), содержащий рамку - DC на символе в библиотеке.

Анимируем рамку. Для начала превратим ее из outline в fill:

Затем зададим нашей рамке градиент. Я, в соответствии со стилистикой самого рекламируемого товара, выбрал черно-белый вариант расцветки:

Добавим в слой 60 фреймов, зададим Shape Tween и превратим в кейфреймы (F6) на фреймах 15, 30, 45 и 60.

После этого конвертируем в кейфрейм фрейм 59 (F6) и удаляем фрейм 60 - чтобы фрейм 60 и фрейм 1, которые у нас одинаковы, не давали при проигрывании в цикле задержки движения нашего "блика".

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

Картинки сразу же оптимизируем, обращая внимание и на размер, и на качество изображения. Для баннера качество должно быть обычно "на пределе допустимого" - поскольку имеются довольно-таки жесткие ограничения по размеру.
Импортируем в Library, сразу создаем там подкаталог "img" и перекладываем символы с изображением в него.

Оптимизируем (DC на символе изображения в Library):

снимаем галочку "Use document default quality" и подбирем параметр "Quality" до тех пор, пока баланс между качеством и примерным результирующим размером нас не удовлетворит.
Галку Allow Smoothing снимем на логотипе (посокльку там нам нужны четкие контуры) и оставим на "навигаторе" - поскольку так чуть лучше будет смотерться результат масштабирования картинок Флэшем.

Картинки подготовлены, займемся фоном.
Для этого прейдем к редактированию MC "back" - DC на символе в Library

Выбираем (инструментом "стрелка" (V), конечно) прямоугольник-фон, и, если не открыт, открываем Color Mixer (Shift+F9). В Color Mixer создаем серый с черным градиент:

я заметил, что получившийся у меня градиент не идеален и дает неприятную "ступеньку" от серого к черному. (это неудивительно при "мелкодетальном" флэшевском интерфейсе):

поскольку в дальнейшем на этом месте предполагается разместить логотип (помните - он на черном фоне?), я поправил этот дефект, придвинув "флажок" черного цвета в Color Mixer-е почти вплотную к "флажку" белого и отрегулировав ими ширину черной полоски. Для смягчения перехода я оставил 1 пиксел переходного серого цвета между черным и белым:

Уменьшено: 94% от [ 830 на 317 ] - нажмите для просмотра полного изображения

и D&D символ с логотипом на него из Library:

Посмотрим еще раз на ТЗ, чтобы прикинуть в уме будущее расположение элементов.

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

Продумаем, как будет "появляться" и "исчезать" наш объект.
Картинка на нем несет некую динамику - трехмерная карта местности, явно "в движении". Используем это - создадим некоторое движение "в том же направлении", чтобы подчеркнуть эффект. Этого в простейшем варианте можно добиться "отъездом" объекта "от наблюдателя" - или, проще, Motion Tween-ом от масштаба, при котором объект больше рамок баннера. А чтобы объект не появлялся резко, "прыжком" при каждом цикле прокрутки баннера - мы выведем его "от зрителя" из нулевой непрозрачности. И размоем фильтром, чтобы плохой масштабирующий механизм Флэша и некторые тонкие эффекты антиальясинга, поганящие битмап при масштабировании, нам не мешали.
Три строки текста расположим справа под наименованием с правой выключкой. Третью строку, скорее всего, придется разбивать переносом строки, и с этим будет маленькая неприятность - ибо там и так "тесновато" - но мы что-нибудь наверняка придумаем, верно?
Ок. Вперед.

создаем слой для картинки:

И помещаем ее (D&D из Library) на этот слой, в первй фрейм:

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

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

Готово.
"Подтягиваем хвост" - зажав Ctrl, D&D последний фрейм слоя до того фрейма, до которого мы собираемся делать "выплывание" "Навигатора"

Прикидываем, сколько нам нужно секунд на "вплывание" объекта в баннер - можно, закрыв глаза, представить себе процесс, и отсчитать старым добрым способом: "двадцать один, двадцать два..." - при неспешном произнесении каждое число произносится приблизительно 1 секунду. На 5-6. Максимум.
Значит - около 60-70 фреймов. На том и порешим.

Делаем Motion Tween (RMB на слое с картинкой):

превращаем последний фрейм нашего MotionTweened-слоя в кейфрейм (F6) и в этом фрейме уменьшаем Нвигатор до нужного размера (инструмент "Free Transform" (Q), тащим за угловой хэндл при нажатой клавише Shift:

Переходим на первый фрейм этого Motion Tween-а. Дальше нам нужно будет не только задать прозрачность, но и применить фильтр. Фильтры применяются только к MC, а процедура "умоушнтвинивания" сделала нам из "Навигатора" - graphics. Исправляем положение:

В опциях фильтра задаем параметры:

и переходим к свойствам наложения коррекции цвета для обзекта - нам нужно изменить прозрачность (Alpha):

Выбираем Alpha в выпадающем списке и устанавливаем ее в 0% - движком или введя "0" и нажав Enter.

Проиграв анимацию прямо в окне, убеждаемся, что 60 фреймов - длинновато, медленно он все-таки "выбирается" - нужно, чтобы посетитель скорее на секунду-другую увидел объект его будущего желания. Сдвигаем кейфрейм конца MotionTween-а примерно на 40 - 45 кадр. дальше - мы ведь "подтянули "хвостик" - добавим фреймов за концом Motion Tween. Выберем несколько путсых фреймов за конечным фреймом нашего Motion Tween (включая этот кейфрейм) и - RMB -> Insert Frame. Дальше оттаскиваем получившийся "глубой хвост" (за последний его фрейм при "зажатом" Ctrl) до... давайте до 240 фрейма. Примерно так получается, если прочитать весь текст не торопясь.

Теперь поставим название нашего "навигатора". Для этого создадим новый слой, зададим ему имя, скопируем (переключившись по Alt+Tab, напр.) текст из блокнота в буфер обмена, выберем инструмент "текст", создадим новый текстовый блок, зададим ему параметры (выравнивание, шрифт, размер шрифта, вид блока - Static, цвет шрифта), и скопируем из буфера скопированный туда заранее текст. Последовательность действий понятна из скриншотов:

Цвет я выбрал не совсем черный - на жирных шрифтах разница в цвете не очень заметна, но "бьет по глазам" меньше и края рендерятся флэш-плагинами аккуратнее.
На последнем скриншоте я обвел красной рамочкой хэндлы, двигая которые удобно выравнивать отцентрованный текст - достаточно установить их по границам формата. Можно, конечно, вызвать панель "Align" (Ctrl+K), отметить в ней опцию "выравнивать по сцене" и выровнять блок по центру, но, двигая хэндлы - можно сразу более тонко настроить выравнивание в зависимости от особенностей шрифта и текста (округлые элементы в начале/конце строки или, напр., отдельные слова, набранные целиком прописными, требуют небольшого смещения от геометрического центра).

Сейчас мы сделаем эффект блика на названии, чтобы немного повеселее смотрелся этот черный "тяжелый" заголовок.
(рисование блика подробно описано в уроке "Рисуем блик" ((с) Olka))
Блик наш к тому же еще и будет появляться не просто периодически, а со случайным промежутком между "проблесками" - и делается это буквально за 1 минуту.
DC на экземпляре названия - и редактируем MC "name". Первым делом добавляем новый слой, после чего добавляем 100 новых фреймов в слой с названием:

И еще один слой.

В слой Layer 3 копируем содержимое Layer 1 - D&D первый фрейм из Layer 1 в первый фрейм Layer 3 при нажатом Alt (рядом с курсором появится "плюсик", пока "тащим"), и сразу же Layer 3 блокируем:

после этого где-то после 50-го фрейма (у меня - 55-й) делаем новый кейфрейм на Layer 2 и рисуем в нем прямоугольник. Прямоугольнику придаем "бликовый" градиент и правильно его (градиент) разворачиваем и масштабируем:

Создаем Motion Tween на "блике":

После этого сначала (!) переходим на первый фрейм этого Motion Tween (у меня - 55-й фрейм MC) и ставим блик чуть ниже (или выше, если хотим, чтобы блик сначала двигался сверху вниз) надписи. Потом переходим на последнй фрейм Motion Tween и создаем там кейфрейм (F6). Только после этого переходим на "серединку", там тоже - кейфрейм (F6) и двигаем наш "блик" так, чтобы он оказался на противоположной стороне. "протаскиваем" мышкой курсор на таймлайне, чтобы убедиться, что блик двигается, как надо.

Переходим на первый фрейм Layer 2, нажимаем F9 и вводим следующий AS-код:

Можно, конечно, воспользоваться методом random() объекта Math, тем более что просто random() - deprecated, т.е. не рекомендуемая к употреблению функция. Но, однако: применение Math.randoь() потребует, во-первых, умножения, во-вторых, округления (Math.round())... нам же не нужна ни особая аккуратность рандомизации, ни долговечность кода (баннер - вещь эфемерная, живет недолго). Вряд ли прямо в следующей версии флэш-плеера random() перестанет поддерживаться - поэтому я ставлю random() везде, где не требуется рандомизация с точностью до миллионных долей.

И, наконец, превращаем Layer 3 в маску:

Записываем наш баннер и - F12.
Если все Publish Settings выставлены правильно, т.е.:
- публиковать в "Flash, HTML"
- Access local files only
- версия плеера - Flash 8, AS1 или AS2,
- Compress Movie, Omit Trace Actions, Protect Import, Debugging permitted - отмечено (мы же не хотим, чтобы наш баннер "разбирал по костям всяк кому не лень - так пусть хоть помучается, прежде чем добраться до "содержимого" свф-ки)
- все доп. параметры - "Menu", "Paused at Start", "Loop", "Device fonts" - выключены (ни к чему на баннере выводить полное меню, в особенности зум там не к месту - самая частая ошибка даже на вполне солидных баннерах - неотключенное меню)

То мы увидим нечто вроде этого:

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

Создаем новый слой, блокируем все слои (самый верхний "замочек"), снимаем блокировку с нового слоя:

Выбираем инструмент Rectangle ®, цвет - поярче синий, обводка - none, и рисуем небольшой прямоугольничек:

Flash - весьма своеобразный векторный редактор. В данном случае весьма удобно воспользоваться его особенностью - возможностью редактирования Shape-ов прямо инструментом "Select" - и превратить т.о. прямоугольник в трапецию. Для этого надо "подтащить" верхние углы прямоугольничка к середине. Однако если вы промахнетесь и уголки "соединятьс" - придется давить "Ctrl+Z", чтобы вернуть все как было и начать операцию с начала - Flash тут же "сольет" два узла кривой в один, чего нам совсем не надо:

Нарисуем еще кружок (инструментом Oval (O)), настройки цвета у нас не изменились после рисования прямоугольничка, - и выровняем трапецию и прямоугольник (панель Align (Ctrl+K), выключить опцию "выравнивать по сцене", выбрать оба объекта и нажать кнопку "выравнивание по центру"; или просто нажать Ctrl+Alt+2, если опция "выравнивать по сцене" выключена)

И нарисуем тоненькую перемычку - тоже прямоугольничек, только совсем маленький (надеюсь, вы знаете, что временное переключение на инструмент "лупа" - Ctrl+Space, уменьшение изображения - Ctrl+Alt+Space)
Тут есть одна хитрость - покажу маленький trik. Если мы начнем рисовать маленький прямоугольничек прямо поверх трапеции и кружочка, то, стоит нам снять выделение - как он сольется с ними и мы не сможем его выровнять. Один из простых способов борьбы с этой багофичей Флэша - нарисовать его там, где нужно, по вертикали, но слева или справа по горизонтали. Тогда мы сможем споконо выбрать потом все три части нашей "радиобашенки" и выровнять их по горизонтали нажатием кнопки в панели Align или нажатием Ctrl+Alt+2.

Превращаем "радиобашенку" в символ, задаем имя, переходим к редактированию этого символа, добавляем слой:

Сделаем "разбегающиеся радиоволны от маячка" - выбираем инструмент Oval (O), цвет - бледно голубой, и рисуем кружок в новом слое. Сразу же превращаем его в MC:

Переходим к редактированию ring (DC на нем) и добавляем фреймы в единственном слое, создаем Motion Tween нашего "колечка":

В последнем фрейме делаем кейфрейм (F6):

Масштабируем колечко до размеров, раза в два-три больших начального - инструментом Transform (Q) при нажатой клавише Shift (чтобы масштабирование шло "от центра":

Выбираем модификатор цвета - Alpha и задаем ему значение 0 для этого последнего фрейма Motion Tween "колечка"

Теперь "колечко-радиоволна" у нас быстренько (за 4 фрейма) "разбегается" в прозрачность.

Возвращаемся к редактированию icon1.
Добавляем 5 фреймов в оба слоя. На скриншоте виден еще один пустой слой - был вариант с двумя последовательно появляюющимися "колечками", но он мне не понравился, и в итоге я оставил только одно, а лишний слой удалил.
Первый фрейм слоя с колечком сдвигаем до 3-го фрейма. За оставшиеся 3 фрейма наше "колечко" не успеет до конца "раствориться" - но это и неважно, ведь в одном оставшемся фрейме оно все равно "не существует" - его не видно.

Возвращаемся в основную сцену.

Продолжаем. Смотрим, с какого момента примерно стоит начать появление "радиобашенки" - я выставил первый фрейм на фрейм 41.
Можно еще раз полубоваться на наш баннер - F12. Мне не очень понравилась "плоская" радиобашенка, я решил сделать ее градиентом - переходим к редактированию MC (DC на нем), назначаем градиентную заливку, регулируем ее.

F12. Годится...

Здравствуйте, уважаемые друзья. Сегодня поговорим об инструментах, которые позволяют создавать флеш баннеры для сайтов. На текущий момент достаточно много всевозможных программ и сервисов для создания баннеров. А услуг по созданию баннеров ещё больше. Только вот минимальная стоимость баннера на заказ составляет примерно 2000 рублей. А бесплатные программы и сервисы имеют свои ограничения в виде урезанных функциональных возможностей или ссылки на готовом баннере.

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

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

Если вам необходимо создавать простые flash баннеры, то это то, что вам нужно.

Скачав пробную версию, после установки программы, при запуске будет появляться окно с предложением купить или зарегистрировать вашу копию. Для начала работы с программой нужно нажать на кнопку « Continue Evaluation» . Для оценки возможностей программы у вас есть 30 дней.

Первым делом нужно выбрать размер баннера. Для этого переходите в раздел « Size and sound» , где задаёте параметры ширины и высоты в пикселях.

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

Далее, нужно сделать фон для баннера. Для этого открываете раздел « Background» , где можно отключить фон, выбрать однотонную или градиентную заливку. А также выбрать изображения, которые будут представлены фоном для баннера.

Для выбора графических изображений нужно нажать на кнопку « Add» . Изображений может быть несколько. Также в этом разделе вы можете настроить и позицию каждого изображения.

Если вы желаете создать анимационный эффект для фона, то переходите в раздел « Effect» , где можно выбрать один или несколько эффектов для фона. Смотрятся они довольно эффектно.

Если эффекты вам не нужны, просто уберите галочку « Add background effect» и эффекты исчезнут.

Следующий раздел « Text, image and SWF» позволяет добавлять в баннер текст, изображение и другие анимации. Для добавления необходимого элемента нужно нажать на соответствующие кнопки « Add image» , « Add text» , « Add SWF».

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

Ссылку вы можете добавить на один из элементов баннера, для этого в настройках элементов есть специальная закладка « Web link» , а также можете прикрепить ссылку на весь баннер. Сделать это можно в разделе « Web Links».

После того как элементы баннера настроены и ссылка добавлена, можно переходить к публикации баннера. Для этого открываете раздел « Publish to Banner». И нажимаете на кнопку « Publish» . Далее, нужно выбрать формат баннера, в нашем случае это SWF. Остальные параметры можно не трогать, они настроены оптимально. И для получения баннера нажимаете на кнопку «ОК» .

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

И вот готовый баннер:

Установка флеш баннера на сайт WordPress

После того как баннер готов, есть файл в формате SWF. Можно приступать к размещению баннера на сайте.

Первым делом нужно загрузить файл с баннером на ваш хостинг. Сделать это можно через файловый менеджер хостинга или через .

Примечание: при загрузке через административную панель WordPress появляется ошибка «Извините, тип этого файла не разрешён из соображений безопасности». Поэтому загружайте одним из вышеуказанных способов.

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

Итак, для размещения баннера вам потребуется один из этих кодов:

Вы должны изменить путь к файлу баннера и указать размер. В примере эти места выделены оранжевым цветом.

Если вы размещаете баннер в статье, то делайте это через вкладку «Текст ».

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

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

07.11.14 2.1K

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

Реклама прочно вошла в нашу жизнь во всех мыслимых и немыслимых формах. Мы видим её по телевизору, в журналах, метро и на футболках. Конечно, интернет не мог остаться в стороне, как самое большое информационное пространство на сегодняшний день. Способов размещения онлайн-рекламы много, и flash-баннер является одним из них. О нём и пойдёт речь далее.

Что это такое

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

Различают следующие виды баннеров:

• Статичные;
• GIF-баннеры;
• Flash-баннеры.

Флеш баннеры для сайта – самый «навороченный » вариант рекламы. Они позволяют использовать сложные анимационные эффекты, а также снабжать рекламу музыкальным сопровождением. Такой баннер можно рассматривать как небольшой мультик или даже игру.

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

Для создания flash баннеров нужно будет потратить немало времени, а страницы сайта должны уметь справляться с загрузкой «тяжеловесов ». GIF -баннеры будут более корректно отображаться у большинства пользователей, чем их флеш аналоги, но ценность рекламы ни в какое сравнение не идёт.

Как создать качественный флеш-баннер

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

• Размещайте не только анимированный ролик, но и картинку-заглушку, чтобы все пользователи видели не пустое место, а хоть какую-то рекламу.
• Будьте честными. Посетитель должен переходить по ссылке только при нажатии на рекламу, а не на любую другую область страницы. Кнопка «закрыть » также должна выполнять свои прямые функции.
• Не делайте так, чтобы баннер мешал посетителю в восприятии контента.
• Музыкальное сопровождение должно быть ненавязчивым. Во время создания flas h баннеров, следует уделить особое внимание звуку. Используйте подходящую для рекламы и сайта музыку или не используйте ее вообще.
• Стиль рекламы должен быть всегда согласован со страницей, на которой размещается баннер.

Что поможет дизайнеру

При создании анимированной рекламы не обойтись без специальных сервисов и программ. Ниже представлены некоторые из них.
— Cooltext.com – простой сервис, который поможет сгенерировать логотип или баннер с неплохими эффектами.

— Lact.ru – сервис, который содержит множество шаблонов для самостоятельного редактирования.

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

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

Напомню, что баннеры – это графическая реклама сайта, блога или любой другой веб-странички. Анимированные баннеры могут быть в формате флэш (swf) и в виде гиф-анимации (читайте – этот сервис поможет вам создать gif-баннер). Баннерная реклама в интернете широко распространена и достаточно эффективна.

Для создания флеш баннера онлайн перейдите по ссылке .

В генераторе Banner Now нажмите на кнопку “Create Banner Now”.

На новой странице выбираем размеры будущего баннера.

Вы можете выбрать один из стандартных размеров баннера или указать свои настройки. Здесь же вы можете выбрать фон баннера и клипарт или загрузить свой. Для этого ставим галочку напротив пункта Custom background , выбираем категорию картинок из предложенных (животные, еда, фоны, животные, кнопки и др.) или загружаем с помощью кнопки upload files .

Снова нажимаем кнопку “create banner”.

Вот мы и попали в редактор флеш баннеров. Если вас не устроил выбор вашего фона, то вы можете выбрать новый. Под рабочей областью документа в найдете галерею изображений (Image Gallery) и кнопку Upload files (загружаем свое фото в редактор). После добавления фона отредактируйте его положение и размеры, потянув мышкой за края изображения.

Используете предварительный просмотр (Preview Banner) для контроля за работой на промежуточных этапах.

Справа от рабочей зоны мы видим слои. Вы можете регулировать прозрачность (свойство alpha), менять последовательность слоев и удалять ненужные.

Слева от рабочей области вы видите дорожку со слайдами. По умолчанию в баннере 1 слайд. Вы можете добавлять слайды, дублировать, удалять, изменять длительность слайда. Чтобы удалить или добавить слайд, нажмите на значок настроек в правом нижнем углу слайда:

Меняем длительность слайда, изменяя время возле значка часов (найдете также под слайдом).

Сверху рабочей зоны вы видите эффекты для текста. Они разбиты на категории:

• appear (появление),
• stay (статичные),
• disappear (исчезновение).

Если вы нажмете на кнопку рядом с эффектами, то можете выбрать эффект для изображения.

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

Когда вы создали флеш баннер онлайн, нужно его скачать. Нажмите на кнопку download banner (swf).

Здесь проставляем настройки:

• autoplay (автоплей),
• repeat (повтор),
• button mode (режим кнопки),
• banner hyperlink (страница, на которую баннер будет ссылаться),
• open url in new page (открывать страницу в новом окне),
• use preload (использовать изображение загрузки страницы),
• send cope of banner to my e-mail (отправить копию баннера на мой e-mail).

Вот такой баннер получился у нас:

Предлагаю вам еще несколько генераторов флеш баннеров с поддержкой русского языка:

• www.animationonline.com
• www.lact.ru/banner/en
• www.flash-banner-maker-online.com/customsizebanner3.php

Эти сервисы более просты в использовании, поэтому инструкция по применению не требуется.

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