Using Adobe Animate CC in HTML5 canvas mode with external JavaScript files

Question

I'm transitioning a large FLA AS3 project into Canvas/JS. I have a large external folder structure of AS files and many library objects associated with classes.

I've converted FLA into a canvas mode but I can't find a way to associate JS files to the objects. I've seen online examples about including JS in frame scripts but I really hope to find a way to do it with external files and library objects association.

I'd appreciate any direction or example of how it can be done.

Thank you

Answer 1

What I do is adding all my JS utilities to the html on-the-fly from Animate with appenChild like this:

frame script:

function loadScript(url) {
    var body = document.getElementsByTagName('body')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    body.appendChild(script);
}

loadScript('assets/app/myUtilities.js');
loadScript('assets/libs/coolTool.js');
loadScript('etc..');

s = this; //to have access to the stage

And access the stage from the external JS like this:

s.my_movieclip.addEventListener("click", fl_MouseClickHandler.bind(s));

function fl_MouseClickHandler() {
    console.log('I want banana!');
}

What I saw is that unfortunately it seems not possible to instanciate objects from the library dynamically in Animate with canvas, I think that the best solution is to prepare your views on the timeline.

On the other hand, JS offer lot of functionalities (for instance calling Bootstrap Dialog Modals from your code).

Answer 2

I've spent some time and managed to get a better understanding how it works and created a simple example of converting Flash Actionscript project with external AS files and object-oriented structure into Animate CC Canvas and Javascript files project with similar files structure.

You can view it at https://github.com/xims/X-simple-flahtml