如何在 Flash CC 中将外部文件 link 编码为 HTML5 Canvas 项目的符号？

Question

我们的工作室在制作基于 Flash 的游戏方面有着悠久的历史，并且我们一直在探索将它们转移到 HTML5 的可能性。我们的艺术家非常喜欢 Flash IDE，我们已经在那里创建了很多内容，所以我们希望使用 Flash CC 的 HTML5 Canvas 导出功能来执行移植。

然而，经过大量谷歌搜索，我没有看到 Adobe 打算如何管理 HTML5 Canvas 目标中的外部代码文件，并将该代码附加到特定符号（a'la我们如何在 ActionScript 3 项目中使用链接标识符）。或者如果我们可以的话。我看到的所有示例都将代码移动到时间线中，然后运行将其放在那里，但这听起来像是一个让我感到沮丧的练习。

我希望能够 - 以某种方式 - 编写一个 .js 文件来封装敌人精灵的行为，以及另一个封装玩家精灵行为的文件。另一个管理呈现不同的场景。依此类推，类似于您在任何规模的普通 AS3 项目中所做的。这会给我们带来很多好处——我们会得到更清晰的版本控制，我们自然可以使用外部编辑器等。

换句话说，什么是 .as 文件的等价物：

 package game {
     import flash.display.MovieClip;
     public class FlyingEnemy extends MovieClip {}
 }

...作为 Flash CC 2015 中的外部文件 HTML5 Canvas 目标？我可以将AS3转换成JavaScript，但是我在这些外部文件中写的JavaScript如何带入项目并与符号关联？

Flash CC 的 HTML5 目标没有办法做到这一点吗？他们希望您将所有内容都移到时间表中吗？观看 Adobe 网站上的教程，似乎剪切和粘贴到时间轴是将类似功能添加到多个符号中的唯一直接方法，但是有有一些（希望记录在案） ) 我们可以在 IDE 外部的 .js 文件中组织我们的大型项目的方式...对吗？

Answer 1

没有很好的方法来 link JS classes 到 HTML5 Canvas 文档类型中的符号。这是 HTML Canvas 所没有的 Flash 和 AS3 的优点。

这是我建议的工作流程：

与 AS3 一样，将尽可能多的 JS 编写在外部 .js 文件中。您可以使用任何您想要的 JS 工作流程（我喜欢使用 TypeScript，它类似于 ActionScript 2.0，具有 classes、模块和可选的静态类型）。您必须在 HTML 文件中或使用 JS 构建工具手动管理这些外部 .js 文件，因为 Flash 不知道它们，也不会像处理 SWF 那样编译它们。
像往常一样在 Flash 中创建符号。默认情况下，时间线上某处的所有符号都按其名称导出。要使用不同的名称导出符号或不将其放置在时间线上，请使用库中的 "linkage" 列；您不能像 AS3 符号那样使用符号属性中的 "linkage" 字段。
使用 CreateJS，您现在可以使用 new lib.MySymbolName() 实例化显示对象，并使用 addChild 将它们添加到 canvas 阶段。
如果您使用 TypeScript，您甚至可以使用以下语法扩展符号：

// "lib" object is what Flash generates to store all the graphics data
declare module lib {
    // declare all your symbols as classes
    export class MySymbol extends createjs.MovieClip { } 
}

// now you can extend a symbol class
class MySymbolClass extends lib.MySymbol {
    constructor(){
        super();
    }
    public move():void {
        this.x += 10;
    }
}

// now you can use your symbol class much like in AS3
var mySymbol = new MySymbolClass();
stage.addChild(mySymbol);

createjs.Ticker.on("tick", function(){
    mySymbol.move()
    stage.update();
});

您甚至可以覆盖 JS 中的库符号引用，这样当它们在时间轴关键帧处构建时，它会使用您的 class：lib.MySymbol = MySymbolClass

当然，Flash 不会像 AS3 那样方便地为您设置所有这些，但是一旦您设置好，编码策略就非常相似。

希望对您有所帮助。

如何在 Flash CC 中将外部文件 link 编码为 HTML5 Canvas 项目的符号？

How to link code from external files to symbols for HTML5 Canvas project in Flash CC?

html

javascript

flash

canvas

actionscript-3