5 Replies Latest reply on Dec 22, 2015 3:45 AM by jonathann67223665

    Can I console.log from inside a click event in Edge Animate?

    jonathann67223665

      I am trying to work out why my console.log command throws an event handler error when I put it into a click event.

      My Javascript is not good enough to know if this is specific to Edge, or a more global JS thing.

      Here is my code:

       

      (function($, Edge, compId){
      var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

      //Edge symbol: 'stage'
      (function(symbolName) {


      Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
      // insert code to be run when the symbol is created here
      var want = true;
      console.log(want);

      });
      //Edge binding end

      Symbol.bindElementAction(compId, symbolName, "${Rectangle}", "click", function(sym, e) {
      // insert code for mouse click here
      console.log(want);

      });
        //Edge binding end

      })("stage");
      //Edge symbol end:'stage'

      })(window.jQuery || AdobeEdge.$, AdobeEdge, "EDGE-26284910");

       

       

       

      The first console.log after creationComplete works fine, the next one in the click event does not work, and I have no idea why. Can anyone enlighten me?

      Thanks

        • 1. Re: Can I console.log from inside a click event in Edge Animate?
          joel_pau Level 5

          Hi,

           

          It would be long to explain: javascript variable and function scopes.

           

          You have to understand that variables are available inside their own panel. I mean code panel.

          Your "want" variable is local and not global because you set: var want = true;

          If you want a global variable, you have to use: sym.setVariable("want", true);

          Now you can call it within another code panel using: sym.getVariable("want");

          (function($, Edge, compId){

          var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

           

          //Edge symbol: 'stage'

          (function(symbolName) {

           

           

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

          // insert code to be run when the symbol is created here

          sym.setVariable("want", true);

          console.log( sym.getVariable("want") ); // it returns true

           

          });

          //Edge binding end

           

          Symbol.bindElementAction(compId, symbolName, "${Rectangle}", "click", function(sym, e) {

          // insert code for mouse click here

          console.log(sym.getVariable("want") ); // it returns true, so a conditional statement can be:

          if (sym.getVariable("want")) { console.log ("want=true") } else { console.log ("want=false") }

           

          });

            //Edge binding end

           

          })("stage");

          //Edge symbol end:'stage'

           

          })(window.jQuery || AdobeEdge.$, AdobeEdge, "EDGE-26284910");

          • 2. Re: Can I console.log from inside a click event in Edge Animate?
            joel_pau Level 5

            I must specify that your case has one and only one symbol ("Stage").

            Between symbols, you have to add: sym.getComposition().getStage()

            I resume:

            • Within one symbol: sym.setVariable() and sym.getVariable();
            • Between symbols: sym.getComposition().getStage().setVariable() and sym.getComposition().getStage().getVariable()
            • 3. Re: Can I console.log from inside a click event in Edge Animate?
              jonathann67223665 Level 1

              Thanks, that does make sense. Am I right in thinking then that in usual JS code I could have declared the var at the top and used it wherever I wanted later on? This problem is only Edge-specific, ie that the code panels have their own sacrosanct scope that you have to break free from in order to grasp previously-defined variables?

              • 4. Re: Can I console.log from inside a click event in Edge Animate?
                joel_pau Level 5

                jonathann67223665 a écrit:

                 

                1) Am I right in thinking then that in usual JS code I could have declared the var at the top and used it wherever I wanted later on?

                 

                Yes, but where is the top and how to get it?

                (function($, Edge, compId){

                var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

                 

                //Edge symbol: 'stage'

                (function(symbolName) {

                // Stage top is here. You get it press the "full code button" or "Stage".

                var want = true;

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

                console.log(want); //it returns true

                 

                });

                //Edge binding end

                 

                Symbol.bindElementAction(compId, symbolName, "${Rectangle}", "click", function(sym, e) {

                console.log(want); //it returns true

                 

                });

                  //Edge binding end

                 

                })("stage");

                //Edge symbol end:'stage'

                 

                })(window.jQuery || AdobeEdge.$, AdobeEdge, "EDGE-26284910");

                 

                 

                2) This problem is only Edge-specific, ie that the code panels have their own sacrosanct scope that you have to break free from in order to grasp previously-defined variables?

                Yes and no.

                Yes and there is an overturn. You set sym.want = true inside a panel. So we have following code:

                (function($, Edge, compId){

                var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

                 

                //Edge symbol: 'stage'

                (function(symbolName) {

                 

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

                sym.want = true;

                console.log(sym.want); //it returns true

                 

                });

                //Edge binding end

                 

                Symbol.bindElementAction(compId, symbolName, "${Rectangle}", "click", function(sym, e) {

                console.log(sym.want); //it returns true

                 

                });

                  //Edge binding end

                 

                })("stage");

                //Edge symbol end:'stage'

                 

                })(window.jQuery || AdobeEdge.$, AdobeEdge, "EDGE-26284910");


                No because it's general javascript: javascript closures.

                 

                 

                Findings:

                Take a look at

                1) javascript scope ==> Demystifying JavaScript Variable Scope and Hoisting

                2) javascript closures ==> JavaScript Function Closures

                3) module pattern  ==> https://learn.jquery.com/code-organization/concepts/

                • 5. Re: Can I console.log from inside a click event in Edge Animate?
                  jonathann67223665 Level 1

                  Thanks a lot, I appreciate the help.