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 and src containing the Actionscript files and the FLAs.

View Demo

Download Source Files

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="src/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.

Tags: Actionscript, Ant, Flash, Flex Builder, JSFL

This entry was posted on Sunday, February 1st, 2009 and is filed under Actionscript, Ant, Flash, Tutorials. You can leave a response, or trackback from your own site.