Skip to main content
New Participant
August 28, 2017
Answered

Animate CC 2017 - multiple canvas on one page

  • August 28, 2017
  • 2 replies
  • 4413 views

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

    loader.loadManifest(lib_anim_one.properties.manifest);

}

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.name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata.name)], "frames": ssMetadata.frames} )

    }

    exportRoot = new lib_anim_one.extra();

    stage = new lib_anim_one.Stage(canvas);

    stage.addChild(exportRoot);   

    //Registers the "tick" event listener.

    fnStartAnimation = function() {

        createjs.Ticker.setFPS(lib_anim_one.properties.fps);

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

    }           

    AdobeAn.compositionLoaded(lib_anim_one.properties.id);

    fnStartAnimation();

}

Many thanks in advance!

This topic has been closed for replies.
Correct answer ClayUUID

You just access the iframe's window object...

var exportRoot1 = document.getElementById("myIframeID").contentWindow.exportRoot;

Or something like that.

2 replies

Brainiac
August 28, 2017

Iframes have always worked for me. Others have strange and different opinions.

Embed Multiple Animate CC Interactive Graphics on a Webpage

Inspiring
August 28, 2017

What specifically do you need multiple canvas for? Depending on what you want to use it for, I think you could get the needed result with symbols.

New Participant
August 28, 2017

I had in mind that I wanted a scrolling page of say three sections - a separate canvas in each. Each could be triggered when scrolled into the viewport - if I should be thinking about it in a different way then I'd love to hear!

I did try iframes, but couldn't figure out how to call exportRoot from the main file?

Thanks for the response

ClayUUIDCorrect answer
Brainiac
August 28, 2017

You just access the iframe's window object...

var exportRoot1 = document.getElementById("myIframeID").contentWindow.exportRoot;

Or something like that.