Konsep Pembuatan Antarmuka Konsep Pembuatan Aplikasi Pembuatan Objek

commit to user

BAB IV IMPLEMENTASI DAN ANALISA

4.1 Gambaran Umum Aplikasi

Aplikasi yang dikembangkan ini merupakan aplikasi yang di desain untuk anak-anak usia 5-12 tahun. Aplikasi multimedia ini diperuntukkan untuk membantu proses pembelajaran sambil bermain supaya anak tidak bosan dengan belajar menggunakan obyek-obyek yang menarik dan animatif untuk meningkatkan semangat belajar anak disamping memperkenalkan mereka dengan komputer. Aplikasi ini terdiri dari 2 bagian utama yaitu : 1. Pembelajaran Pada bagian ini, anak diperkenalkan untuk menjawab soal-soal yang telah diberikan dari mata pelajaran ipa, ips, matematika, bahasa indonesia yang diambil dari pelajaran sekolah dasar dari kelas 3 sampai kelas 6 sekolahan dasar. Tujuan dari bagian ini adalah untuk memberikan kemampuan dasar dalam ilmu pengetahuan yang dimiliki anak. 2. Game Pada bagian ini anak akan diberikan suatu permainan tembak burung untuk merangsang otak anak untuk semangat belajar dan tidak bosan.

4.2 Konsep Pengembangan Aplikasi

4.2.1 Konsep Pembuatan Antarmuka

interface dibuat dengan obyek-obyek yang berkaitan dengan alam seperti pemandangan dan tanaman. Antarmuka atau interface dari aplikasi ini didesain mirip dan sederhana untuk setiap halaman agar menimbulkan suasana yang konsisten. Yang membedakan antara halaman satu dengan halaman yang lainnya adalah isi dan tombol navigasinya. commit to user

4.2.2 Konsep Pembuatan Aplikasi

Aplikasi game tembak burung berisi tentang permainan anak-anak yang di beri pembelajaran dan soal-soal pertanyaan yang menggunakan konsep eduta inment untuk menghindari kebosanan anak. 4.3 Pembuata Aplikasi 4.3.1 Persiapa Awal Langkah awal sebelum membuat aplikasi ini adalah melakukan proses analisa yang meliputi penentuan konsep aplikasi, pendataan obyek yang akan digunakan, penentuan suara atau musik pengiring yang akan digunakan. Obyek yang digunakan dalam aplikasi ini adalah karakter burung dan pemandangan yang di desain semenarik mungkin. Selanjutnya mendesain dan membuat obyek yang telah ditentukan beserta interfa ce ke dalam komputer.

4.3.2 Pembuatan Objek

Objek yang telah ditentukan dari proses analisa diatas, selanjutnya digambar dengan menggunakan Photoshop dan CorelDraw. Dalam proses pembuatan obyek, komponen yang digunakan adalah komponen-komponen yang berada pada panel Tools. Komponen-komponen tersebut adalah sebagai berikut : Tabel 4.1 Komponen untuk menggambar Tombol Fungsi Line Tool Membuat garis lurus Pencil Tool Membuat bentuk bebas Pen Tool Membuat bentuk garis lurus yang saling terhubung Selection Tool Memilih obyek Oval Tool Membuat bentu lingkaran atau oval Rectangle Tool Membuat bentuk kotak commit to user Lanjutan Gambar Tabel 4.1 Free Transform Tool Mengatur ukuran obyek secara bebas Paint Bucket Tool Memberi warna pada bidang obyek Stroke Color Menentukan warna garis Fill Color Memberikan warna dasar Stroke Heigh Menentukan ketebalan garis a. Obyek burung1 Dalam pembuatan obyek 1, masing-masing elemennya dipisahkan dalam layer yang berbeda untuk memudahkan dalam proses penyusunan gambar serta mempermudah dalam proses animasi. Tahap pertama yaitu membuat line untuk membentuk karakter burung menggunakan Brush Tool. Gambar 4.1 Pembuatan Line Pada Karakter Burung 1 Tahap kedua yaitu pemberian efek pada tubuh burung menggunakan Brush Tool dengan pewarnaan yang sesuai dengan warnakarakter burung. commit to user Gambar 4.2 Pembuatan Efek Line Pada Karakter Burung 1 Tahap ketiga dengan melakukan pewarnaan pada karakter burung dengan menggunakan Paint Bucket Tool dan cara memilih warna menggunakan Set Foreground Color. Gambar 4.3 Pewarnaan Pada Karakter Burung 1 commit to user b. Obyek burung 2 Dalam pembuatan obyek 2, masing-masing elemennya dipisahkan dalam layer yang berbeda untuk memudahkan dalam proses penyusunan gambar serta mempermudah dalam proses animasi. Tahap pertama yaitu membuat line untuk membentuk karakter burung menggunakan Brush Tool. Gambar 4.4 Pembuatan Line Pada Karakter Burung 2 Tahap kedua yaitu pemberian efek pada tubuh burung menggunakan Brush Tool dengan pewarnaan yang sesuai dengan warna karakter burung. commit to user Gambar 4.5 Pembuatan Efek Line Pada Karakter Burung 2 Tahap ketiga dengan melakukan pewarnaan pada karakter burung dengan menggunakan Pain Bucket Tool dan cara memilih warna menggunakan Set Foreground Color. Gambar 4.6 Pewarnaan Pada Karakter Burung 2 commit to user c. Obyek burung 3 Dalam pembuatan obyek 3, masing-masing elemennya dipisahkan dalam layer yang berbeda untuk memudahkan dalam proses penyusunan gambar serta mempermudah dalam proses animasi. Tahap pertama yaitu membuat line untuk membentuk karakter burung menggunakan Brush Tool. Gambar 4.7 Pembuatan Line Pada Karakter Burung 3 Tahap kedua yaitu pemberian efek pada tubuh burung menggunakan Brush Tool dengan pewarnaan yang sesuai dengan warna karakter burung. commit to user Gambar 4.8 Pembuatan Efek Line Pada Karakter Burung 3 Tahap ketiga dengan melakukan pewarnaan pada karakter burung dengan menggunakan Pain Bucket Tool dan cara memilih warna menggunakan Set Foreground Color. Gambar 4.9 Pewarnaan Pada Karakter Burung 3 commit to user 4.3.3 Pembuata Backgrou d Background yang digunakan dalam aplikasi ini berupa gambar pemandangan di padang rumput yang dibuat menggunakan software photoshop dengan ukuran yang telah di sesuaikan dan didesain semenarik mungkin. Format gambar di ubah menjadi JPEG dengan ukuran 1280 x 800 pixel. Tahap pertama yaitu dengan membuat sketsa pemandangan dengan Brush Tool. Gambar 4.10 Pembuatan Sketsa Pemandangan Tahap kedua yaitu dengan membuat sketsa diatas biar tampak pemandangan, dengan cara menggunakan Brush Tool setelah itu pilih dengan bentuk rumput lalu di tempatkan pada tempat yang akan diberi rumput. Untuk pewarnaan pada bebatuan menggunakan Lasso Tool dengan cara seleksi obyek yang akan diberi warna. Untuk melakukan pewarnaan menggunakan fitur-fitur yang ada di adjustments menu image adjustment. Dan pada pembuatan langit menggunakan potongan gambar yang Spot Healing Brus Tool supaya halus pada perpotonganya. commit to user Gambar 4.11 Pewarnaan Background Pemandangan 4.3.4 P embuata Tombol Tombol yang digunakan dalam aplikasi ini berupa kotak persegi panjang yang di blending dan di kasih teks. Tombol yang dibuat menggunakan software photoshop dengan ukuran yang telah disesuaikan. Format gambar di ubah menjadi PNG dengan ukuran 266 x 63 pixel. Cara pembuatanya dengan membuat persegi panjang yang diberi warna coklat trus di Blending. Setelah itu dikasih teks sesuai kebutuhan dengan Horizontal Type Tool commit to user Gambar 4.12 Pembuatan Tombol 4.3.5 Pe gubaha Format Mp 3 Me jadi Wave Pada aplikasi game tembak burung untuk anak anak ini, menggunakan sound musik yang enak di dengar sebagai backsound game tembak burung. Untuk merubah sound format mp3 menjadi wave, maka perlu software Aimp2 Audio Converter. Caranya yaitu dengan klik tombol tambahkan lalu pilih file musik yang akan di ubah, trus klik tombol mulai untuk mengubah format file mp3 menjadi wave. commit to user Gambar 4.13 Software Aimp2 Converter Suara musik yang dipakai dalam game Tembak Burung ini adalah suara musik yang diambil dari game Harvest Moon karena suara musiknya yang bagus, enak di dengar dan cocok untuk game Tembak Burung ini karena suara musiknya cocok untuk anak-anak. Berikut adalah file musik dari game Harvest Moon format mp3 yang di convert menjadi format wave: Fes v al -1-fun- Fanfare-1 Fanfare-2 Colopockle Ann-s-theme Town Dance-2-polka Minigame-2-race 4.3.6 Pembuata buru g terba g secara acak Konsep dari burung terbang ini adalah suatu obyek burung yang berterbang secara acak dari bawah keatas dan dari samping. Untuk memasukan commit to user Actionscriptnya klik movie clip burung lalu tekan f9 untuk membuka actionya. Berikut action scriptnya : onClipEvent loa d { speed = 3 + ra ndom 4 ; kecepa ta n gera k burung di a ca k dita mba h 4 denga n kecepata n a wal 3 } onClipEvent enterF rame { _y - = speed ; a ra h ger ak seca ra vertika l da ri ba wa h kea ta s If _y = -100 { mer upa ka n kondisi jika ger aka n burung bera da diba wah garis vertika l Speed = 3 + ra ndom 4 ; _y= 700 ; gera ka n vertika l akan bermula i da ri ga ris hor izonta l 700 _x = random 800; gera kan horizonta l a kan bergera k seca ra a ca k } } Gambar 4.14 Proses Pembuatan Burung Terbang Secara Acak commit to user 4.3.7 Pembuata Halama Soal Secara A cak Selain itu isi dari halaman kuisioner ini berupa pertanyaan - pertanyaan berbentuk teks dan tombol yang susunannya acak atau random. Selain pertanyaan pertanyaan, di akhir kuis ini juga terdapat nilai atau score yang didapat ke k a menjawab pertanyaan pertanyaan. Konsep dari pembuatan halaman ini adalah menyediakan 10 pertanyaan yang nan n ya akan ditampilkan secara acak . Untuk menampilkan soal secara acak memerlukan ac o n script dengan cara membuat layer baru lalu diberi nama ac o n , pada frame pertama masukan ac o nscript dengan menekan f 9. Berikut adalah ac o n scriptnya : stop ; benar = 0; salah = 0; total _frame = 11; array _frame = []; for i=2; i=total_frame; i++ { array _frame.pushi; } array _frame.sortfunction { return random 2 ? 1 : -1; script untuk mengacak soal }; jumlah _frame = array_frame.length; Untuk menjalankan acUo nscript di atas, diperlukan sebuah tombol yang memanggil acUo nscript tersebut. Maka tombol dibuat, dan diposisikan tepat di tengah. Agar tombol dapat memanggail acUo nscript diatas, tombol juga di beri acUo nscript. Berikut adalah acUo nscript untuk tombol mulai : on press{ commit to user nextFrame ;} Wadah dibuat menggunakan frame yang berisikan pertanyaan pertanyaan. Pertanyaan dan jawaban dibuat dengan menggunakan StaUc Text. Kemudian untuk dapat berinteraksi dibuatlah sebuah tombol pilihan yang di dalamnya terdapat ac o n script benarsalah. Caranya dengan memilih movie clip burung lalu tekan f9 untuk memasukan ac o nscriptnya Berikut ac o n scriptnya : on release{ benar +=1; benar akan mendapatkan nilai 1 _root.pil_snd.start0,1; if jumlah_frame=0{ jumlah _frame--; gotoAndStop array_frame[jumlah_frame]; } if jumlah_frame0{ gotoAndStop 12; } } Gambar 4.15 Proses Pembuatan Frame Untuk Soal commit to user Di akhir frame akan muncul tampilan score atau nilai. Untuk mendapatkan nilai dari score ini, dibuat 3 dynamic text sebagai penampung dari hasil akhir. Dynamic text pertama diberi instance name benar untuk menampilkan berapa nilai dari jawaban yang benar , dynamic text yang kedua diberi instance name salah untuk menampilkan berapa nilai dari jawaban yang salah, dan dynamic text ke g a diberi variable score untuk menampilkan nilai akhir dari semua pertanyaan yang telah di jawab. Gambar 4.16 Pembuatan Untuk Menampilkan Nilai Agar dapat menampilkan nilai , perlu ditambahkan acUo nscript sebagai pemanggil variable dan perhitungan akhir dari benar dan salah. AcUo nscript diletakkan di dalam frame acUo n dimana 3 dynamic text di atas ditempatkan. Berikut acUo nscriptnya : stop benar _tampil=benar; salah _tampil=salah; commit to user 4.4 Hasil da Pe gujia 4.4.1 Halama Main menu Halaman Utama merupakan halaman yang memuat menu-menu utama dalam aplikasi, yaitu START masuk di pembelajaran dan permainan tembak burung, ABOUT masuk di data si pembuat game, Help berisi peraturan game dan Exit keluar dari aplikasi. Berikut desain halaman muka dalam aplikasi ini : Gambar 4.17 Halaman Utama 4.4.2 Halama START Halaman ini akan muncul jika pada halaman utama ditekan menu START . Apabila halaman START ditekan maka akan di linkkan ke halaman Kuis Level1 . Berikut tampilan halaman Kuis Level1 : commit to user Gambar 4.18 Halaman Menu Kuis Level1 4.4.3 Halama ABOUT Halaman ini akan muncul jika menu ABOUT pada halaman INDEX ditekan. Halaman ini berisi biodata si pembuat aplikasi game tembak burung. Berikut desain antarmukanya : Gamba 4.19 Halaman About commit to user 4.4.4 Halama HELP Halaman ini akan muncul jika menu HELP pada INDEX ditekan. Halaman ini berisi peraturan game tembak burung yang harus dilakukan secara bertahap. Adapun tampilan antarmuka dari halaman help seperti berikut : Gambar 4.20 Halaman Help 4.4.5 Halama GAME LEVEL1 Halaman ini akan muncul jika sudah melewati kuis level1 dan mendapatkan nilai diatas 7. Terdapat ada 1 jenis burung yang berbeda warna yang apabila di tembak maka akan mendapatkan nilai +10. Berikut tampilan inter fa ce halaman game level1 : commit to user Gambar 4.21 Halaman Game Level1 4.4.6 Halama GAME LEVEL2 Halaman ini akan muncul jika sudah melewa kuis level 2 dan mendapatkan nilai diatas 7. Terdapat ada 2 jenis burung yang berbeda warna dan bentuk burung yang apabila di tembak maka akan mendapatkan nilai +10 samapi +15 dan burung yang satunya akan mendapatkan nilai -10 sampi -15. Berikut tampilan interface halaman game level2 : commit to user Gambar 4.22 Halaman Game Level 2 4.4.7 Halama GAME LEVEL3 Halaman ini akan muncul jika sudah melewa kuis level 3 dan mendapatkan nilai diatas 7. Terdapat ada 3 jenis burung yang berbeda warna dan bentuk burung yang apabila di tembak maka akan mendapatkan nilai +10 samapi +15, burung yang satunya akan mendapatkan nilai -10 sampi -15 dan burung yang berwarna pu h yang apabila ditembak maka permainan akan selasai atau game over. Berikut tampilan interface halaman game level3 : Gambar 4.23 Halaman Game Level3 4.4.8 Halama GAME OVER Pada halaman ini merupakan suatu halaman yang menandakan permainan sudah selesai atau game over karena menembak burung yang boleh ditembak. Berikut tampilan halaman game over : commit to user Gambar 4.24 Halaman Game Over 4.4.9 Halama Bo us Pada halaman ini merupakan suatu halaman bonus karena sudah menyelesaikan permainan sampai selesai. Dan harus mencari telur diantara sekian banyak burung untuk mendapatkan bonusnyayang terdapat di belakang burung. Berikut tampilan halaman bonus : Gambar 4.25 Halaman Bonus commit to user 4.4.10 Halama SELESAITAMAT Pada halaman ini merupakan suatu halaman yang menandakan permainan sudah selesai atau tamat karena telah menyelesaikan permainan tembak burung ini sesuai dengan peraturan yang belaku di permaianan tersebut. Berikut tampilan halaman selesai : Gambar 4.26 Halama Selesai 4.4.11 Pe gujia Untuk melakukan pengujian terhadap aplikasi yang dibuat, dilakukan test movie . Jika aplikasi sudah bisa berjalan dengan baik, proses pubilkasi file siap dilakukan. Publikasi file dilakukan dengan tujuan mendapatkan file dengan extensi.swf agar dapat berjalan pada flash player untuk masing-masing halaman. Sedangkan untuk tampilan utama dipublikasikan dengan extensi .exe agar dapat berjalan diatas windows tanpa adanya instalasi Flash Player dalam komputer yang bersangkutan. commit to user Tabel 4.2 Pengujian plikasi Movie Clip Button test keterangan Burung V Obyek burung dapat terbang secara acak dan apabila ditembak di klik maka burung akan mati dan jatuh. Start V Button start di klik maka akan ngeload kuis_level1.swf yang isinya pertanyaan- pertanyaan yang telah diberikan di level1. About V Button about di klik maka akan ngeload about.swf yang isinya tentang biodata si pembuat mengapa membuat game tembak burung ini. Help V Buttom help di klik maka akan ngeload help.swf yang isinya tentang peraturan- peraturan game tersebut. Exit V Button exit di klik maka akan keluar dari game tersebut. Mulai V Button mulai di klik maka akan menjalankan frame berikutnya yang berisi tentang soal pertanyaan. Back V Button back di klik maka akan kembali ke frame sebelumnya. Next V Button next di klik maka commit to user akan ngeload ke frame selanjutnya atau ke frame selanjutnya.

4.5 Evaluasi