Event-Button outside of canvas

[Boar*ing]

Hey,

I need to trigger an animation within the canvas from an button outside the canvas. This should be possible right?

Please be patient, I'm a newbie in javascript

Animations within a scene are played and paused by the functions stop and play in this case. These are functions of the respective scene object afaik. The object is normally called by the keyword "this".

The idea I came up with

I thought I can just pass the object "this" to the Event-Function I define, like this:

const myButton = document.getElementById('myButtonId');
myButton.addEventListener('click', myFunction(this));

The Event-Function looks like this:

function myFunction(object) {
    object.play();
}

This doesn't work. Can someone explain why?

I could just make a new layer in Animate CC and put the button on the top most layer but this is not a solution for me today. I would like to solve this problem, and be able to use elements outside the canvas for reasons.

[kglad]

an object doesn't need to be visible to dispatch an event, but how do you dispatch an event for mButton?  ie, you can't click it with the mouse if it's not visible.

[Boar*ing]

Dont get confused by my formulation 😛
I'm talking about a normal HTML-Button that is a sibling of the canvas.

[kglad]

use console.log to see you're not passing "this" .

[DOM · Accepted solution]

Yes, it is possible to target objects in the Animate canvas. However, in Adobe Animate the objects in the canvas are not directly accessible via DOM button objects.

To interact with objects within the Animate canvas, you need to use the global variables that are exposed to the generated HTML page that is created when you publish a project. There are a few global variables that you can use to access the main (root) timeline, but one of the most straight-forward ways to do so is by using the global variable exportRoot.

The following is an example of how to call functions in Animate using a button that was created in the published HTML page.

Animate (on frame 1)

this.stop();

//Play a MovieClip's timeline
const myMovieClip = this.myMovieClip;
this.playMcTimeline = function(){
     myMovieClip.play();
}

//Play the main timeline
this.playMainTimeline = function(){
     this.play();
}

Published HTML Page

const myButton = document.getElementById('myButtonId');

myButton.addEventListener('click', function(){
     exportRoot.playMcTimeline();
     exportRoot.playMainTimeline();     
});

Also, here are a few additional things to consider:

Function Expression vs Declaration
You may have noticed that in Animate we’re using a function expression (this. playTimeline) versus function declaration (function playTimeline). The reason for this is because a function expression attaches the function to the current object (such as a MovieClip or the main timeline). It becomes a method of the object, making it accessible to other objects that have a reference to that object. If we used a function declaration, we would not be able to call the function because it would only be accessible within the current script.

Overwriting HTML File on Publish

You may wish to uncheck “Overwrite HTML file on publish” checkbox  in the Publish Settings window if you plan on adding script to the published HTML page, otherwise they’ll be overwritten (deleted) each time you publish your Animate file.

Script Execution Timing
Keep in mind that it matters where you are declaring your event listener for the DOM button object. In the previous example, we’re assuming that we added the event listener after we’ve declared the button on the page, near the end of the HTML body tag. If you declare the event listener before the DOM loads, your button reference may be undefined. 

[Boar*ing]

Really appreciate your answer. Will work my way through it and give feedback and summarize everything as soon as i'm done.