Using ANT to build Flash and Flex applications
==============================================
Introduction
————
As the Flash and hopefully new Flex projects get more complicated the move away from the Flash IDE is becoming more desirable. As the non-IDE projects require MTASC (the open source flash compiler), it has been made apparent that some form of build process is required.
To simplify the build process for Flash and Flex some research has been conducted into the validity of using ANT. ANT is synonymous with building Java projects but it can be used to build any types of projects such as Flash.
This document will outline the steps involved into installing and using ANT to build and possibly deploy Flash projects.
Installing Java and ANT
———————–
ANT requires Java to run. If it is not already installed on your machine it can be downloaded from here:
http://www.java.com/en/download/manual.jsp#win
Now you will require ANT. ANT can be downloaded here:
http://ant.apache.org/
Unzip it. And put it in a sensible location. In my case I have put it here: C:\Program Files\ANT
Once unzipped you will need to add some environment variables. To do this go to start and then right click on my computer and select properties. Select the advanced tab and then click the Environment Variables button at the bottom of the panel.
In the system variables section (lower one) add a new one. Call it ‘ANT_HOME’ and give it a value of ‘C:\Program Files\ANT’ (no quotes for each of these). Obviously change the path if you have extracted ANT to a different location.
Now in the same section find the variable called ‘PATH’ and select edit. Here there will be a list of ‘;’ separated paths. Go to the end and add a new ‘;’ and then add ‘C:\Program Files\ANT\bin’ (again no quotes and change as required).
At this point you will need to restart for the changes to take affect.
To test that the paths have been set up correctly, open the command prompt by going to start, run and then typing ‘cmd’.
In the prompt window type ‘ant’. Depending on your Java installation you may get a warning ‘unable to locate tools.jar’. This is ok. You will also get a message that the build.xml does not exists. This again is expected as we have not created one yet.
If you have any other issues then get googling.
MTASC and the Flash Player
————————–
To compile the .as files the MTASC compiler is required and to play the outputted swf files the flash player is also required.
MTASC can be downloaded here:
http://www.mtasc.org/
Flash Player can be downloaded here:
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash
In most cases the project folder will have a tools directory that will have both the MTASC and FlashPlayer in.
Creating a Project to Compile
—————————–
In this example we are going to create a simple flash movie that draws a triangle on the screen.
Open a text editor. You can use notepad or the like but I tend to use FlashDevelop.
Create a new class:
//=================== CODE ===================
class MyClass {
public function MyClass()
{
trace(”hello”);
_root.createEmptyMovieClip(”triangle_mc”, 1);
_root.triangle_mc.beginFill(0×0000FF, 30);
_root.triangle_mc.lineStyle(5, 0xFF00FF, 100);
_root.triangle_mc.moveTo(200, 200);
_root.triangle_mc.lineTo(300, 300);
_root.triangle_mc.lineTo(100, 300);
_root.triangle_mc.lineTo(200, 200);
_root.triangle_mc.endFill();
}
public static function main():Void {
var mc:MyClass = new MyClass();
}
}
//=================== END CODE ===============
In this case we have a class that in the constructor will draw a triangle on the stage. There is a public static main that just creates an instance of that class.
Thats our ActionScript done now all we have to do is create an ANT build XML file.
Creating a Build File For ANT
—————————–
Open notepad or similar and create a new file called ‘build.xml’
Save this file in the same location as the as file you created in the previous step.
In this file add the following:
<?xml version=”1.0″ ?>
<project default=”compile” basedir=”.”>
<description>simple build file for flash projects</description>
<property name=”targetswf” value=”MyClass.swf”/>
<property name=”mainclass” value=”MyClass.as” />
<property name=”classpath1″ value=”C:\Documents and Settings\backup\[[[REPLACE WITH YOUR USERNAME]]]\Local Settings\Application Data\Adobe\Flash CS3\en\Configuration\Classes\mx”/>
<property name=”mtasc” location=”[[[REPLACE WITH THE LOCATION OF YOUR MTASC.exe]]]” />
<property name=”flashplayer” value=”[[[REPLACE WITH THE LOCATION OF YOUR FlashPlayer.exe]]]” />
<property name=”source” location=”.” />
<property name=”deploy” location=”.” />
<target name=”compile”>
<exec executable=”${mtasc}” failonerror=”true”>
<arg value=”-cp” />
<arg value=”${classpath1}” />
<arg value=”-cp” />
<arg value=”${source}” />
<arg value=”-swf” />
<arg value=”${deploy}/${targetswf}” />
<arg value=”-header” />
<arg value=”800:600:31″ />
<arg value=”-main” />
<arg value=”-v” />
<arg value=”-strict” />
<arg value=”${source}/${mainclass}” />
</exec>
<exec executable=”${flashplayer}” spawn=”true”>
<arg value=”${deploy}/${targetswf}” />
</exec>
</target>
</project>
The root node of the ANT build file is <project />. Most of the file is self explanatory. Some notable points are the failonerror=”true” means that the build script will not continue if the build fails and spawn=”true” in the second executable means that ANT can stop and close and doesn’t have to wait.
The arguments for MTASC can be found here:
http://www.mtasc.org/#usage
Running The Build
—————–
Open the command prompt and navigate to the folder containing the as file and the build.xml In this directory type ‘ant’ and then return to run this command.
ANT should then compile the as file and produce a swf. You should automatically see the swf playing in a Flash Player window. If not review the messages in the command window and resolve.
Building Flex Applications
==========================
Introduction
————
Pre-requisites - you already have ANT installed and working. If not please review the above first.
To build Flex applications there are a few other requirements. To start with the Flex SDK is required. You can download the Flex 2 SDK from here:
http://www.adobe.com/products/flex/downloads/
Install the Flex SDK.
Flex 3 is available at this point but we are using Flex 2 for now.
The Flex Ant Tasks are also required. These can be downloaded from here:
http://labs.adobe.com/wiki/index.php/Flex_Ant_Tasks
Installing Flex Ant Tasks
————————-
Once downloaded extract the Flex Ant Tasks to an appropriate place. Copy the ‘flexTasks.jar’ to your ANT lib directory. If you have followed the steps above this will be: ‘C:\Program Files\ANT\lib\’.
Creating a flex Application
—————————
Now you are ready to start but we will need something to compile. We are going to create a simple Flex app.
Open your favorite text editor and create a new file. Add the following:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:Panel x=”140″ y=”100″ width=”250″ height=”200″ layout=”absolute” title=”Company Leaders”>
</mx:Panel>
</mx:Application>
… and save as myApp/Main.mxml in a suitable directory.
This is a really simple Flex app but you get the idea.
Creating the ANT Build Script
—————————–
The ANT build script is similar to the previous build script as in it has a root element and runs the Flash Player but that is about it.
Firstly we have to add the Flex build tasks.
Open your favorite text editor and create a new xml file. Add the following:
<?xml version=”1.0″ encoding=”utf-8″?>
<project name=”My App Builder” basedir=”../tools”>
<taskdef resource=”flexTasks.tasks” classpath=”${basedir}/flexTasks/lib/flexTasks.jar” />
<property name=”FLEX_HOME” value=”C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2″/>
<property name=”APP_ROOT” value=”C:\Documents and Settings\jhinton\My Documents\FlexTest\classes\myApp”/>
<property name=”flashplayer” value=”C:\Documents and Settings\jhinton\My Documents\FlexTest\tools\FlashPlayer.exe” />
<target name=”main”>
<mxmlc file=”${APP_ROOT}/Main.mxml” keep-generated-actionscript=”true”>
<load-config filename=”${FLEX_HOME}/frameworks/flex-config.xml”/>
<source-path path-element=”${FLEX_HOME}/frameworks”/>
</mxmlc>
<exec executable=”${flashplayer}” spawn=”true”>
<arg value=”${APP_ROOT}\Main.swf” />
</exec>
</target>
</project>
… save the file as build.xml in the directory above the myApp directory we created that holds the Main.mxml.
Open the command prompt and browse to the directory with the build.xml file for this project and run ‘ant main’. If main is left out the project will compile but there will be no output.
One interesting point is the attribute on the mxmlc node called ‘keep-generated-actionscript’. If this property is true a directory called ‘generated’ will be produced and will contain all of the action script classes created in the build.
If the build succeeds you should see a flash window open with a very simple Flex application in. If you browse to the myApp directory you will see a new swf file called Main.swf.
Conclusion
———-
It is possible to use notepad and open source compilers to create Flash and Flex files. ANT is not essential to this process but does help in the build process.
In these examples ANT has not been used to anywhere nears it’s full potential. A list of tasks that ANT can perform can be found here:
http://antdoclet.neuroning.com/html/index.all.html
To conclude - ANT will be useful.