In Part 3 of this tutorial, we shall use a combination of the MXMLC compiler and JSFL script to compile an external SWF which will be loaded into your main SWF.

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 externalAssets.fla

In fla/externalAssets.fla, you’ll find a bitmap image in the first frame of the main timeline. This FLA is set up to publish a SWF named externalAssets.swf into the bin-debug folder.

3. Examine compileSWF.jsfl

You’ll notice that this JSFL script is exactly the same as the one in Part 1. As we shall soon see, this script is completely reusable and we shall use it to compile the externalAssets.swf.

4. Examine the compileAssetsSWF task in build.xml

The build file contains a task named compileAssetsSWF which is similar to the task named compileMain previously mentioned Part 1 of this tutorial. It reuses the compileSWF.jsfl script to compile a SWF by passing in assetsFLA as its argument.

<target name="compileAssetsSWF" description="Compile the Assets SWF 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="${compileSWF_jsfl} ${assetsFLA}"/>
  </exec>
</target>

5. Examine Demo3.as

Demo3.as creates a Loader instance which loads in an external SWF called externalAssets.swf. The loadCompleteHandler then adds the Loader instance onto the main stage.

package
{
  import flash.display.*;
  import flash.events.Event;
  import flash.net.URLRequest;

  public class Demo3 extends Sprite
  {
    private var loader:Loader;

    public function Demo3()
    {
      loader = new Loader();
      loader.contentLoaderInfo.addEventListener( Event.COMPLETE, loadCompleteHandler );
      loader.load( new URLRequest( "externalAssets.swf" ));
    }    

    private function loadCompleteHandler( evt:Event ):void
    {
      evt.target.removeEventListener( Event.COMPLETE, loadCompleteHandler );
      addChild( loader );
    }
  }
}

6. Examine the compileMain task in build.xml

We also have a compileMain task which is the same as the one in Part 2 except that it passes in Demo3.as as the argument to the MXMLC compiler.

<target name="compileMain">
  <echo>Compiles Demo3.as file and outputs demo3.swf</echo>
  <mxmlc file="${SRC_DIR}/Demo3.as" output="${DEPLOY_DIR}/demo3.swf"
    actionscript-file-encoding="UTF-8"
    incremental="false"
    debug="true"
    default-frame-rate="31"
    default-background-color="0xCCCCCC">

    <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
    <source-path path-element="${FLEX_HOME}/frameworks"/>
    <source-path path-element="${SRC_DIR}" />

    <!-- Set size of output SWF file. -->
    <default-size width="550" height="400" />
  </mxmlc>
</target>

7. Examine the compileProject task in build.xml

Finally, we have a composite task named compileProject which allows you to execute its dependent tasks ie. compileMain and compileAssetsSWF in sequence with just a double-click.

<target name="compileProject" depends="compileAssetsSWF, compileMain" />

Coming up

As you can see, Ant tasks are highly flexible – allowing you to customize your workflow by combining varies different techniques, whether you prefer the Flash IDE or the MXMLC compiler. In Part 4, we shall discuss using Ant to compile SWCs and how to add SWCs to your workflow.

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

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