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.

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:

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.

You don't need to specify additional details in the Component Inspector for this 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:

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.

Position the component over the graphic in your creative that you want to use as the close button.

You don't need to specify additional details in the Component Inspector for this component.

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).