Expandable “Hatchet”

1. Banner summary

ID Number: 37H050.
Short description: a corner banner that expands when one hovers over it.
Code type: JavaScript, Ajax.
Examples: Expandable Hatchet on JavaScript-code. Expandable Hatchet on Ajax-code.
Third party tracking: flash banner preparation for further AdRiver pixel insertion.
Specification: this banner visually consists of two connected blocks: horizontal and vertical. Being reduced they form a corner in the right top angle of a webpage. When one moves mouse cursor on it a banner expands, covering a content of a web-page. Banner of this type consists of flash-movie, which expands and reduces when one hovers over it.

2. Banner preparation on JavaScript-code

2.1. Flash-movie preparation

A first frame of your flash-movie should contain the following ActionScript:


if(ar_init == undefined){
 ar_init = true;
 System.security.allowDomain('*');
}

System.security.allowDomain(‘*’) allows the downloader to access banner variables and properly initialize click variable link1. It is not necessary to specially permit access in a downloader to those movies which are being downloaded.

To record the “click” event create a button element in your flash-movie. To redirect a user after the click getURL function is used. It takes two parameters: where a user should be redirected – variable link 1 (1st parameter), and value _blank of the target variable to open a banner link in a new window (2nd parameter).


on (release) {
       getURL(_root.link1, "_blank");
}

You should obligatorily use the link1 variable, it is used for counting clicks.

If it is necessary to open a banner link in a current window you can use the value _top of a target variable.


on (release) {
       getURL(_root.link1, "_top");
}

If you client is using AdRiver as a main system for online-advertising management on his site you can use the following code:


on (release) {
       getURL(_root.link1, _root.target);
}

This code allows to open banner link either in a current window or in a new window according to the option that was choosen in AdRiver interface.

A flash-movie should expand when one hovers over it.

2.2. JavaScript preparation

Download example. Open a script.js file with a text editor. You should change only that part of code, which is marked as “editable block”:


var ar_flashver   = 8;
var ar_topor      = 'topor.swf';
var ar_w          = 733;
var ar_h          = 400;
var ar_top_gif    = 'top.gif';
var ar_right_gif  = 'right.gif';
var ar_target     = 'aidi';
var ar_flash_pixel= '';
var ar_gif_pixel  = '';

Variables:

ar_flashver — version of a Flash Player required on an user’s PC for watching your flash-movies.
ar_topor — a flash-movie name. If movie is loaded from external server enter the full pathname to it on server (starting with “http://” or “https://”).
ar_w — a width of a flash movie and a top image.
ar_h — a height of a flash movie and a right image.
ar_top_gif — a top image name. If image is loaded from external server enter the full pathname to it on server (starting with “http://” or “https://”).
ar_right_gif — a right image name. If image is loaded from external server enter the full pathname to it on server (starting with “http://” or “https://”).
ar_target — here you can enter ID of the block to which the flash-movie is connected. Or you can enter “null”, if the banner is attached to <BODY> tag
ar_flash_pixel — third party tracking URL for flash-movie, if needed.
ar_gif_pixel — third party tracking URL for image, if needed.

Comments:

If you have only one tracking URL insert it for both flash movie and image.
If banner is attached to block, it is obligatory to specify in block’s parameters «position: relative» or «position: absolute» for proper banner positioning.
A banner code should be placed after a container. The best practice is to place it before a closing </html> tag.

3. Banner preparation on Ajax-code

3.1. Flash-movie preparation

You should prepare three flash-movies: master and panels. Master never shows the banner itself. He is loaded the first, and waits when the panels will be downloaded. Panels interact through the master, and they are positioned relative to the master. When the panels are loaded, a function is called which was specified at master’s initialization. This function starts the logical banner’s scenario. Up to this moment, master and panels are stopped. In the first frame of a panel initialization is made, and a message is sent to the master that panel has loaded and is ready to take commands. After that panel is stopped. Panels interact with each other only through master, using sendSync command. Master’s “startScene” function tracks commands from panels and acts properly.

Master

Download files. Save in one folder master1.as file and sources of the master. First frame of the master should contain the following code:


#include "master1.as"
_root.deb.text = "";

function debug(txt){
    trace(txt);
    _root.deb.text += txt + "n";     
}
function startScene(panel, sync){
     debug ("received: " + sync + " from: " + panel);
     switch (sync){
	case "showPanel1": 		// showPanel1 mark
	     showPanel("panel1");	//show panel
	     sendToPanel("panel1","go","start"); //panel go to the start mark
		     break;
        case "hidePanel1":		// hidePanel2 mark
             hidePanel("panel1");	//hide panel2
	      break;
	}	
}
function initDone(){
       debug ("initDone");
	sendEvent(0);		//report AdRiver that download is complete
	hidePanel("panel1");
	ExternalInterface.call("adriver('" + _root.ar_ph + "').MPU.dispatch", "master", "show");
	showPanel("panel2");
}
registerMaster(initDone, startScene, ["panel1", "panel2"]);
stop(); //stop and wait for complete download of the panels

Click button should contain the following code:


on (rollOver) {
	showPanel("panel1");	//show panel1
	sendToPanel("panel1","go","start");	// panel1 go to start mark. 
}
on(release){
	makeClick()
	}

Description:

function startScene(panel, sync) — is an execution manager. He carries out the scenario of the panels interaction.
function initDone() — automatically initializes the flash-movie when panels are downloaded. These functions use the following commands:
- sync — is the synchronization mark. Using it panels report to master. After sending the sync command panel can stop or continue running commands.
- showPanel — show the panel.
- hidePanel — hide the panel.
- sendToPanel — send to panel command go to the certain mark.
- sendEvent — send an event to AdRiver.
registerMaster(initDone, startScene, [“panel1”, “panel2”]) — registers master and waiting for the confirmation of the panels’ complete download. Arguments:
- initDone function.
- startScene function;
- list of the panels with ids [“panel1”, “panel2”].

To create your own scenario of panels interaction use showPanel, hidePanel, sendToPanel commands.

For other events in the banner (“show video” event, “open new tab” event) use events with numbers 0–9 (total 10 events is available). Zero event is reserved and reports that download is complete. It is critical to register event 0 before the 1–9 events. It is OK to register it in initDone function. Use sendEvent(eventId) command to register events. If events are not use, it is OK not to use sendEvent(0) command in initDone function.

Panels

Save in an one folder panels1.as file and sources of all panels. When panels are downloaded for the first time, layers are open (visible), that is why the first frame of the panel is often empty & transparent.

First frame of the first panel should contain the following ActionScript:


#include "panels1.as"
registerPanel("panel1");

Certain frame (for example, third) should contain the following ActionScript:


gotoAndStop(2);

A button element should be on the whole size of flash-movie and should contain the following ActionScript:


on (release) {
	makeClick()
}
on (rollOut) {
	sendSync("hidePanel1")
}

First frame of the second panel should contain the following ActionScript:


#include "panels1.as"
registerPanel("panel2");
stop();

3.2. Script preparation

Open a script.js file with text editor. You may change only an editable block. Example:


var ar_gif		= '0.gif';
var ar_gif_href	= '';
var ar_pix		= '';

ar_gif — an image name, may contain ‘http://’, in this case will be loaded from location.
ar_gif_href — alternative click through image if need.
ar_pix — external counter for banner if need.

Other variables that can be edited (highlighted red):


var m_html = a.makeFlash('master.swf',{wmode:"opaque"}),
				p1_html = a.makeFlash('panel1.swf',{wmode:"opaque"}),
				p2_html = a.makeFlash('panel2.swf',{wmode:"opaque"});
			
			a.MPU.addPanel("master", {width:"120px", height:"600px", left:"1000px", top:"90px", position:"absolute", zIndex:1}, m_html);
			a.MPU.addPanel("panel1", {width:"1120px", height:"600px", position:"absolute", left:"0px", top:"90px", zIndex:2}, p1_html);
			a.MPU.addPanel("panel2", {width:"1120px", height:"90px", position:"absolute", left:"0px", top:"0px", zIndex:1}, p2_html);

1master.swf — master name, panel1.swf — first panel name, panel2.swf — second panel name.
width, height — width and height of master and panels.
left, top — displacement of master and panels.

If need, edit the other parameters: position, zIndex.

4. Requirements

Names of the files can consist of numbers, latin letters or underscore symbols only and can’t contain any russian letters, space symbols, quotes or other special symbols.

5. The limit of the file size for banners in AdRiver

gif, jpeg, png-files (img width x height banners on AdRiver) — 600К;
swf-files (flash width x height banners on AdRiver) — 600K;
other file types — 600K;
for multicomponent banners the limits are checked for each one component.

To download in the banner files with extra-limit size you can use the box Расположение на стороннем сервере, in which you should insert the pathname to an external server.

For the banners that can’t be loaded from an external server it is possible to increase the limits of the file size. It comes to agreement with sales and support departments.

Last modified on 29.03.2016