A tutorial written 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.
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.
First, let's add Apache FlexJS as an SDK to FDT. We'll need to do that in the FDT preferences window.
On Mac, select the FDT menu → Preferences.... On Windows, select the Window menu → Preferences...
From the list on the left side of the Preferences window, open the FDT category and choose Installed SDKs.
On the right, press the Add button, and select the folder where you installed Apache FlexJS.
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.
Press the OK button in the Preferences window to finish.
Everything should now be ready to create a new project that uses Apache FlexJS.
Next, we'll create a new FDT project using Apache FlexJS.
Open the File menu → New → New FDT project...
Enter your Project name. For this example, you might choose
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.
For the Default SDK choose the Apache FlexJS SDK that you added in the FDT preferences.
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.
FDT Explorer where the project's file are listed, select the
HelloFDT.as file in the
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!
Would you like to learn more about transpiling ActionScript? Please become a patron, and support the creation of a whole library of detailed, step-by-step tutorials — including video tutorials! Let's work together to teach the next generation of ActionScript developers.