Технические требования

  1. Формат
    • AdSmart — 100% (500 минимум) х 240 пикселей
    • AdSmart Premium — 100% (500 минимум) х 480 пикселей
    • AdSmart Mobile — 300 х 240 пикселей
  2. Формат файла готового проекта — zip архив
  3. Максимальный размер архива и каждого файла внутри него:
    • 300Кб;
    • 1Мб для видео файлов
  4. Не тянущиеся баннеры к размещению не принимаются
  5. Наличие рамки в баннере обязательно

Сроки

Для гарантированного старта рекламной кампании в сроки указанные при бронировании, необходимо предоставить рекламные материалы за 3 рабочих дня до намеченного старта.

Рекомендации

AdSmart – очень эффектный и крупный формат. Но, к сожалению, его потенциал часто не используется на 100%. Следуя простым правилам, вы сможете подготовить эффективные баннеры, производящие максимальное впечатление на потенциальных клиентов

Подготовка баннера

1. Требования к HTML коду (для разработчиков кода)

Подготовьте ваш проект, соблюдая следующие требования:

  1. Максимально допустимое количество символов в HTML коде — 65 000;
  2. JavaScript и CSS предпочтительнее размещать внутри HTML кода баннера;
    Если итоговый HTML код превышает максимально допустимое количество символов, то необходимо уменьшить код за счет вынесения JavaScript и CSS в отдельные файлы:
    сохраните js и css код в отдельные файлы с расширением .js или .css;
  3. В проекте может находиться только один файл с расширением .html;
  4. Максимально допустимое количество файлов в проекте — 50;
  5. Разрешенные типы файлов в проекте: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm;
  6. Максимальный размер архива и каждого файла внутри него:
    • 300Кб;
    • 1Мб для видео файлов
  7. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчёркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов;
  8. В названиях переменных и объектов нельзя использовать русские буквы.
    Исключение составляет только текст на баннере.

Пример переменной с ошибкой:

Пример корректной переменной:

9. Формат готового проекта — zip архив.

2. Adobe Animate CC

1. Подготовка редактора.

Для создания нового проекта в AdobeAnimate CC выберите проект «HTML5 Canvas».

2. Скачайте шаблон

— для Adobe Animate CC версии 15.2 и выше
— для Adobe Animate CC версии 15.1 и ниже.

Код данного шаблона можно брать за основу при создании креативов в редакторе.
Для того, чтобы применить шаблон к проекту в настройках публикации выберите «Advanced Publish Settings -> Import New…».
Шаблон содержит скрипт adfox_HTML5.js и набор параметров для корректной работы переходов и подсчета событий:
%reference%, %user1%, %eventN%, где N — номер события от 1 до 30.

3. Обработка клика.

1. Одна кнопка перехода

Чтобы вся область баннера была кликабельна и имела одну ссылку для перехода, добавьте в первом кадре анимации код:

2. Несколько кнопок перехода

Чтобы добавить несколько кнопок для перехода с разными ссылками, то добавьте в верхнем слое анимации основную кнопку для клика по баннеру, присвойте кнопке имя экземпляра (Instance Name) и пропишите на кнопке код:

Добавьте остальные кнопки, при кликах на которые пользователь переводится на разные страницы рекламируемого сайта.
Разместите несколько кнопок в верхнем слое над определенными частями анимации, присвойте кнопкам имена экземпляра (Instance Name) и пропишите для каждой кнопки код:

где n — номер события от 1 до 30, которое должно быть вызвано.

3. Если необходимо вызвать событие из анимации без перехода используйте следующий код:

где mouseover — событие javascript, n — номер события от 1 до 30, которое должно быть вызвано.

4. Особенность создания цикличной анимации

В случае создания баннеров с цикличной анимацией в Animate CC (установлена галка «Временная шкала цикла»(«Loop Timeline») в настройках публикации), в коде вызова событий ADFOX добавьте код:

Использование прозрачных кнопок.

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

Кнопки в Animate это символы, которые содержат четыре кадра. Вы можете оставить первые три пустыми и заполнить только последний «Клик» («Hit»), добавив в него содержимое (графический элемент) через Вставка > Временная шкала > Ключевой кадр ( Insert > Timeline > Keyframe).

Содержимое кадра «Клик» (Hit) является невидимым при этом оно определяет ту область кнопки, которая реагирует на клик. Добавить содержимое (графический элемент) на этот кадр можно через Вставка > Временная шкала > Ключевой кадр ( Insert > Timeline > Keyframe). Если остальные кадры остаются пустым или невидимыми, кнопка в рабочей области выглядит прозрачно-голубой и имеет форму того содержимого, которое содержится в следующем в кадре «Клик» (Hit). При публикации проекта прозрачно-голубая область видна не будет.

Особенность реализации тянущегося (резинового) баннера.

Чтобы баннер тянулся по ширине контейнера, в котором он будет находится на сайте, произведите настройки: Выберите File > Publish Settings.
В табе Basic, выберите Make Responsive > Width, Height или Both.
Выберите Scale to fill visible area для просмотра вывода в полноэкранном режиме.
При выборе «Fit in view» контент будет масштабироваться вплоть до заполнения всего доступного места на экране, при этом соотношение сторон сохраняется. Так что если Максимальная ширина уже достигнута, то может остаться незаполненной область по высоте экрана и наоборот.

Если не удается прийти к желаемому результату с помощью настроек программы, используйте скрипты.
Приводим примеры кодов:

Скачать код для масштабирования с учетом соотношения сторон.
Скачать код для масштабирования без учета соотношения сторон.
Скачать код для позиционирования элементов, где an0..an4 — это Instance Name элементов.

Пример готового проекта в Adobe Animate CC, исходный файл

5. Публикация проекта

При публикации проекта используйте подходящий шаблон из пункта 2 AdobeAnimate_Adfox_[template].html.
После публикации проекта, он должен быть архивирован в формат .zip, после чего добавлен в ADFOX через шаблон «HTML5Creative».

2. Google Web Designer

1. Подготовка редактора

Скачайте шаблон баннера для Google Web Designer.

Код данного баннера можно брать за основу при создании креативов в редакторе.

Шаблон содержит скрипт adfox_HTML5.js и набор параметров для корректной работы переходов и подсчета событий:
%reference%, %user1%, %eventN%, где N — номер события от 1 до 30.

2. Обработка клика.

Все события назначаются конкретным элементам анимации через вкладку «События».
Для перехода по выбранному элементу необходимо выбрать событие click, затем Пользовательское действие.

Во вкладке «Собственный код» укажите вызов функции клика.

1. Если используется одна кнопка перехода:

2. Если кнопок перехода несколько:

где n — номер события, которое должно быть вызвано.

3. Особенность реализации тянущегося (резинового) баннера

Чтобы баннер тянулся по ширине контейнера, в котором он будет находится на сайте, на панели Свойства для положения и размеров укажите проценты вместо пикселей.

Также используйте опции «Выровнять по контейнеру» и «Резиновый макет» на верхней панели инструментов.
Если перед использованием каких-либо инструментов выравнивания включить «Резиновый макет», то при изменении размера родительского контейнера все элементы будут выравниваться относительно друг друга и относительно размеров контейнера.
При этом можно одновременно использовать как относительные размеры элементов в процентах, так и абсолютные – в пикселях.

Пример готового проекта в Google Web Designer, исходный файл.

4. Публикация проекта

Проект должен быть опубликован со следующими настройками:

После публикации проекта, он должен быть архивирован в формат .zip, после чего добавлен в ADFOX через шаблон «HTML5Creative».

Пример баннера

500px
600px
700px
800px
900px
100%