-
Главная / Список статей / Adobe Animate. Из чего состоит экспортный .html файл
Adobe Animate. Из чего состоит экспортный .html файл и в каких местах его можно наполнять скриптами и тегами?
Данная статья будет посвящена обзору экспортного файла для HTML баннера. Здесь будут описаны приемы, которыми я пользуюсь при разработке баннеров и оставлены заметки, которые в будущем помогут заполнять экспортный файл под любые технические требования площадок.
Начать стоит с того, что у площадок есть технические требования к организации структуры внутри папки. Где то можно размещать файлы в папке, где то нельзя, где то можно делать множество графических файлов, а где то нет. Для себя я вывел набор определенных параметров, которые фактически подходят везде.При настройке файла я всегда выставляю один и тот же набор параметров:
На втором изображении мы указываем программе, что необходимо раздельно экспортировать PNG и JPG изображения. Причем, PNG должно экспортироваться с поддержкой alpha канала, а JPG должно экспортироваться со 100% качества, те без сжатия.
Инструменты сжатия изображений применяются на конечном этапе, во время оптимизации изображения.
Особо стоит обратить внимание на то, что галочку «Export document as texture» рекомендуется снимать, ввиду того, что она достаточно часто вызывает ошибки у баннера в разных браузерах. Вплоть до того, что баннер может не показываться.
Если вы все верно сделали, и отправили на экспорт файл, то в результате экспорта вы получите следующий набор файлов у баннера:
1. .html — файл, который запускает отображение баннера
2. .js — скрипт, который отвечает за наполнение файла контентом и анимацией
3. .png — графический файл содержащий все PNG файлы из баннера, объединенные в одно изображение, и поддерживающий alpha канал
4. .jpg — графический файл содержащий все JPG файлы из баннера, объединенные в одно изображение
Такой способ базовых настроек позволяет в 99% случаев верно передать площадке контент баннера и пройти модерацию.Теперь рассмотрим экспортный .html файл и разберемся из каких блоков он состоит, и какие его части мы можем наполнять и изменять.
Откроем файл .html и внимательно на него посмотрим:
Небольшое отклонение от темы.
У площадок существует небольшое количество вариантов изменения базового шаблона баннера под их технические требования. Всего их по факту 3:
1. Нужно вставить мета данные, комментарии или дополнительные скрипты в блок «head» баннера.
2. В редких случаях внести изменения в основной скрипт банера.
3. Добавить обработку клика или/и дополнительные скрипты в блок «body» баннера.В коде экспортного .html файла есть важные блоки кода, которые нужно знать. Выделил их красными прямоугольниками:
1. Область мета тегов. Сюда могут быть добавлены дополнительные мета теги, комментарии. К примеру, большинство площадок просит добавить мета-тег adsize, что говорит площадке о размере рекламного баннера (<meta name="ad.size" content="width=240,height=400">)
2. Область скриптов баннера. Здесь площадка может попросить включить скрипт анимации баннера прямо в тело баннера, или подключить дополнительные скрипты. К примеру, Rambler просит добавить скрипт <script src="https://dsp-rambler.ru/js/createjs/createjs-2015.11.26.min.js"></script>
3. Скрипт вызова, инициализации и настройки конфигурации баннера. Как правило, площадки не просят изменять данные скрипты, так как это может нарушить работу анимированного html баннера. Однако, бывают исключения, которые рассмотрим чуть позже.
4. Последний блок — функция canvas, которая вызывает баннер к отображению на веб странице.
Ввиду разнообразных технических требований, мы должны знать места в коде html баннера, при изменении которых не будет нарушена работоспособность баннера.
Эти места я пометил стрелочками. Давайте их рассмотрим:
Блок метатегов.
Как правило, здесь добавляются следующие данные:
Возможно добавить мета теги adsize, которые говорят баннерным системам о размере баннера. Как правило указывается в виде фиксированного размера баннера, либо в виде значения 100% для растяжек по ширине и высоте:
Так же в этот блок могут быть добавлены специальные комментарии, которые требуются площадкой. К примеру, для weborama.
Блок дополнительных скриптов в «head».
В этом блоке можно добавить или подгрузить дополнительные скрипты, которые требует площадка. К примеру, Rambler требует следующего наполнения:
Блок основных скриптов баннер, которые не стоит менять, если нет жесткого указания к этому.
Это основной блок инициализации, загрузки и конфигурации html баннера. С ним нужно быть предельно осторожным. Существует множество мест, куда можно добавлять дополнительные скрипты в этом блоке, однако, достаточно безопасным является место сразу после инициализации данных баннера. К примеру, площадка Adfox добавляет свои переменные именно тут.
Блок обработки клика и написания дополнительных скриптов в «body».
В этом блоке, как правило, производится настройка «клика» по баннеру. Существует достаточно много способов осуществить переход в баннере. Рассмотрим несколько из них.
К примеру, Яндекс просит делать переход через переменную средствами гиперссылки, а так же просит добавлять дополнительные скрипты.
А Weborama просит делать переход по средствам обработки события скрипта, который внесен в код баннера ранее.
А есть площадки, которые вообще не требуют никакой обработки клика.
Небольшое заключение.
Сейчас мы рассмотрели блоки экспортного файла для html баннера, и места, куда можно безопасно вносить изменения и быть уверенным, что баннер не сломается.
На самом деле, лично для меня эти изменения кода больше похожи на «программирование», нежели на разработку баннера. Сложно отрицать тот факт, что внося дополнительные скрипты, мета теги, комментарии в множество ресайзов одновременно, легко сделать опечатку, ошибку, помарку.
Разговаривая с другими баннермейкерами, я частенько задавал вопрос, а какой процент ошибок есть у вас в баннерах. И слышал достаточно странные ответы в виде цифр от 5 до 15 процентов, причем для ряда баннермейров и студий такие цифры являются нормой. Стоит ли озвучивать вообще мысль о том, что при таком количестве ошибок мы получаем достаточно большую потерю в финансах при отработке возвращенных баннеров?
Лично меня это не устраивает. И я стал искать способы как «минимизировать» любые потери всех участников работы над разработкой баннеров.
Самым верным решением стало использование пресетов. Это автоматическая генерация скриптов, необходимых площадки. Фактически я убираю для себя «возможность» допустить ошибку по невнимательности при старте разработки баннера. Но так как существует возможность прикрепить не верный пресет, то мне нужно было получить еще проверку на финише разработки. Таким образом и появился bannersbox.ru.
На текущий момент, я в 99.9% случаев отдаю верные материалы. И мои заказчики не тратят время на отработку ошибок.
