6 Replies Latest reply on Jan 4, 2017 12:22 PM by ClayUUID

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

    rk77834024

      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]