Graphic patterns with actionscript 3.0

[Flep]

Hi there !
More then once, we saw how to design with Actionscript 3.0:
- example 1
- example 2
- example 3
But, have you ever tried to design patterns with Actionscript"
It is not so difficult and we can obtain some really nice backgrounds.

Clearly who has good design skills could create them with Photoshop or Fireworks, but even us, coders, have a dignity to honour in graphics!

Follow me and I will show you how cool it can be"

I create a FLA and I save it as "pattern_1.fla".
I create the Document Class, an AS file saved as "Main.as", implemented the following way:

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

We can notice that in the building function, I instantiate another class named "Pattern_1", seen next:

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

The result:

Let us analyse the code.

From the "Main" building function, I instantiate "Patterm_1" passing to it the FLA"s root the following way:
var pattern_1:Pattern_1=new Pattern_1(this);
If you have any doubt, I recommend you to read the section Object Oriented Programming )

Pattern_1.as
Properties
a MovieClip to keep trace of the FLA"s root
private var _fla:MovieClip;
a MovieClip needed to draw
private var background:MovieClip;
an array
private var def_array:Array;
a BitmapData
private var pat:BitmapData;

Methods
init();
I populate the array with some strings of only 1 and 0 and of the same length.
Therefore the array to index zero (def_array [0]) will contain a string of (in this case) 32 characters (it also could be of 20 or 200, the important point is that all the strings have the same length).
If you stand back and look at those strings, it seems indeed like a sketch and in fact they will be the ones to compose the pattern.
def_array=new Array(
'00011010101010010010101010110001',
'00100000000001000100000000001000',
'01000000000000101000000000000100',
'10000000000000010000000000000011',
'10000000000000101000000000000010',
'01000000000001000100000000000100',
'01000000000010000010000000000100',
'00111000000100010001000000111000',
'00000100000010000010000001000000',
'00111000000100010001000000111000',
'01000000000010000010000000000100',
'01000000000001000100000000000100',
'10000000000000101000000000000010',
'10000000000000010000000000000011',
'01000000000000101000000000000100',
'00100000000001000100000000001000',
'00011010101010010010101010110001',
'10010101010100111001010101010011');

createBackground();
I instantiate "background" as a new MovieClip and with "addChild", I render it visible (addChild to the FLA"s root, declared as _fla.addChild)
background=new MovieClip();
_fla.addChild(background);
I use the method beginBitmapFill and I use as values: a BitmapData passed by the method drawBitmapPattern to which, at its turn, I pass the array, a drawing colour, a new matrix and a true Boolean.
background.graphics.beginBitmapFill(drawBitmapPatt ern(def_array,0x22FFFFFF),new
Matrix(),true);
I limit the drawing area to the stage"s size.
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
this method draws in base to the string of "def_array" and returns a BitmapData.
I create a numerical variable and I assign to it the length of the first index of "def_array" that will be 32 as we know that Flash sees the strings as arrays.
Therefore "def_array [0]" exactly corresponds to the value of the string"s length in "def_array" to the index zero.
var w:Number=def[0].length;
I create a numerical variable and this time, I assign to it the length of the array (equal to 18 as it contains 18 strings)
var h:Number=def.length;
I create a new BitmapData and I pass to it "w" and "h" as dimension (a rectangle of 32x18), a "true" for the transparency and a background colour.
var pattern:BitmapData=new BitmapData(w,h,true,0x00FFFFFF);
two nested cycle with respectively "h" and "w" as a maximum iteration
for(var r:int=0;r < h;r++)
{
for(var c:int=0;c < w;c++)
{
I enter in the index array with the iteration number of the moment of the first cycle (we know that there is a string) and then using the method charAt of the String class, I check every character of the string and if it is 1, I tell Flash to change the colour of that pixels using the coordinates w and h and the colour passed by the function createBackground in the same line in which I use the method beginBitmapFill.
if(def[r].charAt(c)=='1')
pattern.setPixel32(c,r,color);
}
}
I return the BitmapData
return pattern;

We could use the following array to create another example:

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

and we would obtain the following result:

Or let us try with this array and change the colours:

'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'

As a last example:

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

With a bit of fantasy, you can create even more wonderful patterns!!!

See you soon!