В этой статье будет описан способ подготовить html5 баннер, сделанный в Adobe Animate, по техническим требованиям (далее ТТ) Яндекса.
Что нам понадобится:
1. Анимированный баннер, собранный в Adobe Animate СС2. ТТ Яндекса3. Блокнот или программа для правки html кода (в моем случае это Notepad++)
После того как вся анимация готова, важно баннер корректно опубликовать. Ниже будут скриншоты с настройками публикации «Publish Settings» в Adobe Animate.
На что здесь важно обратить внимание: во вкладке «Basic» необходимо проверить что название баннера не должно содержит русских букв, только цифры и латиницу, снята галочка напротив «Export document as texture» и сняты выделения с папок.
На вкладке «HTML/JS» необходимо поставить галочку напротив Hosted Libraries, для того, чтобы служебные библиотеки, к которым обращается баннер располагались на сервере Adobe, а не внутри папки с баннером. Данный тип обращения экономит вес баннера, но некоторые площадки, например Mail, его запрещают. Яндекс не запрещает, поэтому ставим галочку.
На вкладке «Image Settings» сверяем настройки изображений и нажимаем «Publish».
В папке, куда мы опубликовали баннер, получается следующая картина:
Файл с расширением .fla - это исходник баннера, он нужен для работы с баннером, а вот отправлять на площадку его не нужно. Все остальные файлы как раз представляют собой готовый баннер. Если все сделано правильно, при двойном нажатии на файл с расширением .html ваш баннер должен открыться и проигрываться во вкладке браузера.
Теперь нужно произвести манипуляции в файле .html. Нажимаем на него правой кнопкой мыши и открываем код в любом удобном редакторе (я использую Notepad).
Согласно ТТ Яндекс, в коде баннера необходимо прописать метатеги с размерами баннера (высота и ширина должны соответствовать параметрам вашего баннера, если у вас 300 на 600, то и в коде нужно указать именно эти значения)
Cделать это можно сразу после открывающего тега
Теперь говорим баннеру что при клике пользователя он должен открывать ссылку в новой вкладке через переменную click_area:
<a id='click_area' href='#' target='_blank'> ... </a>
и дополняем скриптом:
<script></br>document.getElementById('click_area').href = yandexHTML5BannerApi.getClickURLNum(1);</br></script>
Сделать это все можно после открывающего тега
Сохраняем изменения, закрываем Notepad и возвращаемся в папку с баннером. Все файлы, кроме .fla пакуем в zip архив и проверяем, чтобы вес архива был не более 150 kb, что соответствует требованиям Яндекса.
В случае, если у вас превышен вес архива, можно воспользоваться сайтом https:/tinypng.com/ для оптимизации используемых в баннере картинок. Нужно прогнать изображения через tinypng и заменить изображения на оптимизированные в той же папке, с теми же названиями, а после запаковать в архив.
Далее можно перейти на сайт bannersbox и убедиться что баннер подготовлен под ТТ Яндекса верно. Переносим наш zip архив в поле загрузки и получаем результат:
Теперь баннер можно смело отправлять на модерацию в Яндекс :)