Как сделать баннер в Adobe Animate

Как сделать баннер в Adobe Animate? Animate (бывшая Adobe Flash Professional) – программа для создания мультимедиа и компьютерной анимации; поддерживает как вектор так и растр, встраивание аудио и видео, скрипты ActionScript. Без проблем можно создать баннер HTML5. Да и собрать простую баннер-гифку совсем не сложно. Давайте я расскажу, как сделать рекламный баннер, используя стандартную библиотеку анимаций движения. Результат будет таким:

делаем баннер в адоб анимейт

Приступим! Открываем программу и создаем новый файл (все горячие клавиши работают так же, как и в других продуктах Адоб, так что жмем Ctrl+N). В окне назначаем ширину и высоту нашей рекламы. У меня размер 300 на 500 пикселей. Тип ставим HTML5 Canvas.

Итак, у нас белый холст с нужными размерами. Для своей рекламы я подготовила в Фотошопе картинку с нужными размерами и вставила в Анимейт простым перетаскиванием (можно и через импорт в меню «Файл»).

Далее создаем нужные нам слои. Слои тут действуют скорее как сгруппированные элементы в Иллюстраторе, а не как слои в Фотошопе. Черные точки напротив каждого слоя – видимость и «замочек». Рядом со слоями располагается шкала времени.

как создать баннер в animate

Чтобы не путаться рекомендую назвать каждый слой. У меня получилось 6 слоев с элементами, которые я буду анимировать и слой с главной картинкой. Обратите внимание, что оранжевая точка и «качественно» это один слой. Как и кнопка с текстом «подробнее». Закрепляю слой с картинкой (чтобы не мешался при работе).

как сделать баннер в adobe animate

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

Начинаем анимацию. Я взялась за ОАО «СТИКС».

делаем баннер в adobe animate

Выделяем нужный слой и идем в «Наборы настроек движения». Если справа их нет, то лезем в меню «Окно» и там ищем данный пункт. Выбираем из библиотеки любую понравившуюся анимацию и нажимаем «Применить». Временная шкала напротив данного слоя заполнится выбранной анимацией. Чтобы просмотреть ее можете нажать на кнопку «Play» внизу или просто подвигать красный ползунок по шкале.

стандартные анимации движения в адоб анимейт

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

Фиолетовый «ус» над ОАО «СТИКС» — это путь нашей анимации, от старта до конечной точки. Его можно двигать в любую сторону, с того места и будет начинаться движение. Правая кнопка мыши на элементе и в появившемся меню можно выбрать обратную траекторию движения. Так, «СТИКС» мы заанимировали, переходим к следующим слоям. Пока вышло нечто такое:

промежуточная анимация в adobe animate

Далее, используя стандартную библиотеку, присваиваем каждому нужному элементу свою анимацию. Те слои, в составе которых не только текст, а еще и другие элементы (как мои кнопка с «подробнее» и преимущества с оранжевыми точками), нужно преобразовать в единый элемент. При применении анимации программа спросит, мол, хотите, чтобы объекты преобразовались в символ? Смело соглашайтесь, чего вам терять 🙂

работа в adobe animate

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

делаем анимацию баннер в animate

Но остальные слои закончили свои действия раньше! И зачем нам белый фон? Так что тянем «дорожку» с задним фоном до конца всех анимаций. Т.к. мне нужно, чтобы все элементы, кроме кнопки, совершали свои действия до начала действия кнопки, я выделяю на каждой «дорожке» нужное пустое пространство и жмякаю правой клавишей мышки. В открывшемся меню выбираю пункт «Добавить кадр». Обратите внимание, если вы начнете просто растягивать голубую «дорожку», то анимация по времени удлинится. Мне же этого не нужно. Крайняя черная точка на «дорожках» и сообщает о конце проигрывания анимации.

создание рекламного баннера в adobe animate

Выравниваем по одному времени и проверяем результат.

Для сохранения баннера идём в Файл→Экспорт→Экспортировать анимированный GIF. В окне настроек выберите для себя самые оптимальные. Помимо программных настроек для лучшего сжатия гифки я использую ezgif.com. Очень удобный онлайн-сервис с разными настройками оптимизации.

Ну вот мы и пришли к такому итогу:

делаем баннер в адоб анимейт

После сжатия вышло так:

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

 

 

 

4 комментариев “Как сделать баннер в Adobe Animate

    1. При выделении нужной фигуры, к которому хотите применить обводку, в правом меню выберите кнопочку «создать объект» (центральная из трёх). Тогда ваша фигура станет с обводкой. Там уже и толщину и цвет можете выбирать.

  1. Здравствуйте! Очень интересно! А подскажите ответ на такой вопрос: где мне поменять размер баннера, если я передумала его делать таких размеров, каких изначально задумывала? Спасибо!

    1. Снежанна! Посмотрите на правой стороне рабочей области программы во вкладке «Свойства» указываются размеры холста/баннера. Они редактируемые. Можете еще нажать кнопку «Дополнительные настройки…» и изменить другие параметры.

Оставить отзыв

Ваш email адрес будет скрыт, не волнуйтесь. Помеченные звездочкой поля обязательны к заполнению. *

*