Update: I’ve received a few comments that these instructions may not be 100% accurate anymore. I haven’t taken the time to update them for Xcode 3.0, as ever since I got my first taste of using Flex Builder, it’s been too hard to go back to Xcode. So I broke down and spent the money for FB. If you’re doing any serious AS3 or Flex work, I strongly recommend using Flex Builder 3.0.

You’ll get:

• Code completion
• Debugging
• Profiling (FB Pro)
• Refactoring support
• Design view

It’s worth it.

Flex Builder is a great application for developing applications using Flex & Actionscript 3.0. However, it’s also a few hundred dollars. But, if you’re serious about building kick-butt web applications, it’s definitely one of the best tools around.

Adobe, wanting to help developers get their Flex on, has done a wonderful thing that benefits the web development community as a whole – they’ve released the Flex SDK for free. Great news for those of us who are perpetually broke (which is probably most of us.)

The Flex SDK is a free tool that will allow you to create Flex & Actionscript 3.0-based applications, without the need to purchase Flex Builder.

The Flex SDK consists of a few things:

• mxmlc – This is the command-line based application used to compile your code into the swf files that comprise your applications
• compc – This compiler is used to produce Flex components
• fdb – A command-line based Flex debugger
• The Flex framework files needed to develop a Flex application
• Flash Player 9 – both a standalone version and browser plugin. These are debugger versions of the Flash Player
• A series of JAR files used by the Java-based compilers
• Folders containing links to Flex development resources, html templates for deploying your applications, and sample source code to help you get started.

Essentially, the SDK contains everything you need to get started developing your own amazing Flex applications. Everything but an IDE (Integrated Development Environment). Now, really all you need to start writing code is a text editor. Though, to be really productive, a great IDE is the way to go. These help to keep your code organized, provide code hints, make compiling & testing easier, and generally make for happier developers.

Apple has provided a great IDE for development in the form of Xcode. This powerful IDE was originally developed as a tool for development of Cocoa-based applications for OSX using languages such as Objective-C & C++. However, it is extensible to a degree and can be used for development in other languages. One of the best parts about Xcode is that just like the Flex SDK, it’s free!

I’ve been using Xcode for Flash development for a couple years now, and it’s become an indispensable part of my workflow. It was only natural that I began to use it for Actionscript 3.0 as well.

So, if you’re ready, let’s dive in and start writing some AS3 with Xcode!

What you’ll need

• The Flex SDK
• Xcode
• A Mac
• Actionscript 3.0 code definition files
• About 30-45 minutes

Download & Install Xcode

To download Xcode, you’ll first need to setup a free developer’s account at developer.apple.com. Xcode can be found in the Downloads > Developer Tools section. Start the download, then go get some lunch – the download is almost 1 GB.

Download & Install the Flex SDK

Once you’ve installed Xcode & downloaded the Flex SDK, you’re going to copy the Flex compiler & framework files to a location where Xcode can easily find them. This is the same location where Xcode looks when building Cocoa applications for OSX.

Navigate to MacintoshHD/Developer/SDKs/ and create a new folder named Flex. You may need to authenticate as an administrator to create this folder, or to copy a folder into that location.

Copy the contents of the Flex SDK files into this new folder.

Create a Flex Project Template

The files I’ve included with these instructions contain project template files for a Flex-based application that you can install and use as-is. However, you may have your own preference on how to setup your projects. I’ll walk you through setting up some basic project & file templates, which will then give you a head start on creating templates that match your own preferences.

Launch Xcode, and let’s get started.

First, create a new project by selecting File > New Project.

Select “Empty Project” from the list, click Next, and name the project “FlexTemplate”. Take note of where this project is saved, as we’ll need to find it later.

Now we need to tell Xcode that we’ll be compiling a Flex project, and using mxmlc as our compiler.

In the project window, in the “Groups & Files” pane, right-click on the “FlexTemplate” project, and select “Get Info”.

Under the “General” tab of the Project Info panel, select “Other” in the “Cross-Develop Using Target SDK:” combo box Now click “Choose” under that combo box to browse to the folder you copied the Flex SDK to. Close this panel.

Now right-click on the Targets header, and select Add > New Target…

Select “External Target” from the Special Targets grouping, and click Next. Name the target mxmlc, and click Finish. This target will now appear underneath the “Targets” grouping. Double-click on this new target, and modify the Custom Build Command. It should be /Developer/SDKs/Flex/bin/mxmlc and enter the following arguments:

-output ./bin/$(PROJECT_NAME).swf -file-specs $(PROJECT_NAME).mxml -benchmark=true

These arguments specify the file you will be compiling, as well as where your compiled swf file will be located. These are the basic arguments you’ll need to pass in order to compile your application, and there are others you can add if you need them. To view the available options, just run mxmlc from Terminal, and it’ll provide instructions on how to access the various help options. The benchmark argument isn’t required, but I like using it as it’s nice to have a little feedback during the compile process. You’ll be able to use a similar process for compiling Actionscript-only projects. We’ll cover that in a bit.

In the “Build Settings” window, select all of the options and remove them. Also be sure to uncheck the “Pass build settings in environment” option.

Close this window, and now right-click on the “FlexTemplate” project item and select “Add > New File…” Select “Empty File in Project” click Next, and then name the file “FlexTemplate.mxml” and click Finish.

The new file will appear, and we’re going to make a bare-bones Flex application that will serve as a basic template to start with.

Save this file, and click the “Build” button at the top of the editor. This should pass the options we set earlier to mxmlc, and compile your swf file. You can view any progress or errors by opening the “Build Results” window under “Build > Build Results”

If everything is setup correctly, you should now have a swf file called “FlexTemplate.swf” in the bin folder of your project folder. When you open that swf, you should have a blank swf, with the default Flex background.

You should now have a project file ready to be turned into a template that can be reused. You can follow the steps above each time you create a new application, however, you can also turn this project into a reusable template.

Creating the Template

Quit Xcode.

Open a new Finder window and browse to /Library/Application Support/Apple/Developer Tools/Project Templates

Create a new folder named “Flash” and inside that, create a folder called “Flex Application”.

Copy the contents of the FlexTemplate folder you created earlier into this new folder.

Open “FlexTemplate.xcodeproj” inside the new Flex Application folder.

Right-click the “FlexTemplate.mxml” file, and select “Rename” . Rename the file to: “«PROJECTNAME».mxml” (To create the “«” and “»”, use opt-\ and opt-shift-\, respectively. Only rename the file from within Xcode.

Quit Xcode again. If Xcode asks you if you want to Close, Save As…, or Re-save the file you just deleted, select Close.

Now locate the file “FlexTemplate.xcodeproj”. Right-click, and select “Show Package Contents”. In the folder that appears, create a new XML file, and save it as “TemplateInfo.plist”. This file will provide a description of the file to Xcode when browsing the template listing, as well as tell Xcode what files need to be renamed, and what to name them. Enter the following XML into this new file, and save it.

Save and close this file, and restart Xcode. Create a new project, and in the list of project types, you should now have an option under the “Flash” header for “Flex Application”. Select this, give the new project a name and save it, and you should have a new basic Flex application.

The process for building Actionscript-only applications is similar, only you’ll use .as files instead of .mxml files. The nice thing about creating this template is that even though it takes a little bit of time to set it up, it saves a lot of time in the long run.

You should now be able to code Flex applications using the free development tools provided by Adobe & Apple. In my opinion, Flex Builder is still the best option for developing Flex apps, but until that’s released for the Mac, or you’re ready to pay for it, Xcode is still a pretty good option.

Downloads

I’ve provided a download file that contains project templates for both Flex and Actionscript-only projects. Just copy these files into /Library/Application Support/Apple/Developer Tools/Project Templates.

FlexApplicationTemplate.zip

Code Completion

You can download some Actionscript 3.0 language spec files from http://opencode.forabettertoday.org/?p=11. These files can be used to help provide code completion & hinting for Actionscript 3.0. I haven’t been able to find any MXML language files yet, but if I do, you’ll find them here.