Expanding build guide

Set up an auto-collapse function

Auto-collapse automatically collapses an Expanding creative after a set period of time. Publishers often require that auto-expanding creatives auto-collapse after a set time, in addition to a manual close button requirement.

Other articles in this guide explain how to add the Expanding component to a creative and use the API to set up a basic collapse function. The same API for basic collapse also lets you set up an expanded panel to auto-collapse.

How do I set up the auto-collapse function?

Call the expanding.collapse(); method in the expanded child panel that you want to close.

Studio reminder

Whenever you make a call to the Expanding class from the DoubleClick Studio API in a new file, be sure to import the StudioClassAccessor and get a reference to the Expanding class with this code:
import com.google.ads.studio.utils.StudioClassAccessor;

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

Commonly, there are two times to call this method to set up an auto-collapse:

  • at the end of a timeline animation when you want your panel to close
  • at the end of Flash timer countdown function

The AS3 code snippet below shows you how to call the collapse function after an eight-second Flash timer countdown. (For more information, see the AS3 Flash Timer class.) The snippet includes an extra function that lets the panel detect user interaction with the ad using the DoubleClick StudioEvent API. When a user interacts, a function fires to stop the timer so the collapse function isn't called and the panel stays open.

AS3 code snippet
import com.google.ads.studio.events.StudioEvent;
import com.google.ads.studio.utils.StudioClassAccessor;
import flash.utils.Timer;

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

// Create a timer and auto-collapse after 8 seconds
var timer:Timer = new Timer(8000,1);
    timer.start();

var timerCompleteHandler:Function = function(event:TimerEvent):void {
    expanding.collapse();
}

// Create a function to stop auto-collapse on user interaction
var onInteractionHandler:Function = function(event:StudioEvent):void {
    timer.stop();
}

timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerCompleteHandler);
enabler.addEventListener(StudioEvent.INTERACTION, onInteractionHandler);

How do I set up an auto-collapse panel and a user-close panel?

To set up two different panels, add two different child panels to the Expanding component. You can add expanded child panels while you add the Expanding component to your parent file. In this example, the two child panels are auto and user.

  1. Set up the child auto to auto-collapse
    Open the Expanding component's Component Inspector in the parent file. Assign the name auto to the child panel that you want to auto-collapse.

    Call the expanding.collapse(); method either at the end of an animation timeline or through a timer collapse function.

  2. Set up the child user to close through user-close
    Open the Expanding component's Component Inspector in the parent file. Assign the name user to the child panel that you want to expand on user interaction.

    In the user-expanded panel, remove the expanding.collapse(); method that you set up in the auto-expanded panel.

  3. Set up the child user to expand on click
    In the collapsed panel, set up a Click object to make a call to the expand method expanding.expand("user").

    If you already set up a custom expand button following the instructions in Set up a basic expansion, add the child panel name user to the existing expand function.