EDIT: This guide still seems to get a lot of attention but it should go without saying, at this point it’s a bit outdated. The ant flex tasks and the standalone Flash player are now included with the Flex 3 SDK for one thing. I don’t use Eclipse and fdb anymore myself since I learned to dislike Eclipse and the debug version of the standalone Flash player will dump trace messages to stdout (so it will appear in a terminal).

This guide isn’t particularly definitive, mostly because right now all the tools needed lack real cohesiveness, paticularly on Unix. This is simply how I pulled everything together to make things work using freely available software.

Step 1: Get Eclipse

Download Eclipse. Put it somewhere. If you’re using Linux, install using it using your favorite package management software. This guide will probably only work if you use 3.2 or above. (NOTE: If you use Ubuntu for this, then at the time of this writing Eclipse 3.2 is only in the “universe” repository, you can enable “universe” using Synaptic)

Step 2: Pull Flex together

Download the Flex 2 SDK. You’ll probably need to sign up for an account. Extract it. Download the Flex Ant Tasks and extract flexTasks.jar (in lib) to lib in your Flex directory.

You’ll need to set up the standalone player so you can debug your swf files. This varies between Operating Systems…

  • Linux: Download the Linux Flash Players and extract the debug player (in standalone/debugger/flashplayer.tar.gz) to bin in your Flex folder. Rename the the debug player (which is named flashplayer) to gflashplayer. You can also install the debug plugin for browsers if you’d like.
  • Windows: Run SAFlashPlayer.exe (in your Flex directory, under player/debug/) and it will register itself as the debug player. There’s also two installers for debug plugin if you care to install them too.
  • OSX: Use SAFlashPlayer.dmg (in your Flex directory under player/debug/) to install the debug player. There’s an installer for debug plugin there too.

Step 3: Create a project

Create a general project in Eclipse and put various Actionscript-related files there. Create a file called build.xml. This will be your Ant build file, and what you’ll use to compile your project. There’s more details on Ant here. Here’s a sample…

<project name="sample" basedir="." default="build">

<property name="FLEX_HOME" value="/path/to/flex"/>
<taskdef resource="flexTasks.tasks" classpath="${FLEX_HOME}/lib/flexTasks.jar" />
<target name="build" description="Build">

<mxmlc file="example.as" output="bin/example.swf" use-network="false" compiler.optimize="true">

<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
<source-path path-element="${FLEX_HOME}/frameworks"/>
<source-path path-element="/path/to/as3-library"/>

</mxmlc>

</target>

</project>

The taskdef entry and the FLEX_HOME variable need to be there in order to use the mxmlc task to compile swf files. On Linux the property use-network="false" mysteriously allows the compiled swf to access files on your computer, without it an error is thrown when you try to access a file

Step 4: Syntax Highlighting (optional)

There is no free Actionscript 3 syntax highlighter, and the only one for Actionscript 2 is poor (sorry guys). Luckily Actionscript resembles heavily resembles Java. Simply associate .as files with the Java Editor in Eclipse (Window->Preferences, then General->Editors->File Associations) and hope nobody notices.

  • To change the formatting (particularly tab width) go to the Formatter (Java->Code Style->Formatter) and toy with the settings until it looks like your preferred coding style.
  • To change the colors go to the Syntax Coloring section (Java->Editor->Syntax Coloring)
  • To prevent Java from making suggestions, go to auto-activation (Java->Editor->Content Assist) and remove any characters in the “Auto activation triggers for Java” section.

Step 5: Compilation

Open the Ant viewer in Eclipse (Window->Show View->Ant) and drag your build.xml file to it. Use it to run build files.

Step 6: Debugging Preparation

You’ll need another target in your build.xml used for creating a secondary swf for debugging.

<mxmlc file="example.as" output="bin/example-debug.swf" use-network="false" incremental="true" debug="true">

Run this target whenever you want to update the debug version of your swf. The debug="true" property needs to be there in order for it to work. Make sure the output/swf file has a different name than your optimized build since this version is purely for debugging and will be slower.

Step 7: Debugging

Open the External Tools window in Eclipse (Run->External Tools->External Tools…). Select “Program” and create a new configuration. Set “Location” to the location of fdb, the Flash debugger (it’s in your Flex directory, under bin). The working directory should be the location of your compiled swf files. The only argument should be the file name of the swf file you’ll be debugging.

Run the external tool configuration you just created (there’s a button for it on the toolbar) whenever you want to debug the swf. When you do a console will open up, and the debugger will start. The Flash Player window will open, but it will remain frozen until you type “continue” in the Eclipse console. All output (trace) will appear in the console. If you familiarize yourself with fdb you can make use of many more features. To stop debugging, type “exit” in the console or just close the player window and terminate fdb.

33 Responses to “How to develop for Flash on any OS, for free”

  1. simon Says:

    thanks for putting this information out. After a couple of typos (mine, not yours) this worked like a charm. Nice one.

  2. Franck Wolff Says:

    Hi,

    You may be interested in this new open source Flex2/J2EE project:

    Granite Data Services 0.1.0 is available for download.

    Granite Data Services aims to be a free, open source (LGPL’d), alternative to Adobe Flex 2 Data Services for J2EE application servers. This first release focuses on AMF3 serialization/deserialization via mx:RemoteObject and EJB3 services (Session and Entity Beans on JBoss/Hibernate).

    Note that alternative does not mean drop down replacement: you won’t be able to simply deploy a Flex 2 Data Services application into Granite Data Services without modification. The main goal of this project is to give an open source frameworkfor Flex 2/EJB3 developments with full AMF3/RemoteObject benefits.

    See more on http://www.graniteds.org (download, documentation and live demo).

    Regards,
    Franck Wolff.

  3. Alex Ramirez Says:

    Very usefull post, I’m about to start my first AS3 project and was thinking to my self, how I was going to work.

    I’d switched to Linux too just 3 weeks ago, I’m using Fedora in my laptop and I have another linux box with Ubuntu, it’s nice to hear about you.

    the only thing I need to sort out it’s that I develop java in eclipse too, and I don’t want to modify my config for java.

    by the way, your website renders fonts a little too small in fedora core 6, or unless it’s just my system.

  4. Tom Chiverton Says:

    You can get basic mostly working syntax highlighting and insight for MXML code using the XML editor from Eclipse’s WTP project, and the XSD file from http://www.falkensweb.com/mxml2.xsd

  5. GramBorder Says:

    Hi

    I want to all of you know, World is mine, and yoursite good

    Bye

  6. Ray Says:

    where is as3-library?

  7. morganusvitus Says:

    The site looks great ! Thanks for all your help ( past, present and future !)

  8. Clark Jones Says:

    I have been using the flex builder under linux (Ubuntu) using the instructions and it works very well but designer mode doesn’t work hope this can help someone else who uses linux.

  9. ncomp Says:

    what a great summary….
    a 5 minute set up…
    thank you very much…

  10. Josephine Says:

    This is such a great site – thanks for doing this. I have a question though…..I’m using CentOS 4.4 and I downloaded install_flash_player_9_linux.tar.gz from adobe. Their site indicates that this is the debug version. However, there is no standalone/debugger/flashplayer in this tar. libflashplayer.so is the main thing you get from install_flash_player_9_linux.tar.gz. Am I looking in the wrong place? What do I rename gflashplayer and move to flex/bin?

  11. Randi Joseph Says:

    Hi Josephine,

    The standalone linux versions are further down on the downloads page. Do a quick find for ‘standalone’ and you will see ‘Download the Linux debugger and standalone players ‘

  12. Josephine Says:

    Yeah, I DID get the one that says “Download the Linux debugger and standalone players,” but there is nothing inside like standalone/debugger/flashplayer.

  13. Randi Joseph Says:

    its there… download

    http://download.macromedia.com/pub/flashplayer/updaters/9/flash_player_9_linux_dev.tar.gz

    and extract

  14. Sam Jones Says:

    Thanks for the walkthrough! I’ve been running Fedora exclusively for the better part of a year now, and hate that the last month or so I’ve had to boot Windows for my Flex dev. This’ll be a great boost to my morale 😀

  15. sateesh Says:

    HI,

    I am trying to set up the environment and when i try to biuld the ant script i am getting the Error

    The definition of base class FrontController was not found

    Where are these classes located?? i opened all the jar files and couln’t find this class in any of them..

    Thanks
    Sateesh

  16. Max Says:

    sateesh: Looks like a class from Cairngorm is missing from your library. Maybe this flexcoders thread has answers.

  17. JasonM Says:

    Instead of renaming flashplayer to gflashplayer

    create a symbolic link instead.

    ln flashplayer gflashplayer

    The only reason to use the name gflashplayer is for legacy (flexunit looks for gflashplayer, for instance.)

  18. Max Says:

    JasonM: That’s a good idea I suppose. I never really intended to use that specific flash player with anything but fdb so I was fine renaming it.

  19. Anonymous Says:

    不好用啊

  20. Joshua Wait Says:

    Creative solution. Thanks for going through the efforts to not only discover this one, but also to document it for the rest of us.

  21. Dog training Says:

    Very interesting… as always! Cheers from -Switzerland-.

  22. neil Says:

    Hi

    Thanks for a great post, however you say

    > Step 2: Pull Flex together

    And you give this page as a resource – http://www.adobe.com/go/tryflex

    which only contains downloads for Windows (exe) or a mac (dmg)

    I am using Fedora, how can i extract these files ?

    Thanks

  23. Max Says:

    neil: You need the Flex 2 SDK, not Flex Builder. It’s further down the page.

  24. Mike Says:

    I am trying to set up the debug and no matter what the wizard is telling me: “External tool working directory does not exist or is invalid”, I have the path set to: “/home/mike/flexSDK/bin/fdb”. An ls of “/home/mike/flexSDK/bin” returns:
    -rw-r–r– 1 mike mike 733 2007-02-06 18:35 asdoc
    -rw-r–r– 1 mike mike 106496 2007-02-06 18:34 asdoc.exe
    -rw-r–r– 1 mike mike 659 2007-02-06 18:35 compc
    -rw-r–r– 1 mike mike 106496 2007-02-06 18:34 compc.exe
    -rwxr-xr-x 1 mike mike 748 2007-02-06 18:35 fdb
    -rwxr-xr-x 1 mike mike 106496 2007-02-06 18:34 fdb.exe
    -rwxr-xr-x 1 mike mike 8622772 2007-11-30 18:46 flashplayer
    -rw-r–r– 1 mike mike 1026 2007-02-06 18:34 jvm.config
    -rwxr–r– 1 mike mike 659 2007-02-06 18:35 mxmlc
    -rwxr–r– 1 mike mike 106496 2007-02-06 18:34 mxmlc.exe

    I even went as far as to chmod fdb and fdb.exe to be execuateble (755). Am I doing something wrong or just dumb and I don’t see it?

  25. Mike Says:

    back to the dumb thing I was playing with the location, while it was complaining about the working dir. I knew I would see it right after I posted.

  26. Stephen More Says:

    Eclipse is optional. If you prefer old school command line like me, give maven a try.

    Here is a sample maven config file:
    http://maximporges.blogspot.com/2007/09/maven-2-property-references.html

  27. Max Says:

    Just so you know, Ant runs from the command line too. It’s very make-like, you just type “ant”. 😉

  28. ibraheem Says:

    thank you very much for your readable information
    hoping good luck to you but there is one think I’d like to tell it to you don’t forget mem order thanks

  29. Flash Free Says:

    This is a great blog!

  30. Using Flash 10 debug projector in Flexbuilder 3.3 « Fiji Ecuador Seattle Greece Montana Says:

    […] http://blog.brokenfunction.com/2007/01/29/how-to-develop-for-flash-on-any-os-for-free/ Possibly related posts: (automatically generated)Sprouts […]

  31. Desenvolvendo Aplicações RIA/Flex/Flash em qualquer SO e de graça « LivDev - O segundo passo Says:

    […] BrokenBlog, há um artigo que mostra como desenvolver aplicações em Flash, independente de SO e gratuitamente. Tal artigo é claro e assertivo: a substituição de ferramentas de desenvolvimento altera sim o […]

  32. lr Says:

    vim supports both mxml and actionscript syntax highlighting

  33. Tweets that mention BrokenBlog » Blog Archive » How to develop for Flash on any OS, for free -- Topsy.com Says:

    […] This post was mentioned on Twitter by Tech news (BOT), Proggit Articles. Proggit Articles said: How to develop for Flash on any OS, for free: submitted by stesch [link] [comment] http://bit.ly/hq8E1w […]

Leave a Reply