Loading multiple HTML5 canvas animations on the same page

New Here ,
Aug 05, 2018 Aug 05, 2018

Copy link to clipboard

Copied

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>

...

<script  src="https://code.jquery.com/jquery-1.12.4.min.js"  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

<script src="js/anim.js"></script>

<script src="js/done-smoothie.js"></script>

<script>

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>

<body onload="init(); init2();">

<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:652px; height:570px">

<canvas id="canvas" width="652" height="570" 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:652px; height:570px; position: absolute; left: 0px; top: 0px; display: block;"></div>

</div>

<div id="animation_container2" style="background-color:rgba(255, 255, 255, 1.00); width:652px; height:570px">

<canvas id="canvas2" width="652" height="570" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>

<div id="dom_overlay_container2" style="pointer-events:none; overflow:hidden; width:652px; height:570px; position: absolute; left: 0px; top: 0px; display: block;"></div>

</div>

</body>

Views

1.6K

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 ,
Aug 05, 2018 Aug 05, 2018

Copy link to clipboard

Copied

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

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 ,
Aug 05, 2018 Aug 05, 2018

Copy link to clipboard

Copied

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.

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 ,
Aug 06, 2018 Aug 06, 2018

Copy link to clipboard

Copied

Thank you! now it's working.

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 12, 2021 Dec 12, 2021

Copy link to clipboard

Copied

LATEST

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

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