Building Flash Projects with Ant and Flex Builder – Part 1
As more Flash developers migrate towards using tools like Flex Builder and FDT for code editing, some of us have found that switching between the Flash IDE and Flex Builder doesn’t necessarily present the most seamless workflow. Compiling with the Flash IDE is slow and cumbersome; building an entire Flash project with code in Flex Builder doesn’t integrate nicely the designer’s workflow either. Until Flash Catalyst becomes available and magically cures all our designer-developer workflow headaches, what we need is a way to leverage each tool for what it does best, ie. the Flash IDE for drawing and layout, and Flex Builder for code.
Apache Ant is a software tool for automating software build processes implemented using the Java language. Ant uses XML to describe the build process and its dependencies, so no knowledge of Java is necessary for running Ant in your Flex Builder environment. By default the XML file is named build.xml.
In this series of tutorials, I will show you how to use Ant to create a workflow between the Flash IDE and Flex Builder. In Part 1 of this tutorial, we shall use Ant and JSFL to launch a FLA to publish a SWF.
JSFL is a Javascript-based scripting language for scripting the Flash IDE, allowing you to do things such as publish a SWF, etc. just by launching a script from the command line. Documentation for JSFL can be found here: http://livedocs.adobe.com/flash/9.0/main/flash_cs3_extending.pdf.
Combined with Ant, they provide a powerful toolset for the aspiring Flash/Actionscript developer.
1. Setting up your workspace
The standalone Flex Builder install is built on top of a stripped down version of Eclipse and does not come with built-in support for Ant. To get Ant support in the Flex Builder, follow the instructions in these tutorials:
http://www.peterelst.com/blog/2006/09/03/flex-builder-2-ant-support/
http://blog.jodybrewster.net/2008/04/09/installing-ant-in-flex-builder-3/
If you’re using FDT or the Flex Builder plug-in for Eclipse, the standard Eclipse install comes with built-in support for Ant, so you’re good to go.
2. Download tutorial files
This tutorial assumes a working knowledge of Flex Builder. You should already know how to create an Actionscript project in Flex Builder. The directory structure is set up like a typical project in Flex Builder, with bin-debug as the output folder, src containing the Actionscript files and fla containing the FLAs.
3. Examine demo1.fla
demo1.fla is a simple FLA which points to Demo1.as as its document class. It is set up to publish a SWF named demo1.swf to the bin-debug folder.
The Demo1 class creates a textField containing “Welcome to my Ant Demo!” and adds it to the stage.
4. Examine compileSWF.jsfl
The JSFL script for launching demo1.fla and publishing demo1.swf resides in the jsfl folder. It starts off by clearing the ASO cache and Flash IDE’s Output Panel. Then it saves the FLA and publishes the SWF.
function clearASOCache( path ) {
if (!FLfile.exists( path )) {
fl.trace( path + "does not exist" );
return;
}
FLfile.remove( path );
}
clearASOCache ( fl.configURI + "Classes/aso" );
fl.outputPanel.clear();
fl.getDocumentDOM().save();
fl.getDocumentDOM().publish();
5. Examine build.xml
This Ant build file contains a couple of references to demo1.fla and compileSWF.jsfl named demoFLA and compileSWF_jsfl respectively. These properties provide shortcuts to commonly referenced resources in your project and allows you define them in a single convenient location.
The target named compileMain is the Ant task that calls the compileSWF_jsfl script, passing it the property demoFLA. The JSFL script then takes over by launching the FLA and compiling the SWF.
<project name="Flex Ant Tasks Demo1" default="compileMain" basedir=".">>
<property name="demoFLA" value="fla/demo1.fla" />
<property name="compileSWF_jsfl" value="jsfl/compileSWF.jsfl" />
<!-- This task launches the compileSWF.jsfl script to compile demo1.swf using the Flash IDE -->
<target name="compileMain" description="Compile the demo1 SWF with the Flash IDE">
<echo>Flash IDE Compiler for file ${mainFLA}</echo>
<echo message="|*|*|*| class cache clear | source save | compiler start |*|*|*|"/>
<exec executable="open">
<arg line="${compileSWF_jsfl} ${demoFLA}"/>
</exec>
</target>
</project>
6. Using the Outline Panel
Launch the Outline Panel by selecting Window->Other Views->General->Outline from the top menu. In the Outline Panel, you’ll be able to browse the list of properties and targets defined in your build file. Clicking an item in the list will cause the the editor jump to the line where that particular item is defined, making it quick and easy to navigate and edit an Ant build file (fig. 1).
7. Using the Ant Panel
Next, we launch the Ant Panel by selecting Window->Other Views->Ant->Ant in the top menu. To see the list of Ant tasks available within build.xml, just drag the file into the Ant Panel (fig. 2). Now, whenever you need to execute an Ant task, just double-click the task or right-click on it and select Run As->Ant Build.
That’s it. As you can see, it’s quite easy to get started with Ant. Even better, Ant is a tool that grows with your project, becoming more powerful and complex as your project demands it.
Before we proceed to the next part of this tutorial, I would like to thank the kind folks at the New York City Flash User Group, FlashCodersNY, for sharing their knowledge on Ant. This tutorial would not be possible without their generosity.
Coming up
In Part 2 of this tutorial, we shall use Flex Ant Tasks to compile a SWF with the MXMLC compiler.
February 1st, 2009 at 10:35 pm
Thanks for this – especially helpful with the ASO clearing as I was doing this in Ant.
Here is another approach with flashcommand that has some “Launch in Browser” features that are nice to have.
http://blog.betabong.com/2008/11/29/flex-builder-t-flash-ide/
February 2nd, 2009 at 5:30 pm
This looks like Mac:
Will this work on PC?
February 2nd, 2009 at 8:32 pm
Trying that again without the angle brackets:
This Ant code looks like it will work on Mac but not on PC:
exec executable=”open”
February 13th, 2009 at 9:36 am
[...] More info on installation and using : http://hubflanger.com/building-flash-projects-with-ant-and-flex-builder-part-1/ [...]
February 16th, 2009 at 1:32 pm
@Robert- Yes, the exec executable=”open” statement is specific to the Mac. I would suggest trying the code below on a PC. Since I don’t have a dev environment set up for PC, I would appreciate if anyone can let me know if it works.
<exec executable=”${compileSWF_jsfl}” os=”Windows 2000,Windows NT,WindowsXP” >
<arg line=”${demoFLA}” />
</exec>
February 17th, 2009 at 11:45 pm
@Peng
worked fine on PC
Thanks
February 18th, 2009 at 12:03 am
Hi,
its did not work on PC, got confused with already existing demo1.swf
ant task executes without any error but demo1.swf is not crated in bin-debug folder
if i run the jsfl command through Flash Run command it published demo1.swf
i am using Flash CS3
March 8th, 2009 at 7:30 am
[...] Building Flash Projects with Ant and Flex Builder – Part 1 | hubflanger.com | adventures in code (tags: flash flex as3 tutorial ant workflow jsfl) [...]
April 8th, 2009 at 5:47 pm
@Niresh This Ant task does not compile the SWF into the bin-debug folder. It tells the JSFL script to launch the FLA and compile the SWF. Where your SWF is published to is determined by the Publish Settings for the FLA.
April 23rd, 2009 at 9:57 am
@Niresh @Peng
I think the jsfl is not getting run when using this (on windows) – i stripped the xml elements so they don’t get parsed out:
exec executable=”${compileSWF_jsfl}” os=”Windows 2000,Windows NT,WindowsXP”
arg line=”${assetsFLA}”
exec
doesn’t actually produce a published swf anywhere – i change my publish settings to match the location of the externalAssets.fla and nothing gets created (i have flash cs4 open with the fla also open inside)
May 6th, 2009 at 11:28 am
I have the same problem as Niresh. The build.xml compiles without errors, but the the .fla file does not get published. Any ideas?
June 12th, 2009 at 2:24 am
[...] I followed this series of great tutorial, not too long enough I stucked at the part 2 when I need to compile the project with Flex mxmlc [...]
June 16th, 2009 at 4:43 am
Im more interested in compiling FLA’s in such a wayI can still use the FDT debugger.. that would be awesome.
August 2nd, 2009 at 11:00 pm
[...] To begin this tutorial, please make sure you have set up your workspace as suggested in Part 1. [...]
November 5th, 2009 at 4:57 am
All works very well until I try to debug then I get this ‘Invalid argument: listen failed’, any ideas ?
November 19th, 2009 at 9:34 am
Would using Ant to compile in Flex allow me to publish an. fla designed in CS3 to Flash Player 10 – and take advantage of Vector classes in my code?
(…I think it would have to be Flex sdk4+… to use Vector…)
November 26th, 2009 at 5:49 pm
As far as I know, Flash CS3 does not publish SWFs for Flash Player 10. However, the Flex SDK has included FP10 support since version 3.2. You have a choice of either installing the Flash Builder 4 beta (which includes Flex SDK 3.4 & 4) or just the Flex SDKs.
To publish a FP10 SWF, update your Project Properties->Actionscript Compiler to use the latest SDK, in the Library path settings, add the playerglobal.swc from Flex SDK/frameworks/libs/player/10/playerglobal.swc. Finally, point your FLEX_HOME property in the Ant script to where your new SDK is located.
January 11th, 2010 at 5:14 am
[...] http://hubflanger.com/building-flash-projects-with-ant-and-flex-builder-part-1/ [...]
January 27th, 2010 at 12:59 pm
I’m on PC and replaced
with
However, it doesn’t create a demo1.swf file. Is there something wrong? Is supposed to create a .swf file at all?
February 10th, 2010 at 6:46 pm
You may want to check out Fluant for publishing FLAs from Ant. It’s not quite feature complete, but I’m getting back to working on it finally and hope to be adding lots of new features soon.
It’s main advantage is that it lets you specify your publish settings from within Ant, allowing you to setup different targets that will publish the FLA with different settings – most of which can’t be done easily via JSFL as most publish settings are not accessible via JSFL. For instance one target for publishing in your normal workflow, and another target for release builds that have debug set to off, are protected, and use higher JPEG compression (without ever having to change these settings in the FLA). This is especially handy for continuous integration environments. It’s also cross-platform (Mac & PC).
Here’s an example of it’s use:
http://code.google.com/p/fluant/wiki/HowTo_Publish_A_SWF
Hope you find it helpful!
February 16th, 2010 at 7:21 pm
This compiles the swf for me in Flash CS4 but doesnt keep it open so I can view it… It publishes it, then closes the window…
February 17th, 2010 at 7:09 pm
Anyway to get it so it stays open? Thanks!
February 28th, 2010 at 2:04 pm
Thanks for the tip, Jeff. I will check that out.
March 8th, 2010 at 8:25 am
I’m getting an error with this one, not sure how to fix
BUILD FAILED
H:\My Documents\Flash Builder 4\AS3_Ant_Tutorial_Part3\build.xml:60: Execute failed: java.io.IOException: Cannot run program “open”: CreateProcess error=2, The system cannot find the file specified
Total time: 218 milliseconds
March 8th, 2010 at 1:32 pm
Ant has problems referencing paths that contain space characters. I would recommend that you copy the Flex sdk directory to a path such as C:\\flex_sdk_3 and point Ant to that.
June 7th, 2010 at 6:44 pm
Hi Peng. Do you know how to pass an arbitrary parameter from ANT to jsfl? It would be convenient to have ANT provide a layer of indirection so I could keep my various jsfl files more reusable. So for instance:
Great series!
June 7th, 2010 at 6:46 pm
XML devoured! Here’s what I want: ${compileSWF_jsfl} ${demoFLA} -myParmThatShowsUpInJSFL=”helloWorld”
June 19th, 2010 at 7:24 am
Any response to jeffs request. I’d also like to know how to make it stay open, or even run in a browser! Cheers!
July 7th, 2010 at 12:27 am
Hi
currently i am using Flexbuilder3 IDE .already flex 3 is installed in my system.can i install flash builder 4 also in the same operating system?will it make any problem?whether i need to uninstall my flexbuilder 3?.Please let me know comments.I am using windows 7 as operating system.
Thanks
Ganesh