javascript - 在 Adob​​e Animate CC 中发布后的空白 HTML5 Canvas

Question

在 Animate CC '15 中完成动画并发布后，尝试在浏览器中加载 Canvas 时， Canvas 仅显示舞台背景颜色。我尝试了一切，从删除元素和更改设置到将 Canvas 中的所有图像转换为符号，但都无济于事。

Canvas 上共有 8 张图像。 7 个 png 文件和 1 个 jpeg。我从输出日志中得到的唯一信息是:

    WARNINGS:
** 7 Bitmaps packed successfully into 1 spritesheet(s).
Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (6)

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

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

// library properties:
lib.properties = {
	width: 1300,
	height: 1032,
	fps: 24,
	color: "#00CCFF",
	webfonts: {},
	manifest: [
		{src:"http://www.mrhoward.net/canvas/img/bg.jpg", id:"bg"}
	]
};



lib.webfontAvailable = function(family) { 
	lib.properties.webfonts[family] = true;
	var txtFilters = lib.webFontTxtFilters && lib.webFontTxtFilters[family] || [];
	for(var f = 0; f < txtFilters.length; ++f) {
		txtFilters[f].updateCache();
	}
};
// symbols:



(lib.bg = function() {
	this.initialize(img.bg);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,1920,1080);


(lib.cloud1 = function() {
	this.spriteSheet = ss["canvas_atlas_P_"];
	this.gotoAndStop(0);
}).prototype = p = new cjs.Sprite();



(lib.cloud2 = function() {
	this.spriteSheet = ss["canvas_atlas_P_"];
	this.gotoAndStop(1);
}).prototype = p = new cjs.Sprite();



(lib.cloud3 = function() {
	this.spriteSheet = ss["canvas_atlas_P_"];
	this.gotoAndStop(2);
}).prototype = p = new cjs.Sprite();



(lib.cloud4 = function() {
	this.spriteSheet = ss["canvas_atlas_P_"];
	this.gotoAndStop(3);
}).prototype = p = new cjs.Sprite();



(lib.cloud5 = function() {
	this.spriteSheet = ss["canvas_atlas_P_"];
	this.gotoAndStop(4);
}).prototype = p = new cjs.Sprite();



(lib.cloud6 = function() {
	this.spriteSheet = ss["canvas_atlas_P_"];
	this.gotoAndStop(5);
}).prototype = p = new cjs.Sprite();



(lib.skyline = function() {
	this.spriteSheet = ss["canvas_atlas_P_"];
	this.gotoAndStop(6);
}).prototype = p = new cjs.Sprite();



(lib.Tween10 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.cloud2();
	this.instance.setTransform(-46,-21.5,0.697,0.519);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-46,-21.5,92,43.1);


(lib.Tween9 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.cloud2();
	this.instance.setTransform(-46,-21.5,0.697,0.519);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-46,-21.5,92,43.1);


(lib.Tween8 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.cloud3();
	this.instance.setTransform(-135.5,-41.5);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-135.5,-41.5,271,83);


(lib.Tween7 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.cloud3();
	this.instance.setTransform(-135.5,-41.5);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-135.5,-41.5,271,83);


(lib.Tween6 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.cloud6();
	this.instance.setTransform(-30.5,-20.5,0.473,0.432);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-30.5,-20.5,61,41);


(lib.Tween5 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.cloud6();
	this.instance.setTransform(-30.5,-20.5,0.473,0.432);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-30.5,-20.5,61,41);


(lib.Tween4 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.cloud4();
	this.instance.setTransform(-42,-24.5,0.636,0.59);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-42,-24.5,84,49);


(lib.Tween3 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.cloud4();
	this.instance.setTransform(-42,-24.5,0.636,0.59);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-42,-24.5,84,49);


(lib.Tween2 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.cloud5();
	this.instance.setTransform(-105,-47.5);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-105,-47.5,210,95);


(lib.Tween1 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.cloud5();
	this.instance.setTransform(-105,-47.5);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-105,-47.5,210,95);


(lib.Symbol7 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.bg();
	this.instance.setTransform(-649.9,-516,0.677,0.956);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-649.9,-516,1300,1032);


(lib.Skyline = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.skyline();
	this.instance.setTransform(-650,-516);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-650,-516,1300,1032);


(lib.Cloud1 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.cloud1();
	this.instance.setTransform(0,0,0.548,0.636);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,320,105);


(lib.Tween11 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.Tween6("synched",0);
	this.instance.setTransform(-669.7,0);

	this.shape = new cjs.Shape();
	this.shape.graphics.f("#0066CC").s().p("Ah0AsQgEgKAOgOIAOgLIACgBIgBgBQgEgHAIgIQAFgFAPAAIAJAJQACAEABABQAJgBASgJQARgIAPgCIARgEIASgLQAMgKAQgFIAJgEIgBgBIAUACQANABAFAFQAEAEABAFQABAFgDAEIgIAHQgbAQgRAEQgJABgGACIgIAIQgIAIgSADQgRABgJACQgNADgcAOQgaANgQABQgRAAgFgLg");
	this.shape.setTransform(688.4,15);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape},{t:this.instance}]}).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-700.2,-20.5,1400.5,41);


(lib.Symbol6 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.Tween9("synched",0);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-46,-21.5,92,43.1);


(lib.Symbol5 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.Tween7("synched",0);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-135.5,-41.5,271,83);


(lib.Symbol4 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.Tween5("synched",0);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-30.5,-20.5,61,41);


(lib.Symbol3 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.Tween3("synched",0);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-42,-24.5,84,49);


(lib.Symbol2 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.Cloud1();
	this.instance.setTransform(0.1,0,1,1,0,0,0,160,52.5);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-159.9,-52.5,320,105);


(lib.Symbol1 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.instance = new lib.Tween2("synched",0);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-105,-47.5,210,95);


// stage content:
(lib.howardcanvas = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Skyline
	this.instance = new lib.Skyline("synched",0);
	this.instance.setTransform(650,516);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(850));

	// Cloud 7
	this.instance_1 = new lib.Symbol1("synched",0);
	this.instance_1.setTransform(1133.4,124.5);

	this.instance_2 = new lib.Tween1("synched",0);
	this.instance_2.setTransform(1416.4,124.5);

	this.instance_3 = new lib.Tween2("synched",0);
	this.instance_3.setTransform(-105,124.5);
	this.instance_3._off = true;

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_1}]}).to({state:[{t:this.instance_2}]},209).to({state:[]},1).to({state:[{t:this.instance_3}]},1).to({state:[{t:this.instance_3}]},638).wait(1));
	this.timeline.addTween(cjs.Tween.get(this.instance_1).to({_off:true,x:1416.4},209).wait(641));
	this.timeline.addTween(cjs.Tween.get(this.instance_3).wait(211).to({_off:false},0).to({x:1133.4},638).wait(1));

	// Cloud 1 
	this.instance_4 = new lib.Symbol2("synched",0);
	this.instance_4.setTransform(358,91);

	this.instance_5 = new lib.Cloud1();
	this.instance_5.setTransform(1460,91,1,1,0,0,0,160,52.5);
	this.instance_5._off = true;

	this.timeline.addTween(cjs.Tween.get(this.instance_4).to({_off:true,regX:160,regY:52.5,x:1460,mode:"independent"},420).wait(430));
	this.timeline.addTween(cjs.Tween.get(this.instance_5).to({_off:false},420).to({_off:true},1).wait(1).to({_off:false,x:-159.9},0).to({x:358},427).wait(1));

	// Cloud 5
	this.instance_6 = new lib.Symbol3("synched",0);
	this.instance_6.setTransform(996.4,268.5);

	this.instance_7 = new lib.Tween4("synched",0);
	this.instance_7.setTransform(1342,268.5);
	this.instance_7._off = true;

	this.instance_8 = new lib.Tween3("synched",0);
	this.instance_8.setTransform(996.4,268.5);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_6}]}).to({state:[{t:this.instance_7}]},349).to({state:[]},1).to({state:[{t:this.instance_7}]},1).to({state:[{t:this.instance_8}]},498).wait(1));
	this.timeline.addTween(cjs.Tween.get(this.instance_6).to({_off:true,x:1342},349).wait(501));
	this.timeline.addTween(cjs.Tween.get(this.instance_7).to({_off:false},349).to({_off:true},1).wait(1).to({_off:false,x:-42},0).to({_off:true,x:996.4},498).wait(1));

	// Cloud 4
	this.instance_9 = new lib.Symbol4("synched",0);
	this.instance_9.setTransform(828.7,82);

	this.instance_10 = new lib.Tween6("synched",0);
	this.instance_10.setTransform(1330.5,82);

	this.instance_11 = new lib.Tween11("synched",0);
	this.instance_11.setTransform(639.3,83.9);
	this.instance_11._off = true;

	this.instance_12 = new lib.Tween5("synched",0);
	this.instance_12.setTransform(828.7,82);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_9}]}).to({state:[{t:this.instance_10}]},399).to({state:[]},1).to({state:[{t:this.instance_11}]},1).to({state:[{t:this.instance_12}]},448).wait(1));
	this.timeline.addTween(cjs.Tween.get(this.instance_9).to({_off:true,x:1330.5},399).wait(451));
	this.timeline.addTween(cjs.Tween.get(this.instance_11).wait(401).to({_off:false},0).to({_off:true,x:828.7,y:82},448).wait(1));

	// Cloud 3
	this.instance_13 = new lib.Symbol5("synched",0);
	this.instance_13.setTransform(686.5,195.5);

	this.instance_14 = new lib.Tween8("synched",0);
	this.instance_14.setTransform(1435.5,195.5);
	this.instance_14._off = true;

	this.instance_15 = new lib.Tween7("synched",0);
	this.instance_15.setTransform(686.5,195.5);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_13}]}).to({state:[{t:this.instance_14}]},415).to({state:[]},1).to({state:[{t:this.instance_14}]},1).to({state:[{t:this.instance_15}]},432).wait(1));
	this.timeline.addTween(cjs.Tween.get(this.instance_13).to({_off:true,x:1435.5},415).wait(435));
	this.timeline.addTween(cjs.Tween.get(this.instance_14).to({_off:false},415).to({_off:true},1).wait(1).to({_off:false,x:-135.5},0).to({_off:true,x:686.5},432).wait(1));

	// Cloud 2
	this.instance_16 = new lib.Symbol6("synched",0);
	this.instance_16.setTransform(465,314.5);

	this.instance_17 = new lib.Tween10("synched",0);
	this.instance_17.setTransform(1346,314.5);
	this.instance_17._off = true;

	this.instance_18 = new lib.Tween9("synched",0);
	this.instance_18.setTransform(465,314.5);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_16}]}).to({state:[{t:this.instance_17}]},629).to({state:[]},1).to({state:[{t:this.instance_17}]},1).to({state:[{t:this.instance_18}]},218).wait(1));
	this.timeline.addTween(cjs.Tween.get(this.instance_16).to({_off:true,x:1346},629).wait(221));
	this.timeline.addTween(cjs.Tween.get(this.instance_17).to({_off:false},629).to({_off:true},1).wait(1).to({_off:false,x:-46},0).to({_off:true,x:465},218).wait(1));

	// background
	this.instance_19 = new lib.Symbol7("synched",0);
	this.instance_19.setTransform(650,516);

	this.timeline.addTween(cjs.Tween.get(this.instance_19).wait(850));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(650,516,1300,1032);

})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{});
var lib, images, createjs, ss;

<head>
<title>canvas</title>
<!-- write your code here -->


<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="http://www.mrhoward.net/canvas/canvas.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
	// --- write your JS code here ---
	
	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:"http://www.mrhoward.net/canvas/img/canvas_atlas_P_.json", type:"spritesheet", id:"canvas_atlas_P_"}, 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["canvas_atlas_P_"] = queue.getResult("canvas_atlas_P_");
	exportRoot = new lib.howardcanvas();

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

	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="1300" height="1032" style="background-color:#00CCFF"></canvas>
</body>

Answer 1

我相信我最近也经历过同样的事情，我的更多的是图像不显示，但动画是打开的。如果是这种情况，您可以尝试在纹理发布选项下重新检查质量和分辨率，然后再次发布。通常为 8 位 2.0 或 32 位 分辨率 3.O。让我知道是否有运气。

但是，我仍在试图弄清楚为什么输出/发布质量每次都在不断变化以及为什么需要不断重置。

enter image description here