Loading multiple HTML5 canvas animations on the same page

Report · Aug 05, 2018

Hello everyone, I tried to insert two different animations in webpage, I found several discussions with questions like my, but it doesn't helped me - I've got error "Uncaught TypeError: comp.getLibrary is not a function". Separately them works well. I attached my code below.

<head>

...

function init() {

var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;

canvas = document.getElementById("canvas");

anim_container = document.getElementById("animation_container");

dom_overlay_container = document.getElementById("dom_overlay_container");

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

var lib = 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=comp.getLibrary();

loader.loadManifest(lib.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=comp.getLibrary();

var ss=comp.getSpriteSheet();

var queue = evt.target;

var ssMetadata = lib.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.Главная();

stage = new lib.Stage(canvas);

stage.addChild(exportRoot);

//Registers the "tick" event listener.

fnStartAnimation = function() {

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

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

}

AdobeAn.compositionLoaded(lib.properties.id);

fnStartAnimation();

}

function init2() {

var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;

canvas = document.getElementById("canvas2");

anim_container = document.getElementById("animation_container2");

dom_overlay_container = document.getElementById("dom_overlay_container2");

var comp = AdobeAn.getComposition("2CECC2F68A50AF41998399D733598F00");

var lib = comp.getLibrary();

var loader = new createjs.LoadQueue(false);

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

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

var lib=comp.getLibrary();

loader.loadManifest(lib.properties.manifest);

}

function handleFileLoad2(evt, comp) {

var images=comp.getImages();

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

}

function handleComplete2(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=comp.getLibrary();

var ss=comp.getSpriteSheet();

var queue = evt.target;

var ssMetadata = lib.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.smoothie();

stage = new lib.Stage(canvas);

stage.addChild(exportRoot);

//Registers the "tick" event listener.

fnStartAnimation = function() {

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

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

}

AdobeAn.compositionLoaded(lib.properties.id);

fnStartAnimation();

}

</script>

</head>

</div>

</div>

</body>

Report · Aug 05, 2018

Hi.

The CreateJS team published this article recently showing how this can be achieved with multiple stages.

https://blog.createjs.com/multiple-stages-in-easeljs-using-nextstage/

I think it is a better approach than trying to overlap multiple Canvases by modifying the HTML file and better than using an iframe. Especially if you need mouse interactivity in both animations.

I hope this helps.

Regards,

JC

Report · Aug 05, 2018

That article is specifically about a feature for bubbling mouse events between multiple overlapping canvases. It has nothing to do with getting multiple Animate-generated projects to function on the same page.

Boriss, just stick each each Animate project into an iframe. That sandboxes it from the host page and from other Animate instances.

Report · Aug 06, 2018

Thank you! now it's working.

Report · Dec 12, 2021

Please ClayUUID could you give an example with iframe, because I don't understand.

Adobe Community

Loading multiple HTML5 canvas animations on the same page