Flex 3 SDK and Eclipse working together

UPDATE: For those interested in setting up Flex 3 SDK and Eclipse without ant, I have posted a new article outlining this process. Honestly I prefer the new way without ant, but because you can do either one choice is king. Here is the new article.

For the last year I have been enjoying my ActionScript development in Eclipse using mtasc to do syntax checking and compiling. I have been using ASDT beta release to facilitate code hints and syntax highlighting. It has been nice to have all of my code tools in one tool (Eclipse). I also noticed quite a speed increase in compiling when using mtasc as opposed to the one in CS3.

Since the advent of Flash CS3 I have been doing AS3 coding and it has been only a sub-par experience. Not because the language isn't great but because the editor in CS3 isn't the greatest and has a way to go with offering the customizeability of an Enterprise editor.

So yesterday I set out to see about setting up Eclipse to use the Flex 3 SDK for my AS3 coding needs. I am still using the ASDT plugin for syntax highlighting. I now have a great environment set up using Flex 3 SDK for compiling and syntax checking/debugging and ASDT for syntax highlighting while using the LuminicBox AS3 stuff for live output logs and traces (thanks to Bachir for the updated link). It's been working so well I thought that others might benefit from this set up. Incidentally I did install the full Flex 3 plug-in for Eclipse first but it wouldn't load any .as files because of a conflict with ASDT I'm sure.. so I uninstalled it and carried on my way with the Flex 3 SDK. So on with the process.

Note: Even though this is using examples from a windows configuration it should work equally as well on Linux or OSX.

Download the Flex 3 SDK from labs.adobe.com and extract it's content to a place on your computer.. we'll say it's in C:\Program Files\Flex_Builder_3_SDK. Download the LuminicBox tool and place it somewhere on your machine.. we'll say it's in C:\Program Files\LuminicBox. Both downloads should only take a few moments using a standard broadband connection. In Eclipse you'll also want to install the ASDT plugin. You can do this using this url in the features install in Eclipse: http://aseclipseplugin.sourceforge.net/updates/

Next we'll set up a test project so you can see how to built an Ant build file to use with future projects.

You'll want to make sure you've switched to the ActionScript view in Eclipse by clicking on Window > Open Perspective > Other. Then select the ActionScript2 perspective and hit OK.

Next in Eclipse click on File > New ActionScript Project. Then give it a project name. We'll call ours "foo". You can leave the default selected for all other options.

Click Next.

This screen allows you to enter other paths to linked folders, meaning you could add links to folders containing code for you classes to access... it would be great if this worked with Flex 3 SDK but for some reason the pathing gets messed up.. so we'll forge on and I'll show you how this is fixed later.

Click Finish.

If you have your navigator panel showing you should see in the left a folder called "foo". If you open it up you'll see a number of folders. The bin folder is used for your output or your swf files. The src directory is where you'll keep your source files. There is one linked folder called std8 and is only used if you are working on AS2 projects. You can safely remove that dir for AS3 projects. Remember.. I'm just going over AS3 stuff.

Once you have that done we need a way to have our new project know how to compile our flash classes. We need to build and Ant build file. This may sound daunting to a new comer.. but trust me it's not.

Right click on the "foo" folder and select New > Other. Then under the General folder select File then Next. Give the file a name of build.xml. Then click Finish.

The file will then open in your editor waiting for content. I'll save you a ton of time by just talking you through it.

An Ant build file is just a simple xml file. Let's take it section by section.

First line:

<project name="Test Flash Build" default="Compile Swf" basedir=".">

This will start your xml declaration as well as give Ant some information about your project like the name, default action when the script is run, and the basedir to reference.

Next line:

<property name="mxmlc" location="C:\Program Files\Flex_Builder_3_SDK\bin\mxmlc.exe"/>

This sets up a variable for our compiler. We need to tell the script where we want our commands directed to.

Next section is a larger one:

<target name="Compile Swf">
<exec executable="${mxmlc}" dir="." failonerror="true">
<arg line="src/bar.as"/>
<arg line="-source-path C:\Program Files\LuminicBox"/>
<arg line="-default-size 400 300"/>
<arg line="-output bin/bar.swf"/>
</exec>
</target>

This set's up a target to execute. We gave it a name for the default value from the first line to reference. We define our exe to run as well as some arguments to pass it when run. As you can see we give it the path to our first .as class that we'll write shortly as well as the path to our logging classes.

We have to expose the location of where we have custom classes so the compiler knows where to go to find them. This is the solution to our problem with folder linking. So any other custom class you want to use needs to be added to this build file.

There is another way to add class paths for the compiler that will apply to all projects compiled with Flex Builder 3 SDK. You can manually edit the file:
C:\Program Files\Flex_Builder_3_SDK\frameworks\flex-config.xml
There is a section in there with this commented out:

<source-path>
<path-element>string</path-element>
</source-path>

You can simply add your location to the path-element node and then the compiler will look here when it compiles anything. So depending on how you want to configure your environment... it's all up to you. Onward!

Finally we need to close up our build file by putting in:

</project>

So the whole file looks like:

<project name="Test Flash Build" default="Compile Swf" basedir=".">
<property name="mxmlc" location="C:\Program Files\Flex_Builder_3_SDK\bin\mxmlc.exe"/>
<target name="Compile Swf">
<exec executable="${mxmlc}" dir="." failonerror="true">
<arg line="src/bar.as"/>
<arg line="-source-path C:\Program Files\LuminicBox"/>
<arg line="-default-size 400 300"/>
<arg line="-output bin/bar.swf"/>
</exec>
</target>
</project>

Save and close the file.

Now we need to tell this project to use the build file we just created. Right click on the "foo" folder and select properties. Then select the Builders section on the left and click New.

From here select Ant Build and then hit OK.

In this window give it a name like foo builder. Now for the buildfile field in the main tab simply browse the workspace and select the foo project. You'll see the build file we just created show up in the right pane. Select that file and hit OK. The base directory needs to be setup similarly. Browse the workspace, select the foo project, and hit OK. That's all you need to do. Push OK to finalize your changes. You'll now see that you have two builders specified. You can deselect the AS2 Builder and it will warn you that it could have bad side-effects but it won't so just hit OK. Then close the builders window by clicking OK. Eclipse may try to build the file but it will fail. The console output in the bottom will be your friend when reporting problems with compiling.

Now we have everything set up.. we just need to compile a class now.

Right click on the src directory and select File > New ActionScript Class. Give it a name of bar and click Finish. You may see some process running about building AS2 cache.. this can be ignored. When the file loads you'll see a simple empty class. We need to wrap a package declaration around this because it's AS3. So it now looks like:

package {
public class bar {

}
}

ASDT may try to warn you of problems with the package declaration but you can ignore this. Hopefully ASDT will become more AS3 friendly soon.

Save the file.

We need to make Ant aware of out build file now. Click on Window > Show View > Other. Then expand the Ant folder and select Ant in it. Then click OK. In the bottom select the Ant tab and then drag the build.xml file from the left window in our foo folder down to the Ant window. You'll see the items we specified show up in a nice tree view in that viewer. Then in the Ant window we will run this build to test what we've done. We do this by either double clicking on the file in the Ant window or by clicking on the Run button in the Ant tab. This looks like a green circle with a triangle on it. When you do that you'll see some output in the console window like this:


Buildfile: workspacelocation\foo\build.xml
Compile Swf:
[exec] Loading configuration file C:\Program Files\Flex_Builder_3_SDK\frameworks\flex-config.xml
[exec] This beta will expire on Wed Oct 31 00:00:00 MDT 2007.
[exec] bin/bar.swf (467 bytes)
BUILD SUCCESSFUL
Total time: 2 seconds

From here on out you can run your Ant build form the Ant tab or by clicking on the button that looks like a green circle with an triangle on it with a little red item just down and to the right of it... when you roll over it the tool tip says "Run foo build.xml".

Once we have run our Ant build we will have a swf file called bar.swf in our bin directory. You may need to right click on your foo project and refresh it to make sure it detected it. Of course running the swf doesn't do anything right now seeing as it's empty. But we have used the compiler to compile a pure AS3 class! Congratulations!

Now if we want to add some more to the class so we can see it actually works do something like this in your bar.as file:

package {
import com.luminicbox.log.*;
import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.Shape;

public class bar extends Sprite{

public var log:Logger;

public function bar(){

log = new Logger("Tester");
log.addPublisher( new ConsolePublisher() );

var child:Shape = new Shape();
child.graphics.beginFill(0xccffff);
child.graphics.drawRoundRect(0, 0, 100, 100,20);
child.graphics.endFill();
this.addChild(child);

log.log( "Hello world log" );
log.debug( "Hello debug" );
log.info( "Hello info" );
log.warn( "Hello warn" );
log.error( "Hello error" );
log.fatal( "Hello fatal" );

log.log(["test","test2"]);
}
}
}

Compiling it should succeed with no problems and the file should be a whole 3095 bytes or something. When you run it you'll see a light greenish rounded corners box. To view the log outputs simply launch the log viewer found in the LuminicBox dir. It's called FlashInspector.swf. With that open launch the bar.swf and you'll see your logs flowing in.

Of course if there are problems with your script you'll see errors in the console helping you to debug your application.

I hope this was helpful and if anyone has any other ideas of how to improve this let me know.

Happy flashing!

Hint to slow people like me

I had troubles w/ errors when I was compiling after making the Ant build.xml and after I made the bar class.

    I narrowed it to a couple problems:

  • The latest LuminicBox (at least the one I got) is named "LB.Log". So, of course, I had to update my build.xml w/ that name.
  • Apparently LB.Log and Flex 3 SDK have to be in the same directory? I had the SDK in my C:/ and the LB.Log in my Program Files and it seemed to create errors.

For free, this is an awesome solution to compiling actionscript 3.0 applications. But it would be nice to set up an output panel inside eclipse that reads trace functions. It would also be nice to automatically launch the .swf after compiling. Are these issues the same for all opensource solutions? Or are there comprehensive set ups like that somewhere?

Thanks so much Jake.

Tracing items

I no longer use LuminicBox regularly.. I have opted to use a log parser to view output.. you can check out how to implement here:
http://blog.flexexamples.com/2007/08/26/debugging-flex-applications-with...

Works great with my log viewer, console, on my mac.

Auto Launch

To have the swf autorun after you have compiled it you would just add another exec block to the ant script. As long as your system knows how to run a swf you're good to go.

So something like this should work:

<project name="Test Flash Build" default="Compile Swf" basedir=".">
<property name="mxmlc" location="C:\Program Files\Flex_Builder_3_SDK\bin\mxmlc.exe"/>
<target name="Compile Swf">
<exec executable="${mxmlc}" dir="." failonerror="true">
<arg line="src/bar.as"/>
<arg line="-source-path C:\Program Files\LuminicBox"/>
<arg line="-default-size 400 300"/>
<arg line="-output bin/bar.swf"/>
</exec>
<exec executable="bar.swf" dir="bin" />
</target>
</project>

For free, this is an awesome

For free, this is an awesome solution to compiling actionscript 3.0 applications. But it would be nice to set up an output panel inside eclipse that reads trace functions. It would also be nice to automatically launch the .swf after compiling.
Jeux de voiture