How to build AR apps

by admin | Sun, 08/02/2009 - 19:38

(*) means: need to be checked

WHY WOULD I WANT TO BUILD?

Well, when you create a Flartoolkit app, even using a manager like FLARManager or ARtisan, you do it writing ActionScript3 code in a file that basicaly, is an AS actionscript3 file(*).

This code has to be converted to an executable file, a SWF Flash, in order you can run it. This conversion is what we call "build" (is a little bit more complex).

As far as I know (I'm pretty sure we'll have to fix this page later), there are two basic ways to build a Flartoolkit app. One is using both Flash CS3 or CS4 IDE (Flash, period) or the Adobe Flex 3 Builder. You can also use IDE's like Ecplise with the Flex Builder plugin installed and other IDE's who support ActionScript coding.

HOW I BUILD AN .as FILE ?

At this point we should to clarify one idea:

Depends the manager and IDE that you/the_developer has used to create the app you can find various ways to build an AR app. So, at least you can find this cases:

1. FLARTOOLKIT project with FLA and AS sources.

That's really easy. Yoy will find inside the app/project folder one FLA file and one AS file. The FLA file has nothing but an actionscript class linked. This actionscript class is the AS file. So, to build your app, you only have open the FLA file, change what you want in the AS file and publish the project (in the FLA file tab) from the  File > Publish menu in Flash CS3 / CS4. Remember to check the file extension and Flash Player version in the Publish Settings. 

2. FLARTOOLKIT project without FLA file and only an AS source

The Mikko's learningFlartookit is an example of this case. 

That one is a little bit more difficult for begginers. You will need the Flex 3 Builder or other IDE like Eclipse to do it.

  1. Create a new ActionScript project from File > New > Action Script Project
  2. Choose any name for your project.
  3. Uncheck (if checked) the default project directory and choose the folder containing the src and lib folders.
  4. Check you are using the Flex 3.2 SDK (or higher)
  5. Click next
  6. A new window will appear, check that the main source folder is src and the main application is the as file inside the src folder. Probably it will be different from the one you have because by default the main application takes the name from the project name. 
  7. Choose the output folder where the SWF and support files will be located after the buid.
  8. Click finish. 
  9. Now Flex will show you a workspace whit all the folder inside the project on the left sidebar, in the center you will see the code inside the main as file.
  10. If there are no errors, you can directly click Project > Build to build the app.
  11. If all it's ok, you will find under the output folder the result of the building process. Open the SWF file with the FlashPlayer, show the pattern to the camera and enjoy ;)

3. FLARManager project This is the case of the FLARManager example.
You have a complete guide about FLARManager in the Transmote FLARManager page

  1. in Flex Builder’s top menu bar, go to File>Import>Flex Project.
  2. select ‘Project folder’ and Browse… to the folder you unzipped the download / checked out the source into; this folder should contain the ‘resources’ and ’src’ folders, as well as the Flex Builder project files (these are hidden files on OSX).
  3. uncheck ‘Use default location’ — the path you should use is the same path of ‘Project folder’.
  4. click Finish.
  5. take a look at your Problems window (if it’s not visible, select Windows>Problems from the menu bar). if you see anything about ‘Cannot create HTML wrapper…’, right/ctrl-click on that error and select Recreate HTML Templates. Flex Builder will rebuild the project and create your html-template folder.
  6. then, run the project via Run>Debug>FLARManagerExampleLauncher.

4. ARtisan project

  1. From File > New > Create new Flex project
  2. Choose the project folder where the src folder is.
  3. A new window will appear, check that the main source folder is src and the main application is the as file inside the src folder. Probably it will be different from the one you have because by default the main application takes the name from the project name. 
  4. Choose the output folder where the SWF and support files will be located after the buid.
  5. Click finish. 
  6. Now Flex will show you a workspace whit all the folder inside the project on the left sidebar, in the center you will see the code inside the main as file.
  7. Now you have to target the build to use Flash Player 10. From Project > Properties > Flex Compiler and setup to 10 the Flash Player verison required.
  8. Build as usual from Project > Build Project or Project > Clean if you already have been working on the project and you want a clean build.