Question

我正在开发一个项目，我在Adobe Flash CC中完成了动画，并通过画架js将其导出到HTML5画布中。

Shopify中的我的流程是：

我在标题中包含了所有脚本 easeljs-0.8.1.min.js, tweenjs-0.6.1.min.js, movieclip-0.8.1.min.js, preloadjs-0.6.1.min.js, bg_animation.js我在body标签中实例化了init函数。

我的剧本是：

var canvas, stage, exportRoot;

function init() {
    canvas = document.getElementById("canvas");
    images = images||{};
    ss = ss||{};

    var loader = new createjs.LoadQueue(false);
    loader.addEventListener("fileload", handleFileLoad);
    loader.addEventListener("complete", handleComplete);
loader.loadFile({src:"bg_animation_atlas_.json", type:"spritesheet", id:"bg_animation_atlas_"}, true);
    loader.loadManifest(lib.properties.manifest);
}

function handleFileLoad(evt) {
    if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete(evt) {
    var queue = evt.target;
    ss["bg_animation_atlas_"] = queue.getResult("bg_animation_atlas_");
    exportRoot = new lib.bganimation();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();

    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);
}

名为bg_animation_atlas_.json的json文件和名为bg_animation_atlas_.png的bg图像位于资产网址上。

我在json文件中的脚本是

{"images": ["bg_animation_atlas_.png"], "frames": [[0,1423,4002,1421],[0,0,4002,1421]]}

但是我发现画布动画不仅显示控制台中存在错误：未捕获的SecurityError：阻止了一个包含起源的框架＆＃34; https://online-store-63.myshopify.com＆＃34;从访问带有起源的框架＆＃34; http://online-store-63.myshopify.com＆＃34;。请求访问的帧具有＆＃34; https＆＃34;的协议，被访问的帧具有＆＃34; http＆＃34;的协议。协议必须匹配。和未捕获的TypeError：无法读取属性＆＃39; getNumFrames＆＃39;未定义的

我认为这可能是画架不能采取行动的路径问题，但我无法弄清楚原因。

在Shopify中嵌入HTML5 Canvas

0 个答案: