VPAID Ads

VPAID enables cross-platform support for rich in-stream video ads. A valid VPAID object can be used in conjunction with the VAST and is highly recommended, as VAST ads that include VPAID protocols can play in both VAST and VPAID-enabled video players.

With VPAID, both linear and non-linear ads are supported, which include standard, expanding, overlay or mixed ads.

Standard banners with Adform Core components can function as VPAID ads. For advanced VPAID solutions, please see instructions below.

Instructions

How to "Close" ad:

  • add AdformCloseButton to the banner.
  • drag AdformCore component to the stage and dispatch 'close' AdformSharedEvent from your ad.
import com.adform.events.AdformSharedEvent;
root.loaderInfo.sharedEvents.dispatchEvent(new AdformSharedEvent('close'));

How to add 'clickTag':

  • drag AdformCore component to stage
  • draw clickTag button on stage
  • give instanceName 'clickTag' to the button
  • import com.adform.events.AdformSharedEvent
  • add MouseEvent.CLICK eventListener to clickTag
  • remove MouseEvent.CLICK eventListener on clickTag click
  • dispatch 'click' AdformSharedEvent
import com.adform.events.AdformSharedEvent;
clickTag.addEventListener(MouseEvent.CLICK, onClickTagClick);

function onClickTagClick(e : MouseEvent) : void {
  clickTag.removeEventListener(MouseEvent.CLICK, onClickTagClick);
  root.loaderInfo.sharedEvents.dispatchEvent(new AdformSharedEvent('click'));
}

How to set 'expand':

  • drag AdformCore component to stage
  • dispatch 'expand' AdformSharedEvent from your ad.
import com.adform.events.AdformSharedEvent;

root.loaderInfo.sharedEvents.dispatchEvent(new AdformSharedEvent('expand'));

How to set 'collapse'

  • drag AdformCore component to stage
  • dispatch 'collapse' AdformSharedEvent from your ad.
import com.adform.events.AdformSharedEvent;
root.loaderInfo.sharedEvents.dispatchEvent(new AdformSharedEvent('collapse'));

How to implement custom 'skipAd' button:

  • drag AdformCore component to stage
  • draw skipAd button on stage
  • give instanceName 'skipAdBtn' to the button
  • import com.adform.events.AdformSharedEvent
  • add MouseEvent.CLICK eventListener to skipAdBtn
  • remove MouseEvent.CLICK eventListener on skipAdBtn click
  • dispatch 'skip' AdformSharedEvent
import com.adform.events.AdformSharedEvent;
skipAdButton.addEventListener(MouseEvent.CLICK, onSkipAdBtnClick);

function onSkipAdBtnClick(e : MouseEvent) : void {
    clickTag.removeEventListener(MouseEvent.CLICK, onSkipAdBtnClick);
    root.loaderInfo.sharedEvents.dispatchEvent(new AdformSharedEvent('skip'));
}

How to 'resize' ad:

  • drag AdformCore component to stage
  • import com.adform.events.AdformSharedEvent
  • add 'resize' eventListener
  • reposition ad elements according to data object from event
root.loaderInfo.sharedEvents.addEventListener('resize', onAdResize);

function onAdResize(e : AdformSharedEvent) : void {
  // var data : Object = e.data;
  // data.playerWidth -> player width in pixels
  // data.playerHeight -> player width in pixels
  // data.viewMode -> "normal"/"thumbnail"/"fullscreen"
  // TODO : reposition ad elements according to data
}

How to update ad according to player 'start'

  • place your starting code in the firstFrame

or

  • drag AdformCore component to stage
  • import com.adform.events.AdformSharedEvent
  • add 'start' eventListener
  • update ad elements according to data object from event

The code is as follows:

import com.adform.events.AdformSharedEvent;
import com.adform.events.AdformSharedEvent;
root.loaderInfo.sharedEvents.addEventListener('start', onAdStart);

function onAdStart(e : AdformSharedEvent) : void {
  // var data : Object = e.data;
  // data.playerWidth -> player width in pixels
  // data.playerHeight -> player width in pixels
  // data.viewMode -> "normal"/"thumbnail"/"fullscreen"
  // TODO : update ad elements according to data
}

How to 'pause' ad:

  • drag AdformCore component to stage
  • import com.adform.events.AdformSharedEvent
  • add 'pause' eventListener
  • pause ad

The code is as follows:

import com.adform.events.AdformSharedEvent;
root.loaderInfo.sharedEvents.addEventListener('pause', onAdPause);

function onAdPause(e : AdformSharedEvent) : void {
  // TODO : pause ad
}

How to 'resume' ad:

  • drag AdformCore component to stage
  • import com.adform.events.AdformSharedEvent
  • add 'resume' eventListener
  • resume ad
import com.adform.events.AdformSharedEvent;
root.loaderInfo.sharedEvents.addEventListener('pause', onAdPause);

function onAdPause(e : AdformSharedEvent) : void {
  // TODO : pause ad
}

How to 'update' volume:

  • drag AdformCore component to stage
  • import com.adform.events.AdformSharedEvent
  • add 'volume' eventListener
  • update ad volume

The code is as follows:

import com.adform.events.AdformSharedEvent;
  root.loaderInfo.sharedEvents.addEventListener('volume', onAdVolumeChange);

  function onAdVolumeChange(e : AdformSharedEvent) : void {
    // var data : Object = e.data;
    // data.volume
    // TODO : change volume
  }

VAST setup:

Both Linear and Non-linear ads must have these AdParameters set:

linear → true/false

clickTAG → your clickTAG URL

the code is as follows:

<AdParameters>
  <linear>true</linear>
  <clickTAG><![CDATA[http://www.adform.com/site/]]></clickTAG>
</AdParameters>

Ad Unit flash vars in VAST

There is a possibility to ad flash vars to ad unit in MediaFile source:

plain:   VPAIDWrapper.swf?url=adUnit.swf?param1=value1&param2=value2
encoded: VPAIDWrapper.swf?url%3DadUnit.swf%3Fparam1%3Dvalue1%26param2%3Dvalue2

Note: all request params must be encoded.

Glider

Introduction

"Glider" is rich media banner type with 3D effects which loads and animates custom contents. Full banner set consists of minimum 3 assets:

  • initial banner - usually it is a standard (300x250) or single expanding (300x250 collapsed and 970x450 expanded) banner.
  • actual glider - SWF / PNG / JPG / GIF (gif animation is not supported).

Glider banner solution loads AdCapture snapshots from Adform Servers.

Read more: http://advertising.microsoft.com/europe/ForAdvertisers/CreativeSpec.aspx?CS_CreativeSpecID=84

Glider.fla structure

  • preloader - will be shown on initial load in small banner.
  • controls - custom control bar (add custom buttons here).
  • banner - snapshot of banner in site -> set x, y positions according to position in website - position also can be set through flashvars 'bannerX' and 'bannerY'(flash vars overrides banner position in flash).
  • site(site snapshot holder) - snapshot URL must be specified through flash var 'snapshot'.

             - site -> page -> image -> site snapshot will be loaded in this holder.
             - site -> page -> add custom assets if needed.

  • content(content holder)

             - content -> preloader -> will be show durring content load.
             - content -> content -> content panel will be loaded here (content must contain invisible asset, in order to pre-calculate content 'width' and 'height' for animations).

  • background(wallpaper of glider)

             - add assets to this container in order for them to be displayed as wallpaper during glide animations.

Public methods

  • addState(stateParamsObject) - adds glide transition state.

id - id of transition.
position - position where to glide (DEFAULT, LEFT, RIGHT, CLOSE).
contentURL - URL of content to be displayed after glide animation.
- custom x position -> works when position is not defined.
- custom y position -> works when position is not defited.
angle - glide panel angle of transition.
duration - duration of transition.

Note: 'default' - state is mandatory while others are optional.

  • close() - closes Glider.
  • glideTo(transitionId) - glides according to specified transition.

Flash vars

  • snapshot - full URL to web site snapshot image.
  • bannerX - banner asset x position in flash (flash vars overrides banner position in flash).
  • bannerY - banner asset y position in flash (flash vars overrides banner position in flash).

Note

  • Write custom code in 'init' frame.
  • Make sure that 'content' and 'site' banners actionscript is not exported in the first frame.
  • Add GliderEvent.START listener in order to perform custom action on animation start.
  • Add GliderEvent.END listener in order to perform custom action on animation end.

GliderEvent

  • state - current transition 'id'

Example

import flash.events.MouseEvent;
import com.adform.glider.event.GliderEvent;
import com.adform.motion.AdformTween;
import com.adform.net.AdformEvents;
import com.adform.utils.AdformFlashVars;

stop();

addState({id: 'default', position: DEFAULT, contentURL: AdformFlashVars.getFlashVar( 'homePanel', 'homePanel.swf')}); 
addState({id: 'left', position: RIGHT, contentURL: AdformFlashVars.getFlashVar( 'leftPanel', 'leftPanel.swf')});
addState({id: 'right', position: LEFT, contentURL: AdformFlashVars.getFlashVar( 'rightPanel', 'rightPanel.swf') });

var homeBtn = controls.homeBtn;
var leftBtn = controls.leftBtn;
var rightBtn = controls.rightBtn;
var closeBtn = controls.closeButton;
var state : String = "";

leftBtn.addEventListener(MouseEvent.CLICK, onLeftBtnClick);
rightBtn.addEventListener(MouseEvent.CLICK, onRightBtnClick);
homeBtn.addEventListener(MouseEvent.CLICK, onHomeBtnClick);
closeBtn.addEventListener(MouseEvent.CLICK, onCloseBtnClick);

addEventListener(GliderEvent.START, onGlideStart);
addEventListener(GliderEvent.END, onGlideEnd);

disableControls();
controls.visible = false;

function disableControls() {
    controls.mouseEnabled = closeBtn.mouseEnabled = homeBtn.mouseEnabled = rightBtn.mouseEnabled = leftBtn.mouseEnabled = false;
}

function enableControls() : void {
    

    closeBtn.mouseEnabled = true;
    homeBtn.mouseEnabled = state != 'default';
    rightBtn.mouseEnabled = state != 'right';
    leftBtn.mouseEnabled = state != 'left';
    

    controls.mouseEnabled  = true;
}

function onGlideStart(event:GliderEvent) {
    AdformTween.to( controls, 0.2, { alpha : 0, onComplete: onControlsHideComplete } );
}

function onGlideEnd(event:GliderEvent) {
    

    state = event.state;
    

    enableControls();
    controls.alpha = 0;
    controls.visible = true;
    AdformTween.to( controls, 0.2, { alpha : 1 } );
}

function onLeftBtnClick(event:MouseEvent):void {
    AdformEvents.callEvent("165", "Left Panel shown");
    disableControls();
    glideTo('left');
}

function onRightBtnClick(event:MouseEvent):void {
    AdformEvents.callEvent("166", "Right Panel shown");
    disableControls();
    glideTo('right');
}

function onHomeBtnClick(event:MouseEvent):void {
    AdformEvents.callEvent("164", "Home Panel shown");
    disableControls();
    glideTo('default');
}

function onCloseBtnClick(event:MouseEvent):void {
    

    disableControls();
    close();
    AdformTween.to( controls, 0.2, { alpha : 0, onComplete: onControlsHideComplete } );
}

function onControlsHideComplete() {
    controls.visible = false;
}

AdPages (powered by ISSUU)

AdPages is a way to link flash banners with easy-to-read AdPages. AdPages is created by merging a standard flash banner with a text document (PDF, Word, PowerPoint).

Preview:

Examples:

Creating Flash banner

In order to have a „book“ in the banner, the flash banner must have a movieclip object with an instance name „droppHolder“.

 The droppHolder movieclip:

  • The instance name of the movieclip should be named droppHolder.
  • The droppHolder object must be present throughout the banner's entire timeline.
  • The droppHolder object has to have an element inside it, as an empty movieclip doesn't have any size. Adding a simple box with transparent fill is the easiest.
  • The publication preview doesn't follow the droppHolders dimensions exactly, but takes up as much space as possible while maintaing the pulication preview's aspect ratio.

Be aware that fill of droppHolder should be transparent, not the droppHolder itself. If you make droppHolder movieclip semi-transparent (alpha = 50), flipping magazine will appear semi-transparent in the final banner. In the same way, droppHolder rotation will cause flipping magazine to be rotated in the final banner.

Note: Only banners made with ActionScript3 are supported.

Requirements for uploading documents

  • The PDF should be Web-ready, meaning that it should be less than 100 mb and not have the large top/bottom/side margins as in normal print version;
  • The total number of pages should be no more than 500 pages;
  • Supported formats: PDF, Word (DOC), PowerPoint (PPT), Open Office (ODS, ODP), WordPerfect (WPD), Rich text format (RTF), Star Office (SXI, SXW);
  • Optimal image resolution: 150 ppi (higher resolution will be scaled down);
  • Supported PDF versions: 1.0 to 1.5;
  • Do not include bleed, crop, or other print markings;
  • The PDF should be 1-page-to-1-page, meaning that two actual pages (a spread) should not be 1 page in the PDF;

Info: for further info contact Adform technical support technical@adform.com

Hyperlinks

If the document contains hyperlinks, it is possible to click on them directly when reading the document in the full-screen version. 

Expanding banner

Adform strongly recommends to use „Adform Creative Toolkit“ extension for creating Expanding banners. More info can be found here.

However, it's also possible to create Expanding banners without Adform Toolkit, below you will find detailed instructions on this.

Previews

Single Expand:

Expanding from two files:

Examples: 

Expanding from two files: 

Instructions

Adform accepts two types of expanding banners:

  • Single file expanding
  • Expanding made Two files

Creating Single File Expanding banners

Single File expanding banners must be built with Adform Creative Toolkit. For more info please follow here.

Creating Expanding banners from Two Files

1. Banner should have one normal size file and one expanded size file and two backup gif’s in corresponding sizes, e.g. a 728x90 expanding banner consists of a 728x90 normal size file and a 728x300 expanded size file.

2. If you need banner to expand/collapse on specific action, you should call such functions:

Expand:

a) In case you are using ActionScript 2:

import flash.external.ExternalInterface;

this.expandButton.onRelease = function():Void
{
  try
  {
       ExternalInterface.call('ADFExpand',_root.adId);
  }
  catch (e:Error)
  {
  }
};

b) In case you are using ActionScript 3:

import flash.external.ExternalInterface;
btn.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void
{
        try{
                   ExternalInterface.call('ADFExpand',
                   LoaderInfo(stage.loaderInfo).parameters.adId);
        }catch (e:Error) { };
}

Collapse:

a) In case you are using ActionScript 2:

import flash.external.ExternalInterface;

this.closeButton.onRelease = function():Void
{
  try
  {
       ExternalInterface.call('ADFClose',_root.adId);
  }
  catch (e:Error)
  {
  }
};

b) In case you are using ActionScript 3:

import flash.external.ExternalInterface;
btn.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void
{
          try{
                 ExternalInterface.call('ADFClose',
                 LoaderInfo(stage.loaderInfo).parameters.adId);
          }catch (e:Error) { };
}

3. You need to implement the clickTAG variable. Detailed instructions for clickTAG implementation can be found here.

4. Banners should be compiled with Flash 8 or higher version. There might be pop-up blocker problems when interacting with lower version banners in Internet Explorer 7.

5. Test the Flash banner in live web environment using Adform Creative Test Module.

Expanding-Floating banner

Adform strongly recommends to use „Adform Creative Toolkit“ extension for creating Expanding banners. More info can be found here.

 

Preview:

Examples:

 

Instructions

Adform accepts two types of expanding banners:

  • Single file expanding
  • Expanding made Two files

Expanding-Floating banners has some predefined positions (they can be set in Adform system) and Collapsed panel may be closed:

  • center/center
  • bottom/center/
  • top/center
  • center/left
  • center/right
  • bottom/left
  • bottom/right
  • top/left
  • top/right

Creating Expanding-Floating banners

1. The main difference between regular Expanding banners and Expanding-Floating is possibility to hide Collapsed panel. In order to do this banner must call ADFSuperClose function:

a) In case you are using ActionScript 2:

import flash.external.ExternalInterface;

this.closeButton.onRelease = function():Void
{
  try
  {
       ExternalInterface.call('ADFSuperClose',_root.adId);
  }
  catch (e:Error)
  {
  }
};

b) In case you are using ActionScript 3:

import flash.external.ExternalInterface;
closeButton.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void
{
        try{
                   ExternalInterface.call('ADFSuperClose',
                   LoaderInfo(stage.loaderInfo).parameters.adId);
        }catch (e:Error) { };
}

 

2. For banner expansion and retraction please use the same functions as for regular Expanding banners:

Collapse:

a) In case you are using ActionScript 2:

import flash.external.ExternalInterface;

this.closeButton.onRelease = function():Void
{
  try
  {
       ExternalInterface.call('ADFClose',_root.adId);
  }
  catch (e:Error)
  {
  }
};

b) In case you are using ActionScript 3:

import flash.external.ExternalInterface;
btn.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void
{
          try{
                 ExternalInterface.call('ADFClose',
                 LoaderInfo(stage.loaderInfo).parameters.adId);
          }catch (e:Error) { };
}

 

Expand:

a) In case you are using ActionScript 2:

import flash.external.ExternalInterface;

this.expandButton.onRelease = function():Void
{
  try
  {
       ExternalInterface.call('ADFExpand',_root.adId);
  }
  catch (e:Error)
  {
  }
};

b) In case you are using ActionScript 3:

import flash.external.ExternalInterface;
btn.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void
{
        try{
                   ExternalInterface.call('ADFExpand',
                   LoaderInfo(stage.loaderInfo).parameters.adId);
        }catch (e:Error) { };
}

3. You need to implement the clickTAG variable. Detailed instructions for clickTAG implementation can be found here.

4. Banners should be compiled with Flash 8 or higher version. There might be pop-up blocker problems when interacting with lower version banners in Internet Explorer 7.

5. Test the Flash banner in live web environment using Adform Creative Test Module.

Floating banner

Preview:

Examples:

Instructions

1. Banner must have a close button, which executes the following JavaScript code:

a) In case you are using ActionScript 2:

import flash.external.ExternalInterface;

this.closeButton.onRelease = function():Void
{
  try
  {
       ExternalInterface.call('ADFClose',_root.adId);
  }
  catch (e:Error)
  {
  }
};

b) In case you are using ActionScript 3:

import flash.external.ExternalInterface;
import flash.display.LoaderInfo;
ExternalInterface.call("ADFClose",LoaderInfo(this.root.loaderInfo).parameters.adId);

2. You need to implement the clickTAG variable. Detailed instructions for clickTAG implementation can be found here.

3. Banners should be compiled with Flash 8 or higher version. There might be pop-up blocker problems when interacting with lower version banners in Internet Explorer 7.

4. Test the Flash banner in live web environment using Adform Creative Test Module.

Floating banners and Adform Synchronized ads

When Floating banner is a member of Adform Synchronized ad, it is possible to call this Floating banner from another Flash banner which must also be the member of the same Synchronized ad.

Flash banner which calls Floating banner must have AdformCore component on the stage and button, which executes the specific JavaScript code. In order to download AdformCore component you should install "Adform Creative Toolkit".

Creating banner

Adform strongly recommends to use „Adform Creative Toolkit“ extension for creating banners. For opening this extenstion follow to Window --> Other Panels --> Adform in your Flash API top menu. The manual of „Adform Creative Toolkit“ can be found here.

However, you can create banner which calls Floating ad without Adform Toolkit, just follow these steps:

1. When „Adform Creative Toolkit“ is installed, all Adform components are placed in your Adobe Flash installation directory. You are able to see them by selecting Window --> Components in the top menu.

2. Drag and drop the AdformCore component on the stage.

3. Then following code should be assigned to button:

a) In case you are using ActionScript 2:

on(release) {
        AdformCore.showFloating();
}

b) In case you are using ActionScript 3:

button.addEventListener(MouseEvent.CLICK, showFloatingHandler);
function showFloatingHandler(e:MouseEvent):void
{
    AdformCore.showFloating();
}

Banners for Adform Content Manager

Adform Content Manager allows creating a universal Flash banner which can dynamically change according to content definitions in Adform system. When using Adform banner elements, there is no need to physically alter the banners when the changes need to be applied to text, various properties (colors, alignment, etc.) or graphics. Below you will find detailed instructions on how to create Adform Content Manager compatible Flash banners.

Preview:

Examples:

Installation

For creating Adform Content Manager banners you need to download specific Adform components. This is done by downloading and installing „Adform Creative Toolkit“ extension. More info about installing this plugin can be found here.

Creating banner

Adform strongly recommends to use „Adform Creative Toolkit“ extension for creating banners with dynamic content. For opening this extenstion follow to Window --> Other Panels --> Adform in your Flash API top menu. The manual of „Adform Creative Toolkit“ can be found here.

However, you are able to create Adform Content Manager banners without „Adform Creative Toolkit“. You should follow these steps for creating such type banners:

1. When „Adform Creative Toolkit“ is installed, all Adform components are placed in your Adobe Flash installation directory. You are able to see them by selecting Window --> Components in the top menu.

2. Then drag and drop the AdformCore and AdformXMLManager components on the stage.

3. AdformXMLManager component has the following methods:

  • For loading a text variable value to a assigned textField:
AdformXMLManager.setText(varName:String, tf:TextField);

       varName - variable name in content xml at selected group;
       tf – textfield instance name.

  • For loading image to assigned movieClip with a preloader:
AdformXMLManager.loadFile(varName:String, mc:*,
loadCompleteHandler:Function, loadProgressHandler:Function);

         varName – variable name in content xml at selected group;
         mc – movieClip instance name;
         loadCompleteHandler – function to call when file has been loaded;
         loadProgressHandler - function to call while file is loading; properties arebytesLoaded and bytesTotal.

  • For retrieving variable values:
AdformXMLManager.getVarValue(type:String, name:TextField);

          type – variable type in the context xml, possible types are: text and graphic;
          name – variable name in the context xml.

Note: You are not able to access variable value until XML is completely loaded. You must listen to “AdformXMLManager.XML_LOAD_COPLETE” event.

  • Adding event listener:
AdformXMLManager. addEventListener (event:String, handler:Function);

          event – event name;
          handler – event handle function.

4. AdformXMLManager component has event which fires when XML is completely loaded:

AdformXMLManager. addEventListener (AdformXMLManager. XML_LOAD_COMPLETE, onXMLLoaded:Function);

5. For setting test XML location (this is ONLY for testing purposes, when publishing final banners this method should not be used as the AdformXMLManagers find the XML automatically):

AdformXMLManager.pathToXMLFile = “url:String”

url – valid URL to a content xml. Possible values are relative (ex.: metadata.xml) or full paths.

Note: examples and events of XMLManager component can be found here.

XML template

1. The XML structure is shown below – when using a local XML for testing purposes, please make sure that naming is correct: <root>, <TextVars> and <Graphics>.

<root>
<TextVars>
<TextVar name="BackgroundColor" value="F3F3F3"/>
<TextVar name="Text" value="Adform Banner Elements XML Example."/>
</TextVars>
<Graphics>
    <Graphic name="Logo" value="http://adform.com/en/images/logo.jpg" />
</Graphics>
</root>

2. You can validate your own XML against the below Adform Content Manager DTD – Document Type Definition:

<!DOCTYPE root [
<!ELEMENT root (TextVars,Graphics,Groups)>
<!ELEMENT TextVars (TextVar+)>
<!ELEMENT TextVar EMPTY>
<!ELEMENT Graphics (Graphic+)>
<!ELEMENT Graphic EMPTY>
<!ELEMENT Groups (Group+)>
<!ELEMENT Group (TextVars,Graphics)>

<!ATTLIST root xmlns:xsi CDATA #FIXED "http://www.w3.org/2001/XMLSchemainstance">
<!ATTLIST root xmlns:xsd CDATA #FIXED "http://www.w3.org/2001/XMLSchema">
<!ATTLIST TextVar name CDATA #REQUIRED>
<!ATTLIST TextVar value CDATA #REQUIRED>
<!ATTLIST Graphic name CDATA #REQUIRED>
<!ATTLIST Graphic value CDATA #REQUIRED>
<!ATTLIST Graphic assetID CDATA #REQUIRED>
<!ATTLIST Graphic av CDATA #REQUIRED>
<!ATTLIST Group name CDATA #REQUIRED>
<!ATTLIST Group id CDATA #REQUIRED>
]>

3. You need to implement the clickTAG variable. Detailed instructions for clickTAG implementation can be found here.

4. Banners should be compiled with Flash 8 or higher version. There might be pop-up blocker problems when interacting with lower version banners in Internet Explorer 7.

5. Test the Flash banner in live web environment using Adform Creative Test Module.

Event tracking (banner hosted by Adform)

Adform Event tracking can be applied for different types of Flash events, e.g. clicks on specific Flash banner areas, mouse-over specific banner area and etc. Implementation of Event tracking depends on where the banners are hosted – on Adform servers or on Media servers.

This tutorial explains how to set up event tracking in Flash banners hosted on Adform servers.

Preview:

Examples:

Installation

For creating banners with Adform event tracking you need to download specific Adform components. This is done by downloading and installing „Adform Creative Toolkit“ extension. More info about installing this plugin can be found here.

Creating banner

Adform strongly recommends to use „Adform Creative Toolkit“ extension for creating banners with Adform event tracking. For opening this extenstion follow to Window --> Other Panels --> Adform in your Flash API top menu. The manual of „Adform Creative Toolkit“ can be found here.

However, you are able to create banners with Adform event tracking without „Adform Creative Toolkit“. You should follow these steps for creating such type banners:

1. When „Adform Creative Toolkit“ is installed, all Adform components are placed in your Adobe Flash installation directory. You are able to see them by selecting Window --> Components in the top menu.

2. Drag and drop the AdformCore component on the stage.

3. Insert Event calls on specific events, which you want to track:

AdformCore.ADFevent('event_id', 'event_name');

event_id - it is a whole number between 1 and 19 and represents unique events in the banner.

event_name - static string (do not use dynamic values).

4. Example of using Adform event tracking:

a) In case you are using ActionScript 2:

button.onRelease = function() {
AdformCore.ADFevent('1', 'banner click');
// Calling the ADFevent() function which transfers the event data to Adform servers
};

b) In case you are using ActionScript 3:

button.addEventListener(MouseEvent.CLICK,ADFevent1);
function ADFevent1(e:Event):void {
AdformCore.ADFevent('1', 'banner click');
}

5. Event cannot be called immediately when the banner is loaded (in the first frame). It should be called only after user interaction with the banner (e.g. mouse over, dragging object, playing video on

6. Banners should be compiled with Flash 8 or higher version. There might be pop-up blocker problems when interacting with lower version banners in Internet Explorer 7.mouse over and etc.).

7. Test the Flash banner and events in live web environment using Adform Creative Test Module

Events with dynamic values

It is possible to pass some custom values using Custom Adform Events:

1. Drag and drop the AdformCore component on the stage.

2. Insert Event calls on specific events, which you want to track:

AdformCore.ADFevent('event_id', 'event_name', eventVars);

event_id - it is a whole number between 1 and 19 and represents unique events in the banner.

event_name - static string (do not use dynamic values).

eventVars - (Object) Object with custom variables, which should be assigned for current event. Variable names are limited to the following - bv1, bv2, ... , bv100. Their values should be "String" type.

Example of eventVars:

var eventVars:Object = {

   bv1: "John",

   bv2: "Colin",

   bv3: "24"

}

a) In case you are using ActionScript 2:

var eventVars:Object = {
  bv1: "John",
  bv2: "Colin",
  bv3: "24"
 };
button.onRelease = function() {
AdformCore.ADFevent('1', 'banner click', eventVars);
// Calling the ADFevent() function which transfers the event data including variables to Adform servers
};

b) In case you are using ActionScript 3:

var eventVars:Object = {
  bv1: "John",
  bv2: "Colin",
  bv3: "24"
 };
button.addEventListener(MouseEvent.CLICK,ADFevent1);
function ADFevent1(e:Event):void {
AdformCore.ADFevent('1', 'banner click', eventVars);
}

Event tracking (banner hosted by Media)

Adform Event tracking can be applied for different types of Flash events, e.g. clicks on specific Flash banner areas, mouse-over specific banner area and etc. Implementation of Event tracking depends on where the banners are hosted – on Adform servers or on Media servers.

This tutorial explains how to set up event tracking in Flash banners hosted on Adform servers.

Preview:

Examples:

Installation

For creating banners with Adform event tracking you need to download specific Adform components. This is done by downloading and installing „Adform Creative Toolkit“ extension. More info about installing this plugin can be found here.

Creating banner

Adform strongly recommends to use „Adform Creative Toolkit“ extension for creating banners with Adform event tracking. For opening this extenstion follow to Window --> Other Panels --> Adform in your Flash API top menu. The manual of „Adform Creative Toolkit“ can be found here.

However, you are able to create banners with Adform event tracking without „Adform Creative Toolkit“. You should follow these steps for creating such type banners:

1. When „Adform Creative Toolkit“ is installed, all Adform components are placed in your Adobe Flash installation directory. You are able to see them by selecting Window --> Components in the top menu.

2. Drag and drop the AdformCore component on the stage.

3. Insert Event calls on specific events, which you want to track:

AdformCore.ADFevent('event_id', 'event_name');

event_id - it is a whole number between 1 and 19 and represents unique events in the banner.

event_name - static string (do not use dynamic values).

4. Example of using Adform event tracking:

a) In case you are using ActionScript 2:

button.onRelease = function() {
AdformCore.ADFevent('1', 'banner click');
// Calling the ADFevent() function which transfers the event data to Adform servers
};

b) In case you are using ActionScript 3:

button.addEventListener(MouseEvent.CLICK,ADFevent1);
function ADFevent1(e:Event):void {
AdformCore.ADFevent('1', 'banner click');
}

5. Event cannot be called immediately when the banner is loaded (in the first frame). It should be called only after user interaction with the banner (e.g. mouse over, dragging object, playing video on

6. Banners should be compiled with Flash 8 or higher version. There might be pop-up blocker problems when interacting with lower version banners in Internet Explorer 7.mouse over and etc.).

7. Test the Flash banner and events in live web environment using Adform Creative Test Module

8. When hosting the banner, it must be passed a unique bn, ADFcmpgnID, ADFmembID, ADFbanPlacID, ADFbanID  and domain=http://track.adform.net/Banners/ values from Adform system through FlashVars (for this info please contact traffic@adform.com).

Polite banner

Heavy rich media banners can significantly slow down the loading of the Media site. Therefore creative agencies have less creative freedom. As a solution, Adform recommends using polite banners. Polite banners allow the campaign banner to be almost unlimited weight as an image file of very little weight replaces the original banner during the Media site loading and only after the site has fully loaded, original banner is loaded into its place.

Preview:

Examples:

Instructions

There are two type polite banners:

  • based on JavaScript – when page is loading – light weight image file is displayed and when page is fully loaded – the main Flash banner replaces image. Currently only images may be polite source.

    All you need is to provide us one image and one SWF file. Flash banner must be made according to Adform specs.
     
  • based on ActionScript – the main idea is that banner should have special Adform component and there should be implemented event listener which would call special function when page is fully loaded. This scenario is very useful for video banners – to start video streaming only when page is fully loaded.

    More about this feature in this manual.

Creating polite banner (based on ActionScript)

Installation

For creating such type Adform Polite banners you need to download specific Adform component. This is done by downloading and installing „Adform Creative Toolkit“ extension.

Instructions

Adform strongly recommends to use „Adform Creative Toolkit“ extension for creating polite banners. For opening this extenstion follow to Window --> Other Panels --> Adform in your Flash API top menu. The manual of „Adform Creative Toolkit“ can be found here.

However, you are able to create Adform Content Manager banners without „Adform Creative Toolkit“. You should follow these steps for creating such type banners:

1. When „Adform Creative Toolkit“ is installed, all Adform components are placed in your Adobe Flash installation directory. You are able to see them by selecting Window --> Components in the top menu.

2. Drag and drop the AdformCore component on the stage.

3. Implement code below in the banner:

a) In case you are using ActionScript 2:

import com.adform.events.AdformPoliteEvent;
import com.adform.events.AdformEventDispatcher;
System.security.allowDomain("*");
function handlePageLoaded(adformPoliteEvent:Object):Void
{
// here you should start load another large size swf file
}
AdformEventDispatcher.addAdformEventListener(AdformPoliteEvent.PAGE_LOADED, handlePageLoaded);

b) In case you are using ActionScript 3:

import com.adform.events.AdformPoliteEvent;
import com.adform.events.AdformEventDispatcher;
Security.allowDomain("*");
function handlePageLoaded(adformPoliteEvent:AdformPoliteEvent):void
{
// here you should start load another large size swf file
}
AdformEventDispatcher.addAdformEventListener(AdformPoliteEvent.PAGE_LOADED,
handlePageLoaded);

4. When page is fully loaded – function handlePageLoaded is called. Now you are free to load heavy content banner.

5. You need to implement the clickTAG variable. Detailed instructions for clickTAG implementation can be found here.

6. Banners should be compiled with Flash 8 or higher version. There might be pop-up blocker problems when interacting with lower version banners in Internet Explorer 7.