Loading multiple HTML5 canvas animations on the same page
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>
AdChoices