Desain Interface Mendesain Produk Awal

87 Gambar 35. Desain Tampilan Halaman Materi dengan Video 5 Desain Tampilan Halaman Galeri Desain tampilan halaman galeri berisi beberapa komponen seperti judul halaman, tombol-tombol pilihan galeri, judul media, isi konten galeri, tombol navigasi halaman, nama pengembang, pengatur musik dan waktu. Desain tampilan halaman galeri dapat dilihat sebagai berikut: Gambar 36. Desain Tampilan Halaman Galeri 6 Desain Tampilan Halaman Kuis Dalam menu kuis terdapat 3 bagian halaman yaitu halaman muka kuis, halaman kuissoal, dan halaman hasil kuis. Pada halaman muka kuis terdapat tombol pilihan jenis kuis, kolom kotak isian nama, tombol mulai kuis. Selanjutnya pada halaman kuissoal 88 terdapat judul halaman, nomor soal, soal dan pilihan jawaban, dan tombol navigasi kuis. Sedangkan di halaman hasil kuis terdapat judul halaman, nama peserta, hasil kuis berupa jawaban benar dan nilai, teks KKM, dan tombol kembali. Desain tampilan halaman kuis adalah sebagai berikut: Gambar 37. Desain Tampilan Halaman Kuis 7 Desain Tampilan Halaman Kompetensi Desain tampilan halaman kompetensi terdiri dari judul halaman, isi kompetensi dasar, kompetensi inti, tujuan pembelajaran dan indikator keberhasilan. Selain itu juga terdapat tombol navigasi halaman, nama pengembang, pengatur musik, dan waktu. Desain tampilan halaman kompetensi dapat dilihat sebagai berikut: 89 Gambar 38. Desain Tampilan Halaman Kompetensi 8 Desain Tampilan Halaman Petunjuk Desain tampilan halaman petunjuk terdiri dari judul halaman, tombol-tombol yang terdapat dalam media, penjelasan nama dan fungsi tombol-tombol, tombol navigasi halaman, nama pengembang, pengatur musik dan waktu. Desain tampilan halaman petunjuk dapat dilihat sebagai berikut: Gambar 39. Desain Tampilan Halaman Petunjuk 9 Desain Tampilan Halaman Pustaka Desain tampilan halaman pustaka terdiri dari judul halaman, isi daftar pustaka, tombol navigasi halaman, nama pengembang, 90 pengatur musik dan waktu. Desain tampilan halaman pustaka dapat dilihat sebagai berikut: Gambar 40. Desain Tampilan Halaman Pustaka 10 Desain Tampilan Halaman Profil Desain tampilan halaman profil terdiri dari judul halaman, tombol-tombol navigasi, data profil dari pengembang, nama pengembang, pengatur musik, dan tampilan waktu. Desain tampilan halaman profil dapat dilihat sebagai berikut: Gambar 41. Desain Tampilan Halaman Profil 11 Desain Tampilan Halaman Keluar Desain tampilan halaman keluar terdiri dari dua tombol pengatur yaitu tombol untuk keluar dan tombol untuk kembali ke 91 menu, serta dilengkapi juga dengan gambar animasi keluar. Desain tampilan halaman keluar dapat dilihat sebagai berikut: Gambar 42. Desain Tampilan Halaman Keluar

d. Desain Prosedural

Setelah tahap desain data, desain arsitektur dan desain interface dilalui, tahap selanjutnya adalah desain prosedural. Desain prosedural digunakan untuk menetapkan detail yang dinyatakan dalam suatu bahasa pemrograman. Pembuatan media pembelajaran transmisi otomatis berbasis flash ini menggunakan actionscript 2.0 yang ada dalam program Adobe Flash Professional. Actionscript yang digunakan antara lain seperti actionscript untuk menghubungkan antarframe, antarscene, maupun antarmovie pada fungsi tombol tertentu.

e. Implementasi Program

Implementasi program adalah tahap menterjemahkan desain ke tampilan sebenarnya. Program diimplementasikan dengan menggunakan Adobe Flash Professional. Tampilan pada layar berupa teks, gambar, animasi, gambar, video dan suara. Pembuatan program 92 dilakukan dengan menggunakan teknik-teknik seperti alpha, insert, masking, scale, trace dan tween. Gambar pada media diambil langsung dari gambar jadi yang sudah ada, meski beberapa gambar melalui proses penyesuaian terlebih dahulu dengan menggunakan Adobe Photoshop. Selanjutnya untuk pembuatan desain background, tombol, dan animasi menggunakan Corel Draw. Sedangkan untuk pembuatan teks dapat langsung dilakukan dalam Adobe Flash Professional. Jenis huruf, ukuran huruf, dan warna huruf dapat diatur dalam panel properties teks. Implementasi media pembelajaran transmisi otomatis berbasis flash dapat dilihat pada gambar-gambar berikut: Gambar 43. Tampilan Halaman Loading 93 Gambar 44. Tampilan Video Pembuka Gambar 45. Tampilan Halaman Pembuka 94 Gambar 46. Tampilan Halaman UtamaMenu Gambar 47. Tampilan Halaman Materi dengan Gambar