16 Replies Latest reply on Sep 1, 2013 12:27 AM by AMULI

    How to reset symbols?

    thedeeman

      I'm still new at code and need help with resetting an animated symbol

       

      I used Elaine's tutorial "Leveraging Independent Symbol Timelines" to create 3 animated buttons that display on a page when clicking a 1 of my 4 menu options. The buttons work great however, they will not reset. When I click on one of the other 3 menu options (which jumps to another timline position where the symbols are not visible) and then come back to the menu with the buttons,  the last played symbol animation doesn't reset.  I want the symbols to reset to the way they were when i first visited the page any time I leave that section and come back.  I tried using the code below for the click action on each one of my other 3 menus but it keeps autoplaying the symbol animations?

       

      sym.getSymbol("myButton1").play(0);

      sym.getSymbol("myButton2").play(0);

      sym.getSymbol("myButton3").play(0);

       

       

      Here's the code I'm using for each of my buttons:

       

      var current = sym.getVariable("current");

      if (current != "") {

         sym.getSymbol(current).play("out");

         sym.getSymbol("myButton").play("in"); 

      }

      else {

         sym.getSymbol("myButton").play("in");

      }

      sym.setVariable("current", "meButton");

       

      Here's what I have for my Stage (compositionReady):

       

      sym.setVariable("current","");

       

       

      I greatly appreciate your help!!!

        • 1. Re: How to reset symbols?
          AMULI Level 4

          Hi thedeeman,

           

          I imagine that you use the 'in' and 'out' labels to identify to states of your button. Usually those states are static (not animated) so you use sym.getSymbol("myButton").stop("in"); .

           

          In the following thread, I have described the making of Flash-like buttons and Zaxist has completed with a button group logic (only one in the group is in the "active" state).

           

          Look at his code and especially

          • the WB variable which is the equivalent of your current ;

           

          • the reset function (defined as a property of a global object) which is a good way to solve your problem.

           

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

           

          And if it's too developper-savvy, do not hesitate to ask for all the needed clarifications.

           

          Gil

          • 2. Re: How to reset symbols?
            thedeeman Level 1

            Hi Amuli,

             

            Sorry, I guess I'm no understanding what the finished code would look like since my buttons have a 2 part animation.  I have "in" and "out" play actions on the timelines for each symbol.  I tried using sym.getSymbol("myButton").stop("in");
            but it's just automatically pausing at the last frame of the "in" action now.  I tried creating a stop action on my symbol timelines where I want the symbols to reset to but I think I'm messing up the code somehow.  I'd really appreciate it if you could show me how to form the code.  Thank you again for your help!

            • 3. Re: How to reset symbols?
              AMULI Level 4

              It's hard to figure out what you have in your mind, only from text descriptions and code snippets.

               

              May be you could Save as a simplified version of your project and load a ZIP of it on a dropbox. Then I could look at it and get you on a right track.

               

              Gil

              • 4. Re: How to reset symbols?
                elainecc Adobe Employee

                Hi, thedeeman-

                 

                Have you tried sym.stop(0); instead of sym.play(0)?  Note that sym.play will play from the label or time code, and stop will stop at the label or time code.  So when you use play(), it's going to "autoplay" as you mentioned in your original post.

                 

                Hope that clarifies some of the confusion.

                 

                Thanks,

                 

                -Elaine

                1 person found this helpful
                • 5. Re: How to reset symbols?
                  AMULI Level 4

                  Rereading your messages, I lack two much informations to be able to help you. Surely I could, but give me enough to build at first try a solution to your problem (and not to a neighboring one)

                   

                  What I still do not understand :

                   

                  1) you reset with a play(0) : 0 ms is not one of the in and out labels ? So there is a third label ?

                   

                  2) You use play() instead of stop(). So your button states are animated states. You play in a loop ?

                   

                  3) What do you want to reset ? "the way they were when i first visited the page" : do you mean all three in the out state ? Or do you mean in fact "the way they were when i left the page", that is any combination of {btn1: <in or out> ; btn2: <in or out> ; btn1: <in or out>}. ?


                  4) It seems that your intent is to store in current which of the three buttons is the current one in the in state. Correct ? In that case, there is a non explicited working hypothesis : at any given time, only one of the three is in the in state (the reason why I pointed you to the link where Zaxist treats that logic, akin to that of a radio button group).

                   

                  5) meButton ???

                   

                  6)

                  I tried using sym.getSymbol("myButton").stop("in");

                   

                  This is no hint : it depends where you place this statement. And I feel your problem is here : the correct place for your code.

                   

                  7)

                  sym.getSymbol("myButton").stop("in");
                  but it's just automatically pausing at the last frame of the "in" action now.

                  So I understand you label the end of the animated sequence (usually, labels correspond to the beginning of the animated sequence) ?

                   

                  To get what you want, you need to formulate it explicitly

                   

                  Gil

                  • 6. Re: How to reset symbols?
                    thedeeman Level 1

                    Here's a link to an example file I created.  As you can see when you click on menu 1, a sub menu expands and the buttons play on click in sub menu 1.  When i go to other sub menus then come back to to sub menu 1 the buttons do not reset.  Thanks again for your help, i really appreciate it!

                     

                     

                    http://rapidshare.com/files/1139989102/buttons_Example.zip

                    • 7. Re: How to reset symbols?
                      thedeeman Level 1

                      To clarify, i also want the buttons to reset if the user goes to any other page on the site.  For the sake of time i didn't make menu 2 and menu 3 active in the example file I posted.

                      • 8. Re: How to reset symbols?
                        resdesign Adobe Community Professional & MVP

                        Maybe you could check edgehero.com and see his menu.

                        • 9. Re: How to reset symbols?
                          thedeeman Level 1

                          Yeah I've looked at edgehero but the menu they have is just to create dropdowns.  I'm more focused on just reseting my animated symbols on a particular page everytime I leave that page and come back.  

                          • 10. Re: How to reset symbols?
                            thedeeman Level 1

                            Hi Eileen,

                             

                            I've tried sym.stop(0);  but it's causing the animateed elements within my symbols shift their coordinates.  I'd greatly appreciate it if you could look at my file and tell me where I'm going wrong.

                             

                             

                            http://rapidshare.com/files/1139989102/buttons_Example.zip

                            • 11. Re: How to reset symbols?
                              AMULI Level 4

                              Hi thedeeman,

                               

                              I better understand your problem after playing the HTML

                               

                              I have to do this morning, but will look at your AN source in the afternoon.

                               

                              Gil

                              • 12. Re: How to reset symbols?
                                AMULI Level 4

                                Hi thedeeman,

                                 

                                "The buttons below should reset everytime I leave this page and come back"

                                 

                                To be clear about your intent, when do you want the out sequence to be played :

                                 

                                - on mouseout ?

                                 

                                or - just before leaving the page, each of the buttons possibly in the in state (in sequence played), plays its out sequence ?

                                 

                                Gil

                                • 13. Re: How to reset symbols?
                                  AMULI Level 4

                                  Forget my question. I just understood that the out sequence is played when another in sequence plays.

                                  • 14. Re: How to reset symbols?
                                    AMULI Level 4

                                    Hi thedeeman,

                                     

                                    You would have helped me – and it would help yourself - systematically giving describing IDs to all of your elements, instead of the default Text3 or Rectangle2.

                                     

                                    I would structure in a hierarchy of symbols : subMenu1a, subMenu1b, subMenu1c nested in Menu1 ; Menu1, Menu2, Menu3 nested in Menus. This would make the elements stack at stage level lighter, hence legible and easy to work with.

                                     

                                    Do not use a sym.stop(); trigger at 0 ms. Instead, uncheck the autoplay property of the symbol (may be the stage symbol).

                                     

                                    Many of your sym.play(); triggers are redundant. Example : the Rect_menu1 click event handler is sym.play("sub_menu");. It makes the playhead jump to label sub_menu, … where it plays ! A sym.play(); trigger here is useless.

                                     

                                    However, the sym.stop(); triggers are vital at the end of each sequence.

                                     

                                    1) Your logic with the four states stored in current is ok.

                                     

                                    In your three option<i> click event handlers, the same statement sym.getSymbol("option1").play("in"); is executed both in the if clause and in the then clause. It should be written once, outside of the if then /else :

                                     

                                    var current = sym.getVariable("current");

                                    if (current!= "")

                                    {

                                       sym.getSymbol(current).play("out");

                                    }

                                    sym.getSymbol("option1").play("in");

                                    sym.setVariable("current", "option1");

                                     

                                    What you lack : a trigger at label MenuBttns

                                     

                                    var current = sym.getVariable("current");

                                    if (current!= "")

                                    {

                                       sym.getSymbol(current).stop("in"); // reset the playhead

                                    }

                                    sym.setVariable("current", ""); // reset the variable

                                     

                                    2) One step beyond ! You notice that the three option<i> click event handlers only differ by the string "option<i>" in the last two statements. It's time to abstract with a function.

                                     

                                    A buttons object is defined in the compositionReady event handler. It has two properties. The first is a string : current. The second is a function : update. It has a formal parameter newCurrent. When called, the effective parameter value will be "option1", "option2" or "option3".

                                     

                                    buttons =

                                    { current: "", // "", "option1", "option2", "option3"

                                      update: function( newCurrent)

                                      {

                                        if (buttons.current != "")

                                        {

                                           sym.getSymbol(buttons.current).play("out");

                                        }

                                        sym.getSymbol( newCurrent).play("in");

                                        buttons.current = newCurrent;

                                      }

                                    };

                                     

                                    Now, the option1 click event handler reduces to the call : buttons.update("option1");

                                     

                                    The trigger to reset, adapted to the new data structure :

                                     

                                    if (buttons.current != "")

                                        {

                                           sym.getSymbol(buttons.current).stop("in");

                                        }

                                    buttons.current = "";

                                     

                                    3) We can even go further by abstracting an update2 function called on button click, but by the reset trigger as well, as the two code snippets are very near :

                                     

                                    buttons =

                                    { current: "", // "", "option1", "option2", "option3"

                                      update2: function( newCurrent)

                                      {

                                        if (buttons.current != "")

                                        {

                                           if (newCurrent != "")

                                           {

                                             sym.getSymbol(buttons.current).play("out");

                                           } else {

                                             sym.getSymbol(buttons.current).stop("in");

                                           }

                                        }

                                        if (newCurrent != "")

                                        {

                                          sym.getSymbol( newCurrent).play("in");

                                        }

                                        buttons.current = newCurrent;

                                      }

                                    };

                                     

                                    Now, the trigger to reset calls : buttons.update2("");

                                     

                                    The code is clean and maintainable, event handlers and triggers calling global functions defined in the compositionReady event handler (a good practice to centralize your code).

                                     

                                    When your project grows, those global functions tend to proliferate. So it's good practice to encapsulate in an object, global variables and global functions that are dedicated to a given part of your app. Here we created a buttons object. You could have another submenus object containing anything global you need to handle all of your submenus.

                                     

                                    The three versions downloadable here : https://app.box.com/s/fffxycyqiffzhtri5k3x

                                     

                                    Gil

                                    1 person found this helpful
                                    • 15. Re: How to reset symbols?
                                      thedeeman Level 1

                                      Thank you for putting so much into this Amuli, I appreciate it.  The only thing I haven't been able to figure out now is the sybols are shifting elements on the y axis when you leave sub menu 1 then come back.  For example, the letter "A" for the option 1 button is moving outside of the button.  It seems like it's shifting the y coordinates to the bottom of the symbol's bounding box. 

                                       

                                      Screen Shot 2013-08-31 at 3.17.09 PM.png

                                      • 16. Re: How to reset symbols?
                                        AMULI Level 4

                                        Hi thedeeman,

                                        shifting elements on the y axis when you leave sub menu 1 then come back.

                                         

                                        Check the timelines. It's possible that without my knowing I moved an element down and produced an unwanted key y location or transition.

                                         

                                        To be complete on global objects : an interesting feature is also that you can have different variables sharing the same name in different contexts, a namespace being created by the object. For example, you could have buttons.current and submenus.current without any name conflict.

                                         

                                        Gil