Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Imagine Admin
24th November 2009

Getting started with Augmented Reality and the FlarToolKit

Learn the basics of Augmented Reality using ActionScript 3.0, Papervision and Flex Builder

Getting started with Augmented Reality and the FlarToolKit

Learn the basics of Augmented Reality using ActionScript 3.0, Papervision and Flex Builder

One of the biggest buzzes at the moment is Augmented Reality, and the reason for that is because unlike two years ago when you could only make 3D objects attach themselves to physical objects using C# and a desktop application, we can now do the same using ActionScript 3.0. Admittedly it’s not as responsive as the C#, but nonetheless we can still have fun producing the likes of the GE smart grid example.
Before we get into this tutorial we have to say thanks to a couple of people who without their help we wouldn’t be able to give this easy-to-follow tutorial. They are Mikko Haapoja (www.mikkoh.com) who we spoke to about Augmented Reality quite a few months ago and also Lee Brimelow (www.gotoandlearn.com) whose example we have taken and changed for this tutorial. This tutorial might seem a little hard going to begin with, but we promise that once mastered you will be able to extend the concepts for more complex 3D objects and animations. Be aware that you will require a webcam, Flex Builder, Adobe AIR, and some prior coding skills.

Tutorial files for this tutorial are available here

01 Get the pattern

Getting started with Augmented Reality and the FlarToolKit

Before you start anything you need a pattern for the webcam to match, but to save time let’s use the pattern from the last page of this tutorial, or if you want visit http://ge.ecomagination.com/smartgrid/#/augmented_reality/, click on the right printer icon and a PDF will open, you need to print this onto a piece of paper. Otherwise you can make your own pattern.

02 Pattern maker

Getting started with Augmented Reality and the FlarToolKit

Next you need to create a .pat file so the code can map to the piece of paper, so download the pattern maker from Mikko’s website at www.mikkoh.com/blog/?p=182. Scroll down the page and you will see that he explains how pattern marker files are made plus you will also see a download link (http://tinyurl.com/px6dv5), so download and install the Adobe AIR application.

03 Create the pattern

Getting started with Augmented Reality and the FlarToolKit

Run the ‘MarkerGenerator’ AIR application and hold up the printed pattern from the CD file (Page5.doc) or page 54 of this tutorial. Notice the application tries to draw a shape around the square box, once it has press ‘Save Pattern’ and call the pattern ‘pat1.pat’ and save to your desktop for now. You’re all done with AIR and the application now so close the ‘MarkerGenerator’ app.

Pages: 1 2 3 4 5

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • David Vafa

      It’s hard to believe how lucky I am to come across the -Web Designer- webpage I followed one of your tutorials.Getting Started w Augmented Reality and it is well-written ,cool , and easy-to-follow your website is a Gem to web. I’m already started on a subscription!

    • zaid

      how could i download the smart Grid sample with source code ?