Introducing NextGen ActionScript

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.

NextGen ActionScript logo

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.

Patreon logo

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!

About Josh Tynjala

Josh Tynjala is a frontend software developer, open source contributor, karaoke enthusiast, and he likes bowler hats. Josh develops Feathers UI, a user interface component library for creative apps, and he is a member of the OpenFL leadership team. One of his side projects is Logic.ly, a digital logic circuit simulator for education. You should follow Josh on Mastodon.

Discussion

  1. Ruben

    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

    1. Josh Tynjala

      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.

Leave a Reply

Your email address will not be published. Required fields are marked *