从Animate CC发布时,HTML5 Canvas无法正常工作

时间:2016-06-07 09:12:16

标签: html5 jquery-animate

我将Animate CC中的文档作为HTML文件发布。我有作为Flash设计师的经验,通常我使用Google Swiffly转换器,但我的客户想要使用打包的HTML文件。当我检查它是Chrome时它说:

未捕获的ReferenceError:未定义图像

我想我已经在js文件中定义了图像:

(function (lib, img, cjs, ss) {

var p; // shortcut to reference prototypes
lib.webFontTxtFilters = {}; 

// library properties:
lib.properties = {
    width: 160,
    height: 600,
    fps: 24,
    color: "#FFFFFF",
    webfonts: {},
    manifest: [
        {src:"images/Image.png", id:"Image"},
        {src:"images/Image_0.png", id:"Image_0"},
        {src:"images/Image_1.png", id:"Image_1"},
        {src:"images/Image_2.png", id:"Image_2"},
        {src:"images/Frame1background.png", id:"Frame1background"},
        {src:"images/Frame2background.jpg", id:"Frame2background"},
        {src:"images/Frame4background.jpg", id:"Frame4background"},
        {src:"images/Hotelpngcopy.jpg", id:"Hotelpngcopy"},
        {src:"images/Yotellogobigpngcopy.png", id:"Yotellogobigpngcopy"},
        {src:"images/yotel2V0A168715520152.jpg", id:"yotel2V0A168715520152"},
        {src:"images/YOTELNewYorkTerrace.jpg", id:"YOTELNewYorkTerrace"}
    ]
};

你知道我要在这里添加什么代码吗?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Yotel 160x600_Flash_Canvas</title>
<!-- write your code here -->


<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="Yotel 160x600_Flash_Canvas.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
    // --- write your JS code here ---

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

    var loader = new createjs.LoadQueue(false);
    loader.addEventListener("fileload", handleFileLoad);
    loader.addEventListener("complete", handleComplete);
    loader.loadManifest(lib.properties.manifest);
}

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

function handleComplete(evt) {
    exportRoot = new lib.Yotel160x600_Flash_Canvas();

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

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

</script>

<!-- write your code here -->

</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
    <canvas id="canvas" width="160" height="600" style="background-color:#FFFFFF"></canvas>
</body>
</html>

感谢

1 个答案:

答案 0 :(得分:0)

检查所有操作代码。必须只是&#34; HTML5 canvas&#34;勾选&#34;&lt;&gt;&#34;按钮。查看是否存在空格或换行错误。

然后检查文件 - &gt;发布设置。搜索文件夹的名称并修复它们:&#34; lib&#34;,&#34;图像&#34;,&#34;声音&#34;

我因为一个按钮而导致同样的错误,代码操作中出现换行错误。