17 Replies Latest reply on Oct 22, 2015 7:30 AM by Astarte01

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

    dajupe Level 1

      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.

        • 1. Re: Bug. Can't put two Edge Animate animations on same page
          Vinod Menon@Adobe Adobe Employee

          Hi Julian

          Happy to know responsive scaling is working for you. When you say two animations in same page, are they two instances of same edge composition?

           

          Regards
          Vinod

          • 2. Re: Bug. Can't put two Edge Animate animations on same page
            vivekuma Adobe Employee

            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

            • 3. Re: Bug. Can't put two Edge Animate animations on same page
              dajupe Level 1

              Hi Vinod and Vivekuma.

              Excusy if my post was sounding a little belligerent, I understand this program would be tricky to make work properly!

              The comps are two different animations of different size and length. I am going to go through the instructions above to see if I can

              get them to work. I have noticed the code has changed since the last update. Hopefully your instructions will get me through the problem.

              It was a bit of a downer to finally have the responsive design working properly (I have been trawling the net for sometime to find a fix to the prob), only

              to have your animations disappear on the same  day. I will let you know how things go. Thanks for getting back

              • 4. Re: Bug. Can't put two Edge Animate animations on same page
                dajupe Level 1

                Hi Vivekuma.

                Is the example above for an instance of the same animation or can it be used with two different animations? I never had any problems putting two different animations on the same html page in the past. Cheers

                • 5. Re: Bug. Can't put two Edge Animate animations on same page
                  dajupe Level 1

                  If anyone has a moment here is the code for the animations.

                   

                   

                  <!--Adobe Edge Runtime-->

                  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

                  <script>

                    var custHtmlRoot="edgeanimate_assets/new_indigo_logo/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: "both",

                      centerStage: "none",

                      minW: "0",

                      maxW: "299px",

                      width: "299px",

                      height: "234px"

                  };

                    opts.htmlRoot =custHtmlRoot;

                    AdobeEdge.loadComposition('new_indigo_logo', 'EDGE-826742', opts,

                    {"dom":{}}, {"dom":{}});

                    script.onload = script.onreadystatechange = null;

                    head.removeChild(script);

                    }

                    };

                    head.appendChild(script);

                    </script>

                  <style>

                          .edgeLoad-EDGE-826742 { visibility:hidden; }

                      </style>

                  <!--Adobe Edge Runtime End-->

                  <!--Adobe Edge Runtime-->

                  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

                  <script>

                    var custHtmlRoot="edgeanimate_assets/scrolling_index/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: "both",

                      centerStage: "none",

                      minW: "0",

                      maxW: "600px",

                      width: "600px",

                      height: "234px"

                  };

                    opts.htmlRoot =custHtmlRoot;

                    AdobeEdge.loadComposition('scrolling_index', 'EDGE-5049622', opts,

                    {"dom":{}}, {"dom":{}});

                    script.onload = script.onreadystatechange = null;

                    head.removeChild(script);

                    }

                    };

                    head.appendChild(script);

                    </script>

                  <style>

                          .edgeLoad-EDGE-5049622 { visibility:hidden; }

                      </style>

                  <!--Adobe Edge Runtime End-->

                  </head>

                  <body>

                    <div class="gridContainer clearfix">

                      <div id="pgeCont" class="fluid ">

                      <header id="pgeHeader" class="fluid ">

                    <div id="logoContainer" class="fluid ">

                      <div id="Stage" class="EDGE-826742"></div>

                    </div>

                    <div id="prodAnimCont" class="fluid ">

                      <div id="Stage2" class="EDGE-5049622"></div>

                    </div>

                      </header>

                      </div></div>

                  </body>

                  </html>

                   

                   

                   

                  I tried changing the visibility to visible but it didn't work. I tried some tests with some simpler html and the results were the same.

                  I have put the animations in different wrapper set ups to no avail. I am obviously no code pro however I have had no problems with

                  this in the past until this update. I hope it is something simple that I am doing wrong here. If anyone could have a look at the code

                  I have pasted here that would be awesome. Thanks for your time. Julian

                  • 6. Re: Re: Bug. Can't put two Edge Animate animations on same page
                    vivekuma Adobe Employee

                    Use this, I have done the modification required:

                    <!--Adobe Edge Runtime-->
                    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
                    <script>
                      var custHtmlRoot="edgeanimate_assets/new_indigo_logo/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: "both",
                        centerStage: "none",
                        minW: "0",
                        maxW: "299px",
                        width: "299px",
                        height: "234px"
                    };
                      opts.htmlRoot =custHtmlRoot;
                      AdobeEdge.loadComposition('new_indigo_logo', 'EDGE-826742', opts,
                      {"dom":{}}, {"dom":{}});
                      script.onload = script.onreadystatechange = null;
                      head.removeChild(script);
                    
                      //2nd composition
                      (function(){
                      var custHtmlRoot="edgeanimate_assets/scrolling_index/Assets/";
                      var opts ={
                      scaleToFit: "both",
                      centerStage: "none",
                      minW: "0",
                      maxW: "600px",
                      width: "600px",
                      height: "234px"
                      };
                      opts.htmlRoot =custHtmlRoot;
                      AdobeEdge.loadComposition('scrolling_index', 'EDGE-5049622', opts,
                      {"dom":{}}, {"dom":{}});
                      })();
                    
                      }
                      };
                      head.appendChild(script);
                      </script>
                      <style>
                            .edgeLoad-EDGE-826742 { visibility:hidden; }
                            .edgeLoad-EDGE-5049622 { visibility:hidden; }
                        </style>
                    <!--Adobe Edge Runtime End-->
                    
                    
                    </head>
                    <body>
                      <div class="gridContainer clearfix">
                        <div id="pgeCont" class="fluid ">
                        <header id="pgeHeader" class="fluid ">
                      <div id="logoContainer" class="fluid ">
                        <div id="Stage" class="EDGE-826742"></div>
                      </div>
                      <div id="prodAnimCont" class="fluid ">
                        <div id="Stage2" class="EDGE-5049622"></div>
                      </div>
                        </header>
                        </div></div>
                    </body>
                    </html>
                    
                    • 7. Re: Re: Bug. Can't put two Edge Animate animations on same page
                      dajupe Level 1

                      Thanks for that vivekuma. I noticed that you moved the styles together, I will go through the code to see what other differences there are for future reference. Just out of interest sake is something I have done wrong here or is there more steps to take since the update that are not obvious at first glance? Thankyou once again I really appreciate it.

                      • 8. Re: Re: Bug. Can't put two Edge Animate animations on same page
                        dajupe Level 1

                        I think I see what you have done here. You have combined the runtime script as one entity instead of two I am thinking? I am going to try this new code out. I have since scrapped the last html page, to start over. Cheers

                        • 9. Re: Bug. Can't put two Edge Animate animations on same page
                          vivekuma Adobe Employee

                          Yes I did exactly that only, if you see my second-last comments you can compare "before" and "after" change code to compare what exact changes are required.

                          • 10. Re: Bug. Can't put two Edge Animate animations on same page
                            dajupe Level 1

                            Thanks again vivekuma. It can be tricky stuff this internet business! I will let you know how it all goes. Have just run into a problem with the fluid grid in the new DW so I will have to jump that hurdle before getting this right. Cheers mate

                            • 11. Re: Bug. Can't put two Edge Animate animations on same page
                              dajupe Level 1

                              Unfortunately it hasn't worked for me, the second animation has disappeared but the first stays. Luckily I can combine both the animations into one in EdgeAnimate for the time being. However I do believe this problem will pop up again in the future. In the older version of Edge Animate this was not a problem however in that version the divs below the animation were being pushed down the page when put into a html responsive design with in dreamweaver.

                              • 12. Re: Bug. Can't put two Edge Animate animations on same page
                                vivekuma Adobe Employee

                                You must have missed something.

                                Can you share your Dreamweaver project along with oam files? I want to see the changes you made after inserting second oam file, will try to make it work.

                                • 13. Re: Bug. Can't put two Edge Animate animations on same page
                                  dajupe Level 1

                                  Unfortunately time wise I am under the pump.

                                  Its O.K. for now. I have combined both animations into the one comp

                                  (as they are on the same part of the page).

                                  I will have to address it at some stage so I will try to emulate the code you

                                  have presented me again later on down the track.

                                  Thank you for your  response and time.

                                  Cheers from Julian.

                                  • 14. Re: Bug. Can't put two Edge Animate animations on same page
                                    dajupe Level 1

                                    It's been a while. I just wanted to thank Vivekuma for the help, it worked well

                                    • 15. Re: Bug. Can't put two Edge Animate animations on same page
                                      smosmurf

                                      Works well if you use the Edge 5.0.0:

                                      script.src = custHtmlRoot+"edge_includes/edge.5.0.0.min.js";


                                      But the Adobe Edge Animate 2015 use the new edge version:

                                      <script type="text/javascript" charset="utf-8" src="https://animate.adobe.com/runtime/6.0.0/" rel="nofollow">https://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js"></script>


                                      With the new 6.0.0 edge version it will not work.

                                      If I change the line 7:

                                      script.src = "http://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js";

                                      the following happens:

                                      The first stage plays perfect. The second one has no background color and and at the beginning of the animation I have a horizontal scrollbar (Thus, I see elements that should actually be hidden).


                                      Does anyone have a solution, I do not know if that's good, that I use the old 5.0 Edge version.

                                      • 16. Re: Bug. Can't put two Edge Animate animations on same page
                                        dajupe Level 1

                                        Hi smosmurf.

                                        I have run into the same problem. The difference being sometimes the second EA comp loads

                                        sometimes it does not. I have reposted the problem twice, but no one has answered. It

                                        is usually in chrome or firefox where it happens

                                        • 17. Re: Bug. Can't put two Edge Animate animations on same page
                                          Astarte01

                                          Hi to all.

                                           

                                          First time here as a poster, many months as a reader.

                                          Please excuse me for my bad english and if I will break some rules, hope it will not happen.

                                           

                                          I also have the same problem, but my EdgeAnimate files are five (5!) in a single Muse project.

                                          I can see them in Safari and in Chrome, not in Firefox.

                                          Even in Chrome sometimes they disappear. I've tested in many different systems and PC or Mac, same behavior.

                                          In FF sometimes the animations shows correctly but only in compulsive refreshing mode... Any time you refresh a single animation of the 5 on the stage loads.

                                           

                                          Here you can find my site, don't know if I can post the link.

                                           

                                          I've read the sample of @vivekuma, tomorrow I will try to understand the secrets inside the code (I'm not a code wizard, not sure I can understand a lot).

                                           

                                          Thanks to all for your help, bye.