More then two years ago I wrote a guide on how to use TextMate for developing ActionScript 3.0 projects using the free Adobe Flex SDK. It is the most popular blog post on my site until today. As with many other step-by-step tutorials, it has become outdated though. The good news is that it has become much easier to setup TextMate for AS3. Here’s the new way of doing it:

1. If you don’t already own it, download and install the trial version of TextMate from the Macromates website. If you are new to TextMate have a look at the online manual to familiarize yourself with the basic functions of the editor.

2. Download the free Flex SDK from the Adobe Open Source website. The latest stable and tested version at the time of writing is Flex SDK 4 Release. Move the extracted folder into your Developer/SDKs folder. If those two folders don’t exist yet, create them at the root of your harddrive.

3. Download Simon Gregory’s ActionScript 3 bundle for TextMate from GitHub. Unzip the downloaded file. Rename the folder to ActionScript 3.tmbundle and double-click it. TextMate will install the bundle and add it to the Bundle Menu.

4. Now let’s set up a new ActionScript project in TextMate. Select File→New Project from the menu, create a new folder for your project in the Finder and drag it in the TextMate Project Drawer. Click somewhere in the Project Drawer so that the new folder is not selected. Then click on the info button located in the bottom of the Project Drawer. Add two shell variables so that the ActionScript Bundle knows where to look for your files:

TM_FLEX_FILE_SPECS    src/Main.as
TM_FLEX_OUTPUT        bin/Main.swf

5. For compilation we want to use the faster Flex Compiler Shell (fcsh) instead of the default mxmlc compiler. To enable it go to TextMate→Preferences→Advanced→Shell Variables and add a new global variable:

TM_FLEX_USE_FCSH    true

6. Let’s write a simple “Hello World” application. Create two new folders named bin and src in your project directory. Then create a new file in the src folder and name it Main.as. It should look something like this:

package
{        
    import flash.display.Sprite;
    import flash.text.TextField;

    [SWF( backgroundColor='0xFFFFFF', frameRate='30', width='200', height='200')]

    public class Main extends Sprite
    {
        private var textField: TextField;

        public function Main()
        {
            textField = new TextField();
            textField.text = "Hello World.";

            addChild(textField);
        }        
    }
}

7. Make sure that ActionScript 3 is selected in the language dropdown menu and then save your project from the file menu. Press Apple+B to compile the main class. This will open the terminal and start up the Flex Compiler Shell. You will find the generated Main.swf in the bin folder.

8. Open the Main.swf with the Flash Player. If you have not installed it yet, you can find it in your Flex SDK installation under runtimes/player/10/mac/Flash Player.app.zip.

max wrote at Monday 5. April 2010:

i get this message when i try to build my project “To succesfully run this action you need to install «fcsh». If you know that it is already installed on your system, you instead need to update your search path.” i have the Flex SDK here – ”/Developer/SDKs/flex_sdk_3.5” and set shell variables. i’m a little confused about “updating the search path” ...anything i’m missing?

thanks for this post, i was looking for a more light-weight option to work with AS3.

Andreas wrote at Tuesday 6. April 2010:

Max, try to rename your flex folder to flex_sdk_3. This is one of the default folders where the ActionScript 3 bundle will look for the SDK. If you select Bundles->ActionScript 3->Help from the TextMate menu you can see a list of all default folders under the first paragraph.

Matthias wrote at Sunday 11. April 2010:

Hi, are there other SHELL VARIABLES? I want to the compiler to transcode (embed) some assets, but the compiler doesn’t look into the path relative to /src but to / (project root in my case). Any suggestions? Regards, Matthias

Andreas wrote at Sunday 11. April 2010:

Matthias, you can find a list of all shell variables from the TextMate bundle at github.com/simongregory/actionscript3-tmbundle.

curt wrote at Friday 23. April 2010:

does anyone have any idea on how to get this configured for e-texteditor? very much appreciated!

Andreas wrote at Saturday 24. April 2010:

I haven’t worked with e-texteditor so far. Anyone else got some tips on that?

Jedidiah Hurt wrote at Saturday 28. August 2010:

Thanks for taking the time to write this post. I’ve been using TextMate for AS3 development, but still using Flash to compile. Mainly because I’ve never gotten into Flex development and so don’t know about all the new compiler directives (like the SWF call in your example). Would one have to read a Flex book to learn about the available compiler directives when using FCSH to compile AS3 projects, or is there an online resource I could use to get up to speed?

Andreas wrote at Monday 30. August 2010:

I’m not so familiar with all the different compiler directives, but my guess is that you’ll find better documentation online than in a book.

JPG wrote at Tuesday 31. August 2010:

Thanks for breaking down this procedure in easy detailed steps. Helps the noobs like me. I got everything working with the example you provided but I get an error in the terminal as it compiles:

(fcsh) fcsh: Assigned 1 as the compile target id Loading configuration file /Developer/SDKs/flex_sdk_4/frameworks/flex-config.xml /Users/JPG/Projects/Prototypes/TextMateExp/src/Main.as(18): col: 4 Error: Call to a possibly undefined method addChild.

addChild(textField);
^

I did the build by accessing the TextMate menu – Bundles > ActionScript 3 > Build. I’m guessing that it still uses AS2? Do I need to remove the default ActionScript bundle?

Andreas wrote at Tuesday 31. August 2010:

You don’t need to deinstall the default ActionScript bundle. Are you sure that your Main class extends Sprite?

JPG wrote at Tuesday 31. August 2010:

Oh that’s it.. thanks! I created the sample you gave from a Class template and didn’t notice that by default the Class template extends Object. I replaced it to Sprite and it works. Good times ahead, thanks again.

Erik wrote at Friday 3. September 2010:

Hi,

Will this work on ppc? I do the steps, but after command + b textmate just pops up a window which i can’t read because it disappears fast and an empty terminal window… Am I doing something wrong? I tried flex 3 and flex 4…

thanks for your help.