javascript - 如何将代码从外部文件链接到 Flash CC 中 HTML5 Canvas 项目的符号？

Question

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

然而，经过多次谷歌搜索后，我没有看到 Adob​​e 打算如何管理 HTML5 Canvas 目标中的外部代码文件，并将该代码附加到特定符号(我们将如何在 ActionScript 3 中做链接标识符项目)。或者如果我们可以的话。我看到的所有示例都将代码移到时间线中并在那里运行，但这对我来说听起来像是一个令人沮丧的练习。

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

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

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

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

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

Answer 1

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

这是我建议的工作流程:

• 与 AS3 一样，尽可能多地将 JS 编写在外部 .js 文件中。您可以使用任何您想要的 JS 工作流(我喜欢使用 TypeScript ，它类似于 ActionScript 2.0 并且具有类、模块和可选的静态类型)。您必须在 HTML 文件中或使用 JS 构建工具手动管理这些外部 .js 文件，因为 Flash 不知道它们或像处理 SWF 那样编译它们。
• 像往常一样在 Flash 中创建符号。默认情况下，时间线上某处的所有符号都按其名称导出。要以不同的名称导出符号或不将其放置在时间线上，请使用库中的“链接”列；您不能像 AS3 符号那样使用符号属性中的“链接”字段。
• 使用 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 中的库符号引用，以便在时间轴关键帧构建它们时使用您的类:lib.MySymbol = MySymbolClass

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

希望对您有所帮助。