In this final installment of my series of tutorials on using Ant with Flex Builder, I’ll show you how to create a Preloader asset in the Flash IDE and export that as a SWC to be used in your Actionscript source code.

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

The preloaderAsset.fla has in its library a movieclip symbol named preloader, linked to a class PreloaderAsset. Note that there is no physical Actionscript file named “PreloaderAsset.as”. This class will be created by the Flash compiler when we run the compilePreloaderSWC JSFL script.

3. Examine the compilePreloaderSWC JSFL

This script retrieves the preloader library symbol and exports it as a SWC to a designated location in your file system. Update the path for libs/PreloaderAsset.swc to reference your project directory.

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

4. Examine the compilePreloaderSWC Task

The compilePreloaderSWC task invokes the compilePreloaderSWC.jsfl script and compiles a SWC named PreloaderAsset.swc into the libs folder of your project directory using the Flash IDE.

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

5. Examine Preloader.as

Add the SWC into your classpath using the project’s Properties->Actionscript Build Path->Library Path panel. With the SWC added to the library path, the Preloader class can now reference the PreloaderAsset class and create an instance of the PreloaderAsset object. This allows you to add the visual asset into your Preloader display container. The Preloader class also provides functionality to update the properties of the PreloaderAsset instance.

package
{
  import flash.display.*;
  import flash.events.*;
  import flash.text.*;

  public class Preloader extends Sprite
  {
    private var _asset:PreloaderAsset;

    public function Preloader()
    {
      _asset = new PreloaderAsset();
      addChild( _asset );
    }

    public function updateProgress( bytesLoaded:uint, bytesTotal:uint ):void
    {
      var ratio:Number = bytesLoaded / bytesTotal;
      _asset.bar.scaleX = ratio;
      _asset.progessTxt.text = bytesLoaded + " kb / " + bytesTotal + " kb";
    }
  }
}

6. Examine Demo5.as

The document class Demo5 creates a Preloader instance and a Loader instance to load an external SWF. It responds to load progress events from the Loader by and calling the updateProgress() method of the Preloader instance.

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

  import Preloader;

  public class Demo5 extends Sprite
  {
    private var preloader:Preloader;
    private var loader:Loader;

    public function Demo5()
    {
      preloader = new Preloader();
      preloader.x = 150;
      preloader.y = 150;
      addChild( preloader );

      loader = new Loader();
      loader.contentLoaderInfo.addEventListener( Event.COMPLETE, loadCompleteHandler );
      loader.contentLoaderInfo.addEventListener( ProgressEvent.PROGRESS, loadProgressHandler );
      loader.load( new URLRequest( "externalAssets.swf" ));
    }

    private function loadProgressHandler( evt:ProgressEvent ):void
    {
      preloader.updateProgress( evt.bytesLoaded, evt.bytesTotal );
    }

    private function loadCompleteHandler( evt:Event ):void
    {
      removeChild( preloader );
      evt.target.removeEventListener( Event.COMPLETE, loadCompleteHandler );
      evt.target.removeEventListener( ProgressEvent.PROGRESS, loadProgressHandler );
      addChild( loader );
    }
  }
}

7. Wrapping it all up

The compileMain task includes the PreloaderAsset.swc by adding it to the compiler’s library-path option. This option will merge all classes embedded in the SWC into your SWF.

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

I hope you’ve found this series of tutorial helpful in optimizing your Flash-Actionscript development workflow. Please leave any requests and suggestions in the comments.

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

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