ActionScript 3 tutorials

Draft

Actionscript 3, the programming language shared by Flash and Flex

This pages is for actionscript concepts that apply to any ActionScript 3.0 authoring environment and any runtime that supports ActionScript 3.0. For the moment, two authoring environment are covered in this wiki, Adobe Flash CS3 and Adobe Flex. The focus is on programming concepts rather than tool-specific topics.

Disclaimer

We write these pages as (recent) learners of the language. We are not experts.

Overview

ActionScript 3.0 is an object-oriented language for creating applications and media-content that can then be played back in Flash client runtimes (typically the Adobe Flash Player, more recently the AIR framework).

For those already familiar with a Flash authoring environment, it needs to be mentioned that quite important changes have been introduced in the ActionScript language between version 2 and version 3. Version 2 was somehow a scripting language targeted at unexperienced programmers. Version 3 has all characteristics of any serious programming language.

This may make it slightly more difficult for complete beginners to jump in. These changes, however, don't prevent a person who would have never programmed before to learn the language. This is in part because the authoring environment let you define content and basic actions without having to care about code. Progressive learning can take place. The benefits of the changes introduced in version 3 far outweight any possible cost.

Two main aspects of the language:

• AS3 is a strongly typed language. This means that whenever you use a variable, you must provide information about the type of data that this variable is expected to hold. If you want to use a counter and keep track of the counter progress in a variable, the type of data to be held in this variable will be of integer type (non negative numbers). To define that counter variable in AS3, you will type something like

var counter:int = 0;

• AS3 is an object oriented language. This means that you have the possibility to split your code into specialized classes rather than write a single program of 3,000 lines of code. This contributes to make the code easier to maintain and easier to re-use. You can then design specialized components that will be re-used across different applications. A typical example of such a component would be a calendar object that pops up to let you specify a date.

The problem then, for a total newbie, is that the use of classes is not optional. *Everything* needs to be organized into classes. You must have at least one class in your program. This can appear quite obscure at first. But because the class definition always uses the same format, that's simply a question of getting used to add these extra lines in your code. Initially you will write short programs that don't justify the use of more than a single class. Don't worry if you don't understand that class concept yet. What matters is that you start going, start writing a bit of code and become able to play around. We will come back on the concept of class soon enough.

// The class definition
public class Game {
   // instance variable of type integer
   var score:int

  // The constructor method
   public function Game () {
         // code that initialize Game instances
   }
   
  // instance method
   public function updateScore ():void {
       // code to execute when updateScore () is invoked
   }

With the structure in class comes another concept, the one of package. A package is a conceptual container. It is used to group classes that operate together within a physical region of their own. Its main function is to help organize the code for large applications. Another complex concept to grasp for a total beginner. The recommendation here is the same as for classes. In a first time, simply use the syntax without worrying too much about what it is for. Your are likely to write programs that stand within a single package for a few weeks, so don't worry about not understanding it. We will take the time to explain this in more details, as soon as you are up to it.

EcmaScript Specification

ActionScript 3.0 is based on the EcmaScript 4th edition language specification. This specification can be viewed on the wiki of the Ecmascript Organisation. That specification also forms the chore of the Javascript 2.0 language contributed by the Mozilla foundation (see tamarin project at Mozilla.org).

Enough technicalities, let's program!

I don't know for you. I tend to learn best by doing. What gets me through complex learning is the desire to realize things. Of course, it is very important to take the time to understand complex notions thoroughly. However if you are too much worried about understanding every single aspect of the programming language before writing your first line of code, chances are high that you will give up before reaching that point. If you reach that point, the risk is that your head will be so full of unfamiliar concepts that you will completely unsure about what you should be doing next, what option to take.

Something that I find to work for me is to take a tutorial or book about the language, read it through without trying to understand everything. I do my best to understand the introductory paragraph of each chapter and to browse through the code trying to grasp the gist of how things get done. Then I go back to the beginning and start coding very simple examples. I make sure that I understand them well. I try to produce as many simple variants as I can of these simple examples. I add a new element, then a new one, etc. Once I become familiar enough with the very basic I try to come up with an idea of a little program that I could write that would make use of many of these basic elements. I write the program... I don't give up before I have finished writing it. Even if it takes me 2 or 3 days, I persevere. Once I am okay with writing an original program, I try and come up of ideas of various types of games or activities that I would like to become able to realize. I evaluate which one I can write successfully with what I already know. I evaluate what new concepts I need to master in order to write that program and the likelihood that I can get to learn these concepts in a relatively short amount of time. I go for the most realistic options.

In this view, what we will do next is

1. provide a simple program that is guaranteed to work (copy/paste/run).
2. invite you to try and write variants
3. introduce a small number of examples that each introduce a specific technique
4. come up with suggestions of mini-games or activities that you could write that use these techniques
5. take you through a complete example of such a mini-game.

Compiling a first program

There are potentially three ways to compile your first actionscript program:

1. Compiling with the Flash CS3 Authoring tool
2. Compiling with Flex Builder
3. Compiling with the binary mxmlc included in the Flex framework.

Here, we will describe how to compile with mxmlc. This assumes that your Flex framework is properly installed. For information on how to install it on the Adobe Flex page.

Open a text editor, a simple one that will save the text as it appears on the screen, without any formatting. In that new text file, copy the following code:

 package  {

   import flash.display.Sprite;

   public class DrawCircle extends Sprite {

       function DrawCircle():void {

         var circle:Sprite = new Sprite();
         circle.graphics.beginFill(0xFF794B);
         circle.graphics.drawCircle(50, 50, 30);
         circle.graphics.endFill();
         addChild(circle);

       }
    }
 }

Save the file as text and give it the name of "DrawCircle.as". Take good note of the directory in which you save that file. Preferably, put it in a folder quite high up in the hierarchy. We will assume that the file is stored somewhere defined by "\path\to\file\".

On a mac

1. Open a terminal window. Terminal is an application like any other. To find it, go to the Applications -> Utilities. You should see Terminal.app among the files.
2. Double click on the application to open it.
3. At the prompt, type:

 cd \path\to\file\
 mxmlc DrawCircle.as

On a PC

1. From the Windows start menu, open a command prompt by choosing Start > All Programs > Accessories > Command Prompt.
2. At the command prompt, change to the C:\Flex SDK 2\bin directory then execute the mxmlc executable on your actionscript file.

 cd C:\Flex SDK 2\bin
 mxmlc C:\path\to\file\DrawCircle.as

The mxmlc executable will compile the program and generate a .swf file name DrawCircle.swf. To run the file, open it in the Flash Player on your desktop or in a web browser that has Flash Player installed. Note that Flash Player 9 needs to be installed to view swf files generated by the Flex compiler.

Related pages

• Flash ActionScript 3 overview
• ActionScript 3 event handling tutorial
• ActionScript 3 interactive objects tutorial