Adobe animate урок — 1. Как создать html5 баннер

Adobe animate урок - 1. Как создать html5 баннер

Прежде чем перейти к созданию html5 баннера в adobe animate cc необходимо:

1.Иметь уже установленный adobe animate cc(Англоязычной версии)
2.Скачать архив с материалами для дальнейшей работы

Создаем новый html5 canvas документ с шириной(729px), высотой(90px)

Adobe animate урок - 1. Как создать html5 баннер

Импортируем в документ скачанные материалы из архива:
File -> import -> import to stage...

Adobe animate cc среди большого количества форматов поддерживает также родной формат фотошопа(PSD)

После импорта psd появится окно со множеством настроек, которые нам трогать не нужно.

Adobe animate урок - 1. Как создать html5 баннер

Оставляем все по дефолту, кроме самих слоев. Поскольку В нашем html5 canvas документе фон белый, то можем снять галочку с нижнего слоя(Слой 0) и произвести импорт кликнув по кнопке import.

Импортированный слой разместился идеально в html5 canvas документе поскольку его изначальный размер идентичный размеру текущего документа. Также импортированный слой разместился на новом слое в документе, следовательно нижний слой нам не нужен и его можно удалить.

Adobe animate урок - 1. Как создать html5 баннер

Если по каким либо причинам таймлайн панель у вас отключена, то отобразить ее можно кликнув:
Window -> timeline

Переименуем основной слой с изображением. Для этого кликнем по его имени 2 раза и введем новое имя bg.

Создадим 5 пустых слоев с названиями: text1, text2, text3, button, Actions

Adobe animate урок - 1. Как создать html5 баннер

Небольшое пояснение:

Слои text1, text2, text3 - будут содержать текст
Слой button - будет содержать в себе кнопку с текстом. При клике на которую произойдет переход на сайт.
Слой Actions - служебный слой для написания скриптов.

Переходим на слой text1, берем инструмент 'Текст' и начинаем создавать текст. В результате на каждом из 3-х слоев у вас должно быть по 1 тексту.

Adobe animate урок - 1. Как создать html5 баннер

Аналогично переходим на слой button и начинаем создавать кнопку в правой части html5 баннера. Берем инструмент 'Прямоугольник', убираем обводку и задаем нужный цвет заливки. После того как создали кнопку выбираем инструмент 'Текст' и создаем нужный текст на кнопке.

Adobe animate урок - 1. Как создать html5 баннер

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

Выделяем слой button и переходим в меню: Modify -> Convert to symbol

Задаем название символу(по желанию) и выбираем тип button. Тем самым мы помечаем текущий слой как кнопку для получения более расширенного функционала.

Adobe animate урок - 1. Как создать html5 баннер

Для перехода в режим редактирование символа необходимо:
-Кликнуть два раза по кнопке на холсте.

Adobe animate урок - 1. Как создать html5 баннер

После чего на таймлайне для кнопки будут доступны 4 действия для стилизации: up, over, down, hit

По умолчанию на действие UP стоит ключевой кадр - т.е это состояние покоя. Поэтому наша кнопка не измениться. Нам необходимо действие Over. Как только мы наведем на кнопку должно происходить действие Over.

Перейдем на позицию Over и кликнем правой кнопкой мыши по отрезку слоя. Выберем 'Insert keyframe' тем самым добавим ключевой кадр. Теперь находясь на текущем ключевом кадре кликните по кнопке (Не по тексту! Если не получается выделить кнопку, то снимите выделение с объекта и выделите кнопку по новой) после чего вам должны быть доступны настройки стилизации текущего объекта(кнопки).

Adobe animate урок - 1. Как создать html5 баннер

Кликнув по заливке, измените прозрачность заливки на 85%.

Теперь перейдите в меню: Control -> Test и протестируйте работу html5 баннера.Если все сделали правильно , то при наведении на кнопку в браузере у вас изменится прозрачность.

Для того чтобы на кнопку навесить определенное событие необходимо выбрать слой Actions и перейти в меню Window -> Actions

Adobe animate урок - 1. Как создать html5 баннер

Перед вами откроется редактор кода

Выделите слой button и в редакторе кода кликните по значку <> (Code snipets)

Далее не снимая выделения со слоя button выберите действие изображенное на картинке:

Adobe animate урок - 1. Как создать html5 баннер

Вылезет окно с предупреждением. Не обращайте внимания на него и нажмите 'OK'

В результате на button навесится событие:

Adobe animate урок - 1. Как создать html5 баннер

Измените адрес с http://www.adobe.com на любой другой и Запустите: Control -> Test для тестирования в браузере.

File -> Publish settings - Для экспорта html5 баннера.

Оставляйте ваши комментарии: нужно ли делать подробный урок по работе с анимацией?

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *