BAB IV IMPLEMENTASI DAN ANALISA

Transkripsi

1 digilib.uns.ac.id BAB IV IMPLEMENTASI DAN ANALISA 4.1 Detail Aplikasi Aplikasi Augmented Reality Technology pada Buku Cerita Gatotkaca Lahir adalah aplikasi yang dibangun sebagai media pembelajaran anak-anak. Aplikasi ini terinspirasi pada cerita wayang Gatotkaca Lahir, berisi tentang cerita bagaimana gatotkaca dilahirkan sampai gatotkaca dapat mengalahkan musuh dan membawa kedamaian di Kahyangan. Aplikasi yang saya buat memanfaatkan Augmented Reality yaitu menggabungkan dunia maya kedalam dunia nyata dalam satu waktu atau realtime. Sehingga media pembelajaran yang dihasilkan menarik untuk anak-anak karena objek yang berbentuk 2 Dimensi menggunakan animasi sederhana dan tampilan antarmuka yang berwarna-warni. Selain itu diharapkan aplikasi ini dapat melatih daya imajinasi, kemampuan berbahasa dan meningkatkan apresiasi terhadap karya sastra pada anak-anak. 4.2 Pembuatan Aplikasi Pembuatan Objek 2 Dimensi dan Animasi Objek Aplikasi yang digunakan dalam pengembangan objek 2 dimensi adalah software Adobe Flash CS5 dengan menggunakan Tools, seperti Pen Tool untuk menggambar objek secara langsung yang sebelumnya telah disketsa. Beberapa contoh sketsa diantaranya adalah : 31

2 digilib.uns.ac.id 32 Gambar 4.1 Sketsa Tetuka Lahir Gambar 4.2 Sketsa Begawan Abiyasa

3 digilib.uns.ac.id 33 Gambar 4.3 Sketsa Arjuna Gambar 4.4 Sketsa Gatotkaca Bertarung dengan Kalapracona Objek 2 dimensi yang saya buat diberi animasi sederhana dengan menggunakan Frame by Frame, Motion Tween dan Shape Tween yang terdapat pada Adobe Flash CS5.

4 digilib.uns.ac.id 34 a. Pembuatan Objek 2 Dimensi dan Animasi Objek 1 : Gatotkaca Langkah pertama dalam pembuatan objek 2 dimensi Gatotkaca adalah dengan menggunakan Pen Tool atau bisa juga dengan menekan tombol p. Kemudian ditarik garis demi garis dengan titik sudut yang ditentukan sendiri sesuai dengan sketsa yang telah dibuat. Hasil dari pembuatan objek 2 dimensi ditunjukkan pada Gambar 4.5 Gambar 4.5 Pembuatan Objek 2 Dimensi Gatotkaca b. Pembuatan Objek 2 Dimensi dan Animasi Objek 2 : Tetuka Langkah pertama dalam pembuatan objek Tetuka dengan menggunakan Pen Tool atau bisa juga dengan menekan tombol P. Kemudian ditarik garis demi garis dengan titik sudut yang ditentukan sendiri sesuai dengan sketsa yang telah dibuat. Pada Pen Tool dapat menambahkan atau menghapus titik pada objek yang dibuat. Objek yang telah jadi kemudian diberi warna dengan Paint Bucket Tool atau menekan tombok K. Tentukan dulu warna yang diinginkan dengan Fill Color, dan juga dapat diberi garis tepi dengan Stroke Color. Hasil dari pembuatan objek Bima ditunjukkan pada Gambar 4.6

5 digilib.uns.ac.id 35 Gambar 4.6 Pembuatan Objek 2 Dimensi Tetuka c. Pembuatan Objek 2 Dimensi dan Animasi Objek 3 : Bima (Werkudara) Langkah pertama dalam pembuatan objek Bima atau Werkudara dengan menggunakan Pen Tool atau bisa juga dengan menekan tombol P. Kemudian ditarik garis demi garis dengan titik sudut yang ditentukan sendiri sesuai dengan sketsa yang telah dibuat. Pada Pen Tool dapat menambahkan atau menghapus titik pada objek yang dibuat. Objek yang telah jadi kemudian diberi warna dengan Paint Bucket Tool atau menekan tombok K. Tentukan dulu warna yang diinginkan dengan Fill Color, dan juga dapat diberi garis tepi dengan Stroke Color. Hasil dari pembuatan objek Bima ditunjukkan pada Gambar 4.7

6 digilib.uns.ac.id 36 Gambar 4.7 Pembuatan Objek 2 Dimensi Bima d. Pembuatan Objek 2 Dimensi dan Animasi Objek 4 : Dewi Arimbi Selanjutnya adalah pembuatan Objek Dewi Arimbi langkah yang dilakukan sama dengan pembuatan objek Bima yaitu dengan menggunakan Pen Tools atau bisa juga dengan menekan tombol P. Kemudian ditarik garis demi garis dengan titik sudut yang ditentukan sendiri sesuai dengan sketsa yang telah dibuat. Pada Pen Tool dapat menambahkan atau menghapus titik pada objek yang dibuat. Objek yang telah jadi kemudian diberi warna dengan Paint Bucket Tool atau menekan tombok K. Tentukan dulu warna yang diinginkan dengan Fill Color, dan juga dapat diberi garis tepi dengan Stroke Color. Hasil dari pembuatan objek Dewi Arimbi ditunjukkan pada Gambar 4.8

7 digilib.uns.ac.id 37 Gambar 4.8 Pembuatan Objek 2 Dimensi Dewi Arimbi e. Pembuatan Objek 2 Dimensi dan Animasi Objek 5 : Begawan Abiyasa Langkah pertama dalam pembuatan objek Begawan Abiyasa dengan menggunakan Pen Tool atau bisa juga dengan menekan tombol P. Kemudian ditarik garis demi garis dengan titik sudut yang ditentukan sendiri sesuai dengan sketsa yang telah dibuat. Pada Pen Tool dapat menambahkan atau menghapus titik pada objek yang dibuat. Objek yang telah jadi kemudian diberi warna dengan Paint Bucket Tool atau menekan tombok K. Tentukan dulu warna yang diinginkan dengan Fill Color, dan juga dapat diberi garis tepi dengan Stroke Color. Hasil dari pembuatan objek Bima ditunjukkan pada Gambar 4.9

8 digilib.uns.ac.id 38 Gambar 4.9 Pembuatan Objek 2 Dimensi Begawan Abiyasa f. Pembuatan Objek 2 Dimensi dan Animasi Objek 6 : Arjuna Langkah pertama dalam pembuatan objek Arjuna dengan menggunakan Pen Tool atau bisa juga dengan menekan tombol P. Kemudian ditarik garis demi garis dengan titik sudut yang ditentukan sendiri sesuai dengan sketsa yang telah dibuat. Pada Pen Tool dapat menambahkan atau menghapus titik pada objek yang dibuat. Objek yang telah jadi kemudian diberi warna dengan Paint Bucket Tool atau menekan tombok K. Tentukan dulu warna yang diinginkan dengan Fill Color, dan juga dapat diberi garis tepi dengan Stroke Color. Hasil dari pembuatan objek Bima ditunjukkan pada Gambar 4.10

9 digilib.uns.ac.id 39 Gambar 4.10 Pembuatan Objek 2 Dimensi Arjuna g. Pembuatan Objek 2 Dimensi dan Animasi Objek 7 : Batara Guru Langkah pertama dalam pembuatan objek Batara Guru dengan menggunakan Pen Tool atau bisa juga dengan menekan tombol P. Kemudian ditarik garis demi garis dengan titik sudut yang ditentukan sendiri sesuai dengan sketsa yang telah dibuat. Pada Pen Tool dapat menambahkan atau menghapus titik pada objek yang dibuat. Objek yang telah jadi kemudian diberi warna dengan Paint Bucket Tool atau menekan tombok K. Tentukan dulu warna yang diinginkan dengan Fill Color, dan juga dapat diberi garis tepi dengan Stroke Color. Hasil dari pembuatan objek Bima ditunjukkan pada Gambar 4.11

10 digilib.uns.ac.id 40 Gambar 4.11 Pembuatan Objek 2 Dimensi Batara Guru h. Pembuatan Objek 2 Dimensi dan Animasi Objek 8 : Batara Narada Langkah pertama dalam pembuatan objek Batara Narada dengan menggunakan Pen Tool atau bisa juga dengan menekan tombol P. Kemudian ditarik garis demi garis dengan titik sudut yang ditentukan sendiri sesuai dengan sketsa yang telah dibuat. Pada Pen Tool dapat menambahkan atau menghapus titik pada objek yang dibuat. Objek yang telah jadi kemudian diberi warna dengan Paint Bucket Tool atau menekan tombok K. Tentukan dulu warna yang diinginkan dengan Fill Color, dan juga dapat diberi garis tepi dengan Stroke Color. Hasil dari pembuatan objek Bima ditunjukkan pada Gambar 4.12

11 digilib.uns.ac.id 41 Gambar 4.12 Pembuatan Objek 2 Dimensi Batara Narada i. Pembuatan Objek 2 Dimensi dan Animasi Objek 9 : Punakawan (Semar) Langkah pertama dalam pembuatan objek Semar dengan menggunakan Pen Tool atau bisa juga dengan menekan tombol P. Kemudian ditarik garis demi garis dengan titik sudut yang ditentukan sendiri sesuai dengan sketsa yang telah dibuat. Pada Pen Tool dapat menambahkan atau menghapus titik pada objek yang dibuat. Objek yang telah jadi kemudian diberi warna dengan Paint Bucket Tool atau menekan tombok K. Tentukan dulu warna yang diinginkan dengan Fill Color, dan juga dapat diberi garis tepi dengan Stroke Color. Hasil dari pembuatan objek Bima ditunjukkan pada Gambar 4.13

12 digilib.uns.ac.id 42 Gambar 4.13 Pembuatan Objek 2 Dimensi Semar j. Pembuatan Objek 2 Dimensi dan Animasi Objek 10 : Punakawan (Gareng) Langkah pertama dalam pembuatan objek Gareng dengan menggunakan Pen Tool atau bisa juga dengan menekan tombol P. Kemudian ditarik garis demi garis dengan titik sudut yang ditentukan sendiri sesuai dengan sketsa yang telah dibuat. Pada Pen Tool dapat menambahkan atau menghapus titik pada objek yang dibuat. Objek yang telah jadi kemudian diberi warna dengan Paint Bucket Tool atau menekan tombok K. Tentukan dulu warna yang diinginkan dengan Fill Color, dan juga dapat diberi garis tepi dengan Stroke Color. Hasil dari pembuatan objek Bima ditunjukkan pada Gambar 4.14

13 digilib.uns.ac.id 43 Gambar 4.14 Pembuatan Objek 2 Dimensi Gareng k. Pembuatan Objek 2 Dimensi dan Animasi Objek 11 : Punakawan (Petruk) Langkah pertama dalam pembuatan objek Petruk dengan menggunakan Pen Tool atau bisa juga dengan menekan tombol P. Kemudian ditarik garis demi garis dengan titik sudut yang ditentukan sendiri sesuai dengan sketsa yang telah dibuat. Pada Pen Tool dapat menambahkan atau menghapus titik pada objek yang dibuat. Objek yang telah jadi kemudian diberi warna dengan Paint Bucket Tool atau menekan tombok K. Tentukan dulu warna yang diinginkan dengan Fill Color, dan juga dapat diberi garis tepi dengan Stroke Color. Hasil dari pembuatan objek Bima ditunjukkan pada Gambar 4.15

14 digilib.uns.ac.id 44 Gambar 4.15 Pembuatan Objek 2 Dimensi Petruk l. Pembuatan Objek 2 Dimensi dan Animasi Objek 12 : Punakawan (Bagong) Langkah pertama dalam pembuatan objek Bagong dengan menggunakan Pen Tool atau bisa juga dengan menekan tombol P. Kemudian ditarik garis demi garis dengan titik sudut yang ditentukan sendiri sesuai dengan sketsa yang telah dibuat. Pada Pen Tool dapat menambahkan atau menghapus titik pada objek yang dibuat. Objek yang telah jadi kemudian diberi warna dengan Paint Bucket Tool atau menekan tombok K. Tentukan dulu warna yang diinginkan dengan Fill Color, dan juga dapat diberi garis tepi dengan Stroke Color. Hasil dari pembuatan objek Bima ditunjukkan pada Gambar 4.16

15 digilib.uns.ac.id 45 Gambar 4.16 Pembuatan Objek 2 Dimensi Bagong m. Pembuatan Objek 2 Dimensi dan Animasi Objek 13 : Dewi Supraba Langkah pertama dalam pembuatan objek Dewi Supraba dengan menggunakan Pen Tool atau bisa juga dengan menekan tombol P. Kemudian ditarik garis demi garis dengan titik sudut yang ditentukan sendiri sesuai dengan sketsa yang telah dibuat. Pada Pen Tool dapat menambahkan atau menghapus titik pada objek yang dibuat. Objek yang telah jadi kemudian diberi warna dengan Paint Bucket Tool atau menekan tombok K. Tentukan dulu warna yang diinginkan dengan Fill Color, dan juga dapat diberi garis tepi dengan Stroke Color. Hasil dari pembuatan objek Bima ditunjukkan pada Gambar 4.17

16 digilib.uns.ac.id 46 Gambar 4.17 Pembuatan Objek 2 Dimensi Dewi Supraba n. Pembuatan Objek 2 Dimensi dan Animasi Objek 14 : Aradeya Langkah pertama dalam pembuatan objek Aradeya dengan menggunakan Pen Tool atau bisa juga dengan menekan tombol P. Kemudian ditarik garis demi garis dengan titik sudut yang ditentukan sendiri sesuai dengan sketsa yang telah dibuat. Pada Pen Tool dapat menambahkan atau menghapus titik pada objek yang dibuat. Objek yang telah jadi kemudian diberi warna dengan Paint Bucket Tool atau menekan tombok K. Tentukan dulu warna yang diinginkan dengan Fill Color, dan juga dapat diberi garis tepi dengan Stroke Color. Hasil dari pembuatan objek Bima ditunjukkan pada Gambar 4.18

17 digilib.uns.ac.id 47 Gambar 4.18 Pembuatan Objek 2 Dimensi Aradeya o. Pembuatan Objek 2 Dimensi dan Animasi Objek 15 : Kalapracona Langkah pertama dalam pembuatan objek Kalapracona dengan menggunakan Pen Tool atau bisa juga dengan menekan tombol P. Kemudian ditarik garis demi garis dengan titik sudut yang ditentukan sendiri sesuai dengan sketsa yang telah dibuat. Pada Pen Tool dapat menambahkan atau menghapus titik pada objek yang dibuat. Objek yang telah jadi kemudian diberi warna dengan Paint Bucket Tool atau menekan tombok K. Tentukan dulu warna yang diinginkan dengan Fill Color, dan juga dapat diberi garis tepi dengan Stroke Color. Hasil dari pembuatan objek Bima ditunjukkan pada Gambar 4.19

18 digilib.uns.ac.id 48 Gambar 4.19 Pembuatan Objek 2 Dimensi Kalapracona Objek 2 dimensi sudah selesai dibuat, selanjutnya memberi animasi sederhana pada objek tersebut misalnya pergerakan tangan, berjalan, menggelengkan kepala dan lain-lain. Animasi yang digunakan adalah Frame by Frame, Motion Tween dan Shape Tween. Setelah animasi selesai, selanjutnya memberi background, backsound dan teks. Untuk memberi background, backsound dan teks masing-masing dibuat layer. Untuk backsound, import to library terlebih dahulu Pengeksportan Objek 2 Dimensi Objek 2 dimensi yang telah selesai dibuat dieksport menjadi video dalam format.swf. Hasil dari proses eksport inilah yang akan dijadikan dasar dalam pembuatan aplikasi Augmented Reality. Pada Adobe Flash CS5 pengeksportan dengan cara menekan Ctrl + Enter.

19 digilib.uns.ac.id 49 Gambar 4.20 Hasil Pengeksportan Objek Arjuna dan Aradeya Pembuatan Interface 1. Pembuatan Interface Aplikasi Pembuatan interface aplikasi juga dibuat dengan Adobe Flash CS5 dan beberapa software pendukung seperti Adobe Photoshop CS5. Gambar 4.21 Interface Aplikasi

20 digilib.uns.ac.id 50 Antarmuka aplikasi tersebut dibuat dengan Adobe Flash CS5 termasuk Button dan Objek Gatotkaca yang diberi animasi Motion Tween. Terdiri dari beberapa frame dan terdapat menu-menu seperti Play, Info, Help dan Exit. Pembuatan Interface pada Adobe Flash CS5 menggunakan ActionScript 2.0. Gambar 4.22 Pembuatan Antarmuka Aplikasi a. Pembuatan Menu Play Didalam menu Play inilah yang nantinya akan ditampilkan Objek 2 dimensi dari scan marker hasil olahan Openspace. Script yang digunakan dalam menu Play adalah : Pada saat diklik button Play maka semua Sound akan berhenti dan menuju ke frame 251. Frame 251 ditunjukkan pada Gambar 4.22

21 digilib.uns.ac.id 51 Gambar 4.23 Pembuatan Menu Play Untuk tombol back, script yang digunakan sama, hanya diframe berapa yang berbeda. Scriptnya adalah sebagai berikut : Jika button back halaman sebelumnya. diklik maka akan kembali ke frame 248 atau b. Pembuatan Menu Info Didalam menu Info terdapat informasi tentang Gatotkaca. Script yang terdapat di menu Info adalah sebagai berikut : Script tersebut menjelaskan jika tombol Info diklik maka akan menuju ke halaman Info yaitu di frame 252. Frame 252 ditunjukkan pada Gambar 4.23.

22 digilib.uns.ac.id 52 Gambar 4.24 Pembuatan Menu Info Untuk tombol back, script yang digunakan sama, hanya diframe berapa yang berbeda. Scriptnya adalah sebagai berikut : Jika button back diklik maka akan kembali ke frame 248 atau halaman sebelumnya. Didalam Menu Info terdapat menu Tokoh yaitu terdiri dari tokohtokoh yang berperan dalam cerita Gatotkaca Lahir. Script yang terdapat di menu Tokoh adalah sebagai berikut : Script tersebut menjelaskan jika tombol menu Tokoh diklik maka akan menuju ke halaman Tokoh yaitu di frame 254. Frame 254 ditunjukkan pada Gambar 4.24.

23 digilib.uns.ac.id 53 Gambar 4.25 Contoh Menu Tokoh Didalam menu tokoh terdapat tombol Next dan Previous. Scriptnya adalah sebagai berikut : - Script tombol Previous Jika button previous diklik maka akan kembali ke frame 261 atau halaman sebelumnya - Script tombol Next Jika button next halaman berikutnya diklik maka akan menuju ke frame 263 atau c. Pembuatan Menu Help Pada pembuatan menu Help yaitu pada content menggunakan Adobe Photoshop CS5 yang kemudian dieksport menjadi.png dan diimport kedalam Adobe Flash CS5. Untuk scriptnya yaitu :

24 digilib.uns.ac.id 54 Script tersebut menjelaskan jika tombol menu Help diklik maka akan menuju ke halaman Help yaitu di frame 253. Frame 253 ditunjukkan pada Gambar Gambar 4.26 Pembuatan Menu Help d. Pembuatan Menu Exit Pada menu Exit, script yang digunakan adalah : Script tersebut menjelaskan jika tombol Exit berhenti, dan Flash Interface akan hilang. diklik maka Sound akan

25 digilib.uns.ac.id Pembuatan Interface Buku Cerita (Marker) Pembuatan interface buku cerita atau marker ini menggunakan Adobe Photoshop CS. Beberapa contoh pembuatan interface bukucerita adalah sebagai berikut : Gambar 4.27 PembuatanInterface Buku Cerita atau Marker 104 Gambar 4.28 PembuatanInterface Buku Cerita atau Marker 108

26 digilib.uns.ac.id 56 Gambar 4.29 PembuatanInterface Buku Cerita atau Marker Pembuatan Aplikasi Augmented Reality Pembuatan Augmented Reality menggunakan OpenSpace 3D Editor diawali dengan membuat sebuah skema pada scene yang terdiri dari PlugIT AR Capture dan PlugIT AR Marker. PlugIT pertama yang harus ada untuk setiap pembuatan aplikasi berbasis Augmented Reality adalah AR Capture, fungsi dari PlugIT AR Capture adalah untuk mengaktifkan penggunaan kamera saat aplikasi dijalankan. PlugIT berikutnya adalah AR Marker, fungsi dari PlugIT AR Marker adalah untuk menghubungkan marker dengan objek yang telah diimport. Selanjutnya adalah memasukkan obyek 2 dimensi yang dibuat dengan Adobe Flash CS5 dengan ekstensi *.swf dengan menggunakan Flash Interface. PlugIT Marker akan dihubungkan dengan Flash Interface dengan cara klik kanan pada PlugIT AR Marker pilih Found, dan klik kanan pada Flash Interface pilih Create, klik kanan lagi pada PlugIT AR Marker pilih Found, dan klik kanan pada Flash Interface pilih Show. Mekanisme dari menghubungkan dua PlugIT tersebut adalah pada saat aplikasi dijalankan dan marker terdeteksi (Found) oleh webcam, maka Flash Interface tersebut akan ditampilkan (Create & Show)

27 digilib.uns.ac.id 57 Langkah awal dalam pembuatan projct adalah pilih New kemudian secara otomatis masuk ke Windows Scene. Tampilannya adalah sebagai berikut : Gambar 4.30 Tampilan Windows Scene Openspace3D Komponen dalam Pembuatan Aplikasi Dalam pembuatan aplikasi Augmented Reality menggunakan Openspace 3D Editor, obyek akan tersimpan pada Resources Directories. Berikut merupakan tabel yang berisi daftar File yang digunakan dalam pembuatan aplikasi Augmented Reality ini : Tabel 4.1 Daftar Komponen Yang digunakan dalam Pembuatan Aplikasi No Resources Directories Nama File Keterangan 1 Gatotkaca/ gatotkaca.xos File hasil akhir pembuatan Augmented Reality File swf movie hasil dari pembuatan 1.swf obyek 2 dimensi yang digunakan untuk scene 1 yaitu lahirnya Jabang Tetuka. File swf movie hasil dari pembuatan 2.swf obyek 2 dimensi yang digunakan untuk commit scene to user 2 yaitu Begawan Abiyasa.

28 digilib.uns.ac.id 58 3.swf 4.swf 5.swf 6.swf 7.swf 8.swf 9.swf 10.swf File swf movie hasil dari pembuatan obyek 2 dimensi yang digunakan untuk scene 3 yaitu Begawan Abiyasa dan Arjuna. File swf movie hasil dari pembuatan obyek 2 dimensi yang digunakan untuk scene 4 yaitu Arjuna pergi ke Kahyangan. File swf movie hasil dari pembuatan obyek 2 dimensi yang digunakan untuk scene 5 yaitu Kalapracona menyerang Kahyangan. File swf movie hasil dari pembuatan obyek 2 dimensi yang digunakan untuk scene 6 yaitu Kalapracona ingin memperistri Dewi Supraba. File swf movie hasil dari pembuatan obyek 2 dimensi yang digunakan untuk scene 7 yaitu Batara Guru. File swf movie hasil dari pembuatan obyek 2 dimensi yang digunakan untuk scene 8 yaitu Batara Narada menyerahkan senjata ke Aradeya. File swf movie hasil dari pembuatan obyek 2 dimensi yang digunakan untuk scene 9 yaitu Arjuna perang tanding dengan Aradeya. File swf movie hasil dari pembuatan obyek 2 dimensi yang digunakan untuk scene 10 yaitu Arjuna kembali ke Pringgondani.

29 digilib.uns.ac.id 59 2 Marker/ File swf movie hasil dari pembuatan 11.swf obyek 2 dimensi yang digunakan untuk scene 11 yaitu Arjuna dan Punakawan membawa Tetuka ke Kahyangan. File swf movie hasil dari pembuatan 12.swf obyek 2 dimensi yang digunakan untuk scene 12 yaitu Kalapracona dan Tetuka. File swf movie hasil dari pembuatan 13.swf obyek 2 dimensi yang digunakan untuk scene 13 yaitu Tetuka melukai Kalapracona. File swf movie hasil dari pembuatan 14.swf obyek 2 dimensi yang digunakan untuk scene 14 yaitu Kalapracona membanting Tetuka hingga mati. File swf movie hasil dari pembuatan 15.swf obyek 2 dimensi yang digunakan untuk scene 15 yaitu Tetuka digodog di Kawah Candradimuka. File swf movie hasil dari pembuatan 16.swf obyek 2 dimensi yang digunakan untuk scene 16 yaitu Gatotkaca melawan Tetuka. File swf movie hasil dari pembuatan splash.swf obyek 2 dimensi yang digunakan untuk splash screen dan awal tampilan aplikasi. File gambar marker yang digunakan marker_101.bmp untuk menampilkan scene 1 yaitu lahirnya Jabang Tetuka. marker_102.bmp File gambar marker yang digunakan

30 digilib.uns.ac.id 60 untuk menampilkan scene 2 yaitu Begawan Abiyasa. File gambar marker yang digunakan marker_103.bmp untuk menampilkan scene 3 yaitu Begawan Abiyasa dan Arjuna File gambar marker yang digunakan marker_104.bmp untuk menampilkan scene 4 yaitu Arjuna pergi ke Kahyangan. File gambar marker yang digunakan marker_105.bmp untuk menampilkan scene 5 yaitu Kalapracona menyerang Kahyangan. File gambar marker yang digunakan untuk menampilkan scene 6 yaitu marker_106.bmp Kalapracona ingin memperistri Dewi Supraba File gambar marker yang digunakan marker_107.bmp untuk menampilkan scene 7 yaitu Batara Guru. File gambar marker yang digunakan marker_108.bmp untuk menampilkan scene 8 yaitu Batara Narada menyerahkan senjata ke Aradeya. File gambar marker yang digunakan marker_109.bmp untuk menampilkan scene 9 yaitu Arjuna perang tanding dengan Aradeya. File gambar marker yang digunakan marker_110.bmp untuk menampilkan scene 10 yaitu Arjuna kembali ke Pringgondani. File gambar marker yang digunakan marker_111.bmp untuk menampilkan scene 11 yaitu Arjuna dan Punakawan membawa Tetuka

31 digilib.uns.ac.id 61 3 example/ media/ mesh 4 example/ media/ bitmap 5 example/ media/ material marker_112.bmp marker_113.bmp marker_114.bmp marker_115.bmp marker_116.bmp Plane01.mesh tele.jpg helico.material ke Kahyangan. File gambar marker yang digunakan untuk menampilkan scene 12 yaitu Kalapracona dan Tetuka. File gambar marker yang digunakan untuk menampilkan scene 13 yaitu Tetuka melukai Kalapracona. File gambar marker yang digunakan untuk menampilkan scene 14 yaitu Kalapracona membanting Tetuka hingga mati. File gambar marker yang digunakan untuk menampilkan scene 15 yaitu Tetuka digodog di Kawah Candradimuka. File gambar marker yang digunakan untuk menampilkan scene 16 yaitu Gatotkaca melawan Tetuka. Obyek 3 dimensi yang digunakan sebagai wadah untuk menempatkan Flash Interface File gambar untuk gambar obyek 3 dimensi yang digunakan sebagai wadah untuk menempatkan Flash Interface Material yang digunakan pada Obyek 3 dimensi yang digunakan sebagai wadah untuk menempatkan Flash Interface

32 digilib.uns.ac.id Menghubungkan Marker dengan Obyek Untuk menghubungkan marker dengan obyek 2 dimensi, diperlukan PlugIT AR Marker yaitu dengan klik kanan pada Scene pilih Input lalu AR Marker. Pada bagian Marker Setting, terdapat pilihan Marker Id. Marker id yang tersedia mulai dari Pilih Marker Id yang diinginkan untuk dihubungkan dengan obyek. Didalam OpenSpace terdapat 2 pilihan untuk marker, yaitu bisa memakai fiducial marker atau bisa juga dengan markerless. Namun penggunaan markerless akan kurang efektif bila dukungan spesifikasi PC dan Webcam kurang optimal. Kemudian untuk Object Setting, tentukan obyek mana yang akan dihubungkan. Berikut ini tampilan Marker Setting : Gambar 4.31 Tampilan Marker Setting Kemudian untuk menghubungkannya dengan obyek, buat PlugIT Flash Interface dengan cara klik kanan pada Scene pilih Interface lalu Flash Interface. Pada Material Setting, pilih material yang digunakan. Pada File Setting masukkan Flash Interface yang berekstensi *.swf, tentukan ukuran dan posisinya. Berikut ini tampilannnya :

33 digilib.uns.ac.id 63 Gambar 4.32 Tampilan Edit Flash Interface PlugIT AR Marker akan dihubungkan dengan Flash Interface dengan cara klik kanan pada PlugIT AR Marker pilih Found, dan klik kanan pada Flash Interface pilih Create, klik kanan lagi pada PlugIT AR Marker pilih Found, dan klik kanan pada Flash Interface pilih Show. Mekanisme dari menghubungkan dua PlugIT tersebut adalah pada saat aplikasi dijalankan dan marker terdeteksi (Found) oleh webcam, maka Flash Interface tersebut akan ditampilkan (Create & Show)

34 digilib.uns.ac.id PlugIT pada OpenSpace 3D Editor PlugIT pada OpenSpace digunakan sebagai pengganti implementasi dari scripting. PlugIT digunakan untuk pembuatan antarmuka seperti Flash Interface, penggunaan marker, dan penggunaan mouse. Untuk Flash Interface, penggunaan PlugIT ditambahkan pada pembuatan antarmuka dan konten yang berekstensi *.swf. PlugIT pada OpenSpace 3D Editor ditunjukkan pada Gambar 4.33 Gambar 4.33 PlugIT pada OpenSpace 3D Editor Pembuatan aplikasi Augmented Reality dengan menggunakan OpenSpace dimulai dengan mengkoneksikan aplikasi dengan webcam yaitu menggunakan AR Capture plugit, kemudian mengendalikan objek dengan marker menggunakan AR Marker plugit dan mengatur relasi plugit. 4.3 Pengujian Aplikasi Tampilan Awal Aplikasi Pada tampilan awal aplikasi ini terdapat menu Play, menu Info, menu Help dan Menu Exit. Tampilan awal aplikasi ditunjukkan pada Gambar 4.34

35 digilib.uns.ac.id 65 Gambar 4.34 Tampilan Awal Aplikasi Pada saat menu Play diklik maka kamera webcam akan aktif dan jika marker di scan akan muncul objek 2 dimensi dari cerita Gatotkaca Lahir. Hasilnya adalah sebagai berikut : Tampilan Halaman 1 (Bima dan Dewi Arimbi) Pada halaman ini menjelaskan tentang lahirnya Gatotkaca (Tetuka) dengan ari-ari yang masih menempel karena tidak ada senjata yang berhasil memotongnya. Tampilan halaman 1 ditunjukkan pada Gambar 4.35 Gambar 4.35 Tampilan commit Halaman to user 1 (Bima dan Dewi Arimbi)

36 digilib.uns.ac.id Tampilan Halaman 2 (Begawan Abiyasa) Pada halaman ini menjelaskan tentang kakek Tetuka yaitu Begawan Abiyasa datang dan mengatakan bahwa yang dapat memotong ari-ari Tetuka hanyalah senjata kadewatan yang berasal dari Batara Guru. Tampilan halaman 2 ditunjukkan pada Gambar 4.36 Gambar 4.36 Tampilan Halaman 2 (Begawan Abiyasa) Tampilan Halaman 3 (Begawan Abiyasa dan Arjuna) Pada halaman ini menjelaskan tentang Begawan Abiyasa yang memerintahkan Arjuna ke Kahyangan untuk mencari senjata kadewatan. Tampilan halaman 3 ditunjukkan pada Gambar 4.37

37 digilib.uns.ac.id 67 Gambar 4.37 Tampilan Halaman 3 (Begawan Abiyasa dan Arjuna) Tampilan Halaman 4 (Arjuna) Pada halaman ini menjelaskan tentang perjalanan Arjuna ke Kahyangan. Tampilan halaman 4 ditunjukkan pada Gambar 4.38 Gambar 4.38 Tampilan Halaman 4 (Arjuna)

38 digilib.uns.ac.id Tampilan Halaman 5 (Kalapracona) Pada halaman ini menjelaskan tentang keadaan di Kahyangan yang sedang gonjang-ganjing karena serangan Kalapracona. Tampilan halaman 5 ditunjukkan pada Gambar 4.39 Gambar 4.39 Tampilan Halaman 5 (Kalapracona) Tampilan Halaman 6 (Kalapracona dan Dewi Supraba) Pada halaman ini menjelaskan tentang Kalapracona yang ingin memperistri salah satu bidadari yang bernama Dewi Supraba. Tampilan halaman 6 ditunjukkan pada Gambar 4.40 Gambar 4.40 Tampilan Halaman commit 6 to (Kalapracona user dan Dewi Supraba)

39 digilib.uns.ac.id Tampilan Halaman 7 (Batara Guru) Pada halaman ini menjelaskan tentang Batara Guru yang memerintahkan Batara Narada menyerahkan senjata ke Arjuna untuk memotong ari-ari Tetuka. Karena hanya Tetuka yang dapat mengalahkan Kalapracona. Tampilan halaman 7 ditunjukkan pada Gambar 4.41 Gambar 4.41 Tampilan Halaman 7 (Batara Guru) Tampilan Halaman 8 (Aradeya dan Batara Narada) Pada halaman ini menjelaskan tentang Batara Narada yang mencari Arjuna, namun dia bertemu Aradeya dan menyerahkan senjata tersebut ke Aradeya karena Aradeya disangka Arjuna. Tampilan halaman 8 ditunjukkan pada Gambar 4.42

40 digilib.uns.ac.id 70 Gambar 4.42 Tampilan Halaman 8 (Aradeya dan Batara Narada) Tampilan Halaman 9 (Aradeya dan Arjuna) Pada halaman ini menjelaskan tentang Arjuna yang perang tanding dengan Aradeya memperebutkan senjata kadewatan dari Batara Guru. Tampilan halaman 9 ditunjukkan pada Gambar 4.43 Gambar 4.43 Tampilan Halaman 9 (Aradeya dan Arjuna)

41 digilib.uns.ac.id Tampilan Halaman 10 (Arjuna, Bima dan Dewi Arimbi) Pada halaman ini menjelaskan tentang Arjuna yang berhasil merebut senjata kadewatan dan kembali ke Pringgondani untuk memotong ari-ari Tetuka dan membawanya ke Kahyangan. Tampilan halaman 10 ditunjukkan pada Gambar 4.44 Gambar 4.44 Tampilan Halaman 10 Arjuna, Bima dan Dewi Arimbi) Tampilan Halaman 11 (Arjuna dan Punakawan) Pada halaman ini menjelaskan tentang Arjuna dan Punakawan dalam perjalanannya ke Kahyangan membawa Tetuka. Tampilan halaman 11 ditunjukkan pada Gambar 4.45 Gambar 4.45 Tampilan commit Halaman to user 11 (Arjuna dan Punakawan)

42 digilib.uns.ac.id Tampilan Halaman 12 (Kalapracona dan Tetuka) Pada halaman ini menjelaskan tentang Kalapracona yang melihat Tetuka di tengah jalan. Tampilan halaman 12 ditunjukkan pada Gambar 4.46 Gambar 4.46 Tampilan Halaman 12 (Kalapracona dan Tetuka) Tampilan Halaman 13 (Tetuka) Pada halaman ini menjelaskan tentang Tetuka yang tiba-tiba mengayunkan tangan dan berhasil melukai Kalapracona. Tampilan halaman 13 ditunjukkan pada Gambar 4.47 Gambar 4.47 Tampilan Halaman 13 (Tetuka)

43 digilib.uns.ac.id Tampilan Halaman 14 (Kalapracona dan Tetuka) Pada halaman ini menjelaskan tentang Kalapracona yang marah dan kemudian membanting Tetuka hingga mati. Tampilan halaman 14 ditunjukkan pada Gambar 4.48 Gambar 4.48 Tampilan Halaman 14 (Kalapracona dan Tetuka) Tampilan Halaman 15 (Batara Guru dan Batara Narada) Pada halaman ini menjelaskan tentang Semar yang berbisik padabatara Guru untuk segera menggodok Tetuka di Kawah Candradimuka. Tampilan halaman 15 ditunjukkan pada Gambar 4.49 Gambar 4.49 Tampilan Halaman 15 (Batara Guru dan Batara Narada)

44 digilib.uns.ac.id Tampilan Halaman 15 (Gatotkaca) Pada halaman ini menjelaskan tentang Tetuka yang gagah keluar dari kawah Candradimuka menjadi Gatotkaca. Tampilan halaman 15 ditunjukkan pada Gambar 4.50 Gambar 4.50 Tampilan Halaman 15 (Gatotkaca) Tampilan Halaman 16 (Kalapracona dan Gatotkaca) Pada halaman ini menjelaskan tentang Gatotkaca yang kembali bertarung dengan Kalapracona dan berhasil memenangkan pertarungan dan membawa kedamaian di Kahyangan. Tampilan halaman 16 ditunjukkan pada Gambar 4.51 Gambar 4.51 Tampilan Halaman commit to 16 user (Kalapracona dan Gatotkaca)

45 digilib.uns.ac.id Tampilan Halaman 16 (Gatotkaca) Pada halaman ini menjelaskan tentang Gatotkaca berhasil memenangkan pertarungan dan membawa kedamaian di Kahyangan. Tampilan halaman 16 ditunjukkan pada Gambar 4.52 Gambar 4.52 Tampilan Halaman 16 (Gatotkaca) Tampilan Halaman Info Pada halaman ini berisi tentang informasi mengenai siapakah Gatotkaca, dan juga terdapat tokoh-tokoh yang ada di dalam cerita Gatotkaca Lahir. Tampilan halaman Info ditunjukkan pada Gambar 4.53

46 digilib.uns.ac.id 76 Gambar 4.53 Tampilan Halaman Info Tampilan Halaman Tokoh (Gatotkaca) Pada halaman ini berisi tentang Gatotkaca. Tampilan halaman Gatotkaca ditunjukkan pada Gambar 4.54 Gambar 4.54 Tampilan Halaman Tokoh (Gatotkaca)

47 digilib.uns.ac.id Tampilan Halaman Tokoh (Bima) Pada halaman ini berisi tentang Bima. Tampilan halaman Bima ditunjukkan pada Gambar 4.55 Gambar 4.55 Tampilan Halaman Tokoh (Bima) Tampilan Halaman Tokoh (Dewi Arimbi) Pada halaman ini berisi tentang Dewi Arimbi. Tampilan halaman Dewi Arimbi ditunjukkan pada Gambar 4.56 Gambar 4.56 Tampilan commit Halaman to user Tokoh (Dewi Arimbi)

48 digilib.uns.ac.id Tampilan Halaman Tokoh (Begawan Abiyasa) Pada halaman ini berisi tentang Begawan Abiyasa. Tampilan halaman Begawan Abiyasa ditunjukkan pada Gambar 4.57 Gambar 4.57 Tampilan Halaman Tokoh (Begawan Abiyasa) Tampilan Halaman Tokoh (Kalapracona) Pada halaman ini berisi tentang Kalapracona. Tampilan halaman Kalapracona ditunjukkan pada Gambar 4.58 Gambar 4.58 Tampilan commit Halaman to user Tokoh (Kalapracona)

49 digilib.uns.ac.id Tampilan Halaman Tokoh (Batara Guru) Pada halaman ini berisi tentang Batara Guru. Tampilan halaman Batara Guru ditunjukkan pada Gambar 4.59 Gambar 4.59 Tampilan Halaman Tokoh (Batara Guru) Tampilan Halaman Tokoh (Batara Narada) Pada halaman ini berisi tentang Batara Narada. Tampilan halaman Batara Narada ditunjukkan pada Gambar 4.60 Gambar 4.60 Tampilan Halaman Tokoh (Batara Narada)

50 digilib.uns.ac.id Tampilan Halaman Tokoh (Arjuna) Pada halaman ini berisi tentang Arjuna. Tampilan halaman Arjuna ditunjukkan pada Gambar 4.61 Gambar 4.61 Tampilan Halaman Tokoh (Arjuna) Tampilan Halaman Tokoh (Punakawan) Pada halaman ini berisi tentang Punakawan. Tampilan halaman Batara Narada ditunjukkan pada Gambar 4.62 Gambar 4.62 Tampilan Halaman Tokoh (Punakawan)

51 digilib.uns.ac.id Tampilan Halaman Tokoh (Dewi Supraba) Pada halaman ini berisi tentang Dewi Supraba. Tampilan halaman Dewi Supraba ditunjukkan pada Gambar 4.63 Gambar 4.63 Tampilan Halaman Tokoh (Dewi Supraba) Tampilan Halaman Tokoh (Aradeya) Pada halaman ini berisi tentang Aradeya. Tampilan halaman Aradeya ditunjukkan pada Gambar 4.64 Gambar 4.64 Tampilan Halaman Tokoh (Aradeya)

52 digilib.uns.ac.id Tampilan Halaman Help Pada halaman ini berisi tentang cara menggunakan aplikasi. Tampilan halaman Help ditunjukkan pada Gambar 4.65 Gambar 4.65 Tampilan Halaman Help Tampilan Halaman Exit Pada halaman ini berisi tentang tampilan pada saat aplikasi diclose. Tampilan halaman Exit ditunjukkan pada Gambar 4.66 Gambar 4.66 commit Tampilan to user Halaman Exit

53 digilib.uns.ac.id Kuesioner Pengguna Kuisioner terdiri dari 16 pertanyaan dan terdapat 32 responden yang menjawab kuesioner secara online. Terlebih dahulu kuesioner dibuat dengan menggunakan google form dan dibagikan kepada responden dalam bentuk sebuah link. Link inilah yang nantinya akan diakses oleh responden untuk mengisi kuesioner. Kuesioner ini dibuat untuk mengetahui tanggapan responden mengenai aplikasi Augmented Reality Technology pada Buku Cerita Gatotkaca Lahir Sebagai Media Pembelajaran Anak-Anak. Kuesioner ini terdiri dari 2 aspek yaitu aspek pembelajaran dan aspek interface. Berikut ini grafik dari setiap aspek yang telah dirangkum oleh penulis : Gambar 4.67 Grafik Hasil Kuisioner Aspek Pembelajaran

54 digilib.uns.ac.id 84 Gambar 4.68 Grafik Hasil Kuisioner Aspek Interface Pada aspek pembelajaran dilihat dari segi media pembelajaran, ketertarikan anak-anak untuk mempelajari cerita wayang, dan peningkatan kemampuan berbahasa pada anak-anak. Sedangkan aspek interface dilihat dari segi tampilan aplikasi, skema warna, obyek 2 dimensi, fitur, dan konten. Dari gambar grafik diatas, dihasilkan data yaitu untuk aspek pembelajaran dari 32 responden sebanyak 40% Sangat Setuju, 45% Setuju, 9% Agak Setuju, 1% Agak Tidak Setuju, 0% Tidak Setuju, dan 5% Sangat Tidak Setuju. Untuk aspek interface dari 32 responden sebanyak 24% Sangat Setuju, 61% Setuju, 9% Agak Setuju, 2% Agak Tidak Setuju, 0% Tidak Setuju, dan 4% Sangat Tidak Setuju. Berdasarkan data diatas, penulis dapat menarik kesimpulan bahwa Aplikasi Augmented Reality Gatotkaca Lahir merupakan aplikasi yang memiliki aspek pembelajaran tentang karya sastra yaitu cerita pewayangan dan mempunyai interface yang menarik bagi anak-anak. Adapun hasil secara rinci dan grafik dari kuisioner yang dibagikan terlampir dalam laporan ini.