Introducing ActionScript

A scripting language extends the function of a computer program by allowing users to control the main program's behavior in detailed and powerful ways. Scripting differs from programming in that it depends upon a host program--in our case the application called Macromedia Flash MX 2004, or the Flash Player plugin for Web browsers.

Generally speaking, scripts are much less complex than programs. This means you can do very impressive things in a scripting language like ActionScript without having to master the enormous detail required for true programming. Thus you can stay focused on creativity and content and still gain very powerful control over your tools.

ActionScript, the native scripting environment of Flash since version 3, is very closely based on JavaScript, the scripting language created by Netscape Communications for its Navigator browser. Both languages belong to a family of scripting languages called ECMAScript, named for the European Community, which proposed the standards that stabilized these originally proprietary languages.

As Netscape's name JavaScript suggests, ECMAScript languages have at least a tenuous relationship to the Java programming language developed by Sun Microsystems. Both JavaScript and Java base their syntax on the programming language called C, and especially its object-oriented descendant, C++.

So learning an EMCAScript language like ActionScript will teach you to do certain things that programmers do. While you won't become a full-fledged application programmer yourself, you will be much better able to understand what these people do and how they approach problems.

The ActionScript language was substantially revised with the release of Flash MX 2004, and is now known as ActionScript 2. It contains much better support for object orientation and multi-user operations. By learning ActionScript, you will gain access to a very useful tool for software development, prototyping, and experimentation.

Basic scripts occur in three contexts: directly executable statements, event handlers, and functions.

In visual, timeline-based workflow, developers learn to attach a stop() action to a keyframe in order to keep one scene from running into another. This is a case of direct execution--the instructions in the script are carried out as soon as the Flash "playback head" enters the frame.

Another common technique involves placing a gotoAndPlay() command within the scripts for a Flash button. In this case we write the ActionScript command within an event handler called on(release). Written this way, the instruction is executed only when a particular event takes place in the user interface--the mouse button is released.

Quite often scripting commands are placed within a function. A function is a wrapper or container that houses instructions which can be brought flexibly into play. All functions have this form:

The word "function" indicates that you intend to define a function. The functionName can be anything you like, provided you don't use a word that is already used to name something else either in ActionScript or in your project. The parentheses that follow the function name may contain one or more parameters, which are variables used by the function. Some functions take no parameters, in which case the parentheses--always required--remain empty.

Here's an example of an actual function:

function moveRight(){
	this._x ++;
}

When executed, this function causes the object to which it is attached--almost certainly a MovieClip--to shift its horizontal position one pixel to the right. The term "this" refers to whatever Movie Clip contains the function.

Unlike directly-executed instructions, functions must be invoked. Functions are invoked by name, for instance:

moveRight();

The line that invokes a function may either be directly executed (on frame entry) or it may itself be contained within a handler. For instance:

onClipEvent(enterFrame){
	moveRight();
}

If the Movie Clip in question has moveRight() defined somewhere within it, the handler above will execute that function every time the frame containing the handler is played. If the MovieClip has only a single frame and the movie runs at the default 12 frames per second, then moveRight() executes 12 times per second, scooting the Movie Clip 12 frames rightward with each tick of the clock.

It may occur to you that the same thing would occur if the instructions within moveRight() were simply set up for direct execution within the single frame of the movie. Ordinarily we'd use the enterFrame strategy only if we want moveRight() also to be invoked under other circumstances: by another Movie Clip, perhaps, or another event handler.

In the example above we manipulate a property of whatever Movie Clip contains the moveRight() script. In this case the property is _x, or horizontal position. We refer to the property thus:

this._x

A person would read that last line aloud as "this-dot-underscore-x," and so the syntax which this example demonstrates is called dot notation. Dot notation expresses relationships among objects such that the item on the right of the dot belongs to the item on the left. Dot notation can also refer to fairly complicated chains of ownership:

_root.secondClip.leftSide._width

In this example the terms "secondClip" and "leftSide" are assumed to be names given to Movie Clips. The term _root has a particular meaning to which we'll come. The term _width indicates a property of the Movie Clip "leftSide," which is part of the larger Movie Clip "secondClip."

Properties represent a special kind of variable. As in other scripting and programming languages, ActionScript variables are virtual containers that store particular values. These values can be assigned, interrogated, and modified.

Variables come in two types. Local variables contain values that can only be used by the script in which they occur. Global variables can be inspected and modified by any script within your movie. In Flash MX there are two ways to make a variable global. The first (which also works in previous versions of ActionScript) is to precede the variable name in dot notation with _root. This attaches the variable to the _root object, which is the most general structural level of your movie.

Flash MX adds a second strategy: introduce your variable at the start of your movie (a process called initialization) with the prefix _global. There's a subtle difference in the two usages. If you attach your variable to the root, you have to invoke the variable every time you use it as "_root.variableName". If you initialize the variable as global, then you can simply refer to the variable by name.

To place a value within a variable, use the assignment operator = (a single equal sign). So the statement:

n = 3;

means "let n equal 3" or "assign the value 3 to the variable n."

Note that the meaning of the single equal sign differs from the meaning it has in mathematics or logic, where "n=3" means that n is equal to 3, not that n becomes equal to 3.

This distinction may not make much sense until you think about conditions. A conditional statement, in scripting as well as in ordinary language, is an if/then construction. If the condition is met, then the consequence occurs. IF conditions are basic building blocks for most scripts and programs.

However, when we need to determine if one thing equals another within a conditional statement, we can't use the single equal sign, since it is used to assign a value. We use a double equal sign instead:

if(n==3) gotoAndPlay("Scene 2",47);

This statement instructs Flash to access a particular scene and frame if the variable n contains the value 3. The statement is read, "if n is 3, then gotoAndPlay scene 2, frame 47." Note that the term "then" is represented by the space that follows "if(n==3)". All languages derived from C use this convention.

When more than one consequence follows from a single condition we use a slightly more complicated version of the conditional statement:

if(n==3){
	scenesPlayed = 2;
	gotoAndPlay("Scene 2",47);
	}

The curly braces {} indicate a compound consequence. Both statements within the braces depend on the initial condition. Note the use of the single equal sign as an assignment operator in the first line within the braces.

Suppose we want something to happen only if two conditions are met. In that case we'd use a compound conditional clause like this:

if(n==3 && q==47){
	scenesPlayed = 2;
	gotoAndPlay("Scene 2",47);
	}

The double ampersand (&&) is a logical AND operator that chains two conditions together. You may also use a logical OR, which is represented by two vertical lines or "pipes" (||). In an OR situation the consequence occurs if either condition is met.

Finally suppose you want to specify one consequence if a condition is true and a second consequence if it is false. The If/Else condition serves this purpose:

if(n==3){
	gotoAndPlay("Scene 2",47);
	}
else{
	gotoAndPlay(100);
	}

The code in this example takes us to Scene 2, frame 47 if n evaluates to 3. If n has any other value, we move instead to frame 100 of the current scene.

Along with conditions, scripts and programs often depend heavily on loops. A loop is a construction that tells a program to execute certain instructions a specified number of times, or under specified conditions. The most common form is the For loop. Here is an example of such a structure:

for(i=1; i<6; i++){
	outputField += i + "<br>";
	}

This loop takes the value of its index variable i five times and places that value on a separate line in a text field called outputField (an arbitrary name). The HTML "<br>" is appended in order to place the values on separate lines. The result looks like this:

1
2
3
4
5

The syntax of the For loop in ActionScript is exactly the same as in C, PERL, Java, and JavaScript. In the initial parenthesis three statements occur. The first sets a starting value for the index variable. This value may be any number you like. The second statement sets a limit for the index variable. Limiting to numbers less than 6 means the loop will stop when i reaches 5. The third statement indicates how the loop is incremented. The instruction "i++" means that the variable i increases in value by 1 with each repetition of the loop. The increment may also be varied. Writing "i+=2" would cause the index to increase by 2 each time.

This introduction only begins to scratch the surface of ActionScript. We'll encounter a number of other instructions and control structures as we go further.

Using just the concepts you've read about here, however, you should be able to get started with ActionScript right away.