There has been a lot of people who played with Away3D and built awesome things. A lot of said awesome things were built by people who know, or know someone that knows 3D modeling, which is why the quality has been so awesome. However, it may not always be necessary to build a full 3D world, sometimes a project may simply require some 3D elements over a 2D background. But how do you place an image behind all sorts of 3D objects if Away3D's View3D has a black background? I will try and explain the process in this article. Warning: matrices and trigonometry ahead!

Build it and they will come

Usually, if you want to place an image and make it fit your document dimensions, you simply stretch the image accordingly. In 3D however, it is not as simple, as the world dimensions are not necessarily measured in pixels. While working with the guys from Float4, I came to understand that meters are oftentimes used as measurement unit. With that in mind, we cannot directly use the dimensions of our document.

So let's say we want to place an image in the 3D world and make it fill the viewport (the visual space taken by Away3D). At first, we would need an image, and a plane onto which we would like to place the image. As I wrote previously, materials applied onto shapes need to be in dimensions that are a power of 2, so will will need to rescale our image. A Matrix will fulfill this need.

private const WIDTH:uint = 640;
private const HEIGHT:uint = 640;
private const MATERIAL_WIDTH:uint = 1024;
private const MATERIAL_HEIGHT:uint = 1024;
 
[Embed(source="assets/images/escher-relativity.png")]
private const EscherImageClass:Class;
 
private var _imageData:BitmapData;
private var _matrix:Matrix;
private var _material:BitmapMaterial;
private var _plane:Plane;
private var _view3D:View3D;

WIDTH and HEIGHT represent the dimensions of my document, and also the dimensions of the image. The MATERIAL_WIDTH and MATERIAL_HEIGHT represent the dimensions needed for the material, dimensions that are a power of two. Here I will be using an image from Escher, obtained from Wikipedia. There is no need for a Bitmap per se, but we will need the image's BitmapData, hence the _imageData variable.

Let's do this!

Normally, I resize the material dimensions to a value higher than what I need to display; first the material is stretched up, and then visually fitted to the original dimensions of the image. If we were to scale the material to smaller dimensions than that of the image, the plane would stretch up the material afterwards when displaying the image, resulting in possible loss of smoothness or detail.

_matrix = new Matrix();
_matrix.scale(MATERIAL_WIDTH / WIDTH, MATERIAL_HEIGHT / HEIGHT);

Let's draw an instance of the Escher image into the_imageData. This is where _matrix comes in handy. I wonder what pushed Adobe's engineers to make an architectural choice where they thought users would use a ColorTransform, a BlendMode or a clipping Rectangle more often than a flag to smooth the drawing. I mean, putting the flag as a last argument? Anywho, let's add a lot of null parameters...

_imageData = new BitmapData(MATERIAL_WIDTH, MATERIAL_HEIGHT);
_imageData.draw(new EscherImageClass(), _matrix, null, null, null, true);

Next, create the material. As seen previously, let's use a simple trick to assign whether or not the material is mipmapped.

_material = new BitmapMaterial(_imageData, true);
_material.mipmap = (_imageData.width == _imageData.height);

Apply the material to the plane, add the plane to the View3D, and then add the view to the display list.

_plane = new Plane(_material);
_view3D = new View3D();
_view3D.scene.addChild(_plane);
addChild(_view3D);

Do not forget to listen to Event.ENTER_FRAME and call the View3D.render() method at every update.

addEventListener(Event.ENTER_FRAME, updateHandler);

Run it, and what do we get?...

Nothing.

Uh?

By default, the plane is added at (0, 0, 0), so it should be visible...

It is, it turns out that an API choice—which may make sense in a 3D world, but that I do not understand—puts the plane with its face up on instantiation. What this means is when it is created, we see its side, which has no thickness. Just change the yUp parameter to false, so the new plane will then face the camera upon creation.

_plane.yUp = false;

We should get something like this.

If we compare the image and this result, we notice that the image's edges are cropped, which means the plane is too close. Below is a diagram explaining this visually.

Imagine a pyramid drawn from the camera at its top with an angle that is the camera's field of view, up until a certain point. From the camera's point of view, there is always a certain frame that is visible, that is the viewport. However, that pyramid is not infinite, actually what the camera sees is not even a pyramid. The viewing frustum, what is visible within a 3D world, is an area from a certain threshold (the near plane) to another one (the far plane), that's what is visible within a 3D world. What happens with the code above is that the plane is bigger than the frustum, thus being cut.

Below is what we want to achieve:

SOH-CAH-TOA

This is where the fun begins! How do we fit our plane into our viewport? It is possible to simply move the plane on the z axis and eventually position the plane properly to fit our need. But what if the dimensions change? We'd be back onto square one. This problem requires good ol' trigonometry, and the pythagorean theorem.

You may wonder what this title means. It's a mnemonic trick that's been given to me back in high school on how to remember the rules of trigonometry:

Sine of an angle = Opposite side / Hypothenuse

Cosine of an angle = Adjacent side / Hypothenuse

Tangent of an angle = Opposite side / Adjacent side

Then let's consider this as a trigonometry problem, illustrated below. We have a camera, the Camera3D, which is located at (0, 0, -500) by default. Look at the sources to confirm, it is the case with Away3D, but it may be different in other 3D engines. We have a plane with a position yet undefined, but we do want to make sure that its fits perfectly into the viewport.

Where does that 60° angle in the illustration above come from? If we take a look at the Camera3D constructor, we find that it uses a PerspectiveLens by default. In that lens constructor, we can see the default field of view is 60, which is in degrees. It's too bad we need to look at the source to obtain this, it would have been simpler to use a getter to be able to check it, but there is none.

Good, we have an angle, we can calculate dimensions and positions. Let's set an arbitrary z for the plane, we'll see further that it doesn't matter.

var angleY:Number = 60;
var cameraZ:int = _view3D.camera.z;
var planeZ:int = 500;
var distFromCamToPlane:Number = Math.abs(cameraZ) + planeZ;

Since the field of view is vertical, let's measure the height of our plane first. Let's not forget that the field of view covers the whole height, but in order to work with rectangle triangles, we will use only half of that angle. We know the angle, we know the distance from the camera to the plane (the adjacent side), but we do not know the opposite side, so let's use the tangent. The Math.tan() takes radians, so just make sure to convert those degrees to radians.

var planeHeight:int = Math.tan((Math.PI / 180) * (angleY * 0.5)) * distFromCamToPlane;

Since this represents only half of the height, let's correct it for what we need further.

planeHeight *= 2;

To obtain the width of our plane, simply apply the aspect ratio of the image. In this case the image is a square, but it may very well be any kind of rectangle.

var aspectRatio:Number = WIDTH / HEIGHT;
var planeWidth:int = planeHeight * aspectRatio;

And now we are ready to create our plane with the proper dimensions and position.

_plane = new Plane(_material, planeWidth, planeHeight);
_plane.yUp = false;
_plane.z = planeZ;

Let's take a look at the whole process at once.

// get the scale to apply to the image
_matrix = new Matrix();
_matrix.scale(MATERIAL_WIDTH / WIDTH, MATERIAL_HEIGHT / HEIGHT);
 
// create the image data
_imageData = new BitmapData(MATERIAL_WIDTH, MATERIAL_HEIGHT);
_imageData.draw(new EscherImageClass(), _matrix, null, null, null, true);
 
// create the material
_material = new BitmapMaterial(_imageData, true);
_material.mipmap = (_imageData.width == _imageData.height);
 
// create the view
_view3D = new View3D();
 
// camera values
// see away3d.camerasCamera3D's default lens' field of view
// in away3d.cameras.lenses.PerspectiveLens
// it turns out that the field of view is vertical
var angleY:Number = 60;
var cameraZ:int = _view3D.camera.z;
 
// this position is arbitrary as we will see further
// useful to calculate the distance between the camera and the plane
var planeZ:int = 500;
var distFromCamToPlane:Number = Math.abs(cameraZ) + planeZ;
 
// since the field of view is a vertical angle, calculate the height of the plane first
// use pythagorean theorem to calculate
// tip for trigonometry: soh-cah-toa
// toa: tan(angle) = oppositeSide / adjacentSide
var planeHeight:int = Math.tan((Math.PI / 180) * (angleY * 0.5)) * distFromCamToPlane;
 
// and since it was for a rectangle triangle, thus half the size, double the length
planeHeight *= 2;
 
// useful for resizing the image
var aspectRatio:Number = WIDTH / HEIGHT;
 
// use the aspect ratio to calulcate the width of the plane
var planeWidth:int = planeHeight * aspectRatio;
 
// create the plane
_plane = new Plane(_material, planeWidth, planeHeight);
_plane.yUp = false;
_plane.z = planeZ;
 
// add 3D objects to the scene
_view3D.scene.addChild(_plane);
 
// add the away3d view to the display list
addChild(_view3D);
 
// listen to the updates
addEventListener(Event.ENTER_FRAME, updateHandler);

This should produce a result like this, where the image fits perfectly in the viewport.

For additional fun, I added an option to click to rotate it, so that it demonstrates that it is indeed 3D.

Sources

As I always do in my tutorials, you can download the sources. This project has been built for Flash Player 11+ with FDT. You may need to adapt the Flex SDK.

Enjoy!

I've been meaning to write about this for a while. Even though it is not specifically about development, user experience is something that creative developers should take into account when developing websites, games or other interactive experiences. Let's look at a couple of different ways of offering the user localized content, and try to analyze whether these options fall flat on their face or offer enough flexibility to answer your client's and their customers's needs.

Clients that offer services in multiple countries require their content to be localized, and for a good reason: inhabitants of all regions of the world want to be respected and obtain content in their own language. And I agree, it's a simple matter of respect.

The usual suspects

The way localization is most often achieved is by detecting the user's country automatically. This can either be done by localizing the IP address (see an example), soon by simpler means with HTML5's geolocation (see an example) or by asking the user to select a country.

LaCie does just that.

I think that this last option is lazy, both on the company's and on the developer's part. The user should not have to make such choices, especially when there are ways to make such a selection invisible.

What happens from there is that the website content is presented in the language relative to the country. It mostly works, but there are some situations where this logic is not sufficient. Let's take the example of some European countries, like Belgium and Greece. In Belgium, French, Dutch (Flemish) and German are the official languages. In Greece, where obviously Greek is the language, there is also need for a specific alphabet.

From adidas's country selection page, if either Greece or Belgium is chosen, the user has no choice but to visit an English website.

To adidas's credit, there is the option to change country at any time, the site even offers you a choice whether or not you want the cookie to remember your country selection.

Some websites, such a Nike's may offer a simpler solution, only choose your language, not the country.

All these options ask an action from the user before they can even see your products or services, and that small irritant is the first interaction they have with your website.

The mistaken

In all online stores (let's not call these e-commerce no more, please?), there comes a moment where you want to write your shipping address to obtain your purchases. If you have offered your clients a multilingual website, it's just normal that the input fields should support special characters too, regardless of the language the client chose.

When I moved back from Amsterdam to Montréal, I had to change many addresses for many of my services, both physical and online.

Apple requires me to have a valid credit card in the country that I select, as their products availabilities are based on the locale. However, their form failed when I entered my address.

I get informed that the city, that I wrote "Montréal", contains illegal characters. Obviously, this turned out to be that I should not use the accent. This is ridiculous, the user should not be told there is something wrong when in fact there is not. How complicated is it really to handle accented characters? I mean, if you want to provide multilingual services, get your act together and do it everywhere.

The ignorant

There is also the peculiar case of Urban Outfitters. The american company has oftentimes been vilified for stealing designs from indie designers or for shamelessly using native names in their product names, so what I will present here should not come as a surprise.

In Québec, a law states that if a business has a brick and mortar store in the province, the business is responsible to also have a French side to it's website. As mentioned in my introduction, it's a matter of respect to your clients in the locale in which you offer your products and services.

Urban Outfitters did not, and when legally instructed to do so, they decided to simply not offer their clients in Québec with no access to their website whatsoever. Just go to the store.

That is one stupid way to use geolocation! You disrespect a locale and it's language, and at the same time you prevent those in the locale who can speak and read English from having access to your products. Great way to prevent sales!

The road ahead

Of these different approaches I make the following conclusion and add a recommendation for multilingual website and software creators: first, indeed do geolocation to offer the most relevant content to the user. Do give options to change not only the country, but also the language. Paypal is the closest to this idea. If you change your location to Canada, you can then change the language to the available languages is that country, namely French and English.

But here is where I want to get to with this post: why stop there? Indeed, do present the most logical languages relevant to that area, but do not block the other languages from being available, especially since you have them in the database already. I understand that it may be mostly be relevant for expats and travelers, but I strongly believe that this kind of market is growing.

The iTunes Store is built in order to lock you into a language depending on your country. Websites like YesAsia are built with the idea that the content should be available to everyone, even if the clients are not from Hong Kong, Japan or Korea, where their offices are. They offer not only options for locales and languages, but a reference to the value of the currency so the customers may have a general idea of what they will pay.

In the case of Paypal, as I said before languages are chosen by country. They have many more languages, they should offer them. I can understand that there may be issues in doing so. For example, English is not legally bounding in the Netherlands, so important options are not available, not even deleting an account. How about presenting all languages, and just like YesAsia does it, add a note that explains that whatever is said in translations, the version in the official language(s) of the locale prevail?

Ultimately, it's always about how much you really care about your clients. For example, Asian countries dislike it when they are presented with English text rather than localized. Ask your markets to help you make a better localized version of your products, don't just expect your clients to swallow whatever you feed them. This is the kind of stuff metrics will not really show in numbers, this is an analysis you can make from talking with your markets.

Now that your environment is set up to play with Away3D, let's create something! In my previous post, I concluded that you can now experiment, and so I did too. It turned out that there are some little intricacies about putting a simple image on a simple cube. Let's take a look.

Create a cube

This part has got to be the simplest, thanks to the nice API that the guys from Away3D built.

ActionScript 3.0:

package
{
import away3d.containers.View3D;
import away3d.materials.ColorMaterial;
import away3d.primitives.Cube;
 
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
 
[SWF(frameRate="60", backgroundColor="#ffffff", width="640", height="360")]
public class Main extends Sprite
{
	// + ----------------------------------------
	//		[ VARS ]
	// + ----------------------------------------
 
	private	var	_view3D		:View3D;
	private	var	_cube		:Cube;
 
	// + ----------------------------------------
	//		[ CONSTRUCTOR ]
	// + ----------------------------------------
 
	public function Main()
	{
		super();
		initStage();
		addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
	}
 
	// + ----------------------------------------
	//		[ PRIVATE METHODS ]
	// + ----------------------------------------
 
	private function initStage():void
	{
		stage.align = StageAlign.TOP_LEFT;
		stage.scaleMode = StageScaleMode.NO_SCALE;
	}
 
	private function init():void
	{
		// it is necessary to add a texture to the shape so it is visible
		var material:ColorMaterial = new ColorMaterial(0xffffff);
 
		// I personally prefer to set vars for repetitive values
		var cubeSize:uint = 240;
		_cube = new Cube(material, cubeSize, cubeSize, cubeSize);
 
		// add the 3D elements to the stage
		_view3D = new View3D();
		_view3D.scene.addChild(_cube);
		addChild(_view3D);
 
		// add a listener so it becomes possible to render the 3D world
		addEventListener(Event.ENTER_FRAME, enterFrameHandler);
	}
 
	// + ----------------------------------------
	//		[ PRIVATE METHODS ]
	// + ----------------------------------------
 
	private function addedToStageHandler(event:Event):void
	{
		removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
		init();
	}
 
	private function enterFrameHandler(event:Event):void
	{
		// render the 3D world
		_view3D.render();
	}
}
 
}

With this code, this is what you should get as a result:

Not exactly exciting. For one, a ColorMaterial is really a flat color, so the best way to make it live a bit is adding light elements, which we will not see in this post (and that's also because I have not learned that yet). Also, we only see once face of the cube, quite boring.

To at least view that this object is in 3D, simply update the enterFrameHandler function.

ActionScript 3.0:

private function enterFrameHandler(event:Event):void
{
	// increment the cube's rotation values to see its different sides
	_cube.rotationX++;
	_cube.rotationY++;
	_cube.rotationZ++;
 
	// render the 3D world
	_view3D.render();
}

Apply an image texture

Most probably, you would like to add your own textures to your 3D elements. This is where it gets fun!

As suggested by a lot of users on the Away3D forums, it may be better to have a 3D artist create objects in Blender or 3ds Max (I do not know if Unity3D can be used, although I hope it can). Once those objects are created, there is a way to import/load them into Away3D.

But in this case, since I do not know 3D software and because there is no need yet to get into complicated texture mapping, we are looking at something super simple: put an image on a cube. Most of what follows is a comprehensive summary of a thread that followed my question on Away3D's forum.

First things first: let's create an image. There are specifications to follow when creating an image for a BitmapMaterial.

A texture does not need to be square, however the dimensions have to be a power of two. What this means, is a texture can be 512 x 512 pixels, or 256 x 1024 pixels, etc. I worked with 2048 x 1024 pixels in this case.

Keep in mind that if you image is not square, it will not mipmap. Not fully convinced I understand what it means, as I do now know 3D vocabulary that much, but suffice to say you simply need to set BitmapMaterial.mipmap to false to make it work.

In the case of a cube, you need to cover all six sides. In order to do so, split your image into a 3 x 2 grid, like so:

Do you notice that each part of the image that represents a side of the cube is not square? It does not matter really, since Away3D will map it as a square onto the cube. As long as you respect the grid in your design, it will be good.

Rather than loading the image and in order to make things quicker, I simply embedded it in the code.

ActionScript 3.0:

package
{
import away3d.containers.View3D;
import away3d.materials.BitmapMaterial;
import away3d.primitives.Cube;
 
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
 
[SWF(frameRate="60", backgroundColor="#ffffff", width="640", height="360")]
public class Main extends Sprite
{
	// + ----------------------------------------
	//		[ CONSTANTS ]
	// + ----------------------------------------
 
	[Embed(source="../assets/images/dice-texture-2048x1024.png")]
	private var ImageClass:Class;
 
	// + ----------------------------------------
	//		[ VARS ]
	// + ----------------------------------------
 
	private	var	_view3D		:View3D;
	private	var	_cube		:Cube;
 
	// + ----------------------------------------
	//		[ CONSTRUCTOR ]
	// + ----------------------------------------
 
	public function Main()
	{
		super();
		initStage();
		addEventListener(Event.ADDED_TO_STAGE, addedToStageHangler);
	}
 
	// + ----------------------------------------
	//		[ PRIVATE METHODS ]
	// + ----------------------------------------
 
	private function initStage():void
	{
		stage.align = StageAlign.TOP_LEFT;
		stage.scaleMode = StageScaleMode.NO_SCALE;
	}
 
	private function init():void
	{
		// create a Bitmap from the embedded image
		var image:Bitmap = new ImageClass() as Bitmap;
 
		// create the BitmapMaterial
		var material:BitmapMaterial = new BitmapMaterial(image.bitmapData);
		material.smooth = true;
		// little trick: you do not need to care if the image is square,
		// simply evaluate if the sides are even
		material.mipmap = (image.width == image.height);
 
		// create the cube
		var cubeSize:uint = 240;
		_cube = new Cube(material, cubeSize, cubeSize, cubeSize);
 
		// add the 3D elements to the stage
		_view3D = new View3D();
		_view3D.scene.addChild(_cube);
		addChild(_view3D);
 
		// add a listener so it becomes possible to render the 3D world
		addEventListener(Event.ENTER_FRAME, enterFrameHandler);
	}
 
	// + ----------------------------------------
	//		[ PRIVATE METHODS ]
	// + ----------------------------------------
 
	private function addedToStageHandler(event:Event):void
	{
		removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
		init();
	}
 
	private function enterFrameHandler(event:Event):void
	{
		// increment the cube's rotation values to see its different sides
		_cube.rotationX++;
		_cube.rotationY++;
		_cube.rotationZ++;
 
		// render the 3D world
		_view3D.render();
	}
}
 
}

Fix the Away3D sources

Now, I ran into an issue when I originally tested this (Flash Player 11+ needed, click and drag to move the cube):

Some sides were repeated or not applied properly. That is actually what prompted me to ask my question on the forum, as I thought I had done everything proper.

I actually did, but here also, there was a correction needed in the Away3D sources. Away3d forum member 80prozent posted a fix.

Look at the function Cube.buildUVs() into the away3d.primitives.Cube class and replace this part:

ActionScript 3.0:

for(i = 0; i <= _segmentsW; i++)
{
	outer_uv = u_tile_step + u_tile_dim * (i / _segmentsW);
 
	for(j = 0; j <= _segmentsD; j++)
	{
		uvData[uidx++] = outer_uv;
		uvData[uidx++] = 1 - v_tile_dim * (j / _segmentsD);
		uvData[uidx++] = outer_uv;
		uvData[uidx++] = v_tile_step + v_tile_dim * (j / _segmentsD);
	}
}
 
for(i = 0; i <= _segmentsH; i++)
{
	outer_uv = v_tile_step + v_tile_dim * (i / _segmentsW);
 
	for(j = 0; j <= _segmentsD; j++)
	{
		uvData[uidx++] = (u_tile_dim * ((_segmentsD - j) / _segmentsD));
		uvData[uidx++] = 1 - outer_uv;
		uvData[uidx++] = 1 - (u_tile_dim * ((_segmentsD - j) / _segmentsD));
		uvData[uidx++] = v_tile_step + v_tile_dim * ((_segmentsW - i) / _segmentsW);
	}
}
 
target.updateUVData(uvData);

with this part:

ActionScript 3.0:

for(i = 0; i <= _segmentsW; i++)
{
	outer_uv = u_tile_step + u_tile_dim * (i / _segmentsW);
 
	for(j = 0; j <= _segmentsD; j++)
	{
		uvData[uidx++] = outer_uv;
		uvData[uidx++] = 1 - v_tile_dim * (j / _segmentsD);
		uvData[uidx++] = 1 - outer_uv;
		uvData[uidx++] = 1 - (v_tile_step + v_tile_dim * (j / _segmentsD));
	}
}
 
for(i = 0; i <= _segmentsH; i++)
{
	outer_uv = v_tile_step + v_tile_dim * (i / _segmentsW);
 
	for(j = 0; j <= _segmentsD; j++)
	{
		uvData[uidx++] = (u_tile_dim * ((_segmentsD - j) / _segmentsD));
		uvData[uidx++] = 1 - outer_uv;
		uvData[uidx++] = 1 - (u_tile_dim * ((_segmentsD - j) / _segmentsD));
		uvData[uidx++] = v_tile_step + v_tile_dim * ((_segmentsW - i) / _segmentsW);
	}
}
 
target.updateUVData(uvData);

His fix corrects the way the image is applied to the cube. I guess this will be eventually fixed, but at the time of writing this post, the sources provided by Away3D still need that correction.

And there you go! From then you can have an awesomely decorated cube with the texture of your choice!

Recently I had been approached to develop an interface for a huge interactive wall. The company has its own engine, but the interface runs as a Flash Player piece within that environment. I am not talking about Scaleform, which allows game developers to integrate interfaces built in AS3 into their projects, but the logic is pretty much the same.

So the idea was to use some simple 3D shapes and let users interact with it via a touch screen. The project did not go through, however I had done some research on the latest Flash Player beta developments and the latest alpha release of Away3D. As expected, I had to do a lot of searches in Google, I cursed at my computer once or twice, but I did learn a lot. I think it would be nice to share my discoveries.

Setting up FDT to publish onto Flash Player 11 Beta

I have to say a lot of people wrote blog posts already on how to do that. Although their posts explained more on how to use the incubator version of Flash Player, it's pretty easy to do a parallel. I'll just list the steps here and provide the sources to my information further down.

1. Get the latest available Flash Player debugger, Flex SDK and playerglobal.swc (by the way, since the IDE is now called Flash Builder, why is the SDK still called "Flex SDK " rather than "Flash SDK"?)
2. Uninstall whatever version of the player you have on your computer and install the latest one you have downloaded
3. Replace the playerglobal.swc in the SDK with the separate playerglobal.swc you have downloaded
4. Set up the SDK in FDT
5. When creating a new project, make sure to add the -swfversion=13 compile argument (I hope this will be dropped when the release is no longer in beta)
6. In your HTML page, do not forget to set wmode="direct" so the rendering can be done on the GPU

Now these steps are really well explained here, although since the release of the beta version (rather than the incubator version), it is no longer necessary to remove the flex.swc.

Now, all this is a bit of work to get running, and just recently, FDT released a template that sets up a lot of that stuff already. This template includes the compiler argument and an HTML template that presets the wmode, it even includes the M2D library, which is supposed to help creating 2D elements with the Stage3D API to enjoy the benefits of GPU rendering. Thanks guys! I guess now I want to look into creating templates.

Setting up Away3D

I have been reading good comments here and there about Away3D, and the running examples I have seen were quite convincing, so I decided to look into it. Getting started is quite simple.

1. Download the Away3D 4.0 alpha release
2. Add the provided source files to your classpath
3. Add the provided Apparat LZMA decoder library as well

Logically, this should be it and you should be able to go, but nooo! Have you ever seen a development project work properly on the first try? Especially not a project that uses both an alpha release and a beta release! After a bit of research, I found an article on DisturbMedia's wiki that basically explained the situation:

Most errors come from AGALMiniAssembler.as. I'm not sure why, but I found that if I split the multiple classes nested in the single file into multiple files that fixes most of the errors. At the end of the process you should have 3 additional classes: Sampler, Register and OpCode.

Once the split classes are added, some errors remain in the Away3D sources, however it is possible to compile an empty project at this point.

Next, you would expect to be able to use some Away3D classes already, so did I. The base requirement is to add a View3D, which contains a container that can be used as some sort of stage. Let's try:

ActionScript 3.0:

package
{
import away3d.containers.View3D;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
 
public class Main extends Sprite
{
	private	var	_view3D	:View3D;
 
public function Main()
{
	// set the stage
	stage.align = StageAlign.TOP_LEFT;
	stage.scaleMode = StageScaleMode.NO_SCALE;
 
	// create the View3D
	_view3D = new View3D();
	addChild(_view3D);
 
	//
	addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}
 
private function enterFrameHandler(event:Event):void
{
	// render the View3D at every frame (or other update of your choice)
	_view3D.render();
}
 
}
 
}

Try and run that with the explanations I have given so far, you'll most probably run into the same situation I did: an error. Why? I mean, nothing seems wrong.

Here again, it took me a bit of research, but it turns out that a class needed a correction to handle a change made by the beta release of Flash Player. As I understand, this library was mostly written while the player was still an incubator release. Simply get that updated Stage3DProxy class with the one provided in the forum thread, and you're good to go.

From this point on, you can head to minute 2:30 of John Lindquist's tutorial to see how to add an awesome cube to your project, or look into the Away3D examples. Enjoy!

So here it is, the personal project I mentioned a while back: the ToDo List. Doing personal projects, without the constraints of client requests and deadlines is loads of fun, but also not always efficient. Let's have a look at the lessons I learned during this project.

What is the ToDo List?

The idea for this Facebook application came from a discussion with art director Max Chanan. We were thinking that there are always people in your Facebook friends that are not exactly your friends, but more acquaintances. However, it may also happen that you added said acquaintances to your Facebook contacts solely in the hopes of getting with them. Let's face it, either we ourselves have spied upon friends of friends that we think are hot, or we know someone who has.

And then I built the ToDo List, which allows you to select friends that you would like to do–pun totally intended.

The application, which currently resides on a Facebook app page, allows users to select up to four of their friends. That list stays secret, it is not shared with anyone else.

Secrecy is of the utmost importance in this project. How creeped out would a girl be if suddenly she received notifications that some five boys put her on a list of girls they would like to do? I can bet that she would be very upset.

But then, how does it work?

Well, let's say:

• Boy A selects girls A, B and C
• Girl A does not use the ToDo List
• Girl B uses the app, but has not selected boy A
• Girl C uses the app and has selected boy A

In the case of girl A, nothing will happen. In the case of girl B, nothing will happen either, because she did not select boy A. As we can see however, boy A and girl C mutually chose each other, this is where the magic happens.

On every Thursday of the week, a check is made to see who has selected who. If a match is made, then both users received an email notification informing them that they have been chosen by one of their choices.

Why Thursday and not instantly? Well, first of all, I like to think of this app almost like a poker game. You bet that these people you have selected may have selected you back. This list is like your hand. If at the deadline, on Thursday, your hand is not a winning one, you can change your selection for next round, on the followig Thursday.

When I was discussing with Martin Gauthier about this app, he thought of something brilliant: In this world where everyone wants instant gratification, it's nice to have a bit of wait and anticipation before you see if you win or lose.

Choosing a technology

Having built a couple of projects in Flash, I thought at first that I would build this one in Flash too. When I was working on the Swarovski's Reflect Yourself Facebook app, I learned a bit on how to communicate with the Facebook API in AS3. But as usual, Facebook changed their API and did not document it clearly. I was tangled in too many different versions of both the Facebook AS3 API, Flash was not right for this project.

Basically, what one needs to communicate with Facebook is an authorization from the user to sift through a certain amount of information. Once the user has authorized your apps with a certain amount of rights, there is a token that is created, and this token has to be provided in the calls to the Facebook API.

Facebook has a PHP API, so I started looking into this. I tried and failed at doing simple calls, like retrieving friends, but I did manage to get the token.

By then, Facebook had developed the Graph API, making things a lot, wait, A LOT simpler. A call to the Graph API is basically just a URL that returns a JSON object.

From then, I thought of a simple workflow:

1. Get the user to authorize the app
2. Use the Facebook PHP library to get a session and a token
3. Make all other calls to the Facebook API using jQuery to get the data

The project then became fun to do! A healthy mix of contemporary web techs, no plugin necessary. It's pretty nice, especially since I needed scrollbars and buttons, so they can then use the native browser interface and feel like they fit in Facebook.

It also means this works on mobile, although that is just a happy accident. The project is not optimized one bit for mobile. More on that later.

Discoveries

So obviously, I did some technical discoveries, but also some strategy- and PR-related discoveries. It may seem obvious to a lot of us (I even have spoken to that effect previously), but word of mouth is not easy! It's almost impossible to make your project grow when you count only on the social networks like Facebook and Twitter. Without publicity, people don't go to your website.

Now, it would be unfair to say that I had no publicity whatsoever. Let's not get confused, it is a personal project, through and through, but I built it as I was still working at Sid Lee. As such, Jean-François Bouchard, president of the agency, offered me to talk about the project on the platforms to which he has access if I simply branded it as a "Sid Lee Collective" project. Sid Lee sometimes encourage their employees to work on personal projects. They may support it financially or by other means if they find said project interesting. In my case, I did not need any financial support, but I gladly accepted the simple branding since it allowed me some visibility.

So such a public support indeed provided me with a lot of visitors onto the project, which is awesome. From then on though, I should have found a way to continually bring new visitors, but I did not, and this is what the analytics show.

Something surprised me: even with all those visitors, not a lot of people dared to use the app. Is it because they do not trust a Facebook app? Is it because the subject matter is too racy? I'm not sure I will know. I did end up in an interesting debate with Christelle Samson about how legitimate is this app for people who are in a relationship. My take stays that if people want to cheat on their "loved" one, tools are not to blame.

Another user asked me a good question: will the app post anything on his profile? As said earlier, secrecy is of the utmost importance with this app. However, when one starts to use a Facebook app, a post is necessarily placed on the user's wall saying that he started using that app. Last I checked, it was not something that the developer could set to not happen.

Overall, the app has relatively the same amount of users (some 300) and matches (some 30 matches every week) since the start. This leads me to believe that people are not really adventurous, most of them probably selected their girlfriends or boyfriend, and did not change their list since.

Future iterations

Even though there is no imperative to do so, I want to move the app out of its Facebook placeholder and onto its own domain, which I already own anyways. I think that design wise and user experience wise, this will be better. The functionalities will stay the same, but it will feel less as a page living under Facebook and more like a real web app.

However, moving the app onto the domain is not the most interesting project I have. I have recently started following Objective-C tutorials, and I think that this app could be quite interesting, if not more appealing, if there was an iOS app for it. So I started mocking up the information architecture. You can expect me to eventually post more info about this.

Conclusion

After three months, I see that this project needs more support if I want to make it live. The iOS app and the website are a good step in that direction I believe. It would be awesome if I could eventually sell this to some online dating company. For now, I still take this project as a lab to learn more techs.

Thanks to Antti Kupila, I have been given a copy of Emanuele Feronato's book Flash Game Development by Example to read and critique. Emanuele has been blogging about Flash gaming for years, and since I am looking to get into gaming, I was eager to read the book.

So far I have made it only through the first three chapters. I did a preliminary critique of the book on the Amazon product page:

Emanuele Feronato has been blogging ([...]) good tips on Flash gaming and PHP development for a while now. When I learned he had written a book on how to get into game development, I had to try it.

In line with his blog, Feronato's writing is clear and concise, no fluff is added. A good thing is that he assumes the reader has already some knowledge of Flash and AS3. This book does present some basic information if you know nothing of Flash, but the intent of this book is to teach you how to do games, not how to program. This is really a good thing, for there are way too many books that think that all readers have never touched programming of their life.

Feronato does a good job at increasing the difficulty of concepts during each chapter. His introduction to each challenge, by splitting the concept and the coding, guides the reader properly.

As a web developer, jumping into gaming is a good and honest challenge. Oftentimes a web dev tends to create complex systems for data and views. Feronato brings back the joy of programming with simple and logic code structures.

I did get put off by the fact that his instructions make use of the Flash IDE, rather than Flash Builder, FDT or FlashDevelop. In a professional environment, it's quite inefficient to code in the Flash IDE, but I believe it would have taken too many explanations to put in a book about games. All in all, it is quite easy to transpose the instructions into code-only IDEs.

I would also have like some more game-oriented optimization tips (like using multiplications rather than divisions, since it is quicker), for gaming is all about being code-efficient. That said, it is a good buy for those who are serious about getting into Flash gaming.

I have read the other critiques of the book on Amazon and also other critiques from real game devs like Iain Lobb and Rasmus Wriedt Larsen and it got me thinking.

Critiquing the critique

My grandad used to say: "Only a fool does not change his mind." Whereas I do not think as harshly about the book, I do want to delve deeper into my critique to either correct what I said, or even add to it.

Lobb mentions the coding style of Feronato, which I also noted looks a lot like PHP's style:

We all write weird looking code sometimes, but I think a book needs to set a better example.

I must say that it did not deter me really too much, since I am used to pick up other people's work and fix it. However, now that I think of it, a book must set an example of good coding practices. I have to agree with Lobb on his critique.

Another practice that really should have been present in Feronato's code is tips that make code execute faster.

Using var array:Array = [] may look dirty, but it is way quicker than creating arrays with the new Array() declaration. His examples do not use many arrays, but I do not see why good habits should not be put forward.

Another tip is to try and use multiplications rather than divisions. Again, the examples do not use calculations that are processor intensive, but it is the best moment to explain to new game developers tips that will help them when they have to handle complex systems in the future.

But those tips are something that I knew already and that could have been used in the first three chapters of the book. Let's see when I get further in the book how it goes.

Both Lobb and Larsen look onto Feronato's code as merely scripts, for it doesn't push OOP concepts. As Feronato's book is really built on iterating his code and moving it forward, as many oftentimes code in real life, it would have been nice for him to explain how to transform hid code into classes etc. The speed at which Feronato moves through concepts means the reader is expected to know how to code. And if so, the reader could also then be expected to know some OOP. Feronato could have used such a premise to then push the use of classes. Unknowingly, I worked exactly how Larsen describes what he sees in his book:

[...] if you know how to code AS3 with OOP and good coding practises, plus being able to extract general ways of doing something from very specific examples [...]

As I mentioned in my Amazon critique, I would have preferred it if the author would have not used the Flash IDE to code, since it's pretty backwards. As I was going through his examples, I actually used FDT to create a proper project structure, with assets, packages and different classes for specific tasks.

I did enjoy Feronato's scripting style to read, but I do now think the book he wrote should have promoted practices that would be useful in professional environments.

Lobb critiques Feronato's choices of games for being out of touch with current trends. He makes an interesting point:

I really think that a lot of game developers around my age group (e.g. 25 and older) are stuck in the past somewhat with their ideas of what constitutes a computer game.

I think that using a lot of pixel sprites in my prototypes casts me in that group. However I must disagree with Lobb here. I am not fan of Flip and Match games, Tetris or other classic puzzlers per se. As good a developer I am, I have never tackled a real game project. Starting from scratch with basic concepts and logics actually helps me learn things properly.

For example, in Minesweeper, the logic of how to use and create a flood fill function is explained. Since I come from a web development, where the UI is usually the most important concern, I would not know what to call such a concept. It is a definite win for me here.

Another example is the Connect Four winning explanations. Feronato explains how a win is made in concepts and how to translate that in code. I know pseudo code is not something new in development, but learning to do it for gaming is, to me and maybe to other non-gaming developers, something refreshing and useful.

Let's take a look at what I was able to create with what I have read so far.

Concentration, a flip and match game

This game is pretty straightforward, we pretty much all know it. Feronato explains in simple terms how to build such a game.

What is missing however is an explanation for the reader on how to reset the game so the player can enjoy more than one game. Actually, the author does not explain how to restart any of the games he describes. That is a big part in gaming, it should be present in his book I believe. It would also have been a great way to show how to use functions. So as you can see from my prototype above, I have added that logic. Once the game is complete, the user can retry to play.

Stats on how the game progresses is also interesting for the player to see. Lobb actually mentions this in his critique, although I had though of adding these stats previous to reading the article.

As a personal touch, I decided to make my game shareable on Facebook's wall so that my friends could try that little prototype in their news stream. I will eventually explain how easy that is, but it is not the point of this blog post. You may try it yourself in sharing the URL http://jansensan.net/experiments/game-dev-concentration/ onto your news stream. Do not just copy the URL into your browser, it redirects to this post.

Once you share the above URL onto your news stream, it will then show like this:

If you ever used YouTube or Vimeo on your news stream, you know the Flash piece will expand when they click on the blue play button.

With those simple additions, people were enjoying a simple prototype and sharing it around.

Minesweeper

To be honest, I never understood the Minesweeper game, or rather what is compelling to play it. Or maybe I just hate it because that is the only game that was available on my dad's work computer at the government when I was visiting and he was asking me to wait for him... Anyways, I digress...

Feronato only explains what makes the player lose the game, however he should also have explained what is the win situation. An author cannot take for granted that the reader knows the game that is described.

With this game, Feronato explains some recursion and the concept of the flood fill, which I believe is well worth to learn.

Concerning the use of functions however, the explanations lack. Functions are made to reuse code and, again, restarting a game is the perfect need to reuse code. As you can see from the prototype, you can only play once, which as I mentioned before is not a way to build a complete game.

Maybe I have not read enough tech books, but whenever I stumble upon an example online that uses events, the tutorial not always explains that it is best to remove the event handlers, sometimes even in Adobe's documentation! Many a time did I have to explain or correct other people's code to reduce the demand on memory. Feronato does explain to remove the event handler, I have to give him props for this.

Connect Four

This game is not digital by any means, and recreating it does not make it more fun. However, the logic learning with this game is quite nice. Games like Drop 7 seems to be a game that extrapolates on the concepts defined in Connect Four.

The structure of the code in this game made me cringe. I believe that under no circumstance should a child tell its parent what to do. Sounds logical no? I mean not only about code, just read the previous sentence aloud and you will feel how much sense it makes.

Feronato actually does that here, he write something like this.parent.parent. It is not technically wrong, since it compiles, but I believe that conceptually it is not right. It makes it so complex for someone else to inherit a project and try to figure out such a logic. Big no-no.

While explaining how to check for the game completion, the author does bring forward the idea that is it not efficient to loop through all possible tiles. Good suggestion on code efficiency here.

So, what now?

I do see that this book has some flaws, but nothing that could not have been corrected or pushed more. I think also however that both Larsen and Lobb have dismissed a couple of things in their critique.

a) The audience. Larsen makes a good point that the code is quick and dirty and that the prototypes are not teaching concepts, but that is exactly what the introduction says:

Who this book is for

• AS3 developers who want to know quick and dirty techniques to create Flash games
• Flash animators who want to learn how to create games from their works with AS3
• Programmers who know languages different than AS3 and want to learn AS3 to make something more interesting and fun than the old "phone book"
• Even if you aren't a programmer, but you love Flash games, you can count on this book: you will be guided step by step with clear examples and the support of the full source code of every game

Now, is that audience right? That's another question, but it is clearly stated.

b) The types of game. Lobb did hit on that and I do what to bring it back. The title of the book clearly states that is for building classic games, mostly puzzlers.

Build 9 classic Flash games and learn game development along the way

Again, the question to raise is, is that a good thing to teach devs? With Stage3d (a.k.a. Molehill), P2P, game controllers on AIR and all sorts of awesome features, Flash can be so much more as a gaming platform.

All in all, I will go on reading the book, for I know I will learn some more things. I agree however that this book does not feel complete, but it feels like a good primer to get into game development. Hey, I may also be wrong, but once a reader knows about some concepts like AI, recursion, etc., it then becomes more possible to search for more precise concepts.

So this is it. After some three years working with Sid Lee I have decided to move on to other challenges. I was hired by Sid Lee in Montréal in spring some three years ago as an interactive developer. A year and a half later, I was transferred to the Amsterdam workshop where I eventually became one of the technical leads. I was part of the team that would provide technical council, brainstorm during creation and either assist or develop during production, depending on the needs and resources.

I would be lying if I did not say that I learned a great deal there. From advertising principles to dealing with many fields (strategy, design, accounting, etc.), I now understand the full creative flow from client requests to agency concepts to customer's view.

Sid Lee also put a lot of confidence in me in giving me a lot of cool projects. I hadn't been long with them that I was part of the creative team to redo their whole portfolio! I worked on beautiful projects such as Cirque du Soleil's Criss Angel's Believe website, the adidas Women's Lookbook SS10. Actually, most of my portfolio currently consists of work done with Sid Lee.

There is also quite an awesome culture at Sid Lee, one I have never seen before. Never before had I been invited to a VP's house for a BBQ, never before could I share a random drink with a partner and talk shit about anything. The people that work there are amazing and talented, so much so that there is no way you can brag about your feats, since everybody rocks.

Not everything is edible in the garden

Photo by Antti Kupila

Just as in any position, there are awesome moments and awful moments working for Sid Lee. Sometimes, communication or workflows are broken, expectations from many parties are excessive or off. I will not rip them here, for it will serve no purpose and I do not hold a grudge against anyone there.

There is one thing I did expect however. As I was hired because I have a passion for tangible computing and installation arts, I thought I would have the time/be given the opportunity to suggest paths or explore these axes.

I have come to understand that clients fear experimental technologies or ideas. In the end, technological feats, experiments or artful pieces are not what clients want, but rather they want to simply leverage technology to sell more of their product.

Which is totally normal for them, but not for me. I need to explore, I need to learn, I need to play with things, with visuals, with the tangible. Maintenance or back end is not what I am interested in doing. I need to create and build, I need to see the results of what I am building.

Will the grass really be greener on the other side?

So I want to move on, but move on to what? For one thing, I would really like to steer away from the web. As I said earlier, clients simply want to drive their sales. Clients do not want to sell the interactive part, they want the interaction to convert users into customers.

Game development would be, for me, the next logical step. It may be a romantic idea, but I believe that in this field, the interaction IS what you want to sell. This may motivate me to push my boundaries and work.

I would also like to go back and try to build more tangible pieces. I have dabbled in the past with sensors connected to Arduinos, Max/MSP, room-sized installations, lights, speakers, etc. Dirtying my hands while building something that is not just virtual may be a good move too.

If at all possible, living off my music or musical skills would be the best. It has nothing to do with the content of this blog really, but it is still part of me, and a possible future path.

Toil the soil and plant seeds

So, all these ideas, but what now? Well, I am heading back home to Montréal in June and I actually plan to take all of summer off, as a sabbatical. I will play with some techs, read and try gaming logics and ideas, go back to the drawing board—both litteraly and figuratively.

When I went to Flash on the Beach, as I mentionned before, Stefan Sagmeister's talk, The Power of Free Time, had a great impact on me.

When I choose to get back to the world of the working, I will not return as a full time worker. I realize that now, I need time to balance work and creation. Akin to how many women do it in the Netherlands by working either part time or not all, by choosing their personal life and emancipation before work.

I feel lucky that I stumbled upon that talk from Mike Monteiro, Design Director, and co-founder of Mule Design Studio: Fuck You. Pay Me.

I understand he speaks in harsh words, but warnings like these may help me greatly when I decide to jump into the world of freelancing.

But will I freelance? If so, will it be in the web, in games, in installations? Would I go back to give tutorials on web technologies in colleges? Or maybe go down a more creative path? After all, it does not matter. Iain Lobb retweeted Matthias Worch recently, which totally comforted me in my choice of jumping into the unknown:

Whether it's a game, a website, a video or even a subsection in these projects, it seems that they all need a share button. I personally believe it is sometimes too much, to the point that it seems that the PR and media teams avoid doing their work in the hopes that the customer/user will spread the word for them. But that may be just me complaining again.

Nevertheless, I will present here how to use the simple sharing functionality of some of the most prominent social networks around. Remember that Facebook and Twitter are not king and queen everywhere, you may want to target your markets properly.

 Facebook

The infamous social network. As a developer, I kind of like to hate this network, for its documentation is poor and quickly outdated. On the other hand, if Facebook changes its API this often, it allows them to implement new stuff quicker.

Facebook has a relatively simple sharing functionality, even some additional info that you can put on your site metadata to display on the user's wall. I am not taking here about the Like button, which would display number of "likes"—although these two functionalities were merged.

In order to share, you do not need Facebook connect at all, you would only need it if your application, game or site requires access to the user's data. You simply need to call a URL:

http://www.facebook.com/sharer.php?u=http://example.com&t=The Post's Title

If we deconstruct the URL, it's pretty easy to see what is what:

Keep in mind however that if the site that you share has a title and description metadata, the value that you set to t will be overwritten.

You may also want to push it further and set yourself the title, the description and even a thumbnail for your site. For example, this is what was done for the adidas Porsche Design site:

In order to set those values, simply add the Facebook metadata tags on the page you wish to share, like so:

HTML:

<meta property="og:title" content="Your website title goes here"/>
<meta property="og:description" content="Your website description goes here"/>
<meta property="og:image" content="http://www.dummyimage.com/50x50"/>

You may read more in the Facebook documentation. (I can't believe I just wrote that...)

 Twitter

The way to share on Twitter is pretty similar to Facebook's, if not simpler. Here as well, you may simply use a URL with some parameters:

http://twitter.com/share?url=http://example.com&text=This tweet has been shared via a URL.

Here again, here is a breakdown of the URL:

 LinkedIn

LinkedIn also offers a simple URL for sharing:

http://www.linkedin.com/shareArticle?mini=true&url=http://example.com&title=The Post's Title

Their share URL contains an additional parameter:

LinkedIn provides well explained documentation on how to use their sharing functionality. Although for the life of me I don't get why I would ever use the summary parameter.

 ВКонтакте (vKontakte)

ВКонтакте's share is well documented. Can't read Russian? Get Google Chrome, it translates websites quite well.

Even though there is a lot of options available for sharing, let's look at a simple share:

http://vkontakte.ru/share.php?url=http://example.com&title=The Post's Title

Pretty much the same as Facebook:

 人人网 (RenRen)

We now enter the realm of assumptions, I simply relay information I found about how to share on RenRen. A user named Yuao shared his knowledge, and it seems that again, a simple URL with some parameters do the trick:

http://share.renren.com/share/buttonshare.do?link=http://example.com&title=The Post's Title

Let's see what that URL is made of:

Due to the documentation being all in Chinese, it's kind of hard to obtain more information. As far as I know, Google cannot sift through stuff in China easily. Also, the company itself did not want to provide help unless huge sums were paid upfront.

Other networks

There are obviously other networks, but as you can see from the last one of which I spoke, my knowledge gets thin. Hyves, Orkut and Mixi may be of interest if your data shows that your users are part of such networks.

As for every project, make sure that implementing the sharing functionality makes sense. It may be obvious, but not all networks need to be targetted for every single project.

If you target multiple markets and social networks, do look into the proper etiquette of each. Last I heard, commercial presence was a bit frowned upon on Mixi.

As creative developers, we need to be familiar with the concept of tracking. For those of you who are not familiar with the idea, tracking is a way of recording the user's interaction with a website, an installation, a game, or any other interactive piece. For example, you'll notice that I sometimes refer searches people did to end up on my site or what is the most popular post. I can get all that information via tracking.

The purpose

The data obtained from tracking can be used for different purposes. In theory, the strategist should meet with the information architect in the beginning of a project to share the learnings obtained from previous projects. Afterwards, the information architect adapts or corrects wireframes accordingly.

Let's think of a share button on a microsite. If an agency implements a share button, but said button is not used at all in any of it's sites, the strategist could then decide that the share button is either useless, then ask for it's removal. Also, it could mean that it is not either visible enough or in a proper location, that would then be a job for the information architect to rethink where that button should be placed in the site.

Tracking useless data: achievements?

That does mean however that when creating a tracking plan, a strategist might have to be careful to track every of the user's actions, useless data might serve no purpose. But in other contexts, such as games, tracking all sorts of useless things might serve a purpose: achievements.

Many people who are familiar with games know that there are tons of things tracked in there, and since their creation. Asteroid's rocks, Pac-Man pellets and fruits, Donkey Kong's barrels, Super Mario's coins. All those things were tracked in order to present a high score. Pretty basic, and a bit boring by today's standards.

Bubble Bobble, an old arcade game, had a lot of undisclosed tracking that affected how power-ups and points were attributed to the player.

Probably the most mysterious is the formula that determines when special items appear. Most players believe it to be random, but actually they're all directly determined by the player's actions. The game maintains counts of a large array of trivia, like bubbles popped, times jumped, water bubbles burst, and times wrapped around the screen. When a counter exceeds a threshold value, a flag is set scheduling the item to be generated in an upcoming level. – Source: Gamasutra - Game Design Essentials: 20 Mysterious Games

More recently, online gaming has allowed tracking results to be used as bragging rights in between gamers. Services like XBOX Live, Playstation Network and the recent Apple GameCenter all allow their players to track seemingly useless data and post it on a more developed online high score board.

A recent game went from indie to fame, Super Meat Boy. That game tracks the attempts of the player to succeed at passing the current level, and at the end of the level, presents a funny replay of all the attempts at the same time.

Tracking tools

There are multiple ways to track user interactions. As I have not worked in gaming, I can only mention those about websites, but the idea is mostly the same.

Google offers an easy to use free service, Google Analytics. Enterprises oftentimes go with professional companies that offer tracking services, such as CoreMetrics. Even Bitly, the URL shortener service, offers some tracking.

Those who ever worked with banners—ugh, I hate these things—know of something called the ClickTag. If you don't know what it really is or never cared to look it up, let me spell it out for you: it's a tracking tag. Yup! Those ad servers hosting the banners track the amount of clicks on those banners. I mean, it's important to the advertiser to know if the banner is successful. And just so you know, a banner click rate (views vs. clicks) is oftentimes less than 1%... Sometimes, they go as far as using heat maps to know what attracts the user to hover over or click on said banner.

Try tracking tools as much as you can, it is an important skillset to have.

Why should you care?

Well, you may not have to, it all depends on what you want to do. But like in anything, it's good to know how it works and how it affects you and your work.

If you aim to know programming in all its nook and crannies, if you like to optimize the hell out of your code and do not care about the rest of the project lifecycle, tracking will just be an annoying request from your project manager to add some lines of code in your project.

However, if you care about how the project got to what it is, if you care about the user interface and experience, you need to work with a strategist and an information architect before the project is started, and also afterwards once the project is complete to see what are the lessons learned. It is a great way to move forward in the world of development.

Further reading

There are obviously a lot of people writing about SEO, strategy and interaction design. Here are a couple blogs that I find relevant:

• 52 Weeks of UX
• The Future Buzz
• Get Elastic
• Ignore the Code
• Luke W: Ideation + Design
• UX Booth
• UX Movement

That is useful while debugging, however most often those traces are needed in the final context of the Flash piece, like a website.

There are some awesome tools out there that do just that and in style. I'm thinking of De MonsterDebugger. That tool is really good, although it requires some additional classes and long words to write to get something simple (eg: MonsterDebugger.trace(this, "Hello World!")).

There is a context in which that tool cannot be used, and that is Facebook. Ah! the ever hatable social network platform! Facebook does not allow ExternalInterface for security reasons, that is why tools like De MonsterDebugger are not available, this is how data is sent to their debugger. Edit: After receiving a comment, I investigated, it indeed turns out that MonsterDebugger is available when working on Facebook, as it indeed uses LocalConnection. My bad for assuming. However, the use of ExternalInterface is still not possible on Facebook, and the point of this post is more to show how to use the Terminal and Command Prompt to debug.

Sure you could create a textfield and add it to the display list, but that can become tedious if you need to add scrollbars and such.

A good alternative is to use a debugger that functions regardless of context. Adobe's open source Flex SDK comes with the Flash Debugger, a JAR package that can be run with Java from the command line.

Yikes!

That sounds more complicated than it really is actually. Let's see how to run the debugger on Mac OSX and Windows.

Terminal on Mac OSX

The screenshot above provides already a lot of information on how to run that package, but let's spell it out step by step:

1. Open Terminal
2. Go to the directory where of the Flex SDK you want to use
3. Go to the "lib" directory
4. In that directory, you need to run the "fdb.jar" package. To do so, type "java -jar fdb.jar"
5. To start the debugger, type "r", for run. The traces and errors will then be displayed in the Terminal

This will work for all SWFs published with debugging enabled, whether they are local or online, and that is where it becomes useful, for debugging stuff online. Just make sure then that you installed the debugger version of the Flash Player so it can communicate with the Terminal.

Command Prompt on Windows

It's pretty much the same on Windows with the Command Prompt. You can see here that I use Windows XP, so I'm sorry if there are slight differences on Vista or 7, I don't have those OSes.

1. Open the Command Prompt
2. Go to the directory where of the Flex SDK you want to use
3. Go to the "lib" directory
4. In that directory, you need to run the "fdb.jar" package. To do so, type "java -jar fdb.jar"
5. To start the debugger, type "r", for run. The traces and errors will then be displayed in the Command Prompt

Happy debugging!