AS3JSv0.3 alpha

The dumb* ActionScript to JavaScript transpiler.

Try it live in your browser now »

What is AS3JS?

AS3JS is a transpiler for converting ActionScript 3.0 to JavaScript. It essentially allows you to write both client and server-side JavaScript applications using the ActionScript 3.0 language. AS3JS is not a framework. This tool is also not designed to be a solution for converting Flash to HTML5 (although it may help!). For now AS3JS is purely a transpiler, but you have the freedom to expand on it if you wish since it's open source.

*Disclaimer: While it might technically be considered "dumb" right now due to the lack of a true lexer/parser, it works pretty darn well for what it's worth. It has a few limitations, but I guarantee there is a workaround for just about anything you need to do. The end goal is to eventually make it a "smart" transpiler so you can take full advantage of what ActionScript has to offer as a language for web development. If anyone has any suggestions on specific tooling or other ways to improve the project, feel free to contact me! :)

How does it work?

AS3JS parses through ActionScript class files via regular expressions and translates them into text that JavaScript can understand. This means that all AS3-specific keywords are removed, and the code is re-organized into a single file that can run in a JS environment.

The output of the source code is extremely readable, since it heavily resembles the original AS3 code. There are no complex constructs at work. The key thing to remember here is that AS3 at its core is syntactic sugar for JavaScript. This means that you can choose how many of AS3's features you want to use for your project. Don't want to assign types to your variables? Then don't! Wanna skip out on assigning public/private/protected to all your class-level variables? Feel free! I created AS3JS simply to allow you to write JavaScript in a more organized fashion in a language that was formally only associated with Adobe Flash.

Installation & Usage

Installation is easy, first install it as a global module

 $ npm install -g as3js

And use it like so:

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

As long as your AS3 files follow the standard procedure for defining AS3 packages, AS3JS will pick them up by recursively parsing the entire directory tree for all AS3 files and combining them into one JavaScript file.

You can also alternatively install it as a local module by omitting the "-g", which allows you the additional option of manually instantiating the compiler. See the project's Github for more details

Demos

Live Editor - Source Code | Live Demo

Try AS3JS right in your browser!


ElevatorJS - Source Code | Live Demo

An elevator simulator project in AS3 that I originally wrote in JavaScript a few years ago:

Quick Example

Here's an example of a simple AS3 class:

        //A partial implementation of Flash's "Point" class
        package
        {
          public class Point
          {
            public var x:Number;
            public var y:Number;
            
            public static function distance(p1:Point, p2:Point) 
            {
              return Math.sqrt(Math.pow(p2.y - p1.y, 2) + Math.pow(p2.x - p1.x, 2));
            }
            
            public function Point(x:Number = 0, y:Number = 0):void
            {
              this.x = x;
              this.y = y;
            }
            public function clone():Point
            {
              var point:Point = new Point(x, y);
              
              return point;
            }
            public function equals(point:Point):void
            {
              return (point.x == x && point.y == y);
            }
          }
        }
        

This exports to the following JS:

        (function() {
          var Program = {};
          Program["Point"] = function(module, exports) {
            var Point;
            module.inject = function() {
              Point = module.import('', 'Point');
            };

            var Point = function(x, y) {
              x = AS3JS.Utils.getDefaultValue(x, 0);
              y = AS3JS.Utils.getDefaultValue(y, 0);
              this.x = x;
              this.y = y;
            };

            Point.distance = function(p1, p2) {
              return Math.sqrt(Math.pow(p2.y - p1.y, 2) + Math.pow(p2.x - p1.x, 2));
            };

            Point.prototype.x = 0;
            Point.prototype.y = 0;
            Point.prototype.clone = function() {
              var point = new Point(this.x, this.y);

              return point;
            };
            Point.prototype.equals = function(point) {
              return (point.x == this.x && point.y == this.y);
            }

            module.exports = Point;
          };
          if (typeof module !== 'undefined') {
            module.exports = AS3JS.load({
              program: Program,
              entry: "Point",
              entryMode: "static"
            });
          } else if (typeof window !== 'undefined' && typeof AS3JS !== 'undefined') {
            window['Point'] = AS3JS.load({
              program: Program,
              entry: "Point",
              entryMode: "static"
            });
          }
        })();
        

The above code allows "Point" to be available in the global namespace (or otherwise exposed as a module)

Pretty readable stuff, right? With this type of coding pattern you could structure a full-fledged application in entirely AS3.

Don't want to type all of those extra keywords?

The following is also completely valid AS3 code:
        package {
          class Point {
            var x;
            var y;
             
            static function distance(p1, p2) {
              return Math.sqrt(Math.pow(p2.y - p1.y, 2) + Math.pow(p2.x - p1.x, 2));
            }
             
            function Point(x = 0, y = 0) {
              this.x = x;
              this.y = y;
            }
            function clone() {
              var point = new Point(x, y);
               
              return point;
            }
            function equals(point) {
              return (point.x == this.x && point.y == this.y);
            }
          }
        }
        

This resembles more traditional JavaScript and ES6. While it does look cleaner, you may lose out on some of the smart-completion features of your IDE. Feel free to write your AS3 code the way that works best for you, though I highly recommend you consider using the encapsulation keywords and assigning types to all of your variables.

Questions? Comments?

Any feedback at all would be great, feel free to contact me via email: cleod9{at}gmail.com

For any additional information, check out the project's GitHub page.