How to use the trace method in ActionScript

The trace() method is your best friend in ActionScript. In this tutorial, I will show you how to use it so that you can check the values of variables, the number of iterations in a loop and the flow of a conditional statement. You will also learn what are comments in ActionScript and how to use them. Dive in!

Variables' values and literal values

1. Open a new Flash document. Click on the first (and only) keyframe of the first layer to select it.

The ActionScript code that you are going to place in the first keyframe of the timeline will be read by Flash before anything else. The code gets loaded first, and all the other things, like movie clips, buttons, images, etc.

2. Press F9 or select Window > Actions to open the Actions panel.

3. Insert the following code inside:

var firstNumber = 7;
var secondNumber = 3;
trace(firstNumber);

Test your movie either by selecting Control > Test Movie or pressing Ctrl+Enter.

You'll see your movie (a blank stage, because there are no graphic elements at all) and the Output window appear.

The Output window is where Flash usually displays any errors in the ActionScript code, but also the result of a trace method which was invoked.

NOTE The contents of the Output window will never be seen by the visitors of your Flash site. It is there only for you, the Flash designer and developer, to help you with debugging, and resolving any potential errors.

The first two lines of code are defining two variables, firstNumber and secondNumber, with their numerical values, 7 and 3, respectively.

var firstNumber = 7;
var secondNumber = 3;

The keyword var stands for variable, of course. Then comes the variable's name. And on the right sign of the Assignment operator (=) is the value of the variable. Yes, in ActionScript, the "=" sign is called the Assignment operator. This is not the Equality operator, which I will explain you later.

Then comes the line with the trace method (commands are called methods in programming languages). This line tells Flash to show you the value of the variable you wrote between the brackets (firstNumber in this case). So, 7, the value of the firstNumber variable, is displayed in the Output window.

trace(firstNumber);

4. Now make this slight modification to your code:

trace("firstNumber");

That's right, just add quotation marks around the variable name between the brackets. Test your movie again (Ctrl+Enter). You will see the word firstNumber displayed in the Output window. And that's perfectly normal. Why?

When you write something between quotation marks in ActionScript, that portion of code is taken literally by Flash. It means that whatever is found between the quotation marks is a pure text value. It is not a variable anymore. Don't make the mistake by thinking that the variable firstNumber doesn't exist anymore. It is there, in memory, waiting to be called upon. You just told Flash to display some text, that's all.

5. Replace the code inside the brackets with the following one (shown in bold):

trace(firstNumber+secondNumber);

Test your movie and you shoud see 10 displayed in the Output window. So, the values of the two variables, firstNumber and secondNumber, were added together and their sum was displayed.

Now, how would you display, for example, a sentence that says "The value of the firstNumber variable is" and then the value of the variable? You could write that all between the quotation marks and that text will be displayed. But, you want to see the sentence and the real value of the variable, not just some text. You would have to write it this way:

trace("The value of the firstNumber variable is: " + firstNumber);

Try it and you'll see the result. So, this time the trace method was used to display some text and a value of a variable after that.

Notice that I put a blank space before the closing quotation mark. That's because Flash displays everything between the quotation marks as it is, including the blank spaces. You do not have to put a blank space there, I just did it because it looks better that way, instead of having the value of the variable glued to the end of the sentence.

After the quotation marks comes the plus sign (+) and then the variable name. It isn't obligatory to put spaces before and after the plus sign, I just put it there for better readability.

Using comments within your ActionScript code

6. Erase the code you wrote until now. No! Wait. There is a better way to continue this lesson, without having to erase the ActionScript written so far. Put these around your code:

/*
var firstNumber = 7;
var secondNumber = 3;
trace("The value of the firstNumber variable is: " + firstNumber);
*/

You have just commented out your code. When you write a forward slash (/) followed by an asterisk (*), every single line of code from that point on, until the closing comment (an asterisk followed by a forward slash, */) is completely ignored by Flash.

Comments are useful when you want to temporarily "turn off" a piece of ActionScript code, to check out various parts of your Flash movie functionality. If you wanted to comment out a single line, you would do it by putting two forward slashes (//) in front of that line, like this:

var firstNumber = 7;
//var secondNumber = 3;
trace("The value of the firstNumber variable is: " + firstNumber);

REMEMBER Comments are also very good to write some explanations that will serve you very well if you, say, return to your code a couple of months later, if your client asks you to make some modification to his site. Imagine going over 100 or more lines of ActionScript and trying to remember which does what. Use as many lines of comments as you need, this will save you a lot of time later, or some other person which may have to continue to work on your code after you. Look for examples of comments below to better see what I mean.

This is a single line of comment text that just says what's going on here. Remember, Flash ignores this line completely.

// the following two lines define the variables

var secondNumber = 3;

myClip._x = 100;
myClip._y = 42;

Or, you can put a comment at the end of a line of code. It won't change the functionality of code at all. Again, it will be skipped completely.

myClip._x = 100; // horizontal position of the myClip movie clip
myClip._y = 42;

You can even put in comments that make the ActionScript code easier to read, by making a section stand out from the rest, like this:

/* -----------------------------------
Main movement function
----------------------------------- */
function movingTheSpaceShip() {
...imagine lots of code lines here :) ...
}

You've seen how comments can be useful. Let's move on to loops and how the trace method can help you there.

Checking out the flow of a loop with the trace method

7. Write the following ActionScript code after the one you just commented out:

for (i=1; i<5; i++) {
trace(i);
}

Test your movie (Control > Test Movie). You should see the same result as in the image below.

First, I'll explain you how the for type of loop works. There is really just one line of code to be explained - the first one.

for (i=1; i<5; i++) {

The first element within the brackets defines the starting value of the loop. It is a custom in programming to use "i" as a variable name in loops. Of course, you can call it whatever you like. you can name it myNumber, for example.

So, the part i=1 sets the starting point of the loop - the variable i with the value of 1. All the values inside brackets must be separated by a semicolon (;).

The next element is the condition. While this condition is fulfilled, the loop is repeating again and again until this is no more true. In the current example, the condition is for i to be lesser than 5 (i<5). This means that when i equals 1, 2, 3 or 4, the loop will go on, but once it becomes 5, the loop end and any code after it is being executed normally, and the program flow goes on.

And just what part of the loop is being run while the condition is fulfilled? Every single line of ActionScript that is within curly braces - { and }.

You have seen how the trace command is useful to check out every iteration of the loop (iteration means every pass of the loop). Let's see another example.

The following code,

for (i=1; i<5; i++) {
if (i>1) {
trace(i + " is greater than 1");
} else {
trace("The value of i is: " + i);
}
}

has an if/else conditional statement inside it. It basicalliy does this: if the variable i has a value greater than 1 (i>1), a trace command is being run. If i equals 1, another trace command is being executed.

You have just learned how to use the trace method in Flash and where and how to write comments in your ActionScript code. These two tools will come in handy many times during your actionscripting voyages. I encourage you to use them whenever you get stuck or have any doubts about the functionality and flow of the code. Keep on learning and check out my other ActionScript tutorials. And don't forget to enjoy yourself, because programming can be as creative as design! :)

Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!