Expanding build guide

Set up a basic collapse function

Now that you've set up the expanding function, you must set up a way for your creative to collapse or close. There are multiple ways to do this:

Option 1: Collapse on mouse-out

Collapse on mouse-out sets your creative to shrink to its collapsed size whenever the user mouses out of the expanded ad. Typically, if an ad expands on mouse-over, it collapses on mouse-out.

To enable this feature, open the Component Inspector:

in the Settings section, select Collapse on mouse-out

In addition to this feature, we recommend that you add a manual close button. Most sites require close buttons because they provide a visual cue to users that they can collapse the expanding creatives at any time.

Option 2: Close Button component

The Close Button component allows you to close your creative with no additional code. It includes a default "x" close graphic that you can reskin with custom graphics for all button states (mouse off, mouse over, mouse click, hit area).

As a best practice, the close button should be added to one of the top-most layers in the Flash file, to ensure it isn't accidentally blocked by another layer. The Close Button component automatically generates standard manual close tracking when it's clicked.

To use the component:

  1. Drag the component onto the stage on a new layer called "close." Make sure you add the Close Button component to a top layer so that it isn't blocked by other content in the creative.
  2. You don't need to specify additional details in the Component Inspector for this component.
Option 3: Invisible Close Button component

The Invisible Close Button Component lets you place an invisible button over a custom close button graphic on the stage with no additional code. The Invisible Close Button executes the functionality needed to track and collapse the ad while allowing you to use pre-existing button art.

The Invisible Close Button automatically generates standard manual close tracking when it's clicked.

To use the component:

  1. Drag the component onto the stage on a new layer called "close." Make sure you add the component to a top layer so that it isn't blocked by other content in the creative.
  2. Position the component over the graphic in your creative that you want to use as the close button.
  3. You don't need to specify additional details in the Component Inspector for this component.
Option 4: Use the API

To collapse the child expanded panel, call the expanding.collapse() method.

Studio reminder

When you use the Expanding component, the expanding class is called in this method. Don't use enabler.collapse() or enabler.close() unless you are building an Expanding creative without the Expanding component. (For more information, see Option 1 of Set up basic expansion.)

Unlike the two Close Button components, the API requires that you add code that calls for the standard manual close tracking when the ad collapses. To do so, call the enabler.reportManualClose() method before calling the collapse.

For a code snippet, see the Try It! section below.

Try it!

Add a close button to the expanded panel file by calling this method from a Click object (closeBtn, in this example).

AS3 code snippet

import com.google.ads.studio.ProxyEnabler;
import com.google.ads.studio.utils.StudioClassAccessor;

// Get a reference to the ProxyEnabler
var enabler:ProxyEnabler = ProxyEnabler.getInstance();

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

// Create a Collapse function
var closeClickHandler:Function = function(event:MouseEvent):void {
enabler.reportManualClose();
expanding.collapse();
}

closeBtn.addEventListener(MouseEvent.CLICK, closeClickHandler);

Test your work

Run the creative in Flash. When you click the close button, you should see the following traces in the output panel:

    Enabler: Logged manual close
    Expanding component event: collapseBegin
    Enabler: Ad collapsed
    Expanding component event: collapseComplete