Sven Dens

So today I wanted to compile a simple “Hello World” app and package it as an .air-file for installation in Adobe Apollo on my Mac…

This can already be done in FlashDevelop – a great editor, but it only runs on Windows – but I couldn’t yet find a source telling me how to do it from Eclipse or any other editor that runs on OS X. So it was time to roll-up my sleeves and figure out a way to do it.
Didn’t turn out to be hard at all, using ANT and starting off from the nice Apollo ANT-template for FlashDevelop built by Ryan Taylor.

First, a few things you’ll need before we kick off:

1. Flex 2 SDK: download it from Adobe at http://www.adobe.com/products/flex/sdk/
2. Apollo runtime and SDK: download it from Adobe at http://labs.adobe.com/technologies/apollo/
3. Apache ANT: if you don’t have it yet (if you’re on OS X, you have it!), download it from http://ant.apache.org/bindownload.cgi
4. Flash 9 debug player: download it from Adobe at http://www.adobe.com/support/flashplayer/downloads.html#fp9

Install the SDK’s and the Apollo runtime.
Download and unzip the OSX_ria_template.zip to a location on your hard-drive.

Next, fire up Eclipse and start a new project (File -> new -> project -> General -> project).
I called mine “HelloWorld”, but you can use anything you like.

Go back to Eclipse and right-click your project name, choose “Import” and import the files you just unzipped. You’ll probably be asked to overwrite the .project file, answer YES.
view screenshot on Flickr
view screenshot on Flickr

You should now have a couple of folders:

• deploy
• docs
• html_template
• icons
• src

and 3 files:

• application.xml
• build.properties
• build.xml

view screenshot on Flickr

The template contains everything you need to build and run Flash/Flex/Apollo apps from ActionScript source files or MXML (Flex2) source files.

The build.properties file is where you’ll want to edit some stuff to make it match your Mac.
First, let’s look at the important ones. Scroll down to the bottom of the file and find a line that starts with “flex2.dir”.
Change the following lines to match the locations on your system where the SDK’s, browsers and Flash Player are installed:

# Location of the Flex 2 SDK and Apollo SDK directories.
flex2.dir=/Users/desv/development/sdk/flex2
apollo.dir=/Users/desv/development/sdk/apollo

# Browsers – add others if you wish
firefox=/Applications/Firefox.app
safari=/Applications/Safari.app

# Location of the Flash 9 debug player
saplayer=/Applications/Adobe/FlashPlayers/FlashPlayer9_debug.app

Note there are NO TRAILING SLASHES!

view screenshot on Flickr

Also in this file is mentioned what you want to use as source (mxml or as files), and where you want the output to go (browser, Flash Player, Apollo AIR file, Apollo Debug Launcher, …).
Changing lines 27 and 36 in the build.properties file define this.
The documentation should speak for itself.

view screenshot on Flickr

That’s it, nothing left to do but compile now
So how do you go about that?

In the Eclipse menu, click Run -> External Tools -> External Tools.
Create a new Ant configuration by clicking the top-left icon and give it a new (I used AS3MXMLCompile). On the Main tab, under “Buildfile”, click Browse Workspace and select the build.xml file. Under “Base Directory”, click Browse Workspace and select your project.

view screenshot on Flickr

Now hit “Run” and you should see a “Hello World” window popping up in the Apollo Debug Launcher. Congratulations, you’ve just compiled your first Flex/Apollo app in Eclipse on OS X!

view screenshot on Flickr

To try other combinations, check out the build.properties file and change the parameters on lines 27 and 36.

I’ve documented all the steps in both build.xml and build.properties, so you *should* be able to figure out the rest for yourself.

Let me know how you like it!

Sven