How to create a project in FDT to transpile ActionScript

by Josh Tynjala

FDT has been a powerful development environment available to ActionScript developers for many years. Recently, FDT added support for Apache FlexJS, with a project template specifically for transpiling ActionScript and integrating with browser APIs. It even works with the free version of FDT!

If you'd prefer to use an IDE instead of running the asjsc compiler on the command line, FDT is now one of the easiest ways to get started.

Requirements

For this tutorial, you should install FDT. A free version is available.

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

Add Apache FlexJS to FDT

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

1. On Mac, select the FDT menu → Preferences.... On Windows, select the Window menu → Preferences...

2. From the list on the left side of the Preferences window, open the FDT category and choose Installed SDKs.

3. On the right, press the Add button, and select the folder where you installed Apache FlexJS.

4. The SDK Search Result window will open, and you may customize how the SDK is named in FDT. The default values are generally acceptable, so press the Add New SDKs button at the bottom.

5. Press the OK button in the Preferences window to finish.

Everything should now be ready to create a new project that uses Apache FlexJS.

Create a new project

Next, we'll create a new FDT project using Apache FlexJS.

1. Open the File menu → New → New FDT project...

2. Enter your Project name. For this example, you might choose HelloFDT.

3. In the section marked Choose a template for your new project, choose Web in the first list, and then choose Web-JSC in the second list.

4. For the Default SDK choose the Apache FlexJS SDK that you added in the FDT preferences.

5. Press the Finish button.

Your new project is now created. The main HelloFDT.as class will contain some sample code to get you started. In the next step, we'll run it in a web browser.

Run the application

1. In the FDT Explorer where the project's file are listed, select the HelloFDT.as file in the src directory.

2. Select the Run menu → Run As → FDT SWF Application. While this menu item refers to a SWF file, rest assured that this type of project only creates HTML and JavaScript.

3. Choose the HelloFDT-debug launch configuration and press the OK button.

Your browser will launch and display a webpage that looks something like this:

Try pressing a button. Then, go back to the code, and try out a few more browser APIs in ActionScript!