Формат HTML5 может быть полезным для создания баннеров и мини-игр, встраиваемых в сайты. В этой статье я приведу примеры создания HTML5 в Adobe Animate для различных прикладных задач. Я постараюсь, чтобы эта статья была как бы продолжением статьи про создание GIF'ок и как можно меньше пересекалась ней.
Анимированный баннер
Баннер - это короткая анимация, которая обычно ставится на паузу или зациклена, содержит текст и при клике на неё открывается страница сайта. Создание документа HTML5 отличается от обычного документа в Animate доступными параметрами публикации (и ещё парой ограничений, о них скажу дальше). Я сразу включаю галочки "Центрировать рабочую область" и "Сделать адаптивной" в параметрах публикации для того, чтобы баннер вёл себя так как задумал программист при изменении рабочей области (например перевернули телефон).
Для примера прорекламируем замену моторного масла и клик будет уводить на страницу оформления заявки. В реальном проекте лучше показать всплывающее окно на запись прям тут, потому что лишний клик "охлаждает" желание клиента сделать требуемое действие, но для примера сделаем так. Создадим анимацию: медленно сдвигаем фон, а эффект свечения (чёрный цвет) вокруг надписи "мы меняем масло БЕСПЛАТНО!" заставим сгущаться и разрастаться, намекая на то что масло рано или поздно испачкается.
Действие перехода к веб-странице (как и другие часто используемые действия) можно вставить из "фрагментов кода" (см слайд). В последний кадр добавим действие stop(); чтобы остановить ролик. Это можно сделать также через фрагменты кода.
Действия из фрагментов кода можно применять только к именованным объектам, поэтому можно создать любой ролик с именем, а затем скопировать код в глобальный сценарий убрав имя ролика после this.
this.addEventListener("click", fl_ClickToGoToWebPage);
function fl_ClickToGoToWebPage() {
window.open("http://страница_вашего_сайта", "_blank");
}
В Adobe Animate делается интерактив, который затем можно поместить куда угодно. Например я бы разместил этот баннер с помощью тега iframe:
<iframe src="файл_публикаци.html" width="728" height="90" align="right"> Ваш браузер не поддерживает фреймы! </iframe>
Карусель
Карусель может понадобится, чтобы показать несколько баннеров в шапке сайта (например с акциями) или фотографий (например вариантов интерьеров). Вполне может что легче взять готовый вариант из интернета и настроить под себя. Но мы сделаем карусель как один из примеров применения кнопки, плавно вытекающий из предыдущего применения картинки (баннера).
Сделаем из предыдущего примера именованный фрагмент ролика. И сделаем ещё один баннер в фрагменте ролика. Разместим их в двух первых кадрах на сцене. И каждому из этих кадров назначим действие this.stop();. В новом слое выше них разместим кнопки для перехода между ними. В конец каждого ролика-баннера вместо stop(); укажем перейти на следующий кадр основной сцены (this.parent.gotoAndStop(1);).
На кнопки назначим действие перехода на нужный кадр (без слова parent). Кнопка имеет 4 положения: просто показана, наведена мышка, мышка нажата, мышка отжата. Это может оказаться полезным при создании интерактива (например подсвечивать кружочек при наведении мышки).
Плагин на сайт
Сначала я сделал плагин для Mozilla Firefox в Adobe Animate. Но оказалось, что запакованные и сделанные через всякие фреймворки файлы HTML не проходят проверку при публикации, так как в Mozilla бояться спрятанного в них вредоносного кода. Так что применение плагинов может быть ограничено только одним сайтом. Для примера сделаем окошко расценки артикула из на сайте автозапчастей, которое зафиксировано относительно экрана. Как его крепить не особо важно - это делается на стороне сайта, например так:
<style>
.f_ontop{
top: 0;
left: 0;
position: fixed !important;
bottom: 0px !important;
right: 0px !important;
z-index: 99999 !important;}
</style>
<div class="f_ontop">
и сюда код из файла публикации
</div>
Мой плагин - это поле ввода артикула запчасти, которое по нажатию кнопки ENTER на клавиатуре открывает страницу покупки на сайте. Чаще всего запрос пишется прям в адресной строке в виде: сайт/search/?pcode=артикул.
Вставим из компонент TextInput. Сделаем необходимый внешний вид окошка (на слайдах видно как это делается).
______________________
Если тема будет кому-то интересна, то напишите в комментариях и я выложу как делать более сложные интерактивные элементы: форму авторизации, капчу и мини-игру
