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

对着背影说爱祢 提交于 2020-01-01 19:04:57

问题


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


回答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).




回答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



来源:https://stackoverflow.com/questions/36807123/using-adobe-animate-cc-in-html5-canvas-mode-with-external-javascript-files

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!