Disegnare patterns con Actionscript 3.0

[Flep]

Abbiamo visto diverse volte, come disegnare con Actionscript 3.0:
- esempio 1
- esempio 2
- esempio 3
...ma...avete mai provato a disegnare un pattern con Actionscript ?
Non è difficile e possiamo ottenere degli sfondi molto carini.

Chiaramente chi ha buone doti di design potrebbe crearli con Photoshop o Fireworks, ma anche noi coders abbiamo una dignità grafica !

Seguitemi e vedrete...

Creo un FLA che salvo con nome ' pattern_1.fla '.
Creo la sua Document Class, un file AS che salvo con nome ' Main.as ', implementata in questo modo:

package
{
	import flash.display.MovieClip;
	
	public class Main extends MovieClip
	{
		public function Main()
		{
			var pattern_1:Pattern_1=new Pattern_1(this);
		}
	}
}

Notiamo che nella funzione costruttrice istanzio un' altra classe chiamata Pattern_1, la seguente:

package
{
	import flash.display.MovieClip;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.geom.Matrix;
	
	public class Pattern_1
	{
		private var _fla:MovieClip;
		private var background:MovieClip;
		
		private var def_array:Array;
		
		private var pat:BitmapData;
		
		public function Pattern_1(fla:MovieClip)
		{
			_fla=fla;
			
			init();
			createBackground();
		}
		
		private function init():void
		{
			def_array=new Array(
			'00011010101010010010101010110001',
			'00100000000001000100000000001000',
			'01000000000000101000000000000100',
			'10000000000000010000000000000011',
			'10000000000000101000000000000010',
			'01000000000001000100000000000100',
			'01000000000010000010000000000100',
			'00111000000100010001000000111000',
			'00000100000010000010000001000000',
			'00111000000100010001000000111000',
			'01000000000010000010000000000100',
			'01000000000001000100000000000100',
			'10000000000000101000000000000010',
			'10000000000000010000000000000011',
			'01000000000000101000000000000100', 
			'00100000000001000100000000001000',
			'00011010101010010010101010110001',
			'10010101010100111001010101010011');
		}
		
		private function createBackground():void
		{
			background=new MovieClip();
			_fla.addChild(background);
			
			background.graphics.beginBitmapFill(drawBitmapPattern(def_array,0x22FFFFFF),new Matrix(),true);
			background.graphics.lineTo(_fla.stage.stageWidth, 0);
			background.graphics.lineTo(_fla.stage.stageWidth, _fla.stage.stageHeight);
			background.graphics.lineTo(0, _fla.stage.stageHeight);
			background.graphics.lineTo(0, 0);
		}
		
		private function drawBitmapPattern(def:Array,color:Number):BitmapData
		{
			var w:Number=def[0].length;
			var h:Number=def.length;
			var pattern:BitmapData=new BitmapData(w,h,true,0x00FFFFFF);
			for(var r:int=0;r < h;r++) 
			{
				for(var c:int=0;c < w;c++) 
				{
					if(def[r].charAt(c)=='1')
					pattern.setPixel32(c,r,color);
				}
			}
			return pattern;
		}
	}
}

Risultato:

Analizziamo il codice:

dalla funzione costruttrice di Main istanzio Pattern_1 passandogli la root del FLA in questo modo:
var pattern_1:Pattern_1=new Pattern_1(this); ( per chi avesse dei dubbi, consiglio di leggersi la sezione Object Oriented Programming )

Pattern_1.as
Proprietà
una MovieClip con cui tengo tracia della root del FLA
private var _fla:MovieClip;
una MovieClip che mi serve per disegnare
private var background:MovieClip;
un array
private var def_array:Array;
una BitmapData
private var pat:BitmapData;

Metodi
init();
popolo l' array con delle stringhe di soli 1 e 0 ed aventi tutte la stessa lunghezza, quindi l' array a indice zero ( def_array[0] ) conterrà una stringa di ( in questo caso ) 32 caratteri ( potrebbe anche essere di 20 o di 200, l' importante è che tutte le strighe abbiano la medesima lunghezza ). Queste stringe se le guardiamo da lontano sembra davvero un disegno e infatti sarano loro che andranno a comporre il pattern.
def_array=new Array(
'00011010101010010010101010110001',
'00100000000001000100000000001000',
'01000000000000101000000000000100',
'10000000000000010000000000000011',
'10000000000000101000000000000010',
'01000000000001000100000000000100',
'01000000000010000010000000000100',
'00111000000100010001000000111000',
'00000100000010000010000001000000',
'00111000000100010001000000111000',
'01000000000010000010000000000100',
'01000000000001000100000000000100',
'10000000000000101000000000000010',
'10000000000000010000000000000011',
'01000000000000101000000000000100',
'00100000000001000100000000001000',
'00011010101010010010101010110001',
'10010101010100111001010101010011');

createBackground();
istanzio background come nuova MovieClip e con addChild la rendo visibile ( addChild nella root del FLA, infatti dico _fla.addChild )
background=new MovieClip();
_fla.addChild(background);
utilizzo il metodo beginBitmapFill e come valori utilizzo: una BitmapData che mi viene restituita dal metodo drawBitmapPattern al quale a sua volta passo l' array ed un colore per disegnare, una nuova matrice e una boolean true
background.graphics.beginBitmapFill(drawBitmapPatt ern(def_array,0x22FFFFFF),new Matrix(),true);
delimito il disegno esattamente alle misure dello stage
background.graphics.lineTo(_fla.stage.stageWidth, 0);
background.graphics.lineTo(_fla.stage.stageWidth, _fla.stage.stageHeight);
background.graphics.lineTo(0, _fla.stage.stageHeight);
background.graphics.lineTo(0, 0);

drawBitmapPattern(def:Array,color:Number):BitmapDa ta
questo metodo disegna in base alla stringa di def_array e restituisce una BitmapData
creo una variabile numerica e gli assegno la lunghezza del primo indice di def_array che sarà 32 in quanto sappiamo che Flash vede le stringhe come degli arrays, quindi def_array[0] corrisponde esattamente al valore della lunghezza della stringa contenuta appunto in def_array all' indice zero.
var w:Number=def[0].length;
creo una variabile numerica e questa volta gli assegno la lughezza dell' array ( che è 18 in quanto contiene 18 stringhe ).
var h:Number=def.length;
creo una nuova Bitmapdata che gli passo come dimensioni la w e la h ( quindi un rettangolino di 32x18 ), un true per gestire la trasparenza, e un colore di sfondo.
var pattern:BitmapData=new BitmapData(w,h,true,0x00FFFFFF);
due cicli innestati con iterazione massima h per il primo e w per il secondo
for(var r:int=0;r < h;r++)
{
for(var c:int=0;c < w;c++)
{
entro nell' indice dell' array con numero iterazione del momento del primo ciclo ( sappiamo che c'è una stringa ) e poi utilizzando il metodo charAt della classe String controllo ogni letera della stringa e se è 1 allora dico a Flash di cambiare il colore di quel pixel a coordinate w e h con il colore che mi è stato passato dalla funzione createBackground nella riga in cui utilizzo il metodo beginBitmapFill.
if(def[r].charAt(c)=='1')
pattern.setPixel32(c,r,color);
}
}
restituisco la Bitmapdata
return pattern;

Un altro esempio potrebbe essere di utilizzare questo array:

'00000000000000000000000000000000000000',
'00000000000000000000000000000000000000',
'00000000000000000000000000000000000000',
'00000011010101010010010101010110001000',
'00000100000000001000100000000001000000',
'00001000000000000101000000000000100000',
'00010000000000000010000000000000011000',
'00010000000000000101000000000000010000',
'00001000000000001000100000000000100000',
'00001000000000010000010000000000100000',
'00000111000000100010001000000111000000',
'00000000100000010000010000001000000000',
'00000111000000100010001000000111000000',
'00001000000000010000010000000000100000',
'00001000000000001000100000000000100000',
'00010000000000000101000000000000010000',
'00010000000000000010000000000000011000',
'00001000000000000101000000000000100000',
'00000100000000001000100000000001000000',
'00000011010101010010010101010110001000',
'00010010101010100111001010101010011000',
'00000000000000000000000000000000000000',
'00000000000000000000000000000000000000',
'00000000000000000000000000000000000000'

ottenendo il seguente risultato

oppure con questo array e cambio di colori:

'0001101010101001001010101011000111011011011011011 0',
'0010000000000100010000000000100011011011011011011 0',
'0100000000000010100000000000010011011011011011011 0',
'1000000000000001000000000000001111011011011011011 0',
'1000000000000010100000000000001011011011011011011 0',
'0100000000000100010000000000010011011011011011011 0',
'0100000000001000001000000000010011011011011011011 0',
'0011100000010001000100000011100011011011011011011 0',
'0000010000001000001000000100000011011011011011011 0',
'0011100000010001000100000011100011011011011011011 0',
'0100000000001000001000000000010011011011011011011 0',
'0100000000000100010000000000010011011011011011011 0',
'1000000000000010100000000000001011011011011011011 0',
'1000000000000001000000000000001111011011011011011 0',
'0100000000000010100000000000010011011011011011011 0',
'0010000000000100010000000000100011011011011011011 0',
'0001101010101001001010101011000111011011011011011 0',
'1001010101010011100101010101001111011011011011011 0'

e ancora:

'111000110110110110110110',
'111000110110110110110110',
'111000110110110110110110',
'111000110110110110110110',
'111000110110110110110110',
'111000110110110110110110',
'111000110110110110110110',
'111000110110110110110110',
'111000110110110110110110',
'111000110110110110110110'

sfogate la vostra fantasia !!!

Alla prossima !

[simonini]

Beoooooo