Disegnare con Actionscript 3.0 - script 2

[Flep]

Hey !

Ecco il secondo articolo della serie disegnare con actionscript 3.0 .

Per chi non avesse letto il primo articolo può andare a leggerlo quì: Disegnare con Actionscript 3.0 - script 1

Questa volta utilizzo la classe Point per dare forma al disegno.

Sfondo nero e linee bianche ma è solo un altro esempio di quello che si può ottenere con il drawing API di Actionscript 3.0

Vediamo lo script...

Creo un FLA che salvo con nome ' disegno2.fla ' e gli applico il colore sfondo nero.

Creo la Document Class, un file AS che salvo con nome ' Disegno2.as ', implementata in questo modo:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
	
	public class Disegno2 extends Sprite
	{
		private var clips_array:Array;
		private var points_array:Array;
		
		private var num_punti:int=100;
		
		public function Disegno2()
		{
			init();
			initPoints();
			initDrawingListener();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			clips_array=new Array();
			points_array=new Array();
		}
		
		private function initPoints():void
		{
			for(var i:int=0;i < num_punti;i++)
			{
				var xx:int=Math.random()*stage.stageWidth;
				var yy:int=Math.random()*stage.stageHeight;
				var point:Point=new Point(xx,yy);
				points_array.push(point);
				
				var sprite:Sprite=new Sprite();
				addChild(sprite);
				clips_array.push(sprite);
			}
		}
		
		private function initDrawingListener():void
		{
			addEventListener(Event.ENTER_FRAME,drawing);
		}
		
		private function drawing(e:Event):void
		{
			for(var i:int=0;i < clips_array.length;i++)
			{
				var xx:int=Math.random()*stage.stageWidth;
				var yy:int=Math.random()*stage.stageHeight;
				
				points_array[i].x=xx;
				points_array[i].y=yy;
				
				clips_array[i].graphics.clear();
				clips_array[i].graphics.moveTo(stage.stageWidth/2,stage.stageHeight/2);
				clips_array[i].graphics.lineStyle(.25,0xFFFFFF,.2);
				clips_array[i].graphics.lineTo(points_array[i].x,points_array[i].y);
			}
		}
	}
}

Ecco il risultato:

Analizziamo il codice.

Proprietà:
due arrays in cui inserisco i punti della classe Points e le sprites che creo e che utilizzo per disegnare
private var clips_array:Array;
private var points_array:Array;
un numero totale di punti ( più è alto più la CPU dell' utente ne risente )
private var num_punti:int=100;


Metodi:
init();
imposto la velocità del frame rate
stage.frameRate=31;
inizializzo i due arrays
clips_array=new Array();
points_array=new Array();


initPoints();
creo un ciclo con massima iterazione pari al valore di num_points
for(var i:int=0;i < num_punti;i++)
creo due variabili numeriche che contengono n valore casuale da 0 al valore della larghezza/altezza dello stage
var xx:int=Math.random()*stage.stageWidth;
var yy:int=Math.random()*stage.stageHeight;
creo un' istanza della classe Point a cui assegno le coordinate pari al valore delle 2 variabili xx e yy
var point:Point=new Point(xx,yy);
inserisco il point nell' array points_array per tenere traccia di ogni punto
points_array.push(point);
creo un' istanza della classe Sprite
var sprite:Sprite=new Sprite();
aggiungo la sprite al DisplayObject o non sarebbe visibile
addChild(sprite);
inserisco nell' array clips_array la sprite in modo da tenere traccia di ognuna di loro e poterle richiamare
clips_array.push(sprite);


initDrawingListener();
aggiungo un intervallo ENTER_FRAME che chiama il metodo drawing() tante volte al secondo pari al valore del frame rate
addEventListener(Event.ENTER_FRAME,drawing);


drawing();
creo un ciclo con massima iterazione pari al valore della lunghezza dell' array clips_array
for(var i:int=0;i < clips_array.length;i++)
creo due variabili numeriche che contengono n valore casuale da 0 al valore della larghezza/altezza dello stage
var xx:int=Math.random()*stage.stageWidth;
var yy:int=Math.random()*stage.stageHeight;
assegno al point, che è all' interno dell' array points_array con indice dell' iterazione ciclo del momento, le coordinate pari al valore delle variabili xx e yy
points_array[i].x=xx;
points_array[i].y=yy;
pulisco le grafiche della sprite che è all' interno dell' array clips_array con indice dell' iterazione ciclo del momento
clips_array[i].graphics.clear();
inizializzo le grafiche
clips_array[i].graphics.moveTo(stage.stageWidth/2,stage.stageHeight/2);
clips_array[i].graphics.lineStyle(.25,0xFFFFFF,.2);
passo al metodo lineTo le coordinate x e y del point che è all' interno dell' array points_array con indice dell' iterazione ciclo del momento
clips_array[i].graphics.lineTo(points_array[i].x,points_array[i].y);

NB: Avrei anche potuto ' bypassare ' e non utilizzare la classe Point, assegnando direttamente al metodo lineTo i valori delle variabili xx e yy ma questo tutorial vuole spiegare come integrare la classe Point con i disegni in runtime.

Alla prossima !