2 Replies Latest reply on Apr 5, 2014 5:42 PM by justincode

    stopping animations at certain points on the timeline.

    justincode Level 1

      Hi all..

       

      Lets say i have a flashing button in a 2 second loop, "pointA" to "pointB"...

       

      at second 0 ("pointA") the animation begins and at second 2 ("pointB") the animation return to second 0 with the code sym.play("pointA");

       

      when a user clicks the flashing button i have another animation that starts and i would like the flashing button to stop

       

      How do i tell the flashing button animation to reach "pointB" in the animation and then stop, at the moment all i can do is tell it to stop when a user click the button which makes it stop mid-animation

       

      I understand that i can stop an animation by the following code, but i can get it to finish its animation and then stop...

       

      sym.getComposition().getStage().getSymbol("flashingButton").stop("pointA");

       

       

      Thanks for reading!.

       

      Justin..

        • 1. Re: stopping animations at certain points on the timeline.
          jbowden Adobe Employee

          Hey there,

           

          The way to do something like this is to build a state machine. Here's something you could try...on the symbol timeline pointB label, add this code to a trigger:

           

          // get the "state" of flashingButton symbol

          var stopLoop = sym.getVariable("flashOut");

           

          // if stopLoop == false, then keep looping

          if (!stopLoop) {

                    sym.play("pointA");

          }

           

          And then the click handler for the symbol instance (presumably at the main Stage level):

           

          // set the symbol flashOut variable to true, which will stop the loop

          sym.getSymbol("flashingButton").setVariable("flashOut", true);

           

           

          Here's an example file you can download: http://adobe.ly/1hpZhNo

           

          hth,

          Joe

          1 person found this helpful
          • 2. Re: stopping animations at certain points on the timeline.
            justincode Level 1

            Hi, Thanks for explaining this...

             

            If you can please could you take 5 to look at the basic project i have uploaded to the link below..

             

            http://adobe.ly/1hgZp81

             

            I have added your state machine to the mix and everything is working as it should but i need each animation to end before a new one begins

             

            There are 4 animations that are triggered by events..

             

            • 1:READY
            • 2:WAITING
            • 3:PLAYING
            • 4:PAUSED

             

            i would like for an animation to end before the new one begins even though an event has fired. This is because eventually the animations will all be on top of each other to create a seamless animation...

             

            I have put notes by my code and sectioned it out to help make it clear

             

            you will find code in the following places

             

            FULL CODE

            STAGE

            CLICKBOX

            READY>READYB

            WAITING>WAITINGB

            PLAYING>PLAYINGB

            PAUSED>PAUSEDB

             

            when you click "click to play" it will load an audio stream from a reputable website (ABC Jazz) so nothing silly going on!...

             

            The full rundown

             

            • When you load the file into a web browser the "ready" event fires and starts the "ready" animation.
            • Then when you click "click to play" the "waiting" event fires causing the "waiting" animation to play (its basically buffering audio while this event is firing).
            • Then when enough audio has buffered it fires the "playing" event and the "playing" animation occurs and you start to hear the audio stream.
            • When you click "click to pause" the "pause" event fires and the "paused" animation begins.
            • then the cycle begins again but the "ready" event is no longer required so when you click "click to play" the "waiting" event fires and so on...

             

            NOTE: i am using a open source script for the audio stream called jplayer (i have loaded the script into the edge file that i have given a link for)

            NOTE: the only way to make this script initiate is to add <div id="liveStream"></div> to the events.html file (otherwise i can not send or recieve commands)


            I guess what im asking is:

            1. how do i make an animation end (finish its 2 second animation) before the new one begins
            2. could you take a quick look at my code to make sure i am not running functions too many times (you will see my notes) and to check to see if i have written things correctly, as i am new to this i am finding that there are 100 ways how not to write code and only a few ways how best to write code

             

            This project is for an audio stream and is for personal & public use, it is not being sold and no money will be made from the end result. (its all about the love 4 music!)

             

            Many thanks

             

            Justin