Help Center Manage Your Account Banner, Richmedia, and Text Ads

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 ad within our ad server with these simple steps. Other names include push-down/pushdown ad or roll-over/rollover 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 the JavaScript call. It should have the function brackets and does not end with the 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.

If you want the ad to auto-expand the first view but not on 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);
}

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 (opaque or transparent). The default setting (leave wmode as empty) will lay-over the main content and it's not the expected outcome.
If multiple expandable ads are on a single page, you need to use distinctive DIV containers so they are not in conflict with each other
The default value for "allowScriptAccess" has changed since Flash 8. You need "allowScriptAccess" to be "always" so that the JavaScript method is called properly.
Since we set wmode to "transparent", if your Flash file has a transparent background, the CSS for the container can set a specific background color. You can use "opaque" wmode to maintain the Flash background.

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.

Testimonials for our Ad Servers

I am not only a customer. I am also a big "fan" of AdSpeed. Some folks love Rolex, or Nikon, etc., but I love AdSpeed.
Tom Bailey
AquariumFish
I LOVE your system. It is a GREAT ad server. Thanks so much for all your help. I am really excited that I can now get CTR.
Dave D
WinningTheGame

Help Center Manage Your Account Banner, Richmedia, and Text Ads

Ad Gallery - Expandable Ad or Rollover Flash ad

Prepare the Flash creative

ActionScript 2

ActionScript 3

Expandable Ad Wizard

Sample Code

Expandable Directions

Auto Expand - Auto Close

Events and Ad Interaction Tracking

Troubleshooting Tips

Other Articles in Banner, Richmedia, and Text Ads

Related Articles

Testimonials for our Ad Servers

Help Center

Blog

Ad Serving

Ad Servers