BannerLine
HTML5(Swiffy)/flash/image

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

Description

Bannerline is a fixed banner that could be positioned in the bottom, top, left or right sides of the screen. It doesn’t change it’s position while scrolling and expanding when mouse pointer is over it. Expanding to the creative №2 is happening without delay when mouse pointer comes over creative №1. There may be «Close» button on the creative №2, banner disappears when this button is clicked.

You can add from one to three different types of creative to each banner. Each type may be used as separate background or as a cap for the different type.

If more than one type is added then priority will be next:

- If browser has HTML 5 support then swiffy will be in priority
- If it doesn’t or swiffy wasn’t added then flash banner will be shown
- If browser blocks flash content or flash wasn’t added then image will be shown

In case flash is blocked particularly then paused flash will be loaded. Advertiser’s website would be open on click.

It is possible to add several buttons inside the banner, each with unique URL.

Preparation (for developers)

1. Image preparation

File requirements:

File size requirements

File size must not exceed the following

- Images (*.jpg, *.png, *.gif) — up to 300 Kb.

The limitations are checked separately for the each file. To use files that exceed those limits host them somewhere on your server and use URL field when creating the banner to provide a direct link to your file. (http://...)

File names:

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.


Flash-movie preparation

What you need to prepare:

Flash-banner (*.swf), up to 300Kb;

File size requirements

File size must not exceed the following Flash-movies (*. swf ) up to 300 Kb.

The limitations are checked separately for each file. To use files that exceed those limits host them somewhere on your server and use URL field when creating the banner to provide a direct link to your file. (http://...)

File names:

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


Flash banner preparation using ActionScript 3.0

You’ll need ActionScript 3.0 and FlashPlayer 9.0+

Flash movie №1:

1.Create the top layer.
2.Copy the following code and paste it inside the first frame of the main timeline:

 import flash.external.ExternalInterface;

var flashVars = this.root.loaderInfo.parameters;
var initBanner = initBanner || false;

if (!initBanner) {
stop();
initBanner = true;
setInterval(function () {
var status = ExternalInterface.call("af_bannerLineGetStatus_"+flashVars.af_rnd, 1);
if (status == 'stop') {
stop();
gotoAndStop(1);
} else if (status == 'start') {
gotoAndPlay(1);
}
}, 50);
}

Flash movie №2:

1.Create the top layer and put a transparent link button on it and give it an instance name of btn.
2.Copy the following code and paste it to the first frame of the main timeline:

import flash.events.MouseEvent; //for reference
import flash.net.navigateToURL; //for reference
import flash.net.URLRequest; //для перехода
import flash.external.ExternalInterface;

var flashVars = this.root.loaderInfo.parameters;
var initBanner = initBanner || false;

btn.addEventListener(MouseEvent.CLICK, adFoxClickHandler); //for reference

function adFoxClickHandler(evt:MouseEvent) { //for reference
navigateToURL(new URLRequest(flashVars.af_reference + "@" + flashVars.af_link), flashVars.af_target); //for reference
} //for reference

if (!initBanner) {
stop();
initBanner = true;
setInterval(function () {
var status = ExternalInterface.call("af_bannerLineGetStatus_"+flashVars.af_rnd, 2);
if (status == 'stop') {
stop();
gotoAndStop(1);
} else if (status == 'start') {
gotoAndPlay(1);
}
}, 50);
}

If several link buttons are needed

Flash movie preparation using ActionScript 3.0

You’ll need ActionScript 3.0 and FlashPlayer 9.0+

For example, there are three buttons(movieclips) called btn_1, btn_2, btn_3. Create the object that includes FlashVars variables:

 var flashVars:Object = this.loaderInfo.parameters;

Add EventListeners for the buttons:

btn_1.addEventListener(MouseEvent.CLICK, onClickFirstButton);
btn_2.addEventListener(MouseEvent.CLICK, onClickSecondButton);
btn_3.addEventListener(MouseEvent.CLICK, onClickThirdButton);

Then you have two options depending on if you needed click’s counters for each button:

Preparing first scenario banner — without counting separate clicks

import flash.events.MouseEvent; //for reference
import flash.net.navigateToURL; //for reference

import flash.net.URLRequest; //for reference
import flash.external.ExternalInterface;

var flashVars = this.root.loaderInfo.parameters;
var initBanner = initBanner || false;

btn_1.addEventListener(MouseEvent.CLICK, onClickFirstButton);
btn_2.addEventListener(MouseEvent.CLICK, onClickSecondButton);
btn_3.addEventListener(MouseEvent.CLICK, onClickThirdButton);   
//for reference

function onClickFirstButton (evt:MouseEvent) { //for reference
navigateToURL(new URLRequest(flashVars.af_reference + "@" + "http://www.site.ru/page1.html"), flashVars.af_target); //for reference
} //for reference

function onClickSecondButton (evt:MouseEvent) { //for reference
navigateToURL(new URLRequest(flashVars.af_reference + "@" + "http://www.site.ru/page2.html"), flashVars.af_target); //for reference
} //for reference
function onClickThirdButton (evt:MouseEvent) { //for reference
navigateToURL(new URLRequest(flashVars.af_reference + "@" + "http://www.site.ru/page3.html"), flashVars.af_target); //for reference
} //for reference



if (!initBanner) {
stop();
initBanner = true;
setInterval(function () {
var status = ExternalInterface.call("af_bannerLineGetStatus_"+flashVars.af_rnd, 2);
if (status == 'stop') {
stop();
gotoAndStop(1);
} else if (status == 'start') {
gotoAndPlay(1);
}
}, 50);}

Preparing second scenario banner — count separate clicks

import flash.events.MouseEvent; //for reference
import flash.net.navigateToURL; //for reference
import flash.net.URLRequest; //for reference
import flash.external.ExternalInterface;

var flashVars = this.root.loaderInfo.parameters;
var initBanner = initBanner || false;

btn_1.addEventListener(MouseEvent.CLICK, onClickFirstButton);
btn_2.addEventListener(MouseEvent.CLICK, onClickSecondButton);
btn_3.addEventListener(MouseEvent.CLICK, onClickThirdButton);   
//for reference

function onClickFirstButton (evt:MouseEvent) { //for reference
navigateToURL(new URLRequest(flashVars.af_reference + "@" + flashVars.event_1), flashVars.af_target); //for reference
} //for reference

function onClickSecondButton (evt:MouseEvent) { //for reference
navigateToURL(new URLRequest(flashVars.af_reference + "@" + flashVars.event_3), flashVars.af_target); //for reference
} //for reference
function onClickThirdButton (evt:MouseEvent) { //for reference
navigateToURL(new URLRequest(flashVars.af_reference + "@" + flashVars.event_3), flashVars.af_target); //for reference
} //for reference



if (!initBanner) {
stop();
initBanner = true;
setInterval(function () {
var status = ExternalInterface.call("af_bannerLineGetStatus_"+flashVars.af_rnd, 2);
if (status == 'stop') {
stop();
gotoAndStop(1);
} else if (status == 'start') {
gotoAndPlay(1);
}
}, 50);
}
Don’t forget to tell your client event number for each button

3. Swiffy preraration

Swiffy - is a flash to HTML5 converter from Google.

1.Flash banner should be created following the requirements above.
2.Follow the link and convert Flash-movie to the HTML5 code.
3.Output code should be transformed by Code generator.

Because flash is not supported on mobile devices and may be turned off and not all of the browsers have HTML5 support we recommend to use all 3 types of banner creative(flash, swift and image).

Event counting

Event counting in flash banner is implemented by using variables event_1 … event_30.

For Swiffy it is necessary to to put events to the source flash movie.

In order to count event at moment when countable action is performed you should call the following code:

ActionScript 2.0:

loadMovieNum(_root.event_N,300); 

ActionScript 3.0:

import flash.net.sendToURL;
import flash.net.URLRequest;
var flashVars:Object = this.root.loaderInfo.parameters;
sendToURL( new URLRequest(flashVars.event_N) );

where N - the number of the event, from 1 to 30.

The information about events’ numbers and actions performed should be told to client with final flash movie in order to put it to advert control system

Events that are already used in the template

Event 21 to Event 30 are already used

Banner was closed (Event 21) - user clicked the «Close» button.
Swiffy was chosen for showing (Event 22) - two swiffy creatives were added and browser supports <\canvas>.
Flash was chosen for showing (Event 23) - two flash creatives were added, there are no swiffy creatives and flash plugin is on (flash may be paused).
Image was chosen for showing (Event 24) - two images were added, there are no swiffy or flash creatives.
Swiffy was shown (Event 25) - it means that creatives were loaded properly on the webpage, swiffy movies should be played. If there are no problems it’s count should match Event 22 count.
Flash was shown (Event 26) - it means that HTML code with swf requests got to the webpage, flash movies should be played. If there are no problems it’s count should match Event 23 count.
Image was shown (Event 27) - it means that HTML code with image requests got to the webpage, images should be shown. If there are no problems it’s count should match Event 24 count.
Autoexpand count (Event 28) - amount of autoexpands.
Expand count (Event 29) - the amount of creative’s expands, sums up manual expands and autoexpands.
Collapse count (Event 30) - the amount of creative’s collapses.

Adding in ADFOX

In order to add the banner in AdFox you should choose necessary banner type and template BannerLine HTML5(Swiffy)/flash/image [Sync Async].
If you can’t find it in the list please add it from predetermined templates.

Values for parametres in "Content" section have to be specified:

"Target" - is used to specify the location where linked document is opened.

_blank - Opens the linked document in the parent frame.

_parent - Opens the linked document in a new window or tab.

Link to tracking pixel - link to a tracking pixel if you need to count views at another ad serving system.

URL link - specify a link to advertiser's site.

Swiffy creative №1 - link to the *.js file with collapsed creative. Code generator

Swiffy creative №2 - link to the *.js file with expanded creative. Code generator

Flash creative №1 - link to the *.swf file with collapsed creative.

Flash creative №2 - link to the *.swf file with expanded creative.

Image №1 - link to the collapsed image.

Image №2 - link to the expanded image.

Background color (#000000 or transparent) - color for the creative.

Creative №1 width (100% or px) - width of the creative (one for all the types).

Creative №1 height (100% or px) - height of the creative (one for all the types).

Creative №2 width (100% or px) - width of the creative (one for all the types).

Creative №2 height (100% or px) - height of the creative (one for all the types).

Position - side of the screen to which banner would be sticked (bottom, top, left, right). Default: bottom.

Number of autoexpands - number of banner’s autoexpands while loading page in one browser session. Default: 0.

Autoexpand’s session duration - amount of time for which number of autoexpands setting is set starting with first impression. Value is set in hours. Default: 20.
Example. Number of autoexpands is set to 5. After first impression session time is on, 20 hours for example, then during this time other autoexpands may be shown, but no more than 5.

Always autoexpand - yes - banner always would be impressed expanded, session is off. Default: no.

Z-index - z-index for the banner. Default: 9999999.

Show «Close» button (yes or no) - if yes - «Close» button would be shown over the expanded creative. Default: no.

Image for «Close» button - image that would replace default «Close» button’s image.

«Close» button position (left or right) - position of the «Close» button over the creative. right - top-right corner, left - top-left corner. Default: right.

Adding insertion code to the website.

Please put the banner’s insertion code right after opening <body> tag.