Single file Expanding banner

1. When creating a single file expanding banner you are first asked to define some details and settings:

  • Enter the project and banner names;
  • Set the project and banner locations;
  • Choose ActionScript version;
  • Set the expanded banners dimensions (collapsed banner dimensions will be set in the Adform System);
  • Enter/clear a default clicktag (more info about this option can be found here).

Note: If the Default ClickTag field is left blank, the banner will be created without a clickTAG.

2. Under the Settings tab, enter the required information.

Expand behavior – select type of an expanding banner. The possible choices are:

  • Normal – regular expanding banner;
  • Pushdown – site content will be moved down on banner expansion;
  • Side-kick – site content is moved to the right or left on banner expansion (check banner preview);
  • Floating – collapsed panel will be as Floating banner. When such type is chosen it is a must to set banner's position on the page. In addition, it is possible to close collapsed panel (more info in the text below).

Wmode and Banner align – select possible values.

With Landing page target, a landing page can be opened in a new or the same window or frame.

Expand – select action that triggers the banner expansion. The possible choices are:

  • rollOver;
  • click;
  • custom (more info in the text below).

Collapse – select action that triggers the banner retraction. The possible choices are:

  • rollOut;
  • custom - if banner has the default Adform Close button, then banner will collapse only on this button click (more info about the other cases in the text below).

Auto show after (s) – if a banner needs to expand automatically on the page load, set the time period in seconds when banner should expand. Minimum possible value – 0.1.

Auto close after (s) – this feature works only when Auto Show after value is not zero.

Expand delay (s) – expand delay in seconds, usually it is zero.

Expand time (s) – expand animation duration in seconds, usually it is zero.

Collapse time (s) –collapse animation duration in seconds, usually it is zero.

Expand animationdefines which animation to use when a banner is expanding. If None is selected, a user has to manually define an animation.

Collapse animationdefines which animation to use when a banner is collapsing. If None is selected, a user has to manually define an animation.

Enable Side Kick animation (active only when Side-kick type is selected)if it is disabled, a banner expands instantly. Otherwise, the banner is hidden under the mask which expansion can be animated too.

When finished, click the Create button.

3. Adform Creative Toolkit automatically drags and drops SingleExpanding component to the top-left corner of the stage. It takes area and position equal to collapsed.

E.g. If you are creating an expanding banner 160x600 to 300x600 and expanding direction is "left", you must change SingleExpanding component's position as follows:

4. If you need a banner to expand/collapse on a specific action, you should call such functions (when Expand behaviour is set to Custom):

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) { };
}

5. Also it is possible to list expanding events:

  • EXPAND_START - when a banner starts expanding;
  • EXPAND_END - when a banner stops expanding;
  • EXPAND_UPDATE - while a banner is expanding;
  • COLLAPSE_START - when a banner starts collapsing;
  • COLLAPSE _END - when a banner stops collapsing;
  • COLLAPSE _UPDATE - while a banner is collapsing.

Info: More info and examples can be found here.

6. If an expanding banner is Floating type then it is possible to close the collapsed panel by calling such 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;
btn.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void
{
          try{
                 ExternalInterface.call('ADFSuperClose',
                 LoaderInfo(stage.loaderInfo).parameters.adId);
          }catch (e:Error) { };
}

7. The methods for creating and assigning actions are the same as for Standard banners. In case Expanding banners should have close buttons, Adform Creative Toolkit inserts this button automatically.

8. When a banner is finished, it can be tested by clicking the Preview button. The ZIP file, created by clicking the Export button, can be uploaded to the Adform system.

Video Extender

Preview:

Video Extender is a single file Expanding banner format with a dragging possibilty (officially supported by MSN). It is possible to expand/extend a banner by simply dragging the button placed on a banner's corner.

Note: currently video extender feature is available only for Single Expanding banners made with ActionScript 2.

1. Create AS2 Single Expanding project (more info about creating Single Expanding banner can be found here).

2. Set the SingleExpanding settings:

  • Expand - custom;
  • Collapse - custom;
  • Auto show after - 0;
  • Auto hide after - 0;
  • Expanding delay - 0;
  • Expand animation - Any except "None";
  • Collapse animation - Any except "None";
  • wmode - transparent;
  • With the Landing page target, a landing page can be opened in a new or the same window, or in a frame.

3. Add any content to the banner: graphics, Adform Video Player and etc.

4. Drag ExtenderButton component to the stage.

5. Setup properties of the Extender in the Component Parameters panel:

  • Button Align - select position of the Extend Button;
  • Video Containers - enter an instance name of a Video container which must be extended.

6. Add custom code or events if needed (see ExtendButton component page).

7. The methods of creating and assigning actions are the same as for Standard banners.

8. When a banner is finished, it can be tested by clicking the Preview button; or a ZIP file can be created by clicking the Export button so that it can be uploaded to the Adforom system.

IAB Slider

Info: see the Demo

The IAB Slider ad consists of the following required elements:

• Slider Bar;
• Slider Content.

Note: 300x250 banner is also included for MSN.

Slider Bar is anchored to the bottom of the browser's window and in front of the publisher page's content.

A click or a rollover triggers the publisher's page to slide to the left, revealing the Slider Content on the right.

The Slider Bar persists to enable retraction.

Using the Close button or clicking on the Slide Back arrow slides the Slider Content back to the right by bringing the publisher's content to its original position.

1. The easiest way to create a Slider is using Adform Creative Toolkit template for an IAB Slider (both AS2 and AS3 supported):

2. Edit SliderBar.fla and SliderContent.fla if necessary.

Note: banner with a property Expand on = "RollOver" is configured, its Expand Delay property automatically is set to 3 seconds, unless you specify you own value greater than 3 seconds.  

3. Export the.swf file.

Below is a Slider Bar and Slider Content asset codes (AS3) for reference:

Slider Bar example:

import flash.display.LoaderInfo;
import flash.external.ExternalInterface;

import com.adform.motion.AdformTween;
import com.adform.display.AdformStage;
import com.adform.motion.easing.Regular;

var adId:String;
var isExpanded:Boolean = false;
var bgCount:uint = 1;
var contentWidth:uint = 950;
var baseWidth:int = Math.max(contentWidth, stage.stageWidth);
var diff:Number = (stage.stageWidth - baseWidth) / 2;

Security.allowDomain("*");

AdformStage.stage = this.stage;
            
setTimeout(this.init, 0);

function init():void
{
    stage.scaleMode = StageScaleMode.NO_SCALE;
    stage.align = StageAlign.TOP_LEFT;
    stage.addEventListener(Event.RESIZE, handleStageResize);
            
    left.closeBtn.addEventListener(MouseEvent.CLICK, handleCloseClick);
    left.extendBtn.addEventListener(MouseEvent.CLICK, handleExpandClick);
    right.backBtn.addEventListener(MouseEvent.CLICK, handleCollapseClick);
    adId = LoaderInfo(stage.loaderInfo).parameters.adId;
            
    if (ExternalInterface.available)
    {
        ExternalInterface.addCallback("expandStart", expandStart);
        ExternalInterface.addCallback("collapseStart", collapseStart);
    }
    handleStageResize();
}
        
function handleCloseClick(e:MouseEvent):void
{
    try{
        ExternalInterface.call('ADFSuperClose', adId);
    }catch (e:Error) { };
}
        
function collapseStart(endTime:Number):void
{
    isExpanded = false;
    var collapseTime:Number = (endTime - new Date().getTime()) / 1000;
    AdformTween.to(this, collapseTime,
        {
            x: diff,
            ease: Regular.easeInOut
        });
}
        
function expandStart(endTime:Number):void
{
    isExpanded = true;
    var expandTime:Number = (endTime - new Date().getTime()) / 1000;
    AdformTween.to(this, expandTime,
        {
            x: diff - baseWidth,
            ease: Regular.easeInOut
        });
}
        
function handleCollapseClick(e:MouseEvent):void
{
    try{
        ExternalInterface.call('ADFClose', adId);
    }catch (e:Error) { };
}
    
function handleExpandClick(e:MouseEvent):void
{
    try{
        ExternalInterface.call('ADFExpand', adId);
    }catch (e:Error) {  };
}

function handleStageResize(e:Event = null):void
{
    baseWidth = Math.max(contentWidth, stage.stageWidth);
    diff = (stage.stageWidth - baseWidth) / 2;
    
    x = diff - (isExpanded ? baseWidth : 0);

    left.x = (baseWidth - contentWidth) / 2;
    right.x = left.x + baseWidth;

    var times:uint =  Math.ceil(baseWidth * 2 / this.bg.width);
    for (var i:uint = bgCount; i < times; i++)
    {
        var _bg:MovieClip = new Background();
        _bg.x = i * _bg.width;
        addChildAt(_bg, getChildIndex(bg))
    }
    bgCount = (bgCount < times) ? times : bgCount;
}

Slider Content code example:

import flash.display.LoaderInfo;
import flash.display.Stage;
import flash.display.StageScaleMode;
import flash.external.ExternalInterface;
import com.adform.events.AdformEventDispatcher;
import com.adform.events.AdformVideoEvent;
import com.adform.display.AdformStage;

var adId:String;

Security.allowDomain("*");

AdformStage.stage = this.stage;

setTimeout(this.init, 0);

function init():void
{
    stage.scaleMode = StageScaleMode.SHOW_ALL;
    btn.addEventListener(MouseEvent.CLICK, handleBtnClick);
    adId = LoaderInfo(stage.loaderInfo).parameters.adId;
    
    if (ExternalInterface.available)
    {
        ExternalInterface.addCallback("expandEnd", expandEnd);
    }
}

function expandEnd(endTime:Number = 0):void
{
    AdformEventDispatcher.dispatchAdformEvent( new AdformVideoEvent(AdformVideoEvent.PLAY, ["videoPlayer"]) );
}

function handleBtnClick(e:MouseEvent):void
{
    AdfURLNavigator.navigateToUrl(AdfFlashVarsUtil.getParameter('clickTAG'));

Two files Expanding banner

1. When creating an expanding banner from two files, you are first asked to define some details.

  • Select the Expanding banner type;
  • Enter names of a project and banners (collapsed and expanded);
  • Set locations of a project and banners (collapsed and expanded);
  • Choose the ActionScript version;
  • Set dimensions of normal and expanded banners;
  • Select/deselect a default clicktag (more info about this option can be found here). If the Default ClickTag field is left blank, the banner is created without a clickTAG.

2. Select the following options under the Settings tab.

Expand behavior – select the type of an expanding banner. The possible choices are:

  • Normal – a regular expanding banner;
  • Pushdown – site content will be moved down on the banner expansion;
  • Side-kick – site content is moved to right or left on the expansion of a banner (check banner preview);
  • Floating – the collapsed panel will be shown as a Floating banner. When such banner type is chosen, it is a must to set banner's position on the page. Also, it is possible to close the collapsed panel (more info in the text below);
  • TakeOver(MSN) – a banner which meets MSN's specs for expanding banners.

Expand direction - select direction of the banner expansion. Selecting Custom position allows you setting specific position (in pixels) of an Expanded part by simply entering X and Y values.

Clicking the Edit in Browser button will open a new window in your browser where you will be able to preview and change the position of an Expanding banner.

Wmode and Banner align – select possible values.

Expand Type – select action which triggers the banner expansion. The possible choices are:

  • RollOver;
  • Click;
  • Custom (see the text below for more information).

Collapse Type – select action which triggers the banner retraction. The possible choices are:

  • RollOut;
  • Custom - if a banner has the default Adform Close button, the banner collapses only on a click of the button (info about other cases available in the text below).

Auto show after (s) – if a banner needs to expand automatically on a page load, set the time period (in seconds) indicating the expansion time. Minimum possible value – 0.1.

Auto close after (s) – this feature works only when the Auto Show after value is not zero.

Expand delay (s) – expand delay in seconds, usually it‘s zero.

Expand time (s) (active only when the Side-kick or Pushdown type is selected) – expand an animation duration in seconds, usually it‘s zero.

Collapse time (s) (active only when the Side-kick or Pushdown type is selected) – collapse an animation duration in seconds, usually it‘s zero.

With the Landing page target, a landing page can be opened in a new or the same window, or in a frame.

 

If the Keep collapsed source visible is enabled, the the initial collapsed content of the banner will be visible on the expand as well.

If the Enable Side Kick animation (active only when the Side-kick type is selected) is disabled, the banner expands instantly. Otherwise, the banner is hidden under the mask which expansion can be animated too.

Finally, click the Create button.

3. If you need a banner to expand/collapse on a 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) { };
}

4. If an expanding banner is Floating type it is possible to close collapsed panel by calling such 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;
btn.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void
{
          try{
                 ExternalInterface.call('ADFSuperClose',
                 LoaderInfo(stage.loaderInfo).parameters.adId);
          }catch (e:Error) { };
}

5. The methods of creating and assigning actions are the same as for Standard banners. If the Expanding banners must have close buttons, Adform Creative Toolkit inserts such buttons automatically.

6. When a banner is finished it can be tested by clicking the Preview button; or a ZIP file can be created by clicking the Export button so that it can be uploaded to the Adform system.

Floating banner

1. When creating a floating banner you are first asked to define some details:

  • Enter names of a project and a banner;
  • Set locations of a project and a banner;
  • Choose ActionScript version;
  • Set dimensions of a banner;
  • Select/deselect default clicktag (more info about this option can be found here). If the Default ClickTag field is left blank, the banner will be created without a clickTAG.

2. Fill in the banner specific information in the Settings tab:

Wmodeselect possible values: transparent, opaque, or window.

With the Landing page target a landing page can be opened in a new or the same window, or in a frame.

Custom position if a banner needs to be placed in a specific position, enter X and Y values.

If the fixed position is enabled, a banner stays in the same position despite the scrolling.

Use Show after (s) if a banner needs to appear automatically on a page load, set the time period (in seconds) indicating the banner's show-up time. Minimum possible value – 0.1

Use Close after (s) when banner needs to be closed, set the time period (in seconds) indicating when a banner should be closed. This feature works only when Close after value is not zero.

If the Page overlay is enabled, all the content  of a site will be overlayed with color you select in the Overlay Color, and with opacity you define Overlay Opacity (%).

Position – select banner position from the default position list. If the Custom position has any values entered, then the Position's setting becomes inactive.

Finally, click the Create button.

3. The methods of creating and assigning actions are the same as for Standard banners. Floating banners must have close buttons; Adform Creative Toolkit inserts such buttons automatically.

4. When the banner is finished, it can be tested by clicking the Preview button; or a ZIP file can be created by clicking the Export button so that it can be uploaded to the Adform System.

Dynamic content banner

Adform Creative Toolkit allows creating a universal Flash banner which can dynamically change according to the content definitions in the Adform system. When using ad messages, there is no need to physically alter the banners when the changes need to be applied to text or graphics.

Note: currently dynamic content feature is availabe for standard, floating, expanding and tear back banners. Also, synchronized banners are not allowed to have dynamic content.

Important! Dynamic content objects must go throughout the whole banner timeline.

Creating Banners with Dynamic Content

Dynamic text

1. Create dynamic text field and give it an instance name (e.g. TestField):

2. Proceed to Content  Ad Message:

3. Assign values to textfields and click Save:

4. When banner is finished it can be tested by clicking the Preview button, or a ZIP file can be created, by clicking the Export button, so that it can be uploaded to the Adform system.  Later in Adform system it's possible to change values of dynamic text fields.

Dynamic graphics

1. Create a MovieClip object and give it an instance name (e.g. TestGraphics):

2. Proceed to Content → Ad Message.

3. Assign values to MovieClip objects and click Save :

Note: an image will not be stretched if it has bigger size than the assigned MovieClip.

4. When banner is finished it can be tested by clicking the Preview button; or a ZIP file can  be created, by clicking the Export button, so that it can be uploaded to the Adform system. Later in Adform system it is possible to change values of dynamic graphics.

Dynamic fonts embedding

When you specify a font for a TextField in your application, Flash Player looks for a device font (a font that resides on the user's computer) with the same name. If it does not find that font on the user's system, or if the user has a slightly different version of a font with that name, the text display could look very different from what you intended.

The main limitation in using embedded fonts is that the embedded fonts increase the file size or download size of your banner. To lessen the banner size, fonts should be loaded dynamically.

Loading fonts dinamically

1. Follow to Content  Ad Message and select tab Font assets.

2. Font assets window shows you the already created font assets: names and sizes.

3. Click the Create New button in order to create a new font asset.

4. Click the Create button.

5. A new Font asset has been added to the Font Asset list. It is also possible to delete existing font assets or create new ones.

6. When banner is finished, you must Export the project and upload project's ZIP file to the Adform system (more info about project export in section „Banner export“).

Creating Products Ads

Adform has released a special solution for banners with the dynamic content: Product Ads. Ads of such type are very useful for the campaigns which run banners with many different products. You simply need to make one banner with one product and through Adform system you can control what products (and how many) should be placed in the banner. Products Ad example can be found here .

Steps of the Product Ads setup:
 

1. The implementation of tracking on a client's site.

2. The synchronization of client's product feed with the Adform: 

Client's XML feed should be accessible through HTTP or FTP and have the following structure:
 
<products>
<product>
<product_name>Computer 123</product_name>
<product_id>123456</product_id>
...
<product_deeplink>http://client.com/products/computer123</product_deeplink>
<product_image>...</product_image>
</product>
<product>
<product_name>Computer 456</product_name>
<product_id>456789</product_id>
<product_category_id>computers</product_category_id>
...
<product_deeplink>http://client.com/products/computer456</product_deeplink>
<product_image>...</product_image>
<product>
...
<products>

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

3. Once client‘s feed has been synchronized with the Adform’s template, variables for Product Ads banner can be provided and the banner can be tested locally. Variables allow seeing product information in the compiled banner on your local machine. 
 
var bn = 1565579;
var cid = 4790; // aid value
var gid = 0;
var tid = 3825;
var domain = "http://track.adform.net/banners/";
var pgsz = 6;
var gcnt = 100;
 
4. The creation of a banner.
 
Follow these steps to create your banner:
 

1) Create a new Standard banner;
2) Drag the Adform XML_Manager component to the stage;
3) Drag the Products component  (product holder) from the Adform Product Components folder to the stage;
4) Increase/decrease the size of this component. The products will be placed in exactly the same area which the component "product" occupies;
5) Drag component „productItem“ to the stage. By default this component contains two dynamic textfields „product_price“, „product_name“, and a movieClip „product_image“. You will be able to change the content of these objects using the Adform system;
6) Drag „productsNextButton“ and „productsPreviousButton“ components to the stage if it is necessary (the products can be scrolled automatically);
7) The components should look like this:

8) Now select component „products“ and open Component Parameters;

Auto Scroll - number, 0 by default. When the value is more than 0, auto scroll of the products is enabled. Products' next action is performed after the amount of time in seconds according to this value.
Products Padding - integer, -1 by default. If the value is equal to -1, spaces between product items will be calculated automatically according the products' holder size. You are also able to define your own space in pixels.
Products to Show - Integer, 1 by default. This parameter shows how many product items to put into a product Holder.
Scroll Step - Integer, 0 by default. This parameter shows the amount of items to change on next/previous event.

Note: 0 or more than “Products To Show” value will be equal to “Products to Show” value.

9) You are able to change the visual look of „productItem“ component and buttons. The banner (with exactly the same settings set for component „product“ above) may have such look.

Note: Currently it is not possible to test Product Ads through Adform Creative Toolkit. It can be tested only in the Adform system.

FilmStrip banner

Preview:

The IAB Filmstrip enables enhanced creative story-telling capabilities within a single ad creative. Advertisers have to submit just one 300x600 Filmstrip with five different segments. The Filmstrip is then served through the IAB UAP 300x600. Simple engagement features – scroll, click, hover, and touch – allow the user to explore all 5 segments of the 300x600 creative. Component is provided only in the Action Script 3 version.

A filmstrip can move down one subsequent frame in one of the following ways:
a) The end user interacts with 300x600 area and navigates to another page that serves the same unit;
b) The end user uses the scroll wheel on their mouse or horizontal browser bar;
c) The end user manually clicks on the next frame button at the bottom of 300x600.

1. Make 5 swf panels with content. It is highly recomended to read the specs before creating panels.

2. Create the main Filmstrip swf file:

     a) Create a new Standard banner file with dimensions of 300x600;
     b) Drag the Adform Filmstrip component on the stage from the components panel;



     c) Customize available settings and graphic appearance of the component;


 

     Animation Time (s) - Specify the duration of a scroll animation in seconds. (0.6 by default).
     Motion Blur - Enable/Disbale (true/false) motion blur (true by default).

      d) Export the swf file;
      e) Prepare settings.xml file according to the following example;

<root>
      <filmstrip>
        <panel source="Panel1.swf">
          <previousText></previousText>
          <nextText>Goto Slide 2</nextText>
        </panel>
        <panel source="Panel2.swf">
          <previousText>Goto Slide 1</previousText>
          <nextText>Goto Slide 3</nextText>
        </panel>
        <panel source="Panel3.swf">
          <previousText>Goto Slide 2</previousText>
          <nextText>Goto Slide 4</nextText>
        </panel>
        <panel source="Panel4.swf">
          <previousText>Goto Slide 3</previousText>
          <nextText>Goto Slide 5</nextText>
        </panel>
        <panel source="Panel5.swf">
          <previousText>Goto Slide 4</previousText>
          <nextText></nextText>
        </panel>
      </filmstrip>
    </root>

     f) Test the banner.

Note: filmstrip component size is 21285 bytes.

Note: for uploading such banners please contact technical@adform.net

Polite banner

Heavy rich media banners can significantly slow down the loading process of a 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 a flash file of a very little weight replaces the original banner during the Media site loading process.

1. Go to Content  Polite mode.

2. Once the Polite mode dialog is opened, there are three options:

  • None – a banner will not be of the polite type;
  • ActionScript – the creative toolkit generates the actionscript code;

The main idea of this code is that there is an event listener function implemented and when a page is fully loaded function handlePageLoaded is called. This method is very useful for video banners; a video starts streaming only when a page is fully loaded.

  • JavaScript – this method is based on such scenario: a light weight image file is displayed when a page is loading, and when the page is fully loaded the main SWF banner replaces the image. Currently only images may be the polite source.

4. When the banner is finished it can be tested by clicking the Preview button; and a .ZIP file is created, by clicking the Export button, so that it can be uploaded to the Adform system.

Video banner

Simple Video Banner

1. Follow these guidelines in order to install the Adform Creative Toolkit.

2. Create a Standard project.

Once all the necessary information has been entered (such as Default clickTAG, names, AS version, etc.), click the Create button.

3. An empty standard banner with the clickTAG button on top of the content has been created.

Creative Toolkit automatically implements clickable button with an instance name defaultClicktagBtn and ActionScript code:

this.defaultClicktagBtn.onRelease = function():Void {
getURL(_root.clickTAG, "_blank");
}

Now the banner contains correct clickTAG.

Implementing Video Player

1. In any project (except of VideoCube) proceed to Content  Assets.

2. The dialog Adform Assets is displayed.

3. Add the video assets:

  • Browse for a video file in your computer;
  • You can tick the „External URL“ check box and enter the path to your video file.

4. Once the required assets are selected, click the Save button. 

5. Now you need to create a Video Player – proceed to Content  Video.

6. The dialog Adform Video is displayed.

7. Add a new player and assign the required video by selecting a Video Source from the drop-down list.

8. In the Controls section select which buttons or a seek bar should be implemented in the banner.
Also you enable Click-Through option which allows users to be redirected to landing page on video player click:

Note: later you are able to edit visual look of the buttons.

9. Click on the Settings tab.

10. Set the player settings:

  • Auto play  - when a banner is loaded video starts to play automatically;
  • Sound on - video will play with the sound ON;
  • Streaming - tick this option if video file will be placed on Flash Media Server (FMS);
  • Loop video;
  • Enable events - activates event tracking in video banners. All the included buttons and the viewed video time will be tracked (see the image below). It is recommended to keep the Enable events check-box ticked all the time.

11. When everything is done, click the Save button.

12. The Adform Creative Toolkit automatically inserts a video container in the new layer Adform Video Player.

13. To proceed, go inside the video container. Here you have the Adform Video component with an instance name. 

14. Now it is possible to edit visual look of video controls, change dimensions of the video player, and etc.

15. If it is necessary to have more than one video player in the same banner, then proceed to Content → Video again.

16. Add a new player and select controls. Once you are done, click the Save button.

Note: the player settings (Auto Play, Sound on, Streaming, Loop video and Enable events) are the same for all video players.

17. New movieclip of the video player is created. It can be found in the Library. Drag it to the stage and place it in right spot.

18. It is also possible to create and assign other actions (please check section "Managing and assigning actions").

19. When the banner is finished it can be tested by clicking the Preview button; or a ZIP file can be created, by clicking the Export button, so that it can be uploaded to the Adform system.

20. More info about the video component can be found here.

Info: You can download an example by following this link

Creating a more complex Video Banner

Possible additional settings and options allow creating a more complex banner containing additional animation before or after the video.

Video with delay

If you want a video to play only after some time:

  • Insert Adform Video Player in the Layer going through the all timeline;
  • Give a name to the Video Container;

  • Make this container invisible in the first frame:
_root.AdformVideoPlayer._alpha = 0;
  • When you want the video to start playing (in specific frame or time) call the Adform Play Event and make the video visible:
import com.adform.events.AdformEventDispatcher;
import com.adform.events.AdformVideoEvent;

_root.AdformVideoPlayer._alpha = 100;
AdformEventDispatcher.dispatchAdformEvent({type:AdformVideoEvent.PLAY, targetsArr:["adformVideoPlayer7146"]});

As the example shows, when calling the PLAY event you enter the name of the video component (["adformVideoPlayer7146"]). This name can be found inside the video container when you select the Adform Video Component properties:

For more video events click here.

  • When video is completed make the video container invisible and display other details:
import com.adform.events.AdformEventDispatcher;
import com.adform.events.AdformVideoEvent;

//event listener
AdformEventDispatcher.addAdformEventListener(AdformVideoEvent.COMPLETE,eventHandler);
function eventHandler(eObj:Object):Void
{
     _root.AdformVideoPlayer._alpha = 0;
//other animation
}

You can preview the banner by clicking the Preview button. Click the Export button to export the banner.

The new dialogue opens asking to ensure that the banner complies with the IAB guidelines. If it does, you can either mark all check boxes or leave them unmarked and click the Continue exporting button. 

Adform Creative Toolkit generates a .ZIP file. Please note that you should not generate the .ZIP file manually. Send this file to traffic@adform.com and the Adform Traffic team will take care of this.

Note: Please keep in mind that it is suggested to have only 1 frame with all animation placed in movieclips instead of using many frames.

Video banners in devices which do not support Flash

Some devices as iPad or iPhone do not support a flash-based content. If a user visits a media site using such device, then, instead of the video banner (Flash content), an image or an empty space is shown. In order to avoid such situations Adform replaces images (or empty spaces) with HTML5 video banners. All you have to do is to send video files of the following types:


a. H.264+AAC+MP4 for IE9, iPhone 3.0+, iPad, Android 2.0+ ;
b. Theora+Vorbis+Ogg for Firefox 3.5, Chrome, Opera;
c. WebM for Firefox 4.0, Android 2.3+;

Rich Media video banners will work in the following way:

a. If it is possible to play a Flash video, the flash video will be played;
b. If it is not possible to play the flash video but it is possible to play a HTML5 video, the HTML5 video will be played (for expanding and tear back banners HTML5 video will be shown only in the expanded state, in the collapsed state a backup image will be shown);
c. In the worst case, a backup image will be shown.