2009-12-31

Getting Started with Flash Development

I have to admit my secret shame: I find Flash programming to be pretty fun. You get a lot of bang per line of code, and you can distribute your results from your web page.  (Plus Adobe has a compelling incentive to keep Flash working cross-platform, unlike all the browser developers.) Or, if you want, you can build it into an AIR app later.

For the record, I don't represent Adobe in any way, though I am friends with a person who works there. :-) However, Adobe has been generous in their Linux support, so I am inclined to promote them over their main competitor.

So lets say you're a developer like me who doesn't tend to use GUI development environments, and loves command line stuff, and doesn't want to spend a bunch of money on a Flash tool that doesn't even run under Linux (though some people might have CS3/4 running with WINE). Fortunately, Adobe has you (me) covered!

Some time ago, they released a free (beer) project called Flex, which allows you to write GUIs in XML with embedded ActionScript. It's pretty neat, but for this, I'm going to steer clear of the XML. (Note that the Flex SDK is available for free download. If you want to buy the FlexBuilder IDE, you can, but it's not required to write Flash apps.)

But is it possible to write a Flash piece by only using ActionScript and avoiding the overhead of Flex? Yes, it is!

ActionScript is the scripting language that runs in Flash apps. Since version 3 ("AS3") it has been a full-featured language, complete with a JIT.

First of all, you'll need to get the Adobe Flex SDK package for your platform (not to be confused with the "flex" lexer). It contains a compiler called mxmlc which you'll be using to build this demo. Your platform probably has a prebuilt Flex package available from where ever you normally get your packages, but you can download it from Adobe if you can't find one. Once it's installed, run mxmlc on the command line to make sure it's working.

Now, let's write some Flash code! We're going to put together our "main", create a text field, put some text in it, and add it to the display list. (Flash maintains its items to display in a big tree with the "stage" at the root. It will automatically add an instance of our "main" class to the stage for us.)

Anyway, here's the complete "Hello, World!", Hello.as:

// Hello.as

package {

import flash.display.Sprite;
import flash.text.TextField;

[SWF(width="200",height="40",backgroundColor="0x33ffff")]

public class Hello extends Sprite {

    public function Hello() {
        var t:TextField = new TextField();
        t.text = "Hello, World!";

        this.addChild(t); // add to display list
    }
}

}

That's it! Compile it like this:

mxmlc -output Hello.swf Hello.as

That'll give you a file Hello.swf, which is the compiled Flash output, and is only 618 bytes! You can either load the SWF right in your browser, or find a standalone flash player for your system, and you should see the magic words appear!

The mxmlc compiler is written in Java and can be a little slow to run with the overhead of loading the JVM each time. So along with Flex, Adobe distributes fcsh, the Flex Compiler SHell which you run once and keep resident. It's a Java program that you run and interact with to do your builds. When you run it, you get a "(fcsh)" prompt. First of all, you mxmlc your main source file:

(fcsh) mxmlc Hello.as

fcsh: Assigned 1 as the compile target id
Loading configuration file /opt/flex-sdk/frameworks/flex-config.xml
/home/beej/src/flash/hello/Hello.swf (633 bytes)
(fcsh)

You'll notice it "Assigned 1 as the compile target id". From then on, you can just type "compile 1" and it'll rebuild, quite smartly:

fcsh) compile 1

Loading configuration file /opt/flex-sdk/frameworks/flex-config.xml
Recompile: /disks/beejhome/home/beej/src/flash/hello/Hello.as
Reason: The source file or one of the included files has been updated.
Files changed: 1 Files affected: 0
/home/beej/src/flash/hello/Hello.swf (634 bytes)
(fcsh)

Now, fcsh doesn't support "readline", which means you can't just hit the up-arrow key to run the last command. To "fix" this, you can run fcsh with the rlwrap program like so:

$ rlwrap fcsh

which makes life very convenient.

So let's take this Hello.as code apart.

First of all, everything has to be in a package. This can be something down a directory tree like in Java (e.g. package lab.jorgensen.util), or, if everything is just in the "root" package, the package name can just be left blank like I've done it.

Then you'll notice right below that we import from the built-in packages flash.display and flash.text. We need Sprite, which is a general-purpose drawable (class DisplayObject) that can be added to the display list (class DisplayObjectContainer), and TextField, which is a specialized DisplayObject.

The next line is a strange one. For Flex, you can put additional directives in square brackets, called "metadata tags". This [SWF(...)] tag gives the compiler more information about the output, namely the resolution and background color. You could also put the preferred frames-per-second in there. There are tags to import other SWFs, to embed font subsets, and all kinds of stuff.

Then we declare our class Hello to be a subclass of Sprite. Like I said, Flash will make an instance of the main class (which is a Sprite) and will add that as a child of the stage (i.e. it will add the instance to the stage's DisplayObjectList.

Now take a look at the Hello constructor: it's makes a new TextField and sets the text value. And, most importantly, it adds it to Hello's DisplayObjectContainer. If a DisplayObject is not in a DisplayObjectContainer, it is not in the display list, and it will not be displayed. If you are wondering why your object isn't drawing, make sure you've added it to the display list!

If you brought up the SWF in your browser, it might have scaled the flash piece to fit the window. You should put the SWF in a proper HTML file to tell the browser how to display it. Your Flex SDK should have come with a "templates" directory that contains sample code that you should use to actually display your SWF; some of the templates will detect the browser's Flash version and prompt for upgrades, etc., so it's really the recommended route.

Here are some more links:

• Adobe Flex 3 Documentation

• Flex/ActionScript Language Reference—the flash.* packages are what you'll often be using for plain-old Flash, and mx.* are the Flex packages

Have fun!

Historic Comments

Comments