Control Animate Canvas from classic html controls in the same page?

[nickx58900764]

Is it possible to create a canvas with Adobe Animate and make it interactive through HTML controls located outside of the Canvas but in the same HTML page? For example, could a tick in a checkbox (HTML Dom element) trigger the movement of some content in the Canvas?

[kdmemory]

Hi Nick

I think you can use exportRoot. On your main timeline in Animate create a function:

function doWhenTriggeredFromPageContext () {
    this.play();
    // and what not
} 

Then you can trigger this function from the HTML DOM context with:

exportRoot.doWhenTriggeredFromPageContext();

Though I I never used this method, so I'm a bit guessing here. What I use is in the main timeline in Animate a function which is assigned to the top DOM element: window. Like this:

window.doWhenTriggeredFromPageContext = function () {
    this.play();
    // and what not
};

Then I trigger this function from the HTML DOM context with:

window.doWhenTriggeredFromPageContext();

Klaus

[Lucir · Accepted solution]

Have you tried using JavaScript in the editor of Animate? With javaScript you can access any HTML element or create an HTML element then you can add an event listener to it.

You can use getElementById() or getElementByTag() to get access to en existing element or

you can create an element like:

var animContainer = document.getElementById("animation_container");

//'animation_container' is the id that Adobe gives the <div> that contains the <canvas>

var tArea = document.createElement("textarea");

animContainer.appendChild(tArea);

//now you have 'tArea' that you can manipulate from the timeLine

Now you can add an event handler with

tArea.addEventListener(“someEvent”, clkHandler);

// I put a button symbol in the canvas to submit the user input named it submitBtn then added an event handler to that button

like

tArea.focus();

mainTL.submitButton.addEventListener("click", clkHandler);

function clkHandler(e){

let userTxt = tArea.value;

//recently the new release of ES6 allows for the use of "let" keyword to declare a variable.

tArea.value = `Mi amor, your text is:

${userTxt}.` //Here I'm using a template string(see comment below)

}

see Displaying a Textarea HTML Element Over the Canvas in AnimateCC - Math Para Mi