I’ve been working on a facebook game called Veer (launched on January, 4th, 2012) for my client, Handson Entertainment . In this game, you play as a reporter, like Lois Lane, working for a news station, Veer. You begin your journey in a remote island called “Tuto Island” where you learn the basics of the game and then, as you level up, you will be taken to cities/places such as Paris, Monaco, Zanzibar, Beijing, etc. to hunt for interesting news. Based on your locations and levels/experience, you will have different missions/tasks from finding a missing colleague, locating a run-away celebrity, and so on. Also, you get to visit famous landmarks like The Eiffel and Louvre Museum in Paris.

The game was originally built as a hexagonal-tile game but my client decided to switch over to isometric in a later stage. Fortunately, I have enough experience with as3isolib so I managed to replace the hex engine while keeping most parts of the codebase relatively unchanged in just 3 sleepless days.

The project involved 3 flash developers, 4 rails developers, a couple of artists/animators, and a lot of QA guys. I developed the game framework, the rendering engine, and also tools for game designers/artists. Due to its simplicity and ease of use, I chose Robotlegs framework as the foundation of the game framework to connect all different parts/modules and make them work together.

Here are screenshots of the game and the tools I built.

Veer Game

Veer Fullscreen

Map Editor

Map Editor

Map Editor

Asset Editor

Spritesheet generator

The game is still a work in progress and some things are not well polished but it’s playable. So play the game

Here’s an extension that allows you to quickly export your symbols for actionscript and create their bound-classes.

Features

1. Manual & automatic modes. In manual mode, the extension will only process the selected symbols in the library panel. In automatic mode, it will process all symbols of the types you choose.
2. You can select a folder (root) where the .as files will be created. If you don’t select a root folder, the files will be created in the same folder as your .fla.
3. Custom base classes and packages. Note that this extension will not create the base class for you.

Demo

Download

Download the extension here → Class Generator . Extract the zip and install the mxp.

Warning

If you want to use this extension when working on an ongoing project. Make sure you backup your .as files before generating classes as this extension might overwrite them.

For those who can’t find Ant View on FB 4.5.

Step 1 : Go to File->New Project to open the Project Wizard.

Step 2 : Check Show All Wizards.

Step 3 : Expand Java from the list. Select Java Project from Existing Ant Buildfile then click Next. You’ll be prompted with a dialog to enable Ant Development.

Step 4 : Check Always enable activities and don’t ask me again then click OK.

Step 5 : Back on the Project Wizard. Click Cancel.

Now you should see ANT when you go to Window -> Show View -> Other.

I’ve been working on isometric games for quite a while. Although i work with a team of artists who are capable of making beautiful assets, I often need to create them myself for quick prototypes. Creating isometric assets is time consuming. I know prototypes don’t have to be pretty but still, I don’t want to show crap.

I had been looking for a flash extension that could help me quickly create assets but I found none that i liked so I decided to make one myself. This is the first flash extension that i ever made. One thing I learned from making this extension : JSFL is a pain in the ass.

What does it do?

Just a few things that I need:

• Create an isometric grid and put it in a guide layer. Note: if you’re using as3isolib, cell height in the panel = IsoGrid.cellSize
• Transform (skew, rotate, scale) selected objects on the stage so that they can be used for constructing isometric objects

How to use

Download

Download the extension here → isometric_helper . Extract the zip and install the .mxp.

I had been trying to get my individual tax id from IRS since January because the company i’m working for told me that I needed it in order to get full payments, otherwise they had to withhold 30% of my monthly fees according to IRS regulation. People said it would be a long process, and they are right!

After months exchanging emails with a tax consultant, getting the required papers from the company & from SSA office in the US embassy in Manila, sending my passport to a friend in the US to get a notarized copy, etc., I received a letter from IRS saying that my application was rejected because my passport copy was not properly notarized. I was puzzled so I asked my manager in the US to call IRS to get a clarification. After about an hour of getting transferred from one IRS agent to another (it would cost me a serious amount of $ if I called them myself), he finally got to talk to someone who could answer our inquiry. The answer is … I don’t need/qualify for ITIN because I perform my work in Indonesia, not in the US. The agent referred to this IRS publication, specifically the part that reads:

Services performed outside the United States. Compensation paid to a nonresident alien (other than a resident of Puerto Rico, discussed later) for services performed outside the United States is not considered wages and is not subject to withholding.

So if you’re working remotely for a US company and the company asks for your ITIN, show them the publication.

I got a playbook (for free … yay!) from a RIM dev partner a few days ago and I couldn’t wait to convert an as3isolib demo i wrote a while ago and see it run on that nice gadget.

So here it is.

In this article, I will show you how to make a rotatable IsoGroup in As3Isolib. Well, I don’t actually rotate the group but instead, I reposition the group’s children so that the group appears to be rotated.

If you’re new to As3Isolib, you can learn a bit about the basics here. If you know the library already, you might want to skip step 1.

Basic steps:

• Subclass the IsoGroup
• Map the group’s children’s positions to a 2d array
• Add rotation logic
• Rotate the array
• Use the array to reposition the children
• Render

What I need:

1. as3ds Array2 class
2. an algorithm to rotate a 2d rectangular array. Just google it. It’s everywhere

Step 1 — Set up my world

I’m going to make a world ( IsoView ) that contains 2 scenes. One at the bottom to contain an instance of IsoGrid and on top of that, another scene to contain isometric objects. So I’ll start a document class with just a few methods as follows:

package
{
	import as3isolib.display.IsoView;
	import as3isolib.display.scene.IsoGrid;
	import as3isolib.display.scene.IsoScene;
	import flash.display.Sprite;
	import flash.events.Event;

	public class Main extends Sprite
	{

		private var _world:IsoView;
		private var _grid:IsoGrid;
		private var _groupScene:IsoScene;

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

		}

		private function createWorld():void
		{
			_world = new IsoView();
			_world.setSize(400, 400);
			addChild(_world);

			///////// GRID
			_grid = new IsoGrid();
			_grid.setGridSize(10, 10);
			_grid.cellSize = 20;

			var gridScene:IsoScene = new IsoScene();
			gridScene.addChild(_grid);

			_world.addScene(gridScene);

			///////// GROUP SCENE
			_groupScene = new IsoScene();
			_world.addScene(_groupScene);

			_world.addEventListener(Event.ENTER_FRAME, render);
		}

		private function render(e:Event):void
		{
			_world.render(true);

		}
	}
}

Empty World

Line 38 — 45: Creates an IsoGrid and an IsoScene to contain it. And then adds the scene to the IsoView.

Line 48 — 49: Creates a scene to contain the IsoGroup and adds it to the IsoView.

The last line sets ENTER_FRAME listener to render the world.

If I compile the class now, I’ll get something like the picture on the left.

Step 2 — Write a custom IsoGroup

Now I’m going to extend IsoGroup and add some cool stuff. First, some basic stuff just to set things up.

package
{
	import as3isolib.display.IsoGroup;
	import as3isolib.display.scene.IsoGrid;

	public class Group extends IsoGroup
	{
		protected var _grid:IsoGrid;

		public function Group(grid:IsoGrid, descriptor:Object = null)
		{
			super(descriptor);
			_grid = grid;
		}
	}
}

Then I add a method through which I can send a 2d array to the Group and let it build a bunch of IsoBox.

public function setMap(map:Array):void
{

	if (children.length > 0)
	{
		removeAllChildren();
	}

	//make NxN array that represents the group's layout
	//this is the array we'll rotate
	var w:Number = Math.max(map[0].length, map.length);
	_layout = new Array2(w,w);
	_layout.fill(0);

	for (var row:int = 0; row < map.length; row++)
	{
		var r:Array = map[row];

		for (var col:int = 0; col < r.length; col++)
		{
			if (map[row][col] != 0)
			{
				var box:IsoBox = new IsoBox();
				box.fills = [new SolidColorFill(0x00FFFF, 1), new SolidColorFill(0x8080C0, 1), new SolidColorFill(0xFF8040, 1)];
				box.setSize(_grid.cellSize, _grid.cellSize, 40);
				box.moveTo(_grid.cellSize * col, _grid.cellSize * row, 0);
				box.name = map[row][col];
				addChild(box);

				_layout.set(col, row, box);
			}
		}
	}

}

Line 4 — 7: Removes all previous children in the group if there’s any.

Line 11 — 13: make a square Array2 based on the number of columns or rows in the passed array — whichever the largest to make sure that when I move its elements, they will not fall out of bounds. I use the array as a reference to the positions of the group’s children (IsoBox) and I call it _layout.

Line 15 — 33: Loop through the Array2 and create IsoBox instances. Note that I’ll use 0 in the array to mark places that I want to be empty. So in the loop, I check if an element is a 0 or not. If it is not a 0, I create an IsoBox there. And store a reference to it in the _layout array.

Back to the Main class. I add a new method to create my group and I also define the group’s map.

private var _map:Array = [
	[0, 'A', 'B', 'C'],
	['D', 'E', 'F', 'G']
];

private function init(e:Event = null):void
{
	removeEventListener(Event.ADDED_TO_STAGE, init);
	createWorld();
	createGroup();
}

private function createGroup():void
{
	_group = new Group(_grid);
	_group.setMap(_map);
	_group.moveTo(60, 60, 0);
	_groupScene.addChild(_group);

}

So far I get this when I compile the codes :

Basic Group

Pretty, eh?

Step 3 — Make the group rotatable

Now that I have the basic group in place it’s time to make it rotatable. So I add a new method rotate() that takes a boolean flag to indicates if the rotation is clockwise (true) or counter-clockwise (false).

public function rotate(clockWise:Boolean = true):void
{

	//make a new NxN array for the new layout ( after rotation )
	var w:Number =_layout.width;
	var newLayout:Array2 = new Array2(w, w);
	newLayout.fill(0);

	for (var r:int = 0; r < w; r++)
	{
		for (var c:int = 0; c < w; c++)
		{
			//found this array-rotation algo somewhere on the web
			var c0:int = (clockWise == true) ? w - 1 - r : r;
			var r0:int = (clockWise == true) ? c : w - 1 - c;

			newLayout.set(c0, r0, _layout.get(c, r));
		}
	}

	_layout = newLayout;
	updateChildren();

}

protected function updateChildren():void
{
	for (var r:int = 0; r < _layout.height; r++)
	{
		for (var c:int = 0; c < _layout.width; c++)
		{
			if (_layout.get(c, r) is IsoBox)
			{
				_layout.get(c, r).moveTo(c * _grid.cellSize, r * _grid.cellSize, 0);
			}
		}

	}
}

Line 5 — 7: Makes an empty array for the new layout

Line 13 –14: Using the algorithm, I figure out where each box should end up

Line 15: Set the box to a corresponding position in the new layout

Line 21: replace the old layout with the new one

Line 26 — 39: move the boxes to their new positions using the new layout as a reference

Back to the Main class again, I add some buttons to set the group’s rotation and I have something like this (click the black buttons):

So that’s basically all the steps to make a rotatable IsoGroup. Pretty simple, right?

Extra — A group that can be rotated over a pivot

As an extra, here’s a Group subclass that allows you to rotate it around a selected box (pivot). What different in this new class from the Group is the way it handles the rotation. Look at rotate() and updateChildren(). Basically, what this class does is move itself so that the pivot box stays at the same position as it was before rotation.

Here’s the demo. Click a box to select a pivot. Click it again to deselect. When there’s no box selected, the group can rotate just like the one above.

And here’s the class:

package
{
	import as3isolib.display.primitive.IsoBox;
	import as3isolib.display.scene.IsoGrid;
	import as3isolib.graphics.SolidColorFill;
	import eDpLib.events.ProxyEvent;
	import flash.events.MouseEvent;

	/**
	 * ...
	 * @author Anggie Bratadinata | www.masputih.com
	 */
	public class GroupWithPivot extends Group
	{

		public var selectedBox:IsoBox;

		private var _selectedBox_oldX:Number;
		private var _selectedBox_oldY:Number;

		public function GroupWithPivot(grid:IsoGrid, descriptor:Object = null)
		{
			super(grid, descriptor);

		}

		override public function setMap(map:Array):void
		{
			super.setMap(map);

			for each (var isoBox:IsoBox in children)
			{
				isoBox.addEventListener(MouseEvent.CLICK, onBoxClick);
			}
		}

		private function onBoxClick(e:ProxyEvent):void
		{
			var newBox:IsoBox = e.target as IsoBox;

			if (selectedBox != null)
			{
				//reset color
				selectedBox.fills = [new SolidColorFill(0x00FFFF, 1), new SolidColorFill(0x8080C0, 1), new SolidColorFill(0xFF8040, 1)];
			}
			if (newBox != selectedBox)
			{
				//set new color
				newBox.fills = [new SolidColorFill(0x804040, 1), new SolidColorFill(0x400000, 1), new SolidColorFill(0x804040, 1)];
				selectedBox = newBox;
			}
			else
			{
				selectedBox = null;
			}

		}

		override public function rotate(clockWise:Boolean = true):void
		{
			if (selectedBox != null)
			{
				_selectedBox_oldX = selectedBox.x;
				_selectedBox_oldY = selectedBox.y;
			}

			super.rotate(clockWise);

		}

		override protected function updateChildren():void
		{
			super.updateChildren();

			if (selectedBox != null)
			{
				var dx:int = selectedBox.x - _selectedBox_oldX;
				var dy:int = selectedBox.y - _selectedBox_oldY;
				moveTo(x - dx, y - dy, 0);

			}
		}

	}

}

Download

Here’s a zip containing all of those classes : → Rotatable Group Project

One of the requirements of my latest as3isolib project was to have “realistic” looks for all objects. The only way to achieve this is use bitmap assets so I paid a friend who’s really good at making animated 3d models to create animated assets for me and render them as PNG sprite sheets. Another thing I had to do was blit the sheets but there’s no built-in bitmap blitter class in as3isolib that I could use so I wrote the SpriteSheet class below.

package iso
{
	import de.polygonal.ds.Array2;
	import iso.Directions;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.utils.getTimer;

	/**
	 * Bitmap-blitter. The source must be a bitmap or sprite with 8 rows representing 8 directions.
	 * Each row contains an animation cycle where column 0 is for idle state.
	 *
	 * @author Anggie Bratadinata
	 */
	public class SpriteSheet extends Sprite
	{
		//rendering interval
		public static const RENDER_INTERVAL:Number = 64;

		//bitmap frames
		protected var _bitmapArray:Array2;
		//sheet source
		protected var _source:DisplayObject;
		//frame size
		protected var _frameWidth:Number;
		protected var _frameHeight:Number;
		//the rendered bitmap
		protected var _frameBitmap:Bitmap;
		protected var _frameRect:Rectangle;

		//current facing direction
		protected var _direction:String;
		//current frame row
		protected var _currentRow:Array;
		protected var _currentColNum:Number;
		//render timer
		protected var _oldTime:Number = 0;
		protected var _renderInterval:Number;

		//is the south-facing sequence on the first row (true) or not (false)?
		protected var _southFirst:Boolean;

		//the visual state
		protected var _isIdle:Boolean;

		//if true, a new bitmap will be generated
		protected var _isDirty:Boolean;

		public function SpriteSheet()
		{

		}

		/**
		 * Build the sprite sheet. The source must contain 8 rows of animation frames arranged in clockwise order.
		 * The first row can be the south face or the south west. A tool like SpriteForge renders tilesheets
		 * with the south-facing sequence on the first row.
		 *
		 * Acceptable row arrangements : S,SW,W,NW,N,NE,E,SE or SW,W,NW,N,NE,E,SE,S
		 *
		 * @param	source			The source Display object.
		 * @param	frameWidth		animation frame width
		 * @param	frameHeight		animation frame height
		 * @param	renderInterval	delay between renders. This defines the animation blitting speed in milliseconds
		 * @param	southFirst		the south-facing sequence is on the first row (true) or the last (false).
		 *
		 */
		public function build(source:DisplayObject, frameWidth:Number, frameHeight:Number, renderInterval:Number = SpriteSheet.RENDER_INTERVAL, southFirst:Boolean = true):void
		{

			_source = source;
			_frameWidth = frameWidth;
			_frameHeight = frameHeight;
			_renderInterval = renderInterval;
			_southFirst = southFirst;

			var sourceBd:BitmapData = new BitmapData(source.width, source.height, true, 0x00000000);
			sourceBd.draw(source, null, null, null, null, true);

			var numCols:Number = Math.floor(source.width / frameWidth);
			var numRows:Number = Math.floor(source.height / frameHeight);

			_frameRect = new Rectangle(0, 0, frameWidth, frameHeight);

			_bitmapArray = new Array2(numCols, numRows);

			for (var i:int = 0; i < numRows; i++)
			{
				for (var j:int = 0; j < numCols; j++)
				{
					var bd:BitmapData = new BitmapData(frameWidth, frameHeight, true, 0x000000);
					_frameRect.x = j * frameWidth;
					_frameRect.y = i * frameHeight;

					bd.copyPixels(sourceBd, _frameRect, new Point(0, 0));

					_bitmapArray.set(j, i, bd);

				}

			}

			_frameRect.x = 0;
			_frameRect.y = 0;

			//if the south faces is on the last row, move it to the first
			if (!_southFirst)
			{
				_bitmapArray.shiftDown();
			}

			setDirection(Directions.S);
			idle();

			_oldTime = getTimer();
			addEventListener(Event.ENTER_FRAME, onEnterFrame);

		}

		/**
		 * Set the state to idle
		 */
		public function idle():void
		{

			_isIdle = true;
			_isDirty = true;
		};

		/**
		 * Set the state to walk/animated
		 *
		 */
		public function action():void
		{
			_isIdle = false;
			_isDirty = true;
		};

		protected function onEnterFrame(e:Event = null):void
		{

			var elapsed:Number = getTimer() - _oldTime;

			if (elapsed >= _renderInterval && _isDirty)
			{
				render();
				_oldTime = getTimer();
			}

		}

		protected function render():void
		{
			if (_frameBitmap == null)
			{
				_frameBitmap = new Bitmap(new BitmapData(_frameWidth, _frameHeight, true, 0x00000000));
				addChild(_frameBitmap);
			}

			_frameBitmap.bitmapData.lock();

			if (_isIdle)
			{
				_currentColNum = 0;
				_frameBitmap.bitmapData.copyPixels(_currentRow[_currentColNum], _frameRect, new Point(0, 0), null, null, false);
				//trace(this + "render idle");
				_isDirty = false;
			}
			else
			{

				if (_currentColNum < _currentRow.length-1)
				{
					try {
						_frameBitmap.bitmapData.copyPixels(_currentRow[_currentColNum], _frameRect, new Point(0, 0), null, null, false);
					}catch (error:Error) {
						//trace("ERROR RENDERING : " + _currentColNum);
						return;
					}
					_currentColNum++;
				}
				else
				{
					_currentColNum = 1;
				}

				_isDirty = true;
			}

			_frameBitmap.bitmapData.unlock();
		}

		/**
		 * Set the active direction and make _currentRow point to a specific row in _bitmapArray
		 * @param	direction
		 */
		public function setDirection(direction:String):void
		{
			//trace(this +"set direction : " +direction);
			_direction = direction;
			var rowNum:Number;
			switch (direction)
			{
				case Directions.S:
					rowNum = 0;
					break;
				case Directions.SW:
					rowNum = 1;
					break;
				case Directions.W:
					rowNum = 2;
					break;
				case Directions.NW:
					rowNum = 3;
					break;
				case Directions.N:
					rowNum = 4;
					break;
				case Directions.NE:
					rowNum = 5;
					break;
				case Directions.E:
					rowNum = 6;
					break;
				case Directions.SE:
					rowNum = 7;
					break;
				default:
					rowNum = 0;
			}
			//trace(this + "setDirection, row " + rowNum);
			_currentRow = _bitmapArray.getRow(rowNum);

			_isDirty = true;
			render();

		}

		/**
		 * Get currently rendered frame
		 *
		 * @return Bitmap
		 */
		public function getFrameBitmap():Bitmap
		{
			return _frameBitmap;
		}

		/**
		 * Get current direction
		 * @return
		 */
		public function getDirection():String
		{
			return _direction;
		};

	}

}

Next, I’ll explain how to create your sheets.

Creating the sheets

Rules:

• The sheet must have 8 rows , one for each direction, arranged in clockwise order
• Either the first or last row must contain sequence for animations used when the object is facing south. The acceptable row order is S-SW-W-NW-N-NE-E-SE or SW-W-NW-N-NE-E-SE-S
• The first column is used for “idle” state

Example:

Sample Sprite Sheet

3d artists usually know how to render 3d animated models as sprite sheets but if you don’t have anyone to do that for you and you, like myself, don’t know how to use 3d editors, you can use one of these tools below to make png sprite sheets out of 3d models. None of them is free but they are all worth buying:

• SpriteForge ( supports multiple formats : md2, b3d, x, etc). This is what I use. The site seems down when I’m writing this article, though.
• SpriteWorks (collada & .dts only)
• FragMotion (supports multiple formats ). Last time I tried it, it could only render one row at a time so I had to use Fireworks to combine and arrange the output PNGs as one big sheet.

Next, you have to find out the dimension of the frame in your png sheet which is easy; just divide the width of the png by the number of columns to get the frame width and divide the height of the png by the number of rows to get the frame height. If you use one of the tools in the list above, you don’t have to calculate the frame dimensions yourself because you have to enter their values somewhere before you hit render button.

Test your sheet

Now you can test your sheet. The SpriteSheet class has 2 states : “idle” and “action”. If you set it to idle by calling idle() function, it will render a frame from the first column. If you set it to action by calling action(), it will blit all frames in a row, depends on the direction you set, starting from the second column until you set it to idle again. Since the SpriteSheet class doesn’t depend on any as3isolib class and it extends flash.display.Sprite, you can test it easily. Here’s a sample tester:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import iso.Directions;
	import iso.SpriteSheet;

	/**
	 * ...
	 * @author Anggie Bratadinata | www.masputih.com
	 */
	public class Tester extends Sprite
	{
		[Embed(source='f0.png')]
		public const SHEET:Class;

		public const SHEET_FRAME_WIDTH:Number = 48;
		public const SHEET_FRAME_HEIGHT:Number = 92;

		private var _ss:SpriteSheet;

		public function Tester()
		{
			addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);

			createUI();
			createSpriteSheet();

		}

		private function createSpriteSheet():void
		{

			_ss = new SpriteSheet();
			_ss.build(new SHEET(), SHEET_FRAME_WIDTH, SHEET_FRAME_HEIGHT);
			_ss.x = _ss.y = 100
			addChild(_ss);

		}

		private function changeDirection(e:Event):void
		{
			var s:Sprite = Sprite(e.target);
			_ss.setDirection(s.name);
		}

		private function changeState(e:Event):void
		{
			var s:Sprite = Sprite(e.target);

			if (s.name == "idle")
			{
				_ss.idle();
			}
			else if (s.name == "action")
			{
				_ss.action();
			}
		}

		private function createUI():void
		{
			addChild(createButton("action", 10, 10, changeState));
			addChild(createButton("idle", 80, 10, changeState));

			addChild(createButton(Directions.S, 10, 40, changeDirection, 0x400080));
			addChild(createButton(Directions.SW, 80, 40, changeDirection, 0x400080));
			addChild(createButton(Directions.W, 150, 40, changeDirection, 0x400080));
			addChild(createButton(Directions.NW, 230, 40, changeDirection, 0x400080));
			addChild(createButton(Directions.N, 10, 70, changeDirection, 0x400080));
			addChild(createButton(Directions.NE, 80, 70, changeDirection, 0x400080));
			addChild(createButton(Directions.E, 150, 70, changeDirection, 0x400080));
			addChild(createButton(Directions.SE, 230, 70, changeDirection, 0x400080));

		}

		private function createButton(labelText:String, x:Number, y:Number, clickListener:Function, bgColor:uint = 0, labelColor:uint = 0xFFFFFF, width:Number = 60):Sprite
		{

			var label:TextField = new TextField();
			label.textColor = labelColor;
			label.autoSize = TextFieldAutoSize.LEFT;
			label.text = labelText;

			var s:Sprite = new Sprite();
			s.addChild(label);
			s.name = labelText;

			with (s)
			{
				graphics.beginFill(bgColor);
				graphics.drawRect(0, 0, 60, 20);
				graphics.endFill();
			}
			s.x = x;
			s.y = y;
			s.mouseChildren = false;
			s.addEventListener(MouseEvent.CLICK, clickListener);
			return s;
		}

	}

}

Attaching the SpriteSheet to IsoSprite

Using the SpriteSheet to skin an IsoSprite is easy. An extra step you must do is offset the SpriteSheet so its frames can be placed correctly in IsoSprite.container. See the samples below.

Without & With offsets

package
{
	import as3isolib.display.IsoSprite;
	import as3isolib.display.IsoView;
	import as3isolib.display.scene.IsoGrid;
	import as3isolib.display.scene.IsoScene;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import iso.*;

	public class Demo extends Sprite
	{

		[Embed(source='f0.png')]
		public const SHEET:Class;

		public const SHEET_FRAME_WIDTH:Number = 48;
		public const SHEET_FRAME_HEIGHT:Number = 92;

		private var _view:IsoView;
		private var _ss:SpriteSheet;

		public function Demo():void
		{
			addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);

			createSpriteSheet();
			createIso();
			createUI();

		}

		private function createSpriteSheet():void
		{
			_ss = new SpriteSheet();
			_ss.build(new SHEET(), SHEET_FRAME_WIDTH, SHEET_FRAME_HEIGHT);
			//offset the sprite sheet
			_ss.x = -13;
			_ss.y = -65;

		}

		private function createIso():void
		{
			////////// GRID
			var grid:IsoGrid = new IsoGrid();
			grid.setGridSize(4, 4);
			grid.cellSize = 20;

			var gscene:IsoScene = new IsoScene();
			gscene.addChild(grid);

			////////// ISO SPRITE
			var isoSprite:IsoSprite = new IsoSprite();
			isoSprite.setSize(20, 20, 80);
			isoSprite.moveTo(-10, 0, 0);
			//attach the spritesheet to isosprite
			isoSprite.sprites = [_ss];

			var scene:IsoScene = new IsoScene();
			scene.addChild(isoSprite);

			////////// ISO VIEW
			_view = new IsoView();
			_view.y = 100;
			_view.setSize(stage.stageWidth, 200);
			_view.addScene(gscene);
			_view.addScene(scene);
			_view.addEventListener(Event.ENTER_FRAME, render);
			addChild(_view);

		}

		private function render(e:Event):void
		{
			_view.render(true);
		}

		private function changeDirection(e:Event):void
		{
			var s:Sprite = Sprite(e.target);
			_ss.setDirection(s.name);
		}

		private function changeState(e:Event):void
		{
			var s:Sprite = Sprite(e.target);

			if (s.name == "idle")
			{
				_ss.idle();
			}
			else if (s.name == "action")
			{
				_ss.action();
			}
		}

		private function createUI():void
		{
			addChild(createButton("action", 10, 10, changeState));
			addChild(createButton("idle", 80, 10, changeState));

			addChild(createButton(Directions.S, 10, 40, changeDirection, 0x400080));
			addChild(createButton(Directions.SW, 80, 40, changeDirection, 0x400080));
			addChild(createButton(Directions.W, 150, 40, changeDirection, 0x400080));
			addChild(createButton(Directions.NW, 230, 40, changeDirection, 0x400080));
			addChild(createButton(Directions.N, 10, 70, changeDirection, 0x400080));
			addChild(createButton(Directions.NE, 80, 70, changeDirection, 0x400080));
			addChild(createButton(Directions.E, 150, 70, changeDirection, 0x400080));
			addChild(createButton(Directions.SE, 230, 70, changeDirection, 0x400080));

		}

		private function createButton(labelText:String, x:Number, y:Number, clickListener:Function, bgColor:uint = 0, labelColor:uint = 0xFFFFFF, width:Number = 60):Sprite
		{

			var label:TextField = new TextField();
			label.textColor = labelColor;
			label.autoSize = TextFieldAutoSize.LEFT;
			label.text = labelText;

			var s:Sprite = new Sprite();
			s.addChild(label);
			s.name = labelText;

			with (s)
			{
				graphics.beginFill(bgColor);
				graphics.drawRect(0, 0, 60, 20);
				graphics.endFill();
			}
			s.x = x;
			s.y = y;
			s.mouseChildren = false;
			s.addEventListener(MouseEvent.CLICK, clickListener);
			return s;
		}
	}

}

Here’s the zip containing all of those stuff above:
→ Spritesheet Demo

That’s it. Enjoy the class and let me know if you have problems.

So you have done a flash website for your client. You put all the necessary files on your server for demoing your hard work to them. They like it very much and think that you’re the best coder out there.

Now they want your help to set up a server for the website too because it is the first website they ever had and they don’t have a clue on how and where to host their shiny, brand new website. They are not really tech-savvy so telling them to google for web hosts won’t do any good for them. They might even get confused by thousands of web hosting sites Google gives them. Of course, you can go to authoritative forums like webhostingtalk.com to help them find a good host but it’s going to cost you some time. Oh and the client think that you can do this for free because you’re a rock star coder and you can do it in just a few minutes.

I had been in the same situation many times. The best places for me and my clients to look for solid webhosts and compare them easily are webhosting review sites. A review site that I just recently found is Web Hosting Search. This review site provides quick links to find hosts along with their ratings by the operating systems. So if your client wants Mac, you can just go to Mac Web Hosting or Windows Web Hosting if they want Windows.

Webhostingsearch is more than just a review site. It also contains lots of useful informations for people who don’t know anything about web hosting or the web in general. So your client will not only be able to choose a web host that fits their site’s requirements and their budget but they can also learn a few things about the web like how to set up a website, what web hosting is all about, etc. So whether it is a Mac Web Hosting or a Windows Web Hosting, they have it!

So, by directing your client to Webhostingsearch, you not only save your time and theirs but also help them to learn more about the web.

Good luck!

Some folks had asked about drag-and-drop mechanism in as3isolib discussion group. While there’s no such feature built-in in the library, it’s not hard to write it yourself.

So here’s a super simple class that provides that mechanism, called DragManager. I borrowed the idea from Flex’s DragManager. Note that this class is really a simple one and it doesn’t respect “grid” so you’ll have to modify it if you want to use it in a grid-based isometric space. Trust me, it’s not too hard

Click to see the demo

And here’s the class:

package masputih.isometric.utils
{
	import as3isolib.core.IsoDisplayObject;
	import as3isolib.display.IsoView;
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;

	/**
	 * ...
	 * @author Anggie Bratadinata
	 */
	public class DragManager
	{

		private var _proxy:Sprite;
		private var _view:IsoView;
		private var _obj:IsoDisplayObject;

		public function drag(obj:IsoDisplayObject, view:IsoView):void
		{

			_view = view;
			_obj = obj;

			var bmp:Bitmap = new Bitmap(_obj.getRenderData().bitmapData)
			bmp.x = -_obj.length;
			bmp.y = -_obj.height;

			_proxy = new Sprite();
			_proxy.alpha = .5;
			_proxy.addChild(bmp);
			_proxy.addEventListener(Event.ENTER_FRAME, onProxyEnterFrame);
			_view.addChild(_proxy);

			_view.stage.addEventListener(MouseEvent.MOUSE_UP, drop);
		}

		private function onProxyEnterFrame(e:Event):void
		{
			if (_proxy != null)
			{
				_proxy.x = _view.mouseX;
				_proxy.y = _view.mouseY;
			}

		}

		private function drop(e:Event = null):void
		{
			var p:Point = new Point(_proxy.x, _proxy.y);
			p = _view.localToIso(p);

			_obj.moveTo(p.x, p.y, 0);

			//clean up
			_view.removeChild(_proxy);
			_view.stage.removeEventListener(MouseEvent.MOUSE_UP, drop);
			_proxy.removeEventListener(Event.ENTER_FRAME, onProxyEnterFrame);
			_proxy = null

		}

		public function get obj():IsoDisplayObject { return _obj; }

		/**********************************************
		 * SINGLETON CTOR
		 **********************************************/

		private static var _instance:DragManager;
		public function DragManager(enf:SingletonEnforcer)
		{

		}
		public static function getInstance():DragManager{
			if(_instance == null) _instance = new DragManager(new SingletonEnforcer());
			return _instance;
		}

	}

}

class SingletonEnforcer{};

Sample Usage

package
{

	import as3isolib.core.IsoDisplayObject;
	import as3isolib.display.IsoView;
	import as3isolib.display.primitive.IsoBox;
	import as3isolib.display.primitive.IsoRectangle;
	import as3isolib.display.scene.IsoGrid;
	import as3isolib.display.scene.IsoScene;
	import as3isolib.graphics.SolidColorFill;
	import eDpLib.events.ProxyEvent;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import masputih.isometric.utils.DragManager;

	/**
	 * Main class
	 * @author
	 */
	public class DDTest extends Sprite
	{

		public var view:IsoView;
		public var scene:IsoScene;
		public var grid:IsoGrid;

		public function DDTest()
		{
			addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
		}

		private function onAddedToStage(e:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);

			view = new IsoView();
			view.setSize(600, 400);
			view.showBorder = true;

			addChild(view);

			scene = new IsoScene();
			view.addScene(scene);

			grid = new IsoGrid();
			grid.cellSize = 400;
			grid.setGridSize(1, 1);

			scene.addChild(grid);

			view.pan(0, 200);

			var obj1:IsoBox = new IsoBox();
			obj1.setSize(20, 20, 20);
			obj1.moveTo(100, 100, 0);
			obj1.fill = new SolidColorFill(0xFFFF80, 1);
			obj1.container.mouseChildren = false;
			obj1.addEventListener(MouseEvent.MOUSE_DOWN, onIsoObjMouseDown);

			var obj2:IsoRectangle = new IsoRectangle();
			obj2.setSize(20, 20,0);
			obj2.moveTo(200, 100, 0);
			obj2.fill = new SolidColorFill(0x0080FF, 1);
			obj2.container.mouseChildren = false;
			obj2.addEventListener(MouseEvent.MOUSE_DOWN, onIsoObjMouseDown);

			var obj3:IsoBox = new IsoBox();
			obj3.setSize(20, 40,30);
			obj3.moveTo(200, 200, 0);
			obj3.fill = new SolidColorFill(0x800040, 1);
			obj3.container.mouseChildren = false;
			obj3.addEventListener(MouseEvent.MOUSE_DOWN, onIsoObjMouseDown);

			scene.addChild(obj1);
			scene.addChild(obj2);
			scene.addChild(obj3);

			stage.addEventListener(Event.ENTER_FRAME, render);
		}

		private function onIsoObjMouseDown(e:ProxyEvent):void
		{
			DragManager.getInstance().drag(IsoDisplayObject(e.target), view);
		}

		private function render(e:Event):void
		{
			view.render(true);
		}

	}

}

Hope you like it!