在Animate CC '15中完成动画并发布后,画布仅在尝试在浏览器中加载时显示舞台背景颜色。我已经尝试了从删除元素和更改设置到将画布中的所有图像转换为符号的所有内容,但无济于事。
我在画布上总共有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>
答案 0 :(得分:0)
我相信我最近也经历过同样的事情,我的更多图片没有出现,但动画还在播放。如果是这种情况,您可以尝试在“纹理发布选项”下重新检查“质量”和“分辨率”,然后再次发布。通常为2.0的8位或分辨率为3.O的32位。让我知道是否有运气。
但是,我仍在尝试弄清为什么输出/发布质量每次都在不断变化,以及为什么需要不断重置。