The Flash Connection Make mine Actionscript 3.0!

Source File: 

streamlining_code_4_arrays_loops.fla

Next, we'll put our three objects into an array, and then later process them as a group using a loop.

First, what is an array? Basically, an array is a data structure that allows you to group items. But when you put items into an array, they don't actually move there. Rather, the array just gives you a new way to reference the exact same items. But probably the best way to tell you how this works is just to show you. So let's create an array variable to group our three items, like so:

var clipArray:Array = [square, circle, triangle];

(I have gone over this before in my tutorial on "Buttons in an Array," so forgive me for being redundant and saying it all again, but this is in a different context anyway.)

Now that I have declared the array, and grouped the items in it, it's as though I now have three brand new instance names to use (albeit using brackets and index numbers):

• saying clipArray[0] is the same as saying square
• saying clipArray[1] is the same as saying circle
• saying clipArray[2] is the same as saying triangle

Therefore, the following two lines would accomplish exactly the same thing:

1. square.buttonMode = true;
2. clipArray[0].buttonMode = true;

Similarly, these next two lines would accomplish the same thing:

1. square.addEventListener(MouseEvent.CLICK, item_onClick);
2. clipArray[0].addEventListener(MouseEvent.CLICK, item_onClick);

I'm driving home the point that using the array reference is just as good as using the instance name. They both point to the same object!

Now, let's take it a bit further. The index number in the brackets might also be represented by a variable. Let's suppose that we set a variable called "i" (for index), make it an integer type, and give it a value, like so:

var i:int = 0;

Having created this variable and setting it equal to 0, now we can do the following:

clipArray[i].buttonMode = true;
clipArray[i].addEventListener(MouseEvent.CLICK, item_onClick);

With i being equal to 0, the above operations are once again being carried out on the square. If we set i equal to 1, then we are affecting the circle. And if we set i equal to 2, then we are affecting the triangle. In fact, all we have to do to affect all the objects in the array is to have a mechanism for changing the value of i repeatedly (consider the following code snippet):

var i:int = 0;
clipArray[i].buttonMode = true;
clipArray[i].addEventListener(MouseEvent.CLICK, item_onClick);
i = 1;
clipArray[i].buttonMode = true;
clipArray[i].addEventListener(MouseEvent.CLICK, item_onClick);
i = 2;
clipArray[i].buttonMode = true;
clipArray[i].addEventListener(MouseEvent.CLICK, item_onClick);

Notice that those two lines of code that keep getting repeated don't change at all, the only thing that changes is the value of "i" just before the lines execute. This causes the same two lines to affect three different objects, each in turn, just by changing the value of i. However, in code, whenever you have identical lines that get repeated, it usually means there is a way to combine it somehow. This is what for loops accomplish nicely.

Loops are sections of code that run a certain number of times, in fact, however many times we specify. The for loop's set of parentheses contains three parts, separated by semi-colons. In the first part, a variable is initialized (and optionally declared also). This variable will serve as a loop counter, and it's kind of conventional to use the letter "i" (meaning iteration, or index). You can name this variable whatever you want, but we'll stick with "i" for our purposes. In the second part, a condition is set using a Boolean expression. As long as this condition is true, the loop will keep going. Finally, the third part is a statement of how much to increment the variable each time.

While the for loop's counter variable can be initialized to whatever you want, it's conventional to initialize it to 0. This makes it easy to combine the loop with an array, since arrays are 0 based. Let's write a for loop that initializes i to 0, loops three times, and increments i by 1 each time:

for(var i:int = 0; i < 3; i++) {
    trace(i);
}

The above three lines of code will produce this output:

0
1
2

Let's examine what is going on with this simple loop:

• i is intialized to 0, so i = 0
• the condition is evaluated. Is i < 3? Yes it is, so trace i. (0 traces out)
• i is incremented by 1, so now i = 1
• the condition is evaluated. Is i < 3? Yes, it is, so trace i (1 traces out)
• i is incremented by 1, so now i = 2
• the condition is evaluated. Is i < 3? Yes it is, so trace i (2 traces out)
• i is incremented by 1, so now i = 3
• the condition is evaluated. Is i < 3? No, 3 is not less than three, they are equal
• the loop terminates immediately, with 3 not being traced.

So you can see that if you initialize a loop with 0, then you make the condition to be "less than" the number of times you actually want to loop, the loop will execute exactly that number of times. 

Now, let's apply this loop structure to our array:

for(var i:int = 0; i < 3; i++) {
    clipArray[i].buttonMode = true;
    clipArray[i].addEventListener(MouseEvent.CLICK, item_onClick);
}

Can you see the substitutions that are taking place here? The first time through the loop, when i = 0, the code will act upon the square. The second time through the loop, when i = 1, the same two lines will affect the circle. The third time through the loop, when i = 2, the same two lines will affect the triangle. Finally, when i = 3, the loop will terminate without attempting to run those lines on clipArray[3], which is a good thing, because there isn't any such element, and that would cause an error.

Now, the only other thing that the above lacks is that it uses the hard-coded number 3. Instead, we will use the length property that the array class provides. Every array "knows" its own length, whatever it is, and the length of the clipArray as it stands right now is 3. Although the array's length is 3, the highest index is 2. This is just how it works. The three elements have indices of 0, 1, and 2. But the length is 3. I'm just emphasizing this so you won't ever confuse the length with the highest index. The highest index of an array will always be its length minus one. Anyway, here's our new loop rewritten to use the length property instead of the hard coded number 3:

for(var i:int = 0; i < clipArray.length; i++) {
    clipArray[i].buttonMode = true;
    clipArray[i].addEventListener(MouseEvent.CLICK, item_onClick);
}

The beauty of this system is that, later, if we add another element to the clipArrray, this loop need not be edited again, it will work exactly the same way. Suppose we added another MovieClip to the array with an instance name of star (after we create it on the stage and give it that instance name, of course). We would just add star to the array. Now the array's length would be 4, so the same loop will run four iterations instead of just three, with no changes at all to the looping code! And the star would all of a sudden be included in all that processing that's happening to the other clips!

Here's the code that combines event listeners and uses arrays and loops, and even with whitespace, now it's only 12 lines:

import flash.events.MouseEvent;

var clipArray:Array = [square, circle, triangle];

for(var i:int = 0; i < clipArray.length; i++) {
	clipArray[i].buttonMode = true;
	clipArray[i].addEventListener(MouseEvent.CLICK, item_onClick);
}

function item_onClick(event:MouseEvent):void {
	myText.text = event.currentTarget.name + " was clicked";
}

Finally, here's the code that will set buttonMode to true and add event listeners for ROLL_OVER, ROLL_OUT, and CLICK, and do it all with shared listeners, arrays and loops!

import flash.events.MouseEvent;

var clipArray:Array = [square, circle, triangle];

for(var i:int = 0; i < clipArray.length; i++) {
	clipArray[i].buttonMode = true;
	clipArray[i].addEventListener(MouseEvent.CLICK, item_onClick);
	clipArray[i].addEventListener(MouseEvent.ROLL_OVER, item_onOver);
	clipArray[i].addEventListener(MouseEvent.ROLL_OUT, item_onOut);
}

function item_onClick(event:MouseEvent):void {
	myText.text = event.currentTarget.name + " was clicked";
}
function item_onOver(event:MouseEvent):void {
	event.currentTarget.alpha = 0.5;
}
function item_onOut(event:MouseEvent):void {
	event.currentTarget.alpha = 1;
}

Here's how the swf behaves now. It behaves identically to the brute force version. However, it's code is now 20 lines instead of 47. And that's only with 3 objects involved!

This tutorial is more basic than much of my other ones, but I also know that a lot of people out there possibly need this. I also used just a simple example; your actual code or project might be much more complex and involved than this, but the principles are still the same. I myself have used these techniques to shorten other peoples' code, many times by as much as 75 to 80%, so I've seen 500 lines become 100, 1200 lines become 200, etc. And yet the shorter code does exactly the same thing as the longer! Also, once you understand how it works, the shorter code is easier to read, find your way around in, and especially to maintain!