BAB IV IMPLEMENTASI DAN EVALUASI

Transkripsi

1 24 BAB IV IMPLEMENTASI DAN EVALUASI 4.1 Produksi Pembuatan Antarmuka (Interface Design) Pembuatan Antarmuka Halaman Intro Pembuatan intro aplikasi meliputi beberapa proses pembuatan komponen seperti teks judul, button dan gambar animasi. Intro merupakan halaman paling awal yang tampil ketika program dijalankan untuk masuk kedalam aplikasi. Gambar 4.1 Memberi nama instace untuk mulai_tb Gambar 4.2 memperlihatkan hasil pembuatan intro pembuatan tombol serta pengaturan tata letaknya. Gambar 4.2 Pembuatan halaman intro Pada tulisan judul tematik menggunakan animasi teks yang berpindah tempat membentuk ke tulisan yang rapi. Penggunaan animasi text pada judul ini agar lebih menarik dan dinamis dalam aplikasi. 21

2 22 Pemberian actionscript intro aplikasi dimulai dengan pembuatan button. Lalu kita isikan actionscript on (release){ loadmovienum("menu.swf",0); } Keterangan : ketika kursor mouse berada diatas tombol dan mouse sedang ditekan maka langsung menampilkan halaman menu utama yaitu menu.swf Pembuatan Antarmuka Halaman Utama Halaman utama merupakan halaman yang masuk setelah intro. Pada halaman ini menampilkan 2 menu utama yaitu Belajar, kuis. Untuk setiap menu akan dibantu pemandu untuk penjelasannya. Gambar 4.3 adalah tampilkan dari pembuatan antarmuka halaman utama. Gambar 4.3 Pembuatan antarmuka halaman utama

3 Perancangan Antarmuka Halaman Belajar Pada halaman belajar ini terdapat pilihan atau menu untuk mengetahui lebih detail masing-masing mata pelajaran. Yaitu Matematika, Bahasa Indonesia, Ilmu Pengetahuan Alam, Ilmu Pnegetahuan Sosial dan Pendidikan Kewarganegaraan. Untuk antarmuka halaman belajar terdiri atas 6 tombol. Tombol yang digunakan antara lain: a. Tombol Matematika, nama instance: mtktb b. Tombol Bahasa Indonesia, nama instance: bindotb c. Tombol Ilmu Pengetahuan Alam, nama instance: ipatb d. Tombol Ilmu Pengetahuan Sosial, nama instance: ipstb e. Tombol Pendidikan Kewarganegaraan, nama instance: pkntb f. Tombol Home, nama instance: hometb Gambar 4.4 memperlihatkan tampilan pembuatan halaman belajar Gambar 4.4 Pembuatan antarmuka halaman belajar Perancangan Antarmuka Halaman Bahasa Indonesia Pada halaman materi mata pelajaran Bahasa Indonesia ini berisi materi belajar dan contohnya. Tombol yang digunakan yaitu: a. Tombol Materi, nama instance: cara b. Tombol Contoh, nama instance: contohnya

4 24 Posisi tombol diatur sesuai dengan perancangan antarmuka yang telah dibuat. Halaman materi dan halaman contoh diletakkan pada frame 1 dan 10. Di frame 1 layer 1 diberikan label cara. Label ini digunakan untuk memberi tanda bahwa frame ini yang akan menampilkan materi. Lalu dibuat dynamic textbox untuk menampilkan materi yang akan disampaikan. Gambar 4.5 Membuat layer 1 Gambar 4.6 Membuat tampilan materi Untuk halaman contoh. Di Timeline, pada frame 10 layer 1 diberi Insert Keyframe baru dan diberi label contoh sebagai tanda jika frame ini digunakan untuk menampilkan contoh. Setelah itu tampilan dibuat seperti berikut.

5 25 Gambar 4.7 Membuat tampilan contoh Perancangan Antarmuka Halaman Matematika Pada halaman materi mata pelajaran Matematika ini berisi Contoh Perkalian dan Tabel perkalian. Tombol yang digunakan yaitu: a. Tombol Perkalian, nama instance: perkaliantb b. Tombol Tabel Perkalian, nama instance: tabelperkaliantb c. Tombol Home, nama instance: hometb Posisi tombol diatur sesuai dengan perancangan antarmuka yang telah dibuat. Di frame 1 layer text, dibuat dynamic text yang digunakan utuk menampilkan narasi. Gambar 4.8 Membuat layer text

6 26 Gambar 4.9 Membuat tampilan narasi Untuk halaman perkalian adalah halaman yang berisikan animasi contoh perkalian. Gambar 4.10 adalah gambar ketika halaman tersebut dibuat Gambar 4.10 Membuat animasi contoh perkalian Untuk halaman tabel perkalian adalah halaman yang berisikan animasi cara menggunakan tabel perkalian. Cara halaman dibuat adalh pada Gambar 4.11

7 27 Gambar 4.11 Membuat animasi tabel perkalian Perancangan Antarmuka Halaman IPA Pada halaman materi mata pelajaran Ilmu Pengetahuan Alam ini berisi Penjelasan tentang sumber energi. Karena sumber energi disni ada 3, maka kita gunakan 3 tombol. Tombol yang digunakan yaitu: a. Tombol Energi Panas, nama instance: panas b. Tombol Energi Bunyi, nama instance:bunyi c. TombolEnergi Cahaya, nama instance: cahaya Posisi tombol diatur sesuai dengan perancangan antarmuka yang telah dibuat. Di frame 1 layer text, dibuat dynamic text yang digunakan utuk menampilkan narasi. Gambar 4.12 Membuat layer text

8 28 Gambar 4.13 Membuat tampilan frame label energi Untuk halaman energi panas. Di Timeline, pada frame 10 layer text diberi Insert Keyframe baru dan diberi label panas sebagai tanda jika frame ini digunakan untuk menampilkan materi energi panas. Setelah itu tampilan dibuat seperti pada Gambar 4.14 Gambar 4.14 Membuat tampilan materi energi panas Untuk halaman energi bunyi. Di Timeline, pada frame 15 layer text diberi Insert Keyframe baru dan diberi label bunyi. Setelah itu tampilan dibuat seperti pada Gambar 4.15

9 29 Gambar 4.15 Membuat tampilan materi energi bunyi Untuk halaman energi bunyi. Di Timeline, pada frame 20 layer text diberi Insert Keyframe baru dan diberi label bunyi. Setelah itu tampilan dibuat seperti pada Gambar 4.16 Gambar 4.16 Membuat tampilan materi energi cahaya Perancangan Antarmuka Halaman IPS Pada halaman materi mata pelajaran Ilmu Pengetahuan Sosial ini berisi Penjelasan tentang peran dan kedudukan anggota keluarga. Karena anggota keluarga yang dibahas ada 3, maka kita gunakan 3 tombol. Tombol yang digunakan yaitu: a. Tombol Kedudukan dan Peran Ayah, nama instance: ayah b. Tombol Kedudukan dan Peran Ibu, nama instance: ibu c. Tombol Kedudukan dan Peran Anak nama instance: anak

10 30 Posisi tombol diatur sesuai dengan perancangan antarmuka yang telah dibuat. Di frame 1 layer text, dibuat dynamic text yang digunakan utuk menampilkan narasi. Gambar 4.17 Membuat layer text Gambar 4.18 Membuat tampilan frame label kel Untuk halaman kedudukan dan peran ayah. Di Timeline, pada frame 10 layer text diberi Insert Keyframe baru dan diberi label ayah sebagai tanda jika frame ini digunakan untuk menampilkan materi ayah. Setelah itu tampilan dibuat seperti pada Gambar 4.19

11 31 Gambar 4.19 Tampilan materi kedudukan dan peran ayah Untuk halaman kedudukan dan peran ibu. Di Timeline, pada frame 15 layer text diberi Insert Keyframe baru dan diberi label ibu. Setelah itu tampilan dibuat seperti pada Gambar 4.20 Gambar 4.20 Tampilan materi kedudukan dan peran ibu Untuk halaman kedudukan dan peran anak. Di Timeline, pada frame 20 layer text diberi Insert Keyframe baru dan diberi label anak. Setelah itu tampilan dibuat seperti pada Gambar 4.21

12 32 Gambar 4.21 Tampilan materi kedudukan dan peran anak Perancangan Antarmuka Halaman PKN Pada halaman materi mata pelajaran Bahasa Indonesia ini berisi materi belajar dan contohnya. Tombol yang digunakan yaitu: a. Tombol Pengertian Musyawarah, nama instance: pengertian b. Tombol Contoh, nama instance: contoh Posisi tombol diatur sesuai dengan perancangan antarmuka yang telah dibuat. Halaman materi dan halaman contoh diletakkan pada frame 1 dan 15. Di frame 1 layer 1 diberikan label pengertian. Label ini digunakan untuk memberi tanda bahwa frame ini yang akan menampilkan materi. Lalu dibuat dynamic textbox untuk menampilkan materi yang akan disampaikan. Gambar 4.22 Mengatur timeline

13 33 Gambar 4.23 berikut adalah antarmuka halaman materi yang menampilkan animasi typing text. Gambar 4.23 Membuat tampilan materi Untuk halaman contoh. Di Timeline, pada frame 15 layer 1 diberi Insert Keyframe baru dan diberi label contoh sebagai tanda jika frame ini digunakan untuk menampilkan contoh. Setelah itu tampilan dibuat seperti berikut. Gambar 4.24 Membuat tampilan contoh

14 Pembuatan Antarmuka Halaman Kuis Pembuatan Antarmuka Halaman Kuis Menu Kuis adalah menu yang berisikan kuis sesuai dengan mata pelajaran yang telah dibahas dalam aplikasi ini. Terdapat 2 tipe kuis yaitu soal pilihan ganda dan mencocokan. Gambar 4.25 memperlihatkan tampilan pembuatan halaman kuis. Gambar 4.25 Pembuatan halaman kuis Pembuatan Antarmuka Halaman Kuis Pilihan Ganda Halaman ini berisikan petunjuk untuk kuis pilihan ganda. Gambar 4.26 memperlihatkan tampilan timeline untuk halaman petunjuk kuis pilihan ganda. Gambar 4.26 Mengatur timeline

15 35 Gambar 4.27 berikut adalah antarmuka halaman yang digunakan untuk menampilkan petunjuk. Gambar 4.27 Pembuatan antarmuka halaman petunjuk kuis Untuk antarmuka halaman soal kuis pilihan ganda dibuat dengan: a. Empat dynamic text b. Static text untuk keterangan dynamic text tersebut. c. Tombol exit dan tombol kembali ke menu kuis. Halaman kuis pilihan ganda berisikan soal pilihan ganda. Soal yang ditampilkan dalam kuis ini berkaitan dengan materi yang telah disampaikan sebelumnya. Tampilan untuk latihan soal Pendidikan Kewarganegaraan, Ilmu Pengetahuan Sosial dan Matematika adalah sama. Soal ini dibuat dengan sistem acak (random) dan dilengkapi dengan fasilitas penampilan skor diakhir sehingga anak dapat melihat nilai dari latihan yang telah dikerjakannya. Gambar 4.28 memperlihatkan tampilan timeline untuk halaman kuis pilihan ganda.

16 36 Gambar 4.28 Pembuatan timeline kuis pilihan ganda Gambar 4.29 berikut adalah antarmuka halaman yang digunakan untuk menampilkan soal. Gambar 4.29 Pembuatan antarmuka halaman kuis pilihan ganda Untuk antarmuka halaman laporan dibuat dengan: a. Tiga dynamic text b. Static text untuk keterangan dynamic text tersebut. c. Tombol exit dan tombol kembali ke menu kuis.

17 37 Tampilan antarmuka halaman penampil hasil kuis ada pada Gambar 4.30 Gambar 4.30 Pembuatan Antarmuka Halaman Penampil Hasil Kuis Pembuatan Antarmuka Halaman Kuis Mencocokan Kuis mencocokan dikhususkan untuk mata pelajaran Ilmu pengetahuan Alam. Untuk memainkan kuis ini adalah mencocokan barang sesuai dengan jenis energi yang dihasilkan. Tampilan antarmuka halaman penampil hasil kuis ada pada Gambar 4.31 Gambar 4.31 Pembuatan Antarmuka Halaman Kuis Mencocokan

18 Pembuatan Elemen Desain (Design Grafis) Pembuatan Object Pembuatan object dalam aplikasi ini menggunakan Corel Draw X6. Baik gambar, background, tombol navigasi, dll. Output gambar yang dihasilkan adalah.*png. Proses pembuatan object anak dapat dilihat di Gambar 4.32 Gambar 4.32 Proses Pembuatan Objek Anak Proses pembuatan object ayah dapat dilihat di Gambar 4.33 Gambar 4.33 Proses Pembuatan Objek Ayah

19 39 Proses pembuatan object ibu dapat dilihat di Gambar 4.34 Gambar 4.34 Proses Pembuatan Objek ibu Pembuatan Elemen Desain Tombol Belajar Untuk pembuatan tombol ini langkah pertama yang harus dilakukan adalah membuat gambar membentuk sebuah papan dengan menggunakan CorelDRAW. Gambar 4.35 Membuat tombol

20 40 papan. Kemudian kita export dengan format file *.png dan kita beri nama Gambar 4.36 Export file dalam format *.png Didalam flash, ketika kita akan menggunakannya sebagai tombol, maka kita import kedalam library. nama bel. Gambar 4.37 Import to library Kemudian mengkonvert object diatas dengan simbol dan diberi Gambar 4.38 Convert to Symbol

21 41 Kemudian pada object tersebut kita klik dua kali, tambahkan teks denga text tool. Gambar 4.39 Menambahkan teks Pembuatan Element Desain Tombol Kuis Tombol kuis dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks KUIS. Gambar 4.40 Membuat tombol kuis Pembuatan Element Desain Tombol Matematika Tombol matematika dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks MATEMATIKA. Gambar 4.41 Membuat tombol matematika Pembuatan Element Desain Tombol Perkalian Tombol perkalian dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks PERKALIAN. Gambar 4.42 Membuat tombol perkalian

22 Pembuatan Element Desain Tombol Tabel Perkalian Tombol Tabel Perkalian dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks TABEL PERKALIAN. Gambar 4.43 Membuat tombol tabel perkalian Pembuatan Element Desain Tombol Bahasa Indonesia Tombol bahasa indonesia dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks BAHASA INDONESIA. Gambar 4.44 Membuat tombol bahasa indonesia Pembuatan Element Desain Tombol Cara Menyampaikan Pesan Tombol cara menyampaikan pesan dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks CARA MENYAMPAIKAN PESAN. Gambar 4.45 Membuat tombol cara menyampaikan pesan Pembuatan Element Desain Tombol Contoh Tombol contoh dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks CONTOH. Gambar 4.46 Membuat tombol contoh

23 Pembuatan Element Desain Tombol Ilmu Pengetahuan Alam Tombol ilmu pengetahuan alam dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks ILMU PENGETAHUAN ALAM. Gambar 4.47 Membuat tombol ilmu pengetahuan alam Pembuatan Element Desain Tombol Energi Tombol energi dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks ENERGI. Gambar 4.48 Membuat tombol energi Pembuatan Element Desain Tombol Energi Panas Tombol energi panas dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan ENERGI PANAS. Gambar 4.49 Membuat tombol energi panas Pembuatan Element Desain Rombol Energi Bunyi Tombol energi bunyi dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks ENERGI BUNYI. Gambar 4.50 Membuat tombol energi bunyi

24 Pembuatan Element Desain Tombol Energi Cahaya Tombol enegi cahaya dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks ENERGI CAHAYA. Gambar 4.51 Membuat tombol energi cahaya Pembuatan Element Desain Tombol Ilmu Pengetahuan Sosial Tombol kuis dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks ILMU PENGETAHUAN SOSIAL. Gambar 4.52 Membuat tombol ilmu pengetahuan sosial Pembuatan Element Desain Tombol Kedudukan dan Peran Anggota Keluarga Tombol kedudkan dan peran anggota keluarga dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks KEDUDUKAN DAN PERAN ANGGOTA KELUARGA. Gambar 4.53 Membuat tombol kedudukan dan peran anggota keluarga

25 Pembuatan Element Desain Tombol Kedudukan dan Peran Ayah Tombol kedudukan dan peran ayah dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks KEDUDUKAN DAN PERAN AYAH. Gambar 4.54 Membuat tombol keududkan dan peran ayah Pembuatan Element Desain Tombol Kedudukan dan Peran Ibu Tombol kedudukan dan peran ibu dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks KEDUDUKAN DAN PERAN ANGGOTA IBU. Gambar 4.55 Membuat tombol kedudukan dan peran ibu Pembuatan Element Desain Tombol Kedudukan dan Peran Anak Tombol kedudukan dan peran anak dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks KEDUDUKAN DAN PERAN ANAK. Gambar 4.56 Membuat tombol kedudukan dan peran anak

26 Pembuatan Element Desain Tombol Pendidikan Kewarganegaraan Tombol pendidikan kewarganegaraan dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks PENDIDIKAN KEWARGANEGARAAN. Gambar 4.57 Membuat tombol pendidikan kewarganegaraan Pembuatan Element Desain Tombol Pengertian Musyawarah Tombol pengertian musyawarah dibuat menggunakan object bernama papan yang dikonvert ke simbol dengan tipe button dan ditambahkan teks PENGERTIAN MUSYAWARAH. Gambar 4.58 Membuat tombol pengertian musyawarah Pembuatan Elemen Desain Tombol Mulai Untuk pembuatan tombol ini langkah pertama yang harus dilakukan adalah membuat gambar membentuk sebuah papan dengan menggunakan CorelDRAW. Gambar 4.59 Membuat tombol

27 47 mulai. Kemudian kita export dengan format file *.png dan kita beri nama Gambar 4.60 Export file dalam format *.png Didalam flash, ketika kita akan menggunakannya sebagai tombol, maka kita import kedalam library. nama bel. Gambar 4.61 Import to library Kemudian mengkonvert object diatas dengan simbol dan diberi Gambar 4.62 Convert to Symbol

28 Pembuatan Kursor Pensil Pada aplikasi ini untuk panah kursor menggunakan gambar pensil agar terlihat lebih menarik dan mudah dilihat. Karena Aplikasi ini ditujukan untuk anak-anak, maka diusahakan menghindari object yang rumit dan kecil. Untuk pembuatan tombol ini langkah pertama yang harus dilakukan adalah membuat gambar membentuk sebuah pensi dengan menggunakan CorelDRAW. pensil. Gambar 4.63 Membuat tombol Kemudian kita export dengan format file *.png dan kita beri nama Gambar 4.64 Export file dalam format *.png Didalam flash, ketika kita akan menggunakannya sebagai tombol, maka kita import kedalam library.

29 49 Gambar 4.65 Import to library Kemudian mengkonvert object diatas dengan tipe movie clip dan diberi nama kursor. Gambar 4.66 Convert to Symbol Lalu diberikan actionscript.gambar 4.67 adalah actionscript yang diletakan pada objek. Gambar 4.67 Actionscript kursor pensil Pembuatan Audio Audio untuk Narasi Suara pada aplikasi ini menggunakan file yang dijadikan.*mp3 dengan tujuan memperingan hasil file flash dan memperlancar jalannya aplikasi. Proses pengubahan file suara dengan menggunakan Adobe Audition dan bertujuan untuk melembutkan suara. Audio ditempatkan di folder yang sama dengan file-file.fla lainnya. Dapat dilihat pada gambar 4.68.

30 50 Gambar 4.68 Pengeditan suara dengan Adobe Audition Audio untuk Effect dan Backsound Kuis Untuk audio yang digunakan berupa file.mp3 yang diambil dari situs Audio ditempatkan di folder yang sama dengan file-file.fla lainnya Authoring dan Pemrograman (Authoring and Programming) Animasi Typing Text Setiap materi yang disampaikan pada apikasi ini menggunakan animasi typing text. Berikut adalah actionscript untuk animasi tersebut : Gambar 4.69 Script untuk animasi typing text

31 51 Var i:number = 0 Mendefinisikan variabel, disebut i. Nama ini biasanya digunakan untuk variabel yang memegang nilai numerik (: Number) yang bertambah 1 setiap kali mengulangi loop. Disini nilai awal diberikan nilai nol. var mymessage:string = "tempat text yg akan ditampilkan."; Menciptakan variabel disebut mystring dan mendefinisikan sebagai tipe String. String berarti teks (variabel yang akan menampung teks literal. Teks yang akan ditampikan diletakkan diantara tanda kutip setelah tanda =. Gambar 4.70 Function autowrite Karena fungsi khusus ini tidak mengembalikan nilai, tapi melakukan beberapa tindakan, Anda harus menulis: Void setelah nama fungsi dan tanda kurung. Disini fungsinya bernama autowrite. Gambar 4.71 Statement Flash memeriksa apakah kondisi antara kurung (i <= mymessage.length) benar. Jika ternyata benar, ia menjalankan kode ActionScript

32 52 monitor_txt.text = mymessage.substr(0, i); i = i+1; Jika ternyata salah, maka actionscript yang akan diajalankan adalah clearinterval(writinginterval); Karena pada awalnya kita mendefinisikan nilai i adalah 0 maka kondisi nilai i adalah kurang dari atau sama dengan (<=) jumlah karakter dalam variabel mymessage sehingga teks akan ditampilkan pada kolom teks monitor_txt. var writinginterval:number = setinterval(autowrite, 80); Perintah setinterval digunakan ketika ingin memanggil dan mengeksekusi fungsi dalam periode waktu yang teratur. Perintah ini harus disimpan di dalam variabel, jadi itu sebabkan kita memiliki var writinginterval: Number di sisi kiri tanda =. Karena ini adalah interval, sehingga harus ditetapkan sebagai jenis Jumlah variabel. Method setinterval disini memiliki dua parameter. Yang pertama adalah nama fungsi yang akan dipanggil, yaitu autowrite. Parameter kedua adalah interval waktu yang teratur di mana fungsi akan dipanggil. Nilai tersebut akan ditulis dalam milidetik. Misal disini adalah 80, maka auto typing yang akan ditampilkan adalah setiap 80 milidetik Fungsi untuk Load Data Soal Berikut adalah actionscript yang digunakan untuk load soal yang berada dalam bank soal xml. selain itu juga terdapat fungsi untuk menampilkan tulisan benar dan salah ketika kita sudah milih jawaban.

33 53 Gambar 4.72 Actionscript load soal (1) Gambar 4.73 Actionscript load soal (2)

34 54 Gambar 4.74 Actionscript load soal (3) Gambar 4.75 Actionscript load soal (4)

35 55 Gambar 4.76 adalah script yang digunakan untuk membuat soal menjadi acak. Gambar 4.76 Actionscript mengacak soal Sedangkan gambar 4.77 adalah script yang digunakan untuk membuka file XML dan menciptakan objek XML. Flash akan memberitahu kami ketika file tersebut benar-benar dimuat dengan memanggil fungsi yang disebut "onload". Pada saat itu, kita masih perlu untuk mengurai file. Fungsi onload ditimpa dengan onquizdata. Ini berarti bahwa ketika file tersebut dimuat, fungsi onquizdata akan dipanggil. Stop() memerintakan flash untuk berhenti berjalan agar file xml tidak sepenuhnya dimuat didalam frame. Fungsi onquizdata () mem-parsing data dan menciptakan satu set objek yang disebut quizitems. Setelah itu, garis gotoandstop ("Start") akan sinyal kita bahwa file XML telah diurai. Scriptnya Gambar 4.77 Actionscript load data xml

36 Memulai dan Menampilkan Soal Start. Gambar 4.78 menunjukan Actionscript yang digunakan pada frame Gambar 4.78 Actionscript memulai kuis Variabel currentquestionnumber diberikan nilai 1 digunakan untuk menunjukkan bahwa item kuis yang muncul adalah item kuis pertama. Variabel numofquestionsansweredcorrectly=0 dan numofquestionsansweredincorrectly=0 adalah variabel yang mengindikasikan berapa banyak pertanyaan yang dijawab dengan benar dan salah, dimana kedua variabel tersebut akan digunakan dalam perhitungan skor akhir. gotoandstop("showquiz") adalah fungsi yang memerintakan flash untuk beralih ke frame yang berlabel ShowQuiz Gambar 4.79 menunjukan Actionscript yang digunakan pada frame ShowQuiz. Gambar 4.79 Actionscript menampilkan soal

37 57 Kondisi currentquestionnumber memriksa terhadap sejumlah pertanyaan pada file XML. Ia juga memberitahu Flash untuk melompat ke frame label "SummaryScreen" ketika semua pertanyaan telah ditampilkan. Diberikan variabel currentquizitem dengan nilai dari item kuis agar nantiny mudah disebut. Kita dapat mengakses item kuis menggunakan quizitems [index]. Misalkan kita mempunyai 10 item kuis, kita mempunyai quizitems[0], quizitems[1], dan seterusnya sampai sejumlah 10 atau sampai quizitems[9]. Diawal kita ingin menampilkan kuis dengan item kuis pertama, maka kita tuliskan quizitems[currentquestionnumber- 1] question=currentquizitem.getquestion(); adalah Script tersebut digunakan untuk mengambil pertanyaan didalam folder xml, dimana pertanyaan tersebut diletakkan diantara <question>. Gambar 4.80 menunjukan kondisi yang berguna untuk looping. Gambar 4.80 Condition yang terdapat pada frame ShowQuiz Kondisi diatas adalah kondisi yang akan looping melalui jawaban dan memberikan jawaban atas variabel answer1, answer2, answer3 (variabel untuk pilihan jawaban). Karena kita telah memberi nama textbox dengan nama yang sama dengan variabel-variabel, ketika potongan script ini dijalankan, textbox akan menampilkan nilai variabel, yang persis apa yang kita inginkan.

38 Pemeriksa Jawaban jawaban Gambar 4.81 adalah actionscript yang digunakan untuk memeriksa Gambar 4.81 Script yang digunakan untuk memeriksa jawaban Fungsi diatas telah dipanggil didalam action frame load. Fungsi Ini membandingkan jawaban yang diberikan oleh pengguna dengan jawaban yang benar. Jika mereka cocok, maka akan melompat ke frame label

39 59 "Correct." Jika mereka tidak cocok, maka kita akan melompat ke frame label "Wrong" Jawaban benar Gambar 4.82 adalah actionscript yang digunakan untuk memeriksa jawaban Gambar 4.82 Script untuk menghitung banyak jawaban benar Ketika kita menjawab pertanyaan dan menjawabnya dengan benar, fungsi checkanswernumber melemparkan kita ke frame yang bernama Correct. Sebelum melompat kembali ke frame ShowQuiz, script akan menambahkan jumlah pertanyaan (currentquestionnumber) sehingga pada frame ShowQuiz akan menampilkan pertanyaan berikutnya bukan pertanyaan yang sama lagi. Hal ini juga akan menambahkan variabel lain. numofquestionsansweredcorrectly yang menghitung berapa banyak pertanyaan yang telah dijawab dengan benar Jawaban Salah Gambar 4.83 adalah actionscript yang digunakan untuk memeriksa jawaban Gambar 4.83 Script untuk menghitung banyak jawaban salah Ketika kita menjawab pertanyaan dan menjawabnya dengan salah, fungsi checkanswernumber melemparkan kita ke frame yang bernama Wrong. Sebelum melompat kembali ke frame ShowQuiz, script akan menambahkan jumlah pertanyaan

40 60 (currentquestionnumber) sehingga pada frame ShowQuiz akan menampilkan pertanyaan berikutnya bukan pertanyaan yang sama lagi. Hal ini juga akan menambahkan variabel lain. numofquestionsansweredincorrectly yang menghitung berapa banyak pertanyaan yang telah dijawab dengan salah Menampilkan Nilai Gambar 4.84 adalah script yang digunakan untuk menghitung hasil akhir dari kuis (menghitung nilai userscore). Gambar 4.84 Script untuk menghitung hasil akhir kuis numofquestionsansweredcorrectly adalah varibel yang mewakili jumlah jawaban yang benar, sedangkan numofquestionsansweredincorrectly adalah variabel yang mewakili jumlah jawaban yan salah Kuis Mencocokan Gambar 4.85 adalah actionscript yang digunakan untuk kuis mencocokan. Gambar 4.85 Script untuk kuis mencocokan

41 61 Keterangan : Barang1.onPress = function(){ this.startdrag(); kata1._visible = false; }; Ketika variabel barang1 didrag, maka variabel kata1 akan bernilai false (tidak ditampilkan). Barang1.onRelease = function(){ this.stopdrag(); if(eval(this._droptarget) == orang1){ kata1._visible = true; }}; Ketika variabel barang1 berhenti didrag dan diletakan di objek yang bernama variabel orang1, maka variabel kata1 akan bernilai true (ditampilkan). 4.2 Implementasi Implementasi Antarmuka Implementasi Antarmuka Halaman Intro Halaman intro adalah halaman untuk awal untuk masuk ke program. Gambar 4.86 memperlihatkan implementasi antarmuka intro. Gambar 4.86 Implementasi antarmuka halaman intro

42 Implementasi Antarmuka Halaman Utama Gambar 4.87 adalah tampilan dari menu utama, dimana berisikan tombol belajar dan kuis. Gambar 4.87 Tampilan halaman utama Implementasi Antarmuka Halaman Belajar Pada halaman belajar ini terdapat pilihan atau menu untuk mengetahui lebih detail masing-masing mata pelajaran. Yaitu Matematika, Bahasa Indonesia, Ilmu Pengetahuan Alam, Ilmu Pnegetahuan Sosial dan Pendidikan Kewarganegaraan.Gambar 4.88 memperlihatkan implementasi antarmuka halaman belajar. Gambar 4.88 Implementasi antarmuka halaman belajar

43 Implementasi Antarmuka Halaman Bahasa Indonesia Pada halaman materi bahasa indonesia dalam memunculkan teks adalah dengan menggunakan konsep typing text yang diiringi dengan suara.typing Text merupakan animasi teks yang memunculkan huruf demi huruf seakan-akan tulisan tersebut sedang di ketik. Dengan menggunakan typing text akan mengajarkan anak untuk membaca. Untuk tampilan materi dapat dilihat pada Gambar Gambar 4.89 Implementasi antarmuka halaman materi bahasa indonesia Untuk tampilkan halaman contoh bahasa indonesia, dapat dilihat pada Gambar Gambar 4.90 Implementasi antarmuka halaman contoh bahasa indonesia

44 Implementasi Antarmuka Halaman Matematika Pada halaman matematika dalam memunculkan teks adalah dengan menggunakan konsep typing text yang diiringi dengan suara. Tampilannya dapat dilihat pada Gambar Gambar 4.91 Implementasi antarmuka halaman matematika Untuk halaman perkalian adalah halaman yang berisikan animasi contoh perkalian. Gambar 4.92 adalah tampilan dari halaman perkalian. Gambar 4.92 Implementasi antarmuka halaman contoh perkalian

45 65 Untuk halaman tabel perkalian adalah halaman yang berisikan animasi menggunakan tabel perkalian. Gambar 4.93 adalah tampilan dari halaman perkalian. Gambar 4.93 Implementasi antarmuka halaman tabel perkalian Implementasi Antarmuka Halaman IPA Pada halaman materi ilmu pengetahuan alam dalam memunculkan teks adalah dengan menggunakan konsep typing text yang diiringi dengan suara. Untuk tampilan penjelasan energi dapat dilihat pada Gambar Gambar 4.94 Implementasi antarmuka halaman penjelasan energi Untuk tombol energi panaskan mengarahkan kita ke halaman yang berisikan penjelasan energi panas. Gambar 4.95 adalah tampilan dari halaman energi panas.

46 66 Gambar 4.95 Implementasi antarmuka halaman penjelasan energi panas Untuk tombol energi panasakan mengarahkan kita ke halaman yang berisikan penjelasan energi panas. Gambar 4.96 adalah tampilan dari halaman energi bunyi. Gambar 4.96 Implementasi antarmuka halaman penjelasan energi bunyi Untuk tombol energi panasakan mengarahkan kita ke halaman yang berisikan penjelasan energi panas. Gambar 4.97 adalah tampilan dari halaman energi cahaya.

47 67 Gambar 4.97 Implementasi antarmuka halaman penjelasan energi cahaya Implementasi Antarmuka Halaman IPS Pada halaman materi ilmu pengetahuan sosial dalam memunculkan teks adalah dengan menggunakan konsep typing text yang diiringi dengan suara. Untuk tampilan penjelasan kedudukan dan peran anggota keluarga dapat dilihat pada Gambar Gambar 4.98 Implementasi antarmuka halaman penjelasan keluarga Untuk tombol kedudukan dan peran ayah mengarahkan kita ke halaman yang berisikan penjelasan kedudukan dan peran ayah. Gambar 4.99 adalah tampilan dari halaman ayah.

48 68 Gambar 4.99 Implementasi antarmuka halaman penjelasan ayah Untuk tombol kedudukan dan peran ibu anak mengarahkan kita ke halaman yang berisikan penjelasan kedudukan dan peran ibu. Gambar adalah tampilan dari halaman ibu. Gambar Implementasi antarmuka halaman penjelasan ibu Untuk tombol kedudukan dan peran anak mengarahkan kita ke halaman yang berisikan penjelasan kedudukan dan peran anak. Gambar adalah tampilan dari halaman anak.

49 69 Gambar Implementasi antarmuka halaman penjelasan anak Implementasi Antarmuka Halaman PKN Pada halaman materi pendidikan kewarganegaraan dalam memunculkan teks adalah dengan menggunakan konsep typing text yang diiringi dengan suara. Untuk tampilan penjelasan kedudukan dan peran anggota keluarga dapat dilihat pada Gambar Gambar Implementasi antarmuka pengertian musyawarah Untuk tombol contoh mengarahkan kita ke halaman yang berisikan contoh dari musyawarah. Gambar adalah tampilan dari halaman contoh.

50 70 Gambar Implementasi antarmuka halaman contoh musyawarah Implementasi Antarmuka Halaman Kuis Berikut adalah tampilan dari menu kuis, dimana berisikan pilihan kuis setiap mata pelajaran. Gambar Implementasi Antarmuka Halaman Kuis

51 Implementasi Antarmuka Halaman Kuis Pilihan Ganda Halaman yang akan muncul pertama adalah berisikan petunjuk untuk kuis pilihan ganda. Gambar berikut adalah antarmuka halaman yang digunakan untuk menampilkan petunjuk. Gambar Pembuatan antarmuka halaman petunjuk kuis Gambar adalah implementasi antarmuka halaman kuis pilihan ganda. Dimana pada halaman ini berisikan soal yang ditampilkan dari dalam file xml. Gambar Implementasi Antarmuka Kuis Pilihan Ganda

52 72 Ketika jawaban yang dipilih benar, maka akan muncul tulisan BENAR!! diikuti suara pada halaman tersebut. Untuk tampilannya dapat dilihat pada Gambar Gambar Implementasi antarmuka bila jawaban benar Ketika jawaban yang dipilih salah, maka akan muncul tulisan SALAH!! diikuti suara pada halaman tersebut. Untuk tampilannya dapat dilihat pada Gambar Gambar Implementasi antarmuka bila jawaban salah Implementasi Antarmuka Halaman Kuis Mencocokan Cara Memainkan kuis mencocokan ini adalah memasangkan benda yang ada dengan energi yang dihasilkannya. Apabila barang yang di pilih diletakan pada energi yang tepat maka akan muncul tulisan yang menandakan pilihan yang dipilih tepat.

53 73 Gambar Implementasi antarmuka halaman kuis mencocokan Implementasi Elemen Grafis Implementasi Elemen Grafis Tombol Belajar Gambar memperlihatkan implementasi elemen grafis pembuatan tombol belajar. Gambar Implementasi tombol belajar Implementasi Elemen Grafis Tombol Kuis Gambar memperlihatkan implementasi elemen grafis pembuatan tombol kuis. Gambar Implementasi tombol kuis Implementasi Elemen Grafis Matematika Gambar memperlihatkan implementasi elemen grafis pembuatan tombol matematika. Gambar Implementasi tombol matematika

54 Implementasi Elemen Grafis Tombol Perkalian Gambar memperlihatkan implementasi elemen grafis pembuatan tombol perkalian. Gambar Implementasi tombol perkalian Implementasi Elemen Grafis Tabel Perkalian Gambar memperlihatkan implementasi elemen grafis pembuatan tombol tabel perkalian. Gambar Implementasi tombol tabel perkalian Implementasi Elemen Grafis Bahasa Indonesia Gambar memperlihatkan implementasi elemen grafis pembuatan tombol bahasa indonesia. Gambar Implementasi tombol bahasa indonesia Implementasi Elemen Grafis Cara Menyampaikan Pesan Gambar memperlihatkan implementasi elemen grafis pembuatan tombol cara menyampaikan pesan. Gambar Implementasi tombol cara menyampaikan pesan Implementasi Elemen Grafis Contoh Gambar memperlihatkan implementasi elemen grafis pembuatan tombol contoh.

55 75 Gambar Implementasi tombol contoh Implementasi Elemen Grafis Ilmu Pengetahuan Alam Gambar memperlihatkan implementasi elemen grafis pembuatan tombol ilmu pengetahuan alam. Gambar Implementasi tombol ilmu pengetahuan alam Implementasi Elemen Grafis Energi Gambar memperlihatkan implementasi elemen grafis pembuatan tombol energi. Gambar Implementasi tombol energi Implementasi Elemen Grafis Energi Panas Gambar memperlihatkan implementasi elemen grafis pembuatan tombol energi panas. Gambar Implementasi tombol energi panas Implementasi Elemen Grafis Energi Bunyi Gambar memperlihatkan implementasi elemen grafis pembuatan tombol energi bunyi. Gambar Implementasi tombol energi bunyi

56 Implementasi Elemen Grafis Energi Cahaya Gambar memperlihatkan implementasi elemen grafis pembuatan tombol energi cahaya. Gambar Implementasi tombol energi cahaya Implementasi Elemen Grafis Ilmu Pengetahuan Sosial Gambar memperlihatkan implementasi elemen grafis pembuatan tombol ilmu pengetahuan sosial. Gambar Implementasi ilmu pengetahuan sosial Implementasi Elemen Grafis Kedudukan dan Peran Keluarga Gambar memperlihatkan implementasi elemen grafis pembuatan tombol kedudukan dan peran keluarga. Gambar Implementasi kedudukan dan peran keluarga Implementasi Elemen Grafis Kedudukan dan Peran Ayah Gambar memperlihatkan implementasi elemen grafis pembuatan tombol kedudukan dan peran ayah. Gambar Implementasi kedudukan dan peran ayah

57 Implementasi Elemen Grafis Kedudukan dan Peran Ibu Gambar memperlihatkan implementasi elemen grafis pembuatan tombol kedudukan dan peran ibu. Gambar Implementasi kedudukan dan peran ibu Implementasi Elemen Grafis Kedudukan dan Peran Anak Gambar memperlihatkan implementasi elemen grafis pembuatan tombol kedudukan dan peran anak. Gambar Implementasi kedudukan dan peran anak Implementasi Elemen Grafis Pendidikan Kewarganegaraan Gambar memperlihatkan implementasi elemen grafis pembuatan tombol pendidikan kewarganegaraan Gambar Implementasi pendidikan kewarganegaraan Implementasi Elemen Grafis Pengertian Musyawarah Gambar memperlihatkan implementasi elemen grafis pembuatan tombol pengertian musyawarah. Gambar Implementasi pengertian musyawarah

58 Implementasi Elemen Grafis Mulai Gambar memperlihatkan implementasi elemen grafis pembuatan mulai. Gambar Implementasi tombol mulai Implementasi Elemen Grafis Pensil Gambar memperlihatkan implementasi elemen grafis pembuatan pensil. Gambar Implementasi tombol pensil Implementasi Navigasi Implementasi Navigasi Tombol Keluar Gambar memperlihatkan implementasi elemen grafis pembuatan tombol keluar. Gambar Implementasi tombol keluar Implementasi Navigasi Tombol Kembali Gambar memperlihatkan implementasi elemen grafis pembuatan tombol kembali. Gambar Implementasi tombol kembali

59 Implementasi Navigasi Tombol Home tombol home. Gambar memperlihatkan implementasi elemen grafis pembuatan Gambar Implementasi tombol home 4.3 Pengujian Untuk hasil pengujian aplikasi pada menu-menu nya dapat dilihat pada tabel 4.1. Tabel 4.1 Hasil Pengujian No Menu / Sub Menu Evaluasi 1 Belajar Valid 2 Ilmu Pengetahuan Alam Valid 3 Ilmu pengetahuan Sosial Valid 4 Matematika Valid 5 Bahasa Indonesia Valid 6 Pendidikan Kewarganegaraan Valid 7 Kuis Matematika Valid 8 Kuis Ilmu Pengetahuan Alam Valid 9 Kuis Ilmu pengetahuan Sosial Valid 10 Kuis Pendidikan Kewarganegaraan Valid