This site is now just an archive over the rise and fall of Flash. The domain flashmagazine.com is available for sale
Login | Register
The Power of Arrays - Array Fundamentals

The Power of Arrays - Array Fundamentals

This tutorial will cover one of the many great powers of Action Script, arrays.

Through out this tutorial I will be using alot of code fragments and output display messages. To recognize which is which, use these examples below.

Regular text will look like this.

code: All code will look like this.



Output: All output display text will look like this in italics.

Before discussing how to create and use arrays, lets go over what an array is. An array is a datatype much like a variable in that it holds information, but unlike a variable which can only hold one piece of data, an array can hold multiple pices of data called elements.

Now we know what they are, lets see how to make them.

There is more than one way to create an array. One way (the way we will be using most in this tutorial) uses the

Array () constructor combined with the new operator.

First set a variable to a new array.

var myArray = new Array ();



Now we have an array, but its empty, so we need to put some data in it. Before we add data to an array we need to discuss data in arrays.

Arrays can hold any type of data that a variable can hold including string, intigers, and boolean. It can also handle other variables as well as other arrays as we will see later.

So lets add some data to our array. Each element in an array is labeled with the array's name and an integer that represents its position inside of an array. The first element in an array will always be 0 then 1. Since we have already created the array, we will label the new elements manually. Under where we had created the array, type the array name then the number 0 in brackets like this.

var myArray = new Array ();
myArray[0] = "fName";
myArray[1] = "lName";
trace (myArray);



Notice after the array was created, we simply placed data in the first two elements known as myArray[0] and myArray[1]. Again, remember arrays begin counting at zero not one. Also notice that once we had added the two elements, we ran a trace function to display the contents of myArray in the output window. To see these results, test the movie by hitting ctrl enter at the same time on pc's or going to control/test movie in the tool bar. Doing this will display the following.

Output:
fName,lName


Now lets create an array with elements already in it. Simply use the new Array() method we have already discussed, but this time place the elements in the parenthesis of Array () when it is created.

var myArray = new Array ("fName","lName");
trace (myArray);



When the movie is tested it will display the same thing as before.

Another way to create an array is to put the elements in brackets and set them to a variable.

var myArray = ["fName","lName"];
trace (myArray);



Again, the same output, but notice without the new Array () method, you must place the elements into brackets

This time, lets create an array containing a variable. We will create the variable random and set it equal to a random number between 0-9, then place that variable inside an array with a little text.

var random = Math.floor(Math.random()*10);
var myArray = new Array("random=",random);
trace (myArray);



Output:
random= ,(a random number between 0-9)


Arrays can handle a single piece of data as apposed to multiple, but if the single piece of data is a number, flash will interpret that as blank elements. For example, try this.

var myArray = new Array (5);
trace (myArray);



Output:
,,,,


It Creates 5 blank elements in myArray.

Another element that can be held within an array is another array. Just put the arrays name in like you would a variable when declaring the elements.

var myArray = new Array ("fName","lName");
var yourArray = new Array ("age",myArray);
trace (yourArray);

 

Output:
age,fName,lName



The second array simply incompasses the first when it is added.

Now we know how to make them, lets see how to change them. We will create an array, trace it to see the original, change the first element to something else and trace it again to see the difference.

var myArray = new Array ("fName","lName");
trace (myArray);
myArray [0] = "age";
trace (myArray);



Output:
fName,lName
age,lName


As I mentioned, the first row contains the original elements in the array, then the second row contains the new element in positon [0].

When I changed the element, I called it by using the arrays name and then putting its position in brackets. This is because flash automatically gives elements in an array a numeric value that represents this positon in the array. This is done for easy tracking & retrieval of these individual elements. You can also name these elements within an array two different ways.

var myArray = new Array ("age");
myArray["fName"] = "fName ";
myArray.lName = "lName";
trace (myArray.fName myArray["lName"]);
trace (myArray);



Output:
fName lName
age


The two methods I used were dot syntax myArray.lName and brackets myArray["fName"]. If you noticed, when using brackets, you must put quotes around the name, but when dot syntax is used, there are no quotes on the name. Also, you will not see an element that has been named in this fation if you simply call the array, you must call the individual element.

Now that we have covered a few ways to make and change arrays, lets go over a couple basic methods used with arrays.

The first we will go over is the reverse method. First, create an array then call the method like this.

var myArray = new Array (1,2,3,4);
myArray.reverse ();
trace (myArray);



Output:
4,3,2,1


As you can see, it simply reversed the order of the elements in the array.

The push method can be used to add elements to the end of an array for accumulating large amounts of data. To use this method, create a blank array, then invoke the method. The next example I use an event handler to invoke it. and to display it, the code must be placed into an instance of a movie on the main stage.

onClipEvent (load) {
var myArray = new Array ();
}
onClipEvent (keyDown){
  theKey =String.fromCharCode(Key.getAscii());
  myArray.push (theKey);
  trace (myArray);
}



The output of that code will depend on what keys you press. As you press each key, it is recorded into the array and the entire array is shown in the output window.

To add elements to the beginning as apposed to the the end, replace push() with unshift().

myArray.unshift(theKey);



This will accumulate the keystrokes as before, but place each new one in the [0] position and move the others down.

Since we know how to add elements to an array, now lets see how to remove elements from an array. One way is the delete operator. The delete operator will actually empty an element as apposed to removing it. Lets take a look at what I mean.

var myArray = new Array (1,2,3,4);
trace (myArray);
delete myArray[1];
trace (myArray);



Output:
1,2,3,4
1,,3,4


As you can see, the delete did remove the data in element [1] (the second element because arrays start counting at 0), but did not remove the element itself.

To remove the actual element, flash has 2 built in methods for removing them from the beginning and the end they are the pop() method and the shift() method. Now lets see what they look like.

var myArray = new Array (1,2,3,4,5,6);
myArray.pop();
trace (myArray);
myArray.shift();
trace (myArray);



Output:
1,2,3,4,5
2,3,4,5


As you can see, the pop() method removed the last element and the shift() method removes the first element completely.

Now you know what an array is, how to create them and manipulate them.

In the next tutorial covering arrays, look for more advanced methods and techniques for comparing, manipulating and using arrays.

 

Get new stories first

Click to follow us on Twitter!

 

Comments

No comments for this page.

Submit a comment

Only registered members can comment. Click here to login or here to register