在 HTML5 画布模式下使用带有外部 JavaScript 文件的 Adob​​e Animate CC

Posted 2023-02-16

【中文标题】在 HTML5 画布模式下使用带有外部 JavaScript 文件的 Adob​​e Animate CC

【英文标题】：Using Adobe Animate CC in HTML5 canvas mode with external JavaScript files

【发布时间】：2016-08-16 20:52:15

【问题描述】：

我正在将一个大型 FLA AS3 项目转换为 Canvas/JS。 我有一个大型的外部文件夹结构，其中包含 AS 文件和许多与类关联的库对象。

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

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

谢谢

【参考方案1】：

我所做的是使用 appenChild 将我的所有 JS 实用程序即时添加到 Animate 的 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!');

我看到的是，不幸的是，在 Animate with canvas 中动态实例化库中的对象似乎是不可能的，我认为最好的解决方案是在时间轴上准备好视图。

另一方面，JS 提供了很多功能（例如从您的代码中调用引导对话框模式）。

【讨论】：

另外，如果你必须加载几个有依赖关系的JS（比如jQuery），我建议你只加载一个包含LABjs的文件'launcher.js'并将你所有的库附加到文件末尾使用 $LAB

您好，感谢您的意见。但是，我必须告诉您，确实可以在 Animate 中动态地从库中实例化对象：var myClip = new lib.MyClipsNameInTheLibrary();

感谢@Danyright。它似乎只有在对象已经在舞台上时才有效，那么在舞台上显示新创建的对象的方式是什么？

这里有一些您可以在 Animate CC 中使用的代码：var myClip = new lib.MyClipsNameInTheLibrary(); exportRoot.addChild(myClip);。 MyClipsNameInTheLibrary 不需要在舞台上。你可以简单地把它放在图书馆里。

【参考方案2】：

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

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

【讨论】：

我不明白它是如何工作的，但它确实有效。我认为的一个问题是您必须修改生成的 html 以添加您的包含和 js sn-p，每次从 Animate 重新编译时您会怎么做？您是否使用工具来做到这一点？

【参考方案3】：

CreateJS 可以为您做到这一点（PreloadJS 库）。

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