10 Replies Latest reply: Sep 10, 2013 8:15 AM by AMULI RSS

    using conditional code with animate

    phillip-j Community Member

      Hi, I am trying to do something similar to this (generic html file with jquery):

       

      $(document).ready(function () {

      $( "#expand" ).click(function() {

        $( "#myname" ).animate({ "height": "+=50px" });

        $( ".myname" ).animate({ "top": "+=50px" });

      });

       

      $( "#contract" ).click(function(){

        $( "#myname" ).animate({ "height": "-=50px" });

        $( ".myname" ).animate({ "top": "-=50px" });

      });

      });

       

      So, when #expand is clicked an item #myname is expanded and some class .myname items move down. Clicking #contract reverses this.

       

      My edge code for a click on symbol named "r1" is below.

      (Similar code exists for symbol "r2")

      When I click r1 that symbol expands and the other items in class r1 all move down, OK.

      Next, if I click another symbol, ie r2, the r1 symbol must first contract before r2 can expand.

      This does not work. The item r1 does not contract -- but the class r1 does move up. I do not understand that.


      //close a playing symbol, then play the clicked symbol

      sym.$(playing).animate ({'height':'-=100px'}); // ... does not work

      sym.$("."+playing).animate ({'top':'-=100px'}); // ... does work

       

      --


       

      //r1.click


      //is any symbol is playing?

      var playing = sym.getComposition().getStage().getVariable("myGlobal");


      // nothing is playing

      if (playing == "nothing") {

       

      //set the global to show which was clicked

      sym.getComposition().getStage().setVariable("myGlobal", "r1");

      var playing = sym.getComposition().getStage().getVariable("myGlobal");

       

      // play the clicked symbol

      sym.$(playing).animate ({'height':'+=100px'});

      sym.$("."+playing).animate ({'top':'+=100px'});

      }

       

      // do nothing if I am playing already

      else if (playing == "r1"){

      }

       

       

      //close a playing symbol, then play the clicked symbol

      else {

      sym.$(playing).animate ({'height':'-=100px'});

      sym.$("."+playing).animate ({'top':'-=100px'});

       

      //update the global to which was clicked

      sym.getComposition().getStage().setVariable("myGlobal", "r1"); // this would use a different value if a different symbol was clicked

      var playing = sym.getComposition().getStage().getVariable("myGlobal");

       

      // play the clicked symbol

      sym.$(playing).animate ({'height':'+=100px'});

      sym.$("."+playing).animate ({'top':'+=100px'});

      }

       

      ---

       

      Apologies for long post

       

      phillip-j

        • 1. Re: using conditional code with animate
          resdesign CommunityMVP

          Hey Phil, can you post your file?

          • 2. Re: using conditional code with animate
            phillip-j Community Member

            folder unzips to "web"

             

            https://app.box.com/s/uxr8pthh4gcytmo7ge3a

             

            this is the web export - is that OK?

            • 3. Re: using conditional code with animate
              resdesign CommunityMVP

              Yes - I will look at it shortly!

              • 4. Re: using conditional code with animate
                AMULI Community Member

                Hi Phillip,

                 

                See the following thread, where a solution for such a problem is detailled and where you'll find a link to download an example file :

                 

                http://forums.adobe.com/message/5410456#5410456

                 

                Gil

                • 5. Re: using conditional code with animate
                  resdesign CommunityMVP

                  Gil is right. I looked at your file and I believe you need to rethink your approach.

                  • 6. Re: using conditional code with animate
                    phillip-j Community Member

                    Thanks Gil, I will not be at my desktop untill later to look at your sample in detail. Looking forward to it,

                     

                    Phillip

                    • 7. Re: using conditional code with animate
                      phillip-j Community Member

                      I see how the event target is passed to the stage and the function is called. Thanks for that example. When a symbol is clicked I use

                       

                      //click on Stage_r13_r1

                      sym.tracking(e);

                       

                      In your file you play the symbol using sym.getSymbol(current).play(0). In my context, I want to animate the symbol (via ID name) - and then also animate several other symbols (via class name).

                       

                      So, I am going to make use of the event target like this: sym.$("#myId");

                       

                       

                      On my stage I have:

                       

                      sym.tracking = function(e)

                      {

                         myID = e.target.getAttribute("ID").split("_")[1];

                         var myIDFormat = '\'#' + myID + '\'';

                         sym.$(myIDFormat).animate({'height':'+=100px'}); //this line does not work

                      }

                       

                      I cannot get the function to animate the element.

                      • 8. Re: using conditional code with animate
                        AMULI Community Member

                        Hi Phillip,

                         

                        Did you check via console.log( myIDFormat); that you use the good ID ?

                         

                        Then, is this element with ID myIDFormat actually in the Stage symbol, or in another so you need sym.getSymbol('<parentSymbolName>').$(myIDFormat).animate() ?

                         

                        Test with hide() and show() before animate().

                         

                        Gil

                        • 9. Re: using conditional code with animate
                          phillip-j Community Member

                          Gill, thanks for your follow-up.

                           

                          So, to animate the symbol or play it I can use:

                           

                          sym.tracking = function(e)

                          {

                             myID = e.target.getAttribute("ID").split("_")[1];

                             mySymbolName = "'" + myID + "'";

                             sym.$(myID).animate({'top':'+=100px'}); //this works,no quotes

                             // also works with quotes - sym.$(mySymbolName).animate({'top':'+=100px'});

                             sym.getSymbol(mySymbolName).play(0); //this works, needs quotes

                          }

                           

                          So I can address it as $(myID) or $(mySymbolName) and then animate in this context (with or without quotes)

                          However, while the value of myID is  - smBox - I cannot address it as $(smBox)

                           

                          sym.$(smBox).animate({'top':'+=100px'}); //this does not work

                           

                          Does the fact that the variable myID was made from the attribute of an object make it functionally different than the equivalent text? It seems to me that $(myID) ought not to work, but does.

                           

                          Also, how do I view the console log?

                          • 10. Re: using conditional code with animate
                            AMULI Community Member

                            Hi Phillip,

                             

                            Thank you for your feedback (I do not clearly understand the reason why some of your animate() statements work and others don't. I am busy for the moment, but I want to elucidate that later, it's interesting).

                             

                            Also, how do I view the console log?

                             

                            Personnally, I use Firebug : https://getfirebug.com/whatisfirebug

                             

                            Once you have installed that plugin, you activate it via the top right button with a bug icon (see screen capture : it's orange once activated).

                             

                            Then select the Console tab to view the results of your console.log() statements and any warnings.

                             

                            Another useful tab is Script, where after selecting <yourProject>_edgeAction.js in the files menu, you can define a breakpoint by clicking the line number of a statement. And from then, like with any debugger, go on executing step by step, and inspect variable values in the Spy pane on the right.

                             

                            Chrome or Safari developer tools have similar features.

                             

                            Gil

                             

                            Capture d’écran 2013-09-10 à 16.56.47.png