Flash Gallery | Flash Templates | Flash Menu | Flash Design | Flash Audio & Video

flash page flip

Actionscript 3.0 video tutorials

+ Reply to Thread
Results 1 to 1 of 1

Thread: Graphic patterns with actionscript 3.0

  1. #1
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,609
    Rep Power
    9

    Graphic patterns with actionscript 3.0

    flash templates
    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:
    Code:
    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:
    Code:
    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!

+ Reply to Thread

LinkBacks (?)

  1. 10-06-08, 07:17
  2. 25-03-08, 22:23
  3. 11-01-08, 22:32
  4. 26-12-07, 07:44
  5. 23-12-07, 21:37
  6. 19-12-07, 22:03
  7. 15-11-07, 18:08
  8. 15-11-07, 17:54
  9. 05-11-07, 17:26
  10. 01-11-07, 05:30
  11. 29-10-07, 14:17
  12. 27-10-07, 18:26
  13. 25-10-07, 19:52
  14. 25-10-07, 19:32
  15. 25-10-07, 18:06
  16. 25-10-07, 14:52
  17. 25-10-07, 11:16
  18. 25-10-07, 10:35
  19. 25-10-07, 08:41

Similar Threads

  1. Motion Graphic - Rotazione stage
    By markuspedro in forum Actionscript 3.0 avanzato
    Replies: 0
    Last Post: 16-02-09, 07:49
  2. Disegnare patterns con Actionscript 3.0
    By Flep in forum Articoli e tutorials
    Replies: 5
    Last Post: 05-12-08, 07:28
  3. Centrare un graphic
    By damn73 in forum Flash CS3 Design
    Replies: 3
    Last Post: 10-03-08, 10:49

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts