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

时间:2015-10-19 20:44:12

标签: javascript html5 actionscript-3 flash canvas

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

然而,经过大量谷歌搜索,我没有看到Adobe打算如何管理HTML5 Canvas目标中的外部代码文件,并将该代码附加到特定符号(我们将如何在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文件中组织我们的大型项目......对吧?

1 个答案:

答案 0 :(得分:2)

没有很好的方法将JS类链接到HTML5 Canvas文档类型中的符号。这是一个非常精彩的Flash和AS3,你无法使用HTML Canvas。

这是我建议的工作流程:

  • 与AS3一样,尽可能多地在外部.js文件中编写JS。您可以使用任何您想要的JS工作流程(我喜欢使用TypeScript,它类似于ActionScript 2.0,并且具有类,模块和可选的静态类型)。您必须在HTML文件中或使用JS构建工具手动管理这些外部.js文件,因为Flash不了解它们或像使用SWF一样编译它们。
  • 像往常一样在Flash中创建符号。默认情况下,时间轴上某处的所有符号都按其名称导出。要使用其他名称导出符号或不将其放在时间轴上,请使用库中的“链接”列;您不能像使用AS3符号那样使用符号属性中的“链接”字段。
  • 使用CreateJS,您现在可以使用new lib.MySymbolName()实例化显示对象,并使用addChild将它们添加到画布阶段。
  • 如果您使用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那样方便地设置所有这些,但是一旦你完成了设置,编码策略非常相似。

希望有所帮助。