在 HTML5 canvas 模式下对外部 JavaScript 文件使用 Adobe 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 具有相似文件结构的文件项目。
查看
我所做的是使用 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"
]);
我正在将一个大型 FLA AS3 项目转换为 Canvas/JS。 我有一个很大的 AS 文件外部文件夹结构和许多与 类.
关联的库对象我已将 FLA 转换为 canvas 模式,但我找不到将 JS 文件与对象相关联的方法。 我看过关于在框架脚本中包含 JS 的在线示例,但我真的希望找到一种方法来实现与外部文件和库对象关联。
如果能提供任何指导或示例,我将不胜感激。
谢谢
我花了一些时间设法更好地理解它是如何工作的,并创建了一个简单的示例,将具有外部 AS 文件和面向对象结构的 Flash Actionscript 项目转换为 Animate CC Canvas 和 Javascript 具有相似文件结构的文件项目。
查看我所做的是使用 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"
]);