First off, if you’ve been waiting for this installment of my series of tutorials on Ant, I offer my sincere apologies. I’ve been sidetracked by iPhone development and haven’t been able to find time to finish off these tutorials. As promised, here’s a follow up to my previous tutorials.

In Part 4a, I shall show you how to compile a Flash library symbol as a SWC, add this SWC to your Actionscript classpath and compile your application with the Flex MXMLC compiler.

1. Download tutorial files

To begin this tutorial, please make sure you have set up your workspace as suggested in Part 1.

View Demo

Download Source Files

2. Examine assets.fla

In fla/assets.fla, you’ll find in the library, a simple square graphic linked to a class named Square.

3. Examine compileSquareSWC.jsfl

This JSFL script targets the square symbol in the library, and exports it as a SWC into the specified directory. In this case, my target output directory is file:///Users/peng/Workspace/FlexBuilder/Hubflanger/
AS3_Ant_Tutorial_4a/libs/. You should enter the correct path to the libs folder in your project.

fl.getDocumentDOM().library.selectItem("square", true, true);
var currentSelection = fl.getDocumentDOM().library.getSelectedItems();
currentSelection[0].exportSWC("file:///Users/peng/Workspace/FlexBuilder/Hubflanger/AS3_Ant_Tutorial_4a/libs/square.swc");

4. Examine the compileSquareSWC task in build.xml

The build file contains a task named compileSquareSWC which calls the compileSquareSWC.jsfl script passing along a reference to the assets FLA. Run the task by double-clicking compileSquareSWC in the Ant panel in Flex Builder. You’ll see that a SWC named square has been exported to the libs folder.

<target name="compileSquareSWC" description="Compile the square SWC with the Flash IDE">
  <echo>Flash IDE Compiler for file ${assetsFLA}</echo>
  <echo message="|*|*|*| class cache clear | source save | compiler start |*|*|*|"/>
  <exec executable="open">
    <arg line="${compileSquareSWC_jsfl} ${assetsFLA}"/>
  </exec>
</target>

5. Adding square.swc to your Classpath

Before you can create a reference to the Square class, you need to add the SWC to your classpath. To do so, first right-click on your project and open the Properties panel. In ActionScript Build Path, select the Library Path tab. Click the Add SWC button, navigate to the libs folder and select the square.swc file. Alternatively, you can click the Add SWC Folder button and select the libs folder. This will add all the SWCs in that folder to your classpath.

By adding the SWC to your classpath in Flex Builder, you’ll be able to reference the Square class in your Actionscript classes along with code completion.

6. Examine Demo4.as

Demo4.as creates an instance of the Square object and adds it to the stage.

package
{
  import flash.display.*;

  public class Demo4 extends Sprite
  {
    private var square:Square;

    public function Demo4()
    {
      square = new Square();
      square.x = 200;
      square.y = 100;
      addChild( square );
    }
  }
}

7. Adding square.swc to the MXMLC compiler

In order to compile the application, we also need to add a reference to square.swc for the MXMLC compiler. The code snippet below found in build.xml does just that. Run the compileMain task and load index.html in your web browser. You’ll see a green square in your SWF. Similar to Part 3, the compileProject task allows you to execute both compileMain and compileSquareSWC in sequence with a simple double-click.

<compiler.library-path dir="${LIB_DIR}" append="true">
  <include name="square.swc" />
</compiler.library-path>

Coming up

In Part 4b, we’ll see how we can compile Flash UI Components to a SWC and reference them in our Actionscript classes.

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

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