Part 4b of the Ant series expands on Part 4a by adding a Flash UI Component to the SWC. Please review Part 4a before proceeding with this tutorial.

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

We begin by dragging an instance of the Button UI Component from the Components Panel. This creates a Button symbol in the library. Note that the Button symbol is linked to the fl.controls.Button class. The Publish Settings of the FLA are set to compile the SWF to the ../libs/ directory. Under the Flash tab, note that the Export SWC option is checked. This causes the Flash compiler to output a companion SWC whenever a SWF is being published.

3. Examine compileAssetsSWC.jsfl

As in previous examples, the compileAssetsSWC.jsfl script opens the assets FLA and tells it to compile its SWF.

4. Examine the compileAssetsSWC task in build.xml

As in previous examples, the compileAssetsSWC task calls the compileAssetsSWC.jsfl script passing along a reference to the assets FLA. Run the task by double-clicking compileAssetsSWC in the Ant panel in Flex Builder. Due to the publish settings, an assets.swc file will be published to the libs folder along with assets.swf. We can ignore assets.swf as it won’t be needed for this tutorial.

<target name="compileAssetsSWC" description="Compile the assets 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="${compileAssetsSWC_jsfl} ${assetsFLA}"/>
  </exec>
</target>

5. Adding assets.swc to your Classpath

Add the assets SWC to your classpath as described in Step 5 of tutorial Part 4a.

6. Examine Demo4.as

In addition to Square instance, Demo4.as creates an instance of the Button component and adds it to the stage.

package
{
  import flash.display.*;
  import fl.controls.Button;

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

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

      button = new Button();
      button.x = 200;
      button.y = 250;
      addChild( button );
    }
  }
}

7. Adding assets.swc to the MXMLC compiler

As in Part 4a, we add a reference to assets.swc for the MXMLC compiler with the code snippet below, in build.xml. Run the compileProject task and load index.html in your web browser. You’ll see a green square and a Button component in your SWF.

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

Coming up

In the next and final installment of this series of tutorials on Ant, we shall explore using a SWC to create a Preloader for your application.

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.