Getting Started with Augmented Reality / FLARToolKit

Table of Contents


Hello FlarToolKitWhat is Augmented Reality?

Augmented Reality is a technology that allows you to superimpose images into real-time environments. For the purposes of this tutorial, you just need to know that it reads a marker (shape/symbol), interprets the angle and size of that marker and then allows you to place objects at that size and position on the screen (or whatever your medium is).

Here are a couple example videos:

Mini Video and the GE Site

What is FLARToolKit?

To start with ARToolKit is the development package that has allowed developers to tap into the power of Augmented Reality. FLARToolKit is an Actionscript 3 port of the Java version of the toolkit.

What do I need for this tutorial?

In this tutorial, we are going to use FLAR Manager, which is a framework setup to make the combination of Papervision 3D and FLARToolKit easy and quick to setup/use.

If you would like to simply use FLARToolKit (or just get a little more information about it) clik on the following link:

Otherwise, download FLARManager (using v0.1 in this tutorial) from . FLARManager actually comes with a build of FLARToolKit in it and you can get it for AS3/FP9 or AS3/FP10 (we are using FP10).

You will also need FlashDevelop or another Actionscript editing tool. In this tutorial I am going to be compiling my code directly from FlashDevelop, but feel free to use the compiler/method of your choice.

You should also get a pattern generator so that you can create your own patterns (markers). Go here for more details:

What else should I know?

You should be aware of the fact that there is a licensing fee to use check here: for more details

Happy 1 Year (ish) Anniversary to me

Hey folks,

In March 2008, I decided that I needed to actually start my own blog, it was something that I had thought about for a while but I never really pictured myself writing anything. It ended up being a great idea because it has pushed me to try new things so that I have something to post about. I have tried to use my blog as a place to share code and thoughts about the industry. So far, I would say that it has been a success and I thank all of you for staying with me through the year.

I thought that today I would mix things up a little bit by switching up my theme for my site. I wanted something with more room for the side columns now that I have my tweets feeding in to my site as well. So I hope this doesn’t screw anything up!

anyways, have a good one. Marc

Face Detection – OpenCV in AS3

Hey all,

Be like me

After all of the tests and playing around that I have done with face/motion detection in Flash and Processing Quasimondo posted an optimized version of the OpenCV port to AS3. This is something that I have been waiting for someone to do for quite some time. I thought I would just post my first test with it and forward you to his page since anything i would say about it would just be repetition

To view my test click here (need a webcam):

In my example, I just slightly modified Mario’s class to allow for an image to be placed instead of just a box being drawn. I have already seen an example of 3d and this library being used at:

Quasimondo’s blog posting:

thanks, marc

Attention to Detail – Becoming More Efficient

A couple of years ago, when I was working at Critical Mass in Calgary, AB and noticed a couple things with the team that I was with that could make everything go faster. When I took a step back to evaluate what was happening I noticed that all of the issues that I was experiencing were rooted in having every person that was touching a project pay a little bit more attention to detail.

When I started my web career, I was at a smaller company that didn’t have the ability to get a huge account and throw 70 people at it to get it done; there were just a few of us on every account. So many projects were just pushed through that we didn’t have all the time in the world to make sure that layers were named and all code was documented.

As I got into the world of larger agencies I started to notice how detrimental this was to the efficiency of future projects, as well as the maintenance of past projects (already kind of knew that one). So what I did was I set up a meeting with most of the team and we talked about what people’s roles were, where they fit into the greater scheme of things, and all of the little things that individuals could be doing to make everything easier for all involved.

Some of it was obvious, just follow best practices and standards and things will run smoothly but it really seemed like people needed a reminder of a lot of things. I am not innocent on this either, I have been rushed through countless projects that just kept getting messier as the days went by. I thought that I would write this to remind people of the basics and hopefully get them to pay a little bit more attention to even the smallest things.


When creating anything, whether it be a Photoshop file or a Flash file make sure that you name everything clearly. Build everything as though someone else is going to have to look at it and understand it at some point down the line. Name all layers and assets with descriptive names, try and group similar assets and layers so that every bit of the file is quickly and easily accessible.

Layer Comps:

If you are working in Photoshop and passing files to designers, layer comps are a great resource for working with your content. If you haven’t heard of layer comps I strongly recommend looking into how to work with them. You can keep things organized, cut down file size, and make sure that it is clear what your thoughts were when designing.


I tend to write a little too much documentation in my code these days, just to be certain that anyone that touches my files know what was going on in my mind. One key thing to keep in mind with documentation is that it is not just for you, so keep it a little bit descriptive for others to understand. When documenting your code try to picture that your code is going online, not just what is produced by it, use this as a motivation to keep it clean and documented. That always helps motivate me because I have always been a little self-conscious about my code so I write a lot of documentation to help out.

Clean Code:

Don’t go through your files and name things randomly x and y. Come up with some short, succinct names and always follow a naming convention. This comes in handy a lot because you don’t have to go looking through all the definitions in the script to find that gameTimer is a game timer as opposed to having a variable named gt.

Know Your Team:

I have worked (and still work) at companies with multiple offices where I haven’t had the chance to meet many of my team members. This doesn’t have to be a problem thanks to other forms of communication, but communication is something that should really be pushed. When starting on a project, I always find it best to layout the some sort of plan for putting everything together. If you are a programmer just blindly getting files from a designer then you may not get what you want. If you are a designer preparing files for a developer, you may be doing more than you have to.

A good example of this is when there are a couple of different stages in design/development that are sharing assets. Let’s say a designer creates a PSD and passes that off to a motion designer who spends days animating things over and over again. This might prove to be a waste of time because the developer can re-use just the first animation and do the rest. These are things that should be discussed beforehand. With experience, you will eventually start picking up on aspects that can be coded and those that should be manually done. Until then, just talk.

Know Your Own Role:

This one has always been a big one for me. Being a developer, I am generally one of the last touch-points on a project before it gets out the door. This means that towards the end of the project if anyone has an issue with the way something looks or works, they generally come to me first. This is where I have to make the decision if that is something that I should do. I can make little revisions to positioning and layout but I know that anything even slightly beyond that should be done by or with a designer to ensure that it is done right and won’t have to be done again.

Knowing your role basically comes down to knowing your strengths in a given project and knowing when to go to others to use their strengths. If you are at an agency, there is generally someone that you can turn to that can do something quicker and better than you if the task is not in your specific area.

Overall, Just Pay Attention

In the end, it all comes down to just paying attention and spending the extra couple minutes on the fine details. Once you get into the habit of doing things that I listed above, they become easier and quicker and you may even find that your work is not just getting easier to work with but it is getting better and you are getting things done faster.

– Thanks, Marc

Context Menus in AS3

I just came across a little article/tutorial that I would like to bring my readers’ attention to. It is something that I have always thought would be a very useful addition to Flash pages but is extremely under used. What I am talking about are customized context menus. These are the menus that appear when you right click.

With actionscript you are able to customize these menus and add a little extra interactivity to your pages. Even though most people don’t right click on anything, some people do. To have something there for them to find and use could prove to be useful. It could be anything… credits, navigation, easter eggs, helpers, etc.

Context menus take very little time and effort to add, and show that you are paying a little bit extra attention to detail when creating a site / application.

here is a quick and easy guide to using AS3 Context Menus >

thanks, marc