Intro to Arrays--tutorial.jcwcn.com

An Array is just a computer term for a: List. Arrays are extremely useful in Flash, and there are numerous uses for Arrays in other programs. The aim of this tutorial is to learn how to use Arrays. There are four examples in this tutorial that show you how to use Arrays in slightly different ways. This tutorial goes through all of them in detail, explaining all the ActionScript.

Example: Download the Flash file Int 130a

Understanding how Arrays work

What is an Array? Think of an Array as a list of cells, each cell in the list has a number to identify it. Each cell can be used to hold information such as text, or a number, or an image or even some ActionScript etc.

Note: An Array size or length it is the same thing. It refers to the number of cells that store information in the Array.

Two Different ways to set up an Array:

I would personally recommend this method, it's easier to understand, edit, and control. You can clearly see which cell number each value is being stored into and then being added to the Array. Also it is simple and much tidier:

var myArrayName = new Array();
myArrayName[0] = "You can have text or a number here or anything you like really!";
myArrayName[1] = "text here";
myArrayName[2] = "123";
myArrayName[3] = "text and numbers 123";
//etc...

This is another method, but I find it difficult to use. It's hard to know if you're entering a new value in the first Array cell, or the second or third or etc... It's easy to get confused, as this method doesn't display what cell number each value is going into:

var myArrayName = new Array("You can have text or a number here or anything you like really!","text here","123","text and numbers 123"); // etc...

To get a value from the Array use:

myArrayName[x]; //Where x is the value from the Array you want to fetch. An example is:
trace(myArrayName[0]);

This would return the first value from the Array which is: "You can have text or a number here or anything you like really!"

trace(myArrayName[1]); //Would return the second value in the Array which is: "text here"

Counting the Length of an Array

Notice how the Array starts at 0 and not at 1. This is important to remember as the count starts from zero and not one. An example of this important fact would be:

trace(myArrayName.length);

This would tell you that the Array length is equal to 4. Yes there are 4 items listed in the Array but the last number of the Array is 3. Is Flash inaccurate? No, Flash is accurate because the computer counts from 0. It treats 0 as the first number instead of 1. Always remember this!.

To overcome this problem just minus 1 from the Array, and you will find the highest value in the Array:

trace(myArrayName.length-1); //This will return the Array length as 3 and 3 is the highest value in the list.

An example of when you may find this problem would something like this (for the moment don't worry if you don't understand the ActionScript). What is important is that you set an Array to have a length of 3:

var myArrayName = new Array(3);
for (var i = 0; i<=myArrayName.length-1; i++) {
myArrayName[i] = "myImage"+i+".gif";
trace(myArrayName[i]);
}

If you place the above code in Frame 1 of an empty Flash Movie you will notice that when you test the Movie it will display the following in the Output Box:

The Image names are traced in the Output Box when you test the Movie.

Although the Array length above was set to 3, it starts at cell number 0 and ends at cell number 2 not 3. For example, people often think if they set the Array to 3, then the end cell number will be 3, but it's always one less than the actual number you enter as the Array length. It's important to remember this and take it into account. The Array can be any length you like, just change the number 3 to whatever number you want.

You can change a value in Array, or add a new Array value at anytime simply by referring to:

_root.myArrayName[x] = "change current value or add new value";

An example of changing the first Array value:

_root.myArrayName[0] = "I have changed";

An example of adding a value to the Array:

_root.myArrayName[4] = "I have been added";

You can also set the Array size like this:

var myArrayName = new Array(3);

Then add your values to it later on. Although the Array length above is set at 3, you can still add values to the Array and increase the length:

myArrayName[4] = "myImage0.gif";

This would add "myImage0.gif" to cell 4, even though the Array was originally only 3 cells long. The Array size/length will now have changed from 3 to 4. That's all the basic's your need to know about Arrays.

In the example below, each button calls a different listing from the Array.

Example: Download the Flash file Int 128a

Example A - Step One: Building the Movie

Open a new: Flash Movie
Set the Movie size to: 200 x 130
Select the Text Tool:
Drag out a text box on stage: Text Box
If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
In the Property Inspector select: Dynamic Text

Selecting Dynamic Text.
Give the Text Box a Variable Name (Var): myText

Your Property Inspector should look similar to this.
Note: Don't mix up the Instance Name and Variable name (Var).
Type inside the text box something like this: Click one of the buttons to update the text.
Go back to using the standard Selection Tool:
Create or place three buttons along the bottom of the Movie. I used the Oval buttons that are in the Common Library: Window > Other panels > Common Libraries > Buttons
Note: Do not use Components, Knobs or Faders from the Common Library as they function differently.

Your Movie should look similar to this.

You have completed building the Movie and are now ready to create the ActionScript for the Array.

Example A - Step Two: Building the Array

In the Timeline click on: Frame 1
If the Action Box is closed, open it: Window > Actions (F9)
Place the following ActionScript:

var myArray = new Array();
myArray[0] = "You can have text or a number here or anything you like really!";
myArray[1] = "More text here.";
myArray[2] = "A number here: 123";
myArray[3] = "Other stuff";

You can see that this sets up a standard Array called: myArray. There are four listings in total.

Example A - Step Three: The Button ActionScript

Select the blue button on the left: Blue Button
Attach the following ActionScript to the button (skip the gray comments if you wish):

// On release of the Mouse button do...
on (release){
// My Text is the same as the first listing in the Array
myText=myArray[0];
}

You can see that the ActionScript is very simple.
For the subsequent buttons simply repeat the same ActionScript but change the Array number each time. Like this:

on (release){
myText=myArray[1];
}

In the example below there is a single button that goes through the Array listing in order and then goes back to the beginning and starts again. In other words it is a loop.

Example: Download the Flash file Int 128b

This Movie displays a variable called myNumber. This is the number that keeps count of your position in the listing and is then used to call the next listing. Ordinarily you would not display this number. I have only done so as it is easier to see what the ActionScript is doing.

Example B - Step One: Building the Movie

Building the Movie is exactly the same as in Step One of the previous example (A), except that this time the Movie only has one button. Because there is only one button, the default text is marginally different:

Default start up text is different.

Example B - Step Two: Building the Array

Place the same ActionScript in frame 1 of the Movie as you did in the previous example. This time there is one additional line:

var myArray = new Array();
myArray[0] = "You can have text or a number here or anything you like really!";
myArray[1] = "More text here.";
myArray[2] = "A number here: 123";
myArray[3] = "Other stuff";
myNumber = 0;

The additional line introduces a variable called myNumber which will be counted. This is so that the Flash Movie knows where you are up to in the Array. As you can see, it is set to zero which is the first listing in the Array.

Example B - Step Three: The Button ActionScript

The ActionScript for the button is as follows:

// On release of the Mouse button do the following...
on (release) {

    // Set myText to the same as myNumber in the Array
    myText = myArray[myNumber];

    // If myNumber is 3 then...
    if (myNumber == 3) {

        // Reset myNumber to zero
        myNumber = 0;

    // Otherwise...
    } else {

        // Add one to myNumber
        myNumber = myNumber+1;

    // Close the if-else statement
    }

// Close the on(release) statement
}

When you click the button, the ActionScript sets the Array to the variable myNumber. It then checks to see if myNumber is 3. If it is 3, it resets myNumber to 0. If it is not three it adds 1 to myNumber.

Arrays: Example C

In this example there is a back and forward button to scroll through the listings. It also tells you when you have come to the end or beginning of the listing, so that you will know to go back the other way. It does not start at the beginning, which would be number 0 but at the number 2 listing.

This Movie also displays the variable called myNumber. As with the previous example this number keeps count of your position in the listing and is then used to call the next (or previous) listing. Ordinarily you would not display this number. I have only done so as it is easier to see what the ActionScript is doing.

Example: Download the Flash file Int 128c

Note: Keep clicking past the end (or start) of the listing. You will notice that myNumber keeps counting up (or down) even though you have got to the end (or beginning) of the listings. This may seem strange at first, but it is more work to stop the number at the correct place, than to let it keep counting. Remember that ordinarily the user would not see this number.

Example C - Step One: Building the Movie

Building the Movie is exactly the same as in Step One of the first example (A), except that this time the Movie only has two buttons. I have also selected slightly different buttons: I have used the Next and Previous buttons from the Circle set of buttons in the Common Library.

Example C - Step Two: Building the Array

The Array is set up in frame one of the Movie, in exactly the same fashion as the example (B). The only difference is that this time I have set myNumber to 2. This means that the Array will start in the middle. This means that initially the user can click either backwards or forwards.

Example C - Step Three: The button ActionScript

The Back button ActionScript

// On release of the Mouse Button do the following...
on (release) {

    // Subtract 1 from myNumber
    myNumber = myNumber-1;

    // If myNumber is less than 0 then...
    if (myNumber< 0) {

        // Display the following message
        myText = "You cannot go back any further !!!";

    // If myNumber is greater than 3 then...
    } else if (myNumber>3) {

        // Reset myNumber to 3 and ...
        myNumber = 3;

        // Display the Array listing for myNumber (which is 3)
        myText = myArray[myNumber];

    // Otherwise ...
    } else {

        // Display the Array listing for myNumber
        myText = myArray[myNumber];

    // Close 'if else' statement
    }

// Close on(release) statement
}

What this does is:

Subtract one from myNumber (go back one) and then it does one of the following:
If myNumber is less than zero, it displays the message: You cannot go back any further !!!
If myNumber is greater than 3, it resets the number back to 3 and displays the Array listing the for number 3.
If the number is anything else (ie: between 0 and 3), it displays the appropriate Array listing.

The Forward Button ActionScript

This is just the opposite of the above:

// On release of the Mouse Button
on (release) {

    // Add 1 to my number
    myNumber = myNumber+1;

    // If myNumber is greater than 3 then...
    if (myNumber>3) {

        // Display the following
        myText = "This Array is Finished !!";

    // If myNumber less than 0 then...
    } else if (myNumber < 0) {

        //Reset myNumber to: 0 and ...
        myNumber = 0;

        // Display the Array listing for myNumber (which is 0)
        myText = myArray[myNumber];

    // Otherwise ...
    } else {

        // Display the Array listing for myNumber
        myText = myArray[myNumber];

    // Close if-else statement
    }

// Close on(release) statement
}

Arrays: Example D

This is a better solution than the previous example (C). In this example there is also a back and a forward button to scroll through the listings. If you are at the beginning of the listings, the back button disappears and if you are at the end of the listing the forward button disappears. This means that you do not have to display a silly message like: You are at the end!

You cannot get beyond the end of the listings as the buttons are not available to press!

Example: Download the Flash file Int 128d

Note: Remember that ordinarily the user would not see the myNumber display.

Example D - Step One: Building the Movie

Building the Movie is similar to in Step One of the first example (A), except that this time the Movie only has two buttons. There is also one other important difference:

The Back button has an Instance Name: back
The Forward button has an Instance Name: forward

You give the button an Instance name in the Property Inspector.

Example D - Step Two: Building the Array

The Array is set up in frame one of the Movie in exactly the same fashion as in example C. The only difference is:

This time I have set myNumber to 0. So the Array starts at the beginning.
The back button is set to invisible as default.

Example D - Step Three: The Button ActionScript

The Back Button

// On release of the Mouse Button
on (release) {

    // Subtract 1 from my number
    myNumber = myNumber-1;

    // If myNumber is equal to or less than 0 then...
    if (myNumber <= 0) {

        // Display the following
        myText = myArray[myNumber];

        // Makes the back button invisible
        back._visible = 0;

        // Makes the forward button visible
        forward._visible = 1;

    // If myNumber is greater than or equal to 3 then...
    } else if (myNumber >= 3) {

        // Reset myNumber to 3 and ...
        myNumber = 3;

        // Display the Array listing for myNumber (which is 3)
        myText = myArray[myNumber];

        // Makes the back button visible
        back._visible = 1;

        // Makes the forward button invisible
        forward._visible = 0;

    // Otherwise ...
    } else {

        // Display the Array listing for myNumber
        myText = myArray[myNumber];

        // Makes the back button visible
        back._visible = 1;

        // Makes the forward button visible
        forward._visible = 1;

    // Close if-else statement
    }

// Close on(release) statement
}

The Forward Button

// On release of the Mouse Button
on (release) {

    // Add 1 to my number
    myNumber = myNumber+1;

    // If myNumber is greater than 3 then...
    if (myNumber >= 3) {

        // Resets myNumber to 3
        myNumber = 3;

        // Display the Array listing for myNumber (which is 3)
        myText = myText = myArray[myNumber];;

        // Makes the back button visible
        back._visible = 1;

        // Makes the forward button invisible
        forward._visible = 0;

    // If myNumber is equal to or less than 0 then...
    } else if (myNumber <= 0) {

        //Reset myNumber to: 0 and ...
        myNumber = 0;

        // Display the Array listing for myNumber (which is 0)
        myText = myArray[myNumber];

        // Makes the back button invisible
        back._visible = 0;

        // Makes the forward button visible
        forward._visible = 1;

    // Otherwise ...
    } else {

        // Display the Array listing for myNumber
        myText = myArray[myNumber];

        // Makes the back button visible
        back._visible = 1;

        // Makes the forward button visible
        forward._visible = 1;

    // Close if-else statement
    }

// Close on(release) statement
}

That's it. I hope you are now an Array Whiz!

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

Intro to Arrays

relation tutorial

Category

New

Hot