Easily Compile AS3 and Flex2 on Mac OSX

[UPDATED Jan 3, 2006: Added “flCompile and httpTest”, updated workflows to make it easier to customize command line parameters like swf dimension and background color]

There are a lot of things I want to play with in AS 3 and Flex 2, but there’s one problem: I’m using Mac OS X, and FlexBuilder 2 is only available for Windows right now. Fortunately, I stumbled upon this page via this blog entry by Robin Hilliard, which explains how to compile ActionScript 3 and Flex 2 on the Macintosh using the command line.

I’m a Mac user though! Commandlines are for lesser OSes! Refusing to stoop to typing arcane commands into the Terminal, I instead spent my evening learning to use Automator and the rather eccentric AppleScript language to build a solution. The result is a contextual menu plugin that will compile AS3 and Flex 2 MXML files, then open them in Safari for testing. It’s still a little rough around the edges, and it’s nowhere near as nice as working in FlexBuilder2, but it works! I also fleshed out the instructions for getting command line compiling working on the Mac.

You can download it by clicking here (10kb). It requires Mac OS X 10.4. Please read the ReadMe file – the contents of which follows:

Disclaimer

I take absolutely no responsibility for any problems you experience or damages (direct or indirect, including but not limited to loss of data) caused by using these workflows. I have tried my best to make sure they are totally safe, but I am not an AppleScript expert or a command line guru. Use at your own risk.


About

The flCompile context menu workflows allow you to compile and test AS3 and Flex2 MXML files in Mac OSX Tiger (10.4) without having to use the command line directly.

Once you have installed these workflows (see below), you can simply select an AS3 or MXML file in the finder then right click (or control click) it and select one of the flCompile workflows from the “Automator” submenu. The command will launch the terminal and execute a command to begin compiling the file. If you selected the “flCompile and Test” command, it will open a prompt asking you if you’d like to launch the compiled SWF – you MUST wait until the compile is done in the Terminal before clicking OK!

Installation

First, you must set things up so that you can compile AS3 and Flex2 MXML files on OSX. Macromedia doesn’t offer any official support for doing this, so it is a little involved:

1) Using a PC or VirtualPC (I used the latter), download and install the Flex 2 Alpha (full install) from labs.macromedia.com

2) Open the directory it was installed in (usually C:\Program Files\Macromedia\Flex Builder 2 Alpha 1), and copy the “Flex Framework 2 Alpha 1” directory to your MacOSX 10.4 computer. You’ll probably also want to copy the “Install Flash Player 8.5 OSX.dmg” file from the “Player/Version 8.5 alpha 1/Debug” directory in the install directory.

3) Rename the “Flex Framework 2 Alpha 1” directory on your Mac to “flex”, and move it to your home directory (your user directory ex. Users/Grant/). This should allow you to compile AS3 and Flex2 MXML files via the command line. Install the 8.5 player using the dmg file.

4) Verify that everything is working by copying the “HelloAS3.as” included with flCompile to your home directory, and executing the following command in the Terminal:

java -jar flex/lib/mxmlc.jar -flexlib flex/frameworks -file-specs helloas3.as

It should give you compiling messages, and generate a “HelloAS3.swf” file in your Home directory.

Once that’s working, you just need to install the flCompile workflow files:

1) Move the “flCompile.workflow” and “flCompile and Test.workflow” files into your “Library/Workflows/Applications/Finder” directory. You may have to create the “Workflows/Applications/Finder” directories if they do not exist.

2) Make sure it is working by clicking on an AS3 or Flex2 MXML file in the finder, then right clicking (or control clicking) on it and selecting “flCompile” from the Automator submenu.

Using flCompile and httpTest

flCompile and httpTest was added on January 3 in response to a problem in the Mac 8.5 player preventing loads from working properly locally. The only solution I found was to test content on a web server, which can be a pain if you have to upload via FTP every time. Instead, you can turn on “Personal Web Sharing” in the “Sharing” control panel, and use the web server built into OSX to test.

The httpTest command lets you develop in a subdirectory (“as3/” by default) of your “~user/Sites/” directory and compile and test using the localhost address. To change the subdirectory, see the Customizing flCompile section below.

For more information, view this entry on the gBlog:

http://www.gskinner.com/blog/archives/2006/01/local_loading_i.html

Customizing flCompile

You can easily customize the command line params used by flCompile (or the other workflows) by double clicking on the workflow file to open it in Automator. At the top of the second workflow item (Run AppleScript) you will find a cmdLineParams variable declaration that you can update to suite your needs.

Likewise, near the top of the third worflow item of the “flCompile and httpTest” file you will find a serverPath variable declaration that you can change to whatever subdirectory path you would like to use when testing SWFs in the local webserver.

Limitations / Bugs

I’ve never really worked with AppleScript before, so these workflows have a few limitations at the moment. I hope to fix these by converting to pure AppleScript (rather than Automator and AppleScript) over the next couple weeks.

– I haven’t determined how to get a reference to the file that was right clicked on in Automator yet – this means that you MUST select the file (so that it is highlighted) and then right click it and choose a command.

– I haven’t found a way to halt execution of the workflow if an inappropriate file extension is found, so you’ll just get an AppleScript error, and a friendly message in the Terminal if something other than a “.as” or “.mxml” file is selected.

– I haven’t found a way to determine for sure when the compile is done, so Compile and Test relies on the user clicking ok when the compile is complete to indicate when the SWF should be opened.

– always opens a new Terminal window. I’d like to make it open in the topmost Terminal window

If you are an AppleScript guru and want to lend a hand, I would definitely welcome it.

Credit and thanks:

I’d like to thank and credit whoever put together this page (Alisdair Mills?) for the info on how to compile on OSX:

http://www.mook.co.uk/~alisdair.mills/mxmlc_compiler_osx.html

I’d also like to thank these sites for the great AppleScript information:

http://www.macosxhints.com/

http://bbs.applescript.net/

Grant Skinner

The "g" in gskinner. Also the "skinner".

@gskinner

18 Comments

  1. nice one for taking the time to sort and share this Grant!

  2. I’ve found this method:

    http://www.joshbuhler.com/2005/10/21/use-xcode-to-compile-your-as-30/

    Works perfectly well. No need to compile from the command line, just “Build” from within Xcode.

    Now I just need to launch a browser once the compilation has finished. Maybe I should look into automator for this as I couldn’t find anything in XCode that would enable me to do this.

  3. Thanks Grant !

    It’s a very nice plug πŸ™‚

  4. Hi!

    It’s actually quite possible to use Eclipse + Zorn-plugin (Flex2) on OS X. What’s lacking is the mxml side of things in Flex2-projects, but Actionscript 3.0 projects work like a charm with breakpoints, runtime variable debugging, keywords etc.

    Just get the zorn* files from the “features” and “plugins”-folders from the windows-installation and copy these to your Eclipse installation on OS X.

    To sum things up:

    1. Install Eclipse 3.1.1 on OS X

    2. Install on Windows and copy the “zorn*” files from “features” and “plugins” to Eclipse-installation-folder on OS X, or alternatively get these from the plugin-installation zip-file. However make sure you unpack the *.jar files to folders.

    3. Install mxmlc on your path, /Library/Flex2/ for instance.

    4. Start new Actionscript project on OS X

    w

  5. Hey Grant,

    This makes me understand another way of compiling directly via java πŸ™‚ However, here is the “simple” no-fuss Adobe method of compiling:

    You don’t need to have Eclipse or the Flex Builder to do this. This method will work from any IDE including Eclipse’s Run command or the good old command prompt.

    Slightly off-topic — I still use Editplus and don’t see the craze in using a 125MB editor when all it does is done by Editplus or any good editor like Primal Script or SEPY in under 3MB!! (Well SEPY is big but still.. Eclipse is way too big for my taste in IDE’s and its promise does not live upto its size πŸ˜‰ Anyway, I’ll bash Eclipse some other day. For now, this is how to compile AS3 code or .mxml files using Flex Tools in any IDE or from the command line:

    To compile your AS3 OR .mxml files into .swfs you use the “mxmlc.exe” in your Flex bin directory. My path is:

    Program to invoke:

    C:\Program Files\Macromedia\Flex Framework 2 Alpha 1\bin\mxmlc.exe

    Arguments to pass

    -coach -l “C:\Program Files\Macromedia\Flex Framework 2 Alpha 1\frameworks” -optimize -file-specs “$(FilePath)”

    initial directory (optional.. doesn’t matter as long as you pass filePath and not fileName in your IDE)

    $(FileDir)

    ——————————-

    Make sure the directories above reflect the appropriate paths for your system

    You can also type the flag -help to see a list of all available options, like this:

    “C:\Program Files\Macromedia\Flex Framework 2 Alpha 1\bin\mxmlc.exe” -help

    There are many more possible arguments

    The .mxml file bloats up like crazy. I am still trying to figure out an elegant way of deploying .mxml in runtime.

    But I hope this method helps a few other folks who might want to try out the Flex builder in their favorite IDE’s or directly from the command line.

  6. Grant,

    I have successfully tested the swf’s by just opening them in a web browser (safari). No Webserver needed. I just control-click and use openwith…

    Just thought I’d let yuou know.

    cheers, Julian

  7. Julian,

    As I mentioned above, it is only local loading (and possibly only local loading of sounds – I’ll probably test other loading in the next day or so as time permits) that requires a web server. If you aren’t loading anything in your AS3, you can just open in Safari normally (or use the “flCompile and Test” workflow.

  8. With the Flex 2 Beta, I noticed that the flexlib option does not seem to work, but the following command line works after you copy the lib and framework folders:

    java -jar /flex/lib/mxmlc.jar –show-coach-warnings=true –strict=true -load-config /flex/frameworks/flex-config.xml -file-specs hello.mxml

  9. Hi Grant,

    thanks, I manage to compile and it generates the swc file. However when i launch the http test (in Safari using Flash Player 8.5) the controls/containers of Flex never appear.. do you have any idea why this could be? All that appears is the grey gradient of flex but whichever mxml code I compile (compilation shows no erros) simply doesn’t appear.

  10. Quick comment : As Kirk noted, looks like there has been a change in the switch from Alpha to Beta.

    Just do a search / replace on the following in the Workflow scripts

    -flexlib flex/frameworks

    -load-config flex/frameworks/flex-config.xml

    and it will work nicely.

    Hope to have a go at knocking up a Droplet in XCode over the weekend (which would allow you to have the compiler in the Dock).

  11. One of the benefits of the mac is the editor TextMate. You can literally customize it any way you want with commands, snippets, templates etc.

    Here’s a command to compile the SELECTED file in your project drawer, inspired by gProject’s default movie publishing πŸ™‚

    # compile AS3 in Terminal.app

    osascript

  12. I have a macbook pro (intel OSX)

    i installed Eclipse 3.2M (universal binary)

    i copied features , plugin and Flex 2 Framework to my eclipse folder ,

    launched eclipse , i can create actionscript project, create classes , have the code completion and other Zorn stuff

    but i cannot save files … when i try to save a class it give me an error message πŸ™

    someone have an idea ???

    thank you

  13. Please help:(

    I just downloaded the latest framework for the Mac(Flex SDK 2.0), and then I downloaded your fCompile,and did everything from 1,2,3 with no problems.However, when I tried to compile: java -jar /flex/lib/mxmlc.jar –show-coach-warnings=true –strict=true -load-config /flex/frameworks/flex-config.xml -file-specs helloas3.as

    I get the error”Unable to access jarfile /flex/lib/mxmlc.jar” I also tried the way in the readme file, but I saw on your blog that somebody said for the 2.0 release to use this one. Both give the same error. Is there something I did really wrong? Could you please help me get this to work?

    Thank you so much,

    John

  14. Steffen Fiedler June 21, 2006 at 7:21pm

    I installed Beta3 and got that type of error (step4):

    xyz:~ me$ java -jar flex/lib/mxmlc.jar -flexlib flex/frameworks -file-specs helloas3.as

    command line: Error: unknown configuration variable ‘flexlib’

    Use ‘mxmlc -help’ for information about using the command line.

    xyz:~ me$

    Ideas would be greate!

    steffen

  15. I use edit plus,iam new to perl,After the input is typed on;how do i view my output.

  16. Flex Builder 2.0 is coming for mac OSX. Here are some first hand screenshots from today:

    http://technoracle.blogspot.com/2006/09/flex-builder-20-on-mac-osx-first-looks.html

  17. Hi Grant..

    Works Good!! Thanks for that…

  18. Hey guys,

    So i’ve been doing some flex 4 flashplayer 10 work and felt like switching over to my Mac for a bit.. here is what it did..

    download flashplayer 10 do an uninstall .. install.

    download the flex 4 open source.. extract..

    add this to your frameworks/flex-config.xml file

    within the tag

    macFonts.ser

    hit up terminal..

    go to your mxmlc.jar directory

    > cd PathToFLEX4/lib

    then type

    > java -jar “mxmlc.jar” PathToActionScript/Code.as -load-config PathToFLEX4/frameworks/flex-config.xml

    bingo bango..

    if you want to get fancy..

    add this to your flex-config.xml

    for a little bit cleaner execution line..

    PathToActionScript/

    good luck!

Leave a Reply

Your email address will not be published. Required fields are marked *