Flex 3 SDK and Eclipse without ANT

Some time after I wrote the origional article about Flex 3 SDK and Eclipse working together I came across a build process that I prefer to the one I wrote about with using ant for compiling. I will quickly run through how I build a project using this new method. I will be borrowing code from my last article seeing as it is closely the same with a few differences for building the project.

Because java syntax is fairly close to AS3 syntax I use the java editor to edit my AS files and it seems to work out just fine. The coloring is mostly there. I don't use ASDT anymore. While it was nice for AS2 projects, having it installed sometimes gives me wierd errors when trying to use it to edit AS3 stuff.

So the first step is to 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.

Flex Download: http://www.adobe.com/products/flex/flexdownloads/
LuminicBox for AS3: http://yourpalmark.com/2007/02/23/as3-luminicbox-update/

Next we'll create a simple project to build from.

In Eclipse click on File > New Project. Select "Project" from the "General" folder. Then give it a project name. We'll call ours "Foo". You can leave the default selected for all other options and click finish.

If you have your navigator panel showing you should see in the left a folder called "foo". By default it is empty. Let's create a number of folders to contain our files.

Right click on "foo" and create a few folders. Create one called "src". This will contain all of our actionscript code. Then create another folder called "bin". This will contain our compiled swf file.

*Note:In this example I will not be going over proper code organization by path. There are many references to that and so I am just going over compiling using the Flex SDK with Eclipse.

Now that our folder structure is set up let's create our first AS class and compile it.

Let's create our main class and call it Foo.as . This will match our project name so as to not confuse things. Right click on the src folder and create a new file. When is asks for the name make sure you put "Foo.as".

Once created let's write our skeleton class code:

package
{
import flash.display.Sprite;

public class Foo extends Sprite
{

}
}

Alright..now that we have our class we can compile!

Right click on the "Foo" folder and select "Properties". In the popup you'll see a list in the column on the left. From that list select "Builders". In the right column click "New" to create a new builder. It is going to ask what kind of builder you want to use. Select "Program" and click "Ok".

A new configuration window will appear. This window is essentially going to take most of the paramaters the ant build took but in form field. Let's walk through it.

First, name your build. Let's call this one "Foo Test".

Second, under the main tab there is a field called "Location". This refers to the location of the program that will build the project. Click "Browse file system" and then navigate to the location of your mxmlc file for your platform. In our example we stored our SDK here: C:\Program Files\Flex_Builder_3_SDK and so the path to our mxmlc would be: C:\Program Files\Flex_Builder_3_SDK\bin\mxmlc.exe , but for other platforms like mac and linux you would point to the mxmlc file without the ".exe".

Third, the working directory needs to reference your current project. This is where the compiler will look for reference when looking up paths for files. You'll want to click "Browse Workspace" and select the "Foo" project and click ok. You'll see something like this in the input field: ${workspace_loc:/Foo} .

Fourth, the arguments field is where you'll specify what file needs to be built and specific arguments about your file. These paramaters we specify here are what would be used if you called the mxmlc file from command line. You can run the mxmlc file like so to see all the options for compiling:

mxmlc -help list

This is what we'll use for our first project:

src/Foo.as
-output bin/Foo.swf

So you can see we specify our source path as well as our input and out files. We have a few more items to configure in this builder and then we're done!

Fifth, click on the "Build Options" tab. Select "Launch in background" and "During auto builds".

That's it.. so save the builder you just configured by clicking "Ok". You will be brought back to the properties window but just close that by clickin "Ok".

Once you do that the compiler will fire off and in your console output you should see something like this:

Loading configuration file C:\Program Files\Flex_Builder_3_SDK\frameworks\flex-config.xml
bin/Foo.swf (556 bytes)

If you look in your bin directory you will see the Foo.swf file. You may have to refresh your project to get it to appear.

Lastly we'll get logging working via the LuminicBox class.

We'll want to create another project in Eclipse for the logging stuff.

First, create a new generic project like we did above and call it as3_libs. Then copy into that project the "com" folder from the luminicBox file that you downloaded.

You'll need to modify the builder you created for the "Foo" project. Do this by right clicking on the "Foo" folder and selecting "Properties". Select "Builders" from the left column and then in the right column select your "Foo Test" builder and click "Edit".

We will change the values in the "Arguments" window to look like this:

src/Foo.as
-source-path ../as3_libs
-default-size 508 308
-output bin/Foo.swf

Next we will add to our Foo.as file so it looks like this in total:


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

public class Foo extends Sprite
{
public var log:Logger;

public function Foo()
{
log = new Logger("Tester");
log.addPublisher( new ConsolePublisher() );

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"]);
}
}
}

So now when you run the FlashInspector.swf on your machine.. and then run this file you should see output in your flash inspector related to the code above.

I find using a builder keeps the complexity down as opposed to using ant.

Good luck with development and I hope this has been some help!

UPDATE*
To compile swc's into your app you'd simply have to define a compiler argument for -library-path . This would point to either your swc directly or to your folder that has your swc files in it.

So maybe something like this:

src/Foo.as
-source-path ../as3_libs
-library-path ../libs/mycompiled.swc
-default-size 508 308
-output bin/Foo.swf

Compiling with swc's

I just updated the doc at the bottom to include how you'd go about compiling using swc's. If anyone has suggestions on how to further improve this please let me know.

Getting builder to work

How do I get it to build correctly with a libs folder that has an swc in it?

Yup

Yup I prefer this one to, it is wayyyy easier, and I am so glad that I was able to find this one. I like Eclipse, how does everyone else feel about it.

Wow

Wow, this was difficult, but I could just imagine if I had not found your help. Thank-you for this. You are a life saver, and a time saver too.
Product Reviews

...

Thanks for your post and that too on such an important topic. I was in search of some detailed tutorial and your post worked pretty well for me.Best thing is that it's very compressive as well as quite easy for the beginners.

growthflex

hi i read the details about the Flex 3 SDK and Eclipse thank you for this great information. i gain a lot from this site...