Create a Simple and Pure ActionScript 3 Application

I am not only new to Flash and Flex development but also ActionScript. But I am pretty familiar with javascript and started to learn Flex and Actionscript development recently for a project. And most of our code is based on Flex mxml and Actionscript 3 classes. Here is what I read from Adobe regarding Flex applications:

Flex application are built using MXML and ActionScript. MXML is an XML markup language that you use to lay out user interface components MXML application. ActionScript is the programming language for the Adobe® Flash® Player and Adobe® AIR™run-time environments. It enables interactivity, data handling, and much more in Flash, Flex, and AIR content and applications.

But I heard/read that we could write a pure actionscript based flex application, so I tried to do a search on google and yahoo, disappointedly, I was unable to find an article/document to talk about it. After reading Flex Programming ActionScript 3 (a PDF programming guide), I could not find a good hint to do that either. But I finally managed to figure out that it's a very simple process. What you need to make an actionscript based flash application is that there is a main class which is either an instance of Sprite or MovieClip. Here I'd like write down what I learned in hoping it will help others too, especially those newbies like me.

First, make sure you have Flex 3 SDK installed, if you haven't done so, please grab it from http://www.adobe.com. This is pretty much what you need to write a simple application like "Hello, world" plus so simple drawing. If you really need an IDE to help you on writing code, then you can have Flex Builder but it's very costly though. However, you can get a trial copy from the official website for 60 days free trial period. You may also twist Eclipse IDE to do the work, but you need to google it up yourself.

Ok, let's start the journey.

Now, create a file called hello.as using your favorite editor. You can give your actionscript file any name but you need to change the following code accordingly since the compiler requires you to have a classname same as the filename.

And put the following code in hello.as:

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

public class hello extends Sprite{
public function hello():void {
var w:int = 100;
var h:int = 50;
var x:int = 50;
var y:int = 5;
var g:Graphics = this.graphics;
g.lineStyle(1, 0xff0000, 0.6);

g.moveTo(x, y);
g.lineTo(x+w, y);
g.lineTo(x+w, y+h);
g.lineTo(x, y+h);
g.lineTo(x, y);

var tf:TextField = new TextField();
var fmt:TextFormat = new TextFormat();

fmt.color = 0xFF0000;
fmt.size = 18;
tf.defaultTextFormat = fmt;
tf.x = 150;
tf.y = 100;
tf.height = 150;
tf.width = 150;
tf.htmlText = "< h2>Hello,world!</h2>";

this.addChild(tf);
}
}
}

Next, let's compile it using mxmlc from commandline. Note you need to add your flex/bin to your path , otherwise your shell won't be able to find it.Issue the following and press enter to let it compile:

mxmlc hello.as

There are many mxmlc options you can use, for example, -o to specify a different SWF output file. -debug to generate a movie that is suitable for debugging etc. I didn't use any though. You can use as many as you wish ;-)

And you should now see a SWF file called hello.swf, you can start it up by double click it or type hello.swf at commandline and press enterThat's it.

You can explore more once you get started with this little class