Rizal Akbar

Artikel ini merupakan lanjutan dari “Augmented Reality (4–AR dengan Adobe Flash Platform)”.

Yang dibutuhkan

Apa yang kita butuhkan untuk mengikuti tutorial ini? Yang pasti, kita butuh library AR dan library 3D, selain itu kita juga butuh IDE dan Compiler.Disini saya menggunakan FLARToolKit untuk AR librarynya, dan Papervision sebagai 3D librarynya. Untuk IDE dan Compiler, saya menggunakan Flash Develop dan Adobe Flex SDK.

Download Library

• Buat sembarang folder di Komputer anda, lalu rename dengan nama “flartoolkit” (Misal di C:\flartoolkit).
• Setelah itu, dengan menggunakan SVN, download library FLARToolKit ke dalam folder tadi. URL FLARToolKit adalah http://www.libspark.org/svn/as3/FLARToolKit/trunk/
• Apabila anda belum pernah menggunakan SVN. Download Tortoise SVN (http://tortoisesvn.net/downloads.html) lalu install. Setelah Tortoise SVN terinstal dan bekerja dengan baik pada PC anda, klik kanan di folder “flartoolkit” yang baru anda buat tadi lalu pilih SVN Checkout… kemudian isi seperti gambar di bawah ini.
• 
• Kemudian tekan OK.
• Setelah berhasil mendownload FLARToolKit, buat folder baru lagi dan rename dengan nama “papervision”, lalu download library Papervision3D pada URL http://papervision3d.googlecode.com/svn/trunk/ seperti pada langkah di atas.

Download IDE (+ Compiler)

Apabila Flash Develop belum terinstal di PC anda, anda dapat membaca cara menginstall Flash Develop dan menyetting Flex SDK nya pada URL berikut http://www.flashdevelop.org/wikidocs/index.php?title=Installation.

Tutorial

Well.. tutorial yang paling baik adalah tutorial yang bersumber dari si creatornya langsung … alias tutorial yang paling baik adalah example yang telah disediakan pada library FLARToolKit yang baru kita download tadi .

Mari kita simak

• Buka folder flartoolkit yang telah anda buat tadi
• 
• Di dalam folder flartoolkit, telah disediakan satu folder khusus yang berisi contoh-contoh, yaitu folder “examples”. Buka folder tersebut, didalamnya anda dapat melihat berbagai contoh cara menggunakan FLARToolkit dengan PV3D, contoh FLARToolkit dengan Away3D, cara mengimpor object Collada ke FLARToolkit, atau bahkan contoh untuk multimarker, dan sebagainya.
• 
• Yuk, kita coba contoh yang paling sederhana.
• Jalankan FlashDevelop yang telah anda install tadi.
• 
• Di menubar, pilih “Tools > Global Classpaths” atau [CTRL + F9]
• 
• Click “Add Classpath…”, dan masukkan library FLARToolKit dan PV3D yang telah anda download tadi seperti di bawah ini (sesuaikan dengan folder anda). O ya, di dalam folder “flartoolkit\libs” juga ada library tambahan, yaitu “NyaARToolKitAS3”, masukkan itu juga ke dalam Global Classpaths.
• 
• Click OK, lalu restart FlashDevelop. Sekarang FlashDevelop anda telah siap untuk digunakan membuat aplikasi berbasis PV3D dan FLARToolKit .
• Di Menubar pilih “Project > New Project”. Pilih “AS3 Project” lalu beri Name dan Location. Contohnya, Name “tutorial”, Location “C:\tutorial”. Setelah itu click “OK”.
• 
• Silahkan periksa folder “C:\tutorial” anda. Di situ anda akan menemukan 3 buah folder dan 1 file Tutorial.as3proj. selanjutnya kita akan meng-copy contoh-contoh dari library ke folder-folder ini.
• Buka “C:\tutorial\src”. lalu delete file “Main.as”, kita akan menggantinya dengan contoh yang telah disediakan.
• Buat folder “C:\tutorial\src\example”.
• Rename folder “C:\tutorial\libs\” menjadi “C:\tutorial\resource”. Lalu buat folder “C:\tutorial\resource\Data”.
• Copy file-file berikut dari folder example yang telah disediakan, yaitu ARAppBase.as, FLARToolKitExample_PV3D.as, dan PV3DARApp.as. lalu paste ke “C:\tutorial\src\example”
• 
• Buka folder flartoolkit anda “flartoolkit\resource\Data”, lalu copy juga file-file berikut, yaitu camera_para.dat dan flarlogo.pat. lalu paste ke “C:\tutorial\resources\Data”.
• 
• Seharusnya saat ini di “C:\tutorial\” struktur foldernya kira-kira seperti dibawah ini. Di “resources\data” kita punya 2 file, yaitu camera_para.dat dan flarlogo.pat, dan di “src\examples” kita punya 3 file, yaitu ARAppBase.as, FLARToolKitExample_PV3D.as, dan PV3DARApp.as.
• 
• Bila sudah, coba buka kembali FlashDevelop, lalu pada jendela project, click kanan pada file FLARToolKitExample_PV3D.as kemudian pilih “Always Compile”.
• 
• Setelah itu jalankan aplikasi anda. Pada menu bar pilih “Project > Test Movie” atau [F5]. Bila semuanya berjalan lancar, seharusnya flash viewer akan terbuka, dan meminta izin untuk mengakses kamera.
• 
• Selamat, anda baru saja membuat aplikasi AR pertama anda (walaupun hanya mengikuti example saja :p). Lalu di mana markernya? Buka file “flartoolkit/resources/Data/flarlogo-marker.pdf”, lalu print. Lalu test di aplikasi anda. Apabila semua berjalan lancar, seharusnya tampilannya kira-kira seperti dibawah ini.

Pembahasan

Hasil final di atas mungkin memang sangat sederhana, ya itu memang karena kita memulainya dari contoh yang paling sederhana, yaitu AR dengan menggunakan object primitive Plane dan Cube dari PV3D.

• Kembali ke FlashDevelop, buka file FLARToolKitExample_PV3D.as.
• Baris 27
  • package examples
  • Baris di atas menunjukkan bahwa file kita terletak pada folder (package) “C:\tutorials\src\examples”. Apabila anda tidak ingin file-file anda berada di dalam folder “\examples”, maka anda harus menghapus kata “examples” dari baris “package examples”.
• Baris 29 – 37.
  • Kita mengimpor library-library yang kita butuhkan dari flash dan PV3D.
• Baris 39.
  • import examples.PV3DARApp;
  • Kita mengimpor file lain dari folder examples. Yaitu PV3DARApp, itu sebabnya mengapa tadi kita perlu mengcopy file PV3DARApp.as juga. Library-library yang kita butuhkan dari FLARToolKit di impor pada file PV3DARApp.as tadi.
• Baris 55.
  • init(‘../resources/Data/camera_para.dat’, ‘../resources/Data/flarlogo.pat’);
  • Inisialisasi camera dan marker yang akan kita gunakan. Anda dapat mengganti-ganti marker anda dengan cara mengubah “flarlogo.pat” dengan file *.pat yang lain.
  • Untuk membuat file marker, simak link berikut ini :
  • http://flash.tarotaro.org/blog/2008/12/14/artoolkit-marker-generator-online-released/
• Baris 61-64.
  • Membuat Plane beserta materialnya, kemudian meletakkannya di posisi default
  • 
• Baris 68-71
  • Mengatur Pencahayaan
• Baris 75-78
  • Membuat kubus dan materialnya, kemudian meletakkannya pada posisi z = 20 (keluar dari kertas/marker)
  • 

Anda dapat bereksperimen dengan membuat object2 lain dari PV3D, atau bahkan coba untuk mengimpor file collada. Coba juga contoh-contoh lain yang telah disediakan di library FLARToolKit.

Selamat Mencoba

Artikel ini merupakan pembahasan dari materi presentasi  ‘Augmented Reality’ pada event Adobe Camp Indonesia 20 Januari 2011 kemarin.