黄龙

2015-10-22 23:32

AS3程序员小福利--as3js介绍及FlashDevelop工程的配置

本文作者:IMWeb 黄龙 原文出处:IMWeb社区 未经同意,禁止转载

什么是AS3JS?

AS3JS是ActionScript 3.0到JavaScript的转换器,它基本上可以让你使用ActionScript 3.0语言编写客户端和服务器端JavaScript应用程序。AS3JS是不是一个框架。此工具也没有设计成用于转换的Flash到HTML5解决方案(虽然它可能会帮助!)。现在AS3JS纯粹是转换器,但是你可以自由的扩展它,如果你愿意,因为它是开源的。

github项目地址:https://github.com/cleod9/as3js

它是如何工作的?

AS3JS通过正则表达式解析ActionScript类文件,并将它们转换成JavaScript可以理解的文本。这意味着所有的AS3特定关键字会被去除,以及将代码重新组织成可在一个JS环境中运行的单个文件。

源代码的输出是可读的,因为它类似于原始AS3代码。没有复杂的结构。最关键的一点要记住的是,AS3,其核心是JavaScript的语法糖。这意味着,你可以选择你想要的AS3的功能,以用于项目。

安装和使用

交代一句,$符号不用输入,前提是你装了node

$ npm i -g as3js

可以像下面这样使用它

$ as3js -src ./path/to/as3/source -o output.js

在FlashDevelop中使用它

第一步:新建一个项目,选择Empty Project

如图所示:

第二步:配置项目

1.为了方便目录管理,在目录下新建src和bin目录,用于存放源码和编译后的文件

2.在src目录下新建Main.as

package src 
{
    public class Main 
    {
        public function Main() 
        {

        }
    }
}

发现问题了么?package是src。解决的办法是先把FlashDevelop关掉,再在项目目录里面找到"项目名.as3proj"文件,用其他编辑器打开(不要双击好么)。找到图中所示位置把<class path="." />改成<class path="src">

3.删掉Main.as然后再创建Main.as。再在里面写上console.log("Hello world!");

package 
{
    public class Main 
    {
        public function Main() 
        {
            console.log("Hello world!");
        }
    }
}

4.在项目中新建make.bat

as3js -src src -o bin/output.js -e new:Main

5.在bin目录中新建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>AS3JS测试</title>
</head>
<body>
    <script src="output.js"></script>
</body>
</html>

6.配置项目属性

1> 在输出选项卡下如图配置

2> 在编译现象卡下如图配置

7.按F5运行,打开控制台并没有输出‘hello world’。原因是这个as3js目前这个版本很弱,暂时不支持顶级的包 或者是说TM就是个bug。我们可以把Main.as修改一下放到src/app目录下。顺便我们还需要修改一下make.bat

as3js -src src -o bin/output.js -e new:app.Main

8.按F5运行,打开控制台hello world是不是出来了。

接下来我们看一下编译出的output.js或许你就明白了刚刚为啥不能输出hello world;

output.js

(function ( options ) {
  options = options || {};
  var AS3JSUtils = function () {};
  AS3JSUtils.getDefaultValue = function getDefaultValue(value, fallback) {
    return (typeof value != 'undefined') ? value : fallback;
  };
  AS3JSUtils.createArray = function (size, val) {
    var arr = [];
    for (var i = 0; i < size; i++)  {
      arr.push(val); 
    }
    return arr;
  };
  if (typeof Object.create !== 'function') {
    Object.create = function (o) {
      function F() {}
        F.prototype = o;
        return new F();
    }
  };

  var i, j;
  var packages = {
    "app": {
      Main: {
        compiled: false,
        source: function ( module ) {

          var Main = function() {
                console.log("Hello world!");
              };





          module.exports = Main;

        }
      }
    }
  };

  var imports = function ( packageName, className ) {
    if (!packages[packageName][className].compiled) {
      packages[packageName][className].compiled = true;
      packages[packageName][className].module = { exports: null, inject: null };
      packages[packageName][className].source(packages[packageName][className].module);
    }
    return packages[packageName][className].module.exports;
  };

  for (i in packages) {
    for (j in packages[i]) {
      imports(i, j);
    }
  }
  for (i in packages) {
    // Execute the injection functions
    for (j in packages[i]) {
      if (typeof packages[i][j].module.inject === 'function') {
        packages[i][j].module.inject();
      }
    }
  }

  if (options.entryPackage && options.entryClass) {
    var entryPoint = imports(options.entryPackage, options.entryClass);
    if (options.entryMode === "new") {
      new entryPoint();
    } else if (options.entryMode === "exports" && typeof module !== 'undefined') {
      module.exports = entryPoint;
    }
  }
})({ entryPackage: "app", entryClass: "Main", entryMode: "new" });

接下来可以愉快的玩耍了 helloworld工程地址:https://github.com/as3long/as3js_helloworld

0条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。