8 Replies Latest reply on Oct 2, 2014 11:32 AM by David Repas

    Dynamically load edge animations using Jquery/Javascript

    David Repas Level 1

      Let's say that I have 100+ unique edge animations. I would like to programmatically/dynamically load these animations on-demand using Jquery/Javascript. HTML page cannot reload and cannot use iframes. The animation will load into a DIV - with subsequent animations loading into same DIV (in other words, based on the selection by the user) only one animation will be visible at a time (always loading into the same DIV).


      Each animation will have it's own set of js (_edgePreload.js, _edge.js, _edgeActions.js) and assets. These must be dynamically loaded (?getScript, etc.) as well as the Stage DIVS.


      Anyone have any thoughts or insight on how to go about doing this? Can it be done?



        • 1. Re: Dynamically load edge animations using Jquery/Javascript
          vivekuma Adobe Employee

          Lets look at the Edge comp .html file: (see the code between <!--Adobe Edge Runtime--> and <!--Adobe Edge Runtime End-->)

           

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

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

              <style>                                   //Composition specific

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

              </style>

               <script>                                   //Composition specific

                  AdobeEdge.loadComposition('TOA_anim', 'EDGE-15054241', {

                        scaleToFit: "both",

                        centerStage: "both",

                        minW: "0",

                        maxW: "undefined",

                        width: "750",

                        height: "612"

                    }, {"dom":[{"id":"preloader5","type":"image","tag":"img","rect":["331","262","88px","88px"," auto","auto"],"fill":["rgba(0,0,0,0)","images/preloader5.gif","0px","0px"]}]}, {"dom":[]});

               </script>

           

          And we need a div tag with the class="COMP_ID"

          ------------------------------------------------------------------------------------------ --------------------

           

          Now follow the following steps:

          1. Create 3 Javascript arrays:

               1st will contain each comp specific style info as shown above with comment  //Composition specific

               2nd will contain the script tag content as shown above with comment  //Composition specific

               3rd will contain all the compositions comp_IDs (to be used as class name for the div)

           

          2. Then you have to dynamically create and insert the <style> tag with the content from 1st array

          3. Then you have to dynamically create and insert the <script> tag with the content from 2nd array

          4. Then you have to dynamically change the class for the div where you want to insert the composition with class name from 3rd array.

          5. Put all the (_edgePreload.js, _edge.js, _edgeActions.js) files of all the comps in the same folder, and all images under the same images folder. All comps will reference the edge runtime file edge.min.js(this is common for all compositions) that is present in the edge_includes folder.


          hth,

          Vivekuma

          • 2. Re: Dynamically load edge animations using Jquery/Javascript
            David Repas Level 1

            Interesting, many thanks.

             

            I see that you're using "edge.5.0.0.min.js" and "AdobeEdge.loadComposition". Is there any documentation on "AdobeEdge.loadComposition", I can't seem to find anything.

             

            Thanks,

            David

            • 3. Re: Dynamically load edge animations using Jquery/Javascript
              vivekuma Adobe Employee

              "edge.5.0.0.min.js" is the edge runtime, which does the magic of creating and animating elements specified in the _edge.js json format.

              "AdobeEdge.loadComposition" is a function defined in "edge.5.0.0.min.js" which is the starting point to load the other js files like _edgePreload.js, _edge.js(this in-turn loads _edgeAction.js).


              hth,

              Vivekuma

              • 4. Re: Dynamically load edge animations using Jquery/Javascript
                David Repas Level 1

                So, I'm using the current version of Edge Animate (2014.0.1). With this version, the runtime that is utilized is "edge.4.1.1.min.js". I've tried using runtime "edge.5.0.0.min.js", but that seems to break my animations.


                I would love to (need to) do what you've described, but unfortunately, it doesn't seem to work with my version of Edge (and there doesn't seem to be any updates as of yet - or pre-releases).


                Any thoughts or additional information would be appreciated.

                • 5. Re: Dynamically load edge animations using Jquery/Javascript
                  vivekuma Adobe Employee

                  Ahh, sorry for that.

                  You need to use "edge.4.1.1.min.js" instead of "edge.5.0.0.min.js".

                   

                  "edge.5.0.0.min.js" is the new optimized and lightweight runtime that will be featured in the upcoming release of Edge Animate.

                  • 6. Re: Dynamically load edge animations using Jquery/Javascript
                    David Repas Level 1

                    Do you mean "edge.4.1.1.min.js" or "edge.4.0.1.min.js" - and if you do mean "edge.4.1.1.min.js" - would you have a link to that runtime?

                     

                    It doesn't appear that "edge.4.0.1.min.js" has the "AdobeEdge.loadComposition" function.

                     

                    Thanks!

                    • 7. Re: Dynamically load edge animations using Jquery/Javascript
                      vivekuma Adobe Employee

                      Oops, that function is in the new Edge runtime in upcoming release. My bad, my apologies.

                       

                      Let me rewrite the solution for the Present version of Edge Animate :

                       

                      So, the html content for present version of Edge is as : (only showing the sub-part)

                       

                      <!--Adobe Edge Runtime-->

                          <meta http-equiv="X-UA-Compatible" content="IE=Edge"> //Common to all composition

                          <script type="text/javascript" charset="utf-8" src="compX_edgePreload.js"></script> //Composition specific#1

                          <style>

                              .edgeLoad-EDGE-218035072 { visibility:hidden; } //Composition specific#2

                          </style>

                      <!--Adobe Edge Runtime End-->

                       

                      And we need a div tag with the class="COMP_ID" //Composition specific#3


                      ------------------------------------------------------------------------------------------ ---------------------------------------------------------------------------------


                      Now follow the following steps:

                      1. Create 3 Javascript arrays:

                           1st will contain each comp specific style info as shown above with comment  //Composition specific#2

                           2nd will contain the preload js file name (like "compX_edgePreload.js") as shown above with comment  //Composition specific#1

                           3rd will contain all the compositions comp_IDs (to be used as class name for the div) //Composition specific#3

                       

                      2. Then you have to dynamically create and insert the <style> tag with the content from 1st array

                      3. Then you have to dynamically create and insert the <script> tag with the src attribute from from 2nd array

                      4. Then you have to dynamically change the class for the div where you want to insert the composition with class name from 3rd array.

                      5. Put all the (_edgePreload.js, _edge.js, _edgeActions.js) files of all the comps in the same folder, and all images under the same images folder. The js file in edge_includes folder will be used by all compositions.


                      Sorry for the confusion.

                       

                      hth,

                      Vivekuma

                      • 8. Re: Dynamically load edge animations using Jquery/Javascript
                        David Repas Level 1

                        Thanks for the update. I've been able to do what you described, but still no luck. Problem appears that "_edgePreload.js" is never actually invoked after being inserted.

                         

                        I'm thinking that this will need a bit more to work - and some modifications to the edge js files as well. I came across this article: Using Adobe Edge Animations As Components | ANDREW TRICE

                         

                        Although a couple of years old, that tutorial describes modifications to _edgePreload.js and _edge.js in order to be able to invoke them after they have been inserted. I'm not sure if there are other ways of doing this or not.

                         

                        I'm guessing that (maybe) "edge.5.0.0.min.js" doesn't have all of these complications, since it has the "loadComposition" function - but I'm not entirely sure either way.

                         

                        Thanks.