Создание баннеров в adobe animate

Обновлено: 07.01.2025

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

Достоинства технологии

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

Использование данной технологии дает важные преимущества:

Баннеры адекватно отображаются на экранах ПК и портативных устройств, не нужно использовать дополнительные расширения для браузеров.
В рекламные блоки легко интегрируются разнообразные приложения: кнопки соцсетей, карты, календари и т.д.
Баннеры на HTML5 в лучшую сторону отличаются от Flash — не тормозят загрузку страниц сайта в браузере, так как мало весят и используют минимум ресурсов.
Предусмотрен сбор статистики посещений и переходов по привязанным ссылкам — с помощью Google Analytics легко оценить эффективность рекламного объявления.

Крупные игроки мирового рынка, включая Apple, Amazon, Mozilla, постепенно отказываются от флеш-технологий. Google уже отключил поддержку флеш-анимации в своем браузере Chrome, а также полностью перешел на HTML5-баннеры в сервисах поисковой рекламы.

Методы разработки

Баннер HTML5 представляет собой отдельно созданную страницу. На сайт рекламное объявление встраивается как плавающее окно через тег «iframe». Для разработки баннера можно использовать разные методы.

CSS3 и JavaScript

Полная свобода творчества — можно использовать любые стили и скрипты, разные приемы анимации, создавать любой контент, вплоть до игр.Но это задача для профессионала, владеющего специфическими навыками верстки. Кроме того, разработка баннера средствами CSS3 и JavaScript занимает много времени.

Adobe Edge Animate

Специализированная программа проста в использовании — для создания анимированного контента не требуется знать HTML5, CSS3 и JavaScript. Чтобы освоить Edge Animate, можно воспользоваться многочисленными видеоуроками и руководствами в Сети.

Значительная часть процессов автоматизирована, библиотека из трех десятков визуальных эффектов ускоряет и упрощает работу.
Поддерживается импорт популярных форматов: HTML, .jpg, .jpg, .svg, .jpg, поддерживаются аудио- и видеоформаты.
Готовый баннер отвечает всем техническим стандартам Google и Яндекса, адекватно отображается браузерами и мобильными приложениями.

К недостаткам относят отсутствие русифицированной версии. Также следует учесть, что проект Adobe Edge Animate был остановлен в 2015 году, обновлений нет и не будет. Программу можно найти в архиве Creative Cloud.

Adobe Animate CC

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

Основные достоинства Animate CC:

Включена функция создания 3D изображений.
Ассортимент векторных кистей, использование возможностей растровой графики (недоступно для Edge Animate).
Регулярное появление обновлений, расширение функционала.
Предусмотрена русифицированная версия.
Конечные файлы экспортируются в JavaScript/HTML, gif, jpeg, mov, svg, png, oam. Чтобы ускорить загрузку баннера, его элементы можно сохранить в спрайтах одним нажатием кнопки.

У Animate CC есть два существенных недостатка:

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

Google Web Designer

Бесплатный редактор от Google придуман для создания HTML5-баннеров, причем программа изначально ориентирована на AdWords — в нее встроены шаблоны рекламных блоков соответствующих размеров.

Google Web Designer порадует пользователя:

Простым интерфейсом.
Готовыми шаблонами для рекламных объявлений на площадках Google.
Русифицированной версией.
Возможностью создавать адаптивные баннеры, подстраивающиеся под ширину сайта — такие рекламные блоки эффектно смотрятся на экранах с любым разрешением.

К недостаткам относят довольно узкие возможности программы — практически все выполняется по шаблонам, оригинальную анимацию с помощью Google Web Designer не создать. Кроме того, пока не хватает полноценных обучающих программ.

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

Создание адаптивного резинового баннера в Google Web Designer

Адаптивным называют баннер, который вписывается в заранее определенные размеры блока (они соответствуют размерам рекламного места на площадке или подбираются пользователем самостоятельно).

При изменении ориентации экрана смартфона или планшета, на мониторах ПК и экранах ноутбуков с разным разрешением баннеры с адаптивным дизайном смотрятся одинаково эффектно. В стандартном варианте отзывчивый баннер имеет фиксированную высоту, а ширина автоматически подгоняется под размеры страницы. По сути, такой баннер представляет собой резиновую HTML5-страницу с использованием CSS3.Программа Google Web Designer позволяет создать гибкий макет, в котором компоновка элементов баннера меняется при изменении ширины окна.

Создание адаптивной страницы
В начале работы программа Google Web Designer предлагает создать новый файл или открыть уже существующий. В первом случае далее требуется указать название и месторасположение нового файла, а затем ниже установить флажок «Адаптивный макет». Если открыт уже существующий документ, необходимо найти панель «Адаптивные» и поставить соответствующий флажок там.

Обратите внимание: создание адаптивного макета доступно не для всех типов файлов.

Положение и размеры

Ширину и высоту адаптивного баннера задают на уровне 100% — в этом случае HTML5-документ будет занимать все отведенное для него место на странице сайта.

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

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

Изменение стиля

Функционал Google Web Designer позволяет обеспечить гибкое отображение визуального контента баннера в зависимости от размеров областей просмотра и их ориентации. К примеру, информация на мониторе может отображаться в два столбца, а на экране смартфона — в один.

Чтобы задать изменение (переопределение) стиля, следует на панели «Адаптивные»:

внести требуемые изменения в «Правила по умолчанию»;
указать выбранные размеры или их диапазон в «Правилах обработки мультимедиа», задать стили отображения.

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

Пошаговая инструкция по созданию баннера

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

Описание моего опыта переезда с Flash на Animate CC и создания баннеров во всемогущем формате HTML5. Много картинок под катом

Немного исторического экскурса и терминов

Лично я сам знаком с Flash гораздо больше 10 лет и немного представляю, как работает эта технология «изнутри».

Примерно столько же лет я верстаю сайты, в том числе на «современном» языке HTML5, который, как говорят, умеет всё. Нет, реально, иногда упоротые дизайнеры присылали такие интерфейсы, которых в природе не существовало, их нужно было выдумать, прикрываясь фразой «на HTML5 же можно написать всё!».

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

За последние 5 лет flash не пинал только ленивый, причем, не особо разбираясь в вопросе. Лично я никогда не видел ни тормозов, ни дырявости, а уж про самое первое утверждение от Стива Джобса про то, что «Flash не заточен под палец» — это и вовсе смешно. Самая очевидная причина противостояния Apple против флеша на айфонах лежит на поверхности, но сейчас не об этом.

Приближаемся к развязке терминологии. HTML — это язык разметки текста и расположения элементов на странице. Он не умеет выполнять никакие действия сам по себе. Под «новшествами HTML5» вместо Flash обычно понимают: проигрывание видео без Flash, анимации без Flash, мультизагрузка файлов без Flash и некоторые другие вещи.

Несмотря на дифирамбы, звучащие отовсюду, до сих пор не появилось ни одного вменяемого редактора анимации на «всемогущем» HTML5, пока Adobe не перелицевала Flash CC в Animate CC, добавив, по сути, только экспорт в HTML5.

Интерфейс

Сам интерфейс Animate CC вообще не отличается от Flash, в отличие от Edge Animate, который был дико непривычен. Больше сказать особо нечего, и я вообще не заметил разницы с CS6, которым я пользовался давно. Для баннеров не нужен AS3, а это была последняя версия, поддерживающая AS2. Конвертер Swiffy, который сделала Google, дружил только с AS2.

* AS2,3 — встроенный во Flash язык программирования Action Script, который позволяет делать всю неанимационную составляющую ролика — чтобы кнопки нажимались, чтобы на нужных кадрах ролик вставал на паузу, для того, чтобы информацию могли прочитать, чтобы запускались интерактивные сценарии взаимодействия с роликом. На самом деле, это достаточно мощный язык, и я использую лишь 0,000001% его функционала.

Движок отрисовки

Естественно, сами по себе объекты внутри ролика двигаться не могут, для этого нужно, чтобы их двигал, показывал и скрывал какой-то движок. В Animate CC для проектов формата HTML5 Canvas используется CreateJS, который приветствует каждый новый проект замечательным предупреждением

ПРЕДУПРЕЖДЕНИЯ:
Номера кадров в EaselJS начинаются с 0, а не с 1. В частности, это влияет на методы gotoAndStop и gotoAndPlay.

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

Таймлайн и рабочая область

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

Теперь перейдем к тому, чем я постоянно пользуюсь:

Стандартные фильтры во Flash

Фильтры — одна из весьма частых составляющих любых баннеров, они позволяют очень быстро добиться нужного результата. Я рассмотрю 3 фильтра, которыми я раньше пользовался крайне часто. Во флеше фильтры — часть стандарта, и на моих работах они не оказывали какого-либо влияния на производительность, да и не могли в-принципе. Здесь и далее я буду использовать экспорт в GIF для понимания разницы

Тень — один из самых простых вариантов сделать части баннера объемнее и акцентировать внимание на нужных блоках. Естественно, я взял чрезмерно сильную тень, чтобы проиллюстрировать разницу
Сравниваю:

Flash	CreateJS

Да, анимация тени невозможна. Более того, если ролик длиннее того, что я представил для теста, тень превращается в неизвестно что.
Здесь также стоит упомянуть, что в редакторе и готовом html5 тени (да и вообще все эффекты) выглядят сильно разными.

Редактор	Результат

При экспорте в трейсе можно увидеть такую надпись:
Фильтры тени и свечения используют очень много системных ресурсов, кроме того, поддерживаются не все параметры. (4)
Ну спасибо, что хоть предупредили…

Производительность баннера с тенями оставляет желать лучшего, ну они же предупреждали. Стерев тени с этих подложек, я сократил нагрузку до 40%. Флеш все это рисовал с 23% загрузки вместе с тенями, разумеется

Свечение

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

Flash	CreateJS

В это самое время в редакторе все так же, «Видимость ноль, иду по приборам»:

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

Помимо этого, свечение — это не только обводка букв, но результат намекает, что его не будет

Flash	CreateJS	В редакторе

Размытие

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

Flash	CreateJS

Как вышеперечисленные глюки могут существовать при повсеместном проникновении тех же самых SVG-фильтров и фильтров в CSS — я не представляю.

Проблемы экспорта и упаковки

Все привыкли к тому, что ролик во флеше — это самодостаточный файл. Экспорт в HTML5 порождает кучку файлов, вместо одного. Проект Swiffy, придуманный Google для конвертации SWF в HTML паковал всё внутрь одного HTML-файла. Видимо, такая задача оказалась непосильной ношей для создателей Animate CC. Подробную статью по поводу засовывания «всего» внутрь одного файла для Doubleclick можно прочесть здесь. Я сделал свой конвертер на лету, сгородив конструкцию из пары функций на php, но она далека не то, что до идеала — даже до черновика. Мои задачи решает — и ладно.

Резиновые баннеры

По умолчанию Animate вроде как поддерживает «резиновость» баннеров, но обычно под резиновыми баннерами имеются в виду те, которые тянутся по горизонтали, а не пропорционально по обоим осям. В шаблоне экспорта это называется responsive scaling, и в случае с баннерами, тянущимися только по оси X это приводило к забавным глюкам, пока я его не вырезал из шаблона

Вообще, можно вообще отказаться от идеи растягивания баннера, просто взять максимальный размер баннерного места, а ширину ролика указать равную минимальному размеру баннерного места и обрезать часть с помощью overflow: hidden, потом центрировать элемент CANVAS (указав его ширину равной максимальному размеру баннерного места) по горизонтали внутри ссылки, занимающей 100% ширины, здесь даже немного проще, чем было во FLASH и не требует никаких дополнительных скриптов внутри ролика, только css.

Анимированный баннер

Баннер - это короткая анимация, которая обычно ставится на паузу или зациклена, содержит текст и при клике на неё открывается страница сайта. Создание документа HTML5 отличается от обычного документа в Animate доступными параметрами публикации (и ещё парой ограничений, о них скажу дальше). Я сразу включаю галочки "Центрировать рабочую область" и "Сделать адаптивной" в параметрах публикации для того, чтобы баннер вёл себя так как задумал программист при изменении рабочей области (например перевернули телефон).

Выбираем тип документа "HTML5 Canvas", размер потом можно будет изменить Я всегда включаю галочки "Центрировать рабочую область" и "Сделать адаптивной" в параметрах публикации Выбираем тип документа "HTML5 Canvas", размер потом можно будет изменить

Для примера прорекламируем замену моторного масла и клик будет уводить на страницу оформления заявки. В реальном проекте лучше показать всплывающее окно на запись прям тут, потому что лишний клик "охлаждает" желание клиента сделать требуемое действие, но для примера сделаем так . Создадим анимацию: медленно сдвигаем фон, а эффект свечения (чёрный цвет) вокруг надписи "мы меняем масло БЕСПЛАТНО!" заставим сгущаться и разрастаться, намекая на то что масло рано или поздно испачкается.

Фрагменты кода можно использовать как основу для создания собственного скрипта Действия из фрагментов кода можно применить к именованному ролику (ban1), а потом изменить на c "this.ban1" на просто "this." Фрагменты кода можно использовать как основу для создания собственного скрипта

Действие перехода к веб-странице (как и другие часто используемые действия) можно вставить из "фрагментов кода" (см слайд). В последний кадр добавим действие stop(); чтобы остановить ролик. Это можно сделать также через фрагменты кода.

Действия из фрагментов кода можно применять только к именованным объектам, поэтому можно создать любой ролик с именем, а затем скопировать код в глобальный сценарий убрав имя ролика после this.

В Adobe Animate делается интерактив, который затем можно поместить куда угодно. Например я бы разместил этот баннер с помощью тега iframe:

<iframe src="файл_публикаци.html" width="728" height="90" align="right"> Ваш браузер не поддерживает фреймы! </iframe>

Карусель

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

Сделаем из предыдущего примера именованный фрагмент ролика. И сделаем ещё один баннер в фрагменте ролика. Разместим их в двух первых кадрах на сцене. И каждому из этих кадров назначим действие this. stop(); . В новом слое выше них разместим кнопки для перехода между ними. В конец каждого ролика-баннера вместо stop(); укажем перейти на следующий кадр основной сцены (this. parent.gotoAndStop(1); ).

На кнопки назначим действие перехода на нужный кадр (без слова parent). Кнопка имеет 4 положения: просто показана, наведена мышка, мышка нажата, мышка отжата. Это может оказаться полезным при создании интерактива (например подсвечивать кружочек при наведении мышки).

Готовая карусель из 2х банеров, перелистывается при окончании движения или по нажатию кружков внизу Готовая карусель из 2х банеров, перелистывается при окончании движения или по нажатию кружков внизу

Плагин на сайт

Сначала я сделал плагин для Mozilla Firefox в Adobe Animate. Но оказалось, что запакованные и сделанные через всякие фреймворки файлы HTML не проходят проверку при публикации, так как в Mozilla бояться спрятанного в них вредоносного кода. Так что применение плагинов может быть ограничено только одним сайтом. Для примера сделаем окошко расценки артикула из на сайте автозапчастей, которое зафиксировано относительно экрана. Как его крепить не особо важно - это делается на стороне сайта, например так:

Мой плагин - это поле ввода артикула запчасти, которое по нажатию кнопки ENTER на клавиатуре открывает страницу покупки на сайте. Чаще всего запрос пишется прям в адресной строке в виде: сайт/search/?pcode=артикул .

Вставим из компонент TextInput. Сделаем необходимый внешний вид окошка (на слайдах видно как это делается).

У нас случились HTML5-баннеры… Клиентам резко их захотелось. Мы обычно делаем в gif, так быстрее. Но если уж сильно хочется, то можно. С ними мы разобрались, заодно и вам поможем понять что за зверь такой — этот html5 баннер и как его приручить.

Что такое HTML5 баннер?

Если кратко, html5-баннер — это динамическое рекламное изображение на сайте, которое видит пользователь. Но если привычные всем баннеры делаются на основе растровой и векторной графики, то в этом случае используются html-элементы.

В чем главный плюс баннеров в html5?

Креативная и привлекательная анимация, создающаяся за небольшое количество времени. Согласитесь, html5 баннеры в сравнении со статичными jpg-овскими изображениями и даже gif-ками выглядят свежо.
Возможность встраивания в баннер кликабельных кнопок: кнопка вызова и sms, карты, ссылки на социальные сети, календари и т.д. Интегрировать можно что угодно, даже приложения.
Не придется разбираться в коде. Свои html5 баннеры мы делаем в Google Web Designer, программа сама генерирует код. Удобно, если для вас код — это просто набор странных цветных символов и букв. Но у собранного программой кода есть пара нюансов, про которые мы поговорим чуть позже.
Легкий вес html5 баннера даже несмотря на анимацию в нем. А легкий вес баннера, как мы знаем, не влияет на скорость загрузки страницы.
А еще html5 баннеры — это тренд (:

Где создавать html5 баннер?

Баннеры можно собирать на разных сервисах с шаблонами, типа Canva или Bannersnack. Есть специальные конструкторы, такие как Adobe Animate, но за подобные сервисы надо платить.

А можно сделать как ТРУ-дизайнер в Google Web Designer. И вот почему:

Несложный интерфейс самого Google Web Designer: почитал инструкцию, потыкал и, считай, уже разобрался.
Легко и быстро создать простенькую, но красивую анимацию. А если уж сильно постараться, то и не простенькую создать тоже получится.
Google Web Designer бесплатный (:

Нюансы при создании html5 баннеров

Собрать сам баннер html5 не так уж и сложно, если есть обывательские навыки в Photoshop (:

А вот правильно «собрать»‎ код уже сложнее:

Изучите технические требования от площадки, на которой хотите разместить баннер. Иначе будете биться в истерике, когда баннер не захочет загружаться в рекламную кампанию.
Не пренебрегайте поиском информации в интернетиках, если не понимаете как, куда и зачем вставлять скрипты. Как говорится, Гугл (или Яндекс) в помощь.
Обратите внимание на начальные настройки: если вы планируете размещать html5 баннер в Яндекс.Директе, а создаете его в Google Web Designer , то в пункте «платформа» выберите «внешнее объявление». Иначе Яндекс будет ругаться на внешние ссылки от Google. У них между собой какие-то терки, но лезть мы в это, конечно же, не будем (:
Следите за объемом документа. Если архив получится «жирненьким» — он не пройдет и это не из-за того, что «кто-то слишком много ест!». Запоминаем: и в Яндекс.Директ, и в Google Ads размер файла не должен превышать 150 КБ.

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

Лайфхаки от дизайнера

Зацикленная анимация

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

Сделать это можно в несколько простых шагов:

Добавляем событие в завершающей части вашей анимации, кликая на рабочую зону правой кнопкой мыши:

Читайте также: