1. When creating an expanding banner from two files you will first be asked to define some details:

  • Select the Expanding banner type.
  • Enter project and banner (collapsed and expanded) names
  • Set project and banner (collapsed and expanded) locations
  • Choose the ActionScript version
  • Set normal and expanded banners dimensions
  • Select/deselect a 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. Under the Settings tab, select the following options:

Expand behavior – select type of expanding banner. Possible choices:

  • Normal – regular expanding banner
  • Pushdown – site content will be moved down on banner expansion
  • Side-kick – site content is moved to 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. Also it is possible to close collapsed panel - more info about it at paragraph 4th of this page
  • TakeOver(MSN) – banner which meets MSN specs for expanding banners

Expand direction - select direction of banner expansion. If you select position "Custom" you are able to set specific position (in pixels) of Expanded part by simply entering X and Y values.

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

Wmode and Banner align – select possible values.

Expand Type – select action which triggers banner expansion. Possible choices:

  • RollOver
  • Click
  • Custom – more about this condition in 3rd paragraph of this page

Collapse Type – select action which triggers banner retraction. Possible choices:

  • RollOut
  • Custom - if banner has default Adform Close button then banner will collapse only on this button click. In other case please read 3rd paragraph of this page

Auto show after (s) – if banner needs to expand automatically on page load set 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‘s zero.

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

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

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

 

Keep collapsed source visible – if it's enabled then the initial collapsed content of the banner will be visible on expand as well.

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

Finally, click the Create button.

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

4. If expanding banner is Floating type then 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. In case that Expanding banners must have close buttons, „Adform Creative Toolkit“ inserts such button automatically.

6. When banner is finished it can be tested (clicking button “Preview) or ZIP file created to upload to Adform system (clicking button “Export”).