Actionscript for beginners - Tutorial 2 - The Array

[Flep]

Tutorial 2 ? the Arrays

Greetings to all!
I carry on the serials of tutorials to learn the basic of Actionscript 3.0.
After having seen what are variables and how to use them, let us get into the world of the Arrays.
Before starting, I would like to specify that the Arrays can be extremely complex and have various methods and techniques on how to implement and manage them.
If we wanted to explain the Arrays of Actionscript 3.0 in details, 30 pages of tutorial would not be enough and it would only create confusion to the persons (mainly starting with Actionscript) who read this tutorial.
In this tutorial, we will keep to the basics. The Array will be of a single dimension with a few hints of the bi-dimensional Array.
We will see how to declare an Array and how to populate (fill it) it.

If you remember, I asked to those of you who are starting learning Actionscript, to think of a variable as a containing box; a box with a name and containing a value which can be retrieved calling the name itself.

An array is an even bigger box?

Array Class

An Array is a maxi box which can contain smaller boxes into it.
This, to make you understand that an Array in Actionscript 3.0 can contain various variables that themselves can contain a value.

I declare an Array:
var nomi:Array=new Array();
in this case, I declared a variable of type Array (meaning it can contain other variables) and at this moment, this Array is empty.
In fact if we tell Flash: trace(nomi); the output window would be empty.
How to populate it?

There are different methods, the first one to keep in mind and to learn is the following:
nomi=['filippo','luca','giovanni','giacomo','pietro'];
In between the square brackets, we insert some String variables separated by a coma.
If we do a trace(nomi); the output would be:
filippo,luca,giovanni,giacomo,pietro

Another method would be to populate our Array as we declare it:
var nomi:Array=new Array('filippo','luca','giovanni','giacomo','pietr o');
in this case, we insert the string values in between the parenthesis at the same moment that we declared the Array.
The result is the same as before. In fact, if we do a trace(nomi);, we obtain the same output:
filippo,luca,giovanni,giacomo,pietro

Ok. Next?
Answer:
Flash has created a variable into which can be found other variables of String type value ( 'filippo', 'luca', ' giovanni' etc etc ).
At the same time that we populated the Array, Flash has assigned an index to each value. The index would be the name of each boxes, of each variables contained in the Array.
The indexes assigned are numerical and are increased starting form zero.
As an example, if I write: nomi[0]; it would be the same that if I wrote ?filippo?, as Flash retrieve the value which is into the Array at the first index (which is 0).
If I write: nomi[3]; it would be the same that if I wrote ?giacomo?, as Flash retrieve the value which is into the Array at the third index (which is 2).

So, here it is how to retrieve the values placed into the Array:
trace(nomi[0]); I obtain:
filippo
trace(nomi[1]); I obtain:
luca
trace(nomi[2]); I obtain:
giovanni
trace(nomi[3]); I obtain:
giacomo
trace(nomi[4]); I obtain:
pietro

To remove any doubts and make another concrete example, we could declare and populate an array the following way:
var nomi:Array=new Array();
nomi[0]='filippo';
nomi[0]='luca';
nomi[0]='giovanni';
nomi[0]='giacomo';
nomi[0]='pietro';

in fact, if I write trace(nomi): I obtain the same output as before:
filippo,luca,giovanni,giacomo,pietro
If I write:
var nomi:Array=new Array('filippo','luca','giovanni','giacomo','pietr o');
and then
nomi[1]='cesare';
with trace(nomi); I obtain:
filippo,cesare,giovanni,giacomo,pietro

Obviously, if I would write:
trace(nomi[5]);
I would obtain:
undefined
as index 5 of this Array does not exist. We do have a total of five indexes but starting from zero (0, 1, 2, 3, 4).

Property length of the Array Class

The last example takes us to a property of the Array Class which returns the length of the Array: the property length.
If I write:
trace(nomi.length);
I obtain
5
So to retrieve the last value of the Array, I could write:
trace(nomi[nomi.length-1]);
and obtain:
pietro
using nomi.length-1, I am sure to refer to the last index of the Array, meaning its length (equal to 5) less one (bringing us to index 4 ? the last value).
This property will be very important when we will learn how to move through an array using a cycle.

Method push of the Array Class

A simple but important method is push.
As the name itself says, it is used to insert a new value into the Array.
So if I write as an example:
var nomi:Array=new Array('filippo','luca','giovanni','giacomo','pietr o');
nomi.push('antonio');
Flash inserts the passed value creating a new index. It inserts it at the end of the Array and not at the beginning of it.
So with trace(nomi); I obtain:
filippo,luca,giovanni,giacomo,pietro,antonio
Our array has now a length equal to 6. In fact with trace(nomi.lenght); I obtain:
6

Method reverse of the Array Class

Once again, as the name says, this property reverse inverts the content of our array.
If I write:
var nomi:Array=new Array('filippo','luca','giovanni','giacomo','pietr o');
nomi.reverse();
with trace(nomi); I obtain:
pietro,giacomo,giovanni,luca,Filippo
and so nomi[0] will be pietro

As said before, there are more methods and much more properties of the array Class but for now this would be enough to start with.
Having learn the basics with this tutorial, you should be able to learn by yourself the full details of the Arrays Class in Actionscript 3.0.

Up till now, we saw how to use an Array containing String type values. I would like to precise that an array can contain any other type of value: Number, textField, MovieClip, etc?etc?

Let us make an example using array and MovieClip.

I create a FLA and I save it as ?main.fla?.
I create an extra level so to have 2 of them in total.
To the first level, I assign the name ?clips? and to the second one ?code? (or ?actions?)
Into which, I create a MovieClip named ?mc_clip? in library.
I drag 5 instances of the MovieClip from the library to the stage, creating 5 instances of the same MovieClip and I assign respectively the instance name: clip_0_mc, clip_1_mc, clip_2_mc, clip_3_mc, clip_4_mc.
I select the level ?code?, I open the action Panel and I write:
var clips:Array=new Array(clip_0_mc,clip_1_mc,clip_2_mc,clip_3_mc,clip _4_mc);
in this case I created an Array named clips and I inserted the instance name of the 5 MovieClips placed on stage.
Doing trace(clips); I obtain:
[object MovieClip],[object MovieClip],[object MovieClip],[object MovieClip],[object MovieClip]
Flash tells me that inside ?clips? there are 5 MovieClips.
Now, if I write:
clips[0].alpha=0.5;
when I publish the SWF, one of the 5 MovieClips is more transparent then the other.
If you understood what is an Array, it won?t be difficult to understand why.
clips[0] is clip_0_mc
.alpha=0.5; I change the property alpha of that MovieClip to 0.5 ( it goes from 0 a 1 ).
If I write
clips[3].rotation=45;
I will notice that MovieClip placed at index 3 of the array has rotate of 45° as I changed the value of its property rotation.

Source files:

[mechellie27]

Finally!!!! You explain everything perfectly!!!! I love it, Thank you. Siete brillanti!