This part deals with similar interaction as part 2.1 without the masses of EventListeners. See part 1 for the creation of the basic grid.

Here is what we are going to create:

That doesn’t look much different to the grid of part 2.1? Right. Let’s have a look at the code:

var nodeArray:Array = new Array();
var posArray:Array = new Array();

var rows:int = 10;
var cols:int = 10;

var tileNumber = rows * cols;

var tileWidth:Number = 30;
var tileHeight:Number = 30;

var node:Object;

for ( var row = 0; row < rows; row++ )
{
	for ( var col = 0; col < cols; col++ )
	{
		node = new Object();
		node.v = col;
		node.u = row;
		node.xPos = node.v * tileWidth + tileWidth;
		node.yPos = node.u * tileHeight + tileHeight;
		node.nodeString = node.u + "." + node.v;
		nodeArray.push(node);
		posArray.push(node.nodeString);
	}
}

The tile's position is already calculated and stored as the node's property. The other new thing is the second array that is filled with the position string. That may be overdone for this example but we will need it once we deal with differently shaped tiles.

var tile:MovieClip;

for ( var counter = 0; counter < tileNumber; counter++ )
{
	tile = new MovieClip();
	node = nodeArray[counter];
	tile.nodeRef = node;
	tile.x = node.xPos;
	tile.y = node.yPos;
	node.tileRef = tile;
	node.blocked = false;
	drawTile(tile, 0x66ff66, 1);
	addChild(tile);
}

This part could have been already in the node creation loop, but for later customization purposes it will go seperately. And there is nothing new in drawTile function.

function drawTile ( tile, tileColor, tileAlpha )
{
	with ( tile.graphics )
	{
		beginFill(tileColor, tileAlpha);
		lineStyle(2, 0x22ff22);
		drawRect(-tileWidth*0.5, -tileHeight*0.5, tileWidth, tileHeight);
		endFill();
	}
}

var instText = new TextField();
instText.x = tileWidth * ( cols + 1 );
instText.y = tileHeight * 0.5;
instText.width = 150;
instText.wordWrap = true;
instText.selectable = false;
instText.text = "Hover tiles to trace their position. Click tile to block/unblock it."
addChild(instText);

var nodeText = new TextField();
nodeText.x = tileWidth * 0.5;
nodeText.y = tileHeight * ( rows + 1 );
nodeText.selectable = false;
addChild(nodeText);

var tileFocus = new MovieClip();
drawTile(tileFocus, 0x990000, 0.5);
tileFocus.visible = false;
tileFocus.mouseEnabled = false;
addChild(tileFocus);

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
stage.addEventListener(MouseEvent.CLICK, mouseClickHandler);

var actualNode:Object = null;

Here is a new MovieClip(), the tileFocus. It will be the position indicator contrary to the color change of the tile itself in the previous part.

function mouseMoveHandler ( event:* )
{
	getNode(mouseX, mouseY);
}

function mouseClickHandler ( event:* )
{
	if ( actualNode !== null )
	{
		if ( actualNode.blocked == false )
		{
			actualNode.blocked = true;
			drawTile(actualNode.tileRef, 0x000000, 1);
		}
		else
		{
			actualNode.blocked = false;
			drawTile(actualNode.tileRef, 0x66ff66, 1);
		}
	}
}

The mouseMoveHandler calls a function getNode which returns the actual tile the cursor is over. The mouseClickHandler deals with blocking/unblocking the node. Let's review the getNode function.

function getNode ( xPos, yPos )
{
	var thisV = Math.round (( xPos - tileWidth ) / tileWidth );
	var thisU = Math.round (( yPos - tileHeight ) / tileHeight );
	actualNode = stringToNode( thisU, thisV );
	if ( actualNode !== null )
	{
		nodeText.text = thisU + "|" + thisV + "\nfrom Array: " + actualNode.nodeString + "\nblocked: " + actualNode.blocked;
		tileFocus.visible = true;
		tileFocus.x = actualNode.xPos;
		tileFocus.y = actualNode.yPos;
	}
	else
	{
		nodeText.text = "";
		tileFocus.visible = false;
	}
}

The actual mouse position is calculated down to row and column number in the same way the node's xPos and yPos were calculated before. We'll deal with the stringToNode() in a minute. The nodeText shows the node information and the tileFocus movieclip is positioned at the actual node's xPos and yPos.

function stringToNode ( uPos, vPos )
{
	var nodeString = uPos + "." + vPos;
	var nodePos = posArray.indexOf(nodeString);
	if ( nodePos > -1 )
	{
		return nodeArray[nodePos];
	}
	else
	{
		return null;
	}
}

The stringToNode does nothing more than creating a string formatted like the nodeString property of the nodes. Then the string's position in the posArray is looked up. If it exists the node at the same position in the nodeArray is returned.
In part 3 we will take care of actualNode's adjacent cells.