11 Replies Latest reply on Aug 20, 2014 10:12 AM by eliverrang

    Load variables from an external JavaScript file

    Medito

      Hi guys,

       

      I'm struggling with moving blocks of code out of my Stage.compositionReady event to an external JavaScript file and having it work the same way as if it was still placed there.

       

      I've tried to import the JS file into the library and I've also tried to parse it using yepnope function with no success. Basically it's just a set of variables that I want to organize into separate files that would be easier for me to modify out of Animate and eventually from an external back-end client.


      Any advice leading to successfully solving this issue will be greatly appreciated :-D.

        • 1. Re: Load variables from an external JavaScript file
          hemanthR Adobe Employee

          You can add your code as a property of some global object like AdobeEdge .

          Here is a example i have created

          Here is text field is set reading the variable from external script file on composition ready

          Than when you click on the rect the timeline playback stopped by a function in the script

          External.zip - Google Drive

          1 person found this helpful
          • 2. Re: Load variables from an external JavaScript file
            Medito Level 1

            Thank you very much hemanthR, I think this will do the trick. However, it appears that every variable has to be given AdobeEdge prefix both in JS file and Animate itself. I understand why now but it also means I'm not really cleaning up the code, just extending it to an external source as the variable calls still has to remain within Animate. What I originally thought was parsing the code "as is" from an external source. Is that even possible?

             

            So I could place this whole line into an external file and then parse it back to compositionReady unchanged rather then parsing just the variable I'm interested in changing in from the outside.

            sym.$("prog-prod-mon").css({height : '10px'});

            • 3. Re: Load variables from an external JavaScript file
              hemanthR Adobe Employee

              It need not be a proeprty of AdobeEdge object.It can be a property of a any global object or variable/function itself can be a global object.

               

              If you want to access stage and its components in an external script you can use

              var sym = AdobeEdge.getComposition(<composition id>).getStage();

              than

              sym.$("prog-prod-mon").css({height : '10px'});

               


              1 person found this helpful
              • 4. Re: Load variables from an external JavaScript file
                Medito Level 1

                Thank you for your effort hemanthR but I'm unable to reproduce it. Does the external JS need to be called somewhere else then in the script library to work?

                • 5. Re: Load variables from an external JavaScript file
                  hemanthR Adobe Employee

                  If you can post/explain a sample project of what you want to achieve,i will try to get it done.

                  • 6. Re: Load variables from an external JavaScript file
                    Medito Level 1

                    Well, I've already posted a sample line from the project and there are 460 like that at the moment in the compositionReady call. They are variables defining text content and css of the elements on the stage and since they need to be changed every day, I'd love to move them out of Animate so I didn't have to publish the project every time I make a change. I believe I could go for your first suggestion and I will, if there is none better, but I'd also like to clean up the mess in Animate so there's just the core functions while all the content and all the variables being parsed from the outside (and later modified on the server by a back-end client, ideally designed in Animate as well).

                    • 7. Re: Load variables from an external JavaScript file
                      Medito Level 1

                      Ok, so I'm sticking to your original suggestion and call variables from within a function inside a JavaScript file and it works as a snap! Thanks a lot hemanth ;-).

                      • 8. Re: Load variables from an external JavaScript file
                        StupidProgram Level 1

                        Would anyone be willing to explain the mechanics of this further? I simply have an edge animation that I'm trying to have invoke a .slideToggle (or just any old Jquery animation)

                        It's a menu button and it does nothing when you click it, only animates. I even tried giving the edge animation an id="menuanimation" so I could call it like any other HTML element but it doesn't work.

                         

                        $(document).ready(function(){
                        $('#menuanimation').click(function() {
                          $('.supermenu').slideToggle('slow');
                        });
                        });
                        

                         

                        I'm really unsure of how to talk to the adobe edge code and make it communicate with the rest of my website. Any explanation or simple help would be appreciated!

                        • 9. Re: Load variables from an external JavaScript file
                          eliverrang Level 1

                          I think this Javascript API document will give you what you want.

                          Adobe Edge Animate CC JavaScript API

                          You just have to be aware that javascript/jQuery (and Edge Animate) consists of objects that communicate with each other. To be able to send messages between these objects (or call functions), you have to use the full address of the objects to be able to communicate.

                          Your current example is the code for jQuery accessing elements in the html page object (The DOM). It is not sending anything to the Edge Animate Composition object.

                           

                          To give an example of providing a correct address (and finding it) the code for activating a nested timeline within a symbol takes the form:

                           

                          sym.getComposition().getStage().getSymbol("symbolName1").getSymbol("symbolName2").play(0);

                           

                          Looks complicated but it is simply a matter of being aware you have to start with a top object and drill down into its contents until you reach the object you want to communicate with. It will take a while to get your head around this concept but you'll find it well worth the effort.

                           

                          Peter Small

                          • 10. Re: Re: Load variables from an external JavaScript file
                            StupidProgram Level 1

                            Thank you for the link! That will definitely be of help.

                             

                            With this instance, it might be worth repeating what I understood of your post. Especially for other who come along trying to figure this out.

                             

                            Basically, to access Edge Animations you have to use the full address of what your calling upon.

                             

                            So say, Edge has a javascript for the animation called "menubars_edgeActions.js", and INSIDE of that javascript document you have this on the bottom:

                             

                            .....
                            Symbol.bindElementAction(compId, symbolName, "${_menubars}", "click", function(sym, e) {
                                     // insert code for mouse click here
                                     // Set a toggle to hide or show an element
                            
                            
                                
                                     sym.play("clickStart");
                                
                            
                            
                                  });
                            
                            
                            //Edge binding end
                            })("stage");
                            //Edge symbol end:'stage'
                            
                            
                            //=========================================================
                            
                            
                            //Edge symbol: 'bar'
                            (function(symbolName){})("bar");
                            //Edge symbol end:'bar'
                            
                            
                            //=========================================================
                            
                            
                            //Edge symbol: 'menubars'
                            (function(symbolName){})("menubars");
                            //Edge symbol end:'menubars'
                            })(jQuery,AdobeEdge,"EDGE-243835178");
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            

                             

                            I would like to use this animation object in a function. I wouldn't be sure whether to use "stage" or "menubars" (I really just want the entire thing to do something when clicked)

                            Say I had a function in another document called "myscript.js"

                            would I then define a variable, if I chose "menubars", and plug it in like so?

                             

                            var comp = sym.getComposition().getStage().getSymbol("menubars");
                            $(document).ready(function() {
                            $('comp').click(function () {$(document).ready(function(){
                                $("#supermenu").animate({width: 'toggle'});
                            });
                            });
                            
                            
                            
                            
                            

                             

                            I had tried this in my website, but couldn't get it to work.

                             

                            I understand the concept that you need to get more specific with edge animations, but it's probably easiest to just see where "the rubber meets the road" with this example.

                             

                            Thank you for looking and advising.

                            • 11. Re: Load variables from an external JavaScript file
                              eliverrang Level 1

                              I had this kind of problem myself a couple of weeks ago and found the answer myself, see Re: How can I use a custom js file to specify link destinations?

                               

                              The trick is to start with an object higher up: an object that encompasses the composition and external .js scripts. This object is AdobeEdge. This was explained earlier (above) by hemanth Kumar r. He explained,

                              "If you want to access stage and its components in an external script you can use

                              var sym = AdobeEdge.getComposition(<composition id>).getStage();"


                              Peter Small