disruption.ca

I think that flash is a fantastic platform for games, but the tools are expensive. I have been curious about alternatives to Flash Studio for a while, and I decided to investigate. The flash development environment that I was looking for:

• Would be free.
• Would work on OS X, Windows, and if I was lucky, Linux.
• Would not involve working in Flex with MXML.
• Would produce bytecode for the faster actionscript virtual machine 2 (AVM2).
• Would allow embedding assets such as images and sound directly into the SWF file.
• Would allow the use of existing flash libraries such as PaperVision3d and Box2dFlash.

I was able to meet all of my requirements with mxmlc, the compiler that is the core of the Flex Builder SDK. I was initially uncertain about this, as I wanted to avoid developing with the Flex framework. Happily, I discovered that you can use mxmlc without needing a single line of XML. Gamedev.net has a good article on building flash games with mxmlc, but it uses XML files to set up the build. I’m going to discuss doing similar things while sticking to just actionscript. I’m not really saying anything new or unknown here, I just wanted to document what I figured out, and I hope that this might be useful to someone else.

Getting Started

Mxmlc is a command line tool, and I assume that the reader is comfortable with the dos or unix shell. If you using Windows, you might want to investigate FlashDevelop. Here is nice introduction to using FlashDevelop.

The first step is to get mxmlc. It’s part of the Flex SDK, which Adobe provides for free. Download it and unpack it somewhere reasonable. You might want to add the bin directory to your execution path so that you can use mxmlc without having include the full location of the command.

That’s all you need. Here is an example Actionscript file that you can now build.

package
{
  import flash.display.Sprite;
  import flash.text.TextField;
  import flash.text.TextFormat;
  import flash.text.TextFieldAutoSize;

  [SWF(backgroundColor="#ffffff", frameRate="24", width="400", height="224")]
  public class HelloFlash extends Sprite
  {
    public function HelloFlash():void
    {
      var textfield : TextField = new TextField();

      textfield.text = "Hello Flash!!";
      textfield.autoSize = TextFieldAutoSize.LEFT;
      textfield.setTextFormat(new TextFormat(null,48));
      textfield.x = stage.stageWidth / 2 - textfield.width / 2;
      textfield.y = stage.stageHeight / 2 - textfield.height / 2;

      addChild( textfield );
    }
  }
}

To compile it, we use a command like the following:

~/flex_sdk_3/bin/mxmlc HelloFlash.as

And here is the resulting swf:

The command line options for mxmlc are documented online. There is also detailed information available from the compiler itself, with the mxmlc –help command.

The key to being able build this program with mxmlc is the [SWF] compiler meta-data tag. It’s not properly documented on the Adobe site, but the oversight is corrected in the comments of the meta-data documentation page.

Here is an example of using an additional metadata tag to embed an image in the SWF.

package
{
  import flash.display.Sprite;
  import flash.display.Bitmap;
  import flash.display.StageQuality;

  [SWF(backgroundColor="#ffffff", frameRate="24", width="400", height="224")]
  public class HelloImage extends Sprite
  {   

    [Embed(source="cow.png")]
    private var Picture:Class;

    public function HelloImage():void
    {
      var pic:Bitmap = new Picture();

      pic.width *= 4;
      pic.height *= 4;

      pic.x = stage.stageWidth / 2 - pic.width / 2;
      pic.y = stage.stageHeight / 2 - pic.height / 2;

      addChild( pic );
    }
  }
}

If you’d like to read more, here is a blog entry detailing the use of the embed tag. Here is another blog entry, describing more advanced embed techniques.

Finally here is an example of using an external library. I’ve added a simple animation using the TweenLite library.

package
{
  import flash.display.Sprite;
  import flash.display.Bitmap;

  import flash.events.Event;
  import flash.events.MouseEvent;

  import gs.TweenLite;
  import gs.easing.*;

  [SWF(backgroundColor="#ffffff", frameRate="30", width="400", height="224")]
  public class HelloTween extends Sprite
  {   

    [Embed(source="cow.png")]
    private var Picture:Class;

    public function HelloTween():void
    {
      var pic:Bitmap = new Picture();
      var running:Boolean = false;

      pic.width *= 4;
      pic.height *= 4;

      pic.x = 10;
      pic.y = 10;

      var myTween:TweenLite;

      function tween1():void {
        myTween = TweenLite.to(pic, 2, {x:stage.stageWidth-10-pic.width,
                                        y:stage.stageHeight-10-pic.height,
                                        ease:Bounce.easeOut,
                                        onComplete:tween2});
      }

      function tween2():void {
        myTween = TweenLite.to(pic, 2, {x:10,
                                        y:10,
                                        ease:Bounce.easeOut,
                                        onComplete:
                                           function ():void {
                                             running = false;
                                           }});
      }

      function clickHandler(e:Event):void {
        if(! running) {
          tween1();
          running = true;
        }
      }

      stage.addEventListener(MouseEvent.CLICK, clickHandler);

      addChild( pic );
    }
  }
}

In order to compile this, you need to specify the location of the library as part of the source path.
mxmlc -compiler.source-path+=~/code/flash/TweenLiteAS3/ HelloTween.as

Click the cow to see the animation in action:

That’s all I have to show for now. I think once you know how to use it, mxmlc provides all the building blocks you need for full featured flash projects.

Here is a zip file bundling all of the code and files. mxmlcintro.zip Everything is public domain, except for the cow image, which belongs to Jay. You would have to ask his permission if you would like to use it.

Alternatives

Command line mxmlc might not be right for you. FlashDevelop, which I mentioned earlier, can serve as an IDE and GUI for mxmlc, making it a nice option for Windows users. Other compiler alternatives Include MTASC, which compiles Actionsscript 2 for the original Actionscript virtual machine, and HaXe which is a language with tools that will build for multiple targets, including AVM2 SWFs.