Canvas Timeline synchronisiert nicht mit Audio

Question

So habe ich ein Problem mit der Timeline in Adobe Animate nicht mit Audio synchronisiert, die in CreateJS aufgerufen wird. Das Problem besteht darin, dass die Bildrate auf 24 fps festgelegt wurde, damit sie den Adobe Animate-Timelines-Bildern entspricht. Wenn die Bildrate langsamer als 24 fps ist, wird das Audio vor der Zeitleiste beendet, was dazu führt, dass Schaltflächen und Visuals viel später erscheinen als sie sollten. Wenn die fps schneller als 24 fps sind, wird das Audio vor dem Ende der Timeline abgeschnitten.

Weiß jemand warum oder eine Lösung, um das zu beheben? Vielen Dank.

Answer 1

Es gibt nicht wirklich eine Lösung dafür. Am besten rufen Sie Ihre Funktion auf, die den Zeitrahmen (oder Movieclip) nach Abschluss des Sounds verschiebt.

Sie könnten hierfür den Rückruf complete verwenden. Weitere Informationen und Beispiele finden Sie in der SoundJS documentation.

Answer 2

Standardmäßig legt Animate die Framerate für den Ticker fest, aber nicht für Movieclips selbst, die versuchen, der Ticker-Rate zu folgen, bis sie zu lange zum Zeichnen brauchen und dann langsam werden.

Um dies zu beheben, setzen Sie die framerate on the movieclip selbst zusätzlich auf dem Ticker.

Dadurch wird der Movieclip alle Frames löschen, die notwendig sind, um das Video mit der richtigen Framerate zu belassen, was zu etwas abgehackten Animationen führen kann, aber zumindest mit der richtigen Geschwindigkeit und daher mit jeder Audiowiedergabe übereinstimmen.

Wenn Sie die HTML-Ausgabedatei Animate erstellt verwenden, können Sie diese Zeile in der handleComplete Funktion hinzufügen:

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); 
    } 

Kompliziertere Animationen kann dies erfordern in anderen Orten eingestellt werden. Wenn Sie einen anderen js-Code verwenden, müssen Sie herausfinden, welcher Movieclip Probleme hat, und ihn dort einstellen.