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

Question

I am publishing a document from Animate CC as an HTML file. 我正在将Animate CC中的文档发布为HTML文件。 I have experience as a flash designer, and usually I use the Google Swiffly convertor for this, but my client wants to use the packaged HTML file. 我有Flash设计人员的经验，通常为此使用Google Swiffly转换器，但是我的客户希望使用打包的HTML文件。 When I check it is Chrome it says: 当我检查它是Chrome时，它说：

Uncaught ReferenceError: images is not defined 未捕获ReferenceError：未定义图像

I think I have defined the images in the js file: 我想我已经在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"}
    ]
};

Do you know what code I have to add in here? 您知道我必须在此处添加什么代码吗？

<!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>

thanks 谢谢

Answer 1

Check all your Actions codes. 检查您所有的操作代码。 Must be only "HTML5 canvas" code when tick "<>" button. 勾选“ <>”按钮时，只能是“ HTML5 canvas”代码。 See if there are spaces or newlines mistakes. 查看是否存在空格或换行错误。

Then check File -> Publish Setting. 然后检查文件->发布设置。 Search names of folders and fix them: "lib", "images", "sound" 搜索文件夹名称并进行修复：“ lib”，“ images”，“ sound”

I've the same error because of a button, with a newline mistake in the code action. 我有一个相同的错误，因为有一个按钮，在代码操作中出现了换行错误。

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

问题描述

1 个解决方案

解决方案1
0 2016-06-08 14:52:53

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

问题描述

1 个解决方案

解决方案1 0 2016-06-08 14:52:53

解决方案1
0 2016-06-08 14:52:53