Search Images Maps Play YouTube News Gmail Drive More »
Sign in

DoubleClick Rich Media

Creative build guides

Expanding build guide

Set up a basic expansion

Next: Set up an auto-expanding function

With a basic expansion, you can make your creative expand when a user clicks on or rolls over it. You have two options for setting this up:

Option 1: Use the API for a custom expand button

We recommend using ActionScript to set up the expansion of your creative, as it allows you to control how much of your collapsed creative is a hot spot or hit area. If you're building to DoubleClick recommended ad specs, the hot spot should be 25-33% of the collapsed panel.

To expand a child panel:

  1. Create a Click object to represent the hot spot. The hot spot can trigger expansion when a user clicks or rolls over it, which you can code in ActionScript.
  2. Call this method: expanding.expand("Child name here")

Studio reminder

When you use the Expanding component, you must call the expand method through that component. Don't use enabler.expand() unless you're building an Expanding creative without the Expanding component.
Option 2: Use the component as a button

The quickest way to implement an expand is to use the component as a button or hot spot to trigger the expansion of your creative. However, if you're building to DoubleClick recommended ad specs, we suggest that you use the API to code your own expand button.

Studio reminder

Since the Expanding component is the same size as your collapsed panel, using this option means your ad will have a 100% hot spot for expansion. Many sites reject creatives with expansion hot spots this big, so check your site specs before implementing this method.

When you use the component as a button, you can set your ad to expand in one of two ways:

  • Expand on rollover: The ad expands whenever the user rolls over any part of the collapsed area of the Expanding component. Once the unit is expanded, the hot spot is disabled until the unit is returned to the collapsed state.

  • Expand on click: The ad expands whenever the user clicks over any part of the collapsed area of the Expanding component. Once the unit is expanded, the hot spot is disabled until the unit is returned to the collapsed state.

To use your component as a button, open the Component Inspector for the Expanding component:

In the Settings section, check Use as button.

Select Expand on rollover or Expand on click.

Try it!

Set up a click to expand by calling the expand method from a Click object (expandBtn, in this example):

AS3 code snippet
import com.google.ads.studio.utils.StudioClassAccessor;

// Get a reference to the Expanding class.
var expanding:Object = StudioClassAccessor.getClass(StudioClassAccessor.CLASS_EXPANDING)["getInstance"]();

// Create a function to expand a panel
var onExpandHandler:Function = function(event:MouseEvent):void {
    expanding.expand("Child name here");
}
expandBtn.addEventListener(MouseEvent.CLICK, onExpandHandler);
The child name was defined in the Expanding component, as noted in Add the Expanding component.

Test your work

Run the creative in Flash. When you click the hot spot, the expanded content should load into the empty movieclip and the following traces should appear in the output panel:

    Enabler: Event: expand
    Enabler: Ad expanded
    Expanding component event: expand
    Expanding component event: loadInit
    Expanding component event: load

In Step 5, you'll add a close button, which will allow you to collapse the creative.

Next: Set up an auto-expanding function

Related