Arrays

An array is basically a container for holding data, similar to the way a variable hold data. The difference is that an array can hold multiple pieces of data. The location of each piece of data is referred to as it index and will always fall in a specific sequence. These indexes are numbers sequentially and begin at zero. Since Flash numbers each piece of data within the array it is easy for the programmer to access a specific piece of data at any given time. In ActionScript you are not forced to contain one type of data in an array. This means that an array may contain a number in index 0, a name in index 1, and a movie clip in index 2. Creating an array is rather simple an only requires two steps. The first is to declare the array, second is to populate the array with data.

Animation with Arrays

To Create an array select the first key frame on the actions layer in the time line. Copy the sample code. This code is pretty straight forward. You are creating a variable called colorsArray, data typing it as an array and setting it equal to a new array and that is it for creating the array. To add data to the array copy and past the code from the next example. With this code your are simply calling the name of the array, then in between the braces you are telling flash what index of the array to use. Lastly you are telling flash to put something in the specified index.

var colorsArray:Array = new Array();

var colorsArray:Array = new Array();

A loop will be used to access the data contained within the array, but first create another array by coping the example code. This is the section that makes this an advanced Flash CS3 Tutorial. The first line is the Array that this Flash CS3 Tutorial is all about. Next, is the for loop that you should already understand. Inside the loop is where the fun begins. The for loop is actually creating circles with a color from the first array and adding them to the cirArray so they can be used later. First, a variable num is created and set to be a random number between 0 an 4, (see math tutorials) if you need a better understanding. Next, the code is creating a new Sprite (object) and the next three lines are using graphics properties to create a circle (see controlling graphics tutorial) inside the Sprite or cir variable.

var cirArray:Array = new Array();

for (var i:int = 0; i < 15; i++){ var num = Math.floor(Math.random() * 5)

var cir:Sprite = new Sprite();

cir.graphics.lineStyle(1);

cir.graphics.beginFill(colorsArray[num]);

cir.graphics.drawCircle(0,0,30);

cir.x = Math.random() * 500

cir.y = Math.random() * 300

cir.alpha =.5

addChildAt(cir, i)

cir.name=”cir”+i

cirArray[i] = this.getChildByName(“cir”+i) };

If you look at the line cir.graphics.beginFill(colorsArray[num]) you will see a reference to the array you first created holding the color values. This line of ActionScript is simply using the random number (num) to decide which index of the array to pull the color information from. You should understand the two lines that are setting the cir.x and cir.y to a random location, then the cir’s alpha is set to .5 making it semi transparent, and finally the circle is added to the stage with the addChildAt. The last two lines of this code are particularly important to the array. cir.name=”cir”+i names the current instance of cir as cir + i and the last line is a method of the DisplayObjectContiner class that returns the object with the specified name, thus placing the newly created and named instance of the cir inside a separate index of the cirArray. Sounds a little complicated but basically it is the same as manually adding an object to each index of the array as you did in the first array.

start_btn.addEventListener(MouseEvent.CLICK, startMotion);

function startMotion(event:MouseEvent):void{

stage.addEventListener(Event.ENTER_FRAME, motion);

stop_btn.visible = true

start_btn.visible = false }; stop_btn.addEventListener(MouseEvent.CLICK, stopMotion);

function stopMotion(event:MouseEvent):void{

stage.removeEventListener(Event.ENTER_FRAME, motion);

stop_btn.visible = false

start_btn.visible = true };

At this point in the Flash CS3 Tutorial ActionScript has created two arrays and added data to each of them, now to interact with the data. Copy the example code to the actions panel below the arrays. In the source file you should have noticed two buttons, stop and start. This section of code is simple the event listeners to make the buttons work.

function motion(event:Event):void{ for (var i:int = 0; i < 15; i++){

if (cirArray[i].x > 520){

cirArray[i].x = -20

cirArray[i].y = Math.random()* 300

} else

cirArray[i].x +=15

} };

Once again add the example code to the actions panel. The first line of code is a simple function that is being called by the start button. Next, is the for loop that moves through the array. You could change the number 15 to be the length of the array by replacing it with cirArray.lenght and it would automatically detect the length of the array. Next, is an if statement checks to see if the object contained with the specific index of the array is on the stage. If the object is on the stage it moves the object 15 pixels and if it is not on the stage is moves it to the other side of the stage and randomly changes the y position. This simple if statement is what makes the 15 simple circles seem to be an endless amount.

Press Control-Enter and test the movie, if all goes well you have a Flash CS3 Animation created with ActionScript Arrays

You can get the source files at frenchsquared.com

Flash CS3 Tutorials, Copyright FrenchSquared 2008