Posizionare delle shapes utilizzando un ciclo

[Flep]

Questo articolo potrebbe risultare ' insipido ' a qualcuno di voi ma credo che spesso ne abbiamo avuto a che fare.
Spesso ci capita di dover posizionare molte MovieClip ( oppure Sprites o Shapes, campi di testo... ) in modo ordinato. Soprattutto quando lavoriamo con dei files XML e quindi dei dati da visualizare, ci piacerebbe metterli in un ordine di visualizzazione ordinato, tutti uno in fila all' altro e che vadano anche a capo.
Un altro esempio potrebbe essere quello di aver bisogno di posizionare delle thumbnails per una galleria immagini tramite attachMovie da libreria e le vogliamo tutte in fila, belle precise.
Per farlo in un modo corretto ( per la mia umile conoscenza di Actionscript ) ci serve utilizzare un ciclo for.

Vediamo come...

Per fare questo esempio, disegnerò delle Shapes a runtime ma, come già detto, potrebbe essere fatto attaccando delle MovieClip da libreria o caricando delle immagini dall' esterno, ecc ecc.

Creo un FLA che salvo con nome ' main.fla ' che lascio vuoto, tranne che per asssegnargli la Document Class. Un file AS che salvo con nome ' Main.as ', implementata in questo modo:

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++;
			}
		}
	}
}

Per ottenere questo risultato:

Analizziamo il codice

Proprietà
quattro costanti ( quindi non più modificabili, mantengono sempre il valore impostato in fase di dichiarazione )
la prima contiene il numero delle Shape che ho, un esempio classico potrebbe essere la lunghezza di un Array che contiene svariate Shape ( my_array.length)
private const num_shapes:int=50;
la seconda contiene in questo caso il lato del quadrato che andrò a disegnare
private const side:int=50;
la terza contiene il valore della distanza che voglio inserire tra una e l' altra
private const distance:int=10;
l' ultima contiene il valore di quante Shape voglio per ogni riga
private const per_lines:int=9;

Metodi
createShapes();
creo 2 variabili locali alla funzione ( prima del ciclo ! ) con valore zero
var X:int=0;
var Y:int=0;
apro il ciclo utilizzando come valore massimo delle iterazioni la variabile num_shapes
for(var i:int=0;i < num_shapes;i++)
{
creo una Shape
var shape:Shape=new Shape();
inizializzo le sue grafiche
shape.graphics.beginFill(0x0066FF,1);
applico una logica condizionale che sarà fondamentale per disporre le Shape, questo perchè, ad esempio abbiamo detto ( guardando la costante per_line ) che vogliamo 9 Shape per ogni riga, ciò significa che dobbiamo azzerare la coordinata x per ogni multiplo di 9 e per farlo uso la sintassi !(i%per_line). In più dobbiamo incremetare la coordinata y di un valore pari alle dimensione dell' height della Shape più la distanza ( costante distance ). Tutto questo però solo se la ' i ' è diversa da zero, in quanto alla prima iterazione ( con i=0 ) ci stanno bene le coordinate che vengono create, per cui aggiungiamo una seconda condizione: i!=0
if(!(i%per_lines)&&i!=0)
{
riporto il valore della variabile X a zero
X=0;
incremento il valore della variabile Y dell' height della Shape ( quindi pari al valore della costante side ) + la distanza
Y+=side+distance;
}
disegno il quadrato della Shape passandogli:
come x, la distanza + il lato ( costante side ) moltiplicato per la variabile X ( quella famosa che viene azzerata ogni volta che l'iterazione del ciclo è un numero multiplo di 9 ( costane per_line ). Però così avrei le Shape una attaccata all' altra, quindi devo aggiugere la distanza e quindi + distance sempre moltiplicato per X
come y, gli passo la distanza moltiplicata per Y ( lavariabile che viene incrementata ognivolta che l' iterazione del ciclo è un numero multiplo di 9 )
come width e come height gli passo il valore della costante side
shape.graphics.drawRect(distance+side*X+distance*X ,distance+Y,side,side);
aggiungo la shape al DisplayObject ( o stage in questo caso ) altrimenti non sarebbe visibile
addChild(shape);
incremento la variabile X di una unità ( e quando l' iterazione del ciclo sarà un multiplo di 9 verrà riportata a zero )
X++;
}

NB: consiglio di fare delle prove, per capire meglio la logica utilizzata in questo ciclo, cambiando i valori delle costanti.

Stay tuned !