HTML5 Creative

"Русская версия"

Description

It is very important to follow the instruction on adding click and events' codes inside the banner. You may use the following software to delevop AdFox-compatible HTML5 Banners:
- Adobe Animate CC;
- Google Web Designer;
- Adobe Edge Animate CC.

Example

Example page
Example of a scalable banner

Example made in Adobe Animate CC, project file;

Example made in Google Web Designer, project file

Example made in Adobe Edge Animate CC, project file

Requirements for HTML code

Prepare the project following these requirements:

1. It might be no more than 65 000 symbols in code.

2. More preferable is to place JavaScript and CSS into HTML code.

If your final code consists more than acceptable quantity of symbols, it might be reduced by using JavaScript and CSS in standalone files:
- save js and css in standalone files (not more than 5 files) with .js and .css extensions;

3. Only one .html file may be inside the project;

4. Maximum number of files — 50;

5. Allowed types of files: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf, otf, ttf, abf, acfm, gdr, etx, eot, fnt, fon, mf, ttc, woff;

6. Maximum size for files:
- 300Kb;
- 1Mb for video files.

7. File names may only contain letters of English alphabet lower and upper case, numbers and ‘_’. All the other symbols such as russian letters, space symbol and ‘“’ , ’”’, ‘-’ are not allowed.

8. Variables' and objects' names can not contain any of cyrillic symbols.

9. Finished project should be packed inside zip archive.

Adobe Animate СС

1. Software preparation.

For new project in Adobe Animate CC choose "HTML5 Canvas" project.

2. Download template:
- for Adobe Animate CC version 16.0 and above;
- for Adobe Animate CC version 15.2 and above;
- for Adobe Animate CC version 15.1 and below.

Code from this template may be used as basis for preparing banners in Animate.

To apply the template choose "Advanced Publish Settings -> Import New…".

Template contain adfox_HTML5.js script and special parameters for clicks and events handling:
%reference%, %userM%, %eventN%, where M — variable number from 1 to 25, N — event number from 1 to 30.

3. Click handling.

3.1 To the entire area of the banner is clickable and had been one of transition for the link, add the first frame of the animation code:

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

3.2 Create a transparent button over the entire animation, give the button an Instance Name(btnMain), then place this code inside it:

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

If there are several buttons with different links then place necessary amount of buttons in the top layer, give it Instance Names(btnLeft) and add the following code to the every button:

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

where n — event number.

3.3 If it is necessary to call the event from animation without click use following code:

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

where mouseover — javascript event, n — event number.

Cycled animation features

If you are using Animate to prepare cycled animation ("Loop Timeline" is on in publish settings), you should use this code for clicks and events:

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;
}

If there are several buttons in the cyclic animation banner, then in the ADFOX event call code, add the following 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.btnLeft.addEventListener("click", function (e) {
            var t = e.nativeEvent;
            if (t.which == 1 || t.button == 0) {
                window.callClick(n);
            };
        });
    this.stopCycle = true;
}

Using trasparent buttons

You may use the trasparent button to make all banner or just part of it clickable. You should also add aforementioned code for it.

Buttons in Animate are symbols that contain 4 frames. You may leave first three of it empty and fill only the last "Hit" and add inside it graphic element by Insert > Timeline > Keyframe.

Content of the "Hit" frame is invisible but it define the clickable area of the button. All other frames should be left empty or invisible. The button take transparent blue color and the shape of the object from "Hit" frame. After publishing the project transparent blue area will be invisible.

4. Publishing the project.

Important! In browser preview mode (Ctrl-Enter | Cmd-Enter) random values like ?1468231208369 are added to the files' names inside the project. These values should be deleted before adding project in AdFox.
The easiest way is to publish project as File > Publish Settings > Publish (Shift-Ctrl-F12 | Shift-Cmd-F12).

Use the publish template AdobeAnimate_Adfox_[template].html.

It is important to give the information about clicks and events numbers to the client.

After publishing the project should be packed inside .zip archive and added in AdFox using "HTML5Creative" template.

Google Web Designer

1. Download banner template for Google Web Designer.

Code from this template may be used as basis for preparing banners in GWD.

Template contain adfox_HTML5.js script and special parameters for clicks and events handling:
%reference%, %userM%, %eventN%, where M — variable number from 1 to 25, N — event number from 1 to 30.

2. Click handling.

All events are appointed to the animation's elements by "Events" tab.

To add click button you should choose click, and then Custom -> Add custom action.

In Custom Code section put the click function code.

2.1 If there is only one click button:

callClick();

2.2 If there are several click buttons:

callClick(n);

where n — the number of event that should be triggered.

2.3 If you need to trigger event without opening the link use following code:

callEvent(n);

where n — the number of event that should be triggered.

3. Project publishing.

Project should be published with the following settings:

It is important to give the information about clicks and events numbers to the client.

After publishing the project should be packed inside .zip archive and added in AdFox using "HTML5Creative" template.

Adobe Edge Animate CC

1. Download template for Adobe Edge CC.

Code from this template may be used as basis for preparing banners in Edge.

2. Click handling.

All events are appointed to the animation's elements by "Code" tab

To add link to the element you should choose click event and put click function code inside.

You should appoint Instance Name for buttons, for example: btnMain, btnRight.

2.1 If there is only one click button:

callClick();

2.2 If there are several click buttons:

callClick(n);

where n — the number of event that should be triggered.

2.3 If you need to trigger event without opening the link use following code:

callEvent(n);

where n — the number of event that should be triggered.

3. Project publishing.

You should publish the project with following settings:

After publishing the project should be packed inside .zip archive and added in AdFox using "HTML5Creative" template.

Adding banner in AdFox

In order to add banner in adfox choose the necessary banner type and template "HTML5Creative".
Next upload you project to field "HTML5 archive", the field "HTML5 code" should be left empty. It will be filled with code from .html file of your project.

Banner parameters:

  1. Архив с HTML5 креативом - field for uploading .zip file with project;

  2. HTML5 код креатива - the content of .html file of project (will be filled automatically);

  3. URL перехода - link to the advertisers site;

  4. "TARGET" ссылки - used to specify the location where linked document is opened:
    "_top" - in the current window;
    "_blank" - opens the linked document in a new tab or window.

  5. Ссылка на промерочный пиксель - link to a tracking pixel if you need to count views at another ad serving system.;

  6. Картинка - заглушка (URL) - the link to the image;

  7. Ширина креатива (px|100%) - creative's width;

  8. Высота креатива (px|100%) - creative's height;

  9. Стили для блока баннера - specify styles for div block, in which code is. Format of styles is inline CSS. For example, to position banner in center: margin: 0 auto;

  10. Callback функция - the name of the website's function which will be called after successful uploading of the banner;