6 Replies Latest reply on Jun 27, 2013 4:25 PM by jbowden

    symbol with 3 animations controlled by buttons elements within

    exaltdesign Level 1

      alright this thing is bugging the crap out of me.

       

      I have a symbol (top_nav) with elements inside that will be buttons on click (quad1, quad2, juggle_logo_nav)

      each button moves to a point when clicked and then I need it to move back on a seperate click.

      I have my animations on the same timeline which I thought would make it easier but I guess not.

       

      I will also be doing this with 2 other symbols (bottom_nav, and slide_right_left) so I need to figure this out. I have spent way to much time creating and trashing this thing. Help

       

      Here is the flle. https://www.box.com/shared/static/i3lx4xwlaad35ery0ki1.zip

        • 1. Re: symbol with 3 animations controlled by buttons elements within
          jbowden Adobe Employee

          Hi there,

           

          So... you want the first click of a button to play from a label on the timeline and stop at a trigger, and then the next click on the same button to take it back to where it was before it stopped? There's a couple of ways to do that. Before I continue, let me know if I have the gist of what you're trying to do.

           

          Thanks,

          Joe

          • 2. Re: symbol with 3 animations controlled by buttons elements within
            exaltdesign Level 1

            Joe

             

            yes thats the gist.  I also forgot to ad that the buttons or elements will be controlling more than one symbol (for example clicking quad1 will move top_nav to the right with symbol slide_right_left)  Just to let you know I am designer not a developer so this is all new to me. its kind of like the iphone facebook app with the menu controls in the top left and right.

             

            Thanks!

             

            John

            • 3. Re: symbol with 3 animations controlled by buttons elements within
              exaltdesign Level 1

              Joe-

               

              did I lose you? Sorry.

               

              John

              • 4. Re: symbol with 3 animations controlled by buttons elements within
                jbowden Adobe Employee

                Hi John,

                 

                No, you didn't lose me.

                 

                Sorry, but answering questions on the forum is what I do when I have the time and I've been occupied with other tasks since my last reply. Still in the middle of these, but I'll try to get back to you in the next hour or so.

                 

                Thanks,

                Joe

                • 5. Re: symbol with 3 animations controlled by buttons elements within
                  exaltdesign Level 1

                  no problem! lol Thanks Again for you help!

                  • 6. Re: symbol with 3 animations controlled by buttons elements within
                    jbowden Adobe Employee

                    Hello John,

                     

                    Okay, the two ways that I'd approach something like this would be either creating a state machine where you set a variable that you check later to see if the button's been clicked, and then use a conditional to perform the correct action based upon the value of the variable and then give it a new state value (not too complex an approach, but lots of code), or simpler and probably just as effective, use getPosition() to get the current time of the playhead, and then use a conditional to perform the correct action based upon the time in milliseconds derived from getPostion(). Here's some code that you could put on the click event of your button (everything with a double forward slash is a comment, but the lines starting with sym can be uncommented (remove the double slash) and used if necessary:

                     

                    var getPosition = sym.getPosition();

                     

                    if (getPosition < 1) {

                              sym.play();

                             // you can also use getSymbol to play other symbols, like the following:

                              // sym.getParentSymbol().getSymbol("mySymbol").play();

                    } else {

                              // assuming you want to play it in reverse back to the last label/trigger

                              sym.playReverse();

                              // or you could just jump there, like so:

                              // sym.stop(0);

                    }

                     

                    But - looking at how you've set up your animation, it looks like you've already done the reverse animation and you're using triggers to control it - which makes getPosition() a bit of overkill. That's fine, and makes it even easier. So instead of using sym.play(0) as you did in juggle_logo_nav, you could just use sym.play() to advance to the next trigger with the stop action and play the reverse animation. To play symbols outside of the symbol containing the button, reference the sym.getParentSymbol().getSymbol() code above and add it to your code, using your symbol name of course. That would look something like this:

                     

                    sym.play();

                    sym.getParentSymbol().getSymbol("slide_right_left").play();

                     

                     

                    If you want to do any interactivity in Animate, I highly recommend you refer to our Javascript API, which explains all the available commands you can use, with examples of how to use them:

                     

                    http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html

                     

                    hth,

                    Joe