FullScreen HTML5(Swiffy)/flash/image [eng]

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

Description

FullScreen - banner, which appears over the main content of a site for a short period. Creative may be Swiffy HTML5, Flash or image.

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

The banner is closed upon time countdown termination, pressing the button "To skip advertising", or upon transition to a site of the advertiser.

It’s necessary for banner to have «Close Ad» button (you may upload your own image or use default image) and countdown timer for closing. These features are added by our default control panel (it will be turned on after adding banner to AdFox) or may be created directly inside flash-movie. Default control panel is located in the top of the browser window and it may be configured to match the website’s or banner’s design (height, background, font, inscriptions, «Close ad» button feature, and control panel’s visibility settings)

Example

Example

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.


If image size is larger than screen resolution it wouldn’t be scaled. It would be positioned in the center of the browser’s window. If browser’s window is resized image would be scaled in proportion to it’s size.

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 for ActionScript 3.0:

If default control panel is turned on (there are no «Close Ad» button and countdown timer in the flash-movie):

1. In the first frame of the main timeline put the following code:

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;

transitionButton.addEventListener(MouseEvent.CLICK, adFoxClickHandler); //for reference
//transitionButton.buttonMode = true; //if you use movieclip for the button uncomment this line

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

ExternalInterface.call("fullscreenStartTimer_"+flashVars.af_rnd);

2. Create the link button to the advertiser’s website and give it Instance Name of transitionButton.

If default control panel is turned off ( there are «Close Ad» button and countdown time in the flash-movie):

1. In the first frame of the main timeline put the following code:

import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;
import flash.external.ExternalInterface;

var flashVars = this.root.loaderInfo.parameters;

transitionButton.addEventListener(MouseEvent.CLICK, adFoxClickHandler);
closeButton.addEventListener(MouseEvent.CLICK, adFoxCloseHandler);
//transitionButton.buttonMode = true; //if you use movieclip for the button uncomment this line

 function adFoxClickHandler(evt:MouseEvent) {
 ExternalInterface.call("fullscreenClose_"+flashVars.af_rnd);
 navigateToURL(new URLRequest(flashVars.af_reference + "@" + flashVars.af_link), flashVars.af_target);
 }

 function adFoxCloseHandler(evt:MouseEvent) {
 ExternalInterface.call("fullscreenClose_"+flashVars.af_rnd);
}

 if (ExternalInterface.call("fullscreenStartTimer_"+flashVars.af_rnd)) {
setInterval(function () {
panelText.text = 'Автоматический переход на сайт через ' + ExternalInterface.call("fullscreenGetSecond_"+flashVars.af_rnd) + ' секунд';
}, 90);
}

2. Create the link button to the advertiser’s website and give it Instance Name of transitionButton.

3. Create «Skip Ad» button in the top layer of the flash-movie and give it Instance name closeButton.

4. After banner is loaded on the page countdown should be turned on.

Countdown value should be shown on the screen, for example:
«Return to the website in «» seconds»
Countdown value is sent to the flash-movie from AdFox.

Create TextField with name of panelText and in the attributes choose Dynamic Text and leave it empty.

Also you could use following JavaScript functions for «Skip Ad» button and countdown timer:

ExternalInterface.call("fullscreenClose_"+flashVars.af_rnd); - closing banner.
ExternalInterface.call("fullscreenStartTimer_"+flashVars.af_rnd); - calls for the countdown timer.
ExternalInterface.call("fullscreenGetSecond_"+flashVars.af_rnd); - returns countdown timer’s value.

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

Adding in ADFOX

In order to add the banner in AdFox you should choose necessary banner type and template FullScreen 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:

Prepared swiffy creative - link to *.js file prepared by Code generator.

Flash creative - link to *.swf file

Image - link to the image.

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

"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.

Width(px) - width of the creative (one for all creative types)

Height(px) - height of the creative (one for all creative types)

z-index - z-index for the creative. Default is 999999.

Control panel (yes/no) - yes - control panel will be shown, no - control panel will be hidden, wherein flash-movie should include «Skip Ad» button and countdown timer.

Control panel’s color (#……) - color in HEX format, example: #ffffff.

Control panel’s height (*px) - control panel’s height in px.

Image for «Skip Ad» button - load the image for «Skip Ad» button, which will be shown in the top-right corner of the control panel.

Height of image for «Skip Ad» button (px or 100%) - height for the image (if specified in %, it would be calculated relatively to the control panel’s height). Default - 80%.

Text on the control panel - default is «Return to the website in «» seconds». You can use your own text to show it instead of default one.

Styles for control panel’s text - specify all the styles for the text on the control panel (example: color:red;).

Countdown timer (sec) - for how long (in seconds) banner is being shown.

Background color (rgba) - specify the background for the banner in HEX or rgba format, for example: #000000 or rgba(0,0,0,0.4).

Adding the insertion code on the webpage

Insertion code for the FullScreen HTML5(Swiffy)/flash/image banner should be put right after opening <body> tag.