The Community to Share and Evolve.

I have been working with Flex 2 which is a great tool for developing Flex applications. However, Flex 3 is already there and I want to explore. Not willing to buy Flex 3 as Flex 2 is sufficient for my current needs, I decided to try Flex 3 SDK. Thanks to Darron Schall's excellent post for Flex 1 posted in 2005.

We will setup Eclipse for Flex development in two parts. Part 1 sets up Eclipse for Action Script 3 development. Part 2 will setup Eclipse for MXML development.

Part 1

In my fresh Eclipse installation I needed below software in addition. You may also need to download below software.

1. Download Flex 3 SDK from http://www.adobe.com/go/flex3_sdk and unzip it in your machine. We will assume that you have unzipped it at C:\flex_sdk_3.

2. LuminicBox, logging tool, a nice Flash debugging tool available at http://www.digitalflipbook.com/downloads/flash/LB.Log.zip. We will assume you have unzipped it at C:\LB.Log.

3. ASDT plugin for syntax highlighting. You can install directly in Eclipse using Software Updates Manager. Go to Help > Software Updates > Find And Install > Search for new features to install > Next > New Remote Site. Give it some name. Write the URL http://aseclipseplugin.sourceforge.net/updates/.

Open the Action Script perspective. To open the Action Script perspective go to Window > Open Perspective > Other > ActionScript2 > OK.

With above things in place by now you should be able to create ActionScript project. Go to File > New > Other > ActionScript > New Action Script Project > Next. Enter 'My Project' project name. Click Next and then hit Finish.

Look inside 'My Project'. bin folder is used for keeping the published files, src for keeping the source files. Folder std8 may be deleted as we will be working on AS3 (Flash Player 9).

We just created a new Action Script project. We are still not able to publish it as the compiler is still not not connected. We haven't done anything to configure the Flex SDK so far. Let us do that now.

We will use Ant to build our project. To use it we will create some Ant related stuff. Right click 'My Project'. Then, New > Other > General > File. Give the name build.xml to this file. build.xml is just an XML file with paths to compilers etc to know Ant where all this stuff is located.

Open build.xml. Add below code to it. If you placed your stuff at the locations suggested above this should work. Else, modify build.xml accordingly.

<project name="My Project" default="main" basedir=".">
      <property name="mxmlc" location="C:\flex_sdk_3\bin\mxmlc.exe"/>
      <target name="main">
            <exec executable="${mxmlc}" dir="." failonerror="true">
                  <arg line="src/HelloWorld.as"/>
                  <arg line="-source-path C:\LB.Log"/>
                  <arg line="-default-size 300 200"/>
                  <arg line="-output bin/HelloWorld.swf"/>
            </exec>
      </target>
</project>

Now the project needs to know that build.xml is available to use Ant. Right click 'My Project' folder. Go to Properties > Builders > New > Ant Builder > OK. Give it a new name like 'My Project Builder'.

In the Main tab for the build file browse the workspace. Select the project folder you created. In the right pane you should be able to see the build.xml file we created above. Select the build.xml and click OK.

Now, in the same Main tab we need to specify the 'Base Directory' of the project. Click 'Browse Workspace' under 'Base Directory. Select the project folder and click OK.

You will see two Builders selected. We need only one. Yes, we do  not need AS2 Builder as we are planning compile AS3 code. Deselect the AS2 Builder. Click OK. Click OK.

Things seem to be ready now. Let us create some Action Script file and try to compile. We will create a Hello World example. Right click src folder. Select New > Other > ActionScript > New ActionScript Class. Call it HelloWorld in the Class Name text field. Leave other fields blank. Click OK. You will something like below.

class HelloWorld {
}

Add the package declaration to it as we are writing AS3 code.

package {
      class HelloWorld {
      }
}

Write below code in HelloWorld.as.
package
{
      import flash.display.Sprite;
      import flash.text.TextField;
      /**
       * @author Gaurav Goel
       */
      public class HelloWorld extends Sprite
      {   
            public function HelloWorld()
            {
                  var textField:TextField = new TextField(); 
                  textField.text = "Hello World!";   
                  this.addChild(textField);
            }   
      }
}

Everything seems to be ready now. We will now compile it.

Go to Window > Show View > Ant. There are more than one ways to compile the project. Try anyone of the following.

1. In the Outline pane right click 'My Project'. Go to Run As > Ant Build.

2. In the menu items above click 'Run My Project build.xml'.

If everything goes right you should find the HelloWorld.swf in the bin folder at bin\HelloWorld.swf.

Buildfile: workspace\My Project\build.xml
main:
     [exec] Loading configuration file C:\flex_sdk_3\frameworks\flex-config.xml
     [exec] bin/HelloWorld.swf (621 bytes)
BUILD SUCCESSFUL
Total time: 2 seconds