Требования к баннерам

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

При разработке HTML кода можно использовать редакторы:

• Adobe Animate CC;
• Google Web Designer;
• Adobe Edge Animate CC.

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

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

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, avi, swf;
6. Максимальный размер каждого файла (действует также для файлов внутри архива):
   — 300Кб;
   — 1Мб для видео файлов.
7. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчёркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов;
8. В названиях переменных и объектов нельзя использовать русские буквы.
   Исключение составляет только текст на баннере.
9. Переменная, в которой будет храниться ссылка на рекламируемый сайт, должна содержать параметр `%reference%` вместо прямой ссылки;

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. Обработка клика.

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

canvas.style.cursor = "pointer"; canvas.addEventListener("click", function() { window.callClick(); }); 

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

this.btnMain.addEventListener("click", function (e) { var t = e.nativeEvent; if (t.which == 1 || t.button == 0) { window.callClick(); }; }); 

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

this.btnLeft.addEventListener("click", function (e) { var t = e.nativeEvent; if (t.which == 1 || t.button == 0) { window.callClick(n); }; }); 

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

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

this.btnText.addEventListener("mouseover", function() { window.callEvent(n); }); 

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

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

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

if (typeof(this.stopCycle) == "undefined") { 
this.btnMain.addEventListener("click", function (e) { 
var t = e.nativeEvent; if (t.which == 1 || t.button == 0) { window.callClick(); }; }); this.stopCycle = true; } 

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

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

Кнопки в 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. Публикация проекта.

При публикации проекта выберите шаблон AdobeAnimate_Adfox_[template].html.

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

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

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

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

Все события назначаются конкретным элементам анимации через вкладку «События».

Для вызова действий используется компонент «Интерактивная область».
Добавьте его и выберите событие «Интерактивная область» — «Касание/нажатие» (или «Tap Area > Touch/Click» в английской версии).

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

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

callClick(); 

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

callClick(n); 

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

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

callEvent(n); 

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

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

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

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

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

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

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

1. Скачайте шаблон баннера для Adobe Edge CC.

Для начала работы запустите файл с расширением .an из архива.

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

Все события назначаются конкретным элементам анимации через вкладку «Code».

Для перехода по выбранному элементу необходимо выбрать событие click и прописать вызов функции клика.

Кнопкам необходимо присвоить имя экземпляра (Instance Name), например: btnMain, btnRight.

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

callClick(); 

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

callClick(n); 

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

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

callEvent(n); 

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

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

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

Есть также кнопки Scale Size и Scale Position для элементов на панели Position and Size

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

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

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

To prepare HTML creatives for publication on our website it is important to follow the requirements to inserting the code which processes click on the banner and counts banner events.

When developing HTML code the following editors can be used:

• Adobe Animate CC;
• Google Web Designer;
• Adobe Edge Animate CC.

Example of the finished project developed in Adobe Animate CC, source file.
Example of the finished project developed in Google Web Designer, source file.
Example of the finished project developed in Adobe Edge Animate CC, source file.

Prepare your project subject to the following requirements:

1. Maximum permissible amount of symbols in HTML code — 65 000;
2. JavaScript and CSS it is better to place in HTML code of the banner;
3. If the finished HTML code contains maximum permissible amount of symbols, the code should be reduced by placing JavaScript and CSS in separate files: save js and css code in separate files with.js or .css extension;
4. The project should contain only one file with.html extension;
5. Maximum permissible amount of files in the project — 50;
6. Permissible types of files in the project: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
7. Maximum permissible size of the file (also for files of the archive):
   — 300Kb;
   — 1Mb for video files.
8. Names of files should contain only English figures or letters and underscore character. Application of Russian letters, spaces, quotation marks and special symbols are not allowed in names of files;
9. Russian letters are not allowed in names of variables and objects.
   The exception is provided only for the banner text.
10. The variable with link to the advertised website should contain `%reference%` parameter instead of the direct link;

1. Preparation of the editor.

To create a new project in AdobeAnimate CC, select the project «HTML5 Canvas».

2. Download the template:
— For Adobe Animate CC version 15.2 and higher;
— For Adobe Animate CC versionr 15.1 and higher.

The code for this template can be taken as a basis for making images in the editor.

In order to apply the template to the project in the publishing settings, select «Advanced Publish Settings -> Import New…».

The template contains the adfox_HTML5.js script and a set of parameters for the correct operation of the transitions and counting events:
%reference%, %user1%, %eventN%, where N is the event number from 1 to 30.

3. Processing the click.

3.1 To ensure that the entire banner area is clickable and have one link for the transition, add the code in the first frame of the animation:

canvas.style.cursor = "pointer"; canvas.addEventListener("click", function() { window.callClick(); }); 

3.2 To add several buttons to go with different links, add the main button to click on the banner in the top layer of the animation, give the button the name of the Instance Name and write the code on the button:

this.btnMain.addEventListener("click", function (e) { var t = e.nativeEvent; if (t.which == 1 || t.button == 0) { window.callClick(); }; }); 

Add remaining buttons, when clicking on which the user is transferred to different pages of the advertised site.
Place a few buttons in the top layer above certain parts of the animation, assign the buttons the names of the Instance Name and write the code for each button:

this.btnLeft.addEventListener("click", function (e) { var t = e.nativeEvent; if (t.which == 1 || t.button == 0) { window.callClick(n); }; }); 

where n is the event number from 1 to 30, which must be called.

3.3 If you want to trigger an event from an animation without a transition, use the following code:

this.btnText.addEventListener("mouseover", function() { window.callEvent(n); }); 

where mouseover is a javascript event, n is the event number from 1 to 30, which must be called.

The feature of creating a cyclic animation

In case of creation of banners with cyclic animation in Animate CC (the «Loop Timeline» checkbox is set in the publication settings), in the ADFOX event call code add the code:

if (typeof(this.stopCycle) == "undefined") { 
this.btnMain.addEventListener("click", function (e) { 
var t = e.nativeEvent; if (t.which == 1 || t.button == 0) { window.callClick(); }; }); this.stopCycle = true; } 

Use the transparent buttons..

Transparent buttons can be used, for example, if you want to make the whole area of ​​the banner clickable or only a part. For them, as well as for conventional buttons, the code for the call of the transition or event must be added.

Buttons in Animate are symbols that contain four frames. You can leave the first three empty and fill only the last «Click» (“Hit”) by adding the content (graphic element) to it (Insert> Timeline> Keyframe).

The content of the «Click» (“Hit”) frame is invisible while it determines the area of ​​the button that responds to the click. Add the content (graphic element) to this frame using (Insert> Timeline> Keyframe). If the remaining frames remain blank or invisible, the button in the workspace looks transparent blue and has the form of the content that is contained in the next “Click” (Hit). When you publish a project, the transparent blue area will not be visible.

A feature of the realization of a stretching (rubber) banner.

To make the banner extend along the width of the container in which it will be located on the site, make the settings:
Select File > Publish Settings.
In the Basic tab, select Make Responsive > Width, Height or Both.
Select Scale to fill visible area to view the output in full screen mode.
If you select «Fit in view», the content will be scaled up to fill the entire available space on the screen, while the aspect ratio is preserved. So if the maximum width has already been reached, then the area may remain blank in the height of the screen and vice versa.

Если не удается прийти к желаемому результату с помощью настроек программы, используйте скрипты.
Приводим примеры кодов:
Download the code for scaling with regard to the aspect ratio.
Download the code for scaling without regard to the aspect ratio.
Download the code for positioning the elements where an0..an4 is the Instance Name of the elements.

An example of project in Adobe Animate CC, source file

5. Publication of the project.

To create a new project in AdobeAnimate CC, select the project «HTML5 Canvas». AdobeAnimate_Adfox_[template].html.

1. Download banner template or Google Web Designer..

Code of this banner can be used as basis when developing creative in the editor.

The template contains adfox_HTML5.js script and set of parameters for correct operation of linking and calculation of events:
%reference%, %user1%, %eventN%, where N — event number from 1 to 30.

2. Click processing.

All events are assigned to definite animation elements through “Events” tab

“Interactive area” component is used for calling of actions.
Add it and select “Interactive area” event — “Touch/click” (or “Tap Area > Touch/Click” in English version).

In “Own code” tab specify call click function.

2.1 If one click button is used:

callClick(); 

2.2 If several click buttons are used:

callClick(n); 

where n — number of the event to be called.
2.3 When it is necessary to call the event from animation without link the following code should be used:

callEvent(n); 

where n — number of the event to be called.

Peculiarity of liquid banner implementation.

To make the banner stretch across the container width in which it will be placed on a website, it is necessary to specify percent instead of pixels on Properties bar.

Also use «Align to the container» and «Liquid layout» options on top toolbar.
If before application of any alignment instruments “Liquid layout” is activated, upon change of parent container size all elements will be aligned relative to each other and relative to the container sizes.
In this case it is possible to use simultaneously both relative size of the elements in percentage points and full size – in pixels.

Example of the finished project developed in Google Web Designer, source file..

4. Project publication.

The project should be published with the following settings

1.  Download banner template for Adobe Edge CC.

To start working, start the file with the .an extension from the archive.

2. Processing the click.

All events are assigned to specific animation elements through the «Code» tab.

To navigate through the selected item, you must select a click event and register the call to the click function.

The buttons need to be assigned an Instance Name, for example (Instance Name), например: btnMain, btnRight.

2.1 If you use one jump button:

callClick(); 

2.2 If there are several jump buttons:

callClick(n); 

where n — is the number of the event to be triggered.

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

callEvent(n); 

where n — is the event number, which should be called.

A feature of the realization of a stretching (rubber) banner.

To make the banner stretch across the width of the container in which it will be on the site, you need to specify percentages instead of pixels for the banner in the editor on the Properties panel for position and size.

There are also Scale Size and Scale Position buttons for items in the Position and Size panel

An example of a finished project in Adobe Edge Animate CC, the source file.

4. Publication of the project.

You should publish the project with these settings: