В сегодняшнем уроке вы узнаете как создать флеш баннер онлайн новичку без знания онов флэш-анимации и без специальных программ (читайте ). Надо упомянуть, что в интернете существует большое количество генераторов, позволяющих создать баннеры, в том числе и в формате 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

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

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

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

Для начала создайте новый документ 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 .

Пример с исходниками можно скачать .

Здравствуйте, уважаемые друзья. Сегодня поговорим об инструментах, которые позволяют создавать флеш баннеры для сайтов. На текущий момент достаточно много всевозможных программ и сервисов для создания баннеров. А услуг по созданию баннеров ещё больше. Только вот минимальная стоимость баннера на заказ составляет примерно 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 появилась в 1996 году, как обычно, на Западе. Через год и наши веб-дизайнеры тоже стали использовать эту технологию. Формат флэш замечателен своими разнообразными анимационными возможностями, которые специально приспособлены для интернета, он поддерживает ссылки и формы. Благодаря возможности сжатия флэш-ролики получаются небольшими по размеру. Сначала в интернете появились простейшие флэш-баннеры, потом стали создаваться целые флэш-сайты.

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

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

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

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

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

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

Создание флэш-баннера для шапки сайта

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

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

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