Blobs in Games: Learning Flash 8

Sunday, December 24, 2006

Back in 2004, I attempted to learn Flash programming, but failed to find free tools, and ended up writing Java applets instead. I was unhappy with Java for a number of reasons, but the main one was that Java applets are clunky on web pages compared to Flash objects, and as a result more people have Flash than Java. A few months ago Troy Gilbert pointed me at OSFlash.org, which has a list of open source Flash development tools (thanks Troy!). I eventually found the free and fast Motion-Twin ActionScript compiler (mtasc), but had a lot of trouble using it. The tutorials I found on the web for Flash development assume you're using the Macromedia development environment, which I'm not, so they weren't much help. I finally figured out what I was doing wrong.

I'm used to a certain development model: you write a program, (optionally) compile it, then run it. This might be considered “old school” by people writing Windows and Mac apps. When writing Windows and Mac apps, you put the source code with various resources (icons, graphics, music, dialog boxes, etc.) into a “project”, which gets compiled into an executable. In the “old” style of development (used for C++, Java, Python, Perl, Basic, Ruby, etc.), your program reads in resources after you run it. That's how I've been writing my games. Flash seems to follow the “new” style of development, in which lots of resources, not only source code, get combined into one package.

The open source mtasc compiler only compiles Flash (ActionScript) source code. It does not handle the resources that have to be assembled into a compiled Flash file (SWF). The mtasc tool will compile your source code and update a SWF file with the compiled code, but you can't use mtasc to create SWF files; they have to exist already. For that, you normally use the (commercial) Flash development environment from Macromedia. If you want to fully work in an open source world, you need another way to assemble resources. The swfmill tool can do this: it converts an XML file listing resources into a SWF file. With swfmill my toolset is complete.

The other thing that's confusing (for me) about Flash development is that it seems to be designed around movies, and every Flash program has a “frame rate”, even if it's not a movie. For now I'm ignoring this and just setting a low frame rate.

The summary of what I've learned so far about open source Flash development:

Create an XML file that describes the resources you need. I'm using the example XML file in Mark Winterhalder's well-written tutorial on the swfmill site:
```
<?xml version="1.0" encoding="iso-8859-1" ?>

<movie width="320" height="240" framerate="12">
  <background color="#ffffff"/>
  <frame/>
</movie>
```
Compile the XML file into an SWF file:
```
swfmill simple example.xml example.swf
```

Create an ActionScript file with your script. I'm using an example I found on the mtasc site:

class prototypes {
    static var app : prototypes;

    function prototypes() {
        // creates a 'tf' TextField size 320,200 at pos 0,0
        _root.createTextField("tf",0,0,0,320,200);
        // write some text into it
        _root.tf.text = "Hello world !";
    }

    static function main(mc) {
        app = new prototypes();
    }
}

Compile the ActionScript into your existing SWF file, using the -main flag to have it automatically call the main() function:
```
mtasc example.as -swf example.swf -main
```

Embed the SWF into a web page using the <embed> tag, as described on the haXe site:

<html>
<body bgcolor="#cccccc">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
  width="320" height="200" id="test">
<param name="movie" value="example.swf" />
<embed src="example.swf" width="320" height="200" 
  name="test" type="application/x-shockwave-flash"
  pluginspage="http://www.macromedia.com/go/getflashplayer"
/>
</object>
</body>
</html>

See the results in a browser. Hooray!

For me, getting started is the hardest step. Once I have something running, development becomes easier. Now that I have a Flash program running, my next steps are to set up my development environment, then learn about the Flash libraries. I've been wanting to learn Flash programming for a long time, but I kept getting stuck. I'm quite glad I finally put the pieces together, and I hope the above description helps others get started.

Labels: flash , programming , project

– Amit – Sunday, December 24, 2006

10 comments:

GUD Magazine wrote at December 24, 2006 12:04 PM: Awesome--I've run into that conundrum with flash before, poking around at the files, that osflash site, etc.

I look forward to giving your "minimally working program" a try. The instructions seem simple enough. :)
Amit wrote at December 24, 2006 3:54 PM: Kaolin, let me know if the above instructions don't work. I've done so many random things to get things to work that it's possible that I forgot one of the earlier required steps. :)
Amit wrote at December 24, 2006 11:39 PM: One thing I still haven't figured out is where error messages go. Maybe this works better in the commercial flash development environment.
Sean wrote at December 25, 2006 3:39 PM: Amit- thanks for posting this. I've run into the same problem with macromedia's "new" (resource-bundling, everythings-a-movie) model. I ended up using http://www.processing.org for interactive art-toys, but Processing brings all the java baggage with it.

I'll certainly try out the steps you've written here.
Amit wrote at December 25, 2006 4:56 PM: I had processing.org bookmarked, intending to try it out if I couldn't get anywhere with Flash. :-)
Amit wrote at December 30, 2006 8:46 PM: One good source of information for learning Flash programmin reference is the ActionScript 2.0 language reference.
kaolin fire wrote at January 11, 2007 3:23 PM: copied your code samples, installed swfmill and mtasc--worked like a charm. :)

My inexpert makefile:

main: example.swf example.as example.xml

example.swf: example.xml example.as
swfmill simple example.xml example.swf
mtasc example.as -swf example.swf -main

clean:
del example.swf
Amit wrote at January 28, 2007 10:19 PM: If you want to have sounds in your Flash app and you're using swfmill, note that you need a recent version of swfmill (anything released in January 2007 or later) to embed mp3 files into the swf. Use something like <sound id="Slide" import="example.mp3"/> to add a sound effect to the swf. Unfortunately swfmill cannot read wav files. You can also read sound files after the Flash loads in the browser instead of embedding. See the Sound.loadSound method.
marshall wrote at February 04, 2007 6:30 AM: I think solution for all of your problems is FlashDevelop. Try it at www.flashdevelop.org. I used it for some time now, and must say this is excelent program. Also try AS3 (you can download free Flex Builder sdk at Adobe). It's much more like genuine programming (no movieclips, no timeline...)
Amit wrote at February 04, 2007 12:08 PM: FlashDevelop looks like a reasonable solution if you're using Windows (I'm not) . I'm happier editing code in Emacs (or vim) than in a generic editor. :)