Circular text can be useful in several designs, so here is a little class that produces the following:

What the swf shows is first the ‘debug-version’ which changes after a click to the naked text version. Consecutive clicks will produce the same for randomized values.

CircleText.as

package
{
	import flash.display.Sprite;
	import flash.geom.Matrix;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;

	/**
	 * CircleText.as
	 * @author kegogrog
	 */
	public class CircleText extends Sprite
	{
		private static const degToRad:Number = Math.PI / 180;

These are the basic imports and the private var degToRad used for the conversion of degrees into radians.

		public function CircleText( startAngle:Number = -90, endAngle:Number = 90, radius:Number = 80, inner:Boolean = false, text:String = "This text is a test.", debug:Boolean = true )

The class accepts several inputs, the most important are startAngle, endAngle and radius. I hope I do not need to explain those. inner defines if the text is located on the outside of the circle or on the inside. text should be pretty obvious and debug just defines what one can see. I recommend to delete that once the class is implemented while it is nothing the user has to see.

		{
			var tff:TextFormat = new TextFormat();
			tff.font = "calibri";
			tff.size = 20;

It is important to use an embedded font, so here I am just defining a text format. One could also reference that in the constructor or use a global format.

			var sr:Number = startAngle * degToRad;
			var er:Number = endAngle * degToRad;

			if ( debug )
			{
				this.graphics.lineStyle(0, 0xcccccc);
				this.graphics.drawCircle(0, 0, 3);
				this.graphics.drawCircle(0, 0, radius);
				this.graphics.drawCircle(Math.sin(sr) * radius, -Math.cos(sr) * radius, 4);
				this.graphics.drawCircle(Math.sin(er) * radius, -Math.cos(er) * radius, 2);
			}

The angles are converted to radians and if debug is true the midpoint, the circle itself are drawn and the start and end of the text is marked.

			var i:int;
			var tf:TextField;
			var m:Matrix;
			for ( i = 0; i < text.length; i++ )
			{
				tf = new TextField();
				tf.selectable = false;
				tf.autoSize = TextFieldAutoSize.LEFT;
				tf.defaultTextFormat = tff;
				tf.embedFonts = true;
				tf.text = text.charAt(i);

				if ( debug )
				{
					tf.background = true;
					tf.backgroundColor = 0xcccccc;
					tf.alpha = 0.8;
				}

				m = new Matrix();
				m.translate( -tf.width * 0.5, -tf.height * ( inner ? 0 : 1 ) - radius );
				m.rotate( sr + ( ( er - sr ) / ( text.length - 1 ) ) * i );
				tf.transform.matrix = m;

				addChild(tf);
			}
		}
	}
}

The biggest code chunk here splits the string into single characters, creates a textfield for each one and applies translation (depending on inner) and rotation according to the start and end angle and the characters position in the string. The translation in x moves the textfield so that it is centered.

I was using FlashDevelop for this presentation with the following

Main.as

:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;

	/**
	 * Main.as for CircleText
	 * @author kegogrog
	 */
	public class Main extends Sprite
	{
		[Embed(
			source = 'font/calibri.ttf',
			fontName = "calibri",
			fontWeight = "normal",
			advancedAntiAliasing = "true",
			mimeType = "application/x-font",
			fontStyle = "normal",
			embedAsCFF = 'false',
			unicodeRange = 'U+0020-U+007E'
			)]
		private var calibri:Class;

		private var startAngle:Number = -90;
		private var endAngle:Number = 90;
		private var radius:Number = 80;
		private var inner:Boolean = false;
		private var text:String = "This text is a test.";
		private var debug:Boolean = true;

		private var ct:CircleText;

		public function Main():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point

			buildText();
			stage.addEventListener(MouseEvent.CLICK, buildText);
		}

		private function buildText(event:MouseEvent = null):void
		{
			if ( ct )
			{
				removeChild(ct);
			}
			ct = new CircleText( startAngle, endAngle, radius, inner, text, debug );
			ct.x = stage.stageWidth >> 1;
			ct.y = stage.stageHeight >> 1;
			addChild(ct);

			if ( !debug )
			{
				startAngle = Math.random() * 360;
				endAngle = startAngle + Math.random() * 180 + 90;
				radius = Math.random() * 30 + 50;
				inner ? inner = false : inner = true;
			}
			debug ? debug = false : debug = true;
		}
	}
}

buildText takes the predefined variables and adds a new CircleText. With the next click it shows the non-debug version and and changes the variables prior to the next click.

Being a sprite, CircleText can be rotated by its own rotation property. One could also put all text fields into an array and animate them, maybe flying of the screen from the center. Have fun playing with that.

Yoho!

Embedding asstes into your FD project is pretty simple. In fact it is as easy as 1, 2, 3. One: Copy, two: embed, three: use. Let’s go!

1. Copy

Alright, with your assets ready you should create a folder in your project folder or even in src. For the following example I created the folder sounds for (obviuosly) sounds and copied the font directly into src.

The FD project folder

2. Embed

Embedding a font efficiently means knowing which glyphs you need. The following is a great source for finding Unicode ranges.

	public dynamic class Main extends MovieClip
	{
		[Embed(
			source = 'BERLIN.TTF',
			fontName = "berlinSans",
			fontWeight = "bold",
			advancedAntiAliasing = "true",
			mimeType = "application/x-font",
			fontStyle = "normal",
			embedAsCFF = 'false',
			unicodeRange = 'U+0020,
					U+0041-U+005A,
					U+0061-U+007A,
					U+0030-U+0039,
					U+002E, U+002F,
					U+0027, U+00A9,
					U+00E4, U+00FC'
			)]
		private var berlinSans:Class;

		[Embed( source = 'sounds/SoundPop.mp3')]
		private var SoundPop:Class;
		public var soundPop:Sound;

		[Embed(source = 'sounds/sound12.mp3')]
		private var SoundSwap:Class;
		public var soundSwap:Sound;

		[Embed(source = 'sounds/WintersDream.mp3')]
		private var Music:Class;
		public var music:Sound;

All embeds are followed directly by private vars, defining the embedded assets as classes. To use them public vars are created. Caveat: If you create folders anywhere, remember the path ( for source)!

3. Use

		public function Main():void
		{
			music = new Music();
			soundPop = new SoundPop();
			soundSwap = new SoundSwap();

The fonts are used simply by referring to the fontName you set in the embed section. By setting yourTextField.embedFonts you can use your font.

			iFormat = new TextFormat();
			iFormat.font = "berlinSans";
			iFormat.color = 0xaaaaaa;
			iFormat.size = 24;

			gameName = new TextField();
			gameName.embedFonts = true;
			gameName.defaultTextFormat = iFormat;
			gameName.text = "yourText here";
			addChild(gameName);
			gameName.selectable = false;
			gameName.autoSize = TextFieldAutoSize.LEFT;

Pretty much always you should set yourTextField.selectable to false. As a player I am always a bit picky when it comes to buttons where the text selection tool shows up.

The same thing goes with graphics I think though I didn’t try that.

Yoho!

A little further experiment with 3D makes me want to play LHX or D-Track.

If the movie does not react to keyboard input, click once inside of it to give it focus.

There are a lot of optimization opportunities, though the frame rate seems to be pretty stable. Smoothing the terrain could be next, depth sorting is obviuosly not the best. Well, that’s what weekends are for, right?

Source? Sure: ZIP (13.9 KB)

Please tell me in the comments if it works for you and if you experience any lags.

Yoho!

Click the movie to give focus to the keyboard.

With the code derived from the last post I wanted to try to get multiple (partly moving) objects into an environment that moves. Done. There are two “racers” on a plane. One of the racers is moving while the “camera” is panning around the plane.

Interested in the source? It would definitely look better if it wasn’t timeline code.

var world:MovieClip = new MovieClip();
world.x = stage.stageWidth*0.5;
world.y = stage.stageHeight*0.5;
addChild( world );

var focalLength:Number = 500;

var allPointsArray:Array = new Array();
var centerPointsArray:Array = new Array();

var triangleArray:Array = new Array();

var plane = new Object();
plane.center = make3DCenter( 0, 0, 0, plane );
plane.rot = make3DCenter( 0, 0, 0, plane );
plane.pointsArray = [
					make3DPoint(-200,-200,0, plane),
					make3DPoint(-200,200,0, plane),
					make3DPoint(200,200,0, plane),
					make3DPoint(200,-200,0, plane),
					];

plane.triangles = [
				   makeTriangle(plane.pointsArray[0], plane.pointsArray[1], plane.pointsArray[2], 0x000000),
				   makeTriangle(plane.pointsArray[0], plane.pointsArray[2], plane.pointsArray[3], 0xdddddd)
				   ];

var object1 = new Object();
object1.center = make3DCenter( 0, 100, 0, object1 );
object1.rot = make3DCenter( 0, 0, 0, object1 );
object1.pointsArray = [
					   make3DPoint( 30,  0,  0, object1),
					   make3DPoint(-30,  0,  -20, object1),
					   make3DPoint(-30,-20,  0, object1),
					   make3DPoint(-30, 20,  0, object1)

];
object1.triangles = [
					 makeTriangle( object1.pointsArray[0], object1.pointsArray[2], object1.pointsArray[1], 0xff0000),
					 makeTriangle( object1.pointsArray[0], object1.pointsArray[1], object1.pointsArray[3], 0x0000ff),
					 makeTriangle( object1.pointsArray[1], object1.pointsArray[2], object1.pointsArray[3], 0x00ff00)
					 ];
object1.vx = 5;
object1.vy = 5;

var object2 = new Object();
object2.center = make3DCenter( 100, 100, 0, object2 );
object2.rot = make3DCenter( 0, 0, 0, object2 );
object2.pointsArray = [
					   make3DPoint( 30,  0,  0, object2),
					   make3DPoint(-30,  0,  -20, object2),
					   make3DPoint(-30,-20,  0, object2),
					   make3DPoint(-30, 20,  0, object2)

];
object2.triangles = [
					 makeTriangle( object2.pointsArray[0], object2.pointsArray[2], object2.pointsArray[1], 0xff0000),
					 makeTriangle( object2.pointsArray[0], object2.pointsArray[1], object2.pointsArray[3], 0x0000ff),
					 makeTriangle( object2.pointsArray[1], object2.pointsArray[2], object2.pointsArray[3], 0x00ff00)
					 ];
object2.vx = 0;
object2.vy = 0;

function makeTriangle( p1, p2, p3, col)
{
	var triangle = new Object();
	triangle.points = [p1, p2, p3];
	triangle.col = col;
	triangleArray.push( triangle );
}

function make3DCenter ( x, y, z, o)
{
	var point = new Object();
	point.x = x;
	point.y = y;
	point.z = z;
	point.o = o;
	centerPointsArray.push(point);
	return point;
};

function make3DPoint ( x, y, z, o)
{
	var point = new Object();
	point.ox = x;
	point.x = x;
	point.oy = y;
	point.y = y;
	point.oz = z;
	point.z = z;
	point.o = o;
	allPointsArray.push(point);
	return point;
};

function make2DPoint (x,y, depth, scaleFactor)
{
	var point = new Object();
	point.x = x;
	point.y = y;
	point.depth = depth;
	point.scaleFactor = scaleFactor;
	return point;
};

function get3DPoints ( object )
{
	var sx = Math.sin(object.rot.x);
	var cx = Math.cos(object.rot.x);
	var sy = Math.sin(object.rot.y);
	var cy = Math.cos(object.rot.y);
	var sz = Math.sin(object.rot.z);
	var cz = Math.cos(object.rot.z);
	var x,y,z, xy,xz, yx,yz, zx,zy;
	var i = object.pointsArray.length;
	while (i--){
		x = object.pointsArray[i].ox;
		y = object.pointsArray[i].oy;
		z = object.pointsArray[i].oz;

		xy = cx*y - sx*z;
		xz = sx*y + cx*z;
		yz = cy*xz - sy*x;
		yx = sy*xz + cy*x;
		zx = cz*yx - sz*xy;
		zy = sz*yx + cz*xy;

		object.pointsArray[i].x = zx + object.center.x;
		object.pointsArray[i].y = zy + object.center.y;
		object.pointsArray[i].z = yz + object.center.z;
	}
}

function Transform3DPointsTo2DPoints ( points, axisRotations )
{
	var TransformedPointsArray = [];
	var sx = Math.sin(axisRotations.x);
	var cx = Math.cos(axisRotations.x);
	var sy = Math.sin(axisRotations.y);
	var cy = Math.cos(axisRotations.y);
	var sz = Math.sin(axisRotations.z);
	var cz = Math.cos(axisRotations.z);
	var x,y,z, xy,xz, yx,yz, zx,zy, scaleFactor;

	var i = points.length;
	while (i--){

		x = points[i].x;
		y = points[i].y;
		z = points[i].z;

		xy = cx*y - sx*z;
		xz = sx*y + cx*z;
		yz = cy*xz - sy*x;
		yx = sy*xz + cy*x;
		zx = cz*yx - sz*xy;
		zy = sz*yx + cz*xy;

		scaleFactor = focalLength/(focalLength + yz);

		x = zx*scaleFactor;
		y = zy*scaleFactor;
		z = yz;

		TransformedPointsArray[i] = make2DPoint(x, y, -z, scaleFactor);
	}
	return TransformedPointsArray;
};

var ballArray:Array = new Array();

for ( var i:int = 0; i < allPointsArray.length; i++){
	var ball:MovieClip = new MovieClip();
	var colors = [ 0xffffff, 0x990000 ];
	var fillType:String = GradientType.RADIAL;
	var alphas:Array = [1, 1];
	var ratios:Array = [0x00, 0xff];
	var matr:Matrix = new Matrix();
	matr.createGradientBox(-20*0.4, -20*0.4, 0, 0, 0);
	var spreadMethod:String = SpreadMethod.PAD;
	var interpolationMethod:String = InterpolationMethod.RGB;
	var focal:Number = -0.1;
	with(ball.graphics)
	{
		lineStyle( 1, 0x330000 );
		beginGradientFill( fillType, colors, alphas, ratios, matr, spreadMethod, interpolationMethod, focal );
		drawCircle(0,0,3);
		endFill();
	}
	world.addChild(ball);
	ballArray.push(ball);
}

var cubeAxisRotations = make3DCenter(0,0,0, world);

this.addEventListener( Event.ENTER_FRAME, enterFrameHandler);
function enterFrameHandler( event:Event )
{
	cubeAxisRotations.z += 0.5*Math.PI/180;
	cubeAxisRotations.y = - Math.sin( -cubeAxisRotations.z );
	cubeAxisRotations.x = - Math.cos( -cubeAxisRotations.z );

	object1.center.newX = object1.center.x + object1.vx;
	object1.center.newY = object1.center.y + object1.vy;

	var rz = Math.atan2(object1.vy, object1.vx);
	object1.rot.z = rz;

	if ( object1.center.newX < 200 && object1.center.newX > -200 )
	{
		object1.center.x = object1.center.newX;
	}
	else
	{
		object1.vx*=-1;
	}
	if ( object1.center.newY < 200 && object1.center.newY > -200 )
	{
		object1.center.y = object1.center.newY;
	}
	else
	{
		object1.vy*=-1;
	}

	get3DPoints(plane);

	get3DPoints(object1);
	get3DPoints(object2);

	var screenPoints = Transform3DPointsTo2DPoints(allPointsArray, cubeAxisRotations);
	screenPoints.sortOn("depth");
	for (i=0; i < screenPoints.length; i++)
	{
		var currBall = ballArray[i];
		currBall.x = screenPoints[i].x;
		currBall.y = screenPoints[i].y;
		currBall.scaleX = currBall.scaleY = screenPoints[i].scaleFactor;
		world.addChild(currBall);
	}
	world.graphics.clear();
	world.graphics.lineStyle(0,0x000000);
	for each ( var tri in triangleArray )
	{
		screenPoints = Transform3DPointsTo2DPoints(tri.points, cubeAxisRotations);

		if (
			( screenPoints[2].x - screenPoints[0].x ) * ( screenPoints[1].y - screenPoints[2].y ) >
			( screenPoints[2].y - screenPoints[0].y ) * ( screenPoints[1].x - screenPoints[2].x )
			)
		{
			with(world.graphics)
			{
				beginFill(tri.col, 0.75);
				moveTo(screenPoints[0].x, screenPoints[0].y);
				lineTo(screenPoints[1].x, screenPoints[1].y);
				lineTo(screenPoints[2].x, screenPoints[2].y);
				lineTo(screenPoints[0].x, screenPoints[0].y);
				endFill();
			}
		}
	}
}

Now, with a little sterring behaviour and terrain this could be really nice. Looking at the (to be released) Molehill API and the triangle methods in CS4 it may be not worth the effort, but it still is interesting.

Yoho!

Good Morning!

It took a while to write that. Why the rum? Long story as a link: I saw that and liked it. Copy, paste, trace out all compile fails and rewrite and present!

The (re-coded) code:

var theScene:MovieClip = new MovieClip();
theScene.x = stage.stageWidth*0.5;
theScene.y = stage.stageHeight*0.5;
addChild( theScene );

var focalLength:Number = 300;

function make3DPoint ( x, y, z)
{
	var point = new Object();
	point.x = x;
	point.y = y;
	point.z = z;
	return point;
};

function make2DPoint (x,y, depth, scaleFactor)
{
	var point = new Object();
	point.x = x;
	point.y = y;
	point.depth = depth;
	point.scaleFactor = scaleFactor;
	return point;
};

function Transform3DPointsTo2DPoints (points, axisRotations)
{
	var TransformedPointsArray = [];
	var sx = Math.sin(axisRotations.x);
	var cx = Math.cos(axisRotations.x);
	var sy = Math.sin(axisRotations.y);
	var cy = Math.cos(axisRotations.y);
	var sz = Math.sin(axisRotations.z);
	var cz = Math.cos(axisRotations.z);
	var x,y,z, xy,xz, yx,yz, zx,zy, scaleFactor;

	var i = points.length;
	while (i--){
		x = points[i].x;
		y = points[i].y;
		z = points[i].z;

		// rotation around x
		xy = cx*y - sx*z;
		xz = sx*y + cx*z;
		// rotation around y
		yz = cy*xz - sy*x;
		yx = sy*xz + cy*x;
		// rotation around z
		zx = cz*yx - sz*xy;
		zy = sz*yx + cz*xy;

		scaleFactor = focalLength/(focalLength + yz);
		x = zx*scaleFactor;
		y = zy*scaleFactor;
		z = yz;

		TransformedPointsArray[i] = make2DPoint(x, y, -z, scaleFactor);
	}
	return TransformedPointsArray;
};

var pointsArray:Array = [
	make3DPoint(-50,-50,-50),
	make3DPoint(50,-50,-50),
	make3DPoint(50,-50,50),
	make3DPoint(-50,-50,50),
	make3DPoint(-50,50,-50),
	make3DPoint(50,50,-50),
	make3DPoint(50,50,50),
	make3DPoint(-50,50,50)
];

var ballArray:Array = new Array();

for ( var i:int = 0; i < pointsArray.length; i++){
	var ball:MovieClip = new MovieClip();
	var colors = [ 0xffffff, 0x990000 ];
	var fillType:String = GradientType.RADIAL;
	var alphas:Array = [1, 1];
	var ratios:Array = [0x00, 0xff];
	var matr:Matrix = new Matrix();
	matr.createGradientBox(-40*0.4, -40*0.4, 0, 0, 0);
	var spreadMethod:String = SpreadMethod.PAD;
	var interpolationMethod:String = InterpolationMethod.RGB;
	var focal:Number = -0.1;
	with(ball.graphics)
	{
		beginGradientFill( fillType, colors, alphas, ratios, matr, spreadMethod, interpolationMethod, focal );
		drawCircle(0,0,20);
		endFill();
	}
	theScene.addChild(ball);
	ballArray.push(ball);
}

var cubeAxisRotations = make3DPoint(0,0,0);

theScene.addEventListener( Event.ENTER_FRAME, enterFrameHandler );

function enterFrameHandler( event:Event )
{
	cubeAxisRotations.y -= 5*Math.PI/180;
	cubeAxisRotations.x += 5*Math.PI/180;
	var screenPoints = Transform3DPointsTo2DPoints(pointsArray, cubeAxisRotations);
	for (i=0; i < pointsArray.length; i++){
		var currBall = ballArray[i];
		currBall.x = screenPoints[i].x;
		currBall.y = screenPoints[i].y;
		currBall.xscale = currBall.yscale = 100 * screenPoints[i].scaleRatio;
		//currBall.swapDepths(screenPoints[i].depth);
	}
}

Just don't ask. Yo... -ho!

EDIT: The spam comments, I forgot them. I don't like them. Like: I DON'T LIKE THEM!

EDIT_2: And: Creating the thumbnail was time consuming. More than writing...

EDIT_3: I forgot to include the depths.

function enterFrameHandler( event:Event )
{
	cubeAxisRotations.y -= 2*Math.PI/180;
	cubeAxisRotations.x += 2*Math.PI/180;
	var screenPoints = Transform3DPointsTo2DPoints(pointsArray, cubeAxisRotations);
	screenPoints.sortOn("depth");
	for (i=0; i < screenPoints.length; i++){
		var currBall = ballArray[i];
		currBall.x = screenPoints[i].x;
		currBall.y = screenPoints[i].y;
		currBall.xscale = currBall.yscale = 100 * screenPoints[i].scaleRatio;
		theScene.addChild(currBall);
	}
}

Alright, while I already wrote about putting the concepts of this series to a use, here are two examples:

• The implementation of a minimap and
• The concept of a bouncing map

The minimap is implemented pretty easy. With a decreased tilesize and a zero mountain height you can easily modify the size of the map and make it ‘mini’. Now the map is bigger than what the ‘playground’ shows. Pretty easy again. With the getNodeByCoords methods we’ll define the middle node (for example by clicking on the minimap) and do just show a region of the actual map.

And here is just a little idea I had when I thought about how to torture the little folks in my realm. Click on the map and imagine a mighty clashing sound.

Wish I had some more time to continue here. Meanwhile you can play Pete Barons remake of populous in flash. Have fun, yoho!

The following dialogue came up in the comments of Part 1 of this tutorial.

JJ: Could you show me a way to fill each tile of the map with a bitmap or some other graphic type? Is a solution possible based on using beginBitmapFill() ?
Me: What exactly do you want to achieve? Do you want to use graphics (imported or drawn in flash) for tiles? Or do you really want to fill the tile like texturing it?
JJ: I meant filling the tiles like texturing it.

What do you think?

It is dynamically built, it is modifiable by mouse clicks, it is textured and it was pretty simple!

Import, declare and use your favorite texture(s)

Via File > Import > Import to Library choose any jpg, gif, png or whatnot and import it. I imported a jpeg (try ‘free sample texture’ on google), renamed it, linked it to ActionScript and included two lines at the beginning of the code:

var grass:BitmapData = new TextureG(100, 100);
var water:BitmapData = new TextureW(100, 100);

What those two lines do is creating two BitmapData objects with 100px width and 100px height. Those can be used with beginBitmapFill.

Remember the drawFour() function from the last tutorials? That is the function that draws the tiles with fills and is changed with little effort.

function drawFour(tile)
{
	with ( tileMap.graphics )
	{
		beginBitmapFill(grass);
		moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
		lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
		lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
		lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
		lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
		endFill();

If the function would end here all tiles were drawn with the grass texture. Nice for a quick try. But it doesn’t look that good. Well, there are still some lines that may be useful. Remember the different shades of green used to indicate the direction of the tile? Exactly those shades of green are now used to shade the texture. So, for the darkest green used (0×003300) I will now use a black with 50% transparency. The second darkest green is now a 25% transparent black. Same thing goes for the bright greens which are now white with different transparencies. Try what looks good on your texture.

Oh, and if the tile is flat and on level zero the grass is just overpainted by the water texture.

		switch(tile.tType)
		{
			case "0000":
				//flat
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				if ( tile.lev == 0 )
				{
					beginBitmapFill(water);
				}
				else
				{
					beginFill(0,0);
				}
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				endFill();
				break;
			case "0001":
				//north
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				beginFill(0x000000, 0.5);
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				endFill();
				//south
				moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				beginFill(0x000000, 0.25);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				endFill();
				break;
			case "0010":
				//east
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				beginFill(0x000000, 0.5);
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				endFill();
				//west
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				beginFill(0xffffff, 0.1);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				endFill();
				break;
...

And so on and so on. Yes, it is a quick and dirty solution. It does work though. The begin BitmapFill method does have some parameters that were not covered in this tutorial and can improve the overall visuals.

Yoho!

Alright, giving the landscape some natural feeling by applying colors to the tiles. This simply fits into the dynamic drawing of tiles by using a fill. The shading here will be done with static colors instead of shadow calculation.

The result will look like this:

First things first. When it comes to choosing a color palette that fits the needs of our application. The most simple thing I could think of here was shades of green with blue for the zero level (aka water). The surface of planet could be red, a desert maybe yellow and white could be used for the inside of a refridgerator (could be an interesting game).

The shading main palette for the tiles

The next thing I did was to set a tile type. That way I was able to use switch...case (more on that here). The next code is based on Appendix A. There, right after the makeTiles function I inserted the following.

function recalcTiles()
{
	for each ( var tile in tileArray )
	{
		tile.low = tile.n.w;
		tile.e.w < tile.n.w ? tile.low = tile.e.w : void;
		tile.s.w < tile.e.w ? tile.low = tile.s.w : void;
		tile.w.w < tile.s.w ? tile.low = tile.w.w : void;

		tile.n.i = tile.n.w - tile.low;
		tile.e.i = tile.e.w - tile.low;
		tile.s.i = tile.s.w - tile.low;
		tile.w.i = tile.w.w - tile.low;

		tile.tType:String = tile.n.i.toString()+tile.e.i.toString()+tile.s.i.toString()+tile.w.i.toString();
	}
}

The lowest height value (sic!) is found by comparing all four corner nodes. Each node then gets assigned a value i determining his difference from the lowest. Those values are hopefully between 1 and 0. A string is created in clockwise order.

Remember that drawTile function? That's the subject of change now.

function drawTiles()
{

	var tileMapSizeH = ( nodeCols - 1 + nodeRows - 1 ) * tileSizeH;
	var tileMapSizeV = ( nodeRows - 1 + nodeCols - 1 ) * tileSizeV;
	tileMap.x = stage.stageWidth * 0.5;
	tileMap.y = stage.stageHeight * 0.5 - tileMapSizeV * 0.5;
	tileMap.graphics.lineStyle(1, 0x000000);

	for each ( var tile in tileArray )
	{
		if ( tile.valid )
		{
			var tileText = new TextField();
			tileText.text = String(""+tile.n.w+tile.e.w+tile.s.w+tile.w.w);
			tileText.autoSize = TextFieldAutoSize.CENTER;
			tileText.x = tile.s.xPos + tileMap.x - tileText.width/2;
			tileText.y = tile.s.yPos + tileMap.y;
			addChild(tileText);

			tile.n.zPos == tile.s.zPos ? tile.ver = true : tile.ver = false;
			tile.e.zPos == tile.w.zPos ? tile.hor = true : tile.hor = false;

			drawFour(tile);
		}
	}
	addChild(tileMap);
}

Besides the text field (just information) the whole drawing code is in an external function.

function drawFour(tile)
{
	with ( tileMap.graphics )
	{
		switch(tile.tType)
		{
			case "0000":
				//flat
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				if ( tile.lev == 0 )
				{
					beginFill(0x000099);
				}
				else
				{
					beginFill(0x009900);
				}
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				endFill();
				break;
			case "0001":
				//north
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				beginFill(0x003300);
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				endFill();
				//south
				moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				beginFill(0x006600);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				endFill();
				break;
			case "0010":
				//east
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				beginFill(0x003300);
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				endFill();
				//west
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				beginFill(0x00CC00);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				endFill();
				break;
//and so on

Okay, so I had a look at every tile (like they used to look in Appendix A) and determined the direction of its parts. Then, with a look at the chosen color palette and beginFill and endFill I brought them to life. There is a case setting for each of the 16 tiles. To be honest there are only 15, because both flat tiles are in the same case, and their color just depends on their level. Seeing that concept I am sure you can figure out the rest of that function above on yourself.

After applying that the showroom will look like that.

EDIT: Here's the Source (zip).

Yoho!

This part deals with the implementation of the moving nodes method (Part 2) from one dimension to the pseudo 3D landscape and begins with the movie itself for you to test what it does.
Just hover through the landscape and lift single nodes with a mouse click. Neither am I gone further by implementing lowering nodes nor did I hide the mouse cursor and the green pointer. The first one would have (additionally) increased the number of code lines in this post without adding relevant information. Hiding the cursor would have brought the movie closer to a final state but at the moment it is the method that counts.

I will once again show the whole code (timeline for your convenience, just copy and paste it) because of several small alterations. Here is comes:

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

var nodeRows:int = 9;
var nodeCols:int = 9;

var tileSizeH:int = 32; //horizontal
var tileSizeV:int = 16; //vertical
var tileSizeM:int = 8; //mountain

function makeGrid()
{
	for ( var u = 0; u <= nodeCols ; u++ )
	{
		for ( var v = 0; v <= nodeRows ; v++ )
		{
			var node:Object = new Object();
			node.u = u;
			node.v = v;
			node.w = Math.round(Math.random());
			node.nodePos = u + "." + v;

			nodeArray.push(node);
			posArray.push(node.nodePos);
		}
	}
}

This creates a 10 by 10 nodes grid (it counts up to nine in the loop, BUT begins with zero), so what we get out of this is capable of being a 9 by 9 tiles grid. The node gets its w value on a random basis. It is either zero or one what also is our maximum difference in height between adjacent nodes. One could go further and enter a higher max value but then the map has to be tested and modified accordingly after creation of all nodes. Else the creation loop itself could bring the existing heights into account. It is absolutely possible but not included in this part.

function placeNodes()
{
	for each ( var node in nodeArray )
	{
		node.xPos = ( node.u - node.v ) * tileSizeH;
		node.yPos = ( node.v + node.u ) * tileSizeV;
		node.zPos = node.w * tileSizeM;
		node.nArray = getNeighbors(node);
	}
}

Going through all created nodes and assigning them their three dimensional pixel position and all the nodes that are directly adjacent to them (maxmum four).

var nodeMap:Sprite = new Sprite();
addChild(nodeMap);

function drawNodes()
{
	var nodeMapSizeH = ( nodeCols - 1 + nodeRows - 1 ) * tileSizeH;
	var nodeMapSizeV = ( nodeRows - 1 + nodeCols - 1 ) * tileSizeV;
	nodeMap.x = stage.stageWidth * 0.5;
	nodeMap.y = stage.stageHeight * 0.5 - nodeMapSizeV * 0.5;
	nodeMap.graphics.lineStyle(1, 0xaaaaaa);
	for each ( var node in nodeArray )
	{
		nodeMap.graphics.drawEllipse(node.xPos - 4, node.yPos - 2, 8, 4);
	}
}

Creating a new sprite, adding it to the screen and placing it. Flash basics there. Then again looping through all nodes drawing them to the sprite that will serve as the visualization of the "landscapes" "zero level" (would be water in Populous or SimCity).

makeGrid();
placeNodes();
drawNodes();

Yes, those three function need to be called for the code to work.

function getNodeByCoords( u, v )
{
	var posString:String = u + "." + v;
	var nodePos:int = posArray.indexOf(posString);
	if ( nodePos >= 0 )
	{
		return nodeArray[nodePos];
	}
	else
	{
		return null;
	}
}

This function returns a node by given grid coordinates.

function validateNode ( u, v )
{
	if ( u >= 0 && u <= nodeCols && v >= 0 && v <= nodeRows )
	{
		return true;
	}
	else
	{
		return false;
	}
}

function getNeighbors( cNode )
{
	var nArray:Array = new Array();
	validateNode ( cNode.u, cNode.v - 1 ) ? nArray.push( getNodeByCoords ( cNode.u, cNode.v - 1 ) ) : void;
	validateNode ( cNode.u + 1, cNode.v ) ? nArray.push( getNodeByCoords ( cNode.u + 1, cNode.v ) ) : void;
	validateNode ( cNode.u, cNode.v + 1 ) ? nArray.push( getNodeByCoords ( cNode.u, cNode.v + 1 ) ) : void;
	validateNode ( cNode.u - 1, cNode.v ) ? nArray.push( getNodeByCoords ( cNode.u - 1, cNode.v ) ) : void;

        validateNode ( cNode.u - 1, cNode.v - 1 ) ? nArray.push( getNodeByCoords ( cNode.u - 1, cNode.v - 1 ) ) : void;
	validateNode ( cNode.u - 1, cNode.v + 1 ) ? nArray.push( getNodeByCoords ( cNode.u - 1, cNode.v + 1 ) ) : void;
	validateNode ( cNode.u + 1, cNode.v - 1 ) ? nArray.push( getNodeByCoords ( cNode.u + 1, cNode.v - 1 ) ) : void;
	validateNode ( cNode.u + 1, cNode.v + 1 ) ? nArray.push( getNodeByCoords ( cNode.u + 1, cNode.v + 1 ) ) : void;

	return ( nArray );
}

Those two functions are basically checking which of the eight adjacent nodes exist (there are less than four for margin nodes) and return an array that is then saved in the single node's properties.

var tileArray:Array = new Array();

function makeTiles()
{
	for ( var u = 0; u < nodeCols; u++ )
	{
		for ( var v = 0; v < nodeRows; v++ )
		{
			var tile:Object = new Object();
			tile.n = getNodeByCoords(u, v);
			tile.e = getNodeByCoords(u+1, v);
			tile.s = getNodeByCoords(u+1, v+1);
			tile.w = getNodeByCoords(u, v+1);
			tileArray.push(tile);
		}
	}
}

Tiles are created between four nodes. So there is one tile less than nodes in a column and the same goes for the rows.

var tileMap:Sprite = new Sprite();
addChild(tileMap);
var tileMapSizeH = ( nodeCols - 1 + nodeRows - 1 ) * tileSizeH;
var tileMapSizeV = ( nodeRows - 1 + nodeCols - 1 ) * tileSizeV;
tileMap.x = stage.stageWidth * 0.5;
tileMap.y = stage.stageHeight * 0.5 - tileMapSizeV * 0.5;

var terraform:Boolean = false;

function drawTiles()
{
	tileMap.graphics.clear();

	for each ( var tile in tileArray )
	{
		tile.n.zPos == tile.s.zPos ? tile.ver = true : tile.ver = false;
		tile.e.zPos == tile.w.zPos ? tile.hor = true : tile.hor = false;

		with(tileMap.graphics)
		{
			lineStyle(1, 0xaaaaaa);

			if ( tile.s.u == nodeCols )
			{
				moveTo(tile.e.xPos, tile.e.yPos);
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				moveTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.s.xPos, tile.s.yPos);
				lineTo(tile.e.xPos, tile.e.yPos);

			}
			if ( tile.s.v == nodeRows )
			{
				moveTo(tile.w.xPos, tile.w.yPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				moveTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.s.xPos, tile.s.yPos);
				lineTo(tile.w.xPos, tile.w.yPos);
			}

			lineStyle(1, 0x000000);

			if ( tile.ver && tile.hor )
			{
				if ( tile.n.zPos > tile.e.zPos )
				{
					moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
					lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				}
				else if ( tile.n.zPos < tile.e.zPos )
				{
					moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
					lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				}
				//if both are the same, there is no line
			}
			else if ( tile.ver && !tile.hor )
			{
				moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
			}
			else if ( !tile.ver && tile.hor )
			{
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
			}
			moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
			lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
			lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
			lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
			lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
		}
	}
	terraform = false;
}

Drawing the tiles was covered in Part 1 and Appendix A.
There is a new Boolean that will later on tell if the map is already updated or still drawing. Once the new map is on it is set to false.

makeTiles();
drawTiles();

Again, calling functions.

var tFormCursor:MovieClip = new MovieClip();
with( tFormCursor.graphics )
{
	lineStyle(1, 0x990000);
	beginFill(0x990000, 0.5);
	drawEllipse(-6, -4, 12, 8);
	endFill();
}
tFormCursor.visible = false;

var nFormCursor:MovieClip = new MovieClip();
with( nFormCursor.graphics )
{
	lineStyle(1, 0x009900);
	beginFill(0x009900, 0.5);
	drawEllipse(-5, -3, 10, 6);
	endFill();
}
nFormCursor.visible = false;
addChild(nFormCursor);
addChild(tFormCursor);

The cursors that were introduced in Part 2. For a more appropriate visulization in the isometric map ellipses instead of circles are used.

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

var actualNode:Object = new Object();

function mouseMoveHandler(event:MouseEvent)
{
	updatePosition();
}
function updatePosition()
{
	var nodeU = Math.round (( nodeMap.mouseX / tileSizeH ) * 0.5 + ( nodeMap.mouseY / tileSizeV ) * 0.5 );
	var nodeV = Math.round ( - ( nodeMap.mouseX / tileSizeH ) * 0.5 + ( nodeMap.mouseY / tileSizeV ) * 0.5 );

	if ( validateNode(nodeU, nodeV) )
	{
		actualNode = getNodeByCoords ( nodeU, nodeV );

		tFormCursor.visible = true;
		tFormCursor.x = actualNode.xPos + nodeMap.x;
		tFormCursor.y = actualNode.yPos - actualNode.zPos + nodeMap.y;

		nFormCursor.visible = true;
		nFormCursor.x = actualNode.xPos + nodeMap.x;
		nFormCursor.y = actualNode.yPos + nodeMap.y;
	}
	else
	{
		actualNode = null;
		tFormCursor.visible = false;
		nFormCursor.visible = false;
	}
}

The function showing the actual position in the grid. By hiding the the mouse cursor and the nFormCursor one would only see the actual position that will be altered by click. updatePosition calculates the position in grid coordinates (or column and row). Node distances that are set at the beginning are taken into account. Instead of nodeMap.mouseX one could take just mouseX but then the map's registration point must also be considered in that calculation.

stage.addEventListener(MouseEvent.CLICK, mouseClickHandler);

function mouseClickHandler(event:MouseEvent)
{
	if ( actualNode && !terraform )
	{
		terraform = true;
		var openList:Array = new Array();
		var closedList:Array = new Array();
		openList.push(actualNode);
		while ( openList.length > 0 )
		{
			var oNode:Object = openList.shift();
			closedList.push(oNode);
			oNode.w++;
			for each ( var nNode in oNode.nArray )
			{
				if( closedList.indexOf(nNode) < 0 && openList.indexOf(nNode) < 0 )
				{
					if ( oNode.w - nNode.w > 1 )
					{
						openList.push(nNode);
					}
				}
			}
		}
		placeNodes();
		drawTiles();
		updatePosition();
	}
}

The heart of this tutorial part. When the click listener fires it checks wether there is actually a grid node under the cursor by looking for actualNode not being null. Also, if there is actually a calculation going on, means terraform would be true nothing happens. Let's assume there is an actualNode and no calculation is going on.
terraform is set true (a click won't have any effect in that moment), two arrays are created and the actualNode is pushed into an openList. That array is crucial for the calculation loop. So, while there are more than zero objects in there it loops through the following lines.
We declare a new Object named oNode and create a reference to the first element of openList. oNode is then pushed into the closedList because we pretty sure will take care about it now.

This node's (that's what this element/object is) height step is increased by one. Now, this node's adjacent neighbors are checked wether they are already in the open or closed list. If so, skip further steps. If not the height differnce is calculated and if it differs more than on step, guess what, the relevant node is pushed into the openList.
All that open and closed list checking is done to avoid an infinite loop via checking nodes that already where moved/visited. leaving that out can create interesting results but those may be not the ones we were looking for.

Now, with that done, you should be ready to implement the same for lowering nodes. What bothers me so far and needs to be clarified prior to action is the best possible control scheme. Without the right mouse button, not because I do not have one but we're in Flash and there is a pre-defined use for it(context menu), there are several possibilities. One could be having a button for 'LAND UP' and a button for 'LAND DOWN'. Hmm, what's a common techniqe in Populous? Twice up, one down for four flat tiles. Okay, I could switch here. Three up, three down, one up for 16 flat tiles. And that is no seldom action. In the name of user friendliness: no buttons to switch here please! That would be more button mashing than actual landscaping. Up next: the control scheme!

Yoho!