Arrays

by kirupa   | filed under Flash and ActionScript

Simply put, an array in Flash is a collection of data organized under a single variable name. Let's imagine you are jotting down a list on a piece of paper. Let's call the piece of paper "groceries". Now, in the paper, you write a numbered list with all the items that belong there. Start numbering from zero and enter an item that you need to purchase.

The piece of paper called "groceries" is your array variable. The items that you need to purchase are called the array values. In Flash, the above scenario can be represented as the following line of code:

grocery = ["bananas", "milk", "rice", "lemons"];

What makes arrays unique is that you can access individual items from an array - similar to highlighting one item in your grocery list. Each item in an array is assigned a number starting with zero. In the above example, bananas would be given the value 0, milk the value 1, rice the value 2, and so on.

Any code, unless otherwise mentioned, in the following sections should be pasted in a frame's Action window and previewed by pressing Ctrl + Enter.

Declaring an Array

There are several ways to declare an array. The easiest method, would be to use the following format:

variable = ["item0", "item1",
  "item2"];

If you have used other programming languages, you will notice that Flash is less 'picky' when it comes to arrays, what type of data can be stored in an array, the initial size of an array, etc.

Displaying an Array

Copy and paste the following lines of code into a frame and press Ctrl + Enter:

grocery = ["bananas", "oranges",
  "apples", "kiwis"];

  trace(grocery);

You should see the items in your array displayed. In a majority of instances, you will be displaying and transferring individual array items instead of the entire array. As you may have read earlier, the items in an array are organized according to a number called an index value that starts with 0 and increases by 1 to accommodate each item stored in your array.

For example, to display the first item in your array, modify the last line in your code from trace(grocery); to:

trace(grocery[0]);

The word bananas will be displayed on the screen. To display the second item in your array, type:

trace(grocery[1]);

You can keep increasing the index value until you have reached a number that surpasses the actual number of items stored in your array. In other words, if your array only has 4 items, trying to display grocery[5] or grocery[4] will result in a message of 'undefined' - remember, an array's index starts at 0. An index value of 4 is actually referring to 5 items (0,1,2,3,4).

Adding Items to the End of Your Array

More than likely, you will reach a point where the items in your array simply won't suffice. Your grocery list needs more items. The array must grow. There are several ways to add items to your array:

One way would be to manually enter the index number of your array and assign a value as well. If you were to, say, add an item called "potatoes" to your current list of 4 items, simply add the following code:

grocery[4] = "potatoes";

  trace(grocery);

From now on, every time you access the grocery array, it will now include potatoes at position 4. When items are added to an array, they stay in that array unless you tell Flash to remove those items. We'll talk about removing items a little bit later on in this tutorial.

Let's say you want to now add the item butter to the end of your array. You could manually enter the index position and assign a value at that position. Instead, we will try a more effective way. The new method of adding items to your array would be applied by using the length function to find out the length of the array. Once the length has been found, you can tell Flash to add an item to the end of the array without you having to manually enter the index position.

The code for accomplishing that would be:

i = grocery.length;

  grocery[i]="butter";

  trace(grocery);

In the above code, the variable "i" gets the length of the array grocery. In the second line, the value of the length of the array is set as the index position of your grocery array.

You should take care to note that the length function simply counts the number of items in your array, and it does not start at zero; it starts at 1. Therefore, the value of the length is always one more than the index position of the last item in your array. That suits us quite well because we are interested in adding an item to the end of our array, and not replace the last item in our array with our new value.

Replacing Items In Your Array

Replacing items in your array is fairly simple. Let's say you aren't happy with your second entry in your grocery list. In Flash terms, you want to replace the second item in your grocery array with something else. The code for that would be:

grocery[1]="tangerines";

  trace(grocery);

The second item, of course, has an index of 1, and the previous value for said position  has now been overwritten with "tangerines."

There is more to arrays than just the basics, and the next section will explore more ways of manipulating data in an array.

Everything I have explained in the previous section must seem like disparate pieces of a puzzle. For a better understanding of what has been done, copy and paste the following code into a frame's Actions Window. Press Ctrl + Enter after the code has been pasted, and take care to notice how the values of your array are modified and/or expanded:

grocery = ["bananas", "oranges", "apples", "kiwis"]; trace(grocery); grocery[4] = "potatoes"; trace(grocery); i = grocery.length; grocery[i]="butter"; trace(grocery); grocery[1]="tangerines"; trace(grocery);

[ notice how the array is modified and expanded in your output window ]

In the next few sections, we will discover more things to do with arrays that go beyond the basics that you have been dealing with in the prior sections.

Creating an Array by Combining Two Arrays

Flash allows you to create a new array by combining the values of two other arrays. Let's take, for example, the following two arrays:

colors = ["blue", "yellow",
  "green"];

  shape = ["square", "triangle", "circle"];

We can combine both of the above arrays into one array by using the concat() function. If we want to combine the values of the arrays colors and shape into a new array called drawing, the code would be:

drawing = colors.concat(shape);

You should note that the values in the array shape will be added AFTER the values in the array color. In plain English, the above code would read like "the color array will be added to by the shape array."

If you wanted to reverse the order, you would simply change the above code to:

drawing = shape.concat(colors);

For example, if you were output the array 'drawing' from the above example, you will see the following data:

  square,triangle,circle,blue,yellow,green

As expected, the values in the array shape come first, and the values in the color array trail behind.

Creating an Array using Slice()

What Flash bringeth together, Flash taketh apart. That's exactly what the slice() method does. Previously, you used the concat() method to bring the values of two arrays into a new array. Slice() does the opposite by creating a new array by extracting a specified range of values from another array.

For example, let's take the following array:

countries = ["germany", "italy",
  "norway", "finland", "united states", "india"]

If I were to create an array using only a few of the values from the above array, the code will look like the following:

country2 = countries.slice(2,4);

What I am doing is telling Flash to extract the values from index positions through up to four but NOT including the fourth element. For example, country2, after running the above statement will have the values norway and finland, the 2nd and 3rd index positions respectively.

	Note
When dealing with slice() or concat(), make sure you understand that the actual arrays are not modified in any way. Any modifications you make are displayed in a new array you create. The original source array remains unscathed. The following section will explain the use of other methods that will modify your array

 
Pop and Push
The final four methods this tutorial will cover are the pop(), push(), shift(), and unshift() methods:

• pop
  This method removes the last item from an array. While the item is removed, you can capture that value into a variable:
  
  seasons = ["summer", "winter", "spring", "autumn"];
capture = seasons.pop();
trace(capture);
trace(seasons);
 
After running the above code, the pop function removes the last value autumn from the array named seasons and stores it in the variable capture. If you do not wish to store the last variable in your array, you can simply use seasons.pop() without having "capture =" in front of it.
   
• push
  The push method adds a series of values toward the end of an existing array. For example:
  
  programs = ["Flash MX", "FireWorks MX"];
programs.push("DreamWeaver MX", "FreeHand MX");
trace(programs);
  
  While the original programs array only contains two values, after using the push command, the values specified by the push function are added to the END of the programs array. In the end, the programs array now has four items in it!
   

Shift and Unshift

These two functions are very similar to the the above pop and push methods. The primary difference is that shift and unshift work from the beginning of an array at index position 0. Remember, pop and push deal with the end of an array.

• shift
  If I wanted to remove a value from the beginning of our programs array, I would simply use the following code:
   
  programs.shift();
 
  Of course, if you want to store the value you deleted using the shift method, simply set a variable name equal to the above code, and the item removed will be stored in that variable.
   
• unshift
  This function allows you to add a value or series of values to the beginning of your array. For example, if you wanted to add two programs to our programs array, the code would be:
   
  programs.unshift("Director MX", "Contribute");
  
  Unshift does not overwrite existing values in your array however. Instead, the unshift function shifts the existing items up the required number of index positions to accommodate the new values.

I hope this tutorial helps you to better understand the world of arrays in Flash. Arrays are not the most exciting of topics to write about, and they don't involve cool animation, and they don't even require the use of cool images. With that said, arrays are among the more important of techniques that you will use not only in Flash - but other languages as well.

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇