Programming Overview

Common concepts

All programming, whether it's ActionScript, JavaScript, C or PERL has many concepts in common. What varies between them is the syntax, or the way you communicate (by typing) these principles to the computer. If you've never programmed before, you must learn to master these concepts in order to succeed as an ActionScript developer. If you're familiar with a modern object oriented language like JavaScript, then it should be easy for you to pick up the syntax that rules ActionScript. Let's take a look at how you program in flash and then do a quick overview of key programming concepts.

Where do I put the code?

All code in Flash is typed into the ActionScript window (window:actions or F9). The window is divided into two parts, the toolbox and the Script Pane. The toolbox contains shortcuts to the most used commands. As you get better and better with programming, you will find it quicker to ignore the toolbox and write all your code by typing it directly into the script pane.

Expert Mode

In order to work in the most efficient manner, we need to change the way Flash normally works. To create programs you can enter a mode in which flash will make you double click on code on the left in order to do any programming. This is good for beginners, but this in this class, we'll learn to use expert mode because it is more efficient and flexible.

Before doing anything else, click on the triangle pop-up to the top right of the panel and choose EXPERT MODE. We'll be working on expert mode from now on. If you go to FILE:PREFERENCES, make sure that expert mode is the default.

In expert mode you can still use the toolbox on the left, but you can also type in code directly, so it's more flexible than normal mode.

Toolbox & Reference

Another useful tool in flash is the Reference window. It's very similar to the toolbox and provides us with a quick reference to ActionScript's commands. They are organized by category. If you look towards the bottom of the reference window, you'll see an index. Unlike the toolbox, the reference gives excellent explanations of what the commands do with examples. If you can't remember what a command does, look first here in the reference for a detailed explanation as well as examples of how to use the command.

Keyframe versus Movie Clip programming

In Flash, programming can be placed in one of three places; you can add programs to keyframes, you can attach ActionScript to symbols (Although this is no longer true of ActionScript 3); finally, you can create a program as an external document. Normally, you add code to the timeline when you want to affect the entire clip or the timeline and you put code on a symbol when you want to do something that affects the specific movie clip or button.

When you place code on a keyframe, a small letter "a" appears in that keyframe.

Any code attached directly in a keyframe will execute when the playhead reaches that keyframe. A typical piece of code you would type into a keyframe is the stop(); action. This action causes the current clip to stop. Keyframe scripts are also useful to set variables and to control what movie clips do on certain frames of your movies.

Putting your code inside movie clips involves understanding objects, so we'll cover them later.

Your first program

Now that you know about the panel and where to put scripts, let's do some coding. It is customary for every programming student to write a program that tells the computer to say "Hello World". Create a new document and click on the first keyframe. Click on the Script pane (or bring it up by hitting F9) and type in the following

trace ("Hello World");

Now run your flash movie. If you did everything right, when you run the movie you'll see the OUTPUT window show up with the words "Hello World" in it.

Tracing & the Output window

The trace method is one of your biggest friends as a programmer. It tells flash to print out a piece of information into a special window called the Output Window which appears when you preview your program . This informat. This is a great tool for debugging or fixing programs with problems in them.

We can learn a lot about programming from this simple statement. First, notice the semicolon at the end of the trace function. In many programming languages, semicolons are used to end statements. This is because extra whitespace (spaces, tabs or carriage returns) are ignored. So although you usually place one programming statement per line, you could actually place as many commands as you wanted all on a single line as long as they were separated with semicolons. Try something like this:

trace ("Hello World");
trace ("Some more text.");

Since whitespace is irrelevant like with HTML, you can format your statements with carriage returns or tabs to make them visually more appealing and easier to follow

The trace command is a function. Functions in programming perform an action. In this case, the trace function puts something in the output window. Functions can take parameters, or additional pieces of information that tell the function additional information. The trace command by itself is useless. You have to tell the trace command what to put on the output window. In our case "Hello World" is the parameter that we passed to the trace function.

If you make a mistake, you'll see Flash's other use of the output window. . .to display errors. Let's force an error to see what it looks like and how to read it. Delete the last quotation mark on the code so that it reads like this:

trace ("Hello World);

Whenever something goes awry flash uses the output window to give you as much information as it can about the error. Notice it first tells you the location of the error (scene 1, layer 1 frame 1 line 1) and then an error message that you can use to deal with the error. In this case String literal was not properly terminated.

Just what is a string literal. A string is a name for the kind of information Flash is dealing with in this case. When we feed something in quotes to a function, we're passing it a string. The literal part means that the information is not changeable, it cannot change. If you passed the trace function the number 2, that number would also be considered a literal, but it would be of type number instead of string. This brings us to the next subject of variables.

Variables

In addition to sending literals as parameters to functions, Flash can also store information in containers that can change over time. These containers are known as variables. Variables are containers for data that can be assigned different values. Variables make our programs more flexible and easy to update.

Let's re-write our code using variables.

myvariable=15; trace (myvariable);

If you run this program, you would get results similar to what you did before. This was a pretty simple switch. Variables can be changed whenever necessary. We'll see a more practical example soon enough.

Expressions

In addition to passing the function a parameter, we can make what gets passed a combination of statements or an expression. This allows for more powerful combinations. Let's modify our code like this:

myvariable=15; trace ("The value of the variable is"+ myvariable);

In this piece of code what we typed inside the trace function is the expression. It's a combination of two statements, a string literal and a variable. To combine the two, we used the plus sign (+).

Operands & Operators

Operators in programming are special characters and words that allow you to modify or combine data. So for example when we add two numbers...say 2+2. The plus sign is the operator. The operand is the actual data. Both two's in this case are the operands. In the case of our example above the string "The value of the variable is" and the variable myvariable are the operands. The operator is the plus sign. The plus sign has dual duty in flash. It acts as the addition operator as well as the concatenation operator. Concatenation means combining two strings or a string and a number together. Flash knows that adding a number to a string doesn't make sense in this case and just puts the two together.

Conditionals

Conditionals help us add logic to our programs. Conditionals help our programs do things depending on certain conditions. Here is an example of a conditional statement. Type this into your actions window.

x=4; if (x<5)   {     trace("This number is lower than 5");   }

The output window will look like this:

Try changing the value of the variable x from 4 to something larger than 4 and you'll see the message does not show up. This is because the conditional's execution prevents it from outputting the message. Notice the use of curly brackets above. Curly brackets group a series of statements in to a set. In the case above, however many statements we place within the curly brackets will be executed only if the condition is true.

We can make a more complex conditional by combining the if statement with an else statement.

x=4; if (x<5)   {     trace("This number is lower than 5");   } else   {     trace("this number is greater than or equal to 5")   }

Loops

Loops allow you to handle repetitive tasks. Say you wanted to count to the number 20. You could acompish this task by using repetitive trace() statements or you could write something like this.

u = 1; while (u <= 20)   {     trace ("number "+u);     u++;   }

Notice the u++; statement. This is a shortcut of saying x=x+1. There are several other shortcuts that you can use in ActionScript.

We'll be covering all of these concepts in detail as we continue in class. Next, we'll take a look at Flash's object metaphor and how it applies to movie clips.

blog comments powered by Disqus