Expanding build guide

Set up a multi-directional expanding function

The DoubleClick Studio Expanding component and API also include a multi-directional expanding (MDE) feature that allows an Expanding creative to expand in multiple directions depending on where the ad is served on a page. You program the creative to detect its position and determine which direction to expand in.

For example, by enabling MDE functionality, you can have the same creative expand to the right when it’s served on the left side of the page and expand to the left when it’s on the right side of the page.

2 expanding ad images, one on left with inpage ad that expands right, and one on right with inpage ad that expands left

blue letter a Expand right

small green letter b Expand left

How do I set up an MDE creative?

You set up a multi-directional expanding creative like any other expanding creative with a few differences. Start by building a basic expand and collapse function, then follow these steps:

  1. Select Multi-directional in the Component Inspector (Shift+F7) of the Expanding component:
     

    Multi-directional: Select this box.

  2. Adjust the stage of the parent file to cover the size of all possible expansions

    As with a standard expanding creative, the stage of the parent file represents the expanded area of your creative. So make sure that the size of this stage covers the size of all possible expansions.

    For example, the stage size of the parent file for a 300x250 creative that expands to 500x250 both left and right must be 700x250.

    Need help figuring out the size of your parent file? Check this out!

    To calculate the total stage size of your MDE creative, first determine if the creative expands left and right, up and down, or both.


    height of expanded panel + (height of expanded panel - height of collapsed creative) = total height of stage
    • If the creative expands left and right, change the total width of your parent stage.
      width of expanded panel + (width of expanded panel - width of collapsed creative) = total width of stage
      Using the previous example of a 300x250 creative with a 500x250 panel that expands both left and right, the math looks like this: 500 + (500 - 300) = 700 (total width of stage in parent file)
       
    • If the creative expands up and down, change the total height of the parent stage.
    •  
    • If the creative expands in all directions, calculate both the width and the height of the stage by using the two formulas above.
  3. Add a movieclip holder to load MDE panels

    Multi-directional expanding units work by loading in child panels into different movieclip holders depending on where the creative is positioned on the page. As a result, you must have two movieclip holders in the parent file to tell the expanding creative where the child panel expands from.
       
    For example, a 300x250 creative that expands both left and right, must have two movieclip holders as pictured here:
       
       

        Add a movieclip named leftExpand_mc at 0,0 to hold the child that expands left.
        Add a movieclip named rightExpand_mc to 200,0 to hold the child that expands right.

         

    Need help figuring out where to place the movieclip holder? Check this out!

    To calculate where to put the movieclip holders, determine which direction your ad expands in:

    • If the creative expands left and right, set one empty movieclip at the 0,0. The other movieclip is moved on the x-axis. The x-coordinate equals the width of the expanded panel minus width of the collapsed creative.

      Using the previous example of a 300x250 creative with a 500x250 panel that expands left and right, place the movieclip for the left-expanding panel at 0,0, and the movie clip for the right-expanding panel at 200,0, since 500 - 300 = 200.

    • If the creative expands up and down, set one empty movieclip at 0,0. The other movieclip is moved on the y-axis. The y-coordinate equals the height of the expanded panel minus height of the collapsed creative.

      For example, for a 728x90 creative with a 728x250 panel that expands up and down, place the movieclip for the up-expanding panel at 0,0 and the movie clip for the down-expanding panel at 0,160, since 250 - 90 = 160.

    •  

  4. Add expanded child panels and associate them with movieclip holders
    For your ad to be multi-directional expanding, you must set up at least two child panels, one for each direction your ad expands in. For a creative that expands both left and right, set up two child panels with these settings in the Expanding component’s Component Inspector:
     
        Child Panel that expands left:
    • Child name: child_left
    • SWF file name1: left_expand_child.swf
    • Target MovieClip instance: leftExpand_mc
     
    Child Panel that expands right:
    • Child name: child_right
    • SWF file name1: right_expand_child.swf
    • Target MovieClip instance: rightExpand_mc

    1You have the option to expand a different child panel, depending on whether your ad expands left or right. In the SWF file name field, enter two different child SWFs or use one child to expand in either direction by entering the same SWF file name in both child panels.
     
    Adjust settings for a child panel in the Component Inspector 

    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.


  5. Associate the child panels with an expand direction

    Finally, after setting up child panels in the Component Inspector, set the expand direction of each panel using the Expanding API.
     
    Continuing with the child panels of the previous step, set the child named child_left to expand left and the child named child_right to expand right. To do this, define these directions in the ActionScript of the FLA that holds the Expanding component:
     

    expanding.setLeftChild("child_left");
    expanding.setRightChild("child_right");

        To set up other expanding directions, see Expanding API.
     
    There are three types of multi-directional expanding creatives:
    • ones that expand left/right
    • ones that expand up/down
    • ones that expand in four directions
    When setting up an expand direction such as top/left using setTopLeftChild("child_topLeft”);, you must set the other three directions as top/right, bottom/left, and bottom/right or you will generate an error.
        AS3 Code Snippet    
        import com.google.ads.studio.utils.StudioClassAccessor;
     
        // Get a reference to the Expanding class.
        var expanding:Object = StudioClassAccessor.getClass(StudioClassAccessor.CLASS_EXPANDING)["getInstance"]();
     
        // Set the expanding direction for each child panel.
              expanding.setLeftChild("child_left");
              expanding.setRightChild("child_right");
     

Studio reminder

To test that your MDE ad is expanding correctly, you must upload the creative to DoubleClick Studio and check it in the Preview tab. For more on testing your creative, see Custom dynamic preview page.