Once you got used to developing for Flash in Flex Builder, you hate to do any programming in Flash IDE. Still you sometimes might have to: Flex Builder won’t allow to publish into a FLA file. (There are of course many other reasons, like supporting older AS1/AS2 projects, we don’t go into that here.) Thanks to Eclipse’s ability to be customized, there are ways to make things at least a little easier. I give here a little overview of how I’ve set up my environment, based on several helpful resources I’ve found in the web.

1. Install FlashCommand
2. Install Ant

And for each project:

1. Create/modify Ant file
2. Create Actionscript project
3. Set up project and FLA file

What you need

• Flex Builder
• Flash IDE (CS3 or CS4)

Install FlashCommand

flashcommand is a python script by Mike Chambers that lets you compile FLA files from the command line using Flash IDE. Download it and put it wherever you want.

Install ANT

If you’re used to FDT (or Eclipse in any way) you may well know Ant. Ant is the premier build tool for any developers working in Eclipse, with many many cool possibilites to automate your workflow. Here’s how you install Ant in Flex Builder 3 Standalone:

1. Go to Help > Software Updates > Find and Install
2. Search for new features to install, click next
3. Select «The Eclipse Project Updates», click finish
   Note: If you do not have the option above click «New Remote Site» and enter «The Eclipse Project Updates» as the name and «http://update.eclipse.org/updates/3.3» as the url.
4. In Eclipse project updates look for «Eclipse Java Development Tools …» – it might be in «Eclipse SDK Eclipse 3.3.2» but this depends on what version you have installed and what version is currently available. Select it and click next.
5. Accept licence agreement, click next. Then click «Finish» to start download.
6. Once downloaded, click «Install all»
7. Restart Eclipse (you’ll be asked to)

Create Project

1. Create a new Actionscript Project in Flex Builder
2. Add a new «build» directory in the project root
3. Add your FLA file(s) and assets to the build folder and your source files to the src folder
   (I also strongly recommend adding external libraries to and «externals» directory and use svn:externals property on it, but that’s another story)
4. Add build paths. You have to do this at least twice:
   • In the Flash IDE for the FLA: Publish Settings > Actionscript 3 «Settings…». Don’t forget to add the src folder at least.
     Test your FLA once done. It should compile just fine.
   • In Flex Builder: Project > Properties > ActionScript Build Path. Add your external libraries here. This is used so Flex knows where to lookup your classes, it won’t actually be needed for compiling, because that’s what Flash IDE’s gonna do.
5. Now you’re almost done: you can edit your classes in Flex Builder and switch to Flash IDE to publish and/or test your movie. We’re gonna make this a little more comfortable with Ant and flashcommand.

Add Ant build file

1. Create a new file build.xml in the root folder and open it with Ant Editor (in Flex Builder aka Eclipse)
2. Edit the build.xml according your setup (see below for example)
3. Add build.xml to Ant View (Window > Other Views…)
4. Run an action by double clicking it in Ant View: there you go!! It will compile in Flash IDE and open in your browser for testing!

Sample Ant build.xml

	<?xml version="1.0" encoding="UTF-8"?>
	<!-- ====================================================================== 
	     Nov 28, 2008 1:37:54 AM                                                        
 
	     MyProject    
	     Compile in Flash IDE
 
	     sev                                                                
	     ====================================================================== -->
	<project name="MyProject" default="Compile and Run" basedir="./">
	        <!-- project specifics -->
	        <property name="browser" value="Safari"/>
	        <property name="swf.filename" value="MyProject"/>
	        <property name="html.filename" value="fla/index.html" />
 
	        <!-- Flash IDE Commandline compiler -->
	        <property name="python" value="/usr/bin/python" />
	        <property name="flash.command" value="/path/to/flashcommand" />
 
	        <!-- directories -->
			<property name="user.path" value="/Users/yourname"/>
 
	        <property name="build.dir" value="${basedir}/build" />
 
	        <property name="main.fla" value="${build.dir}/${swf.filename}.fla" />
	        <!-- paths -->
	        <property name="output.path" value="${build.dir}/${swf.filename}.swf" />
 
			<!-- you can also point to the file:///path/to/index.html -->
	        <property name="local.path" value="http://localhost/projects/MyProject/${html.filename}"/>
	        <property name="log.path" value="${user.path}/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt"/>
 
	        <!-- Compile python flashcommand -e  -s build/MyProject.fla -o build/MyProject.swf 
 
	        usage: flashcommand -e | -c | -p [-v] [-x] (-s <sourcefile>) ([-o] <exportpath>) ([-t] <timeout>)([-d] <tempdir>) [-j]
 
	        Options and arguments:
 
	        -a : Prints version and about information.
	        -c : Specifies save and compact action. 
	        -d : Specifies temp directory that will be used for temporary files. Optional.
	        -e : Specifies export action.
	        -h : Prints usage information.
	        -j : Specifies that the generated JSFL file should be printed. If this option is specified, Flash will not be executed.
	        -o : Specifies the output file if -e flag is also set. Optional. If not specified, file will be output to same directory as source.
	        -p : Specifies publish action.
	        -s : Specifies source file. Required.
	        -t : Specifies timeout value. Optional.
	        -v : Specifies verbose mode. Optional.
	        -f : Specifies that the Flash authoring version installed is a version other than Flash CS3
	        -x : Specifies whether Flash should be closed after it is done processing. Optional.    
 
	        -->
 
	<target name="Compile and Run">
		<antcall target="Compile in IDE"/>
		<antcall target="Clear Log"/>
		<antcall target="Open in Browser"/>
	</target>
 
        <target name="Compile in IDE">
        		<echo>${flash.command} -e -c -s ${main.fla} -o ${output.path}</echo>
                <exec executable="${python}" failonerror="true" logError="true">
                        <arg line="${flash.command}" />
                        <arg line="-e " />
                        <arg line="-s ${main.fla} "/>
                        <arg line="-o ${output.path}"/>
                </exec>
        </target>
 
 
        <!-- Open in local browser -->
        <target name="Open in Browser">
                <exec executable="open">
                        <arg line="-a ${browser} ${local.path}" />
                </exec>
        </target>
 
        <!-- Clear Debug Log -->
        <target name="Clear Log">
 
        	<concat destfile="${log.path}">                                                                                                            
.: Sev Log File :.
 
</concat>
            <exec executable="open">
                    <arg line="-a console '${log.path}'" />
            </exec>
        </target>
	</project>

Update: Lee Brimelov just released a plugin for Eclipse, that provides this functionality (more or less) with a single click of an icon. It’s an alpha version, and you won’t have all the Ant flexibility (well, you could still install Ant), but you can avoid most of the installation hazzle, and that’s pretty cool. Unfortunately I couldn’t get it to work so far.

Update 2: It bugged me that every time I execute this action Flash would pop up. To work around that I slightly modified the FlashCommand script (it actually checks wether the FLA file is already open, and if so won’t call the open command). Also I had to leave away the -c option (save and compact), something I don’t need anyway. So now when you execute the command from Flex the following happens:

1. The little publish dialog pops up (Fla is exported to SWF)
2. The HTML file is opened in the browser (which comes to front), as well as the Console displaying the trace output

Also I have bound the «Launch last external tool» command in Flex Builder to a key combo. Now things run pretty smooth and as much satisfying as compiling via Flash can be. Btw, I also looked into this Eclipse plugin – as it seems the only thing it does is to tell Flash to «Test Movie» with the frontmost open document. That’s absolutely okay for most people, but I’m glad for the extra functionality I get with this solution (at the cost of more initial effort of course). Download here the modified FlashCommand: flashcommand.zip

Related posts:

1. Test Movie from Flex to Flash (easy way)
2. Test Flex/Flash throttled (aka Simulate Download)
3. Flex Project – SVN Strategy

Finally I was forced to rethink this strategy because I wanted to let other people work on a project. As many actionscript projects, this one also heavily relies on external libraries, most of them hosted by Google Code, another one being my own (closed) lib. So should I tell people: «hey, just svn checkout from here and there and then relink the libs in the project properties but don’t check in the updated settings for christ’s sake!»No. Too shaky, really.

Fortunately, SVN provides a fucking cool way to solve this issue: svn:externals. Ha! This is so awesome, you won’t believe it ;-) Okay, here are the steps to follow (on a mac at least):

Create a flex project:

• project
  • html-template
  • src

Add a new directory:

• project
  • html-template
  • src
  • externals

Now put this on your svn, either by svn add or by putting in the repos and checking out again (well.. just as you did). If you’ve already got bin-debug or bin-release directories, just remove them on the repos and svn update (they are created with each publish in flex).

Now let’s say our project resides in ~/Documents/projects/project (path to project). Do the following in Terminal:

cd ~/Documents/projects/project/externals
svn svn propedit svn:externals .

This should open an editor (in my case I’ve defined textmate as my editor by doing:)

export EDITOR='mate -w'

Enter the following (example libraries):

caurinatweener http://tweener.googlecode.com/svn/trunk/as3/
as3corelib http://as3corelib.googlecode.com/svn/

You can also add a specific release:

caurinatweener -r23 http://tweener.googlecode.com/svn/trunk/as3/

(in TextMate save and close, if you use vim you know what to do anyway)

Now comes the magic part:

svn up

This will checkout all defined libraries into externals/xyz!! you do svn commit and now every time somebody checks out your project (or your externals directory) all the libs will be checked out automatically! I think this is just fucking awesome! :-)

Now in Eclipse all paths to your external libraries will be relative to the project (of course you have to add the libs there or change the paths – you should know how to do that ;))

Now all we need to is ignoring bin-release and bin-debug. We don’t want these directories to be in our svn repos:

cd ~/Documents/projects/project
svn svn propedit svn:ignore .

enter a list of directories or files to be ignored. in our case:

bin-debug
bin-release

That’s it! Thanks, svn!

Related posts:

1. Develop in Flex Builder, publish in Flash IDE (Mac OS X)
2. Test Movie from Flex to Flash (easy way)
3. SVN Hook – auto-upload to FTP