Stop JS Game on Exit in DoubleClick Expanding Rich Media Banner Ad

Question

Building the container for an HTML5 game in GWD that is played in an expanded banner ad and can't figure out how to stop the game script when the exit button is clicked. For example, the sounds continue to play in the background even though the banner is in the unexpanded/closed state.

Help please! I'm more of a designer than a coder and have spent quite a bit of time trying different solutions... I'm sure it is an obvious, simple fix but I just can't see it.

Thank you in advance.

Here's the relevant code:

<script>

function init() {
  canvas = document.getElementById("canvas");
  images = images || {};

  var loader = new createjs.LoadQueue(false);
  createjs.Sound.alternateExtensions = ["mp3"];
  loader.installPlugin(createjs.Sound);
  loader.addEventListener("fileload", handleFileLoad);
  loader.addEventListener("complete", handleComplete);
  loader.loadManifest(lib.properties.manifest);
}

function handleFileLoad(evt) {
  if (evt.item.type == "image") {
    images[evt.item.id] = evt.result;
  }
}

function handleComplete() {
  exportRoot = new lib.PPD_CDW_HyperWiper();

  stage = new createjs.Stage(canvas);
  stage.addChild(exportRoot);
  stage.update();

  createjs.Ticker.setFPS(lib.properties.fps);
  createjs.Ticker.addEventListener("tick", stage);
} 

</script>

<script type="text/javascript" id="gwd-init-code">
(function() {      
  document.body.style.opacity = "0";
  var gwdAd = document.getElementById('gwd-ad');
  /**
   * Handles the DOMContentLoaded event. The DOMContentLoaded event is
   * fired when the document has been completely loaded and parsed.
   */

  function handleDomContentLoaded(event) {
    // This is a good place to show a loading or branding image while
    // the ad loads.
    document.getElementById('loading').style.display = 'block';
  }

  /**
   * Handles the WebComponentsReady event. This event is fired when all
   * custom elements have been registered and upgraded.
   */
  function handleWebComponentsReady(event) {
    document.body.style.opacity = "";


    // Start the Ad lifecycle.
    setTimeout(function() {
      gwdAd.initAd();
    }, 0);
  }

  /**
   * Handles the event that is dispatched after the Ad has been
   * initialized and before the default page of the Ad is shown.
   */
  function handleAdInitialized(event) {
    // This marks the end of the polite load phase of the Ad. If a
    // loading image was shown to the user, this is a good place to
    // remove it.
     document.getElementById('loading').style.display = 'none';
  }

  window.addEventListener('DOMContentLoaded',
    handleDomContentLoaded, false);
  window.addEventListener('WebComponentsReady',
    handleWebComponentsReady, false);
  window.addEventListener('adinitialized',
    handleAdInitialized, false);
  })();
 </script>

And here is where I think the code I need will go:

gwd.handleClose_buttonAction = function() {
  // GWD Predefined Function
  gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'banner-page');

};

Answer 1

The best way to handle this is via a custom event.

From the event panel add a new event.I guess connected to the same tap area where you attached the exit function. As action, choose custom code. In the callback function, you can write custom code that will be executed when the user click the exit button.

For instance you can write something like createjs.Sound.pause() in order to pause the sounds. Please check the createjs API to evaluate additional commands to execute in the callback.