1.6 Arrays and Loops

The objective of this exercise is to present the concept of arrays, using an average of ages example.

1. Firstly, a short introduction on arrays. Arrays are lists of values, that can be of many different types, from variables to objects. Arrays are useful when one needs not simply to store one piece of information, like in a variable, but a larger number of information. The Array class in Flash also provides us many useful methods and properties to manipulate and retrieve information from arrays (such as the length of the array, that is, how many items are in the array). An array indexes information in a sequence, and this information can be retrieved using an unsigned integer numerical index. The syntax for an index uses square brackets, for example: myInfo[5]. Array indexes start at [0].

2. Secondly, an introduction to “for” loops. For loops allow us to execute simultaneously several instructions at a same time, and to specify the amount of times those instructions are executed. For loops contain a loop counter (a numerical variable). We can control the initial value, increment, and end value of the loop counter. For loops are often used in conjunction with arrays, because they can be used to retrieve all the information in an array, by sweeping through the index value.

3. Let’s move now to our exercise, and define our ages array. We’d like to calculate the average age of a group of friends, and output it in a text field. Let’s begin with the now familiar task of creating a text field, resizing it, and placing it on the stage, with a border:

var myTextField:TextField = new TextField();
stage.addChild(myTextField);
myTextField.x=50;
myTextField.y=125;
myTextField.width = 450;
myTextField.border = true;

4. Now let’s create our array. We will begin by the array construction statement:

var ages:Array = new Array();

Then we will fill the array. Each element of the array will be ages[n], in which “n” is our index:

ages[0]=24;
ages[1]=35;
ages[2]=27;
ages[3]=38;
ages[4]=41;
ages[5]=34;
ages[6]=34;
ages[7]=22;

(note: an alternative way to define and fill the array at the same time would be to use this syntax: var ages:Array = new Array(24, 35, 27, 38, 41, 34, 34, 22); )

5. Before we calculate the average, we need to sum all these values, and then divide the sum by the number of values. For that, we need a for loop.

First, let’s create a variable that will store our sum.

var agesSum:Number=0;

Then we will create a for loop, that will run through the ages array, using the index. The initial value of the for loop will be 0 (this is the default for an array index). The final value for the for loop could be 7, in this case. However, it is a good practice to keep the final value flexible, because at any time we might decide to add to or subtract an item from our list. So, instead of 7, let’s ask Flash to calculate the number of items on the list (8). In AS3, the number of items in an array is obtain through the length property of the array.

Between the initial value and the final value, we simply keep adding “1” to our index. Another way to say “add 1” in AS3 is to use the operator “++”. Similarly, there is an operator “–“.

The syntax of a for loop in Flash follows this logic: for ([initial value];[condition until final value];[increment]). Then follows the actions to repeat in the loop, encapsulated by curly brackets.

In our case, the first line of the for loop would be something like this:

for (var n:int=0; n<ages.length; n++) {

in which n (an integer) is our index, running from 0 and stopping before it reaches the length of the array (8) – therefore it will stop at 7 (lesser than 8, which is what we want), and stepping forward in increments of 1 (n++).

Inside the for cycle, we ask Flash to, in each iteration of the loop (0, 1, 2, …., 7) retrieve the value ages[n], and keep adding it to the sum (“agesSum”). To add something to an existent value, we can use the operator “+=”:

agesSum+=ages[n];

And then close the loop:

}

6. Now, we can request Flash to present the age average, by dividing the sum by the number of items in the array (the array length), and putting that number in our text field, preceded by a short message:

myTextField.text = "Age average: "+agesSum/ages.length;

7. The resulting code is this:

var myTextField:TextField = new TextField();
stage.addChild(myTextField);
myTextField.x=50;
myTextField.y=125;
myTextField.width = 450;
myTextField.border = true;
var ages:Array = new Array();
ages[0]=24;
ages[1]=35;
ages[2]=27;
ages[3]=38;
ages[4]=41;
ages[5]=34;
ages[6]=34;
ages[7]=22;
var agesSum:Number=0;
for (var n:int=0; n<ages.length; n++) {
agesSum+=ages[n];
}
myTextField.text = "Age average: "+agesSum/ages.length;

and the result should look like this:

Download files: ex4-arrays.zip

Advertisements

About Nuno Correia

audiovisuals+interaction
This entry was posted in 1. User Interface Design and tagged , . Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s