how to load two animate cc canvas animations in one html5 page

New Here ,
Jan 03, 2017 Jan 03, 2017

Copy link to clipboard

Copied

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]

Views

4.2K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Jan 03, 2017 Jan 03, 2017
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.

Likes

Translate

Translate
Adobe Community Professional ,
Jan 03, 2017 Jan 03, 2017

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 03, 2017 Jan 03, 2017

Copy link to clipboard

Copied

thanks ClayUUID to show your interest,

but this method not working in this case, because there is extra function also generating from animate cc which is

"function makeResponsive" if you can see in my post, which also needs to be merged with each other, or anything otherway.

Can you figure this out for me if you have coding knowledge?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 04, 2017 Jan 04, 2017

Copy link to clipboard

Copied

A "responsive" [sic] Animate document automatically scales itself to fill the browser window. How on earth would that work if there were two of them? They can't both fill the window.

Also, making your entire posts red is not helpful.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 03, 2017 Jan 03, 2017

Copy link to clipboard

Copied

thanks kglad to show your interest,

but this method not working in this case, because there is extra function also generating from animate cc which is

"function makeResponsive" if you can see in my post, which also needs to be merged with each other, or anything otherway.

Can you figure this out for me if you have coding knowledge?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 04, 2017 Jan 04, 2017

Copy link to clipboard

Copied

eliminate one. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 03, 2017 Jan 03, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 09, 2021 Dec 09, 2021

Copy link to clipboard

Copied

LATEST

Hello, I was also looking for a solution and I finally found one, looking at this forum and trying with <iframe> it did not work for me, because it did not respect the container, css and it did not respect the responsive, but with <object> it worked perfectly , I leave an example:

<div style = "margin: 0 auto; width: 100%; height: 400px;">
<object type = "text / html" data = "* URL to page.html *"
style = "width: 100%; height: 100%;">
</object>
</div>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines