Recently I have been configuring Xcode to build Actionscript 3.0 projects. You can see my progress captured in this screen -- where I have successfully built the Open Source Actionscript port of the Box2D physics engine.

This has been a much larger endeavor than I imagined when I first heard that this was possible. I have found a number of useful tutorials in blogs online that enabled me to accomplish this, but since there wasn’t one single resource that got me through everything that I needed for my particular setup, I was inspired to start my own blog to contribute back what I’ve learned.

why

First, why would anyone want to do this? Flash 9 does all of this out of box. What advantages are there in building your Flash projects from Xcode?

These are the reasons that drove me to do this:

1. 1)Xcode and the Flex SDK are both completely free
   

2. 2)Xcode is a sophisticated IDE, on par with Visual Studio, with the style of an iPhone
   

3. 3)Xcode natively supports SVN (Open Source version control)
   

4. 4)Xcode has a really nice Diff feature for visually merging changes between developers
   

5. 5)Xcode runs in Mac OS (which I enjoy)
   

6. 6)Using an external IDE helps me separate code from visuals (discouraging some of my bad old 2.0/timeline scripting habits)
   

Now, granted there are other solutions out there for coding outside of Flash. I’ve dabbled with SEPI from time to time, and SharpStyle Neutron lets you build ActionScript from Visual Studio (but for a price, and not 3.0 yet or with the version of VS that I use). If you have an IDE solution that hits a number of the points I’ve listed, or has better points, please tell me about it.

While these reasons are good enough, it was number 4 that really motivated me to make the switch. However, you don’t have to complete all the steps I am outlining here in order to use this feature. If you have Xcode and the Apple Developer Tools installed, you will find FileMerge in your Application Utilities directory.

From a terminal try:

open /Developer/Applications/Utilities/FileMerge.app

Using this application just wetted my appetite for developing with Xcode.

By the way, if you have problems comparing files with this utility (if it selects the whole file as one big difference) try opening the file in Xcode and changing the Line Endings in both files to match. Open both files in Xcode, and select “View > Text > Line Endings > Windows (CF/LF)” for each. Merging files across operating systems will cause this (which is a likely circumstance if you’re using Mac OS), and its a pain to figure this out on your own. So, now you know.

what

Now, in order to replace Flash with Xcode, I started with a list of feature to match:

1. 1)Builds SWF files from AS3 code
   

2. 2)Syntax Highlighting
   

3. 3)Code Hinting (in Xcode its called CodeSense)
   

4. 4)Creates new Projects from a Template
   

5. 5)Quick access to Reference from the code
   

6. 6)Test Movie or Build & Go, the ability to build and launch the SWF in one step
   

7. 7)View Trace statements when testing
   

Presently, I’m about half-way through this list. I have nearly completed the Templates, and I know the last two items are possible, I just need to put in the time. So items 4-6 on my list will be the subject of a subsequent post here.

The subject of this post are the tasks I’ve managed so far; items 1-3 on the above list.

how

A quick disclaimer, and recommendation -- this will take some time, so if you’re on mission-critical work right now wait and either do this in between projects or in your leisure time at home (which is when I did this). Giving yourself the time to do this will go a long way in reducing the stress that goes with trying to make something work against the odds. Also there are likely to be some differences between my computer configuration and yours that may make this more difficult than simply following a series of well defined steps. Be prepared to do more investigation and some troubleshooting when things don’t work. If you found this site, you will likely find other resources as well. When you do, please post back here in the comments to help consolidate this information in one place for others who are running into the same things.

Here’s a description of my computer, for your reference. I’m running Mac OS X Version 10.5.1 (Leopard) on a MacBook Pro with Xcode Version 3.0. I am using it with Adobe Flex SDK version 2.0.1. I installed the Apple Developer Tools into “/Developer” at the root of my startup disk -- which I believe is what it does if you run the install without changing anything. Other than that, I’ll tell you where to put everything as we go.

If you are using an earlier version of Mac OS and Xcode, then the tutorials I used may work for you without a hitch. Here are all the references I found:

http://blog.joshbuhler.com/xcodeflex/

http://enefekt.com/sansbrowser/index.php?s=actionscript

http://www.senocular.com/flash/tutorials/as3withmxmlc/

http://www.gskinner.com/blog/archives/2005/12/easily_compile.html

http://osflash.org/xcode_actionscript_integration

http://jrobinsonmedia.wordpress.com/2007/04/19/xcode-flex-application-template/

(let me know if one of these links breaks -- links that promised to solve all of my problems but led directly to a 404 error were the bane of my existence while setting this stuff up)

Okay, without further ado...

Step 1

Confirm that you are in fact running a Mac and that it has the Developer Tools with Xcode installed on it. If you don’t have Xcode you can download it by creating a free “ADC Online Membership” with Apple:

http://developer.apple.com/products/

(Look for the button that says “Join Now” instead of “Add to Cart”, and follow through the process until you’ve downloaded and installed Xcode Tools, which is over 1GB so it may take a while)

Step 2

Locate your copy of the Flex SDK. It is available on Adobe’s site:

http://www.adobe.com/products/flex/downloads/

(Be careful not to get distracted by the other trial downloads on this page, you have to click the checkbox to enable the download that you need)

Step 3

Place the Flex SDK into the “/Developer/SDKs/” directory.

You may be prompted for authentication to perform this action.

Step 4

Open Xcode and create an empty project. Call it “ActionscriptTemplate”, so you’ll be ready to move on to the next tutorial when you complete this one.

Step 5

Now you are going to set up your project to use Flex as a target SDK. To do this, right-click on ActionscriptTemplate and select “Get Info”.

Under “General”, down almost to the bottom of the panel, select “Other” in the pull-down for “Cross-Develop Using Target SDK”. Confirm the action when prompted. Then select “choose” and browse to the folder where you placed the Flex SDK.

Close this panel.

Step 6

Now you will set up the build target. Right-click Targets and select “Add > New Target...”

In the New Target Assistant that comes up, select “External Target” and press “Next”.

Name the target “mxmlc” and press “Finish”.

This target will now appear under the Targets grouping in the Project Window. Double-click it and modify the Custom Build Command. In “Build Tool” enter the path to your SDK. Mine is:

/Developer/SDKs/flex2_sdk_hf1/bin/mxmlc

Your path will likely be different if you’ve downloaded a newer version of the Flex SDK, so find the folder you placed in the “/Developer/SDKs/” folder earlier and get the correct path there.

For the “Arguments” input:

-output ./bin$(PROJECT_NAME).swf -file-specs $(PROJECT_NAME).as

Deselect the “Pass build settings in environment” checkbox, and remove all of the options under Build Settings.

Step 7

Create an Actionscript file called “ActionscriptTemplate.as” in your project.

Now add some code to test. Here’s the code I used:

package

{

import flash.display.MovieClip;

import flash.text.TextField;

public class ActionscriptTemplate extends MovieClip

{

public function ActionscriptTemplate()

{

var helloDisplay:TextField = new TextField();

helloDisplay.text = "Hello, World!";

addChild(helloDisplay);

}

}

}

Step 8

Press the Build button. If it finishes with “Build succeeded” in the status line, congratulations! You’ve completed the first task.

Go to the “bin” directory to run the SWF file that was created.

Step 8

Download the Actionscript specification files.

Step 9

Place the specification files where Xcode will find them.

In Xcode 3.0 for Leopard, the path is:

/Developer/Library/Xcode/Specifications/

In Xcode 2 and earlier, the path was:

/Library/Application Support/Apple/Developer Tools/Specifications/

Open an Actionscript code file to see the color coding applied to the recognized keywords in Xcode.

Step 10

Edit the preferences for CodeSense to suggest automatically or after a delay. Otherwise, you need to press ESC to invoke it. I saw a post where someone mentioned that this only works for files that are opened from a project in Xcode, and that lone files which you drag onto Xcode from the Finder don’t benefit from CodeSense. However, I have tested it using lone files without any problem. I am guessing this is an Xcode 2 vs 3 difference.

This completes tasks 2 and 3. You should be good to go with Xcode and AS3.

By the way, if anyone knows how to create an installer to automate these steps, please comment. Thanks!