6 Replies Latest reply on Sep 6, 2017 12:03 PM by davi-t

    Animate CC 2017 - multiple canvas on one page

    Rubber Design Level 1

      Hello! Is there anyone you can point me in the right direction with regard to adding multiple Animate cc canvas anims on one page? Ideally I would like to be able to target objects exportRoot1, exportRoot2 from the main html, but unsure of where to start with the publish code in the latest animate version.


      apologies if this has been asked previously but hours of trawling the interwebs hasn't thrown up anything that works for me!


      Current code for this version is as below (I've cut out the resposive bit for now):


      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");

          var comp=AdobeAn.getComposition("C7993C80F52F41D49D9FB2C70C8DB1DD");

          var lib_anim_one=comp.getLibrary();

          var loader = new createjs.LoadQueue(false);

          loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});

          loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});

          var lib_anim_one=comp.getLibrary();



      function handleFileLoad(evt, comp) {

          var images=comp.getImages();   

          if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }   


      function handleComplete(evt,comp) {

          //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.

          var lib_anim_one=comp.getLibrary();

          var ss=comp.getSpriteSheet();

          var queue = evt.target;

          var ssMetadata = lib_anim_one.ssMetadata;

          for(i=0; i<ssMetadata.length; i++) {

              ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )


          exportRoot = new lib_anim_one.extra();

          stage = new lib_anim_one.Stage(canvas);


          //Registers the "tick" event listener.

          fnStartAnimation = function() {


              createjs.Ticker.addEventListener("tick", stage);






      Many thanks in advance!