Symbol with 3 animations controlled by buttons elements within

Question

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

Answer 1

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