Screenglide HTML5

Description

Screenglide HTML5 — is an interactive HTML5 banner that expands in accordance with user actions (click, mouse over etc.) or automatically with content shift or content overlay.
In the banner you can implement the buttons with the transition to different pages of the advertiser's site.

You can add banner with this template in two different ways:
1. Using images;
2. Using HTML-creative. Be sure to use to use our technical requirements for one of the editors: Adobe Animate CC or Google Web Designer.

Banner features available when added to ADFOX:
- There are two types of auto expand available:
Auto expand — expand type that fires during initialization, with ability to define time after which the banner will collapse;
Session expand — banner will be expanded specified number of times individually for each user. - Ten options for the directions of banner expansion; - animation time settings for expansion and collapse.

Example

Screenglide example

Download:
Example of the published project in Adobe Animate CC format, source file.
Example of the published project in Google Web Designer format, source file.

HTML creative development

1. Check out HTML code prerequisites

  • Maximum HTML file size - 65 000 bytes.
  • It is preferable to place JavaScript and CSS inside creative's HTML. If resulting HTML code exceeds maximum allowed size, JavaScript and CSS have to be placed in separate files: - file size can not exceed 300kb;

    Example of using external JS and CSS files:

    <script type="text/javascript" src="LINK_TO_THE_FILE"></script>
    
    <link rel="stylesheet" type="text/css" href="LINK_TO_THE_FILE" />
    
    Relative paths are not allowed in HTML code

  • Only one HTML file is allowed
  • Maximum amount of files is 50
  • Only following filetypes are allowed: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
  • Maximum size of each file:
    - 300Kb;
    - 1Mb for video files.
  • Only numbers, letters, underscore and English alphabet characters are allowed in filenames.
  • Only zip files are allowed for uploading.

When resizing the canvas, its contents are cleared in webkit browsers, so if the creative code was created on its own without the help of editors like Adobe Animate, redraw the canvas after resizing it.

Image files requirements

It's recommended to use high resolution images. It will dramatically improve visual quality on high resolution devices, although will decrease download speed.

Also it's good practice to reduce image file size using special services. For example TinyPng.

SVG images are allowed. It's vector format, so it's lightweight and will fit any resolution.

Allowed image formats: png, gif, jpg, svg.
Maximum image filesize: 300Кb.

2. Choose the suitable instruction depending on editor that you use:

Adobe Animate CC

1. On different layers place two symbols that will correspond to the banner in the collapsed and expanded state. If you need the "close" button, then add it to the movie clip of the expanded state. Specify instance names.

We recommend using instance names "expanded", "collapsed" and "closed" for the expanded, collapsed state and the "close" button, respectively. Then you can transfer the code samples from this instruction to Animate without changes.

See also:

•How to make button and add instance name

Main stage button

1. Create an object on the stage for example using Rectangle Tool.
Then convert it to symbol using context menu "Convert to Symbol..."

2. In the following dialog box choose "Type: Button". "Name" can be left unchanged, press "Ok".

3. Set instance name of this button to add click event later.

4. Put the following code into "Actions" layer:

window.buttons.push( 
   //Type in comma separated instance names, adding "this" at the beginning
   this.button1
   //End of instance names 
);

Nested button

1. For example you button is nested inside movie clip, its name is "movieClip".

2. Double click on "movieClip", and then you will able to observe nested button.

3. If your button is nested to another symbol, for example movie clip, then it's necessary to represent it in "Actions" layer code:

window.buttons.push( 
   //Type in comma separated button instance names nested to parent movie clip instance adding "this" at the beginning
   this.movieClip.button1
   //End of instance names
);

2. Choose appropriate template.

Download template and add it to the project:
single clickable area and onmouseover expansion;
multiple clickable areas and onmouseover expansion;
single clickable area and onclick expansion;
multiple clickable areas and onclick expansion.

Templates for Animate CC 15 and earlier versions:

3. Depending on the scenario of the banner, add one of the code samples to the Actions layer:

Single clickable area and onmouseover expansion

//Change instance name if required
expanded = this.expanded;
collapsed = this.collapsed;
setAdfox();

Multiple clickable areas and onmouseover expansion

//Change instance name if required
expanded = this.expanded;
collapsed = this.collapsed;
window.buttons.push( 
//Add comma-separated button paths starting with this.
this.expanded.button1, this.expanded.button2, this.expanded.button3, this.expanded.button4
);
setAdfox();

Single clickable area and onclick expansion

//Change instance name if required
expanded = this.expanded;
collapsed = this.collapsed;
close = this.expanded.close;
setAdfox();

Multiple clickable areas and onclick expansion

//Change instance name if required
collapsed = this.collapsed;
expanded = this.expanded;
close = this.expanded.close;
window.buttons.push( 
//Add comma-separated button paths starting with this.
this.expanded.button1, this.expanded.button2
);
setAdfox();

4. Publish project and archive it using zip

5. Banner with multiple click tags

If banner contains multiple clickable areas or buttons with different links. For example:

this.expanded.button1 — One page;  
this.expanded.button2 — Another page.

URL's have to be set on the "Events" tab in banner parameters. The first instance in the line of code will correspond to the "Event 1" parameter of the banner, etc.

Google Web Designer

1. Download Google Web Designer template.

You can use this code as basis for building your own banner.

This template includes adfox_HTML5.js library and set of parameters for proper event and click handling:
%reference%, %user1%, %eventN%, where N — event index from 1 to 30.

2. Click handling.

All events are set to the certain elements on the "Events" tab.

To invoke actions use "Interactive area" component. Add it and choose an event "Tap Area > Touch/Click"

Specify click function code on the "Code" tab.

2.1 If banner contains single button:

callClick();

2.2 It there are several buttons:

callClick(n);

where n is event index that has to be invoked.

2.3 If it's necessary to invoke event from animation without click then use the following code:

callEvent(n);

where n is event index that has to be invoked.

Adaptive banner guide.

In order to make banner adaptive set position and dimensions in percents on the Properties pane.

Also use "Align to container" and "Fluid layout" options.
Responsive design uses flexible – rather than fixed – layouts. For ads, this means creating a single ad that can restyle its elements as the orientation or size changes, rather than creating multiple similar ads. Keeping with standard responsive design principles, Google Web Designer uses CSS3 media queries to let you to apply different styling rules for different-sized ads. Final project example Google Web Designer, source file.

4. Publish your project.

Select the following publishing options:

Provide information about events and it's matching URLs to manager who will add banner to ADFOX.

Adding banner to ADFOX

To add a banner to ADFOX, select suitable type of banner and choose "Screenglide HTML5 [loader]" template.

Заполните параметры баннера:

  1. Архив с HTML5 креативом — upload *.zip-archive with your project.
  2. HTML5 код креатива — html contents from the project archive (inserts automatically).

  3. URL перехода — enter a link to the advertiser's site. For the correct operation of the transition, please check the protocol in the link (http: // or https: //).

  4. "TARGET" ссылки — defines type of window, where link will be opened. Possible values::
    _top — in current window;
    _blank — in a new window/tab.

  5. Ссылка на промерочный пиксель — by default the ADFOX pixel is used (//banners.adfox.ru/transparent.gif). You can specify different value if necessary.

  6. Изображение №1 до расхлопа — if the banner consists of images, upload image that fits collapsed dimensions.

  7. Изображение №2 после расхлопа — not mandatory. If banner consists of two images, upload image that fits expanded dimensions.

  8. Время жизни расхлопа (секунд) — at the expiration of of this time banner will automatically collapse.

  9. Сдвигать контент при расхлопе — specify whether the banner will shift content or not:
    no — shift content;
    yes — banner will cover the content. Content is shifted both horizontally and vertically. To move it horizontally, add following styles to container: display: inline-block or float: left.

  10. Имя атрибута class контейнера баннера — additional classes for banner container.

  11. Ширина до расхлопа (в px или 100%) — specify width of the creative in pixels or in percents before expanding.

  12. Высота до расхлопа (в px или 100%) — specify the height of the creative in pixels before expanding.

  13. Ширина после расхлопа (в px или 100%) — width of the creative in after expanding.

  14. Высота после расхлопа (в px или 100%) — height of the creative after expanding.

  15. Направление расхлопа — specify expansion direction:

Value Description
overhead_left_corner From the upper left corner open to the bottom right
overhead_right_corner From the upper right corner open to the bottom left
lower_left_corner From the bottom left corner open to the upper right
lower_right_corner From the bottom right corner open to the upper left
central_point From the central point open in the center
right To the right
left To the left
bottom Down
top Up
fullscreen Fullscreen
  1. Кол-во авторасхлопов — number of session expansions in one session.

  2. Время сессии для авторасхлопа — time of the session expansion in hours. After this time, banner will be displayed again in the expanded state if the countAutoExpand parameter is greater than 0.

  3. Авторасхлоп всегда — (Always expand automatically) – indicates whether the banner will be expanded during initialization. This parameter has the higher priority than session expansion. Possible values: yes, no.

  4. Время анимации (секунд) — animation time of the expand and collapse process in seconds.

  5. Стили для блока баннера — necessary additional styles for the banner container in one line. Except for: display. For example, "border: 1px solid red;". invalid values ​​will be rejected by browser.