Технические требования
- Формат
- AdSmart – 100% (500 минимум) х 240 пикселей
- AdSmart Premium – 100% (500 минимум) х 480 пикселей
- AdSmart Mobile – 100% (min.300) x 240px
- Формат файла готового проекта — zip архив
- Максимальный размер архива и каждого файла внутри него:
- 300Кб;
- 1Мб для видео файлов
- Не тянущиеся баннеры к размещению не принимаются
- Наличие рамки в баннере обязательно
Сроки
Рекомендации
Подготовка баннера
1. Требования к HTML коду (для разработчиков кода)
- Максимально допустимое количество символов в HTML коде — 65 000;
- JavaScript и CSS предпочтительнее размещать внутри HTML кода баннера;
Если итоговый HTML код превышает максимально допустимое количество символов, то необходимо уменьшить код за счет вынесения JavaScript и CSS в отдельные файлы:
сохраните js и css код в отдельные файлы с расширением .js или .css; - В проекте может находиться только один файл с расширением .html;
- Максимально допустимое количество файлов в проекте — 50;
- Разрешенные типы файлов в проекте: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm;
- Максимальный размер архива и каждого файла внутри него:
- 300Кб;
- 1Мб для видео файлов
- Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчёркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов;
- В названиях переменных и объектов нельзя использовать русские буквы.
Исключение составляет только текст на баннере. - Формат готового проекта — zip архив.
2. Adobe Animate CC — Баннер с одной кнопкой
1. Скачайте шаблон для баннера с одной кликабельной областью (кнопкой).
2. Создайте в Adobe Animate проект HTML5 Canvas (или откройте уже существующий)
3. Откройте параметры публикации File → Publish Settings и подключите шаблон из пункта 1.
4. Опубликуйте проект, выбрав нужную директорию
5. Публикация проекта
3. Adobe Animate CC — Баннер с несколькими кнопками
1. Скачайте шаблон для баннера с одной кликабельной областью (кнопкой).
2. Создайте в Adobe Animate проект HTML5 Canvas (или откройте уже существующий)
3. При добавлении кнопок (buttons) или вложенных в сцену клипов (movie clips) важно задавать им instance name, чтобы потом можно было добавить клик к нужным кнопкам. Рекомендуем использовать названия button1 - button9.
4. Добавьте в проект слой Actions (в него будем добавлять код для кнопок)
5. Откройте окно для написания кода
6. Далее модифицируйте код и пропишите его в слое Actions
window.buttons.push(
//Пропишите через запятую пути кнопок, добавив вначале this
//Конец места для кнопок
);
setAdfox();
Если кнопка находится в главной сцене, то пропишите её instance name сразу после this, например
this.button1
Если кнопка находится внутри вложенной сцены, то после this пропишите сначала instance name сцены, а потом уже instance name кнопки:
this.scene_instance_name.button2
Пример итогового кода в слое Actions:
window.buttons.push(
//Пропишите через запятую пути кнопок, добавив вначале this
this.button1, this.scene_instance_name.button2 //Конец места для кнопок
);
setAdfox();
7. Первая кнопка в строке кода будет вызывать первую ссылку из ADFOX, вторая — вторую и так далее.
8. Откройте параметры публикации и подключите шаблон из первого пункта и опубликуйте проект, выбрав нужную директорию.
8. Публикация проекта
4. Google Web Designer
1. Подготовка редактора
Код данного баннера можно брать за основу при создании креативов в редакторе.
%reference%, %user1%, %eventN%, где N — номер события от 1 до 30.
2. Обработка клика.
Добавьте его и выберите событие Интерактивная область → Касание/нажатие (или “Tap Area > Touch/Click” в английской версии).
2.1 Если используется одна кнопка перехода:
callClick();
2.2 Если кнопок перехода несколько:
callClick(n);
где n — номер события, которое должно быть вызвано.
2.3 Если необходимо вызвать событие из анимации без перехода используйте следующий код:
callEvent(n);
где n — номер события, которое должно быть вызвано.
3. Особенность реализации тянущегося (резинового) баннера
Также используйте опции “Выровнять по контейнеру” и “Резиновый макет” на верхней панели инструментов.
Если перед использованием каких-либо инструментов выравнивания включить “Резиновый макет”, то при изменении размера родительского контейнера все элементы будут выравниваться относительно друг друга и относительно размеров контейнера.
При этом можно одновременно использовать как относительные размеры элементов в процентах, так и абсолютные – в пикселях.
Пример готового проекта в Google Web Designer, исходный файл.
4. Публикация проекта
После публикации проекта, он должен быть архивирован в формат .zip, после чего добавлен в ADFOX через шаблон “HTML5Creative”.