Canvas timeline is not syncing with audio

Question

So I am having an issue with the timeline in Adobe Animate not syncing with audio that is called in CreateJS. The issue is that the frame rate being set to 24fps to match the Adobe Animate timelines fps. If the frame rate is slower than 24fps the audio will finish before the timeline cause buttons and visuals to appear much later than they should. If the fps is faster than 24fps the audio will get cut off before the timeline finishes.

Does anyone know why or have a solution to fix this? Thanks.

score 2 · Answer 1 · answered Jun 20 '17 at 21:55

By default Animate sets the framerate for the ticker, but not for movieclips themselves, which will try to follow the ticker rate until they take too long to draw, at which point they get slow.

To fix this, set the framerate on the movieclip itself in addition to on the ticker.

This will make the movieclip drop any frames necessary to keep the video at the proper framerate, which can result in slightly choppy animations, but at least they will be at the right speed and therefore match up with any audio playing.

If you are using the html output file Animate creates, you can add this line in the handleComplete function:

function handleComplete(evt) {
    //This function is always called, irrespective of the content. You  can use the variable "stage" after it is created in token create_stage.
    var queue = evt.target;
    var ssMetadata = lib.ssMetadata;
    for(i=0; i<ssMetadata.length; i++) {
        ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
    }
    exportRoot = new lib._MyAnimation_canvas();
    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.enableMouseOver();    

    exportRoot.framerate = lib.properties.fps; // <-- ADD THIS LINE

    //Registers the "tick" event listener.
    fnStartAnimation = function() {
        createjs.Ticker.setFPS(lib.properties.fps);
        createjs.Ticker.addEventListener("tick", stage);
    }

More complicated animations may require this to be set in other places. If you are using other js code of your own, you need to find what movieclip is having problems and set it there.

score 0 · Answer 2 · answered Jun 28 '16 at 18:54

There is not really a solution for this. The best way is to call your function that moves the timeframe (or movieclip) when the sound is finished.

You could use the complete callback for this. More information and samples can be found in the SoundJS documentation.

Canvas timeline is not syncing with audio

2 Answers2