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 expandable/roll-over ads within our ad server with these simple steps.

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:
  
  

Expanded 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 or open a technical ticket with the ad name/ID in your account for the assistance with the source code.

Auto Expand - Auto Close

By default, the ad expands/closes only by a user-initiated action. It's possible to expand and close the ad automatically after a number of seconds by using JavaScript setTimeout() method. 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.

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.

Other Articles in Banner, Richmedia, and Text Ads

• Ad Dimension
• Ad Gallery - Catfish Ad
• Ad Gallery - Floating Ad or Layer Ad
• Ad Gallery - Peeling Ad
• Ad Gallery - Polite Ad or Two-Phase Ad
• Ad Specifications
• Ad Types
• Ad Weight or Ad Priority
• Alternative Image/Media URL
• Click to a new or same window
• Click Tracking URL
• Destination URL or Click URL
• How do I change the window title of my pop-up/pop-under ads?
• How do I mix image and text in an ad?
• How do I track click for Flash/SWF ads?
• How do I track clicks for HTML/RichMedia ads?
• Image URL
• QuickTime and Windows Media ads
• Text alternative for banner ad images
• Tutorial - Create a simple SWF with clickTAG tracking

Search Help Center

Cannot find an answer for your question? Ask our Customer Care team

Related Articles

• Group

  "Documentation for API methods to manage one or multiple groups. API Version1.2.7 (build 20110606). Documentation was last modified on Sun, ..."

  34% relevant in Manage Your Account AdSpeed API
• Campaign

  "Documentation for API methods to manage one or multiple campaigns. API Version1.2.7 (build 20110606). Documentation was last modified on Sun, ..."

  34% relevant in Manage Your Account AdSpeed API
• Advertiser

  "Documentation for API methods to manage one or multiple advertisers. API Version1.2.7 (build 20110606). Documentation was last modified on Sun, ..."

  34% relevant in Manage Your Account AdSpeed API
• Ad Gallery - Floating Ad or Layer Ad

  "Floating ad, or layer ad, is a special type of ad that flows/slides into the main page using animation. You ..."

  34% relevant in Manage Your Account Banner, Richmedia, and Text Ads