Flash ActionScript has come a long way since Flash 5. However, never has the leap been as great as with the release of Flash MX 2004.

This is the first in an open-ended series of articles explaining ActionScript 2.0 right from the beginning. In this series, I will be presenting concepts and simple tutorials to help you understand this powerful new programming environment.

What's New with ActionScript 2.0
First of all, let me begin by saying that ActionScript 1.0 will work in Flash MX 2004. However, I don't recommend this. At some point, the practices of ActionScript 1.0 will probably no longer be recognized. As we progress through this series you will see why.

ActionScript 2.0 is a full-fledged object-oriented program, or OOP, very close to the Java programming language. This means that it does things very differently from ActionScript 1.0 and that your coding must be more precise and efficient. As anyone who has programmed in Java will tell you, it is very unforgiving. But, the end result is better running programs. The real benefit, however, is code that will run up to 7 times faster than code in AS 1.0.

One of the first differences you will encounter is that AS 2.0 is case sensitive. As an example, if you create a variable called:

firstName

it will be different from:

  FirstName

  Because of this, most OOP programmers have adopted the following naming standards:

• No spaces
• Begin with a letter and NOT a number
• Everything is in lower case except for mid-word capitalization (as in firstName above).

A Flash statement should end with a semicolon. In programming parlance this is called the line terminator. Once again, this is in keeping with OOP standards.

Data Typing
A data type tells a variable what it can and cannot do. For instance, you could not take two variables of type String and try to total them. The variable type String simply does not know how to perform arithmetic operations.

AS 1.0 did not require data typing. You could do something like this:

myAge = 23;

Flash would just make assumptions and plug in what it thought was the correct data type. This often led to data mismatches and error-prone code. However, in AS 2.0 you would need to use the following syntax:

var myAge:Number = 23;

Notice that I began with the keyword var to indicate that I was declaring a variable. I then named the variable using the naming conventions discussed above; finally, I typed a colon and the data type (Note: data types begin with a capital letter. There is a reason for this, which we will learn later).

While this may sound like an added nuisance, strict data typing will give you more efficient running code with fewer possibilities for error.

The Development Environment
Begin by opening the Actions Panel. I have sometimes also heard it referred to as the ActionScript Editor.

The upper left corner is the Action toolbox. This is a quick way to harness many of the components available to you in ActionScript. It is organized into categories to ease locating an element. We will discuss this more as we move along.

The lower left corner is the Script Navigator. This will assist you in finding where your various scripts are located. As a result, you can get to your scripts quickly and easily.

Right above the main editing area is the Script Pane Toolbar. This contains some tools that can be used to assist you in creating and editing scripts. As we progress through these articles, you will become very familiar with this panel.

Object-Oriented Programming Concepts
Before we begin, there are some basic concepts that need to be understood and that are common to all OOP programs.

The basic unit of programming is called the class. Basically, a class is a file that contains code that does a specialized job. In Flash, the class file has the file extension of .as (In Flash, this is created using the File > New > ActionScript File menu option).

In most cases, you do not use the class directly. You need to copy it into memory where it is called an object (thus, object-oriented programming). We call this process instantiation (we are creating an instance of the class).

Since the object is located somewhere in memory, we need a way to find and reference it. The object is referenced by using a special variable called the Instance Name (Note: most object-oriented programs call this the object reference).

As an example, let's say we have a class file called Date (by tradition, the name of the class file begins with a capital letter. This is why the data types are named that way). We would create an instance of it as follows:

var thisDate:Date = new Date( );

If we dissected this line, var means that we are creating a new variable. The variable name, thisDate, will be the variable or instance name.

Here is where things get a bit interesting. Earlier, I said that the data type tells the variable what it can or cannot do. Since the class file will give the instance name its marching orders (the class file we will be using, in this case Date, follows the variable name and a colon), the class file is now the data type. In OOP terms, we sometimes refer to the class as the user-defined name.

The keyword new instructs ActionScript to create the object. The final part, Date( ), refers to something called the constructor, which we will discuss at a future point. Place any parameters the object may need to do its job inside of the parenthesis.

As we progress through these articles, we will revisit the concept of creating objects many times.

Now we need to look at what the object contains and how it helps us.

If you examine an existing project, the objects (or the class files the objects are based upon) are the nouns of that project. As an example, suppose that you wanted to build a Flash project that would allow users to design their own cars. Some of the objects would be tires, windows, steering wheel, etc.

Each of the objects contains three basic components: properties, methods, and events.

For instance, the seat objects in the car could have the properties of color, material, etc. So we can think of the properties as the adjectives of the object. These would be the variables inside of the class file.

The process of the seats adjusting would be the methods. Again, using the parts of speech analogy, the methods would be the verbs. These are the methods in the class file.

Finally, what makes the seats adjust? In many cars it is pressing a button or moving a lever. This would be the event causing the action to happen and would be handled by an Event Listener. The Listener is a bit of code that listens for the event to happen (such as a mouse click, pressing a key, data being loaded, etc.) and then triggers the correct code to run (Event Handler).

Let's assume we created a class file called AutoSeats that had two properties: material and color. We would instantiate it as follows:

var mySeats:AutoSeats = new AutoSeats (leather, red);

We could create as many AutoSeat objects as we need.

Later on, if we needed to obtain the information from the object, we would use something that looks like this:

 mySeats.property;

  In OOP, we call this dot syntax. On the left side of the dot is the name of the object and on the right side of the dot is the property or method you need to call.

Making Our Lives Simpler
How does all of this help make our lives simpler?

OOP makes our lives as programmers simpler in several ways. First of all, class files are reusable. As an example, suppose you have a class file that converts any number into currency format. This class file can be used by any project at any time. You don't need to reinvent the wheel each time you need to do something. As you progress, you will build up libraries of class files to do a variety of jobs.

Second, most object-oriented development environments come with a number of class files built in and ready to go. As an example, if you look in the Action Toolbox you will see that each category is expandable (see Figure 2).

  If you expand the built-in classes category, drill down to Core, then drill down further to String, you can see the properties and methods associated with the String Class. If you look around, you will see classes in many other categories. As we progress through these articles, we will be examining many of these various classes.

Third, there are class files available from both commercial and noncommercial sources. A quick perusal of the Macromedia Developer's Exchange will give you many examples of what is available. A particular favorite of mine is www.flashcomponents.com.

For a fee of about $100 a year, you have thousands of components available for download. (A component is a class file associated with the interface. We will be discussing them in greater detail in a future article.)

Flash MX 2004 goes one step further to make our lives easier. The user interface classes, or components, can be instantiated without programming by simply dragging them onto the stage and giving them a name. We can see this by returning to the stage and opening the Components Panel (Flash Professional contains additional components for handling data).

For example, suppose we drag the ComboBox component onto the stage. In the property inspector, give it an Instance Name (using the naming standards discussed earlier).

New to MX 2004, the property inspector has a tab called Parameters. If you select that and double click on Labels, you will see what Figure 3 is showing. Just type in a list of some sort, pressing the + key after each entry. After clicking OK, run a test of the movie. When you click on the drop arrow for the combobox, it should open with the values you entered as shown in Figure 4.

This serves to illustrate everything we just discussed and to show how easily Flash makes things run.

The ComboBox class comes built into Flash and ready to run. If it didn't, you would have to build it from scratch. It has a property called Fields that we were able to populate (an Array) using the property inspector. The drop arrow is a button and an Event Listener triggers the method to expand the box and display the labels.

If Flash did not have the built-in capabilities, you would have had to go into ActionScript and type something like this:

var comboList:ComboBox = new ComboBox(blue, red, black)

The result is that you have now been saved from programming several thousand lines of code. This saves you an endless amount of time and allows you to turn projects around much quicker.

Let's try a very simple ActionScript that interacts with a UI component.

Open a new Flash document and create two layers called component and script.

On the component layer, drag a TextArea component to the stage and give it an Instance Name of taMessage (Note: as you go through succeeding articles, you will see that giving an Instance Name an identifying preface will have some unexpected benefits. In this case "ta" means TextArea).

It is always advisable to place scripts in their own layers or, as you will see, in their own files. Script placement can be a complicated subject and will be discussed in subsequent articles.

Go to the script layer and open the Actions panel. Type in the following line of script.

taMessage.text = "This is my first ActionScript";

We used dot notation to access the text property of the TextArea.

Run the movie. You should see your text in the TextArea of your movie. While this is a very simple example, I am sure you can see how it could be applied to more complex situations.

Take a look at the Script Navigator. You should see two sets of information in it as shown in Figure 5.

The upper section shows you where you are now (current selection). The bottom part shows the various locations where script is located. This makes it much easier to find code that may be in various locations.

Let's try one last simple example using the exercise we just tried. With the existing project open, select File > New > ActionScript File.

Cut the line of code from the script layer of our project and paste it into the new ActionScript file. Save the file with a name, say Test.as (ActionScript files have an extension of .as).

  In the script layer where the code was originally located, type the following code:

#Include Test.as

Note that there is no colon at the end. Run the movie now. It should work in exactly the same way. We can now see that it is easy to put our programming code in separate class files and then just include them into our movies. As a result, we can use this code anywhere that we need it. While it is only one line of code, imagine if it were 100 or 1,000, lines. It is not hard to see how this could make our programming lives a lot easier.

Summary
Next month, we'll look at programming structures such as loops and decision statements. Just as a note, we will be referring to concepts discussed in this article.

• Taking Action

• Figure 1
• Figure 2
• Figure 3
• Figure 4
• Figure 5