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

DoubleClick Rich Media

Creative build guides

Floating build guide

Add a close button

Next: Add auto-close

What is a close button?

A close button lets a user close your Floating creative. Since a Floating creative floats on top of a page, publishers usually require a close button so that users can view page content under the ad.

Studio reminder

Every Floating creative must have a close button.

How do I add a close button?

There are three ways to add a close button to a DoubleClick Studio creative. You can:

Option 1: Use the 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).

When you add the Close Button component to a creative, you also tell the creative to track the number of times users manually close your ad. This metric is called Rich Media Manual Closes.

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 your creative.
  2. You don't need to specify additional details in the Component Inspector for this component.

Studio reminder

As a best practice, add the close button to one of the top-most layers in the Flash file to ensure that it isn't accidentally blocked by another layer.
Option 2: Use the Invisible Close Button Component
The Invisible Close Button component allows you to 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.

When you add the Invisible Close Button component to a creative, you also tell the creative to track the number of times users manually close your ad.  This metric is called Rich Media Manual Closes.

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 your creative.
  2. Position the component over the graphic in the creative you want to use as the close button.
  3. You don't have to specify additional details in the Component Inspector for this component.

Studio reminder

As a best practice, add the close button to one of the top-most layers in the Flash file to ensure that it isn't accidentally blocked by another layer.
Option 3: Use the API
To close a Floating ad, apply the enabler.close(); method to a click object.
In addition, call enabler.reportManualClose();, which enables Studio to track users' manual clicks to close the creative.

In this example, the display object uses the instance name closeBtnInstance.

AS3 code snippet

//Set up close button function
var closeClickHandler:Function = function(event:MouseEvent):void {
    enabler.close();
    enabler.reportManualClose();
}

closeBtnInstance.addEventListener(MouseEvent.CLICK, closeClickHandler);

Try it!

Set up a close button in your sample file by adding the Close Button component or the Invisible Close Button component or by using the API.

Next: Add auto-close

Related