When developing Flash games I use a fairly uncommon combination of development tools which I’d like to share here. I’ll give an overview on how to setup the OS X editor TextMate for developing ActionScript 3.0 projects using the free Adobe Flex SDK. If you are new to Flash development and working on a Mac this might be a good alternative to buying Flash Professional 9 or Flex Builder since TextMate is available for a convenient price of €39. Setting everything up can be a little bit tricky and requires a number of steps so I try to be as clear as possible. Let’s go …

1. Download and install the 30 Day Trial of TextMate from the Macromates website. If you are new to TextMate please take 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 website. Move the extracted folder into your Developer/SDKs folder.

3. Make sure that you have Subversion installed. If you don’t you can download an easy-to-install package of Subversion from the homepage of Martin Ott.

4. Get the latest ActionScript 3 bundle for TextMate using Subversion. To do this, open the Terminal application, copy the following script into the Terminal and execute it by pressing return.

mkdir -p /Library/Application\ Support/TextMate/Bundles
cd /Library/Application\ Support/TextMate/Bundles
export LC_CTYPE=en_US.UTF-8
svn co http://macromates.com/svn/Bundles/trunk/Review/Bundles/ActionScript%203.tmbundle/
osascript -e 'tell app "TextMate" to reload bundles'

Now the ActionScript 3 Bundle should show up in the TextMate Bundle menu.

5. Download and install the Flex Compiler Shell—it compiles much faster than the standard mxmlc compiler by keeping everything in memory.

6. To use the Flex Compiler Shell from TextMate we also need to download and install the terminal application iTerm.

7. 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 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        deploy/Main.swf

We also need to let TextMate know where the Flex SDK is located. Go to TextMate→Preferences→Advanced→Shell Variables and add a new global variable:

TM_FLEX_PATH    Developer/SDKs/Your Flex SDK Folder

8. You are still with me? Great. Let’s finally write a simple “Hello World” application. Create two new folders named deploy 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);
        }        
    }
}

10. We are almost done! Make sure that ActionScript 3 is selected in the language dropdown menu. Press Shift+Command+B and select Build (fcsh) to compile the main class. This will open iTerm and start up the Flex Compiler Shell. You will find the generated Main.swf in the deploy folder. That’s it.

Claudio Rego wrote at Monday 14. January 2008:

Very cool and straightforward howto. Thanks. Just addin that in Leopard you don’t need iTerm, as the system’s Terminal can handle the build process pretty well.

Beau wrote at Tuesday 19. February 2008:

Is there any way to get trace messages to the terminal?

Andreas wrote at Tuesday 19. February 2008:

Beau, all trace calls will be printed out to the flashlog.txt which you will find in /Users/YOUR_USERNAME/Library/Preferences/Macromedia/Flash Player/Logs. I usually add this file to the TextMate project drawer to have an easier access to it.

Brian Mulloy wrote at Sunday 21. September 2008:

thanks a bunch for this howto. i’ve been using this setup for a few months now and it’s been great.

i’ve been running into examples that want to import fl.controls.Button; and other flash components. is there a straight-forward way to add these classes to this setup?

i’ve tried a few variations, but have had no luck.

Andreas wrote at Tuesday 23. September 2008:

Brian, I have never used flash components in a AS3-only project so far, but have a look at this tutorial.

Yono wrote at Friday 26. September 2008:

Hi – Ive been trying to get this working and I get this error: The TM_FLEX_FILE_SPECS file src/Main.as cannot be found. I have followed all the steps – any ideas? I am using flex_sdk_3 instead of two…could that be it?

Andreas wrote at Saturday 27. September 2008:

Yono – it should work with Flex SDK 3 as well. Are you sure you have created the Main.as file and the src folder?

Yono wrote at Saturday 27. September 2008:

Hi Andreas, Yep I think I have it all – but just to check: I have my project folder – within it 2 folders deploy and src and within src the Main.as. In the project information pop up I have added the two new shell vars - TM_FLEX_FILE_SPECS is src/Main.as and TM_FLEX_OUTPUT is deploy/Main.swf

Not quite sure what to try next! Any suggestions? I feel like I am missing something from the install – Im running 10.5.5 so I have tried with and without iTerm but I DONT have Subversion installed – is that it – I tried copying and pasting the commands from this web page into terminal and it seems to have downloaded the Bundle OK – could that be it?

Andreas wrote at Sunday 28. September 2008:

It should work without subversion and with the regular Terminal on OSX 10.5. To check if the bundle is installed correctly, open the Bundle Editor in the TextMate menu: Bundles->Bundle Editor->Show Bundle Editor.

Yono wrote at Wednesday 1. October 2008:

Hmmm- yep if I open the Bundle Editor AS3 is there – all seems OK. Would you mind having a quick look at the files I have and seeing if there is something stupid I am doing? click here

Andreas wrote at Wednesday 1. October 2008:

You need to move the TextMate project file into the actual project folder, since src/Main.as is relative to the path of the project file.

Yonos wrote at Friday 3. October 2008:

I didn’t realise that the TextMate files location was linked to the whole project – I thought it wa just a pointer. I had to fix a problem with my fcsh file location but now it works. Thanks Andreas fo your patience and help. Now to some AS3 in TextMate for a change.

Mike wrote at Friday 3. October 2008:

Excellent, I’ve been using this setup for a while too. I’ve just spent 10 minutes going out of my tree trying to set it up on my home machine to notice an easy typo on my half (I’m thinking this could stumble others too, hence writing.)

Make sure one of the vars is “Main.as” and the other is “Main.swf”, might seem simple advice, but easily overlooked when copying from the screen!

flash game design wrote at Thursday 9. October 2008:

hey

Really nice tips!

will try to keep it in my mind

thanks!

Darren wrote at Monday 9. March 2009:

also like to note that [SWF] must only be followed by public class Main extends Sprite else the compile directive is invalid… this wasn’t anywhere in the documentation that i could find.

Bingeboy wrote at Friday 3. April 2009:

Great tutorial! No issues at all. Very well explained.

Matt wrote at Saturday 17. October 2009:

iTerm never opens for me, just terminal. Should this just be happening all on its own or is there something that needs to be changed in the prefs for iTerm?

Andreas wrote at Tuesday 20. October 2009:

Matt – If you are using Leopard or Snow Leopard there is no need for iTerm anymore. I guess I should make an updated version of this tutorial.

Joel Johnston wrote at Sunday 8. November 2009:

command + shift + B no longer activates fcsh as indicated in the as3 bundle. It USED to, but something has changed. Note: I’ve upgraded to snow leopard.. How can I override the highlight command that now executes in its place now?

Andreas wrote at Tuesday 10. November 2009:

Joel, you can change the keyboard shortcuts in the Bundle Editor. You can find it from the menu under Bundles->Bundle Editor->Show Bundle Editor.