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.
AdChoices