在 HTML5 canvas 模式下对外部 JavaScript 文件使用 Adob​​e Animate CC

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

我正在将一个大型 FLA AS3 项目转换为 Canvas/JS。 我有一个很大的 AS 文件外部文件夹结构和许多与 类.

关联的库对象

我已将 FLA 转换为 canvas 模式,但我找不到将 JS 文件与对象相关联的方法。 我看过关于在框架脚本中包含 JS 的在线示例,但我真的希望找到一种方法来实现与外部文件和库对象关联。

如果能提供任何指导或示例,我将不胜感激。

谢谢

我花了一些时间设法更好地理解它是如何工作的,并创建了一个简单的示例,将具有外部 AS 文件和面向对象结构的 Flash Actionscript 项目转换为 Animate CC Canvas 和 Javascript 具有相似文件结构的文件项目。

您可以在https://github.com/xims/X-simple-flahtml

查看

我所做的是使用 appenChild 将我所有的 JS 实用程序即时添加到 html 中,如下所示:

框架脚本:

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

然后像这样从外部 JS 访问阶段

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

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

我看到的是,不幸的是,似乎无法使用 canvas 在 Animate 中动态实例化库中的对象,我认为最好的解决方案是在时间轴上准备您的视图。

另一方面,JS 提供了很多功能(例如从您的代码中调用 Bootstrap 对话框模式)。

CreateJS 可以为您完成(PreloadJS 库)。

var queue = new createjs.LoadQueue();
queue.loadManifest([
    "auxiliary.js",
    "main.js"
]);