Publishing SWF files using mxmlc, SWCs and Ant

It is no secret that Flash programmers seldom use the “Actions” window inside Flash Professional. Flex/Flash Builder is a full featured IDE for writing object oriented code and offers incredible efficiencies for all ActionScript (AS) programming tasks.

This being the case, writing code in Builder and publishing SWFs in Flash Professional is a fairly common workflow among Flash developers. Unfortunately, it is also a slow and clumsy process.

Publishing from Builder using mxmlc is quicker and more convenient but integrating it within existing Flash workflows can be complicated.

Earlier this year, we decided to start using mxmlc exclusively for our Flash projects. We have since refined our process to a point were it works very well.

Use SWC files for libraries

There are several ways to organize and access assets in a Builder project, but the most common and best fit for our workflow has been to publish our libraries as SWC files from Flash Professional.

The idea is to create an FLA file that includes a library of symbols and an empty timeline.

It is necessary to properly configure the symbols so that you can easily access them from the AS code. Linkage properties for each symbol to be used within the AS code should be set similar to what you see in the following image.

A couple things to note in particular:

To create the SWC file from Flash Professional, check the “Export SWC” option within the “Publish Settings” and publish your FLA. Using Flash Professional to publish the SWC allows our designers to easily modify, update and preview project libraries without involving our developers. Alternately, mxmlc can be used to publish the SWC file and automating this process through Ant is possible.

The FLAs and the published SWF and SWC files should be kept together with the project. We’ve standardized on keeping these within a folder called “swc” in the root of the project. This folder needs to be added to the build path in Builder from within the project properties as shown in the following image.

At this point Builder can provide it’s standard error detection, code hinting and completion for symbols in your SWC file. Within your ActionScript files, you will refer to the assets by the Class you defined in the symbol properties. For example, to add the core_InfoPanel_button specified earlier, the code looks something like this (assuming _myButton is a private variable in the class this code is found in):

public function addButton():void{ 
    _myButton = new core_InfoPanel_button();   
    addChild(_myButton);<br/>
}

For projects that need to be broken into multiple SWF files, we create one or more FLA and SWC files to be used in each SWF. The different SWF files are published from builder independently and then loaded at run-time by other SWF files as they would be for any other Flash project.

Use ANT for publishing

At this point Builder’s standard “run”, “debug” and “export release build” tools can be used to build code capable of accessing assets within your libraries; however, we’ve found that publishing our SWF files via Ant works much better within our workflow.

One drawback of the standard tools is that the folders you publish into are ignored by Subclipse. This is not something that can be turned off in Builder and can cause problems in the repository, especially if you publish files into a folder that is already in source control.

For us, this is a significant drawback since Subclipse is our SVN client of choice and we always keep our published files within source control. Fortunately, with Ant we can publish our files anywhere, regardless of source control.

Furthermore, Ant build files keep key settings within one XML file rather than hiding them within multiple dialog boxes and .properties files. Among other things, this makes it much easier to check-out a copy of a project and build it without additional project documentation describing the required settings.

Here is an example of an Ant build file that includes a single target for a deployable (optimized) SWF.

<?xml version="1.0" encoding="utf-8"?> <project name="Sketch App Builder" basedir=".">    
<project name="Sketch App Builder" basedir=".">
    <property name="FLEX_HOME" value="/Applications/Adobe Flex Builder 3/sdks/3.2.0"/>
    <property name="APP_ROOT" value="code"/>    
    <property name="DEPLOY_DIR" value="rails/odosketch/public/flash"/>    
    <property name="MAIN_APP" value = "OdoSketch"/>        

    <taskdef resource="flexTasks.tasks" classpath="${FLEX_HOME}/ant/lib/flexTasks.jar" />        

    <target name="main">        
       <mxmlc             
            file="${APP_ROOT}/${MAIN_APP}.as"
            output="${DEPLOY_DIR}/${MAIN_APP}.swf"
            actionscript-file-encoding="UTF-8">       
                <compiler.debug>false</compiler.debug>
                <compiler.include-libraries dir="swc" append="true">
                    <include name="sketch.swc" />
                </compiler.include-libraries>
                <default-frame-rate>30</default-frame-rate>        
        </mxmlc>       
    </target> 
</project>

Note the inclusion of the sketch.swc library within the compiler.include-libraries node. Mxmlc does not have access to the path information we set up for the swc folder earlier and it needs to be added explicitly in the build file.

Using multiple targets, Ant can support different configurations for debug and deploy builds and can also automate tasks such as opening your project within a browser.

For information about how to install and use Ant within Builder, see this article on Adobe.com.

Going beyond AS only and SWF projects

Using mxmlc, SWC files, and Ant within Flex/Flash Builder has allowed us to simplify our publishing process to a single click without the need to run, or switch over to Flash Professional. What’s more, this process is much more consistent with project organization and deployment of our Flex and AIR projects -- making it easier to move between projects.

If you have any additional tips for publishing from Builder, let us know in the comments below.