Before getting into my solution, I’ll mention the two modules that are closest to what I want to achieve:

1. Galleria – this module produces a carousel-style listing of image thumbnails, when a thumbnail is clicked on the full-size image is shown. However, this module has the following problems for my use case:
   1. The thumbnails are simply the original image file with an explicit width and height set; this means that if you have a lot of them, it can take quite a while for them all to load.
   2. Loading is not actually asynchronous, but there is a significant delay while the javascript initializes during which the content is hidden. There is no progress indicator during this time.
   3. The admin panel for the module has very limited options – the worst is that it doesn’t let you set the size of the carousel (which can be overridden in CSS), but does ask you to specify how many images to display – the images are scaled (using CSS) to fit in the carousel’s default size (you can hack the JS code to fix this, but then have to reset a number of other CSS properties).
2. Fancy Slide - this module seems to be very new and as such has pretty much no documentation. If its development continues it could become a viable alternative to my needs. The biggest problem with this module currently is lack of control over the presentation.

The following solution uses existing modules. It seems logical that this technique is already out there, but as I can’t find it documented, I’m doing that here. The main modules you’ll need:

• ImageAPI
• ImageCache
• CCK, CCK Filefield, CCK Imagefield
• Views
• Thickbox - for some reason the latest version of the Lightbox2 module is creating JS errors when mixed with the lastest JQuery version.

After installing the modules listed above here’s what you do:

At this point you probably want to create one or two Screenshot nodes so that you have something to look at while building the view. Go to “Create content” > Screenshot. Enter the Node Title. Scroll down to the “Screenshot” field and upload an image file; once it has uploaded you should get a “Title” field next to the file where you can enter a description (note that entering HTML here probably won’t work too well as the contents of this field are output as an attribute).

Now for the final part: creating a View. Go to Admin > Site building > Views and “Add.” Use the settings:

That’s it. You can see our screenshots page at http://www.ipov.net/content/cosolvent-screenshots-0

If I have time I’ll also setup a quick screencast and update this post with a link to it.

• 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