hi all, i am stuck in merging of two canvas animations from animate cc in one html5 page, which is not happening. it would be great help 
if someone suggest a best working method for below two separate animations into single page.
animation one
<html>@
<head>
<style>
#animation_container {
position:absolute;
margin:auto;
left:0;right:0;
}
</style>
<script>
var createjsfirst = createjsfirst||{};
var createjs = createjsfirst;
</script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="tree_animPC.js?1483449223244"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
handleComplete();
}
function handleComplete() {
exportRoot = new libfirst.tree_animPC();
stage = new createjsfirst.Stage(canvas);
stage.addChild(exportRoot);
stage.enableMouseOver();
fnStartAnimation = function() {
createjsfirst.Ticker.setFPS(libfirst.properties.fps);
createjsfirst.Ticker.addEventListener("tick", stage);
}
function makeResponsive(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = libfirst.properties.width, h = libfirst.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w*sRatio+'px';
canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
}
}
makeResponsive(false,'width',false,1);
fnStartAnimation();
}
</script>
</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1100px; height:545px">
<canvas id="canvas" width="1100" height="545" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1100px; height:545px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------
Second animation
<html>
<head>
<style>
#animation_container {
position:absolute;
margin:auto;
left:0;right:0;
}
</style>
<script>
var createjssecond = createjssecond||{};
var createjs = createjssecond;
</script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="tree_animM.js?1483449257144"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
handleComplete();
}
function handleComplete() {
exportRoot = new libsecond.tree_animM();
stage = new createjssecond.Stage(canvas);
stage.addChild(exportRoot);
stage.enableMouseOver();
fnStartAnimation = function() {
createjssecond.Ticker.setFPS(libsecond.properties.fps);
createjssecond.Ticker.addEventListener("tick", stage);
}
function makeResponsive(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = libsecond.properties.width, h = libsecond.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w*sRatio+'px';
canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
}
}
makeResponsive(false,'width',false,1);
fnStartAnimation();
}
</script>
</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:550px; height:533px">
<canvas id="canvas" width="550" height="533" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:550px; height:533px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>
[Moved by moderator from the non-technical Lounge Forum to the AnimateForum for technical help]
1 Correct answer
I would just stick each one in its own iframe, which would sandbox it and not require dinking with any of the generated code, but some people prefer making things complicated for themselves.
7
Replies
AdChoices