Summary

Why have an ActionScript 3 to JavaScript Workflow

The short answer is to give ActionScript 3 developers who have built Starling games a path to JavaScript. Things change fast in the current landscape and there are many new platforms and languages that developers can choose to start a new project. At the least this provides a transition path for those developers building Starling based games.

This is not meant to be a general purpose solution for all AS3 code. In other words not all Flash APIs are implemented in KontikiJS. Having said that KontikiJS is an open source project and people can add any needed functionality.

Simple Tutorial: Compiling the Example

The zip file contains two folders: HungryHeroJS and common. The source files of the HungryHero AS3 game are in HungryHeroJS, whereas the “common” folder contains the four subfolders: KontikiJS, randori-compiler-latest, randori-sdk, and Starling-Framework. All of these are open source Github repos (list of repos at the end of the post) but I provided them here to have a known working set of code to start from.

Also note this is JavaScript so if things don’t work check the developer tools and make sure to also understand where WebGL and Web Audio is supported. I can’t help with browser limitations of WebGL and Web Audio.

Basic Steps

Unzip HungryHeroJSExample.zip

Open up Terminal (Mac) or Cmd Prompt (Windows) and navigate to the unzipped HungryHeroJS folder

Run buildjs.sh (Mac) or buildjs.bat (Windows)

Start a web server in this folder, or copy the index.html, media folder, and js-randori folder to a webroot. I use httpster (Node.js package) to start up a web server in this folder

Compiling Your Project

The easiest method for now to try out your own code is to reuse some of the files in the HungryHeroJS folder. I would copy over the folder and rename it to your project. Remove the media folder and src folder. Then copy in your source files into a new “src” folder. Then change the index.html file to reference your main AS3 class file instead of “HungryHero”.

Things you will probably run into:

You need all AS3 source files, no SWCs

Embed statements need another piece of metadata [Factory], see the com.hsharma.hungryHero.AssetsHungeryHero.as file for an example.

Thanks for trying it out. WebGL doesn’t work on mobile browsers yet, except for some on android (not the stock one)

renaun

It works wherever WebGL works, welcome to HTML5 standards :)

Viktor

Safari 7.0 goes well!

Shaun Michael Stone

Very impressive stuff.

Bill Brown

Fantastic concept. Adobe needs to throw some weight behind the project to support the entire ActionScript API.

Timonxue

awesome! ??!

Jean-Baptiste Dubois

Great Work!! Thanks a lot ! Is there a way to build with an ‘ant’ task ?

renaun

Sure check out the sample build.xml in KontikiJS

Sent from a device

Ramez

Thanks Renaum,

I know it’s an Adobe-mandated direction to have a path to HTML5, but am not sure of the worth, since it only works on PC / Mac. If so, I would stick with Flash (the whole premise of HTML5 is that it works cross-platform). On mobile, I would use the appropriate platform (notably AIR). Using Javascript / WebGL for the fun of it … maybe! If I have plenty of free time to work with an archaic language like Javascript (which BTW crashes my browser). Otherwise, what is the commercial value?

renaun

Agree it’s more of a fun project that I did on my own to see if it was possible. If anything it’s meant to allow choice. Sent from a device

jjjefff

Renaun, this is really pretty cool, and with webgl support growing seems really interesting for porting starling games/apps to html5 (though the above demo still doesn’t work on iPad for some reason).

I notice that the randori framework website is now gone, but the github repos are all still in place. Is this tech still workable?

renaun

It is still workable, but i don’t think its actively worked on so you would be having to work on both the compiler and the ported framework.

jjjefff

So I was able to compile your example from the zip file. I did have to update the output .js files to properly locate the /media directory on my web server.

I tried a few experiments of my own and ran into some AS3 APIs not yet implemented (as you noted in the KontikiJS readme), including Graphics.draw* and ByteArray.read/write (amf serialization stuff.)

So I don’t think it’ll work for my project, but I’m really impressed with how much is supported, and others will surely still find it useful.

Thanks again!

Gaurang Patel

Great work….I try compile action-script to JavaScript by downloading hungryhero zip, but it didn’t work for me ..However it is not showing any error, but when i am trying to run index.html file, it didn’t show anything..