Expanding build guide

Add the Expanding component

How do I add the Expanding component to my creative?

To set up the Expanding component , add it to your creative along with an empty movieclip. The component determines your ad's position on the page and the expand direction. It also handles the loading and unloading of the expanded child panel into the movieclip. Before deciding how your ad expands and collapses, we recommend that you add the component, the movieclip, and the expanded child panel that you want to display.

An Expanding creative uses child panels to act as the expanded portion of your ad. You can use the Expanding component to add as many child panels to your creative as you like.

There are several advantages to using child panels:

To add a child panel, click Add new child in the Expanding component expanding panel.

Child name: This name is for an internal reference for the component and API.

SWF file name: Enter the file name of the expanded panel SWF.

Target MovieClip instance: Enter the instance name expandedHolder. Make sure this name matches the instance name of the empty movie clip you created in the previous step.

(optional) Add child panels: You can allow users to load different expanded panels by adding multiple children. If you check the Unload SWF box, a new child panel will expand into the same MovieClip instance while the open panel collapses.










  1. Define the collapsed area with the Expanding component

    1. Open the parent file and drag the Expanding component  onto the stage.
    2. Resize the component so it matches the size and position of your collapsed creative.
      You can move or resize it using the Free Transform tool (shortcut: Q) or by editing the Flash properties panel.
      • Whatever the component covers on the stage will be visible when the parent file loads on a page. When the ad serves on a page, anything on the stage that isn't covered by the component will be hidden until the creative is expanded.


  2. Add an empty movieclip to load in the expanded panel

    1. Add an empty movieclip to the parent file. Make sure you add it to a layer above the Loader component, as you want the expanded panel to load in over the collapsed content.
    2. Position it where you want the expanded panel SWF to load into the parent file.
    3. Give it an instance name of (expandedHolder). In the next step, you will reference this instance name in the Component Inspector. This is the movieclip where the expanded child file will load.


  3. Add expanded child panel(s)

    • The file size of the children isn't included in the initial load size that's downloaded on the page.
    • The Expanding component handles the state of the overall creative so that multiple children don't expand at once.
    • You can track child metrics separately to see which panels receive the most views and interaction.

Try It!

Add the Expanding component to your creative:

  1. Add the Expanding component and an empty movieclip container to the parent file.
  2. Click Add new child details in the Expanding component's Component Inspector and enter all the details.


Was this article helpful?