• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Animate CC 2017 - multiple canvas on one page

New Here ,
Aug 28, 2017 Aug 28, 2017

Copy link to clipboard

Copied

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!

Views

4.1K

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

correct answers 1 Correct answer

LEGEND , Aug 28, 2017 Aug 28, 2017

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

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

Or something like that.

Votes

Translate

Translate
Contributor ,
Aug 28, 2017 Aug 28, 2017

Copy link to clipboard

Copied

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.

Votes

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 28, 2017 Aug 28, 2017

Copy link to clipboard

Copied

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

Votes

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
LEGEND ,
Aug 28, 2017 Aug 28, 2017

Copy link to clipboard

Copied

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

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

Or something like that.

Votes

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 29, 2017 Aug 29, 2017

Copy link to clipboard

Copied

Many thanks that worked!

Votes

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
Community Beginner ,
Sep 06, 2017 Sep 06, 2017

Copy link to clipboard

Copied

LATEST

Adobe:
Can you create a token for creating custom publishing templates for this composition ID variable please? Right now (Animate CC 2017 2nd update), they've ADDED this comp id with random string ID, but didn't add a token to the custom publishing templates (see docs here > Create HTML5 Canvas documents in Animate CC))

Votes

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
LEGEND ,
Aug 28, 2017 Aug 28, 2017

Copy link to clipboard

Copied

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

Embed Multiple Animate CC Interactive Graphics on a Webpage

Votes

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