1. When creating a single file expanding banner you will first be 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). If the Default ClickTag field is left blank, banner will be created without a clickTAG.

2. Under the Settings tab, enter the following information:

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 6th of this page.

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 which triggers banner expansion. Possible choices:

  • rollOver
  • click
  • custom – more about this condition in 4th paragraph below in this page

Collapse – 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 below in 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) – expand animation duration in seconds, usually it‘s zero.

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

Expand animation – defines which animation to use when banner is expanding. If “None” is selected then user has to define animation himself.

Collapse animation – defines which animation to use when banner is collapsing. If “None” is selected then user has to define animation himself.

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.

When ready, click the Create button.

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

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

4. If you need banner to expand/collapse on 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 listen expanding events:

  • EXPAND_START - when banners starts to expand
  • EXPAND_END - when banner stops to expand
  • EXPAND_UPDATE - while banner is expanding
  • COLLAPSE_START - when banners starts to collapse
  • COLLAPSE _END - when banner stops to collapse
  • COLLAPSE _UPDATE - while banner is collapsing

More info and examples can be found here.

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

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 the banner is finished it can be tested (clicking the button “Preview). The ZIP file created by clicking the button “Export” can be uploaded to the Adform system