Help Center Ad Gallery

Expandable Ad or Rollover Flash ad

An expandable ad occupies a smaller area (eg: 728x90) and upon a user action (eg: mouse-over, button click) or after a number of seconds, it expands to a larger area (eg: 728x240). You can serve an expandable banner within our ad server with these simple steps. Other names include push-down/pushdown ad and roll-over/rollover ad. If you do not want to use Flash, you can use JavaScript to create an image expandable ad.

Prepare the Flash creative

Since this technique requires the Flash file to call an external JavaScript method, you need to have access to the source file (.FLA) and add the following code. The Flash creative will call the JavaScript code to expand the outside container upon a user interaction. First, you need to choose the appropriate mouse events: on click/release or on rollover/rollout.

ActionScript 2

on(rollOver) {
   // call the JS code to expand the HTML container
   getURL("javascript:expandCreative();");

   // you can also have additional ActionScript code here if needed
   // ....
}

on(rollOut) {
   // call the JS code to expand the HTML container
   getURL("javascript:collapseCreative();");
 
   // you can also have additional ActionScript here if needed
   // ....
}

ActionScript 3

Please note that AS3 is strict with respect to the JavaScript call. It should have the function brackets and does not end with a semicolon.

import flash.events.Event;
import flash.events.MouseEvent;
import flash.external.ExternalInterface;

MyButton.addEventListener(MouseEvent.MOUSE_OVER,fnMouseOn);
function fnMouseOn(pEvt:Event):void {
   ExternalInterface.call("expandCreative()");
   // additional code to move assets or start movie, etc. 
}

MyButton.addEventListener(MouseEvent.MOUSE_OUT,fnMouseOff);
function fnMouseOff(pEvt:Event):void {
   ExternalInterface.call("collapseCreative()");
   // additional code to cleanup or stop movie, etc. 
}

Expandable Ad Wizard

Once you have the SWF creative ready, you can use the wizard to easily integrate SWF with all the necessary HTML elements.

Create a new ad and choose the ad type to be RichMedia/HTML. For the ad dimension, enter the smaller/standard size before expanding. For example, a 728x90 expands to 728x120. Normal/standard dimension 728x90. Expanded dimension is 728x120
Click on the Rich-Media Wizard link below the code box to generate the HTML code. You will have the option to expand up, down, left or right. You will enter the standard and expanded dimensions. The destination URL should include the clickTAG parameter for click tracking
Once the ad is created, you will need to choose the JavaScript-only serving code

Sample Code

FLA source code:
expandable-ad-300x250.fla
SWF file:
expandable-ad-300x250.swf
A sample ad 300x250 expands to 300x450 upon rollover served live by AdSpeed:

Expandable Directions

The above code example expands to show additional content below the ad. You can easily modify it to expand from the left to the right by setting the width instead of the height attribute. Modifications are also required to expand to the left and expand up. For existing clients, you can use the Wizard interface and choose one of the available directions.

Auto Expand - Auto Close

By default, the ad expands and closes with user-initiated actions. However, it is possible to expand and close the ad automatically after a number of seconds by using JavaScript:

// auto-expand after 2 seconds
window.setTimeout('expandCreative()',2000);

With this approach, the ad will automatically expand/rollover and start the animation/video when the page loads. Then after a number of seconds, which should be the length of animation/video, it automatically returns to the standard dimension. For auto expansion to work, the SWF/FLA file needs to start the ad at the expanded state.

If you want the ad to auto-expand for the first view but not for subsequent views, you can setup a cookie to memorize the event:

function expandCreative() {
  ...
  $.cookie('AutoExpanded','1'); // memorize
}

if($.cookie('AutoExpanded')==null) {
  window.setTimeout('expandCreative()',2000);
}

function divMouseOver() { 
  if($.cookie('AutoExpanded')!=null) {
    expandCreative();
  }
}

Events and Ad Interaction Tracking

If you want to know how many visitors interact with the expandable ad, you can track these post-view or view-through actions with an event tracking URL.

Troubleshooting Tips

wmode setting must be either "opaque" or "transparent" since the Flash ad needs to be displayed within a window mode. The default setting, which does not specify a value for "wmode", might put the expandable ad behind the main content and that is not the expected outcome.
If multiple expandable ads are on a single page, distinctive DIV containers should be used so they are not in conflict with each other
The value for "allowScriptAccess" should be set as "always" so that the JavaScript method is called properly.
If your Flash file has a transparent background and "wmode" is set to "transparent", CSS of the DIV container can be used to set a specific background color or other styling. Alternatively, "wmode" can be set to "opaque" to maintain the background of the Flash file.
For a push-down ad that pushes the page content down when it expands, the dimension of both the outer and inner DIV containers need to be synchronized and adjusted.

If you need technical assistance with the HTML/JavaScript code for an expandable ad, please open a new ticket with the ad name/ID in your account.