Wednesday, November 25, 2009

Playing augmented reality with my business card

Augmented Reality is one of topics that I am doing research. I choose a simple demo to make this topic more interesting: playing with business card.
The target of the demo is: playing a video after detecting the marker on the business card.

FlarManager is the library that I choose to work because it's very flexible and easy to use. It wraps FlarToolkit and make it works with many Flash 3D engines: Sandy, Papervision3D, Away3D,...
This is the result:

Below is list of step that I did to make this demo run:
Step 1: Download FlarManager. You can get its source code from SVN here.
Step 2: Configure FlexBuilder and setup the project to build the whole source code of FlarManager (just follow steps in this tutorial)
Step 3: Capture my business card and print out the logo of my company.
Step 4: Use this online tool to create marker from the printed logo. After finishing this step, we get the output is a pattern file using in recognizing the marker under camera. You should save the output file with .pat extension (example: mylogo.pat). You must remember the resolution of your pattern for using in configuration of next steps.

Step 5: Open the FlarManager project by FlexBuilder, the is the default running demo. So, I choose this file to customize the code. I am very lazy and don't want to do any complex thing. He he
Step 6: Configure the marker.
+ Copy our .pat file into resource folder (or any places in your project).
+ Go to \resources\flarConfig.xml, add your pattern file location in the patterns section.

Step 7: Go to the file and write code to load video and play it on a plane. This is a very simple task for any Flash developer.

Step 8: Play the video when the marker is detected. To do this, you just need to add the Plane as child of this.activeMarker. FlarManager did everything and return to us the activeMarker in correct position. So, we just add our game above the active marker and play.

Do you want to have a special an AR business card with your own logo? He he, try this.