Positioning shapes using a loop

[Flep]

This article could reveal itself "flavourless" to some of you but I do think it is something that we often encountered.
Many times, we have the need to position more MovieClips (or sprites or Shapes, Text Field") in an ordered way.
Specially while working with XML files and data to view, we would like to view them in an ordered way, such as in a row and a back to line when necessary.
Another example could be to position thumbnails for a photo gallery via the ex attachMovie from the library and position them in a nice and tidy row.
To do this correctly (from my humble experience) we would need a "for" cycle.

Let"s see how"

To realise this example, I will draw shapes in runtime but, as already said before, it could be done attaching MovieClip from the library or loading external images"

I create an empty FLA and save it as "main.fla".
I will only assign to it a Document Class, an AS file saved as "MAIN.as", implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.display.Shape;
	
	public class Main extends MovieClip
	{
		private const num_shapes:int=50;
		private const side:int=50;
		private const distance:int=10;
		private const per_lines:int=9;
		
		public function Main()
		{
			createShapes();
		}
		
		private function createShapes():void
		{
			var X:int=0;
			var Y:int=0;
			for(var i:int=0;i < num_shapes;i++)
			{
				var shape:Shape=new Shape();
				shape.graphics.beginFill(0x0066FF,1);
				if(!(i%per_lines)&&i!=0)
				{
					X=0;
					Y+=side+distance;
				}
				shape.graphics.drawRect(distance+side*X+distance*X,distance+Y,side,side);
				addChild(shape);
				X++;
			}
		}
	}
}

To obtain this result:

Let"s analyse the code:

Properties
four constants (meaning that they will always keep the value declared at the beginning)
the first one contains the number of shapes that I have. A classic example could be the length of an array containing more shapes (my_array.length)
private const num_shapes:int=50;
the second one contains, in this case, the side of the square I will draw
private const side:int=50;
the third one contains the value of the distance in between the shapes
private const distance:int=10;
the fourth one contains the value of the number of Shapes wanted by row
private const per_lines:int=9;

Methods
createShapes();
I create 2 local variables to the function (before the cycle!) with a value equal to zero
var X:int=0;
var Y:int=0;
I start a cycle using the variable "num_shapes" as a maximum iteration
for(var i:int=0;i < num_shapes;i++)
{
I create a shape
var shape:Shape=new Shape();
I initialize its graphics
shape.graphics.beginFill(0x0066FF,1);
I apply a conditional logic that will be fundamental to place the Shape. As said before looking at the constant per_line, we want 9 Shape per row. The x coordinate will need then to be reset for every multiple of 9 and to do so, I use the syntax !(i%per_line). Even more we need to increase the y coordinate of a value equal to the dimension of the Shape"s height plus the distance (constant "distance"). All the above when "i" is different then zero, as the first iteration (i=0) will be placed fine as it is when created.. So, I will add a second condition: i!=0
if(!(i%per_lines)&&i!=0)
{
I reset the value of x to zero
X=0;
I increase the value of the variable "Y" of the Shape"s height (equal constant "side") plus the distance
Y+=side+distance;
}
I design the square of the Shape passing:
as x, the distance plus the side (constant "side") multiplied by the variable X (the one reset each multiply of 9). This way though, all the Shapes will be attached one to each other, so I add the distance still multiplied by X
as y, the distance multiplied by Y (the variable increased each multiply of 9)
as width and height, I use the constant "side"
shape.graphics.drawRect(distance+side*X+distance*X ,distance+Y,side,side);
I add the shape to the DisplayObject (the stage in this case) otherwise it would not be visible
addChild(shape);
I increase the variable X of one unit (variable which will be reset each multiply of 9)
X++;
}

NB: to understand bette

[derrida]

hi

i am just starting to learn the language and i know that this subject should be easy but i`m getting stuck with it.
i have tried to make things more simple with this code:

package{
import flash.display.MovieClip;
import box;

public class positionWithLOOP extends MovieClip{


public function positionWithLOOP () {

for (var i:int =0; i < 10; i ++) {
var myBox:box = new box();
myBox.x += 20;
myBox.y += 55;
addChild(myBox);
//trace(myBox.y);
}

}

}

}

"box" come from the fla file. its a movie with linkage.

the trace showes that the loop works but it does not show on the stage. what am i doing wrong here?

best regards

ron

[Flep]

Hi ron,
this code:

myBox.x += 20;
myBox.y += 55;

puts all the boxes at same x and same y.

you may want to do this:

myBox.x=myBox.width*i;
myBox.y=myBox.height*i;

[derrida]

thanks it does work:)