How to create a project in IntelliJ IDEA to transpile ActionScript

by Josh Tynjala

IntelliJ IDEA has recently become one of the more popular development environments available to ActionScript developers. While Jetbrains hasn't fully optimized their IDE for the Apache FlexJS SDK yet, it only requires a few tweaks to reconfigure a module to transpile ActionScript to JavaScript and run it in a web browser.

If you'd prefer to use an IDE instead of running the asjsc compiler on the command line, IntelliJ IDEA is now a great way to get started.

Requirements

For this tutorial, you should install IntelliJ IDEA Ultimate. A free trial is available.

Additionally, you should install Apache FlexJS 0.7 or newer. Use the Apache Flex SDK Installer to download it.

Add Apache FlexJS to IntelliJ IDEA

First, let's add Apache FlexJS as an SDK to IntelliJ IDEA. We'll need to do that in the IntelliJ IDEA preferences window.

1. Select the File menu → Project Structure....

2. From the list on the left side of the Project Structure window, choose SDKs under Platform Settings.

3. In the middle column, press the + (plus sign) button, and choose Flex/AIR SDK.

4. Select the directory where you installed Apache FlexJS, and press the OK button.

5. In the list on the left of the Project Structure window, select the Libraries item under Project Settings.

6. In the middle column, press the + (plus sign) button, and choose ActionScript/Flex.

7. Inside the Apache FlexJS SDK, select js/libs/js.swc.

8. Press the + (plus sign) button to add another SWC to this library. Then, select frameworks/libs/Language.swc inside the Apache FlexJS SDK, and press the OK button.

9. Give the library a name that you can remember, such as flexjs-js-libs.

10. Press the OK button in the Project Structure window to finish.

Everything should now be ready to create a new module that uses the Apache FlexJS SDK.

Create a new module

Next, we'll create a new IntelliJ IDEA module using Apache FlexJS.

1. Open the File menu → New → Module...

2. From the list on the left side of the New Module window, choose Flash.

3. For the Target platform, choose Web.

4. Ensure that Pure ActionScript is not checked.

5. For the Output type, choose Application.

6. For the Flex/AIR SDK, choose the Apache FlexJS SDK that you added in the previous section.

7. Check Create sample app and enter HelloIDEA.as for the name.

8. Ensure that Create HTML wrapper template is not checked.

9. Press the Next button.

10. Enter your Module name. For this example, let's choose HelloIDEA.

11. Press the Finish button.

The new module has now created, but we have a couple more things to configure.

Configure module settings

Next, we'll tweak a few of the module's settings to make it work properly with Apache FlexJS.

1. Open the File menu → Project Structure....

2. In the list on the left, choose Modules under Project Settings.

3. In the middle column, open your module's branch, and select it.

4. In the General tab, set the Output folder to your module's main directory. This will make it easier to run the transpiled code directly from IntelliJ IDEA.

5. Navigate to the Dependencies tab.

6. Press the + (plus sign) button and choose Project or Global Library....

7. Select the flexjs-js-libs library that we defined earlier, and press the OK button.

8. In the Linkage column, change the flexjs-js-libs linkage to External.

9. Navigate to the Compiler Options tab.

10. From the Locales setting, remove en_US.

11. Near the bottom, add the following arguments to Additional compiler options:

    -js-output-type=jsc -load-config+=/ide/IDEA/intellij-config.xml
    

    Replace with the real location of the SDK on your file system.

Create your first class

1. Open HelloIDEA.as in src directory of your module.

2. Delete the entire contents of this file, and replace it with the following code:

package
{
    public class HelloIDEA
    {
        public function HelloIDEA()
        {
            var button:HTMLButtonElement = document.createElement( "button" ) as HTMLButtonElement;
            button.innerHTML = "Press Me";
            document.body.appendChild( button );

            button.addEventListener( "click", button_clickListener, false );
        }

        private function button_clickListener( event:MouseEvent ):void
        {
            alert( "Hello World" );
        }
    }
}

You'll notice, as you type, that IntelliJ IDEA suggests classes like HTMLButtonElement and its members like innerHTML and addEventListener() automatically. We can use web browser APIs in ActionScript!

HTML for a debug build

Create a file named debug.html in the root of the project. Include the following markup that references the JavaScript files from the js-debug directory:

A debug build loads each ActionScript class at runtime using the Google Closure library. The dependency manager is loaded by including the base.js file:

Another file, HelloIDEA-dependencies.js, tells the dependency manager which classes from the project are needed, and the order that they should be loaded:

In the , another script block instantiates the HelloIDEA class. This will start the application.

Run the application

1. Open the Run menu → Edit Configurations....

2. Press the + (plus sign) button and choose JavaScript Debug.

3. Set the Name to HelloIDEA.

4. Next to the URL, press the ... button and choose the debug.html file that you created in the previous section.

5. For the Browser ensure that Chrome is selected. It may be called Default.

6. In the Before launch section, press the + (plus sign) button, and choose Make.

7. Press OK in the Run/Debug Configurations window.

8. Open the Run menu → Debug..., and choose the HelloIDEA configuration. Google Chrome should open.

   You may need to install the . If it isn't already installed, switch back to IntelliJ IDEA. It should prompt you with a link to install this extension.

You should see a webpage that looks something like this:

Try pressing the button to see what happens!

Adding breakpoints

1. Open the Run menu → Debug..., and choose the HelloIDEA configuration. Google Chrome should open.

2. In IntelliJ IDEA, open js/out/bin/js-debug/HelloIDEA/HelloIDEA.js. This is one of the generated JavaScript files.

3. Try adding a breakpoint on the line where alert() is called in HelloIDEA.js.

4. Press the button on the page, and the debugger in IntelliJ IDEA will take over.

Printing to the console

To print debug messages to the console in IntelliJ IDEA, you may use the standard ActionScript trace(), or you can call JavaScript functions like console.log() or console.error().

Try changing the button's click event listener to print a debug message instead of showing an alert:

private function button_clickListener( event:MouseEvent ):void
{
    trace( "Hello World" );
}