Copy link to clipboard
Copied
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>
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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,