Welcome to the first in a prospective series of Flash ActionScript 3 tutorials. As you might have gleaned right now, ActionScript 3 is used in the club as a language that is fairly easy for the beginner to learn, but doesn’t skimp out on the serious coding that other languages possess, and has a fair amount of depth if you’re willing to take the plunge.
This first tutorial focuses on the programming basics. We will approach all tutorials from two sides. The first is applicable to you if you are running Flash Professional. I am using the CS4 version. I’ll assume that you know the basics of the program (as in, the photo-editor-like interface part of it). The second part is for you if you are running a code editor and then compiling your code with the Flex SDK (basically, if you’re not using a timeline). I will be using FlashDevelop as my code editor. It is open source – search online for it. You should also have the Flex SDK downloaded. Each tutorial will have these two parts. Part two assumes you have a bit more familiarity with programming, and will be a little less chatty. I recommend making sure you know the material in Part 1 – in all tutorials – before moving to Part 2.
At this time, if you already know the basics of programming (variables, loops, functions in any language), feel free to skip this tutorial entirely unless you want a briefing on how this stuff works in ActionScript.
If you’re still here, off we go!
Open a blank AS3 Flash file at the welcome screen. Open the Actions panel if it isn’t open already. You can do this by going to Window > Actions. The actions panel is where you put all your code.
Comments – Comments are lines in your code that are ignored when your program is actually run. They are usually used to summarize what is happening in the code for your reference. While I won’t be writing any here, it is a very good idea to learn comments. You write single line comments as follows:
// This is a comment
If you write that comment in the actions panel, it should turn light grey. That means it is a comment. But what if you want to write multiple lines of comments? Open the comment with /*, and close it with */, like so:
/* Hello world,
this is a comment */
Variables – Let’s instantiate some variables now. Variables are used to stand for many things. In AS3, they can be text, numbers, sounds, and a whole lot more. In the case of sound, it’s better to call it an object instead of a variable. For now, we’ll focus on the basic text string. Plug these two lines into the actions panel:
var sample:String = “Hello World”;
trace(sample);
Congrats, you just created your first program! Keywords in Flash are in blue, while strings are in green. ‘var’ signifies that we are declaring a variable. ‘sample’ is the name we gave it, and we said it would be a text string. Note that specifying the variable type is optional, but recommended. Then we assigned it the value “Hello World”. The next line simply outputs the value of sample to the output window. If you go to Control > Test Movie, you can see what I mean. If you got an error, make sure your code is typed correctly.
Now try adding these two lines:
sample = “Well hi there!”;
trace(sample);
We just changed the value of sample, and then traced that value just as we did the first one. Once again, you can test it to see it in action. You should see both values in the output window.
As I said before, there are other types of variables. Valid examples include, but are certainly not limited to:
var numberOne:Number = 1;
var sampleMusic:Sound = new Sound();
var sampleFlag:Boolean = true;
Iteration – So how can your programs check if something is a certain value – or not – before doing something? If statements are the key. Start with a new Flash file, and type this in the Actions box:
var sampleFlag:Boolean = false;
if (sampleFlag == false){
sampleFlag = true;
}
We declare our sampleFlag variable. Boolean variables can only have one of two possible values: true or false. The if statement’s condition (the part inside the parentheses) is what the statement checks before execution. And yes, a double equals sign is required for these statements. Otherwise, the program thinks you are assigning a value to the variable, which we are not interested in doing. If sampleFlag is NOT false, nothing happens. The program just skips over the statement altogether. We know it is false, though, so the code that is in the {} therefore executes, sampleFlag becomes true, and then the program continues upon its merry way.
If you need something to execute multiple times, consider a while statement. Write this code in a blank Actions window:
var sampleNumber = 1;
while (sampleNumber != 5){
sampleNumber++;
}
trace(sampleNumber);
The while statement operates in much the same way as an if statement, except that at the end of it, the program loops back to the beginning, and checks again for the condition, and executes again if need be. In this case, the while statement will execute FOUR times while sampleNumber is not 5, incrementing sampleNumber by 1 each time (++ does that. — decrements by one. Good to know), and then and only then traces sampleNumber afterward when it is finally 5 and doesn’t satisfy the condition anymore. Then, you’ll see 5 in the output window.
Functions – Functions are a way to separate blocks of code. Consider changing our while statement code to this:
var sampleNumber = 1;
function increment(sNumber:Number):Number {
while (sNumber != 5){
sNumber++;
}
return sNumber;
}
trace(sampleNumber);
sampleNumber = increment(sampleNumber);
trace(sampleNumber);
Okay, so this probably looks a bit scary if this is your first exposure to programming. Not to worry! We defined a function, but it doesn’t do anything yet. We don’t call it until after the first trace, but before the second trace. sampleNumber is 1 at the first trace. Nothing has happened to it yet. It is at the line after where the magic happens. We specify that sampleNumber should take on the value resulting from running the function increment. We pass the value sampleNumber – that is, 1 – to it. We go BACK to the function itself, and then perform the code. When we defined it, the sNumber:Number bit signifies that we should expect a number passed from the function call. And we passed sampleNumber. So that number becomes sNumber for the function only. The :Number after the parenthesis means that a number is returned back to us. After the familiar while statement runs, there is the return line. sNumber – which is 5 at this point – is returned. And then we go back to the second-to-last line where we called the function in the first place, and give sampleNumber the value of sNumber from the function. So it was basically a convoluted way of saying sampleNumber = 5. Believe me when I say that there are much better uses for functions, though.
If you still don’t get the idea of a function, try thinking about it in terms of math. Let’s say that f(x) = 3x + 1, and x = 4. 4 is the variable that is passed on to the function. So we get f(4) = (3*4) + 1 = 13. 13 is our returned value. The function depends on what gets sent to it (usually. For the example we just did, the value would be always be five if sampleNumber is five or below).
This brings up the possibility of an infinite loop. An infinite loop results if the condition to pass a while statement is never satisfied. So it repeats itself over and over again. You never get anywhere, and the program freezes. Which is bad. Let’s say sampleNumber started as being 6. The only way to get the while statement to stop would be to get sNumber to be 5. Since sNumber only increments each time, this can’t happen. This is an infinite loop. As a programmer, you are bound to run across one accidentally. Yet, avoid it where you can.
Other programming basics will be explained as we run into them, but this should be enough to get started. Plus, these fundamentals can be worked into other languages.