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.