Откройте 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 (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 .
Пример с исходниками можно скачать .
от 2 299 руб.
RUB ЗаказатьМультимедийная технология 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-баннеров и поможем найти самое выгодное решение.