Expandable ads can occupy a smaller area (eg: 728x90) and once an action is activated, it could expand over the content to a larger area (eg: 728x240). You can serve expandable/roll-over ads within our system following these instructions:

Prepare the Flash file

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. You need to adjust to the appropriate events for the creative (eg: on click/release or on rollover/rollout). The following example is for 728x90 expandable to 728x240 upon a mouseover event: on(rollOver) { getURL("javascript:expandCreative('ContainerDivID');"); // call the js code to expand the HTML container // you can also have additional ActionScript here if needed } on(rollOut) { getURL("javascript:collapseCreative('ContainerDivID');"); // call the js code to expand the HTML container // you can also have additional ActionScript here if needed }

Create a RichMedia/HTML ad

After you have the Flash file ready, you can enter them into our system as a RichMedia/HTML ad (choose this type when you create a new ad). For this type, you can define the size, which is the smaller size before expanding, 728x90 in our example. The Flash will call the JavaScript code to resize the container upon user interaction. You might need to adjust the JavaScript code for vertical or horizontal expansion. The destination URL should be included in the clickTAG parameter and our system will automatically track clicks. Once the ad is created and to generate the serving code, you need to choose the JavaScript-only serving code. <script type="text/javascript"> // the example uses style.height but you can use style.width to adjust horizontally function expandCreative(ContainerDivID) { document.getElementById(ContainerDivID).style.height = "240px"; // expanded height } function collapseCreative(ContainerDivID) { document.getElementById(ContainerDivID).style.height = "90px"; // normal height } </script> <table style="width:728px;height:90px" border="0" cellpadding="0" cellspacing="0"> <tr style="padding:0px;margin:0px;border-style:none;border-width:0px"> <td style="padding:0px;margin:0px;border-style:none;border-width:0px"> <div id="OuterDivID" style="position:relative;z-index:99999;height:90px;width:728px;background-color:black"> <div id="ContainerDivID" style="position:absolute;z-index:99999;height:90px;top:auto;left:auto;overflow:hidden"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="728" height="240"> <param name="quality" value="high" /> <param name="movie" value="http://example.com/728_expand.swf?clickTAG=http://www.example.org" /> <param name="wmode" value="transparent"> <param name="allowScriptAccess" value="always"> <embed src="http://example.com/728_expand.swf?clickTAG=http://www.example.org" width="728" height="240" allowScriptAccess="always" pluginspace="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" quality="high" movie="http://example.com/728_expand.swf?clickTAG=http://www.example.org"></embed> </object> </div> </div> </td></tr> </table>

Sample Code

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

Troubleshooting Tips

• You need the Flash served within window mode (opaque or transparent) so it will not lay-over other content
• If multiple expandable 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 event will call the JavaScript methods.
• 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.

Username	Password
Login Forgot password?

Create a new Account

• 10-day Free Trial
• 30-day Money Back Guarantee

[May 13, 2008] Get 50% off when paying yearly - Get 50% discount of regular price when you [read more]