From September, Flash will no longer be supported by Chrome. Prepare for the shift towards HTML5 by visiting our Flash to HTML5 help page

Check it out!

Two Files Expanding Banner

It is highly recommended to use Adform Creative Toolkit extension for Flash to deliver banners fully compliant with the specs. The Creative Toolkit auto-implements the required ActionScript commands on the flash files. Once exported, the assets are ready to be uploaded to the Adform system. You may download the latest version of Adform Creative Toolkit here.

Also, it is recommended to use already existing Adform banner project template as a starting point. You may find various banner formats in Adform Production Guides page. For creating Expandable banner from two files please see two files expanding project template or if you want to make a banner from scratch please follow instructions below.

Workflow Steps in Adform Creative Toolkit

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

Expandable _2_files _1

  • Select the Expanding banner category, format and 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.

Expandable _2_files _2


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 function - ADFExpand, in case you are using:

ActionScript 2 ActionScript 3
import flash.external.ExternalInterface;

this.expandButton.onRelease = function(): Void {
   try {
    ExternalInterface.call('ADFExpand', _root.adId);
   } catch (e: Error) {}
}
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 function - ADFClose, in case you are using:

ActionScript 2 ActionScript 3
import flash.external.ExternalInterface;

this.closeButton.onRelease = function(): Void {
  try {
    ExternalInterface.call('ADFClose', _root.adId);
   } catch (e: Error) {}
};
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 function ADFSuperClose:

Collapse function - ADFSuperClose, in case you are using:

ActionScript 2 ActionScript 3
import flash.external.ExternalInterface;

this.closeButton.onRelease = function(): Void {
try {
ExternalInterface.call('ADFSuperClose', _root.adId);
} catch (e: Error) {}
};
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 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.

6. 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 as Toolkit Ad.

Other Two Files Expanding Banner Variations/Formats

There are few video banner formats that you might find useful. On a Adform Production Guides page you may also find these projects:

FLOOR AD 1000X70 _ 980X400: the format consists of initial 1000x70 stage and expanded 980x400 stage. On mouse over, the ad expands up to 980x400 with the initial element still visible. The Close button both on the collapsed and the expanded ad can close both elements.
Banner: previewSupport Preview Icon, source downloadSupport Source Icon .

DOUBLE EXPANDING 300X600 _ 900X600: the format consists of an initial 300x600 stage and an expanded 900x600 stage. On the initial visit, the 300x600 ad is displayed. On click on the predefined area, the ad expands left. All in all, three expanded panels can be displayed. Each panel expands to the left of the previous one, resulting in a 900x600 ad. The ad can offer additional flash, video or other rich media experience. It accommodates a link to the defined landing page. The panels remain expanded until the “Close” button is clicked.
Banner: preview Support Preview Icon, source download Support Source Icon.