Blank HTML5 Canvas after publishing in Adobe Animate CC

Question

After finishing my animation in Animate CC '15 and publishing it, the canvas only shows the stage background color when trying to load it in browsers. I have tried everything from removing elements and changing the settings to converting all images in the canvas to symbols, but to no avail.

I have a total of 8 images in the canvas. 7 png files and 1 jpeg. And the only thing I get from the output log is:

    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

I believe I have experienced the same thing recently, mine is more of the images not showing up, but the animation is on. If that is the case, you can try to recheck both Quality and Resolution under Texture Publishing Options then publish again. Usually 8bit with 2.0 or 32bit with resolution 3.O. Let me know if there is any luck.

However, I am still trying to figure out why the output/publishing quality is constantly changing each time and why it requires constant reset.

enter image description here