Code to wait until one event is finished before starting another?

Question

Hi all,
Coding isn't my strong point but I have a basic understanding of how functions etc work.
I've been learning about referencing symbol timelines with the awesome tutorial from the Adobe Blog, included below.
http://blogs.adobe.com/edge/2012/07/18/tutorial-leveraging-independent-symbol-timelines/
I've been able to get my symbol to play from a certain part of it's timeline depending on whether the mouse is rolling in or out but now I'm a little bit stuck.
The mouseover event triggers an animation and the mouseout triggers another animation that starts from the same frame that the mouseover animation ends with.
The problem is this. If I move the mouse quickly over the buttons, the first animation will play halfway through and when the mouseout triggers the second animation, the first animation will seemingly "skip" to the ending and move straight to the first frame of the second animation.
I know enough to code it so that the second animation will check if the first animation is still playing before starting by using an else/if statement. Using this method I only know how to skip the second animation if the first is playing but that isn't really what I'm looking to do.
Here comes the question; can anyone explain to me how to create a wait loop in Edge Animate?
When I say wait loop, I am talking about code that will check a variable and perform an action if the variable is true OR loop back to the start of the function if the variable is false (to check the variable again).
The behavior I am trying to achieve is somewhat like queuing the second animation so that it will "wait" until the first animation is played before beginning the second animation.
Any ideas?

Answer 1

Ok Mr Doon,
Clearly, I read to quickly
The behavior I am trying to achieve is somewhat like queuing the second animation so that it will "wait" until the first animation is played before beginning the second animation.
So, say the anima symbol is a 2s animation and has autoPlay set to false. There are two instances anima-1 and anima-2 on stage.
The event handler anima-1.mouseover starts the first animation :
We select Stage in the code panel and place before the first Symbol.bind… the declaration for two symbol (stage) variables :
Inside the anima timeline, click the top left bullet+curly brackets icon and select complete : when the animation is complete, we set the boolean variable (what is not very clean here is that this is done for the two instances anima-1 and anima-2) :
The event handler anima-2.mouseover starts the wait loop, by calling a function defined at the stage level :
More precisely, the function is defined in the document.compositionready handler. It defines (and stores in variable waitLoop in order to be able to remove when finished) an interval, that is the repeated call, every 10 ms, of an inner anonymous function.
The latter simply tests the boolean and when its true
- starts the second animation ;
- clears the interval.
You can download the example here : https://www.box.com/s/6yxjfmrqd0b5zbhmd3lx
You can hover over the left rounded rectangle, and immediately after over the second one. Subsequent rollovers are not handled, but it gives you a possible logic to adapt to your particuliar problem (that I still do not understand completely : it's hard without seeing).
Gil