Screenglide HTML5 is an interactive HTML5 banner that expands depending on the user's actions (click, hover, and so on) or automatically, with shifting or moving content on top of it. In the banner, you can implement buttons that lead to different pages of the advertiser's site.
The creative in the banner can be implemented in one of the following forms:
Parameters for adding a banner to Adfox:
- The duration of banner impression in the expanded state.
- Content shift during expand.
Develop an HTML creative
- Please read the requirements for the HTML code.
- The maximum allowed size of an HTML file is 65,000 bytes.
- Save the JS and CSS code in separate files with the .js or .css extension.
- File weight can't be more than 300 KB.
Upload the files to the Files tab of the ad campaign and embed the resulting links to the files in the HTML code.
- If absolute links (
src="css/style.css") are included in the project, then when the project is uploaded, Adfox recognizes the file paths, automatically uploads them to the Files tab, and replaces all links to these files in the uploaded project.
If relative links (for example,
src="../js/script.js") are included in the project, use one of the following methods:
- Replace the links to the
.cssfiles with absolute links: Adfox parsing will work and all of the links will be replaced automatically.
- Manually upload the
.cssfiles to the Files tab. Then get links to these files in Adfox and replace the relative links with them in the HTML code.
Example of connecting JS and CSS files:
- The project can contain only one file with the .html extension.
- The maximum allowed number of files in a project is 50.
- File types allowed in the project: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, FLV, MP4, OGV, OGG, WEBM, AVI, and SWF.
- The maximum size of each file (this applies to archived files as well):
- 300 KB.
- 1 MB for video files.
- File names must only contain numbers or Latin letters and an underscore character. You can't use spaces, quotation marks, and special characters in the file name.
- The completed project is a ZIP archive.
When you change the canvas size, its contents are cleared in webkit browsers. Because of this, if you wrote the creative code yourself without using an editor like Adobe Animate, redraw the canvas after changing its size.
Use high-resolution images. This substantially improves banner quality on mobile devices, though it reduces banner loading speed.
We recommend reducing the size of image files using services like TinyPng. This service works with both PNG and JPEG.
You can use SVG images. These are vector images, which means they will look better on both mobile and desktop devices. They also have a small file size and can be animated.
Allowable image formats: PNG, GIF, JPG, SVG.
Maximum file size: 300 KB.
Select the editor in which you will develop the HTML creative and click on the corresponding link. Prepare an archive with an HTML creative following the instructions:
- Place two symbols on different layers that will correspond to the banner in the expanded and collapsed states.
If you need the Close button, add it to the Movie clip of the collapsed state.
Specify instance names.
We recommend using instance names expanded, collapsed, and closed for the expanded, collapsed states, and the Close button accordingly. You can then transfer the code samples from this manual to Animate without changes.
- Create an object on the scene, for example, using Rectangle Tool. Then select the object and select Convert to Symbol... in the context menu.
- In the window that appears, select Type: Button. You can leave Name unchanged. Then click Ok.
- For the click to work, assign an Instance Name to this button.
- Write the code for this button in Actions:
window.buttons.push( //Separate the buttons paths with a comma, adding this first this.button1 //End of button space );
- Let's say that the button is inside another symbol, for example, Movie Clip. In this example, this Movie Clip has the Instance Name“ name ”.
- Double-click to go inside name. The nested button is there.
- When you specify the path to this button in Actions, you need to add the object's Instance Name after this where it's nested:
window.buttons.push( //Separate the buttons paths with a comma, adding this first this.name.button1 //End of button space );
Button on the main scene
- Select one of the templates depending on the scenario in the banner.
Download the template and connect it to the project:
- Depending on the scenario of the banner, add one of the code samples to the Actions layer:One clickable area and expand on hover
//Change instance name if needed expanded = this.expanded; collapsed = this.collapsed; setAdfox();Multiple buttons and expand on hover
//Change instance name if needed expanded = this.expanded; collapsed = this.collapsed; window.buttons.push( //Separate the buttons paths with a comma, adding
thisfirst this.expanded.button1, this.expanded.button2, this.expanded.button3, this.expanded.button4 //End of button space ); setAdfox();One clickable area and expand/collapse on click
//Change instance name if needed expanded = this.expanded; collapsed = this.collapsed; close = this.expanded.close; setAdfox();Multiple buttons and expand/collapse on click
//Change instance name if needed collapsed = this.collapsed; expanded = this.expanded; close = this.expanded.close; window.buttons.push( //Separate the buttons paths with a comma, adding
thisfirst this.expanded.button1, this.expanded.button2 //End of button space ); setAdfox();
- Publish the project and package it in a ZIP archive.
- If you use the option with multiple buttons, make sure to keep track of instance names of the buttons and their corresponding purpose. You'll need this information when adding an HTML creative to the Adfox interface.
this.expanded.button1: A link to the product page.
this.expanded.button2: A link to contacts.
After adding the banner in the Adfox interface, specify the links on the Events tab.
The first instance in the line of code will correspond to the Event 1 parameter of the banner. You can use any name for the event.
- Download a banner template for Google Web Designer.
You can use this banner code as a basis for making creatives in the editor. Put the contents of the archive into the folder with the program templates, for example:
/Users/[USER_NAME]/Documents/Google Web Designer/templates
The template contains an
adfox_HTML5.jsscript and a set of parameters for clicks and event counters to work correctly:
%request.reference_mrc%, %user1%, %eventN%, where N is the event number from 1 to 30.
- Click processing.
All events are assigned to animation elements on the Events tab.
The Tap area component is used for calling actions.
Add it and select the(or event (in the English version).
On the Custom code tab, select the call of the click function.
- If a single button is used:
- If multiple buttons are used:
nis the number of the event to be called.
- If you need to call an event from an animation without a click, use the following code:
nis the number of the event to be called.
How to use a stretching banner.
To make the banner stretch across the width of the container on the site, specify percentages instead of pixels for the banner location and dimensions on the Properties panel.
Use the Align by container and Fluid layout options on the top toolbar.
If you enable Fluid layout before using any alignment tools, when you change the parent container size, all elements are aligned relative to each other and relative to the container size.
You can simultaneously use both the relative sizes of elements in percentages and absolute sizes in pixels.
- Publish the project.
The project has to be published with the following settings:
- Collect files enabled;
- Create ZIP archive enabled;
- Groups unpacking enabled;
- CSS prefix enabled for WebKit and Mozilla.
After publishing the project, archive it with the .zip extension. Your creative is ready to be uploaded to the Adfox banner.
Add a banner to Adfox
To add a banner to Adfox, select the banner type you need and the Screenglide HTML5 [context] template.
Fill in the banner parameters: