Now it’s time to add some interaction to the grid made in part 1. For that purpose simple MouseEvents for movement and click will be sufficient. As indication we will change the color of the relevant tile.

Here is what we are going to create:

And here is the code, explanations will follow:

var nodeArray: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;
		nodeArray.push(node);
	}
}

var tile:MovieClip;

for ( var counter = 0; counter < tileNumber; counter++ )
{
	tile = new MovieClip();
	tile.x = nodeArray[counter].v * tileWidth + tileWidth;
	tile.y = nodeArray[counter].u * tileHeight + tileHeight;
	tile.nodeRef = nodeArray[counter];
	nodeArray[counter].tileRef = tile;
	tile.blocked = false;
	tile.nodeRef.blocked = false;
	drawTile(tile, 0x66ff66, 1);
	tile.addEventListener(MouseEvent.MOUSE_OVER, overTile, false, 0, true);
	addChild(tile);
}

This time the tile MovieClip() as well as the node Object() are getting some properties. At the same time, both get knowledge of each other by referencing them in their properties nodeRef and tileRef. This way we can later work with either. The creation of its graphics is outsourced to the following function. This way we can use the code for all EventListeners.

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

These are two descriptive text fields. One will show the instruction, the other one will show the tile/node properties on hover.

function overTile ( event:* )
{
	var tile = event.target;
	drawTile(tile, 0xff6666, 0.5);
	nodeText.text = tile.nodeRef.u + "|" + tile.nodeRef.v + "\nblocked: " + tile.blocked;
	tile.addEventListener(MouseEvent.MOUSE_OUT, outTile, false, 0, true);
	tile.addEventListener(MouseEvent.CLICK, clickTile, false, 0, true);
}

The function for the tile hover includes a semitransparent fill over the actual fill to show which tile is the actual. The informative text field we did set up earlier shows the row number and the column number as well as the blocked status. The two listener functions are following.

function outTile ( event:* )
{
	var tile = event.target;
	var tileColor;
	if ( tile.blocked == false )
	{
		tileColor = 0x66ff66;
	}
	else
	{
		tileColor = 0x000000;
	}
	drawTile(tile, tileColor, 1);
	nodeText.text = "";
	tile.removeEventListener(MouseEvent.MOUSE_OUT, outTile);
	tile.removeEventListener(MouseEvent.CLICK, clickTile);
}

On leaving the tile it is recolored. By checking the blocked status the tile's color is determined. The text field is reset and the listeners removed.

function clickTile ( event:* )
{
	var tile = event.target;
	var tileColor;
	if ( tile.blocked == false )
	{
		tile.blocked = true;
		tileColor = 0x000000;
	}
	else
	{
		tile.blocked = false;
		tileColor = 0x22ff22;
	}
	drawTile(tile, tileColor, 0.5);
}

If the actual blocked status is false, it is now flagged true and the other way around.

The next part will deal with the same interaction just depending on the mouse position.