Disegnare con Actionscript 3.0 - script 3

[Flep]

Salve ragassuoli :P

Terzo appuntamento con il disegno in runtime.
Terzo appuntamento con la drawing API di Actionscript 3.0 .
In questo articolo utilizzerò il metodo beginGradientFill accompagnato da una Matrix di tipo GradientBox.
Come sempre vi invito, una volta studiato lo script, a provare a fare dei vostri esperimenti dandolibero spazio alla fantasia...e
...perchè no... se volete pubblicarli nel forum di questo sito sono i benvenuti e ne sarei onorato :)

Entriamo nello script...

Creo un FLA,che salvo con nome ' disegno3.fla ' .
Creo al Document Class, un file AS che salvocon nome ' Disegno3.as ', implementata in questo modo:

package
{
	import flash.display.MovieClip;
	import flash.display.GradientType;
	import flash.display.InterpolationMethod;
	import flash.display.SpreadMethod;
	import flash.geom.Matrix;
	import flash.events.Event;
	
	public class Disegno3 extends MovieClip
	{
		private var clip:MovieClip;

		private var colors_array:Array;
		private var rapporti_array:Array;
		
		private var sine:Number;
		private var angle:Number=0;

		public function Disegno3()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			colors_array=new Array('0xB16363','0x763A3A','0xECE9D8');
			rapporti_array=new Array(0,200,255);
			
			clip=new MovieClip();
			this.addChild(clip);
			
			this.addEventListener(Event.ENTER_FRAME,disegna);
		}
		
		private function disegna(e:Event):void
		{
			this.removeChild(clip);
			
			sine=Math.sin(angle)*20;
			
			var alphas:Array=new Array(sine,1,1);
			var matrix:Matrix=new Matrix();
			matrix.createGradientBox(200,100,sine,stage.stageWidth/4,stage.stageHeight/2);
			
			clip=new MovieClip();
			clip.graphics.clear();
			clip.graphics.beginGradientFill(GradientType.RADIAL,colors_array,alphas,
			rapporti_array,matrix,SpreadMethod.REFLECT,
			InterpolationMethod.RGB,.7);
			clip.graphics.lineTo(stage.stageWidth,0);
			clip.graphics.lineTo(stage.stageWidth,stage.stageHeight);
			clip.graphics.lineTo(0,stage.stageHeight);
			clip.graphics.endFill();
			
			angle+=.01;
			
			this.addChild(clip);
		}
	}
}

Analizziamo il codice

Proprietà
una MovieClip in cui disegnerò
private var clip:MovieClip;
un array che contiene i colori che voglio utilizzare
private var colors_array:Array;
un array che contiene i valori di rapporto ampiezza del gradiente. Praticamente non sono altro che quei valori che Flash crea quando ad esempio disegnamo sullo stage una forma e poi dal pannello Colori applichiamo un gradiente trascinando ilcolore nella barra RGB del pannello.
private var rapporti_array:Array;
una variabile numerica che conterrà il valore di un seno trigonometrico ( cosa pensavate...ad una altro tipo di seno ?.. )
private var sine:Number;
una variabile numerica che contiene il valore dell' angolo su cui calcolare il seno e che verrà incrementato
private var angle:Number=0;

Metodi
init();
imposto una velocita di frame rate
stage.frameRate=31;
inizializzo l' array dei colori
colors_array=new Array('0xB16363','0x763A3A','0xECE9D8');
inizio l'array dei rapporti
rapporti_array=new Array(0,200,255);
creo una nuova MovieClip e la aggiungo al DisplayObject ( altrimenti non sarebbe visibile )
clip=new MovieClip();
this.addChild(clip);
aggiungo un listener in ascolto di ENTER_FRAME che chiamerà il metodo disegna() tante volte al secondo pari al valore del frame rate
this.addEventListener(Event.ENTER_FRAME,disegna);

disegna();
rimuovo la clip ( NB: questo ' giochetto ' di creare la clip e poi subito rimuoverla, mi serve in quanto ad ogni intervallo voglio rimuovere la clip per liberare memoria e se non lo avessi fatto anche nella funzione init, adesso flash mi darebbe un errore perchè clip avrebbe un valore pari a null.
this.removeChild(clip);
calcolo il seno dell'angolo ( variabile angle )
sine=Math.sin(angle)*20;
creo un array che contiene gli alpha di ogni colore che utilizzo
var alphas:Array=new Array(sine,1,1);
creo una matrice
var matrix:Matrix=new Matrix();
gli dico che deve essere di tipo GradientBox tramite il metodo della classe Matrix createGradientBox che come parametri vuole: width, height, rotation, x, y
matrix.createGradientBox(200,100,sine,stage.stageW idth/4,stage.stageHeight/2);
creo una nuova MovieClip
clip=new MovieClip();
pulisco le grafiche della MovieClip
clip.graphics.clear();
utilizzo il metodo beginGradientFill che vuole i seguenti parametri:
il tipo di gradiente ( radial, linear, ecc ecc ) che passo utilizzando il metodo statico RADIAL della classe GradientType
un array contenenti valori alpha ( trasparenza ), quindi gli passo array_alphas, che contiene le trasparenze dei colori che ho utilizzato
un array con le distanze di ogni colore utilizzato nel gradiente ( quindi gli passo rapporti_array )
una matrice ( gli passo matrix che è di tipo Box )
un valore per determinare l' estensione del gradiente ( utilizzo il metodo statico REFLECT della classe SpreadMethod )
un valore per determinare che l'interpolazione del gradiente deve avvenire sul colore ( quindi uso il metodo statico RGB della classe InterpolationMethod )
un valore numerico che localizzo il centro del gradiente
clip.graphics.beginGradientFill(GradientType.RADIA L,colors_array,alphas,rapporti_array,matrix,Spread Method.REFLECT,InterpolationMethod.RGB,.7);
disegno con la clip
clip.graphics.lineTo(stage.stageWidth,0);
clip.graphics.lineTo(stage.stageWidth,stage.stageH eight);
clip.graphics.lineTo(0,stage.stageHeight);
clip.graphics.endFill();
incremento l' angolo
angle+=.01;
aggiungo la clip al DisplayObject
this.addChild(clip);

Buon Divertimento !