8 Replies Latest reply on Aug 7, 2013 2:08 PM by resdesign

    get symbol timeline to play EVERY TIME the button is clicked?

    hilbill672

      I have an animation with a button, when the button is clicked a symbol timeline is played from a label at the beginning of the timeline.

      After the button is clicked the first time it will not play the timeline again until the page is refreshed.

      How can I get the button to play the symbol's timeline any time it is clicked without having to refresh the page?

        • 1. Re: get symbol timeline to play EVERY TIME the button is clicked?
          resdesign Adobe Community Professional & MVP

          You need to take your timeline back to the beginning with play(0); on an event or at the end to the timeline.

          sym.$('btn').click(function(){

                    play(0);  // or label

          });

           

           

          You can use toggle() or  something like this also:

           

          function btnOnOff(){

                    if (toggle){

                              toggle=false;

                              sym.play();

           

                    }

                    else{

                                        sym.play(0);

                    }

          }

           

           

          sym.$('btn').click(function(){

                    btnOnOff();

          });

           

          Not sure what you are exactly wanting to do!

          • 2. Re: get symbol timeline to play EVERY TIME the button is clicked?
            hilbill672 Level 1

            Maybe this will help clarify:

            http://hhamptondesign.com/easilydo/animation/endaction.html

             

            You will see two blue rectangle buttons. Right now when you click either of them two animations play at once. I want to be able to link the first button to just one animation and the second button to the other.

             

            Second, after you click the button once you can't click it to play the animation again (unless you refresh the page). So I want to be able to click the button(s) as many times as I want and have the animation(s) play.

             

            I tried inserting a trigger at the end of the symbol timeline to stop and return the user to the beginning, but it doesn't seem to work. I don't have much experience with edge so I'm kind of a newbie. If there is anything else I can do to help you help me, let me know!

             

            Thanks.

            • 3. Re: get symbol timeline to play EVERY TIME the button is clicked?
              resdesign Adobe Community Professional & MVP

              Are you playing the timeline of a symbol or the main timeline?

              I personally prefer to put animations in symbols so that it is easier to play them separately.

              If you had 2 symbols then you could use the second button to send the 1st symbol back to the beginning of its timeline.

              Does this make sense?

               

              sym.$('btn1').click(function(){

              sym.getSymbol('symbol1').play();

              sym.getSymbol('symbol2').stop(0);

              });

               

               

              sym.$('btn2').click(function(){

              sym.getSymbol('symbol2').play();

              sym.getSymbol('symbol1').stop(0);

              });

               

              or you could use a flag.

              • 4. Re: get symbol timeline to play EVERY TIME the button is clicked?
                hilbill672 Level 1

                Yess! That helps soo much, and seems to have fixed my problem.

                Each animation that slides in is in its own symbol. I believe I have them named "action01" and "action02" symbols.

                For future reference, if I were to create another animation to add to it (something like 'symbol3') would I have to add the line of code to stop that symbol on every button like above?

                 

                For example..

                 

                sym.$('btn3').click(function(){

                sym.getSymbol('symbol3').play();

                sym.getSymbol('symbol2').stop(0);

                sym.getSymbol('symbol1').stop(0);

                });

                • 5. Re: get symbol timeline to play EVERY TIME the button is clicked?
                  resdesign Adobe Community Professional & MVP

                  Yes, but I think there might be a better way. If you put a flag to check the state of your symbol, it might be better. Let me think about it.

                  Will you have three buttons then?

                  • 6. Re: get symbol timeline to play EVERY TIME the button is clicked?
                    hilbill672 Level 1

                    I'm just thinking ahead. I am testing a few versions of different animations and was hoping to be able to test them all on one screen for ease of use. There could possibly be up to six buttons.

                    However, if this is too complicated or time consuming I can easily put 2 animations and buttons per file.

                    • 7. Re: get symbol timeline to play EVERY TIME the button is clicked?
                      resdesign Adobe Community Professional & MVP

                      Yes - you could put your buttons in a group and use $.each.  bellow is how to do it but I am sure there are other ways you could do it.

                       

                      Here is an example - you have a group div called buttons that contains all your different buttons. (they can have any name since it will look for the children of the buttons div in order from bottom to top of the stack in your buttons div. I add a mouseout or mouseleave on the buttons to send the timelines back to 0.

                      The symbols are called symbol_1, symbol_2, etc in the example below but you could also make an array of the symbol names like var mySymbols = ['first','second','third','fourth','fifth']; and use sym.getSymbol(mySymbols[i]).play();

                       

                      var buttons = sym.$("buttons").children();

                      $.each(buttons,function(i){

                                $(this).on("click", function(){

                                          sym.getSymbol('symbol_' + i).play();

                                          });

                      $(this).on("mouseout", function(){

                        sym.getSymbol('symbol_' + i).stop(0);

                        });

                       

                      });

                       

                      Below the group div is called btnSummer and had multiple buttons into it.

                      8-7-2013 2-02-23 PM.png

                      • 8. Re: get symbol timeline to play EVERY TIME the button is clicked?
                        resdesign Adobe Community Professional & MVP

                        Here is a sample using $.each.

                        In this sample, the symbols are not returned to 0 but they replay from the start over the ended timeline:

                         

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