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!

Single File 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 Single File expanding banner please see 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 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).

Single _expanding _1

Important: 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.

Single _expanding _2

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 animation – defines which animation to use when a banner is expanding. If None is selected, a user has to manually define an animation.
Collapse animation – defines 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.
For example: if you are creating an expanding banner 160x600 to 300x600 and expanding direction is "left", you must change SingleExpanding component's position as follows:

Single Expanding Component Position

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

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 ADFSuperClose function:

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

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

Other Single 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:

EXPANDING 160X600 _ 300X600: the format consists of initial 160x600 stage and expanded 300x600 stage. On mouse over, the ad expands left revealing more of the ad content with possibility to integrate video, flash and other rich media experience. On “Close” button click, the ad returns to its initial dimensions.
Banner: previewSupport Preview Icon, source downloadSupport Source Icon .

EXPANDING 300X250 _ 500X350: the format consists of an initial 300x250 stage and an expanded 500x350 stage. On mouse over, the ad expands left-down revealing more of the ad content with possibility to integrate video, flash and other rich media experience. On mouse off or “Close” button click, the ad returns to its initial dimensions.
Banner: preview Support Preview Icon, source download Support Source Icon.

IAB BILLBOARD 970X31 _ 970X250: the format consists of a 970x250 stage and a collapsed 970x31 stage with “Show Ad” button. When user opens the webpage he sees pre-expanded 970x250 stage with page content pushed down. On “Close” button click, the ad collapses to the initial stage. The ad can be called back anytime by clicking the “Show Ad” button.
Banner: preview Support Preview Icon, source download Support Source Icon.

IAB PUSHDOWN 970X90 _ 970X415: he format consists of a 970x90 collapsed stage and a 970x415 expanded stage. On click, the initial area of the banner expands to 970x415 politely pushing down the page content. When user leaves the expanded area, the ad retracts to its initial dimensions.
Banner: preview Support Preview Icon, source download Support Source Icon.

Note: In order to build Initial Expanded banner (preview link: here) follow standard Single Expanding instructions and in Adform system pass such custom var initiallyExpanded = 1 in banner settings page.