This is an introduction to programming in ActionScript for people who have no experience of Adobe Flash. It assumes you have some programming experience in JavaScript, Java or a similar object oriented and event driven language.
First up let’s get our terms straight. Adobe Flash (previously Macromedia Flash) is the platform. Flash Player is the free bit you install on your computer that lets you view Flash SWF files. Flash Professional is the expensive vector animation tool you can use to create Flash content, AIR applications and now iPhone apps too using Adobe Packager.
ActionScript 3 is a full-featured object oriented programming language
Just like web developers can use JavaScript to add behaviour to web pages, Flash animators can use ActionScript to add interactivity to their animations. ActionScript 1 and 2 were a bit weak but ActionScript 3 is a full-featured object oriented programming language which can be compiled straight to SWF files for embedding in web pages. Adobe Flex is a free, open source SDK which includes an ActionScript compiler and a bunch of libraries. Using Flex you can create Flash content from code, without needing to think like an animator and you also get a bunch of useful classes and interface widgets. Just as with Flash Professional, Flex projects can also be packaged up as AIR executables or iPhone apps.
Getting the tools
The official Flex development environment is called Flash Builder (previously Flex Builder). It’s not free and it’s based on Eclipse IDE which makes it bloated, slow and complicated. Fortunately, for Windows users at least, there’s another way.
FlashDevelop is an open source ActionScript editor which integrates with the Flex SDK. Go ahead and download FlashDevelop if you haven’t already. The installer has an option to download Flex SDK which you will need too.
Your first ActionScript program
Fire up FlashDevelop and create a new project. Select AS3 Project, give it a name and choose somewhere sensible to save it. You’ll probably want to tick Create directory for project too.
Click the Play arrow icon on the toolbar (or press F5) to test your empty project and make sure it’s all set up right. After a few seconds you should get an empty window with Adobe Flash Player in the title bar. If you don’t, try the FlashDevelop wiki for help.
On the right hand side is the project view which shows the files that have been created for you. Open Main.as in the src folder. Add a line below the entry point:
trace('Hello World!');
Run your project again (F5) and this time keep an eye on the Output pane in FlashDevelop.
Congratulations, you’ve just written your first line of ActionScript!
But that’s cheating, right? Outputting stuff to the console is no fun. To write some text on the Flash stage instead, replace the line above with this code:
var text:TextField = new TextField(); text.text = 'Hello World!'; text.x = 200; text.textColor = 0xff0000; addChild(text);
We also need to import the TextField class so add this at the top of the file:
import flash.text.TextField;
Your Main.as3 file should now contain the following:
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.text.TextField;
public class Main extends Sprite
{
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
var text:TextField = new TextField();
text.text = 'Hello World!';
text.x = 200;
text.textColor = 0xff0000;
addChild(text);
}
}
}
And when you run the project, you should see something like this:
ActionScript 3 language basics
Let’s back up an analyse what’s going on.
Practically everything is an object
ActionScript 3 is fully object oriented meaning that practically everything is an object. Strings are objects, functions are objects, all user interface components are objects and your ActionScript application is also an object. Each class is defined in its own .as3 file using the name of the class as the file name. So the Foo class would be defined in Foo.as3.
Each AS3 application has one main class which gets instantiated first by the Flash Player. In this case it’s called Main but it doesn’t have to be. In FlashDevelop you set the main class by right clicking on the file in the project view and selecting Always compile. Only one file can be set as Always compile at any time.
Every AS3 file starts with a package declaration. Packages are a way to avoid naming conflicts. For example Flex includes two classes called Button, one in the package mx.controls and one in spark.components. Packages mean they can be referred to unambiguously as mx.controls.Button or spark.components.Button. In this case our Main class is in the top level package which doesn’t have a name. Confusingly, the term namespace is used to refer to something completely different in ActionScript 3.
Next we import any classes from external packages. One of the great features of FlashDevelop is that code autocompleter will automatically add import statements to import the classes that you use in your file.
The class declaration should be familiar to anyone who’s programmed in PHP or Java before. Worth noting is that all AS3 projects extend the Sprite object and therefore inherit its properties. More on that later.
The Main() method is the class constructor because it has the same name as the class. :void defines the return value for the method, in this case nothing. The method checks if the stage property (i.e. this.stage, inherited from Sprite) has been initialised. If so it calls the init() method. If not it sets an event listener to call the init() method once the stage has been set (no pun intended).
AS3 is strongly typed meaning that every variable must have a data type declared. You can’t assign a Button to a variable of type String, for instance. Defining the variable type is done with the colon syntax we saw above.
private function init(e:Event = null):void
Declaring the init() method as private means that it can only be accessed by other methods in this class. It accepts one optional argument called e of type Event and it returns nothing. If the argument is not supplied, the e variable will be set to the value null.
We remove the event listener (if any) and then we get to the interesting bit.
var text:TextField = new TextField();
This declares a variable called text of type TextField and assigns a new instance of a TextField to it.
Next we set a few properties of the object. The text property is the important one. Without it the TextField would be blank and invisible. The x property sets the object’s horizontal offset in pixels from its container’s left edge. The textColor property sets the text colour to hexadecimal #FF0000, or red.
Finally, we call the addChild() method of the Main class (which extends Sprite, remember?) to place the TextField object on the application window. The Sprite automatically uses the x (and y) properties of the object to know where to place it.
Flex
So far we’ve only used ActionScript 3 packages and classes. While it is theoretically possible to use Flex components in a pure AS3 project, it would require a bunch of complicated initialisation which the Flex framework gives you for free.
It is theoretically possible to use Flex components in pure AS3
Create a new Flex 4 project. This time you’ll notice the mail file is called Main.mxml. MXML is the language used to define and layout Flex interface components. Let’s try and replicate our Hello World example from above.
Adding user interface components to a Flex application is just a matter of adding tags to the MXML file. Knowing which tags to add, however, can be a bit tricky. We can’t use the same TextField class because that’s a Flash component. The equivalent Flex component is called Label.
<s:Label text="Hello World" color="0xff0000" x="300"></s:Label>
Easy!
ActionScript components
The Flex SDK provides a huge and bewildering array of ready-made classes called components. Many of the the classes we’ve seen already are ActionScript components: Sprite, TextField, Label. Components are just ready-made bits of Flash/ActionScript that you can reuse in your projects without having to reinvent the wheel each time.
