Create Grid view Using AS3 By Abed Allateef Qaisi

please like and post your questions : http://www.facebook.com/pages/FlashCS5-Tutorials/176320862386436

any developer can face many times a need to view a content in multiple raws and columns and he always ends with a huge bunch of codes ;)

in this tutorial you will learn how easily you can build a a grid view for your puzzle game using a light amount of codes.

first of all for any Grid view we need to know how many columns and raws we need to view and also the width, and height margins between the contents objects.

so create new flash file with AS3, then go to the first frame in your document or use the document class and define the following variables as we mention above:

var nNumberOfColumns:int  = 4;
var nNumberOfRows:int = 4;
var nHorizontalMargine:Number = 20; // in pixels
var nVerticalMargine:Number = 20;
var nContainerXpos:Number=0;
var nContainerYpos:Number=0;

after you defined the main variables, go to flash and create Block Movie Clip and name it Block_mc and create a dynamic text box and name it txtBlockNumber, after that we need to linkage the block movie by check the export for actionscript as you can notice in below image.

so now all we need is to write the main code, the trick is simple we need to use math signs ( %  ,  / ) to control the grid view, the % control the number of columns and / control the number of raws.

The main code :


import flash.display.Sprite;
import flash.display.MovieClip;

var nNumberOfColumns:int = 4;
var nNumberOfRows:int = 4;
var nHorizontalMargine:Number = 10;
var nVerticalMargine:Number = 10;
var nContainerXpos:Number=0;
var nContainerYpos:Number=0;


var Container_mc:Sprite = new Sprite()
Container_mc.x=nContainerXpos
Container_mc.y=nContainerYpos
addChild(Container_mc)

var nPuzzleBlocks:int = nNumberOfColumns*nNumberOfRows
for( var i = 0; i < nPuzzleBlocks ; i++)
{
var oBlock_mc:MovieClip = new Block_mc()
oBlock_mc.txtBlockNumber.text = i+1 ;
oBlock_mc.x = (i % nNumberOfColumns ) * (oBlock_mc.height + nHorizontalMargine)
oBlock_mc.y = Math.floor(i / nNumberOfColumns ) * (oBlock_mc.width + nVerticalMargine)
Container_mc.addChild(oBlock_mc)
}

------------------------------------
Source Code

for further question just contact me on abed_q@hotmail.com