EDIT: I am no longer working on the NextGenAS tutorials, but if you’re interested in Apache Royale, check out the ActionScript & MXML extension for Visual Studio Code that I maintain. It’s a spin-off project from my NextGenAS efforts.
While many creative developers thrived during the best years of Flash, plugins on the web have fallen out of favor. To continue building immersive experiences in the browser, you need to start migrating to open web standards, if you haven’t already. JavaScript is alright for little prototypes and smaller projects, but for the kind of projects that we build, it really doesn’t compare to a language like ActionScript.
What if you could continue using ActionScript on the web, but without a plugin? What if you could use JS libraries like CreateJS and Pixi.js with ActionScript? Libraries that have familiar APIs inspired by years of working with Adobe Flash Player. I don’t think developers need to start from scratch. We should embrace the open web on our own terms. We’ve heard so many claims that Flash Player is bad, but we know better. We don’t need to abandon the parts that work so well. The ActionScript language especially, but also the great display list APIs and vector drawing capabilities that we came to love so much.
Today, I’m happy to introduce my new website, NextGen ActionScript. In the first tutorial I’ve written there, I teach you how to transpile ActionScript to JavaScript using Apache FlexJS. This tutorial shows you how to integrate with an HTML page natively, by calling DOM APIs with full compile-time type checking. From there, we’re just a step away from integrating with JavaScript libraries like jQuery, CreateJS, Pixi.js, three.js and more!
I also released a new command line utility named dts2as. The TypeScript community has put a ton of effort into adding type annotations to thousands of JavaScript libraries. As we begin transpiling ActionScript, we should be able to benefit from those same resources. The dts2as utility reads a TypeScript d.ts file and uses it to generate a SWC file for a JavaScript library. Pass this SWC file to the Apache FlexJS transpiler or an IDE like Flash Builder or IntelliJ IDEA, and it’ll be as if that library were written in ActionScript. The compiler will check for errors and you’ll get code hints to speed up your development. For more details, read my second tutorial on NextGen ActionScript, Introduction to dts2as: Using TypeScript definitions with ActionScript.
I’m working on many more articles and tutorials (including videos!), and I’m adding new capabilities to the dts2as utility. I’m also watching out for additional ways that new open source tools can improve the workflow with transpiled ActionScript. If you’d love to learn more about how you can keep ActionScript in your workflow (or bring it back!), please support me by becoming a patron. Patreon follows a slightly different model than sites like Kickstarter. Instead of a one-time pledge, Patreon is about more long-term, sustainable funding with small, monthly donations. You’ll get frequent updates about new tutorials and tools as I work on them, and I hope to release some special patron-only exclusives too! It’s easy to sign up and you can cancel at any time. Pledge any amount that you prefer, even as little as a dollar.
Support Josh and the next generation of ActionScript on Patreon
Thank you so much, and happy coding!
This is a big deal! The dts2as tool is genius. Would love to see a custom Flash CC document with this initiative… I can see a “AS3 for Web” document!
Support for transpiled ActionScript in Flash CC would be really cool!
Done! You can count on my support.
Thank you so much! I really appreciate it!
This sounds great. Really looking forward to see this project grow.
This is what Adobe should have done as soon as CreateJS was out! Well better late than never.
Hey Josh,
did not find a better place to ask questions, so here goes: Does this support swf files with MovieClips, Sprites and all that stuff? Meaning is this actually capable of converting real world Flash games to WebGL right now or is it (for now) a pure transpiler that comes without the Flash asset and rendering pipeline?
Thanks
The Apache FlexJS SDK does not try to recreate Flash Player in JavaScript. It’s contains a transpiler for ActionScript to JavaScript, and how you render things on screen is up to you. SVG, DOM, Canvas, WebGL, or JS libraries that wrap any of those things.
Check out the spriteflexjs project, which aims to emulate many of the classes that you are familiar with in Flash Player, like display objects and things like that. Here are some demos that show it in action.
The as3swf project might also be worth checking out. It includes some exporters that take shape data from SWF files and converts it into programmatic drawing commands for various targets. For instance, here’s a JSCanvasShapeExporter that exports drawing commands for HTML Canvas. There’s also an SVGShapeExporter that exports SVG markup. The API looks pretty straight forward, so you could probably write custom exporters for other targets, if needed.
Hi Josh, is there a forum for NextGen ActionScript to post questions?
Hi, Eketol. There isn’t a forum specifically for NextGenAS yet. You are welcome to post to the Apache Flex Users mailing list, though. Since the AS3-to-JS transpiler is part of the FlexJS SDK, you’ll be perfectly on-topic. However, if you’re not using the FlexJS components, be sure to mention that to avoid confusion.