-
1. Re: Code to wait until one event is finished before starting another?
AMULI Jun 20, 2013 8:31 AM (in response to Mr. Doon)Hi Mr Doon,
I am not sure that I understand your problem correctly, but it looks like to me that you don't need that kind of wait loop.
Instead of consuming resources with a loop repeatedly testing if the first symbol is still playing, I will wrap the event handlers for the second symbol with a condition :
if (<symbol1>.isPlaying())
{
return;
} else {
// the statements in the original event handler
}
Gil
-
2. Re: Code to wait until one event is finished before starting another?
elainefinnell Jun 20, 2013 10:22 AM (in response to Mr. Doon)Thanks for the compliment on the blog post, Mr. Doon! Anyway, in addition to the way Gil suggests handling it, you can also create a variable to hold the state. Your mouseout would then change the variable and trigger the out condition of the first symbol, and when you get to the end of your animation, it will check to see whether or not the variable is set and trigger the next animation.
Specifically, go back to the same tutorial and search for the words "state management." I think it's more or less what you want to do.
-Elaine
-
3. Re: Code to wait until one event is finished before starting another?
Mr. Doon Jun 20, 2013 3:29 PM (in response to Mr. Doon)Hello again!
Thanks for your response, Gil. I completely agree that it's best not to burn rescources just looping constantly until a condition is met. I hear what you are saying but if I understand correctly, the code that you provided would cause the second animation to be skipped entirely if the first animation was still playing when the second event was triggered and this isn't quite what I'm after.
Thanks for your response too, Elaine. I feel this might be a bit closer to what I am trying to achieve. I'll lay down what I have taken from it and please let me know if I misunderstand...
Firstly, I change the second event's (mouseout) code so that it does not perform an action but instead sets a variable as true.
As the 2 animations are on the same timeline in a symbol, all I need to do now is have some code on a frame between the 2 animations that essentially tells Edge to stop if the variable is false and continue if the variable is true (and also change variable back to false).
Does that sound about right?
I was just about to click post but I just had another thought...
If you hover over the button long enough, the first animation will be triggered and then stop because we haven't set the variable yet (mouseout has not occurred). Now if we move the cursor off the button, it will set a variable but the animation will not be triggered because the the code to play the second animation lies in the first animation and that frame has already been played.
Thoughts?
-
4. Re: Code to wait until one event is finished before starting another?
AMULI Jun 21, 2013 3:48 AM (in response to Mr. Doon)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
-
5. Re: Code to wait until one event is finished before starting another?
Mr. Doon Jun 21, 2013 9:52 AM (in response to AMULI)Heya Gil,
Firstly... thanks! You've clearly put a lot of effort into finding a solution for me despite my laziness in not uploading an example
I'll be honest, you lost me when we declared the function. I think that lays a little beyond my javascript knowledge this early in the game! I did however find a different approach to achieve the effect I was after. Link below.
https://dl.dropboxusercontent.com/u/30528212/Edge_Animation_Example.zip
Instead of "waiting" for something to happen, I instead used the mouseout event to proactively determine which frame to begin playing the second transition from.
Still one little bug though. You'll notice if you quickly roll your cursor on on and off the symbol that the animation will seem to flicker before reversing it's motion. I suspect this is something to do with the code. Maybe the code is causing the symbol to display a different frame in which the transition has reached it's peak, and then proceeds to animate out correctly.
I suspect this because even if the transition hasn't started turning red when you mouse out, you will still see a red frame flash up briefly before the animation reverses from the frame you were at.
Sorry for being so pedantic
-
6. Re: Code to wait until one event is finished before starting another?
AMULI Jun 21, 2013 11:21 AM (in response to Mr. Doon)Hi again Mr Doon,
I'll be honest, you lost me when we declared the function. I think that lays a little beyond my javascript knowledge this early in the game!
Honestly, if you strip it down bottom-up, it's fairly accessible :
You easily understand (say its block A), where the only complication is that you can't directly write the name of a symbol variable to get its value, but have to resort to sym.getVariable("<varName>")
if (sym.getVariable( "firstComplete"))
{
sym.getSymbol( "anima-2").play();
clearInterval( sym.getVariable( "waitLoop"));
}
Now you make a function with that block, and say call it every 10 ms (say this block is B) :
setInterval( function() {
A
},
10)
You then store that interval in a variable used to stop the repeated calls when they are not needed anymore
(say this block is C) :
sym.setVariable( "waitLoop",
B
);
Finally, you make the whole a function callable from another symbol :sym.startWaitLoop = function()
{
C
}
But I agree thatEdge's syntax to define a symbol function
+ Edge's syntax to set/get a symbol variable
+ handling of an interval
= frightening odd syntax but we keep smiling Have fun !
Gil








