Flash Tutorial with Eclipse 3.4 and Flex SDK 4 Part 1

I am going to begin another tutorial that deals with Flash. However, since I am a big advocate of open source, I am going to use a combination of flex_sdk, ActionScript, and Eclipse 3.4 Ganymede. LuminicBox is also suppose to work for logging, but currently I haven't got that to work yet with Eclipse 3.4. I am also using Windows Vista for this tutorial.

First, you need to download the needed software:

1) Download Flex 4-Beta 1.

2)Unzip the Flex 4 and place it in a good location.  Select the right mouse button on your MyComputer icon, and open the advanced system and environmental variables section. Add this to your Class Path or Path variable: C:\flex_4\bin. This path should point to the location where your bin directory is in of the flex sdk files you just unzipped.

3) You should create a new variable called FLEX_HOME and put this as the value C:\flex_4. That path should also be to the location to your flex sdk directory.

4) After you set these variables, press okay. If you want to compile from the command prompt, you can use this command. mxmlc Flex4App.mxml where Flex4App.mxml is the file you are compiling. After your swf file is created, you can view it by typing: Flash Player Flex4App.swf in your command prompt. You can also right click the file and open it with a browser. The browser might have a warning before allowing you to view the file, but if you press okay and you have flash installed in your browser, you should also see the output.

5)You also need to have eclipse 3.4 Ganymede installed. You can see my prior posts on installing eclipse.

6) After you have opened up eclipse, you should go to help->software updates and select the available software tab. Select Add Site and input this url: http://aseclipseplugin.sourceforge.net/updates/. Select the needed files and press install.

7) You should also download Luminicbox for logging.

8)To develop in the Action Script environment using Eclipse, you should open the Window Action Script window by selecting window->open perspective-> other in eclipse. Then select the ActionScript2 perspective and hit okay.

9) You should now create an ActionScript Project and you can do this by selecting File->new ActionScript Project. Call the project Action2Project and Click Next. To use the flex 4 sdk, you can select Add Linked Folder. You can browse to the lib directory of your flex_4 and add it as a linked folder. Click Finish when you are done.

10) Now you need to create your build.xml file.  Select on the Action2Project with the right mouse button and select New->Other.  Under the general folder, select file and then select next. Give the file the name of build.xml and click finish.

11) You need to tell this project to use the build file we just created. You can do this by right clicking on the Action2Project Name and select properties. Select the Builders section on the left and click new. From here, select Ant Build and then hit okay. In this window, give it a name like Action2Project builder. Now for the build file field in the main tab, simply browse the workspace and select the Action2Project. You'll see the build file that you just created show up in the right pane. Select that file and hit okay. The base directory needs to be setup similarly. Browse the workspace, select the Action2Project, and hit okay. Press Okay 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.

12) Now we need to create a class. Right click on the src directory and select File -> New ActionScript Class. Give it a name of TestActionScript and click finish. For ActionScript files, you have to wrap the code with package{ }. So your code should look like this:

package {
public class TestActionScript{

}
}

If you see a red line under package, you can ignore this. Apparently the plugin doesn't recognize this yet.

13) Create another file called test.mxml in the src file. I am going to show you how you can use your build.xml file to compile both of these type of files to convert them to swf files.

14) Paste the following code in your test.mxml file:

test.mxml

<?xml version="1.0" encoding="utf-8"?>
<fx:Application
xmlns="http://ns.adobe.com/mxml/2009"
xmlns:fx="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">

<mx:VBox>
<fx:Button label="Gumbo Button"/>
<mx:Button label="Halo Button" />

<fx:ButtonBar id="orangeToggleBar" requiresSelection="true">
<fx:dataProvider>
<fx:ArrayCollection source="[Flash, Director, Catalyst,
ColdFusion]" />
</fx:dataProvider>
</fx:ButtonBar>
</mx:VBox>
</fx:Application>

15)Paste the following code in your TestActionScript.as class:

TestActionScript.as

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

public class TestActionScript extends Sprite{

public var log:Logger;

public function TestActionScript(){

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

16) Paste the following code in your build.xml file:

build.xml

<project name="Action2Project" default="Compile Swf" basedir=".">
<property environment="env" />
<property name="mxmlc" location="${env.FLEX_HOME}\bin\mxmlc.exe"/>

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

<target name="Compile MXML">
<exec executable="${mxmlc}" dir="." failonerror="true">
<arg line="src/test.mxml"/>
<arg line="-source-path C:\LuminicBox\LB.Log"/>
<arg line="-default-size 400 300"/>
<arg line="-output bin/test.swf"/>
</exec>
</target>

</project>

In your build.xml file, you have to make sure your source-path points to your LuminicBox directory.

17) To make ant aware of your build.xml file, 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 to the tab down to the Ant window. You'll see the items we specified show up in a nice tree view in that viewer.

18)Click on the build.xml file in the ant view and your code should compile.

19)In eclipse you can view your .swf file by opening the bin folder. You might have to refresh the directory first. You can refresh it by selecting the right mouse button and selecting refresh. You should see two swf files. Select them and you should see their output.

You are suppose to see your your logs in the LuminicBox, but that isn't working yet.

Go To Part 2