I've worked at this for days by myself and then worked on the phone with an Adobe support staff member. He solved the problem, but I tried to recreate his solution with two new files and it doesn't work. It's driving me nuts-- except for differences in file names I can't see what's wrong with my code.
Here's the problem. I want to combine two HTML5 Canvas outputs generated in Flash CC onto the same HTML page. One file is called 'banner' and the other is called 'splash'. Files exported by Flash work fine independantly. But when combining them something gets screwed up and only the second file gets read. All I see is two canvases, one blank the other working fine.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// change the default namespace for the CreateJS libraries:
var createjsbanner = createjsbanner||{};
var createjs = createjsbanner;
</script>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.0.min.js"></script>
<script src="banner.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
exportRoot = new libbanner.banner();
stage = new createjsbanner.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjsbanner.Ticker.setFPS(libbanner.properties.fps);
createjsbanner.Ticker.addEventListener("tick", stage);
}
</script>
<script>
// change the default namespace for the CreateJS libraries:
var createjssplash = createjssplash||{};
var createjs = createjssplash;
</script>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.0.min.js"></script>
<script src="splash.js"></script>
<script>
var canvas, stage, exportRoot;
function init2() {
canvas = document.getElementById("canvas2");
exportRoot = new libsplash.splash();
stage = new createjssplash.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjssplash.Ticker.setFPS(libsplash.properties.fps);
createjssplash.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init(); init2();" style="background-color:#D4D4D4">
<canvas id="canvas" width="550" height="120" style="background-color:#FFFFFF"></canvas>
<canvas id="canvas2" width="550" height="400" style="background-color:#FFFFFF"></canvas>
</body>
</html>
And for what it's worth, here's the code for two similar files produced by the Adobe staff support worker:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flash1</title>
<script>
// change the default namespace for the CreateJS libraries:
var createjs1 = createjs1||{};
var createjs = createjs1;
</script>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="flash1.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
exportRoot = new lib1.Untitled1();
stage = new createjs1.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs1.Ticker.setFPS(lib1.properties.fps);
//createjs1.Ticker.addEventListener("tick", stage);
}
</script>
<script>
// change the default namespace for the CreateJS libraries:
var createjs2 = createjs2||{};
var createjs = createjs2;
</script>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="flash2.js"></script>
<script>
var canvas, stage, exportRoot;
function init1() {
canvas = document.getElementById("canvas1");
exportRoot = new lib2.Untitled1();
stage = new createjs2.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs2.Ticker.setFPS(lib2.properties.fps);
//createjs2.Ticker.addEventListener("tick", stage);
}
</script>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
</head>
<body onload="init(); init1();" style="background-color:#D4D4D4">
<canvas id="canvas" width="550" height="100" style="background-color:#FFFFFF"></canvas>
<canvas id="canvas1" width="550" height="100" style="background-color:#FFFFFF"></canvas>
</body>
</html>
Any help hugely appreciated!!