6 Replies Latest reply on Jun 21, 2013 11:21 AM by AMULI

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

    Mr. Doon

      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?

        • 1. Re: Code to wait until one event is finished before starting another?
          AMULI Level 4

          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?
            elainecc Adobe Employee

            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

            1 person found this helpful
            • 3. Re: Code to wait until one event is finished before starting another?
              Mr. Doon Level 1

              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 Level 4

                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 :

                 

                synchro1.gif

                 

                We select Stage in the code panel and place before the first Symbol.bind… the declaration for two symbol (stage) variables :

                 

                synchro2.gif

                 

                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) :

                 

                synchro3.gif

                 

                The event handler anima-2.mouseover starts the wait loop, by calling a function defined at the stage level :

                 

                synchro4.gif

                 

                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.

                 

                synchro5.gif

                 

                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

                1 person found this helpful
                • 5. Re: Code to wait until one event is finished before starting another?
                  Mr. Doon Level 1

                  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 Level 4

                    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 that

                     

                    Edge'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

                    1 person found this helpful