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.