Как создать свой флеш баннер. 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
Эти сервисы более просты в использовании, поэтому инструкция по применению не требуется.
Если у вас остались вопросы, то вы можете задать их в комментариях.
Видео урок по работе с сервисом
Человечество узнало, как создать торговые отношения много тысячелетий назад и на протяжении всего своего существования совершенствовало эти умения. Качество товара всегда выступало главным критерием выбора для потребителей, однако если о существовании одного продукта покупатель знает, а о другом нет – то выбора нет вовсе.
Реклама прочно вошла в нашу жизнь во всех мыслимых и немыслимых формах. Мы видим её по телевизору, в журналах, метро и на футболках. Конечно, интернет не мог остаться в стороне, как самое большое информационное пространство на сегодняшний день. Способов размещения онлайн-рекламы много, и flash-баннер является одним из них. О нём и пойдёт речь далее.
Что это такое
Для начала, следует разобраться с тем, что такое баннер сам по себе. Это какое-то графическое изображение, размещенное с целью привлечения клиентов. В интернете баннерами можно назвать всё, что представляет собой картинку с рекламой.
Различают следующие виды баннеров:
- Статичные;
- GIF-баннеры;
- Flash-баннеры.
Флеш баннеры для сайта – самый «навороченный » вариант рекламы. Они позволяют использовать сложные анимационные эффекты, а также снабжать рекламу музыкальным сопровождением. Такой баннер можно рассматривать как небольшой мультик или даже игру.
Баннеры, в зависимости от своей природы, имеют различное применение. Статичные дешевле заказать, и они практически не замедляют загрузку страницы, а для их конструирования подойдёт любая, способная редактировать изображения, программа.
Для создания flash баннеров нужно будет потратить немало времени, а страницы сайта должны уметь справляться с загрузкой «тяжеловесов ». GIF -баннеры будут более корректно отображаться у большинства пользователей, чем их флеш аналоги, но ценность рекламы ни в какое сравнение не идёт.
Как создать качественный флеш-баннер
Большинство владельцев веб-ресурсов заказывают рекламу у профессионалов, и, скорее всего, правильно делают. Ведь самому можно сделать всё по инструкциям, но качество будет сомнительным. Тем же, кто всерьёз задумывается о том, как сделать флеш баннер привлекательным для посетителей, необходимо следовать следующим рекомендациям.
- Размещайте не только анимированный ролик, но и картинку-заглушку, чтобы все пользователи видели не пустое место, а хоть какую-то рекламу.
- Будьте честными. Посетитель должен переходить по ссылке только при нажатии на рекламу, а не на любую другую область страницы. Кнопка «закрыть » также должна выполнять свои прямые функции.
- Не делайте так, чтобы баннер мешал посетителю в восприятии контента.
- Музыкальное сопровождение должно быть ненавязчивым. Во время создания flas h баннеров, следует уделить особое внимание звуку. Используйте подходящую для рекламы и сайта музыку или не используйте ее вообще.
- Стиль рекламы должен быть всегда согласован со страницей, на которой размещается баннер.
Что поможет дизайнеру
При создании анимированной рекламы не обойтись без специальных сервисов и программ. Ниже представлены некоторые из них.
— Cooltext.com
– простой сервис, который поможет сгенерировать логотип или баннер с неплохими эффектами.
— Lact.ru – сервис, который содержит множество шаблонов для самостоятельного редактирования.
— Adobe Flash – наиболее популярная программа для создания флеш баннеров. Онлайн-сервисы – это, конечно, хорошо, но для действительно качественной рекламы не обойтись без программ с возможностью более детального редактирования.
Откройте Adobe Flash и создайте новый документ. Измените документ, нажав Ctrl + J для Mac, Ctrl + J для ПК. В опциях задайте размер для баннера: 468 х 60 (ширина х высота. Это стандартный размер баннера в Интернете). Затем задайте любой цвет для фона, который вы хотите, и нажмите кнопку ОК. Для этого урока - это будет черный цвет.
"Перейдите к своим слоям и назовите первый так, какой вы хотите, чтобы была первая анимация . В этом уроке это будет круг, так что сам слой будет называться ‘circle’ (круг). Наведите курсор на инструмент Rectangular (Прямоугольник), нажмите его и затем удерживайте его, чтобы вызвать меню. Далее выберите инструмент Oval (Овал), затем отпустите кнопку мыши. Перейдите к баннеру и создайте круг любого размера. В этом уроке размер довольно большой, так что только небольшая часть круга будет видна внутри баннера, и размеры такие: 175.5 x 175.5.
Теперь, когда у вас есть созданный круг, нажмите F8 (Mac и PC) для того, чтобы вывести окно конвертирования (преобразования) в символ. Нажмите изображение, далее назовите символ "circle", затем нажмите OK. Вы сейчас создали символ, который можно "оживить". Перейдите к своей области слоев и переместите курсор к 5-му кадру и нажмите F6 (Mac и PC). Это создаст ключевой кадр, который имеет круг в том же месте. Нажмите назад в 1-ом кадре, затем перейдите к своему кругу и нажмите его. Теперь мы сделаем его исчезающим в плане анимации.
Спуститесь к панели свойств внизу и перейдите к палитре цветов. Нажмите на нее и переместите ползунок в позицию "Alpha", а затем установите значение процента в "0". Это заставит ваш круг исчезать. Но не волнуйтесь, потому что он все еще там, просто в настоящее время он скрытый.
Вернитесь к вашей области Layers, щелкните правой кнопкой мыши на ключевом кадре, который находится между 1-м и последним ключевым кадром, и нажмите на кнопку "Create Motion Tween". Если все сделано правильно, то значит вы успешно создали первую часть анимации. Далее мы добавим текст.
Создайте новый слой, назовите его "text" (текст), так как это то, что будет там помещаться. Перейдите к 6-му кадру в слое "text", щелкните правой кнопкой мыши, затем выберите "Insert New Keyframe" (Вставить новый ключевой кадр) - это даст вам пустой ключевой кадр, чтобы работать. Перейдите к палитре инструментов, нажмите на "T", чтобы выбрать инструмент text tool (Текст). Переместитесь на свой баннер, затем введите слова, которые вы хотите. Для этого урока это будет слово "banner". И с еще выбранным текстом нажмите клавишу F8, чтобы сделать его изображением (Graphic). Введите "text" для имени, затем нажмите кнопку ОК. Теперь ваш текст может быть анимирован также.
Теперь перейдите к слою "circle", нажмите на шестой кадр, затем нажмите и удерживайте кадр и перемещайте его до 16-го ключевого кадра. Это сделает круг видным через всю анимацию. Перенесите текст в область, которая в кругу, но убедитесь, что находится не на бит левее за круг. Перейдите к своим слоям, нажмите и удерживайте слой "text" и переместите его вниз, чтобы быть ниже слоя "circle". Это заставит часть текста исчезнуть для просмотра; то есть то, что нам нужно в данный момент.
Зафиксируйте слой круга и спрячьте его" также. Чтобы мы могли убедиться, что ничего не будет "испорчено" и чтобы мы могли видеть, что мы делаем, нажмите на 15-й кадр на слое с текстом, и создайте ключевой кадр, нажав клавишу F6. Нажмите на текст в 16-м кадре и переместите его в то месторасположение, где вы хотите, чтобы текст находился на баннере. Но убедитесь, что последняя буква находится левее за сам круг. Вы можете нажать, чтобы сделать круг видимым, если вы не уверены, где есть круг.
Технология Flash появилась в 1996 году, как обычно, на Западе. Через год и наши веб-дизайнеры тоже стали использовать эту технологию. Формат флэш замечателен своими разнообразными анимационными возможностями, которые специально приспособлены для интернета, он поддерживает ссылки и формы. Благодаря возможности сжатия флэш-ролики получаются небольшими по размеру. Сначала в интернете появились простейшие флэш-баннеры, потом стали создаваться целые флэш-сайты.
Флэш-баннер - это графический или текстовый блок, выполненный по технологии Flash, чаще всего, содержащий в себе информацию рекламного характера. Часто флэш-баннер содержит в себе ссылку, ведущую на какой-либо сайт. Анимированный флэш-баннер является хорошим средством для привлечения внимания. Главными требованиями к созданию флэш-баннера являются привлекательность, читабельность, информативность. Это достигается с помощью анимации, яркости образа, оригинальности текстового содержания.
Студия DV-PRO имеет в наличие соответствующее программное обеспечение, позволяющее выполнить технически сложные эффекты при создание флэш-баннеров, интерактивных текстовых блоков, а также слайд-шоу из фотографий в формате флэш. Наличие флэш-баннера на Вашем сайте повысит его рейтинг, и привлечет к нему внимание.
Создание флэш-баннеров
Флэш-баннеры имеют огромные преимущества перед другими видами анимации. Флэш-баннер может включать в себя сложную и продолжительную анимацию, и, несмотря на высокое качество картинки иметь малый вес в килобайтах. Движение на картинке плавное, к тому же можно создать флэш-баннер, содержащий звуковое сопровождение и интерактивность, то есть реакцию на действия пользователя. И хотя в последнее время активно продвигается новая технология HTML5, которая вроде как идет на замену флэшу, но она еще весьма сырая и не так распространена в сайтостроении, как формат флэш.
Баннерная реклама признана одним из наиболее эффективных инструментов продвижения товаров и услуг в интернете. Анимированные флэш-баннеры по своей оригинальности и привлекательности не имеют конкурентов. В связи с этим создание флэш-баннеров является востребованной услугой. Важнейший показатель удачного создания рекламных флэш-баннеров - их кликабельность, то есть количество кликов пользователей по баннеру. Создание флэш-баннеров - задача профессионального веб-дизайнера, и требует знания довольно сложного программного обеспечения, дизайнерского чутья и свежих идей. Применение при создании флэш-баннеров различных мультимедийных средств делает конечный продукт не просто картинкой на сайте, а эффективным рекламным инструментом.
Если Вы решили увеличить посещаемость своего сайта, используя такой инструмент, как флэш-баннер, лучше всего создание анимированного флэш-баннера. Рассматривая эффективность такого баннера можно сказать: движение привлекает больше внимания и на них кликают в четыре раза чаще, чем на статичные. Но Вы должны правильно сформулировать, для чего Вам нужен флэш-баннер. От этого зависит его размер, содержание, и форма подачи. Если Вы планируете заказать изготовление флэш-баннера для какой-либо рекламной сети, например Яндекс, Вам лучше заранее узнать технические требования, предъявляемые этими площадками.
Создание флэш-баннера для шапки сайта
Если Вы хотите заказать создание сайта, но при этом Вам нужен сайт, который будет выделяться из общей массы, быть более интересен для посетителей, чем сайты Ваших конкурентов, конечно, нужно использовать флэш. Но если сделать сайт полностью на флэш, это усложнит его редактирование и продвижение в поисковых системах.
Я могу предложить для Вас идеальное решение: верхняя часть сайта, или шапка, создается в формате флэш, а наполнение, или контент - в виде HTML-кода. В этом случае у сайта будет яркий и оригинальный образ, и понятное для любой поисковой машины содержимое, которое довольно легко редактировать. Также, в наиболее функциональные части сайта можно добавить информативные флэш-баннеры, которые периодически можно менять. При этом вес страницы останется в пределах нормы.
В сети существуют тысячи и миллионы сайтов, в основном это скучные и неинтересные страницы, с которых посетители уходят в первые пять секунд. Не пополняйте эти ряды, если Вы решили заказать создание сайта - пусть он будет интересный, яркий и запоминающийся, с оригинальными эффектами и полезной информацией. Особенно это касается сайтов, где основной упор делается не на текст, а на изображения, например, сайты фотографов, дизайнеров, художников. Они ориентированы на эмоциональную подачу, здесь главное не только дать описание своей продукции, но и показать, как говориться товар лицом. Стоимость такого сайта будет менее существенна, чем разочарование Вашего посетителя от обычного, как у всех сайта.
В этом уроке рассмотрим пример создания простого анимированного баннера, в котором будет появляться и исчезать текст, и при нажатии на которой пользователь будет перенаправляться на определенный сайт.
Для начала создайте новый документ ActionScript 3. Баннер будет размером 300*250 пикселей, установите его в настройках properties документа.
В баннере будем использовать три текстовых объекта, в данном примере это «Уроки AS3» , «Уроки AdobeFlash» и «Уроки Photoshop» . При помощи инструмента «Text Tool» создайте их на сцене.
Должно получиться три текстовых поля, как показано ниже:
Чтобы создавать продвинутую анимацию — необходимо перевести текстовые поля в символы. Выделите каждый объект и при помощи контекстного меню преобразуйте их в символы.
В библиотеке Adobe Flash должно получиться три объекта-символа:
Когда символы созданы, можно удалить их со сцены, так как каждый текстовый объект мы будем размещать на отдельном слое. Создайте три слоя на панели «Timeline».
Разместите каждый символ из библиотеки на отдельном слое так, чтобы их расположение было практически равным.
Текстовые объекты будут плавно появляться, поэтому в первом кадре их нужно сделать невидимыми. Для этого выберите все объекты на сцене и установите на панели свойств «properties» в настройках «color effect» стиль «style» на «alpha» и уменьшите это значение.
Теперь нужно создать ключевые кадры для каждого слоя. Выделите ключевой кадр «50» у каждого слоя, нажмите правую кнопку мыши и в контекстном меню выберите «Insert Keyframe».
Для того, чтобы объекты плавно преобразовывались нужно создать классическую анимацию движения «Classic Tween». Выберите несколько кадров между первым и пятидесятым сразу для всех слоев. Затем вызовите контекстное меню и выберите «Create Classic Tween» .
На панели «Timeline» должно получиться следующее:
Теперь нужно создать еще ключевые кадры для каждого слоя, также, как делали в начале. Создаем для каждого слоя ключевой кадр на кадре «100» , после чего снижаем значение «alpha» у каждого объекта в настройках «properties».
И опять создаем классическую анимацию движения «Classic Tween» , только между кадрами «50» и «100».
Теперь нужно разделить по времени каждый анимированный объект. Для этого нужно сдвинуть кадры анимации для каждого слоя на панели «Timeline».
Для этого выделите все кадры второго слоя с «1» по «100» и перетащите их так, чтобы первый ключевой кадр этого слоя начинался с «51» кадра.
Тоже самое проделываем с третьим слоем, передвигаем его кадры так, чтобы его первый ключевой кадр начинался с ключевого кадра второго слоя.
Можете запустить приложение (нажмите клавиши ctrl+enter), чтобы проверить анимированный баннер.
Теперь нужно сделать так, чтобы при нажатии на баннер происходил переход на необходимый сайт. Для этого нужно внести код ActionScropt 3.0 в приложение. Чтобы сделать это выберите первый кадр певрого слоя и войдите в окно написания кода «Actions» , нажмите на изображение стрелки в верхнем правом углу (или нажмите клавишу F9).
Пишем следующий код:
AddEventListener(MouseEvent.CLICK, onClick); Mouse..CLICK, onClick);
Давайте разберем код. В первой строчке добавлям слушатель событий на событие нажатия кнопки мыши.
Mouse.cursor = "button";
Устанавливаем вид курсора.
В пятой строчке описываем функцию-обработчик события на нажатие кнопки мыши. В строчке var targetURL:URLRequest = new URLRequest создаем объект URLRequest в параметре которого указываем текстовое значение — ссылку на необходимый сайт. В строчке navigateToURL(targetURL); происходит фактический переход на сайт по полученной ссылке, указанной при создании объекта var targetURL .
Пример с исходниками можно скачать .
