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:
Ecco il risultato:Code: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); } } } }
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 !
Bookmarks