Introduction to Arrays in ActionScript 3.0

By Blue_Chi | Flash CS3 | ActionScript 3.0 | Beginner

This tutorial will teach you the basics on how to use arrays in AS3. Arrays are lists of data which are, unlike simple variables, capable of storing store more than one item at the same time. This use of arrays makes it easy to gather items of the same type in a single container to help retrieve and process these items in a logical manner depending on the needs of the project.

This tutorial is divided into the following sections:

  1. Creating an array
  2. Accessing elements in an array
  3. Adding elements to an array
  4. Removing elements from an array
  5. Misc array methods

Creating an Array

There are a number of methods for creating an array. You can use the same instantiation method used for other AS3 classes by using the new keyword with the class name, and have the contents of you array passed as values between the brackets, as shown in the example code below:

var myArray:Array = new Array("Flash", "ActionScript", "Republic of Code");

Alternatively, ActionScript allows you to use a shorter technique by using the square brackets [] to automatically instantiate an array:

var myArray:Array = ["Flash", "ActionScript", "Republic of Code"];

Both of these codes create the same exact thing. Most developers tend to use the shorthand method though.

Accessing Elements in array

The advantage of using arrays instead of variables is that you can access specific elements in the array without retrieving the whole thing. You can, if you want to, retrieve all the contents of an array by referring to its name:

var myArray:Array = ["Flash", "ActionScript", "Republic of Code"];
trace(myArray);
Testing this code should output the following: "Flash,ActionScript,Republic of Code".

To be able to retrieve a specific element in the array, you must refer to that element using its index. The index of an element within an array is its position in the list. Is it the first item? The second? or what is its position? What you have to know about this index is that it is zero relative. This means that the first item in the list is not as position 1, but at position 0. The second would be at position 1, the third at position 2, etc.

Once you know the index of an element, you can simply use the square brackets [] to retrieve it. The code below retrieves the first element in our array:

var myArray:Array = ["Flash", "ActionScript", "Republic of Code"];
trace(myArray[0]);
Testing this code should output the following: "Flash".

If we wanted to retrieve the third element in the array, we do that by retrieving the item at index 2 not 3:

var myArray:Array = ["Flash", "ActionScript", "Republic of Code"];
trace(myArray[2]);
Testing this code should output the following: "Republic of Code".

What you have learnt so far should be enough for you to create and access contents within an array. The following sections will teach you to add and remove elements from an array.

Adding Elements to the Array

Once you created your array you would probably have to add more elements to it later in the project. There are a number of ways for doing this. The easiest one is done using the square brackets []. Using the square brackets, you can add any value at the specific index you set. For example, if we want to add a new element at index 3 in our array we do it this way:

var myArray:Array = ["Flash", "ActionScript", "Republic of Code"];
myArray[3] = "Tutorial";
trace(myArray);
Testing this code should output the following: "Flash,ActionScript,Republic of Code,Tutorial".

The code above would add your element to index 3. You should be cautious when using this method because you could accidentally overwrite your new content over old elements if that index is already occupied. For example, if you put the value Tutorials in index 2 instead of 3 this would overwrite the value Republic of Code:

var myArray:Array = ["Flash", "ActionScript", "Republic of Code"];
myArray[2] = "Tutorial";
trace(myArray);
Testing this code should output the following: "Flash,ActionScript,Tutorial".

Attempting to add your new elements at an index further than the current length of your array would also generate empty slots in the array to fill all these unused indexes.

var myArray:Array = ["Flash", "ActionScript", "Republic of Code"];
myArray[6] = "Tutorial";
trace(myArray);
Testing this code should output the following: "Flash,ActionScript,Republic of Code, , , ,Tutorial".

Instead of attempting to use the square brackets to add an item to your array, you can alternatively use the push() method to add an item automatically to the end of your array. This way you do not have to know the current number of items in your list.

var myArray:Array = ["Flash", "ActionScript", "Republic of Code"];
myArray.push("Tutorials");
trace(myArray);
Testing this code should output the following: "Flash,ActionScript,Republic of Code,Tutorial".

The square brackets technique and the push() method could be helpful in different circumstances depending on the nature and needs of your project.

Removing an item from an Array

You might for some reason want to remove an item from an array. Just like the process for addition, there are a number of methods for removing items from an array. The main tool for removing items from an array is the splice() method. This method can be used to remove one or more items from an array by specifying the starting index and then the number of items that should be removed from that starting point. It is used in the following format:

myArray.splice(StartingIndex, deleteCount)

So, for example, if we wanted to remove the element at index 2 of the array we can use the following code:

var myArray:Array = ["Flash", "ActionScript", "Republic of Code"];
myArray.splice(2,1);
trace(myArray);
Testing this code should output the following: "Flash,ActionScript".

If we do not provide a delete count the splice() method will delete everything that comes after the starting index. In the example below, if we wanted to delete everything after the first item in the array we would do it this way:

var myArray:Array = ["Flash", "ActionScript", "Republic of Code"];
myArray.splice(1);
trace(myArray);
Testing this code should output the following: "Flash".

Alternatively, you can use the pop() method to remove the last item within an array without having to worry about the actual index number:

var myArray:Array = ["Flash", "ActionScript", "Republic of Code"];
myArray.pop();
trace(myArray);
Testing this code should output the following: "Flash,ActionScript".

The pop() method has a more limited functionality because it can only remove the last element from an array, unlike splice() which can remove any element regardless of its position, but then again it could be helpful in certain projects that require this functionality.

Misc Array Methods and Properties

In the final section of the tutorial we will just explain a number of methods and properties which do not add or remove anything from an array, but which could still come handy.

var myArray:Array = ["Flash", "ActionScript", "Republic of Code"];
trace(myArray.length);
Testing this code should output the following: 3.
var myArray:Array = ["Flash", "ActionScript", "Republic of Code"];
myArray.reverse();
trace(myArray);
Testing this code should output the following: "Republic of Code,ActionScript,Flash".

These were some of the most commonly used methods for working with arrays. You can check the ActionScript Reference to learn about the other less popular methods. I hope that you learnt something new from this tutorial. Feel free to post any questions or comments you have at the Republic of Code Forum.

- End of Tutorial