Как создать простой анимированный баннер в Flash CS3

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

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

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

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

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

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

Что это такое

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

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

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

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

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

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

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

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

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

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

Flash Баннеры

от 2 299 руб.

Мультимедийная технология Flash, без преувеличения, явилась одним из революционных прорывов в развитии Интернета.

Именно Flash в свое время “оживил” интернет-страницы и принес в Интернет многое, к чему сейчас мы уже привыкли: онлайн-видео, браузерные игры, конструкторы интерьеров, поздравительные открытки с мультфильмами, красочные шапки сайтов с различными визуальными эффектами, и, конечно, анимированные Flash-баннеры.

В настоящее время на смену Flash в современных браузерах постепенно приходят новые технологии HTML5(об этом подробнее расскажем ниже).

Немного истории.

Технология Flash была представлена в 1996 году компаний Macromedia, которая позже была поглощена в 2005 году ведущим лидером в области разработки инструментов для web-дизайна – корпорацией Adobe. Программный комплекс Flash Professional вошел в состав пакета программ Adobe Creative Suite, знакомого каждому дизайнеру и web-разработчику.

Уникальной особенностью Flash был комплексный инструментарий “от рисования и анимации до программирования” в рамках одного редактора и графического “движка”. Flash использовал собственный язык программирования – Action Script, который постоянно развивался, постепенно сближаясь по синтаксису и функционалу с Java-script.

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

И, конечно, Flash стал на долгие годы признанным стандартом в области разработки анимированных рекламных баннеров.

Преимущества и сильные стороны Flash для разработки баннеров.

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

Какие бывают Флеш-баннеры?

Flash предоставляет широкие возможности для изготовления баннеров с самым разнообразным функционалом.

Анимированные Flash-баннеры фиксированного размера (высоты и ширины).
Самый распространенный и привычный формат баннеров. Наиболее популярные размеры подходят для размещения на большинстве площадок в стандартных рекламных блоках, например: 240х400px, 728х90px или 300х250px.

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

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

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

Баннеры-калькуляторы и баннеры-конструкторы.
Помогают вовлечь пользователя в расчет стоимости и набора услуг и товаров еще до перехода на сайт. Часто такие баннеры используются для расчета стоимости кредитных или ипотечных продуктов.

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

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

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

Видео-баннеры.
Flash-технологии особенно сильны в показе потокового видео. Видео для баннера может загружать из внешних ресурсов, запускать по кнопкам “Play” или “Повтор видео”, ставить на паузу или проигрывать автоматически при показе баннера. Видео-баннеры могут сочетать в себе анимации и окно показа видеоролика. Размеры окна показа видеоролика могут быть адаптивными в зависимости от размера самого баннера.

Flash как базовая платформа для анимаций.

Например, вы хотите получить яркий и качественный анимированный ролик, который в дальнейшем планируете транслировать на самые разные рекламные носители: баннеры, pre-roll видео в Youtube, презентация на ЖК-дисплее на выставке или даже скринсейвер на офисные компьютеры.

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

Я слышал, что от Flash отказываются, потому что технология устарела.

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

Претензии, которые предъявлялись к Flash, сводились, по сути, к двум пунктам:

• Flash-плеер перегружает процессор и потребляет слишком много заряда батареи на мобильных устройствах;
• претензии к безопасности и закрытости кода Flash-приложений.

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

На сегодняшний день, параметры производительности в современных браузерах находятся примерно на одном уровне и у Flash и у HTML5. У каждой технологии есть свои сильные стороны и недостатки, однако маркетинговая ситуация сложилась не в пользу Flash.

Как сейчас обстоят дела с Flash-баннерами в Интернете?

Корпорация Adobe официально объявила о грядущем прекращении развития Flash-плеера. Программа-редактор Adobe Flash переименована в Animate и переориентирована на работу с canvas и HTML5 (с сохранением прежнего интерфейса и набора инструментария редактирования анимаций).

Поддержка Flash на устройствах Apple по умолчанию отключена и требует дополнительной установки Flash-плеера.

Ведущие браузеры (Chrome, Safari, Opera) последних версий могут приостанавливать показ Flash-рекламы и требовать от пользователя дополнительных разрешений и действий, что, конечно, не выгодно рекламодателю.

Крупные рекламные сети (Google AdWords, Яндекс.Директ) постепенно сворачивают размещение Flash-баннеров. Онлайн инструмент Google Swiffy для конвертации Flash-баннеров swf в HTML5 был закрыт в 2017 году. Google объявил о полном переходе на HTML5.

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

У меня уже есть комплект Flash-баннеров. Они хорошо работают и мне очень нравятся, можно ли их перегнать в формат HTML5?

Короткий ответ – можно.

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

Мы можем использовать графику и анимации из Flash-баннеров, чтобы перенести их в пространство Canvas и java-script и изготовить HTML5-баннеры, внешне не отличимые от своего Flash-аналога. И, конечно, мы предложим решения для улучшения, обновления и оптимизации старого дизайна.

Так какие баннеры мне выбрать - Flash или HTML5?

Ответ зависит от плана размещения ваших баннеров.

Если вы планируете размещение в наиболее крупных рекламных сетях (Google AdWords, Яндекс.Директ и подобных) с пакетами баннеров стандартных размеров со значительной долей показов на мобильных устройствах или Apple-компьютерах, то стоит сразу задуматься о выборе HTML5, как наиболее универсальной и кроссплатформенной технологии.

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

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