画布时间轴与音频不同步

时间:2016-06-13 20:16:59

标签: javascript html5-canvas adobe createjs flash-cc

因此,Adobe Animate中的时间轴与CreateJS中调用的音频同步时遇到问题。问题是帧速率设置为24fps以匹配Adobe Animate时间轴fps。如果帧速率低于24fps,音频将在时间线之前完成,导致按钮和视觉效果出现的时间要晚得多。如果fps快于24fps,音频将在时间线结束前被切断。

有谁知道为什么或有解决方案来解决这个问题?感谢。

2 个答案:

答案 0 :(得分:1)

默认情况下,Animate会设置自动收报机的帧速率,但不会为影片剪辑本身设置帧速率,影片剪辑本身会尝试遵循自动收录器速率,直到它们花费太长时间来绘制,此时它们会变慢。

要解决此问题,除了在自动收报机上另外设置framerate on the movieclip

这将使影片剪辑丢弃任何必要的帧以保持视频处于正确的帧速率,这可能会导致动画稍微不稳定,但至少它们将以正确的速度,因此与任何音频播放相匹配。

如果您正在使用Animate创建的html输出文件,您可以在handleComplete函数中添加此行:

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

更复杂的动画可能需要在其他地方设置。如果你正在使用自己的其他js代码,你需要找到哪些movieclip有问题并将其设置在那里。

答案 1 :(得分:0)

对此没有真正的解决方案。最好的方法是在声音结束时调用移动时间帧(或动画片段)的函数。

您可以使用complete回调。 可以在SoundJS documentation中找到更多信息和样本。