A passing knowledge of ant wouldn’t hurt either.

This tutorial uses the file blankapp.zip to help bootstrap you into the world of flex / actionscript development.

Prerequisites

Flex SDK

You will need the flex sdk available from the flex developer center

Apache ant

You will need apache ant, make sure that the bin folder is in your path.

Copy flexTasks.jar from the flex ant lib into your own ant lib folder.

Setup

Extract the blankapp.zip to a folder

Open build.xml and change the line <property name=”FLEX_HOME” value=”/usr/flex/sdk3″ /> to point to the flex sdk.

Build

You can build it by typing

ant build

You should see some output like this

Buildfile: build.xml

clean:
   [delete] Deleting directory C:\Documents and Settings\Stuart\Desktop\projects\flex\blankapp\build

init:
    [mkdir] Created dir: C:\Documents and Settings\Stuart\Desktop\projects\flex\blankapp\build

build:
    [mxmlc] Loading configuration file C:\usr\flex\sdk3\frameworks\flex-config.xml
    [mxmlc] Initial setup: 172ms
    [mxmlc] Loaded 8 SWCs: 391ms
    [mxmlc] C:\Documents and Settings\Stuart\Desktop\projects\flex\blankapp\src\blankapp_333027.cache (The system cannot
 find the file specified)
    [mxmlc] Files: 328 Time: 1562ms
    [mxmlc] Linking... 16ms
    [mxmlc] Optimizing... 125ms
    [mxmlc] SWF Encoding... 47ms
    [mxmlc] C:\Documents and Settings\Stuart\Desktop\projects\flex\blankapp\build\blankapp.swf (159158 bytes)
    [mxmlc] Persisting 33 compilation units... 15ms
    [mxmlc] Total time: 2328ms
    [mxmlc] Peak memory usage: 59 MB (Heap: 33, Non-Heap: 26)

BUILD SUCCESSFUL
Total time: 2 seconds

A new file, blankapp.swf should now be in the build folder

Type

ant deploy

To copy it to the deploy directory (later you can customise this later).

If you open the blankapp.swf in the browser you should see something like this

It’s fairly bare, but demonstrates some basic techniques and a couple of widgets.

Mxml and Actionscript, how they link together

There are two important parts, the blankapp.mxml and org/blankapp/BlankApp.as.

The mxml file defines the layout while the actionscript contains code to be executed.   In this case there is one mxml file, BlankApp.mxml which links to a single actionscript class, BlankApp (in the file src/org/blankapp/BlankApp.as).

The directory structure org/blankapp, defines the package, in much the same way as java packages.

The graphic below shows how the class is linked to the mxml and where the instance of the class is:

The app is very basic, but should provide a jumping off point.

Adding libraries

If you need to add any libraries, just place the swc files in the lib folder and they will be included, the build.xml can be changed if this isn’t satisfactory.

Afterword

I only wanted to get started with papervision, but found it a bit of hassle to get started, hopefully this post will help people get started quickly.

Acknowledgements

The ant build file is by no means my own, owes inspiration to previous ant files I’ve known, including the pyAMF one and information available on the web.

This blog entry: http://talsma.tv/post.cfm/ant-mxmlc-and-swc-files for the info on how to include swc files.

• BetterSearch
• ColourfulTabs
• Del.icio.us bookmarks
• Dragdropupload
• Fish eye tabs
• Greasemonkey [Gmail colorizer]
  
• Operator (semantic web)
• No squint
• Web Developer Toolbar
• CSS Viewer
• IE Tab
• Live HTTP Headers
• Foxytune – Controls media players including XBMC

Now if only there was a greasemonkey script or addon to install these automatically I’d be sorted