8 Replies Latest reply on May 24, 2015 1:43 PM by lucab64206363

    2014.1 issue with multiple compositions on page

    jamacart

      Since updating, I'm unable to get multiple compositions to work on the same page. I'm using the setup outlined here: http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html#multiplecompositions

       

      For some reason, only the first animation I call in AdobeEdge.loadComposition loads at all. The rest don't load and there are no error messages. Here's my .html file setup:

       

      <!--Adobe Edge Runtime-->

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

      <script type="text/javascript" charset="utf-8" src="/_js/edge/edge_includes/edge.5.0.0.min.js"></script>

       

          <!-- load animations -->

        <style>

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

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

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

          </style>

        <script>

          AdobeEdge.loadComposition('/_js/edge/laptop', 'EDGE-235976427', {

           scaleToFit: "width",

           centerStage: "horizontal",

           minW: "0",

           maxW: "1010px",

           width: "671",

           height: "441"

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

       

       

          AdobeEdge.loadComposition('/_js/edge/about', 'EDGE-124716880', {

        scaleToFit: "width",

        centerStage: "horizontal",

        minW: "0",

        maxW: "1010px",

        width: "1010",

        height: "590"

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

       

       

        AdobeEdge.loadComposition('/_js/edge/personalizedcontent', 'EDGE-124716881', {

        scaleToFit: "width",

        centerStage: "horizontal",

        minW: "0",

        maxW: "1010px",

        width: "1010",

        height: "590"

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

        </script>

      <!--Adobe Edge Runtime End-->

       

      <div id="Stage-laptop" class="EDGE-235976427"></div>

      <div id="Stage-about" class="EDGE-124716880"></div>

      <div id="Stage-personalize" class="EDGE-124716881"></div>

        • 1. Re: 2014.1 issue with multiple compositions on page
          TMEDIA

          I am also experiencing this issue.  I am presently having to author content in version 2014 because of this problem. 

           

          Adobe, could you please address this issue?

           

          Thanks!

          • 2. Re: 2014.1 issue with multiple compositions on page
            jamacart Level 1

            Ok, here's how we were able to get it working. Definitely sort of a hack, but it should get you up and running until Adobe fixes the issue. The problem is that Edge was having trouble loading multiple animations simultaneously.

             

            By putting the loadCompositions inside of functions, like this:

             

            function edge1(){

                AdobeEdge.loadComposition('/_js/edge/laptop', 'EDGE-235976427', {

                 scaleToFit: "width",

                 centerStage: "horizontal",

                 minW: "0",

                 maxW: "1010px",

                 width: "671",

                 height: "441"

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

              }

              window.edge2 = edge2;

              function edge2(){

                AdobeEdge.loadComposition('/_js/edge/about', 'EDGE-124716880', {

              scaleToFit: "width",

              centerStage: "horizontal",

              minW: "0",

              maxW: "1010px",

              width: "1010",

              height: "590"

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

              }

              window.edge3 = edge3;

              function edge3(){

              AdobeEdge.loadComposition('/_js/edge/personalizedcontent', 'EDGE-124716881', {

              scaleToFit: "width",

              centerStage: "horizontal",

              minW: "0",

              maxW: "1010px",

              width: "1010",

              height: "590"

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

                }

                setTimeout(edge1, 0);

             

             

            And then adding setTimeouts into the creationComplete functions, like this:

             

            Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {

                    setTimeout(window.edge2, 0);

                  });

             

            We're able to run each subsequent animation only once the previous one has been loaded.

            • 3. Re: 2014.1 issue with multiple compositions on page
              TMEDIA Level 1

              Thanks for posting your work around.

               

              This doesn't work in our current case.  We have some other nuances to our page including loading the edge content into an iframe, which may or may not be causing other issues - we are seeing evidence of other issues in 2014.1, so are going back to authoring in 2014 for the time being.

              • 4. Re: 2014.1 issue with multiple compositions on page
                dharmk Adobe Employee

                I have shared a sample @ Dropbox - multipleComps.zip which is created in CC 2014.1. You can use it for reference.

                Loading the actual compositions from a different folder is easier now. Assuming that your actual compositions are under a folder called mycomps, then you can change the loadComposition call to include htmlRoot parameter as follows:

                 

                AdobeEdge.loadComposition('comp1', 'EDGE-1814210607', {scaleToFit: "none",centerStage: "both", bScaleToParent: true, htmlRoot: "mycomps/"}, {"dom":[]}, {"dom":[]});

                 

                Let us know if you are still facing any issues with this.

                 

                -Dharmendra

                • 5. Re: 2014.1 issue with multiple compositions on page
                  jamacart Level 1

                  The root htmlRoot option is extremely helpful, but doesn't seem to fix the loading issue across the board. I'm still seeing loading issues with subsequent animations on iOS, for example, that only my fix above takes care of completely.

                   

                  Also, I didn't know about bScaleToParent. Was wondering why my animations stopped scaling properly, so this fixes that. Thanks!

                   

                  I'll go ahead and mark your answer as correct, since I have things working properly now and there may be some other issue specific to my setup that's causing this.

                  • 6. Re: 2014.1 issue with multiple compositions on page
                    dharmk Adobe Employee

                    Sure, Thanks! Let us know if you are facing any other issue.

                     

                    -Dharmendra

                    • 7. Re: 2014.1 issue with multiple compositions on page
                      killahfhonix

                      Hi Dharmendra. How do I unload a composition? AdobeEdge.unloadComposition(compId) perhaps?

                       

                      Im doing something, and getting errors on callback. So im thinking may unloading the composition, and loading would solve it.

                      • 8. Re: 2014.1 issue with multiple compositions on page
                        lucab64206363

                        Hi! I have this code but.. StageA have a fixed width in px and i can load it, but stage B have % width and i can't load it. WHY? What is the problem?

                         

                         

                         

                        <!DOCTYPE html>

                        <html>

                        <head>

                          <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>

                          <title>Loading multiple compositions</title>

                         

                         

                            <script type="text/javascript" charset="utf-8" src="edge_includes/edge.5.0.1.min.js"></script>

                         

                         

                            <style>

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

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

                            </style>

                          <script>

                                var l = window.innerWidth;

                                if (l > 1200) {

                          AdobeEdge.loadComposition('comp1', 'EDGE-426031120', {scaleToFit: "none",centerStage: "both", bScaleToParent: true}, {"dom":[]}, {"dom":[]});

                                } else {

                          AdobeEdge.loadComposition('modello', 'EDGE-148453847', {scaleToFit: "none",centerStage: "both", bScaleToParent: true}, {"dom":[]}, {"dom":[]});

                                }

                          AdobeEdge.bootstrapCallback(function(compId) {

                          console.log("Composition loaded...", compId);

                          });

                               

                          </script>

                        </head>

                        <body style="margin:0;padding:0;">

                          <div id="StageA" class="EDGE-426031120">

                          </div>

                          <div id="StageB" class="EDGE-148453847">

                          </div>

                        </body>

                        </html>