# Beginner’s Guide to Augmented Reality

##### Tutorial Details
• Difficulty: Beginner
• Program: Flash
• Estimated Completion Time: 1-2 hours
This entry is part 1 of 2 in the series Beginner’s Guide to Augmented Reality

Augmented Reality has been cropping up a lot lately, especially Flash-based AR. I will guide you through how to create some simple yet neat effects that you can put on your own website.

## Introduction: Augmented Reality

Augmented Reality has been judged as one of 2010’s hottest trends. The concept behind it is pretty simple, over lay the physical world with cool graphics that appear to occupy the same space as you.

Lots of companies have used it as a great promotional tool. Adidas have recently put them on their shoes and made a very cool looking game.

Lego use it as a way to visualize what their products will look like when you’ve finished building them.

Some freelancers use it as a very cool business card and promotional tool. AR allows you to create a more impressive business card at no cost at all and you can fit way more info on it.

In January of this year, I completed a project for university where I created a wearable augmented reality system. It featured a virtual gallery which, as you walked around, told a very tragic story.

I approached creating AR from a design point of view, knowing very little about coding in AS3. I am here to share what I learned with you as I found it very difficult for beginners to learn anything about the subject. It was just a question of starting everything from scratch.

Now I’m sure you’re full of ideas of things to create, let’s create your first augmented reality project: adding depth to a flat piece of paper.

## Introduction: flARToolkit

flARToolkit is the flash version of the C-coded augmented reality library known simply as ARToolkit. It was converted over by a very very skilled Japanese coder known as saqoosha. He does all kinds of crazy stuff with augmented reality and if you can read Japanese or are prepared to wade through lots of posts that barely make sense when translated, then you can learn a lot from him. He created the infamous ‘hole in the wall’ effect which is demonstrated in the New Years celebration project he created to welcome in 2009.

More recently, he has demonstrated that you can link various markers together and other wonderful effects that I could only ever dream of creating.

## Step 1: Getting to the Source

Squidder.com modified an existing flARToolkit library, the flARManager class, to be able to handle events and multiple objects. Interestingly enough they post their source code and a so called ‘how to’ but never actually explain their own code. It took me some time to work out how to get multiple objects that could all be different. I should point out now that I am a designer first and coding resulted from wanting to make crazy things. I approached this wanting the end result to work rather than being concerned with best ways to code things.

Let’s download the code from their original post on the subject and give it a look over.

Download the file called “flarsquidderkit.zip”, extract the .zip file and open up the main folder. Note, if you don’t extract the .zip folder, you won’t be able to open the .swf correctly or edit the files you need. So once you have done that, you’ll see 3 key folders: deploy, fla and src. You will also see a file called “flardrums.pdf”.

## Step 2: Play Time

We have our markers for now, print them off so we can test it and see how the source currently works.

Open up the deploy folder and open the MultiFLARExample.swf. Accept the webcam and start playing with the markers.

In a video demo that they created, you pass your hand over each marker individually and see how they make sounds when they disappear. This was written in by squidder. They added two events, MARKER_ADDED and MARKER_REMOVED. We will explore how to use these events later.

Now you know how it currently looks, let’s get down to modifying their source code to do some cool things of our own.

## Step 3: There’s Coding to Do

For this tutorial, I assume you have basic knowledge of AS3 and class sheets.

Open up the \fla\ folder and then double click on “multiFLARExample.fla”. In the properties panel you should see the class box filled in with MultiFLARExample. You’ll want to click the pencil icon next to the class box so that we can start looking at the code.

## Step 4: MultiFLARExample

Straight away you’ll see the usual import code at the top and underneath that some basic variables for light sources.

Next is an interesting part, the code that loads in the markers. As you can see, the markers are loaded into an array so that they can easily be called later on. Pay attention to the order they loaded in here. The first marker in the array gets the id of 0, the next is 1 and so on. We will be using these id’s later on.

Also look at private functions _addCube and _getFlatMaterial as these are the other two sections that we will be focusing on editing today. They’re pretty self explanatory in what they do, but they are oddly set up. They have been coded for simplicity in getting the same object in multiple colors, rather than lots of different objects, so we have to make a few changes.

## Step 5: Ch-Ch-Changes

Okay, let’s change some code. Let’s alter it to a more usable state but for now we’ll keep the visual look the same. When I was figuring all this out, it was an odd relief to find out that it all came down to if statements in the end. If statements are just so magical and useful when it comes to coding things.

In the _addCube function replace this code :

var cube : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
cube.z = 20;


with the following code:

if (id==0){

var cube : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
cube.z = 60;

} else if(id==1){

var cube2 : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
cube2.z = 0;

} else if (id==2) {

var cube3 : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
cube3.z = 20;

} else if (id==3){

var cube4 : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
cube4.z = 40;

}


## Step 6: Test the Movie

Now, this might seem like a convoluted way to deal with cubes, but it allows us to deal with each individual cube. For example, in the code above, I have altered the z axis of the cubes to demonstrate to you that the code is now handling each cube as its own object. Let’s try out the movie, you should have something to this effect:

## Step 7: Explanations

Before we continue, let me explain the code you just put in. It’s pretty straight forward and if you have used papervision3D before you can skip this part.

var cube : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );


Here we create a new variable, cube. This variable holds all the information needed to render a cube and determine how it looks. The MaterialsList part refers to the material used for the outside of the cube. As we want the same material on every side and that material is held in a variable created earlier in the code, we use {all: fmat}. I’ll talk more about the fmat variable later. Finally, the three 40’s, these are the dimensions of the cube, the width, height and depth. Of course they don’t have to all be the same even though this is a cube. You can use the cube method to create rectangular cuboid shapes if you so wish.

cube.z = 20;


This sets the z value of the cube. This is how high the cube sits above the marker. 0 is the center line of the cube and so setting it at half the shape’s height means that is sits exactly on top of the marker.

dispObj.addChild( cube );


dispObj refers to a display object that was created earlier in the code. A display object will render your object on the screen. You can load as many shapes as you want inside one display object, so we will load all our shapes into it for now.

Brilliant, now that you know how it works, let’s continue editing the code. You don’t really need the _getFlatShadeMaterial function so let’s edit it all together shall we. Doing it this way also allows us to give a different material to each object.

## Step 8: Pulling it Together

You’ll want to find this line in your code:

We are now going to edit the fmat variable so that instead of calling a function, it will call a new flatShadeMaterial where we specify the colors. Later on I’ll deal with other materials including bitmap materials.

Replace _getFlatMaterial(id); with:

new FlatShadeMaterial( _lightPoint , 0xff22aa , 0x75104e );


The three parameters set the lightsource for the flatShadeMaterial, the flat color, and also the shade color. Doing this will give our object a more realistic effect as we turn and rotate it in physical space.

Now, underneath that line we’ll want to add:

var fmat2 : FlatShadeMaterial = new FlatShadeMaterial( _lightPoint , 0x00ff00 , 0x113311 );
var fmat3 : FlatShadeMaterial = new FlatShadeMaterial( _lightPoint , 0x0000ff , 0x111133 );
var fmat4 : FlatShadeMaterial = new FlatShadeMaterial( _lightPoint , 0x777777 , 0x111111 );


Now that we have created a variable for each of our objects, we’ll want to change up the cube code I gave you earlier. Instead of just having fmat as the material for all of our cubes, you’ll want to change it to fmat, fmat2, fmat3 and fmat4 so that our cubes will appear different.

After you have done that, you can now finally remove the _getFlatMaterial function.

Delete the following lines of code:

private function _getFlatMaterial( id:int ) : FlatShadeMaterial {

if ( id == 0 ) {
return new FlatShadeMaterial( _lightPoint , 0xff22aa , 0x75104e );
} else if ( id == 1 ){
return new FlatShadeMaterial( _lightPoint , 0x00ff00 , 0x113311 );
} else if ( id == 2 ) {
return new FlatShadeMaterial( _lightPoint , 0x0000ff , 0x111133 );
} else {
return new FlatShadeMaterial( _lightPoint , 0x777777 , 0x111111 );
}
}


## Step 9: Test the Movie Again

And now let’s test again. If everything is done correctly, it should look exactly the same. What an achievement, eh?

It may not look like much, but we have just set up the foundation for creating lots of different looking objects.

## Step 10: Materials

Okay, let’s get on to something a bit more useful. The bitmap material. Most people would want to put their own images into AR as a cool way to present their work; this is achieved by using an image as a material.

It’s fantastically simple. I have created the following image for you to use, since I’ll show you how to use bitmap material through a web link.

Firstly, you need to import the BitmapFileMaterial class. At the top of your code sheet where all the other classes are imported, add the following line:

import org.papervision3d.materials.BitmapFileMaterial;


and change your fmat material to the following:

var fmat : BitmapFileMaterial = new BitmapFileMaterial("http://kablamo.co.uk/artutorial/kcube1.jpg");


Now let’s test it, it should look just like this:

How simple was that?

## Step 11: Making it Hole

Now that I’ve shown you how to make a cube that sits above the marker, let’s create a cube that sits below the marker to create the hole in the wall effect.

This effect was originally imagined and explained by saqoosha. Unfortunately, he explained it in Japanese and for papervision3d rather that for use with flARToolkit so a few changes were made.

You need to import these two classes:

import flash.geom.ColorTransform;
import flash.filters.*;


Add this line under _lightpoint with the other private variables:

private var _green:Cube;


and then under var dispObj : DisplayObject3D = new DisplayObject3D(); add the following:

this.viewport.filters = [
new ColorMatrixFilter([
1, 0, 0, 0, 0,
0, 1, 0, 0, 0,
0, 0, 1, 0, 0,
1, -1, 1, 1, 0
])
];


Basically, what’s going on here is that you will have two cubes, one being green and the other forming the inside view. They will sit one inside the other. The viewport filter will mask out anything that is that particular color green, which is what we set the outside cube to, giving the effect that there is a hole in the marker.

Now we will create the two cubes.

Remove your existing cube code and replace it with this:

var hole:Cube = dispObj.addChild(new Cube(new MaterialsList(
{all:new  BitmapFileMaterial( "assets/hole.jpg" ), bottom: new  BitmapFileMaterial( "assets/k.jpg" )}
), 80, 80,80,1,1,1, Cube.ALL,Cube.TOP)) as Cube;

this._green = dispObj.addChild(new Cube(new MaterialsList({all: new ColorMaterial(0x00ff00)}), 80, 80,80, 1, 1, 1, Cube.TOP)) as Cube;
hole.rotationX = this._green.rotationX =90;
hole.z = this._green.z = -40;


Notice, for the materials we import in two .jpg files from the assets folder. This folder is located inside the main deploy folder, where the file MultiFLARExample.swf is found. You can either download the following images that I have created, or make your own.

## Step 12: Test the Hole

Give it a test and you should have something like this:

## Step 13: Making Mark-ers.

By now, you are probably fed up of holding up a ratty piece of paper with four markers up to the camera. You want to have your very own marker, so let’s make it. With a few online tools and Photoshop, you can have your own marker up in minutes.

First, let’s make your marker. You don’t need to use a barcode-like design like on the markers you are currently using, but, if you are using a lot of markers then the barcode is the best way to go. If you are using one or two then go wild with the design. For my marker design, I used the K from my website’s logo.

If you are doing it for a business card or some promotional material, think about how the marker looks as you can make some very nice looking markers that blend into the design more.

You need to set up your Photoshop document ready for marker creation. For a basic marker, create an 800x800px file with a 150px border all the way around. Or download this image below:

## Step 14: Online Marker Generator

The white square in the middle is where you can put your marker design. Print off the marker and then pay a visit to the Online Marker Generator.

They have an online marker creator that takes your marker and makes a .pat file that works with your code. It’s quite odd, they have an upload option but I have never gotten it to work (printing out works just fine). There is also an AIR app that does just the same job but this is fine for now.

Set the marker segments to 16×16 and the marker size to 50%, show your marker to your webcam and when a red square surrounds your marker click on get pattern, if you are happy with how it looks in the preview window click save.

If your marker looks really odd in the preview or a red square doesn’t come up, you may need to re-design your marker. You also have to make sure that there is some white space around your marker as otherwise Flash won’t recognize it.

When the dialog box comes up, don’t just download this anywhere, you need to put the .pat file in a specific folder. Navigate to your flARToolkit folder > deploy > assets > flar and you should find four other .pat files there. Save your pattern there and remember what you called it. I called mine “kmarker.pat”

## Step 15: Alter the Code

Back in flash, find this line:

And change crash.pat to whatever you named your marker as.

If you test your Flash file, you should find that your new marker picks everything up perfectly.

## Conclusion

Thanks for reading this introduction to Augmented Reality. I hope you enjoyed it and that it’s made you curious about creating your own AR projects. In the next part of this tutorial, I will cover how to animate objects with TweenMax, making the markers a bit more play sound, importing 3D models and making everything prettier.

Other parts in this series:Beginner’s Guide to Augmented Reality Part 2»

• http://flashartofwar.com Jesse Freeman

Good introduction, I have done a bunch of talks on Flash AR and thought I would add a link to my AR project template and presentation http://flaremulator.flashartofwar.com

• http://www.vlasnn.com Vlasnn

Thanks I was looking for a augmented reality tut. I hope you show more stuff soon

• http://snaptin.com Ian Yates
Staff

Stay tuned for more AR goodness from Johnathan – next week sees him experimenting with.. er… 3D cattle…

• http://www.kablamo.co.uk Jonathan Reid

I can tell you now, it’s very a-moo-sing

• http://michaeljameswilliams.com/ Michael Williams

Yep, it’s an-udder great tut.

• http://www.thedevelopertuts.com thedevelopertuts

Cool AR … I wish I had time to do this kind of stuff too …

• http://www.almogdesign.net Almog Koren

Just wanted to say that I really liked your school project, it was a great idea.

• http://www.kablamo.co.uk Jonathan Reid

Thanks! I’ve gotta say that it was a lot of fun to make. Especially since I used oversized markers. One of them was around 5 foot tall.

• AxxG

Hi there,
i agree with your option. It is a very very nice HowTo!!!
But you have a little mistake. On Step 9, i get a other result.
The reason were in step 5. You didn’t change the “fmat”.
if (id==0){

var cube : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
cube.z = 60;

} else if(id==1){

var cube2 : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
cube2.z = 0;

} else if (id==2) {

var cube3 : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
cube3.z = 20;

} else if (id==3){

var cube4 : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
cube4.z = 40;

}

My Version:
if (id==0){

var cube : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
cube.z = 60;

} else if(id==1){

var cube2 : Cube = new Cube( new MaterialsList( {all: fmat2} ) , 40 , 40 , 40 );
cube2.z = 0;

} else if (id==2) {

var cube3 : Cube = new Cube( new MaterialsList( {all: fmat3} ) , 40 , 40 , 40 );
cube3.z = 20;

} else if (id==3){

var cube4 : Cube = new Cube( new MaterialsList( {all: fmat4} ) , 40 , 40 , 40 );
cube4.z = 40;

}

I am from Germany^^

lg Alexander

• http://www.kablamo.co.uk Jonathan Reid

Hi and thanks for taking the time to try out the tutorial and comment.

Step 5 does use the same material yes, but in step 8 this does get corrected as I ask you to change the materials to fmat, fmat2, fmat3 and fmat4 so that you do get different looking cubes.

The second part of this tutorial will be published soon hope you have fun working with ar!

• James

Hi Jonathan

Thank you so much for sharing… I saw that the problem I have “1180: call to a possibly undefined method ColorMaterial” has been also a problem for others, that´s why I dare ask… how can we solve this please?

Joe says he solved, but doesn´t say how.

Help would be great, so as to keep on to part 2 (which doesnt work for the same reason).

thank you very much

cheers!

• james

Got it!!!
thanks to Lebloganthrope

awesome!!!

Thanks Jonathan, thanks Lebloganthrope!!

• lebloganthrope

Hi, great tutorial guy!
Step11: I have one error message: “method ColorMaterial undefined”
How to proceed?

• lebloganthrope

import org.papervision3d.materials.ColorMaterial;

• Weird

Hello there,
…but I’m completely new to Flex/Flash world. A perfect Donkey…!
So please be patient with my “stupid” questions….:)

How can I use your tutorial and your SquidderToolKit for personal works and Apps?
Where goes my library folder and how can I Add it to a Flex project?

What if I will build an App with (4 example…) a plane instead a cube?

I’d like to obtain an Augmented Reality businesscard, like the on in the next example:
http://vimeo.com/5651466

Could you give me some tips…(a kind of tut for foolish donkeys like me…)?

thank you

• http://web.me.com/upasnabhandari/www.anaya.com/index.html sana

hi
i am trying your tutorial..i do the changes n save it..but when i run the swf file..the changes dont seem to appear..
i am sure i am making the changes in the .cs file n then i save it..m actually doing in mac n m new to it..but donno y the changes are not reflecting..can u think of a possible reason for it??

• razz

It sounds to me like you are forgetting to save the .as file? If it is not saved the changes will not affect the compiled .swf.

• Dhita

Hi there,

this is really a great tutorial! :thumbsup:

anyway, i’m trying to create an AR application for mobile phone.. do you have any tutorial about that? for any mobile phone like blackberry, nokia or even iphone?
do you know any good tutorial about it?

• Scorpio

Hi,

That was a really cool tutorial. Loved it!

There were few things that were missed but still it was good for me as I could understand the code better. :)

I just finished the tutorial and feel great. Thanks for the tutorial. Would like to see more AR tutorials.

• Vaughanjb

Really great and helpful tutorial. I was just wondering how I would go about flipping the video so it acts like a mirror for the user?

Thanks

• http://www.bitbarrio.com Carlitos Machine

Squidder.com is down :( anybody knows if there is another place to download flARToolKit from? thanks

• Rod

Hi Guys,
Great tutorial but his site is down.
If so could you email it to me please.
bones1976@hotmail.com

Cheers
Rod

• Amit

In First step itself i got stuck…..

• nicky

squidder.com is down…. where else could i find the code… if any one has downloaded the zip file could u
plz mail it to nickybastian67@gmail.com

• Oscar

Hi there! What framework or development software do you use to edit the files and generate the new swf?

Thanks!

• Daniel

Flash (CS5) or Flash Builder 4 I haven’t tried this particular tutorial on Flash Builder but it all works the same i assume.

Anyway, I have a question also, Step 9, When using the BitmapFileMaterial on the fmat It doesn’t seem to want to adopt the new image, it just remains black with some pink outlines, i’ve tried downloading the image and using the path to the file location, i;ve also tried putting the image in the library and calling to it from there but still the same result.

I really don’t see what the issue is here? Am i being completely Stupid?

• Daniel

EDIT: Step 10*

• RAy

Need help with Step:11:
What parts do I delete when he says “Remove your existing cube code” (==> pleeeease help me delete the correct lines.

• george

Excactly my question, haven’t figured it out yet.

But the rest of the tutorial is absolutely fantastic, helped me out a lot.

Thank you!

• Ana

How can I flip the video? Do anybody know how to implement a mirror function?

• cafc88

great tutorial mate! best on the web i’ve found so far it’s helped me out a lot

• Quinlan

I don’t know why but it doesn’t works :(
It’s errors of the As3 functions …

(sorry, errors in french )
D:\…\ARPart2Source\src\MultiFLARExample.as, ligne 29 1046 : Ce type est introuvable ou n’est pas une constante de compilation : dramatic.
D:\…\ARPart2Source\src\MultiFLARExample.as, ligne 34 1046 : Ce type est introuvable ou n’est pas une constante de compilation : mooSnd.

Any ideas ?!

• simant

Hey can I save the live augmented video generated by this program on flash player?

• joe

Hi.. firstly this is the best tutorial …thanks for your great effort.

Anyway i am stuck at step 11

1. may i know which line shall i delete.

2. I try delete this code
var cube : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
cube.z = 20;
_cubes[ id ][ index ] = dispObj;

and replace with the code below

var hole:Cube = dispObj.addChild(new Cube(new MaterialsList(
{all:new BitmapFileMaterial( “assets/hole.jpg” ), bottom: new BitmapFileMaterial( “assets/k.jpg” )}
), 80, 80,80,1,1,1, Cube.ALL,Cube.TOP)) as Cube;

this._green = dispObj.addChild(new Cube(new MaterialsList({all: new ColorMaterial(0x00ff00)}), 80, 80,80, 1, 1, 1, Cube.TOP)) as Cube;
hole.rotationX = this._green.rotationX =90;
hole.z = this._green.z = -40;

i compiled and no error but when i test i didn’t see anything. i have download the jpg file and save in the assets folder.

i really need to resolve d issues and move further with the tutorial…i want to know more about this technology. Please sir assist me. Thank you

-flartoolkit
-flex sdk
-flashdevelop
-papervision3d

• joe

I manage to solved d problem — its my mistake , after i recheck again and again…wallaaaa…its run smoothly..thanks…

• James

Hii!

Like Hans and Joe, I have the same problem.
How did you solve it? what is it you changed?

same error as you guys

• http://www.maf-reino.com Bluag

Hey, first of all thank the author for this useful tutorial… now at least I’m a beginner! But I got the same handicap in step #11 because I’m not sure if I’m deleting the correct “cube code” and I really want to move further… please, can anybody show me the solution?

• jeffriley

use this line
at the top
import org.papervision3d.materials.ColorMaterial;
it worked for me

• Hans

I’m close… extremely green on AS.

Unable to finish #11

Any thoughts?

Description -
1180: Call to a possibly undefined method ColorMaterial.
Source -
this._green = dispObj.addChild(new Cube(new MaterialsList({all: new ColorMaterial(0x00ff00)}), 80, 80,80, 1, 1, 1, Cube.TOP)) as Cube;

Nice tut btw!
Thank you!

• johnny

I’m having the same problem, were you able to solve it?

• Lou

hello! this is a very nice tutorial! it helped me a lot! The problem is (I am complete new to all these) that I cannot implement a small 3d animation I have from blender. I export the scene as .dae file but nothing moves. what do I miss? should I import something more than the ones in your code? And the last question: If I want to create smoke, water, etc should I create them in Blender or in Papervision with Flint for example?Or can I do both? thank you very much and I am looking forward for your answer as I am trying to figure out things for my final project :-))

• rocky

I download ur sorce code and open with flash builder, when i run multiFLARExample.as the flash player just appear blank?

• PabloAntonio

What do the numbers after the marker locations mean? I’m presuming that 16 is the 16X16 setting in the marker generator. What are the 50 & 80 for?

• priya

awesome tut.
i just completed my AR, and i want to publish it on desktop as offline(setup)…
i need some guide on this can you give/suggest any link, or anything…

• angel

Hi! really great tute! bu i need your help, I’m getting this error after playing the fla file:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.squidder.flar::FLARBaseApplication/_attachWebCam()
at com.squidder.flar::FLARBaseApplication/_init()
at com.squidder.flar::PVFLARBaseApplication/_init()
at MultiFLARExample/_init()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at MultiFLARExample/timerHandler()
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()

• tuankom

Very good!

• Hachi

Am a complete beginner here, can I know where can I find the marker in step 2 to print it out?

• http://michaeljameswilliams.com/ Michael James Williams

Hey Hachi, check out the PDF from Step 1 :)

• Sharky

You are really cool thanks Men.

• pappxxl

i have did all from part 1-10 and every times i test nothing is changed. i have save the .as file.
someone know what the problem is?

TEACH ME MASTER!!!!

I cannot open the .fla file… I’m using Adobe Flash CS3….

• emre

Hi,
after editing the MultiFLARExample.fla (using flash builder) i go and check the MultiFLARExample.swf to see the results but nothing changes. also when try runnig the fla directly from flash builder i get a error saying that the html file couldn’t be found. any solutions?

• Cristian

Hello,

I’m using your code and I will try to do a modification.
I’m trying to detect a QR code,
only the 3 squares that is general on all QR codes,

any idea?
I can’t find or draw this patter,

thanks,
Best regards,
Cristian

• nazia

thanks you thanks alot. for this awesome tutorials.

• Ankur

Hey Thanks for this great tutorial.

I am trying to integrate my app with Fcabook , but able to find any resources or help. could you plz help me with this. (using flarmanager Lib with Flash Develop – flex 3 sdk)

i want to click the image (shown in the display with 3d object/model) and subsequently want user to click on share button to get this image posted on his facebook wall.
i tried to use FB Api , i dont know how to start.

plz help me. i need to complete my project.

• Jinesh

Hey ankur, we are using the flartoolkit and have been able to set a link on the object detected using the navigatetoURL in Flash. Try setting the link for share on it. Should work.

Btw, are you working on a college project in India?

• Miguel

Thanks for the tutorial! Would be great to know if anyone has figured out what ‘cube code’ to replace in Step 11?

• Melvin

Hey guys,

I had the same problem with “deleting the cube code” on #11.
When you open the source file on top of the tutorial (.fla) you can see which code is deleted!

Great tutorial :)

For all who had problems with step 11:

find: if (id=0) {

var cube : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
cube.z = 60;

}

replace with:

if (id==0){
var hole:Cube = dispObj.addChild(new Cube(new MaterialsList(
{all:new BitmapFileMaterial( “assets/hole.jpg” ), bottom: new BitmapFileMaterial( “assets/k.jpg” )}
), 80, 80,80,1,1,1, Cube.ALL,Cube.TOP)) as Cube;

this._green = dispObj.addChild(new Cube(new MaterialsList({all: new ColorMaterial(0x00ff00)}), 80, 80,80, 1, 1, 1, Cube.TOP)) as Cube;
hole.rotationX = this._green.rotationX =90;
hole.z = this._green.z = -40;
}

greetz

• http://michaeljameswilliams.com/ Michael James Williams

• Miguel

Thank you!

• chingyee

hi,i just follow your 11 step,but i still face two error which is “call to a possibly undefined method colormaterial” ,and “access of undefined prioerty fmat”.
can help me solve this problem?

• http://michaeljameswilliams.com/ Michael James Williams

Hey chingyee, have you imported org.papervision3d.materials.ColorMaterial?

• Meclina

Step 10: Doesn’t work. The image on the box is not swapping out for the image on the server.
Any solutions?

Thanks (^u^)y

• http://www.koengorissen.nl Koen Gorissen

For those who don’t see the changes they made after saving the .as file.
In Adobe Flash you need to recompile the .swf for it to work.

• sergio

Hi, first at all, really nice tutorial. How could be possible to get a better image resolution?, which class is necessary to modify?

• James

I’m having trouble brining in my own .dae files. I have done exactly the same system as to import the cow example and that works fine but my own .dae file doesn’t show. Any ideas?

Thanks

• remat

Hi mate,

I follwed all ur steps, but MultiFLARExample.SWF doesn’t change…
I installed Flash cs5 and the Flex SDK (http://www.flashdevelop.org/wikidocs/index.php?title=AS3#Installing_Adobe_Flash)
I must use it for my thesis…could u illuminate me?

• remat

Hi mate,

editing fla/MultiFLARExample, deploy/MultiFLARExample.SWF doesn’t change…(last editing 6/3/2009 10.55)
where i mistaken?

• Kayla Bayens

Hey I just wanted to let you know that some of your links don’t work, like the links to grab the code from squidder or from the kablamo site. Also I was wondering if I could talk to you more about this, I’ve been interested in doing stuff like this especially with my degrees [Robotics and ALife] as I can think of alot of interesting ways to intergrate it as well as building full systems for it.

• itchpea