HTML buttons on separate div to play canvas animation

[nurideIRIS]

Hi All,

I'm hoping someone can point me in the right direction. I've exported my canvas animation just fine and all the buttons function, however, I need to place the buttons on a separate div so that it is at the top level of the rest of the design. Here is what I started:

HTML:

<button id="button_10" type="button" >projects</button>

JS:

<script>

document.getElementById("button_10").addEventListener("click", myFunction);

function myFunction() {

   document.getElementById("canvas").fl_ClickToGoToAndPlayFromFrame_4.bind(this));

function fl_ClickToGoToAndPlayFromFrame_4()

{

this.gotoAndPlay(1);

}

}

</script>

<script>

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("19EDC99F39D3DC478ED3A7B69C8D50AC");

var lib=comp.getLibrary();

handleComplete({},comp);

} ...

</script>

[ClayUUID · Accepted solution]

This is what layers are for. Create a topmost layer in Animate and put all your buttons there.

Your notion about divs is not possible in Animate because it Does Not Work That Way. Animate symbols are not browser DOM objects. Every symbol is painted to a single HTML canvas element.

[nurideIRIS]

Thank you for the quick response. I've seen an example of this done. Perhaps the canvas needs to be exported as a long string rather than html/javascript? Thanks again! Btw, my canvas layer is buried by overlays in the html, causing the buttons to be non-clickable.

[ClayUUID]

nurideIRIS  wrote

Btw, my canvas layer is buried by overlays in the html, causing the buttons to be non-clickable.

Then you need to fix your layout.

[albertd9194959]

ClayUUID is correct, however, you actually can create separate DIVS within animate, if you want, its not recommended as you need to manually code positions, layer order etc etc and worry about overlapping elements.

I mainly use this method to use web CSS animations, as javascript motion tends to judder.

how to use variable outside canvas

Regards,