Bug. Can't put two Edge Animate animations on same page

Question

Alrighty. Just thanked Adobe for fixing responsive scaling issue. Now there seems to be a new one. When I put two Edge Animate animations on the same page, they both disappear entirely from view! Both in live view (or what was fluid grid view) and when trying to preview in any browser. The responsive design is working great but if I put two animations on the same page they both just disappear! GONE!
Maybe there is some code I can use to stop this from happening. I have done a number of tests over the last hour or so. My smile (from the responsive fix) is now a frown again. I can not continue to work like this. Please let me know if there is something I am doing wrong. I could have two animations in one page no worries before this release but the responsive design wasn't working properly. NOW the responsive design works but I can not have MORE THAN ONE ANIMATION on same page. Thanks for your time. Kind regards Julian.

Answer 1

Hi Julian,
First, in general, you can't create two instances of the same edge composition (this is not supported by EdgeRuntime), to be used in the same file.
But if you want to use same composition multiple times, then follow the steps to create multiple copies to be treated as multiple instances:
    1. Open the composition whose multiple instance you want to use.
    2. Change the "Composition Class" to some other value
    3. Do a SaveAs and save it to create another copy of the same composition. // This copy can be treated as an instance.
    4. Repeat the steps 2 to 4, to create multiple copies of the same composition, and you will end up creating multiple instances.
Second, you need to do small changes manually in the DreamWeaver html file.
    So, right now if you import two Edge Compositions in the html page, it will come as follow in the html <head/> section:
Before Modification: Dropbox - problem.rar
<!--Adobe Edge Runtime-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script>
  var custHtmlRoot="Untitled-1/Assets/";
  var script = document.createElement('script');
  script.type= "text/javascript";
script.src = custHtmlRoot+"edge_includes/edge.5.0.0.min.js";
  var head = document.getElementsByTagName('head')[0], done=false;
  script.onload = script.onreadystatechange = function(){
  if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
  done=true;
  var opts ={
    scaleToFit: "width",
    centerStage: "none",
    minW: "0",
    maxW: "undefined",
    width: "550px",
    height: "400px"
  opts.htmlRoot =custHtmlRoot;
  AdobeEdge.loadComposition('Untitled-1', 'EDGE-1372833673', opts,
  {"dom":{}}, {"dom":{}});
  script.onload = script.onreadystatechange = null;
  head.removeChild(script);
  head.appendChild(script);
  </script>
<style>
        .edgeLoad-EDGE-1372833673 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->
<!--Adobe Edge Runtime-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script>
  var custHtmlRoot="Untitled-2/Assets/";
  var script = document.createElement('script');
  script.type= "text/javascript";
script.src = custHtmlRoot+"edge_includes/edge.5.0.0.min.js";
  var head = document.getElementsByTagName('head')[0], done=false;
  script.onload = script.onreadystatechange = function(){
  if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
  done=true;
  var opts ={
    scaleToFit: "width",
    centerStage: "none",
    minW: "0",
    maxW: "undefined",
    width: "550px",
    height: "400px"
  opts.htmlRoot =custHtmlRoot;
  AdobeEdge.loadComposition('Untitled-2', 'EDGE-1372913196', opts,
  {"dom":{}}, {"dom":{}});
  script.onload = script.onreadystatechange = null;
  head.removeChild(script);
  head.appendChild(script);
  </script>
<style>
        .edgeLoad-EDGE-1372913196 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->
After Modification:Dropbox - resolved.rar
<!--Adobe Edge Runtime-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script>
  var custHtmlRoot="Untitled-1/Assets/";
  var script = document.createElement('script');
  script.type= "text/javascript";
  script.src = custHtmlRoot+"edge_includes/edge.5.0.0.min.js";
  var head = document.getElementsByTagName('head')[0], done=false;
  script.onload = script.onreadystatechange = function(){
  if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
  done=true;
  var opts ={
  scaleToFit: "width",
  centerStage: "none",
  minW: "0",
  maxW: "undefined",
  width: "550px",
  height: "400px"
  opts.htmlRoot =custHtmlRoot;
  AdobeEdge.loadComposition('Untitled-1', 'EDGE-1372833673', opts,
  {"dom":{}}, {"dom":{}});
  script.onload = script.onreadystatechange = null;
  head.removeChild(script);
  //For 2nd Composition
  (function(){
  var custHtmlRoot = "Untitled-2/Assets/";
  var opts = {
  scaleToFit: "width",
  centerStage: "none",
  minW: "0",
  maxW: "undefined",
  width: "550px",
  height: "400px"
  opts.htmlRoot =custHtmlRoot;
  AdobeEdge.loadComposition('Untitled-2', 'EDGE-1372913196', opts, {"dom":{}}, {"dom":{}});
  head.appendChild(script);
  </script>
  <style>
        .edgeLoad-EDGE-1372833673 { visibility:hidden; }
        .edgeLoad-EDGE-1372913196 { visibility:hidden; }  /* Styles from both composition can be merged together, optional but good practice */
    </style>
<!--Adobe Edge Runtime End-->
Do let me know in case if it doesn't work.
hope it helps,
Vivekuma