3 Replies Latest reply on Aug 18, 2016 7:16 AM by Colin Holgate

    audio and animation synchronization issue in animate cc

    sidsubh

      1. The longer the audio/timeline a slide has, the more the animations will play out of sync as the slide continues to play. the animation seems to be lagging behind the audio by the end of the slide.

        • 1. Re: audio and animation synchronization issue in animate cc
          Colin Holgate MVP & Adobe Community Professional

          That is the nature of demanding scenes played alongside Event audio. If you're using AS3 you can set the sound sync to Stream, and the animation will be forced to keep up. If you're doing HTML5 Canvas you will need to use Javascript to force frames to be skipped in order to keep up.

          • 2. Re: audio and animation synchronization issue in animate cc
            ClayUUID Adobe Community Professional

            Note that if you use the frame-skipping solution for a Canvas document, it may happily skip over frames containing script commands, thus jacking things up. The only way to manage audio/animation sync for a Canvas document with scripting is to break up the audio into smaller chunks. Audio will always be perfectly synced with the timeline at the frame it starts on.

            1 person found this helpful
            • 3. Re: audio and animation synchronization issue in animate cc
              Colin Holgate MVP & Adobe Community Professional

              The skipping script frames is definitely an issue, but I have ways around it without having to cut up the audio. Suppose you want to trigger a code driven animation after 2 seconds of frame skipping, and you want to stop skipping frames after 10 seconds, this sort of approach works well (this example is at 24 fps, change the 24 to other values for other frame rates):

               

              var starttime = createjs.Ticker.getTime();

              var firstframe = this.currentFrame;

              createjs.Ticker.setFPS(24);

              createjs.Ticker.addEventListener("tick", movealong);

              self = this;

              setTimeout(CodeAnim,2000);

              setTimeout(AtEnd,10000);

              this.stop();

               

              function movealong() {

                var now = createjs.Ticker.getTime();

                var f = Math.floor((now - starttime) / 1000 * 24 + firstframe)

                self.gotoAndStop(f);

              }

               

              function CodeAnim(){

                //set the code animation going

              }

               

              function AtEnd(){

                createjs.Ticker.removeEventListener("tick", movealong);

              }

              1 person found this helpful