How to Play animation on Mouseover and Reverse on Mouseout?

Question

0down votefavorite
I am trying to create a simple animated navigation bar. I want to mouseover an image and have an animation play, then when you mouseout the animation will play in reverse.
I can get the animation to play on mouseover, but as soon as I put in the mouseout code it doesn't work. I'm completely new to Edge, so if someone can give me a simple explanation on how to play/reverse an animation on mouseover/out, I would really appreciate it.
Right now I have an image, converted to a symbol, with another image (nav_on_1) nested inside. The image nested inside is animated with the label "nav_on_1_play".
My code for mouseover is below:
sym.$("nav_on_1").show();
sym.play("nav_on_1_play");

Answer 1

first I recommend that you use mouseenter and mouseleave instead.
second: if you have a symbol that has let's say one animation you can do
on mouse enter
sym.getSymbol('symbolname').play();
on mouseleave:
sym.getSymbol('symbolname').playReverse();
you may have to add
sym.getComposition().getStage().getSymbol('symbolname').play();
sym.getComposition().getStage().getSymbol('symbolname').playReverse();
or you can put the event in stage/compositionreday
sym.getSymbol('symbolname').mouseenter(function(){
sym.getSymbol('symbolname').play();
sym.getSymbol('symbolname').mouseleave(function(){
sym.getSymbol('symbolname').play();