Expanding build guide

Set up an animated collapse

What's an animated collapse?

An animated collapse lets you start up an animation sequence when a user closes your creative. This feature doesn't animate the creative. Rather, it allows the animation sequence to play before the ad returns to its collapsed state. To create an animated collapse, you must code the collapse animation into your SWF file. If your expanding creative doesn't have collapse animation, don't enable this feature.

How does an animated collapse work?

When a creative expands, an HTML div layer on a website expands to display the expanded panel.

Without an animated collapse, the close button or a call to the expanding.collapse() method immediately closes the HTML div layer. As a result, your expanded SWF is closed as well.

 


With an animated collapse, you get the HTML div layer to stay open while the collapsing animation runs. The div layer doesn't close until it's notified that the animation is complete.

How do I set up an animated collapse?

When collapse occurs, choose an option for starting your animation:

Go to and play frame... starts the animation by advancing to a frame in the timeline. In the field below, enter the key frame number of the expanded child panel that starts the animation.

Call function  starts the animation by calling a function. Enter a function name in the text field, for example, myCollapseFunction. Define this custom function in ActionScript either on the timeline or in the class files to start the animation.

 
  1. Set up a basic collapse function using a close button component or the API.
  2. Enable Animated collapse so it gets the HTML div layer to stay open when the close button is fired.
  3. Open the Expanding Component Inspector and in the Settings section, select Animated collapse.

  4. Define the start of the collapse animation:
  5. Make the HTML div layer close when the collapsing animation is complete.
    • Make a call to expanding.endAnimatedCollapse(); on the final frame of your collapsing animation timeline. This method tells the website that the collapsing animation is complete and that it's safe to close the HTML div layer.
    • Fire the expanding.endAnimatedCollapse(); method at the end of the animation to close the transparent HTML div layer. If the HTML div layer doesn't close after the animation, QA will reject your creative.
    • To ensure that the animated collapse is properly collapsed, the output section of your Flash should trace like this:

      Expanding component event: collapseComplete