• You want to do Flash work that is mostly development oriented. The environment described here will be useful for a programmer or small team using supplements from a designer as opposed to a designer working in the Flash IDE with supplements from a programmer.
• You want a command line interface and a tool chain that can work easily with existing continuous integration and web deployment tools.

The following steps will take you through the required set up for a sample project. There is a link to the full source at the end.

Step 1: Download the Flex SDK

Adobe’s open source Flex SDK provides, among other things, an Actionscript compiler binary: mxmlc. It’s not just useful for compiling mxml based Flex applications however; it can also be used to compile lightweight, pure Actionscript 3 projects. The download will consist of a single zip file which you may extract to a directory of your choice. On windows, I choose c:\flex, and on linux I choose /usr/local/share/adobe-flex/sdk. You’ll just need to remember the path when you set up your build environment. Note that for the compiler to work, you’ll need to have Java 1.6+ installed.

Step 2: Download the Flash debugger standalone player and plugins

Ok, so this part isn’t open source, but you can’t have Flash these days without Adobe’s Flash player. The debug flash player will conveniently display a stack trace whenever there’s an error. The trace will even include line numbers if you build your swfs with the debug flag, which you will see how to do below. The debug enabled browser plugins are installed in the same manner as the normal browser plugins. If you’re running Windows, installing the ActiveX control will result in having a debug enabled player in IE. On both Linux and Windows, installing the ‘Plugin content debugger’ will give you a debug enabled player in browsers like Firefox and Chrome. The standalone player can be placed anywhere. On Linux I’ve copied the flashplayer executable to /usr/local/bin, which is on my PATH.

Step 3: Install Ant and the Flex SDK Ant tasks

Since the Flex SDK internals are predominately written in Java, Ant is used as the build tool of choice for most Flex and Actionscript 3 projects. Accordingly, Adobe provides a set of Ant tasks for invoking various SDK related commands from within Ant. First install Ant (if you’re on a Linux system, you’re better off using your distribution’s package manager rather than Apache’s packages). Copy the file flexTasks.jar from <flex sdk path>/ant/lib to your Ant installation’s lib folder. On my Ubuntu Jaunty system for example, it was /usr/share/ant/lib. You will also copy from the flex Ant folder the file flexTasks.tasks to your project folder once it is created.

Step 4: Choosing an editor/IDE

Now that you can compile Actionscript files and view the results, you’ll need to select an Actionscript aware editor or IDE. If you are using Vim, there are a number of syntax files around the web. I’ve had luck with the ones found on Adbul Qabiz’s blog for example. On Emacs, you will find what you need on the Emacs Wiki, including some FlyMake code (build as you type). If you are running Windows, there is a tailored open source solution available: FlashDevelop. FlashDevelop provides IDE functionality for Actionscript 2 and 3, Flex, Air, and haXe. If you’re accustomed to Eclipse, Visual Studio, NetBeans, etc., you should feel right at home with FlashDevelop.

Step 5: Creating a project template

The main aim here is to build your project by issuing one command from the command line. You’ll start by creating a project folder, and inside the project folder you will create a file called build.xml for use with Ant. If you intend to collaborate with others on the project, it’s also a good idea to separate system specific variables into another file. At iPOV, we use a separate file called build-user.properties. Here are samples of both files:

<project name="miniplayer" default="build-all" basedir=".">
    <description>
           Builds iPOV Hello World
        To use, :
          1. Copy %flex_sdk_3%/ant/lib/flexTasks.jar  to %ANT_HOME%/lib
          2. Copy build-user.properties.default to build-user.properties
            (so it doesn't get commited to SVN) and
            edit the paths for your install.
          3. Invoke the build ">ant [build-target-name]" (either via commandline of GUI launcher)
    </description>

    <!-- Import the property definitions. -->
    <property file="build-user.properties" />
    <property name="PROJECT_NAME" value="ipov_hello-world"/>
    <property name="PROJECT_VERSION" value="1.0.0"/>
    <property name="DEPLOY_DIR" value="bin"/>
    <property name="MAIN_CLASS" value="src/net/ipov/hello_world/Main.as"/>

    <taskdef resource="flexTasks.tasks" classpath="${TASK_HOME}/flexTasks.jar" />

    <target name="build-all" depends="build-swf,build-debug-swf"/>

    <target name="build-swf" depends="init">
        <mxmlc file="${MAIN_CLASS}"
            output="${DEPLOY_DIR}/${PROJECT_NAME}-${PROJECT_VERSION}.swf"
            debug="false" optimize="true" fork="true"
            default-background-color="0xffffff" >
            <source-path path-element="src/" />
        </mxmlc>
    </target>

    <target name="build-debug-swf" depends="init">
        <mxmlc file="${MAIN_CLASS}"
            output="${DEPLOY_DIR}/${PROJECT_NAME}-${PROJECT_VERSION}.swf"
            debug="true" optimize="false" fork="true"
            default-background-color="0xffffff" >
            <source-path path-element="src/" />
        </mxmlc>
    </target>

    <target name="init">
        <mkdir dir="${DEPLOY_DIR}"/>
    </target>

</project> 

#
# Copy this file to .user.properties and then edit it to match your system
#
FLEX_HOME=c:/flex3/sdk
TASK_HOME=c:/bin/apache-ant-1.7.1/lib

Replace ipov_hello-world above with your project name, and replace the net/ipov path with the namespace you will use for your main source files.

If you are using FlashDevelop, you will now create a new AS3 project using Project -> New Project. For Location, browse to your project folder where you have placed the two files above. For Package, type your primary namespace (net.ipov.hello_world in this example). FlashDevelop will create the necessary files and folders for you. Outside of FlashDevelop, you can simply create a folder called src, and inside place folders corresponding to your primary namespace. Then create a file called Main.as inside your primary namespace folder to act as the entry point for your application. Here the content of Main.as in the Hello, World! sample:

package net.ipov.hello_world
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.text.TextField;

    [SWF(height='300', width='400')]
    public class Main extends Sprite {

        private var _params:Object;

        public function Main():void {
            _params = root.loaderInfo.parameters ? root.loaderInfo.parameters : new Object();

            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);

        }

        private function init(e:Event = null):void {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point
            var helloText:TextField = new TextField();
            helloText.text = "Hello, World!";
            stage.addChild(helloText);
        }

    }

}

Once you have set up your project folder, invoke the following commands from the root of the project to build and launch the application:

~/projects/as3-hello-world $ ant
Buildfile: build.xml

init:

build-swf:
    [mxmlc] Loading configuration file /usr/local/share/adobe-flex/sdk/frameworks/flex-config.xml
    [mxmlc] /home/joseph/projects/as3-hello-world/build/ipov_hello-world-1.0.0.swf (833 bytes)

build-debug-swf:
    [mxmlc] Loading configuration file /usr/local/share/adobe-flex/sdk/frameworks/flex-config.xml
    [mxmlc] /home/joseph/projects/as3-hello-world/build/ipov_hello-world-1.0.0.swf (1021 bytes)

build-all:

BUILD SUCCESSFUL
Total time: 9 seconds
~/projects/as3-hello-world $ flashplayer build/ipov_hello-world-1.0.0.swf

If you are using FlashDevelop, you can also use Project -> Test Movie (F5 on the keyboard). When prompted to configure the compiler, set your Flex SDK location under AS3Context, and set the standalone Flash player location under FlashViewer.

That should be enough to get started developing AS3 applications. Future articles will include information about unit testing, continuous integration, deployment, and Adobe Captivate Widget development.

as3-hello-world-source