I recently wrote about Adobe’s release of Flash Builder 4, ColdFusion Builder and the free Flex 4 SDK. While Flex Builder is a great IDE, as I’m sure are Flash Builder and ColdFusion Builder, most independent developers cannot afford the licenses that can cost hundreds of dollars. What is an aspiring or shoe-string budget Flash developer to do? Fortunately, there is a legal and free method of developing and building Flash applications using the free Flex 4 SDK in combination with the open source Eclipse IDE.
The first things you will need to do is grab the Flex 4 SDK and a version of the Eclipse IDE. Any version of Eclipse should do but I recommend using either Classic or the one for PHP Developers as I’m currently using. Install Eclipse to where ever you would like and extract the Flex 4 SDK files to any easily accessible folder. For the purposes of this tutorial, I extracted mine to the following path on my Windows laptop: C:\AdobeSDK\Flex\4.0
Open up Eclipse and start a new project by clicking File -> New -> Project. The “New Project” wizard should open. Select “Project” from the “General” group in the list and click the Next button.
For the purposes of this tutorial, we will call this project “Test Project.” Type this into the “Project name” field and either leave “Use default location” checked or uncheck it and specify your own workspace location. I will leave this checked. Click the Finish button.
Eclipse should create your project and add it to your Project Explorer window pane. We will mirror the standard folder structure that Flex Builder uses and create three new subfolders to our project called “bin,” “libs” and “src.” Right-click on your project folder, point to “New,” and then click on “New Folder.” Enter “bin” into the “Folder name” field and click the Finish button. Repeat this process twice more, entering the folder names “libs” and “src” each time. When you are finished, you should have three subfolders below your root workspace location.
The bin folder is where we will save the compiled Flash .swf file. The libs folder is where you will drop any .swc file libraries that your project will use. Lastly, the src folder is where all of your project source code will be stored. Before we continue, I recommend adding an editor for the *.as file extension in Eclipse and associating it with the Java editor since ActionScript 3 is very similar in syntax. To do this, click either “Window” from the menu if using Windows or from “Eclipse” if using a Macintosh and then click Preferences. This will bring up the Eclipse Preferences dialog window. Expand the “General” node in the tree and then expand “Editors.” Click on “File Assocations” to see the file associations pane. Once there, click the “Add…” button next to the “File types” list.
Enter “*.as” in the “File type” field click the OK button. The file type should now be added to the “File types” list. Make sure this new item is selected by clicking on it.
Next, click the “Add…” button next to the “Associated editors” list, which should be empty. Make sure the “Internal editors” option is selected and then select “Java Editor” from the list. Click the OK button.
The new associated editor should appear in the “Associated editors” field. Click the OK button to save and exit the Eclipse Preferences window.
Now we are going to create our MXML file that will define our application layout and appearance. It also serves as the “entry point” that the compiler uses when linking everything together. Right-click on the src folder, point to “New,” and then click “File.” The “New File” window should appear. For this tutorial, I will name the file application.mxml but this realistically can be whatever valid filename you want to give it.
The application.mxml file should now be in your src folder and the editor should automatically open. Since this is not a Flex tutorial, I will just provide a valid Flex 4 MXML skeleton that we will use to test the compiler. Enter the following into the application.mxml editor window:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> </s:Application>
Now we are going to create our builder for this project. Right-click on your project folder (in this case, “Test Project”) and then click on “Properties” at the very bottom of the popup menu. This will open the Properties window for your project. Click on “Builders” in the list on the left side if it is not already selected. This is the pane where you define your project builders which is essentially the process of pointing to the compiler and feeding it the proper arguments.
Click the “New…” button to the right to create a new build factory. A window will open that should have “Program” selected in a list. Just click the OK button when you see this window.
This will launch the “Edit Configuration” window. You should already be on the “Main” tab but if you’re not make sure it is selected. At the very top there is a “Name” field where you can give the builder a name. Since this is a process you will have to repeat for each project you create, I recommend giving it the same name as your project so you know which builder goes to which project. In this case, I named mine “Test Project.” Click the “Browse File System…” button below and to the right of the “Location” field. Navigate to the folder where you extracted the Flex 4 SDK files and then to the bin subfolder. Select the mxmlc.exe file if you’re on Windows or just the mxmlc file with no extension if you are on Macintosh from this folder. In my case, the path was C:\AdobeSDK\Flex\4.0\bin\mxmlc.exe. Click the “Browse Workspace…” button below and to the right the “Working Directory” field. If your project folder is not already selected, select it and click the OK button. Next, you need to define the arguments that are fed to the mxmlc compiler. Enter the following into the “Arguments” field.
src/application.mxml -output=bin/application.swf -library-path+=libs/ -target-player=10.0.0
Essentially what I am telling the compiler to do is take the application.mxml file from the src folder, compile it using any available libraries from the libs folder and target the Flash 10 platform (required for Flex 4 projects), and save the compiled SWF as application.swf in the bin folder. There are many other options available to use with the compiler, but these are probably the most useful, in my opinion.
UPDATE: If you are using the Flex 4.5 SDK, Adobe is now requiring Flash 10.2 as the minimum version of Flash player. You will want to change the -target-player=10.0.0 compiler argument to be -target-player=10.2.0
After you’ve entered these options, your screen should look something like the following.
Before you click the OK button, there’s a few other options that might be handy to turn on. Click the “Build Options” tab and then look for and place a checkmark in the “Launch in background” and “During auto builds” options. This will make your project compile every time you save a file. This is useful when you need feedback from the compiler as to whether certain tags or code are valid. If you are compiling a very large SWF, these options are probably not advised.
Click the OK button and your project should now begin to compile. If you did everything right, you should see something like the following in your console output window:
Loading configuration file C:\AdobeSDK\Flex\4.0\frameworks\flex-config.xml C:\Users\Sean\workspace\Test Project\bin\application.swf (37842 bytes)
If you don’t see any errors in red, then everything compiled successfully and you have a fully functioning Flex development environment in Eclipse! Happy coding!