Jelaskan cara membuat animasi pada pembuatan kendali movie clip jawaban anda

i MODUL PEMBINAAN KARIR Paket Keahlian Multimedia Produksi Multimedia Interaktif Kelompok Kompetensi J Penulis : Nanik Sri Rayahu, M.T Direktorat Jenderal Guru dan Tenaga Kependidikan Kementrian Pendidikan dan Kebudayaan Tahun 2017 i Penulis: 1.

Nanik Sri Rahayu, M.T. ; Email [email protected]

Penelaah: 1. 2. 3.

Dwi Setyo Rini, S.Sn Abd. Hakim, S.Kom., M.T. Email [email protected] Syamsul Hidayat, A.Md. Email [email protected]

Ilustrator : 1. 2.

Faizal Reza Nurzeha, A.Md. Email [email protected] Sierra Maulida Asrin, ST Email [email protected]

Layouter: 1. Novi Nurlaela, S.Kom ; Email [email protected]

Copyright ©2017 Lembaga Pengembangan dan Pemberdayaan Pendidikan Tenaga Kependidikan Bidang Kelautan Perikanan Teknologi Informasi dan Komunikasi. Hak Cipta Dilindungi Undang-Undang Dilarang mengkopi sebagian atau keseluruhan isi buku ini untuk kepentingan komersial tanpa izin tertulis dari Kementrian Pendidikan Kebudayaan. ii KATA SAMBUTAN Peran guru profesional dalam proses pembelajaran sangat penting sebagai kunci keberhasilan belajar siswa. Guru profesional adalah guru yang kompeten membangun proses pembelajaran yang baik sehingga dapat menghasilkan pendidikan yang berkualitas. Hal ini tersebut menjadikan guru sebagai komponen yang menjadi fokus perhatian pemerintah pusat maupun pemerintah daerah dalam peningkatan mutu pendidikan terutama menyangkut kopetensi guru. Pengembangan profesionalitas guru melalui program Pembinaan Karir merupakan upaya peningkatan kompetensi untuk semua guru. Sejalan dengan hal tersebut, pemetaan kompetensi guru telah dilakukan melalui uji kompetensi guru (UKG) untuk kompetensi pedagogik dan profesional pada akhir tahun 2015. Hasil UKG menunjukanpeta kekuatan dan kelemahan kompetensi guru dalam penguasaan pengetahuan. Peta kompetensi guru tersebut dikelompokan menjadi 10 (sepuluh) kelompok kompetensi. Tindak lanjut pelaksanaan UKG diwujudkan dalam bentuk pelatihan guru paska UKG melalui program Pembinaan Karir. Tujuannya untuk meningkatkan kompetensi guru sebagai agen perubahaan dan sumber belajar utama bagi peserta didik. Program Pembinaan Karir dilaksanakan melalui pola tatap muka, daring (online) dan campuran (blended) tatap muka dengan online. Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK), Lembaga Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan Kelautan Perikanan Teknologi Informasi dan Komunikasi (LP3TK KPTK) dan Lembaga Pengembangan dan Pemberayaan Kepala Sekolah (LP2KS) merupakan Unit Pelaksana Teknis di lingkungan Direktorat Jendral Guru dan Tenaga Kependidikan yang bertanggung jawab dalam mengembangkan perangkat dan melaksanakan peningkaan kompetensi guru sesuai dengan bidangnya. Adapun peragkat pembelajaran yang dikembangkan tersebut adalah modul untuk program Pembinaan Karirtatap muka dan online untuk semua mata pelajaran dan kelompok kompetensi. Dengan modul ini diharapkan program GP memberikan sumbangan yang sangat besar dalam peningkatan kualitas kompetensi guru. Mari kita sukseskan program Pembinaan Karir ini untuk mewujudkan Guru Mulia Karena Karya. Jakarta, Februari 2017 Direktur Jendral Guru dan Tenaga Kependidikan Sumarna Surapranata, Ph.D NIP. 195908011985031002 iii iv KATA PENGANTAR Profesi guru dan tenaga kependidikan harus dihargai dan dikembangkan sebagai profesi yang bermartabat sebagaimana diamanatkan Undang-Undang Nomor 14 Tahun 2005 tentang Guru dan Dosen. Hal ini dikarenakan guru dan tenaga kependidikan merupakan tenaga profesional yang mempunyai fungsi, peran, dan kedudukan yang sangat penting dalam mencapai visi pendidikan 2025 yaitu “Menciptakan Insan Indonesia Cerdas dan Kompetitif”. Untuk itu guru dan tenaga kependidikan yang profesional wajib melakukan pengembangan keprofesian berkelanjutan. Modul Diklat Pembinaan Karir merupakan petunjuk bagi penyelenggara pelatihan di dalam melaksakan pengembangan modul yang merupakan salah satu sumber belajar bagi guru dan tenaga kependidikan. Modul ini disajikan untuk memberikan informasi tentang penyusunan modul sebagai salah satu bentuk bahan dalam kegiatan pengembangan keprofesian berkelanjutan bagi guru dan tenaga kependidikan. Pada kesempatan ini disampaikan ucapan terima kasih dan penghargaan kepada berbagai pihak yang telah memberikan kontribusi secara maksimal dalam mewujudkan modul ini, mudah-mudahan modul ini dapat menjadi acuan dan sumber inspirasi bagi guru dan semua pihak yang terlibat dalam pelaksanaan penyusunan modul untuk pengembangan keprofesian berkelanjutan. Kritik dan saran yang membangun sangat diharapkan untuk menyempurnakan modul ini di masa mendatang. Gowa, Februari 2017 Kepala Dr. H. Rusdi, M.Pd. NIP. 19650430 199103 1 004 v vi DAFTAR ISI KATA SAMBUTAN ............................................................................................ iii KATA PENGANTAR ........................................................................................... v DAFTAR ISI ...................................................................................................... vii DAFTAR GAMBAR ............................................................................................ xi DAFTAR TABEL ............................................................................................... xv DAFTAR LAMPIRAN ...................................................................................... xvii PENDAHULUAN ................................................................................................. 1 A. Latar Belakang .......................................................................................... 1 C. Peta Kompetensi....................................................................................... 2 D. Ruang Lingkup .......................................................................................... 4 E. Saran Cara penggunaan modul ................................................................ 4 Kegiatan Pembelajran 1 Konsep Multimedia Interaktif ................................... 9 A. Tujuan ....................................................................................................... 9 B. Indikator Pencapaian Kompetensi ............................................................. 9 C. Uraian Materi ............................................................................................ 9 D. Aktivitas Pembelajaran............................................................................ 20 E. Latihan Soal ............................................................................................ 20 F. Rangkuman ............................................................................................ 20 G. Kunci Jawaban........................................................................................ 21 H. Umpan Balik ........................................................................................... 21 Kegiatan Pembelajran 2 Storyboard............................................................... 25 A. Tujuan ..................................................................................................... 25 B. Indikator Pencapaian Kompetensi ........................................................... 25 C. Uraian Materi .......................................................................................... 25 D. Aktivitas Pembelajaran............................................................................ 35 E. Latihan Soal ............................................................................................ 36 F. Rangkuman ............................................................................................ 36 G. Kunci Jawaban........................................................................................ 36 vii H. Umpan Balik ............................................................................................ 37 Kegiatan Pembelajran 3 AntarMuka Multimedia Interaktif ............................ 41 A. Tujuan ..................................................................................................... 41 B. Indikator Pencapaian Kompetensi ........................................................... 41 C. Uraian Materi........................................................................................... 41 D. Aktivitas Pembelajaran ............................................................................ 50 E. Latihan Soal ............................................................................................ 51 F. Rangkuman ............................................................................................. 51 G. Kunci Jawaban ........................................................................................ 51 H. Umpan Balik ............................................................................................ 51 Kegiatan Pembelajran 4 Navigasi Multimedia Interaktif ................................ 55 A. Tujuan ..................................................................................................... 55 C. Uraian Materi........................................................................................... 55 E. Soal Latihan ............................................................................................ 63 F. Rangkuman ............................................................................................. 63 G. Kunci Jawaban ........................................................................................ 63 H. Umpan Balik ............................................................................................ 64 Kegiatan Pembelajran 5 Efek Visual Multimedia Interaktif ........................... 67 A. Tujuan ..................................................................................................... 67 C. Uraian Materi........................................................................................... 67 D. Aktivitas Pembelajaran ............................................................................ 77 E. Latihan Soal ............................................................................................ 77 F. Rangkuman ............................................................................................. 78 G. Kunci Jawaban ........................................................................................ 78 H. Umpan Balik ............................................................................................ 79 Kegiatan Pembelajran 6 Produk Multimedia Interaktif .................................. 83 A. Tujuan ..................................................................................................... 83 B. Indikator Pencapaian Kompetensi ........................................................... 83 C. Uraian Materi........................................................................................... 83 D. Aktivitas Pembelajaran ............................................................................ 98 E. Latihan Soal .......................................................................................... 125 F. Rangkuman ........................................................................................... 125 viii G. Kunci Jawaban...................................................................................... 126 H. Umpan Balik ......................................................................................... 126 Kegiatan Pembelajran 7 Pengujian Multimedia Interaktif ........................... 129 A. Tujuan ................................................................................................... 131 B. Indikator Pencapaian Kompetensi ......................................................... 131 C. Uraian Materi ........................................................................................ 131 D. Aktivitas Pembelajaran.......................................................................... 136 E. Latihan Soal .......................................................................................... 139 F. Rangkuman .......................................................................................... 139 G. Kunci Jawaban...................................................................................... 139 H. Umpan Balik ......................................................................................... 141 EVALUASI ...................................................................................................... 143 PENUTUP ....................................................................................................... 149 GLOSARIUM................................................................................................... 151 DAFTAR PUSTAKA........................................................................................ 153 ix x DAFTAR GAMBAR Gambar 1 Peta kedudukan modul Multimedia Interaktif ....................................... 3 Gambar 2 Ruang Lingkup modul Multimedia Interaktif ......................................... 4 Gambar 3 Diagram multimedia interaktif hierarchical ......................................... 10 Gambar 4 Diagram multimedia interaktif nonlinear ............................................ 11 Gambar 5 Multimedia interaktif model tutorial .................................................... 14 Gambar 6 Multimedia interaktif model drill and practice ..................................... 15 Gambar 7 Multimedia interaktif model simulasi .................................................. 15 Gambar 8 Multimedia interaktif model instructional games ................................ 16 Gambar 9 Multimedia interaktif model hybrid ..................................................... 17 Gambar 10 Multimedia interaktif model Socratic ................................................ 17 Gambar 11 Multimedia interaktif model inquiry .................................................. 18 Gambar 12 Multimedia interaktif model information ........................................... 18 Gambar 13 Direct manipulation ........................................................................ 45 Gambar 14 Menu selection ................................................................................ 45 Gambar 15 Form fill in ....................................................................................... 46 Gambar 16 Command language ........................................................................ 47 Gambar 17 Natural language............................................................................. 47 Gambar 18 Rancangan tampilan awal ............................................................... 48 Gambar 19 Rancangan tampilan halaman judul ................................................ 48 Gambar 20 Rancangan tampilan menu STANDAR KOMPETENSI ................... 49 Gambar 21 Rancangan tampilan menu SEJARAH MATEMATIKA .................... 49 Gambar 22 Rancangan tampilan menu KUIS .................................................... 50 Gambar 23 Hubungan antar halaman................................................................ 55 Gambar 24 Struktur navigasi linear.................................................................... 56 Gambar 25 Struktur navigasi hirarki................................................................... 57 Gambar 26 Struktur navigasi spoke and hub ..................................................... 58 Gambar 27 Struktur navigasi kombinasi ............................................................ 58 Gambar 28 Struktur navigasi media pembelajaran interaktif Aljabar Linear ....... 59 Gambar 29 Navigasi untuk melihat halaman menu utama ................................. 60 Gambar 30 Navigasi untuk melihat halaman standar kompetensi ...................... 60 Gambar 31 Navigasi untuk melihat halaman sejarah matematika ...................... 61 Gambar 32 Navigasi untuk melihat halaman Materi ........................................... 61 Gambar 33 Navigasi untuk melihat halaman petunjuk ....................................... 62 Gambar 34 Navigasi untuk melihat halaman kuis .............................................. 62 Gambar 35 Visualisasi tampilan awal ................................................................ 75 Gambar 36 Visualisasi halaman judul ................................................................ 76 Gambar 37 Visualisasi halaman standar kompetensi......................................... 77 Gambar 38 Tampilan aplikasi adobe flash CS3 ................................................. 84 xi Gambar 39 Komponen utama adobe flash CS3 ................................................. 85 Gambar 40 Toolbox Adobe flash CS3 ................................................................ 86 Gambar 41 Jendela action script........................................................................ 88 Gambar 42 Shape ............................................................................................. 89 Gambar 43Jendela convert to symbol ................................................................ 89 Gambar 44 Membuat tiga buah layer ................................................................. 91 Gambar 45 Button dan shape background......................................................... 91 Gambar 46 Menambah durasi tampilan ............................................................. 91 Gambar 47 Pengaturan posisi objek pada stage................................................ 92 Gambar 48 Menambahkan teks pada stage ...................................................... 92 Gambar 49 Memperpanjang durasi tampilan ..................................................... 93 Gambar 50 Memperpanjang durasi tampilan layer ............................................. 94 Gambar 51 Properti teks .................................................................................... 95 Gambar 52 Pembuatan obyek teks dan tombol ................................................. 95 Gambar 53 Pengaturan obyek pada frame 5 ..................................................... 96 Gambar 54 Tampilan pengisian data ................................................................. 97 Gambar 55 Tampilan data ................................................................................. 97 Gambar 56 Menambahkan Scene ..................................................................... 98 Gambar 57 Jumlah scene dalam file .................................................................. 99 Gambar 58 Langkah mengubah nama scene .................................................... 99 Gambar 59 Mengganti nama scene ................................................................. 100 Gambar 60 Menyiapkan layer untuk membuat opening ................................... 100 Gambar 61 Awal hitungan waktu mundur ........................................................ 101 Gambar 62 Susunan frame pada layer waktu .................................................. 102 Gambar 63 Frame awal animasi tulisan berjalan ............................................. 103 Gambar 64 Frame akhir animasi tulisan berjalan ............................................. 103 Gambar 63 Memberikan motion tween pada tulisan ........................................ 103 Gambar 64 Animasi motion tween pada tulisan ............................................... 104 Gambar 65 Menambahkan tombol enter .......................................................... 104 Gambar 66 Memberi nama tombol enter.......................................................... 105 Gambar 67 Script untuk tombol enter .............................................................. 105 Gambar 68 tampilan preview halaman opening ............................................... 106 Gambar 69 Halaman judul pada frame 45 ....................................................... 107 Gambar 70 Pemberian nama pada tombol STANDAR KOMPETENSI............. 107 Gambar 71 Pemberian nama pada tombol SEJARAH MATEMATIKA ............. 107 Gambar 72 Pemberian nama pada tombol PETUNJUK ................................... 108 Gambar 73 Pemberian nama pada tombol MATERI ........................................ 108 Gambar 74 Pemberian nama pada tombol KUIS ............................................. 108 Gambar 75 Pemberian nama pada tombol KELUAR ....................................... 109 Gambar 76 Tampilan Halaman Sejarah Matematika ........................................ 110 Gambar 77 Tombol NEXT dan BACK .............................................................. 113 Gambar 78 Desain halaman kuis ..................................................................... 115 Gambar 79 Pengaturan teks untuk soal ........................................................... 115 Gambar 80 Teks untuk pilihan jawaban ........................................................... 116 xii Gambar 81 Pengaturan pilihan jawaban pada stage ....................................... 116 Gambar 82 Pemberian instance name ............................................................ 117 Gambar 83 Pembuatan movieclip umpan balik ................................................ 117 Gambar 83 Umpan balik salah ........................................................................ 118 Gambar 84 Tampilan saat soal habis .............................................................. 118 Gambar 85 Tampilan soal kuis ........................................................................ 124 Gambar 86 Tampilan jika jawaban pengguna salah ........................................ 124 Gambar 87 Tampilan saat pilihan jawaban pengguna benar ........................... 125 xiii xiv DAFTAR TABEL Tabel 0.1. Peta kompetensi modul guru pembelajarMMKelompok kompetensi J Multimedia Interaktif ................................................................ 3 xv xvi DAFTAR LAMPIRAN xvii xviii PENDAHULUAN A. Latar Belakang Guru dan tenaga kependidikan wajib melaksanakan kegiatan pengembangan keprofesian secara berkelanjutan agar dapat melaksanakan tugas profesionalnya. Program Pengembangan Keprofesian Berkelanjutan (PKB) adalah pengembangan kompetensi Guru dan Tenaga Kependidikan yang dilaksanakan sesuai kebutuhan, bertahap, dan berkelanjutan untuk meningkatkan profesionalitasnya. PKB sebagai salah satu strategi pembinaan guru dan tenaga kependidikan diharapkan dapat menjamin guru dan tenaga kependidikan mampu secara terus menerus memelihara, meningkatkan, dan mengembangkan kompetensi sesuai dengan standar yang telah ditetapkan. Pelaksanaan kegiatan PKB akan mengurangi kesenjangan antara kompetensi yang dimiliki guru dan tenaga kependidikan dengan tuntutan profesional yang dipersyaratkan. Di dalam pelaksanaan diklat yang dilaksanakan oleh PPPPTK diperlukan modul sebagai salah satu sumber belajar peserta. Modul Diklat Pembinaan Karir Multimedia (MM) Kelompok kompetensi J Multimedia Interaktif ini disusun sebagai acuan bagi penyelenggaraan PKB Diklat dan pelatihan dalam upaya pengembangan keprofesian secara berkelanjutan agar dapat melaksanakan tugas secara professional, meningkat, dan mengembangkan kompetensi sesuai dengan standar yang telah ditetapkan. Modul ini mempelajari tentang bagaimana membangun aplikasi media pembelajaran interaktif. Materi dalam modul ini mencakup perancangan dan implementasi media pembelajaran interaktif. Melalui modul ini peserta bermain peran sebagai desainer dan programmer yang merupakan salah satu job tittle di dunia industri Teknologi informasi. Desainer mempunyai tanggung jawab terhadap pembuatan desain instruksional pembelajaran berbasis komputer 1 dan multimedia yang interaktif. Programmer mempunyai tanggung jawab terhadap pembuatan kode program yang dapat dijalankan sehingga membentuk aplikasi untuk membantu menunjang kegiatan belajar mengajar. Penguasaan teknik dan keterampilan dalam membuat desain serta kode program akan berpengaruh pada kesuksesan dalam implementasi aplikasi media pembelajaran interaktif. B. Tujuan Tujuan disusunnya modul Pembinaan Karir MM Kelompok kompetensi J ini adalah memberikan pengetahuan, ketrampilan dan sikap kepada peserta tentang merancang dan mengimplementasikan media pembelajaran interaktif dengan benar melalui aktifitas observasi dan praktikum. Setelah mempelajari modul ini diharapkan peserta dapat : “Membuat aplikasi multimedia pembelajaran interaktif”. Secara khusus tujuan penyusunan modul ini adalah: 1. Memberikan pemahaman tentang multimedia interaktif. 2. Memberikan pengetahuan cara membuat storyboard multimedia interaktif. 3. Memberikan petunjuk tentang penggunaan efek visual dalam multimedia interaktif. 4. Memberikan petunjuk tentang penggunaan actionscript 3.0 untuk membuat navigasi dan unsur interaktivitas dalam aplikasi multimedia interaktif. 5. Memberikan petunjuk cara pengujian aplikasi multimedia interaktif C. Peta Kompetensi Modul ini merupakan modul ke-10 dari 10 modul yang dikembangkan. Berdasarkan struktur jenjang diklat guru pembelajar,modul Multimedia Interaktif ini termasuk dalam jenjang Menengah. Modul ini akan digunakan untuk Program Pengembangan Keprofesian Berkelanjutan (PKB) bagi guruguru produktif Sekolah menengah Kejuruan pada paket keahlian Multimedia. 2 Gambar 1 Peta kedudukan modul Multimedia Interaktif Tabel 0.2. Peta kompetensi modul guru pembelajarMMKelompok kompetensi J Multimedia Interaktif Standar kompetensi Kompetensi Utama Kompetensi Inti Guru (KIG) Profesional 1. Menguasai materi, struktur, konsep dan pola pikir keilmuan yang mendukung mata pelajaran yang diampu Kompetensi Guru Keahlian (KGK) 1.10. Mengkreasi produk multimedia interaktif Indikator pencapaian Kompetensi 1.10.1 Menganalisis konsep multimedia interaktif 1.10.2 Membuat storyboard multimedia interaktif 1.10.3 Membuat antarmuka produk multimedia interaktif 1.10.4 Membuat navigasi produk multimedia interaktif 1.10.5 Membuat efek-efek visual dan audio pada produk multimedia interaktif 1.10.6 Membuat produk multimedia interaktif 1.10.7 Menguji produk multimedia interaktif 3 D. Ruang Lingkup Modul ini terdiri dari tujuh pembahasan utama (materi pokok). Setiap materi pokok terdapat satu kegiatan pembelajaran guna mencapai kompetensi yang telah ditentukan. Dalam setiap kegiatan pembelajaran terdapat keterkaitan yang mendukung atau menunjang pemahaman konsep dan praktik dalam setiap kegiatan pembelajaran yang dilakukan. Berikut merupakan peta kegiatan belajar dalam mencapai kompetensi. Gambar 2 Ruang Lingkup modul Multimedia Interaktif E. Saran Cara penggunaan modul Modul ini terdiri dari tujuh kegiatan belajar. Peserta dapat mempelajari sesuai dengan urutan kegiatan belajar mulai dari kegiatan belajar 1 sampai kegiatan belajar 7. Untuk setiap kegiatan belajar urutan yang harus dilakukan oleh peserta dalam mempelajari modul ini adalah : 1. Membaca tujuan pembelajaran sehingga memahami target atau goal dari kegiatan belajar tersebut. 2. Membaca indikator pencapaian kompetensi sehingga memahami objek yang akan dijadikan kriteria pengukuran untuk mencapai tujuan pembelajaran. 3. Membaca uraian materi pembelajaran sehingga memiliki pengetahuan, ketrampilan dan sikap terhadap kompetensi yang akan dicapai 4. Melakukan aktifitas pembelajaran permasalahan sesuai dengan contoh. 4 dengan urutan atau kasus 5. Mengerjakan latihan soal dengan mengisi lembar kerja yang telah disediakan. 6. Menjawab pertanyaan dalam umpan balik yang akan mengukur tingkat pencapaian kompetensi melalui penilaian diri. Modul ini menggunakan beberapa dukungan perangkat yang yang harus disediakan. Peserta dapat menggunakan perangkat yang dimiliki tetapi harus memenuhi standart spesifikasi yang telah ditetapkan. Hal ini bertujuan agar setiap kegiatan pembelajaran yang dilakukan dapat berjalan dengan semestinya. Perangkat-perangkat yang digunakan dalam kegiatan pembelajaran modul ini adalah: 1. Personal Computer (PC) yang sudah terinstal OS windows 7 atau lebih. 2. Perangkat Lunak (software) Adobe Flash CS 3 5 6 7 8 Konsep Multimedia Interaktif A. Tujuan 1. Melalui diskusi peserta dapat membedakan aplikasi multimedia dan multimedia interaktif secara santun dan menghargai pendapat peserta lain. 2. Melalui observasi peserta dapat mengidentifikasi unsur-unsur interaktivitas dalam sebuah aplikasi multimedia interaktif secara teliti dan bertanggung jawab. 3. Melalui diskusi peserta dapat menentukan model multimedia interaktif yang digunakan dalam sebuah media pembelajaran secara santun dan menghargai pendapat orang lain. B. Indikator Pencapaian Kompetensi 1. Menguraikan konsep dasar multimedia interaktif. 2. Mengidentifikasi unsur-unsur interaktivitas dalam sebuah aplikasi multimedia interaktif. 3. Memilih model multimedia interaktif yang digunakan dalam sebuah media pembelajaran. C. Uraian Materi Multimedia interaktif adalah pemanfaatan komputer untuk membuat dan menggabungkan teks, gambar, suara, video, dan animasi dengan menggabungkan perangkat-perangkat tertentu yang dapat memungkinkan pengguna melakukan navigasi, berinteraksi dan berkomunikasi. Interaksi adalah suatu fitur yang menonjol dalam multimedia yang memungkinkan pembelajaran yang aktif (active learning). Pembelajaran yang aktif tidak saja memungkinkan pengguna melihat atau mendengar (see and hear) tetapi juga melakukan sesuatu (do). Dalam konteks multimedia do disini dapat berupa memberikan respon terhadap pertanyaan yang diajukan komputer atau aktif dalam simulasi yang disediakan komputer. 9 Multimedia interaktif terbagi menjadi dua, yaitu : - Hierarchycal, pemakai memiliki pilihan, tetapi topik-topik dapat dibagi menjadi subtopik yang lebih spesifik. Gambar 3 Diagram multimedia interaktif hierarchical - Non-linear, memungkinkan pemakai untuk bebas bergerak untuk melihat isi materi dengan cara berinteraksi. Tidak ada hierarchy yang dipaksakan, pemakai dapat bergerak bebas ke materi manapun. 10 Gambar 4 Diagram multimedia interaktif nonlinear Keunggulan multimedia dalam hal interaktivitas adalah media ini secara inheren memaksa pengguna untuk berinteraksi dengan materi. Interaksi ini bervariasi dari yang paling sederhana hingga yang kompleks. Interaksi sederhana misalnya pengguna harus menekan keyboard atau melakukan klik dengan mouse untuk berpindah-pindah halaman (display) atau memasukkan jawaban dari suatu latihan dan komputer merespon dengan memberikan jawaban benar melalui suatu umpan balik (feedback). Interaksi yang komplek misalnya aktivitas di dalam suatu simulasi sederhana di mana pengguna bisa mengubah-ubah suatu variabel tertentu atau simulasi komplek seperti simulasi menerbangkan pesawat udara. Pembelajaran selalu memerlukan interaksi. Interaksi diperlukan agar materi lebih mudah diserap dan dimengerti serta menghindari kebosanan. Interaksi terjadi saat siswa tidak berperan sebagai penerima informasi secara pasif, namun terlibat dalam pembelajaran dengan cara memberikan aksi yang akan di tanggapi oleh materi pelajaran. Lingkungan pembelajaran yang interaktif adalah pembelajaran yang memiliki kemampuan untuk memberikan tanggapan terhadap tindakan siswa, sehingga peserta dapat mengendalikan bagaimana penyampaian, bentuk penyajian dan isi pelajaran. Pengendalian penyampaian pelajaran meliputi 11 tahapan (mengubah kecepatan penyampaian pelajaran) dan urutan (mengubah cara penyampaian). Pengendalian terhadap bentuk penyajian membuat siswa dapat memilih bentuk-bentuk penyajian materi (penyajian yang dinamis, sudut pandang, contoh-contoh). Kendali terhadap isi pelajaran meliputi pemilihan sejumlah informasi (umpan balik singkat atau secara luas, bantuan), memecah informasi menjadi bagian yang dapat di pahami dengan tepat (memperbesar/memperkecil), memilih bagian pelajaran yang akan dipelajari (navigasi menuju bagian tertentu, memilih menu). Terdapat beberapa tingkat interaktif dalam pembelajaran berbasis komputer, yaitu umpan balik, manipulasi, adaptasi dan komunikasi. Tingkat umpan balik merupakan tingkat interaktif yang paling rendah, berkaitan dengan tersedianya umpan balik terhadap tindakan siswa yang telah ditentukan sebelumnya, misalnya langkah-langkah penyelesaian masalah, pertanyaan, jawaban, tombol lanjut yang disembunyikan. Umpan balik dapat diberikan secara langsung atau di tunda untuk beberapa saat, sederhana, bersifat korektif (ya-tidak, benar-salah), penjelasan (misalnya penjelasan suatu prinsip, kata-kata referensi, daftar kata, bantuan), dengan atau tanpa kendali siswa (umpan balik otomatis atau umpan balik on demand). Tingkat manipulasi meliputi perubahan secara real time atau transformasi informasi sebagai tanggapan atas tindakan siswa. Berkebalikan dengan tanggapan di tingkat sebelumnya, tingkat manipulasi menyediakan tanggapan yang fleksibel dan bervariasi. Tingkat interaktif ini ada dua macam, yaitu  kendali siswa, misalnya memindahkan obyek menggunakan teknik drag and drop, memutar obyek, manipulasi simulasi dengan memasukkan nilai tertentu sebagai parameter input, memilih pilihan jawaban,  kendali sistem secara penuh, misalnya menampilkan simulasi atau visualisasi dinamis (animasi, rotasi) yang menunjukkan suatu proses kepada peserta sebagai tanggapan terhadap tindakan mereka. Tingkat adaptasi meliputi tanggapan yang disesuaikan dengan kebiasaan peserta sebelumnya. Tingkat ini secara dinamis menyesuaikan pilihan tugas pembelajaran, prosedur dan format instruksional berdasarkan informasi tentang tindakan dan kebiasaan peserta secara online. Tampilan selanjutnya ditentukan secara real time berdasarkan tindakan yang dilakukan peserta 12 saat ini dan yang telah dilakukan sebelumnya. Interaksi adaptif dapat berupa kendali sistem (adaptasi otomatis) atau kendali peserta (misal sistem penasihat yang memberikan pilihan kemungkinan untuk dipilih oleh peserta). Tingkat komunikasi direpresentasikan dengan lingkungan pembelajaran online dinamis yang fleksibel, tanggapan terhadap tindakan peserta tidak ditentukan sebelumnya. Tingkat ini dapat mencakup tingkat-tingkat sebelumnya, misalnya umpan balik dinamis, manipulasi, pemilihan tugas pribadi secara real time dan penyesuaian informasi. Secara teknis, level ini membutuhkan kanal komunikasi sinkron atau tak sinkron antar peserta dan antara peserta dengan pembimbing. Terdapat banyak model multimedia interaktif yang digunakan untuk tujuan pembelajaran, diantaranya tutorial, drill and practice, simulasi, instructional games, hybrid, socratic, inquiry dan informational. a. Tutorial Model tutorial adalah salah satu jenis model pembelajaran yang memuat penjelasan, rumus, prinsip, bagan, tabel, definisi istilah, latihan dan branching yang sesuai. Disebut branching karena terdapat berbagai cara untuk berpindah atau bergerak melalui pembelajaran berdasarkan jawaban atau respon pengguna terhadap materi, soal-soal atau pertanyaan- pertanyaan. Jenis ini melibatkan presentasi informasi. Tutorial secara khusus terdiri dari diskusi mengenai konsep atau prosedur dengan pertanyaan bagian demi bagian atau kuis pada akhir presentasi. Instruksi tutorial biasanya disajikan dalam istilah “”Frames” yang berhubungan dengan sekumpulan tampilan. Model tutorial bertujuan untuk menyampaikan atau menjelaskan materi tertentu, komputer menyampaikan materi, mengajukan pertanyaan dan memberikan umpan balik sesuai dengan jawaban pengguna. 13 Gambar 5 Multimedia interaktif model tutorial b. Drill and practice Model drill and practice menganggap bahwa konsep dasar telah dikuasai oleh pengguna dan mereka sekarang siap untuk menerapkan rumus-rumus, bekerja dengan kasus-kasus konkret, dan menjelajahi daya tangkap mereka terhadap materi. Fungsi utama latihan dan praktik dalam program pembelajaran berbantuan komputer memberikan praktik sebanyak mungkin terhadap kemampuan siswa. Cara kerja Drill and practice ini terdiri dari tampilan dari sebuah pertanyaan atau masalah, penerimaan respon dari pengguna, periksaan jawaban, dan dilanjutkan dengan pertanyaan lainnya berdasarkan kebenaran jawaban. Jenis ini tidak menampilkan suatu instruksi, tetapi hanya mempraktekkan konsep yang sudah ada. Jadi jenis ini merupakan bagian dari testing. 14 Gambar 6 Multimedia interaktif model drill and practice (http://www.findapp.com/blog/category/Home-Education.aspx) c. Simulasi Simulasi dengan situasi kehidupan nyata yang dihadapi pengguna, dengan maksud untuk memperoleh pengertian global tentang proses. Simulasi digunakan untuk memperagakan sesuatu (keterampilan) sehingga pengguna merasa seperti berada dalam keadaan yang sebenarnya. Simulasi banyak digunakan pada pembelajaran materi yang membahayakan, sulit, atau memerlukan biaya tinggi, misalnya untuk melatih pilot pesawat terbang atau pesawat tempur. Gambar 7 Multimedia interaktif model simulasi (http://getwordwall.com/VisualSimulations) 15 d. Instructional games Model ini jika didesain dengan baik dapat memanfaatkan sifat kompetitif pengguna untuk memotivasi dan meningkatkan belajar. Seperti halnya simulasi, game pembelajaran yang baik sukar dirancang dan perancang harus yakin bahwa dalam upaya memberikan suasana permainan, integritas tujuan pembelajaran tidak hilang. Gambar 8 Multimedia interaktif model instructional games (http://celinedelosreyes.blogspot.co.id/2011/09/lesson-15-understandinghypermedia.html) e. Hybrid Model hybrid adalah gabungan dari dua atau lebih model multimedia pembelajaran. Contoh model hybrid adalah penggabungan model tutorial dengan model drill and practice dengan tujuan untuk memperkaya kegiatan pengguna, menjamin ketuntasan belajar, dan menemukan metode-metode yang berbeda untuk meningkatkan pembelajaran. Meskipun model hybrid bukanlah model yang unik, tetapi model ini menyajikan metode yang berbeda dalam kegiatan pembelajaran. Model hybrid memungkinkan pengembangan pembelajaran secara komprehensif yaitu menyediakan seperangkat kegiatan belajar yang lengkap. 16 Gambar 9 Multimedia interaktif model hybrid (http://advan.physiology.org/content/29/1/40/F4) f. Socratic Model ini berisi percakapan atau dialog antara pengguna dengan komputer dalam natural language. Bila pengguna dapat menjawab sebuah pertanyaan disebut Mixed-Initiative CAI. Socratic berasal dari penelitian dalam bidang intelegensia buatan (Artificial Intelegence). Gambar 10 Multimedia interaktif model Socratic 17 (http://er.educause.edu/articles/2005/1/nextgeneration-educationalsoftware-why-we-need-it-and-a-research-agenda-for-getting-it) g. Inquiry Model Inquiry adalah suatu sistem pangkalan data yang dapat dikonsultasikan oleh pengguna, dimana pangkalan data tersebut berisi data yang dapat memperkaya pengetahuan pengguna. Gambar 11 Multimedia interaktif model inquiry (http://www.enasco.com/product/SB48548M/) h. Informational Informational biasanya menyajikan informasi dalam bentuk daftar atau tabel. Informational menuntut interaksi yang sedikit dari pengguna. Gambar 12 Multimedia interaktif model information (http://hamishmultimediablog.blogspot.co.id/p/research.html) 18 Dalam kegiatan pembelajaran di kelas, multimedia dapat berfungsi sebagai suplemen yang sifatnya opsional, pelengkap (komplemen), atau bahkan pengganti guru (substitusi) - Suplemen (tambahan) Multimedia dikatakan sebagai suplemen (tambahan), apabila guru atau siswa mempunyai kebebasan memilih, apakah akan memanfaatkan multimedia atau tidak untuk materi pelajaran tertentu. Dalam hal ini, tidak ada keharusan bagi guru atau siswa untuk memanfaatkan multimedia. Meski bersifat opsional, guru yang memanfaatkan multimedia secara tepat dalam membelajarkan siswa atau para siswa sendiri yang berupaya mencari dan kemudian memanfaatkan multimedia tersebut tentulah akan memiliki tambahan pengetahuan atau wawasan. - Komplemen (pelengkap) Multimedia dikatakan sebagai komplemen (pelengkap) apabila multimedia tersebut diprogramkan untuk melengkapi atau menunjang materi pembelajaran yang diterima siswa di dalam kelas. Sebagai komplemen, multimedia diprogramkan sebagai materi reinforcement (pengayaan) atau remedial bagi siswa dalam mengikuti kegiatan pembelajaran. Multimedia dikatakan sebagai enrichment apabila kepada siswa yang dapat dengan cepat menguasai materi yang disampaikan guru secara tatap muka diberikan kesempatan untuk memanfaatkan multimedia tertentu yang memang dikembangkan secara khusus. Tujuannya adalah untuk lebih memantapkan tingkat penguasaan siswa terhadap materi pelajaran yang disajikan guru di dalam kelas. Multimedia dikatakan sebagai program remedial apabila kepada para siswa yang mengalami kesulitan memahami materi pelajaran yang disajikan guru secara tatap muka di kelas diberikan kesempatan untuk memanfaatkan multimedia yang memang dirancang secara khusus dengan tujuan agar para siswa semakin lebih mudah memahami materi pelajaran yang disajikan guru di kelas. - Substitusi (pengganti) Multimedia dikatakan sebagai substitusi (pengganti) apabila multimedia dapat menggantikan sebagian besar peran guru. Ini dapat menjadi alternatif sebagai sebuah model pembelajaran. Tujuannya adalah agar para siswa dapat secara luwes mengelola kegiatan pembelajarannya sesuai dengan 19 waktu, gaya belajar, dan kecepatan belajar masing-masing siswa. Ada 3 tiga alternatif model kegiatan pembelajaran yang dapat dipilih guru dan siswa, yaitu: sepenuhnya secara tatap muka yang pembelajarannya disertai dengan pemanfaatan multimedia, sebagian secara tatap muka dan sebagian lagi melalui multimedia, dan pembelajaran sepenuhnya melalui multimedia. D. Aktivitas Pembelajaran Pengajar memberikan beberapa contoh aplikasi multimedia. Peserta membentuk kelompok yang terdiri dari 3-5 orang. Masing-masing kelompok melakukan kegiatan berikut : 1. Berdiskusi untuk mengelompokkan aplikasi yang diberikan oleh pengajar, apakah termasuk multimedia interaktif atau bukan. 2. Memilih salah satu aplikasi multimedia interaktif dan menganalisis unsur interaktivitas apa saja yang ada dalam aplikasi tersebut 3. Berdiskusi untuk menentukan model multimedia interaktif yang sesuai untuk diterapkan dalam sebuah media pembelajaran berbasis komputer. E. Latihan Soal Setelah membaca uraian materi dan melakukan aktivitas pembelajaran, kerjakan soal-soal latihan berikut ini 1. Apa yang dimaksud dengan multimedia interaktif. 2. Jelaskan level interaktifitas dalam media pembelajaran berbasis komputer! 3. Jelaskan tujuan penggunaan simulasi dalam proses pembelajaran! F. Rangkuman - Multimedia interaktif adalah pemanfaatan komputer untuk membuat dan menggabungkan teks, gambar, suara, video, dan animasi dengan menggabungkan perangkat-perangkat tertentu yang dapat memungkinkan pengguna melakukan navigasi, berinteraksi dan berkomunikasi. - Terdapat beberapa tingkat interaktif dalam pembelajaran berbasis komputer, yaitu umpan balik, manipulasi, adaptasi dan komunikasi. 20 - Model multimedia interaktif yang digunakan untuk tujuan pembelajaran, diantaranya tutorial, drill and practice, simulasi, instructional games, hybrid, socratic, inquiry dan informational. G. Kunci Jawaban 1. Multimedia interaktif adalah pemanfaatan komputer untuk membuat dan menggabungkan teks, gambar, suara, video, dan animasi dengan menggabungkan perangkat-perangkat tertentu yang dapat memungkinkan pengguna melakukan navigasi, berinteraksi dan berkomunikasi. 2. Level interaktivitas dalam pembelajaran berbasis computer adalah : o Umpan balik, merupakan tingkat interaktif yang paling rendah, berkaitan dengan tersedianya umpan balik terhadap tindakan peserta yang telah ditentukan sebelumnya, misalnya langkah-langkah penyelesaian masalah, pertanyaan, jawaban, tombol lanjut yang disembunyikan. o Manipulasi, meliputi perubahan secara real time atau transformasi informasi sebagai tanggapan atas tindakan peserta, tingkat manipulasi menyediakan tanggapan yang fleksibel dan bervariasi. o Adaptasi, meliputi tanggapan yang disesuaikan dengan kebiasaan peserta sebelumnya, secara dinamis menyesuaikan pilihan tugas pembelajaran, prosedur dan format instruksional berdasarkan informasi tentang tindakan dan kebiasaan siswa secara online o Komunikasi, diwujudkan dengan lingkungan pembelajaran online dinamis yang fleksibel, tanggapan terhadap tindakan siswa tidak ditentukan sebelumnya. 3. Simulasi digunakan untuk memperagakan sesuatu (keterampilan) sehingga pengguna merasa seperti berada dalam keadaan yang sebenarnya. Simulasi banyak digunakan pada pembelajaran materi yang membahayakan, sulit, atau memerlukan biaya tinggi, misalnya untuk melatih pilot pesawat terbang atau pesawat tempur. H. Umpan Balik 21 Dari kegiatan pembelajaran konsep multimedia interaktif diharapkan untuk mengisi umpan balik dari aktivitas pembelajaran yang telah dilakukan dengan cara menjawab pertanyaan berikut : 1. Apakah Peserta sudah mengetahui apa itu konsep dasar multmedia interaktif? 2. Apakah peserta sudah mengetahui level interaktifitas multimedia interaktif? 3. Apakah Peserta sudah bisa mensimulasikan/mempergakan model – model multmedia interaktif? 22 23 24 Storyboard A. Tujuan 1. Melalui diskusi peserta mengidentifikasi informasi yang ada dalam sebuah storyboard secara santun dan menghargai pendapat orang lain 2. Melalui observasi peserta membuat storyboard media pembelajaran interaktif sebuah topik sesuai mata pelajaran yang di ampunya menggunakan format double coloumn secara teliti dan bertanggung jawab B. Indikator Pencapaian Kompetensi 1. Mengidentifikasi informasi storyboard 2. Membuat storyboard media pembelajaran interaktif sebuah topik sesuai mata pelajaran yang di ampunya menggunakan format double coloumn. C. Uraian Materi Storyboard merupakan sebuah dokumen yang penting dalam produksi multimedia interaktif. Storyboard memuat instruksi untuk pemrograman, script audio, dan deskripsi detail element-elemen visual seperti teks, video, gambar dan animasi. Sebelum membuat Storyboard, disarankan untuk membuat cakupan storyboard terlebih dahulu dalam bentuk rincian naskah yang kemudian akan dituangkan detail grafik dan visual untuk mempertegas dan memperjelas tema. Untuk mempermudah membuat proyek, maka harus dibuat sebuah rencana kasar sebagai dasar pelaksanaan. Outline dijabarkan dengan membuat point-point pekerjaan yang berfungsi membantu untuk mengidentifikasi material apa saja yang harus dibuat, didapatkan, atau disusun. Terdapat beberapa ketentuan umum dalam pembuatan storyboard multimedia interaktif : - Bentuk-bentuk gambar yang disiapkan disertai dengan penjelasanpenjelasan atau narasi. - Penulisan storyboard ini sebaiknya diisi unsur visual terlebih dahulu. 25 - Narasi biasanya disusun kemudian untuk melengkapi hal-hal yang sulit diungkapkan dalam bentuk visual. - Bahasa yang digunakan adalah bahasa lisan bukan bahasa tulisan (terutama yang harus dibacakan oleh narrator) - Struktur kalimat sederhana, hindari kalimat-kalimat yang panjang dan berbelit. - Simbol dalam bentuk yang sederhana, jelas maknanya serta sudah diketahui oleh siswa. - Gambar dalam bentuk yang menarik, warna kontras (kecuali untuk background) komposisi yang tepat dan sederhana, mudah dibaca dan dipahami. Terdapat beberapa format yang biasa digunakan dalam membuat storyboard multimedia interaktif, yaitu format kartu, double coloumn dan landscape. a. Kartu No. Frame/slide Visual Catatan Audio Visual berisi gambar berbentuk foto atau grafis b. Double coloum No Nomor frame (satu tampilan di layar monitor) 26 Keterangan Berisi keterangan yang menunjukkan posisi frame, misalnya menu, sub nemu, uraian menu dan lain-lain visual audio Berisi semua unsur audio, meliputi narasi, music, sound efect Berisi semua unsur yang divisualkan, meliputi teks, gambar, video, Penggunaan Storyboard jelas akan mempermudah pelaksanaan dalam proses produksi nantinya. Format apapun yang dipilih untuk storyboard, informasi berikut harus dicantumkan: - Sketsa atau gambaran layar, halaman atau frame. - Warna, penempatan dan ukuran grafik, jika perlu. - Teks asli, jika ditampilkan pada halaman atau layar. - Warna, ukuran dan tipe font jika ada teks. - Narasi jika ada. - Animasi jika ada. - Video, jika ada. - Audio, jika ada. - Interaksi dengan pengguna, jika ada. - Dan hal-hal yang perlu diketahui oleh staf produksi. Storyboard dibuat oleh desainer instruksional dengan memperhatikan masukan dari anggota pengembang produk yang lain misal videographer, animator, programmer. Storyboard menjadi dokumen utama desain yang menjadi acuan bagi seluruh anggota tim dalam membuat produk multimedia interaktif. a. Panduan untuk interaktivitas Interaktivitas adalah interaksi yang dibentuk oleh pengguna dan komputer. Kuantitas dari interaksi tergantung pada beberapa kriterian yaitu jenis input yang dibutuhkan oleh pengguna, bagaimana sebuah respon dianalisis, dan bagaimana komputer memberikan respon balik pada pengguna. Berikut ini beberapa panduan untuk meningkatkan interaktifitas dalam aplikasi multimedia interaktif. - Sediakan kesempatan untuk berinteraksi setiap tiga atau empat halaman, atau satu interaksi per menit. - Pecah materi menjadi beberapa bagian dan buatlah dalam bentuk pertanyaan dan umpan balik, review secara berkala dan rangkuman dari setiap bagian. - Sediakan sebanyak mungkin pertanyaan tanpa menganggu kelangsungan aliran instruksi pembelajaran. - Berikan pertanyaan diakhir setiap bagian materi 27 - Berikan pertanyaan dapat dijawab oleh pengguna berdasarkan materi yang telah dipelajarinya - Berikan pertanyaan pada pengguna agar mereka mengaplikasikan apa yang telah dipelajari, bukan sekedar mengingat dan mengulang jawabannya - Gunakan pertanyaan retorika untuk memicu pengguna berpikir tentang materi yang dipelajarinya. - Disarankan membuat desain agar pengguna bukan menemukan informasi dalam bentuk linear namun memungkinkan pengguna untuk mengeksplorasi keseluruhan aplikasi. b. Panduan untuk kendali pengguna Kendali pengguna berkaitan dengan sejauh mana pengguna dapat melakukan perubahan terhadap pelajaran dan lingkungan pembelajaran, apa yang akan dipelajari dan bagaimana mempelajarinya. Berikut ini beberapa panduan bagi perancangan kendali pengguna baik dalam hal urutan maupun isi dari aplikasi multimedia interaktif. - Gunakan kendali pengguna terhadap topik-topik materi jika pengguna tidak harus menyelesaikan materi yang panjang dalam tiap topik dan pengguna sudah familiar dengan materi dan diperbolehkan memilih topik apa yang akan dipelajari - Jangan gunakan kendali pengguna terhadap topik materi jika ada persyaratan yang harus dipenuhi oleh pengguna sebelum melanjutkan ke topik baru. - Gunakan kendali terhadap materi jika pengguna sudah memiliki cukup pengetahuan terhadap materi, pengguna memiliki kemampuan yang tianggi dan diperkirakan pembelajaran akan lebih berhasil jika mereka di perbolehkan memilih sendiri materi yang akan dipelajari - Jangan gunakan kendali penuh terhadap materi jika semua materi diperlukan untuk penyelesaian program pembelajaran. c. Panduan untuk umpan balik Umpan balik memberikan informasi kepada pengguna mengenai ketepatan tanggapannya. Umpan balik dapat digunakan untuk mengetahui kemungkinan salah persepsi pada pengguna atau pengetahuan dasar yang diperlukan. Umpan balik juga dapat digunakan untuk membantu pengguna 28 belajar, mengingat dan mengukur seberapa banyak yang telah dipelajari. Berikut ini beberapa panduan dalam membuat umpan balik - Buatlah umpan balik satu layar dengan pertanyaan dan jawaban pengguna - Berikan umpan balik beberapa saat setelah pengguna memberikan tanggapan - Sediakan umpan balik untuk memverifikasi suatu kebenaran - Untuk jawaban yang salah, sediakan “hint” dan biarkan pengguna mencoba menjawab lagi Berikut ini adalah sebuah contoh storyboard media pembelajaran interaktif untuk mata kuliah Aljabar dengan pokok bahasan Program Linear No 1 Keterangan Opening. Visual Audio Animasi hitungan mundur: Musik pembuka. 10, 9, 8, 7, 6, 5, 4, 3, 2, 1. (Lanjut) 2 Tertulis: “Selamat Narasi: Datang dalam Selamat Datang Penjelajahan dalam Penjelajahan Dunia Matematika yang Dunia Matematika Menyenangkan!” yang Menyenangkan! (Lanjut) 3 Judul. PROGRAM LINEAR Musik latar. Narasi: Kali ini, mari kita mencoba melanjutkan pembahasan perkuliahan matematika, dengan lebih memfokuskan kajian pada permasalahan Program Linear. 29 4 Menu utama. Animation Button and Effect Button Transition: MENU 1. STANDAR KOMPETENSI 2. SEJARAH MATEMATIKA 3. PETUNJUK 4. MATERI 5. QUIZ 6. KELUAR 5 Sub-menu BAGIAN 1 Narasi: utama: Standar Kompetensi: Silakah Anda simak STANDAR Merancang KOMPETENSI menggunakan model dan dengan baik satandar kompetensi, matematika program linear kompetensi dasar,serta sertamenggunakan sifat dan beberapa aturan yang indikator yang berkaitan dengan barisan, diharapkan untuk deret, Anda capai setelah matriks, vektor, transformasi, pembelajaran ini. fungsi eksponensial dan logaritma Musik latar. dalam pemecahan masalah. BAGIAN 2 ...... KEMBALI KE MENU UTAMA 6 30 Sub-menu: (Disediakan pilihan-pilihan) Effect Button. SEJARAH 1. ZAMAN PURBA Narasi: MATEMATIKA 2. ZAMAN MESIR Kita coba kilas balik 3. ZAMAN YUNANI perkembangan 4. ZAMAN PERTENGAHAN matematika 5. ZAMAN RENAISSANCE sejakzaman purba 6. ABAD KE-17 hingga 7. ABAD KE-18 saat ini. Bisakah Anda 8. ABAD KE-19 membedakan ciri khas 9. ABAD KE-20 untuk setiap zaman? KEMBALI KE MENU UTAMA 7 Sub-sub-menu: (Tertulis): SEJARAH Kegiatan manusia mulai MATEMATIKA tercatat sejak ZAMAN PURBA millennium kedua sebelum Musik latar. masehi. Piramid di Mesir merupakan saksi dari pengetahuan dasar tentang survey dan geometri sekitar tahun 2900 masehi. Dari daun papirus zaman itu ditemukan catatan berbagai masalah matematika praktis mengenai survei, distribusi gaji, rekening roti, luas permukaan geometri sederhana, volume piramid terpancung, dan persamaan berpangkat satu atau dua. Aritmetika zaman Mesir purba didasarkan atas berhitung desimal (basis-10) 31 yang relatif sederhana. Sistem ini didasarkan atas penalaran biologi bahwa jumlah jari tangan manusia ada sepuluh. KEMBALI KE SEJARAH MATEMATIKA Dan seterusnya untuk setiap sub submenu sejarah matematika 8 Sub-menu Caption: utama: PETUNJUK PROGRAM: PETUNJUK 1. Klik tombol menu untuk Musik latar memilih materi dan latihan soal. 2. Klik ikon speaker untuk menghidupkan atau mematikan musik (backsound). 3. Klik panah kanan untuk beralih ke halaman berikutnya, dan panah kiri untuk beralih ke halaman selanjutnya. 4. Klik KELUAR untuk keluar dari Program 9 Sub-menu Animation button, transition, Musik latar dan effect utama: mouse button. MATERI click: MATERI:  32 SISTEM PERTIDAKSAMAAN DUAVARIABEL  PROGRAM LINEAR**  NILAI OPTIMUM KEMBALI KE MENU UTAMA 10 Sub-sub-menu: PROGRAM LINEAR Narasi: PROGRAM MODEL MATEMATIKA Berbagai persoalan LINEAR VIDEO TENTANG yang berkaitan (** yang dipilih) AKTIFITAS EKONOMI dengan optimasi MASYARAKAT, MISALNYA (maksimasi atau JUAL BELI minimasi) dapat DAN PRODUKSI. diatasi dengan bantuan program KLIK DI SINI linear. Program linear membantu KEMBALI KE MATERI pembuatan KEMBALI KE MENU keputusan untuk UTAMA memilih alternatif paling tepat dan merupakan pemecahan paling baik. Penggunaannya tidak hanya terbatas pada maksimasi keuntungan atau minimasi kerugian, tetapi juga dapat digunakan untuk memecahkan persoalan “allocatingmanufactured product”, “optimal bombing pattern”, 33 “personnel assignment”, dan lainlain. Dan seterusnya untuk halaman-halaman sub submenu program linear 11 Sub-menu QUIZ Musik latar. utama: PROGRAM QUIZ MODEL Narasi: MATEMATIKA Silakan LINEAR DAN Muncul kotak kosong yang ketiknama Anda dan harus diisi oleh mahasiswa: pada NAMA kotak kosong yang tersedia NIM KEMBALI QUIZ 12 Sub-menu PETUNJUK: Musik latar. utama: KLIK TOMBOL A, B, C, D, QUIZ ATAU E, UNTUK JAWABAN YANG ANDA ANGGAP BENAR PADA SOAL-SOAL BERIKUT INI LANJUTKAN 13 SOAL 1 (Animasi) Musik latar PERTANYAAN: Sebuah perusahaan Off the screen telekomunikasi sedang Kunci Jawaban: memasang 2 tipe kabel di E suatu daerah, yaitu tipe A dan B. Banyaknya kabel tipe A diperkirakan tidak lebih dari 300 m, sedangkan kabel 34 NIM tipe B diperlukan paling sedikit 200 m, tetapi tidak lebih dari 400 m. Jika x dan y menyatakan banyaknya tipe kabel A dan B yang harus dibawa, maka model matematika yang sesuai dengan masalah ini adalah... a. x ≤ 300 y ≥ 200, y ≥ 400 x ≥ 0 dan y ≥ 0 b. x ≥ 300 y ≤ 200, y ≥ 400 x ≥ 0 dan y ≥ 0 c. x ≥ 300 y ≤ 200, y ≤ 400 x ≥ 0 dan y ≥ 0 d. x ≥ 300 y ≤ 200, y ≤ 400 x ≤ 0 dan y ≤ 0 e. x ≤ 300 y ≥ 200, y ≤ 400 x ≥ 0 dan y ≥ 0 SOAL KE-2 Dan seterusnya sampai semua soal tampil D. Aktivitas Pembelajaran Pengajar memberikan beberapa contoh storyboard. Peserta diklat membentuk kelompok yang terdiri dari 3-5 orang. Masing-masing kelompok melakukan kegiatan berikut : - Mengamati storyboard yang diberikan oleh pengajar - Mengidentifikasi informasi-informasi yang terdapat dalam storyboard 35 - Membuat laporan hasil pengamatan dan identifikasi, informasi apa saja yang perlu ditambahkan jika memang merasa ada informasi yang kurang dalam storyboard tersebut. E. Latihan Soal Buatlah storyboard media pembelajaran interaktif sesuai mata pelajaran yang Anda ajarkan di sekolah dengan menggunakan format double coloumn. Pilihlah satu topik dari mata pelajaran itu. F. Rangkuman 1. Storyboard memuat instruksi untuk pemrograman, script audio, dan deskripsi detail element-elemen visual seperti teks, video, gambar dan animasi. Terdapat beberapa format yang biasa digunakan dalam membuat storyboard multimedia interaktif, yaitu format kartu, double coloumn dan landscape. 2. Sebuah storyboard yang baik harus menyajikan informasi yang dibutuhkan oleh bagian pelaksana produksi, informasi-informasi tersebut adalah - Sketsa atau gambaran layar, halaman atau frame. - Warna, penempatan dan ukuran grafik, jika perlu. - Teks asli, jika ditampilkan pada halaman atau layar. - Warna, ukuran dan tipe font jika ada teks. - Narasi jika ada. - Animasi jika ada. - Video, jika ada. - Audio, jika ada. - Interaksi dengan pengguna, jika ada. G. Kunci Jawaban Cheklist kelengkapan pembuatan storyboard No Unsur storyboard 1 Sketsa 2 Narasi 3 Informasi Visual teks 36 Ada Tidak 4 Informasi visual background 5 Animasi 6 Video 7 Audio 8 Navigasi 9 Alokasi waktu H. Umpan Balik Dari kegiatan pembelajaran storyboard dalam multimedia interaktif diharapkan untuk mengisi umpan balik dari aktivitas pembelajaran yang telah dilakukan dengan cara Apakah peserta dapat membuat storyboard yang menyajikan informasi yang dibutuhkan bagian pelaksana produksi ? 37 38 39 40 AntarMuka Multimedia Interaktif A. Tujuan 1. Melalui diskusi peserta dapat menganalisis prinsip-prinsip dasar dalam pembuatan antarmuka sebuah aplikasi bagi pengguna secara santun dan menghargai pendapat peserta lain. 2. Melalui observasi peserta dapat menentukan tipe antarmuka yang digunakan dalam aplikasi multimedia pembelajaran interaktif secara teliti dan bertaggung jawab B. Indikator Pencapaian Kompetensi 1. Menganalisis prinsip-prinsip dasar dalam pembuatan antarmuka sebuah aplikasi bagi pengguna 2. Menyajikan hasil analisis prinsip-prinsip dasar dalam pembuatan antarmuka sebuah aplikasi bagi pengguna 3. Menentukan tipe antarmuka yang digunakan dalam aplikasi multimedia pembelajaran interaktif C. Uraian Materi Antarmuka pemakai (User Interface) merupakan mekanisme komunikasi antara pengguna (user) dengan sistem. Antarmuka pemakai dapat menerima informasi dari pengguna dan memberikan informasi kepada pengguna untuk membantu mengarahkan alur penelusuran masalah sampai ditemukan suatu solusi. Sebuah Sistem antarmuka pengguna memiliki peranti masukan (seperti keyboard, mouse, dan media input lainnya), peranti keluaran (seperti monitor, printer), masukan dari pengguna (seperti garis, gerakan mouse dan ketikan keyboard) dan hasil yang dikeluarkan oleh komputer (seperti grafik, bunyi dan tulisan). Terdapat beberapa prinsip yang harus diperhatikan dalam pembuatan suatu antarmuka sebuah aplikasi, diantaranya user compatibility, product compatibility, task compatibility, workflow compatibility, consistency, familiarity, simplicity. 41 a. User compatibility Antarmuka merupakan topeng dari sebuah sistem atau sebuah pintu gerbang masuk ke sistem dengan diwujudkan ke dalam sebuah aplikasi perangkat lunak. Oleh karena itu sebuah perangkat lunak seolah-olah mengenal usernya, mengenal karakteristik usernya, dari sifat sampai kebiasaan manusia secara umum. Desainer harus mencari dan mengumpulkan berbagai karakteristik serta sifat dari user karena antar muka harus disesuaikan dengan user yang jumlahnya biasa jadi lebih dari satu dan mempunyai karakter yang berbeda. Hal tersebut harus terpikirkan oleh desainer dan tidak dianjurkan merancang antar muka dengan didasarkan pada dirinya sendiri. b. Product compatibility Sebuah aplikasi yang menggunakan antarmuka harus sesuai dengan sistem aslinya. Seringkali sebuah aplikasi menghasilkan hasil yang berbeda dengan sistem manual atau sistem yang ada. Hal tersebut sangat tidak diharapkan dari perusahaan karena dengan adanya aplikasi perangkat lunak diharapkan dapat menjaga produk yang dihasilkan dan mampu menghasilkan produk yang jauh lebih baik. c. Task compatibility Sebuah aplikasi yang menggunakan antarmuka harus mampu membantu para user dalam menyelesaikan tugasnya. Semua pekerjaan serta tugastugas user harus diadopsi di dalam aplikasi tersebut melalui antarmuka.Sebisa mungkin user tidak dihadapkan dengan kondisi memilih dan berpikir, tapi user dihadapkan dengan pilihan yang mudah dan proses berpikir dari tugas-tugas user dipindahkan dalam aplikasi melalui antarmuka. Contoh : User hanya klik setup, tekan tombol next, next, next, finish, ok untuk menginstal suatu perangkat lunak. d. Workflow compatibility Sebuah aplikasi sistem sudah pasti mengapdopsi sistem manualnya dan didalamnya tentunya terdapat urutan kerja dalam menyelesaikan pekerjaan. Dalam sebuah aplikasi, software engineer harus memikirkan berbagai runutan-rununtan pekerjaan yang ada pada sebuah sistem. Jangan sampai user mengalami kesulitan dalam menyelesaikan pekerjaannya karena user 42 mengalami kebingungan ketika urutan pekerjaan yang ada pada sistem manual tidak ditemukan pada software yang dihadapinya. Selain itu user jangan dibingungkan dengan pilihan-pilihan menu yang terlalu banyak dan semestinya menu-menu merupakan urutan dari runutan pekerjaan. Sehingga dengan workflow compatibility dapat membantu seorang user dalam mempercepat pekerjaannya. e. Consistency Sebuah sistem harus sesuai dengan sistem nyata serta sesuai dengan produk yang dihasilkan. Oleh karena itu software engineer harus memperhatikan hal-hal yang bersifat konsisten pada saat merancang aplikasi khususnya antarmuka, contoh : penerapan warna, struktur menu, font, format desain yang seragam pada antarmuka di berbagai bagian, sehingga user tidak mengalami kesulitan pada saat berpindah posisi pekerjaan atau berpindah lokasi dalam menyelesaikan pekerjaan. Hal itu didasarkan pada karakteristik manusia yang mempunyai pemikiran yang menggunakan analogi serta kemampuan manusia dalam hal memprediksi. Contoh : keseragaman tampilan toolbar pada Word, Excell, PowerPoint, Access hampir sama. f. Familiarity Sifat manusia mudah mengingat dengan hal-hal yang sudah sering dilihatnya atau didapatkannya. Secara singkat disebut dengan familiar. Antarmuka sebisa mungkin di desain sesuai dengan antarmuka pada umumnya, dari segi tata letak, model dan sebagainya. Hal ini dapat membantu user cepat berinteraksi dengan sistem melalui antarmuka yang familiar bagi user. g. Simplicity Kesederhanaan perlu diperhatikan pada saat membangun antarmuka. Tidak selamanya antarmuka yang memiliki menu banyak adalah antarmuka yang baik. Kesederhanaan disini lebih berarti sebagai hal yang ringkas dan tidak terlalu berbelit. User akan merasa lelah dan bosan jika pernyataan, pertanyaan dan menu bahkan informasi yang dihasilkan terlalu panjang dan berbelit. User lebih menyukai hal-hal yang bersifat sederhana tetapi mempunyai kekuatan/ bobot. h. Direct manipulation 43 User berharap aplikasi yang dihadapinya mempunyai media atau tools yang dapat digunakan untuk melakukan perubahan pada antar muka tersebut. User ingin sekali aplikasi yang dihadapannya bisa disesuaikan dengan kebutuhan, sifat dan karakteristik user tersebut. Selain itu, sifat dari user yang suka mengubah atau mempunyai rasa bosan. Contoh tampilan warna sesuai keinginan (misal pink) pada window bisa dirubah melalui desktop properties, tampilan skin winamp bisa diubah, dan lain-lain. i. Control Prinsip control ini berkenaan dengan sifat user yang mempunyai tingkat konsentrasi yang berubah-ubah. Hal itu akan sangat mengganggu proses berjalannya sistem. Kejadian salah ketik atau salah entry merupakan hal yang biasa bagi seorang user. Akan tetapi hal itu akan dapat mengganggu system dan akan berakibat sangat fatal karena salah memasukkan data 1 digit/1 karakter saja informasi yang dihasilkan sangat dimungkinkan salah. Oleh karena itu software engineer haruslah merancang suatu kondisi yang mampu mengatasi dan menanggulangi hal-hal seperti itu. Contoh : “illegal command”, “can’t recognize input” sebagai portal jika terjadi kesalahan. j. Flexibility Fleksibel merupakan bentuk dari dari solusi pada saat menyelesaikan masalah. Software engineer dapat membuat berbagai solusi penyelesaian untuk satu masalah. Sebagai contoh adanya menu, hotkey, atau model dialog yang lainnya. Ada 5 tipe antarmuka yang dapat digunakan untuk menjembatani interaksi antara pengguna dengan aplikasi multimedia interaktif, yaitu direct manipulation, menu selection, form fill in, command language dan natural language. 1. Direct manipulation – pengoperasian secara langsung Interaksi langsung dengan objek pada layar. Misalnya delete file dengan memasukkannya ke trash. Kelebihannya adalah waktu pembelajaran pengguna sangat singkat, umpan balik langsung diberikan pada tiap aksi sehingga kesalahan terdeteksi dan diperbaiki dengan cepat. Kekurangannya adalah antarmuka tipe ini rumit dan memerlukan banyak fasilitas pada sistem komputer, cocok untuk penggambaran secara visual untuk satu operasi atau objek. 44 Gambar 13 Direct manipulation 2. Menu selection – pilihan berbentuk menu Memilih perintah dari daftar yang disediakan. Misalnya saat klik kanan dan memilih aksi yang dikehendaki. Kelebihannya adalah pengguna tidak perlu ingat nama perintah, pengetikan minimal, dan tingkat kesalahan rendah. Kekurangannya adalah tidak ada logika AND atau OR, perlu ada struktur menu jika banyak pilihan, dan menu dianggap lambat oleh pengguna ahli dibanding command language. Gambar 14 Menu selection 45 3. Form fill-in – pengisian form Mengisi area-area pada form. Kelebihannya masukan data yang sederhana dan mudah dipelajari. Kekurangannya memerlukan banyak tempat di layar, harus menyesuaikan dengan form manual dan kebiasaan pengguna. Gambar 15 Form fill in 4. Command language – perintah tertulis Menuliskan perintah yang sudah ditentukan pada program. Kelebihannya perintah diketikan langsung pada sistem, dapat diterapkan pada terminal yang murah, kombinasi perintah dapat dilakukan. Misal copy file dan rename nama file. Kekurangannya perintah harus dipelajari dan diingat cara penggunaannya, tidak cocok untuk pengguna biasa, sering terjadi kesalahan menggunakan perintah, perlu ada sistem pemulihan kesalahan. 46 Gambar 16 Command language 5. Natural language – perintah dengan bahasa alami Menggunakan bahasa alami untuk mendapatkan hasil. Contoh: search engine di Internet. Kelebihannya perintah dalam bentuk bahasa alami, dengan kosa kata yang terbatas (singkat) misalnya kata kunci yang kita tentukan untuk dicari oleh search engine. Kekurangannya tidak semua sistem cocok menggunakan ini. Gambar 17 Natural language (http://www.intellexer.com/natural_language.html) Berdasarkan storyboard pada kegiatan belajar 2 dapat dibuat rancangan antarmukanya sebagai berikut a. Rancangan tampilan awal Tampilan awal adalah animasi hitungan waktu mundur. Setelah hitungan mencapai angka 1 maka akan tampil ucapan selamat datang bagi pengguna aplikasi 47 Gambar 18 Rancangan tampilan awal b. Rancangan tampilan halaman judul Halaman judul menampilkan judul materi dalam aplikasi media pembelajaran interaktif. Pada halaman ini sudah ditampilkan menu-menu dalam aplikasi yaitu menu standar kompetensi, sejarah matematika, petunjuk, materi, kuis dan keluar. Dari halaman judul ini, pengguna dapat langsung memilih salah satu menu yang ada dalam aplikasi. Jika pengguna memilih menu keluar, maka aplikasi akan tertutup. Gambar 19 Rancangan tampilan halaman judul 48 c. Rancangan tampilan halaman standar kompetensi Jika pengguna memilih menu standar kompetensi, maka akan tampil halaman yang memuat informasi mengenai standar kompetensi. Pada halaman ini terdapat tombol untuk lanjut ke halaman standar kompetensi berikutnya dan tombol kembali untuk menuju halaman sebelumnya. Terdapat juga tombol home yang jika dipilih akan membawa pengguna kembali ke tampilan judul. Gambar 20 Rancangan tampilan menu STANDAR KOMPETENSI d. Rancangan tampilan menu sejarah matematika Sejarah matematika sangat panjang dan dapat dikelompokkan berdasarkan zamannya. Oleh karena itu, pada menu sejarah matematika terdapat beberapa tombol pilihan untuk mempelajari sejarah matematika sesuai dengan zamannya. Pengguna tinggal memilih salah satu zaman yang akan di pelajari, maka akan tampil halaman sejarah matematika sesuai dengan zamannya. Gambar 21 Rancangan tampilan menu SEJARAH MATEMATIKA 49 e. Rancangan tampilan menu kuis Pada menu kuis terdapat form fill in. Pengguna harus memasukkan nama dan NIM, setelah itu menekan tombol lanjut. Jika tombol lanjut di tekan, maka akan akan menuju ke halaman yang menampilkan soal-soal kuis. Gambar 22 Rancangan tampilan menu KUIS D. Aktivitas Pembelajaran Pengajar memberikan beberapa contoh aplikasi multimedia interaktif. Peserta membentuk kelompok yang terdiri dari 3-5 orang. Masing-masing kelompok melakukan kegiatan berikut : - Melakukan pengamatan terhadap antarmuka aplikasi multimedia interaktif - Menganalisis prinsip user compatibility, product compatibility, task compatibility, workflow compatibility, consistency, familiarity, simplicity yang ada dalam antarmuka aplikasi multimedia interaktif. - Menuliskan laporan hasil analisis prinsip user compatibility, product compatibility, task compatibility, workflow compatibility, consistency, familiarity, simplicity yang ada dalam antarmuka aplikasi multimedia interaktif. 50 E. Latihan Soal Berdasarkan storyboard yang telah Anda buat dalam kegiatan belajar 2, cobalah untuk membuat rancangan antarmukanya untuk tampilan awal (halaman judul) dan halaman isi. F. Rangkuman 1. Antarmuka pemakai (User Interface) merupakan mekanisme komunikasi antara pengguna (user) dengan sistem. 2. Terdapat beberapa prinsip yang harus diperhatikan dalam pembuatan suatu antarmuka sebuah aplikasi, diantaranya user compatibility, product compatibility, task compatibility, workflow compatibility, consistency, familiarity, simplicity. 3. Ada 5 tipe antarmuka yang dapat digunakan untuk menjembatani interaksi antara pengguna dengan aplikasi multimedia interaktif, yaitu direct manipulation, menu selection, form fill in, command language dan natural language. G. Kunci Jawaban Ceklist pembuatan antarmuka multimedia interaktif No Kelengkapan desain antarmuka 1 Halaman judul 2 3 4 4 Halaman menu utama Halaman submenu 1 Halaman submenu 2 Halaman submenu 3 Ada Tidak H. Umpan Balik Dari kegiatan pembelajaran antarmuka multimedia interaktif diharapkan untuk mengisi umpan balik dari aktivitas pembelajaran yang telah dilakukan dengan cara peserta dapat merancang antarmukanya multimedia interakti, jika belum peserta disarankan mempelajari dulu kegiatan pembelajaran 2 tentang storyboard multimedia interaktif. 51 52 53 54 Navigasi Multimedia Interaktif A. Tujuan 1. Melalui diskusi peserta dapat mengidentifikasi struktur navigasi aplikasi multimedia interaktif secara santun dan menghargai pendapat orang lain. 2. Melalui observasi peserta dapat menentukan struktur navigasi dalam aplikasi multimedia pembelajaran interaktif secara teliti dan bertanggung jawab. B. Indikator Pencapaian Kompetensi 1. Mengidentifikasi struktur navigasi aplikasi multimedia interaktif 2. Menentukan struktur navigasi dalam aplikasi multimedia pembelajaran interaktif. C. Uraian Materi 1. Struktur Navigasi Salah satu ciri multimedia interaktif adalah kemudahan navigasi. Sebuah aplikasi multimedia interaktif harus dirancang sesederhana mungkin sehingga pengguna tidak akan kesulitan dalam mengoperasikannya, bahkan sampai bentuk tombol atau ikon pun harus dibuat sekomunikatif mungkin. Misalnya saat kursor berada di atas di teks/tombol yang memiliki link ke interface lain, maka kursor otomatis akan berubah menjadi ikon „tangan‟, yang artinya menandakan bahwa pengguna dipersilakan mengklik bila ingin mengakses informasi yang ada di dalamnya. Gambar 23 Hubungan antar halaman 55 Struktur navigasi digunakan sebagai penuntun alur sebuah aplikasi multimedia atau dapat pula dianalogikan sebagai diagram alur dalam perancangan bahasa pemrograman. Struktur navigasi berfungsi untuk menggambarkan dengan jelas hubungan dan rantai kerja seluruh elemen yang akan digunakan dalam aplikasi. Dengan penggambaran struktur navigasi, pembuatan sebuah aplikasi dapat sistematis dan mudah. Jenis struktur navigasi dikelompokkan menjadi 4 struktur yang berbeda yaitu linier, hirarki, jaringan dan kombinasi yang mempunyai perbedaan dalam bentuk rangkaiannya. a. Struktur linear Struktur yang paling sederhana dalam mendesain aliran aplikasi multimedia adalah struktur linier. Dalam menampilkan aplikasi multimedia dapat maju (next) dan mundur (back), jika mouse di-klik akan menampilkan isi informasi dari aplikasi multimedia tersebut dan bila di-klik lagi akan muncul pada halaman berikutnya. Struktur Linear banyak digunakan dan berhasil dengan baik pada beberapa macam aplikasi seperti: o presentasi o aplikasi computer based – training o aplikasi yang memerlukan informasi berurutan Gambar 24 Struktur navigasi linear b. Struktur hirarki Struktur hirarki merupakan struktur seperti tangga atau pohon, dimana masing–masing objek menyediakan sebuah menu pilihan yang memiliki lebih banyak menu dengan banyak pilihan. Tidak ada batas ukuran atau jumlah menu dan sub-menu yang dapat dimiliki dalam sebuah struktur hirarki. 56 Struktur hirarki diadaptasi dari top – down design. Konsep navigasi ini dimulai dari satu node yan menjadi halaman utama atau halaman awal. Dari halaman tersebut dapat dibuat beberapa cabang ke halaman – halaman level 1. Halaman tersebut adalah isi atau halaman penunjang dari sebuah halaman utama, dari tiap halaman level 1 dapat juga dikembangkan menjadi beberapa cabang lagi Gambar 25 Struktur navigasi hirarki c. Struktur jaringan (spoke and hub) Bentuk struktur jaringan merupakan desain yang paling kompleks dengan banyak objek dalam setiap arah pada setiap objek dalam aplikasi multimedia. Untuk membuat struktur hyperlink yang fleksibel, struktur jaringan dapat bekerja dengan baik. Hub dinyatakan dengan halaman utama yang mempunyai hubungan dengan setiap node. Setiap node dapat berhubungan kembali ke halaman utama. Pada model ini hanya terdapat dua macam link, yaitu dari halaman utama ke halaman tertentu, dan dari halaman tersebut kembali ke halaman utama. 57 Gambar 26 Struktur navigasi spoke and hub d. Struktur kombinasi Struktur kombinasi merupakan struktur seperti tangga, pohon-pohon gabungan antara struktur linier dan menu, di mana di dalamnya tidak ada batas untuk menyediakan banyak pilihan dengan menu utama dan sub menu yang ada. Gambar 27 Struktur navigasi kombinasi 58 2. Perancangan Struktur Navigasi Perancangan struktur navigasi media pembelajaran interaktif untuk mata kuliah Aljabar dengan pokok bahasan Program Linear adalah sebagai berikut Gambar 28 Struktur navigasi media pembelajaran interaktif Aljabar Linear a. Navigasi untuk menampilkan halaman menu utama Saat pertama pengguna menjalankan aplikasi, akan tampil intro/opening. Pada halaman intro terdapat tombol untuk menampilkan menu utama. Untuk lebih jelasnya dapat dilihat pada gambar berikut 59 Gambar 29 Navigasi untuk melihat halaman menu utama b. Navigasi untuk menampilkan halaman Standar kompetensi Saat pertama pengguna menjalankan aplikasi, akan tampil intro/opening. Pada halaman intro terdapat tombol untuk menampilkan halaman menu utama. Setelah menu utama tampil, pengguna menekan tombol standar kompetensi, maka akan tampil halaman standar kompetensi Gambar 30 Navigasi untuk melihat halaman standar kompetensi c. Navigasi untuk menampilkan halaman Sejarah matematika Saat pertama pengguna menjalankan aplikasi, akan tampil intro/opening. Pada halaman intro terdapat tombol untuk menampilkan 60 halaman menu utama. Setelah menu utama tampil, pengguna menekan tombol sejarah matematika, maka akan tampil halaman sejarah matematika Gambar 31 Navigasi untuk melihat halaman sejarah matematika d. Navigasi untuk menampilkan halaman Materi Gambar 32 Navigasi untuk melihat halaman Materi 61 e. Navigasi untuk menampilkan halaman Petunjuk Gambar 33 Navigasi untuk melihat halaman petunjuk f. Navigasi untuk menampilkan halaman Kuis Gambar 34 Navigasi untuk melihat halaman kuis D. Aktivitas Pembelajaran 1. Pengajar memberikan beberapa contoh aplikasi multimedia interaktif. Peserta diklat membentuk kelompok yang terdiri dari 3-5 orang. Masingmasing kelompok melakukan kegiatan berikut : o Mengamati aplikasi multimedia interaktif dengan mencoba menu-menu yang ada 62 o Mengidentifikasi struktur navigasi yang digunakan dalam aplikasi multimedia interaktif tersebut o Membuat laporan hasil pengamatan 2. Berdasarkan storyboard yang telah Anda buat dalam kegiatan belajar 2 dan rancangan antarmuka dalam kegiatan belajar 3, Buatlah rancangan struktur navigasi yang akan Anda gunakan dalam aplikasi multimedia pembelajaran interaktif yang Anda buat E. Soal Latihan Setelah mempelajari uraian materi dan melakukan aktivitas pembelajaran, kerjakan soal-soal latihan berikut - Apa peranan navigasi dalam media pembelajaran interaktif? - Jelaskan macam-macam struktur navigasi dalam aplikasi multimedia interaktif! F. Rangkuman Struktur navigasi berfungsi untuk menggambarkan dengan jelas hubungan dan rantai kerja seluruh elemen yang akan digunakan dalam aplikasi multimedia interaktif. Terdapat empat macam struktur navigasi, yaitu linier, hirarki, jaringan, dan kombinasi G. Kunci Jawaban - Struktur navigasi berfungsi untuk menggambarkan dengan jelas hubungan dan rantai kerja seluruh elemen yang akan digunakan dalam aplikasi multimedia interaktif. - Macam-macam struktur navigasi dalam aplikasi multimedia interaktif o Linear, menampilkan aplikasi multimedia dapat maju (next) dan mundur (back), jika mouse di-klik akan menampilkan isi informasi dari aplikasi multimedia tersebut dan bila di-klik lagi akan muncul pada halaman berikutnya. o Hirarki, merupakan struktur seperti tangga atau pohon, dimana masing–masing obyek menyediakan sebuah menu pilihan yang 63 memiliki lebih banyak menu dengan banyak pilihan. Tidak ada batas ukuran atau jumlah menu dan sub-menu o Jaringan, merupakan desain yang paling kompleks dengan banyak obyek dalam setiap arah pada setiap obyek dalam aplikasi multimedia. o Kombinasi, merupakan struktur seperti tangga, pohon-pohon gabungan antara struktur linier dan menu, di mana di dalamnya tidak ada batas untuk menyediakan banyak pilihan dengan menu utama dan sub menu yang ada. H. Umpan Balik Dari kegiatan pembelajaran navigasi multimedia interaktif diharapkan untuk mengisi umpan balik dari aktivitas pembelajaran yang telah dilakukan dengan cara peserta dapat menggambarkan navigasidi dalam multimedia interaktif serta dapat menjelaskan setiap peranan navigasi dan menjelaskan macam – macam strukturnya 64 65 66 Efek Visual Multimedia Interaktif A. Tujuan 1. Melalui diskusi peserta dapat mengidentifikasi elemen-elemen komunikasi visual dalam aplikasi multimedia interaktif secara santun dan menghargai pendapat orang lain. 2. Melalui observasi peserta dapat menentukan elemen-elemen visual yang digunakan dalam aplikasi multimedia pembelajaran interaktif secara teliti dan bertanggung jawab B. Indikator Pencapaian Kompetensi 1. Mengidentifikasi elemen-elemen komunikasi visual dalam aplikasi dalam aplikasi multimedia interaktif 2. Menentukan elemen-elemen visual yang digunakan multimedia pembelajaran interaktif C. Uraian Materi Komunikasi Visual merupakan salah satu aspek penting dalam pembuatan media, termasuk multimedia interaktif untuk pembelajaran. Komunikasi visual berfungsi sebagai integrator dari ketiga revolusi teknologi informasi (komputasi, internet dan multimedia) dalam rangka bertatap muka dengan khalayak sasarannya. Secara operasional, komunikasi visual dapat dimanfaatkan sebagai strategi penyajian content agar mudah dicerna (informatif), menarik (interesting) dan merayu (persuasif) bagi para penggunanya. Desain komunikasi visual dalam konteks multimedia pada hakekatnya adalah “bahasa” sebagai sarana menggunakan untuk elemen-elemen menyampaikan pesan yang rupa (gambar dan utamanya tulisan) dari seseorang/lembaga/kelompok masyarakat tertentu kepada pihak lainnya dengan berbagai gramatika tertentu. Oleh karena itu, desain komunikasi visual berhubungan dengan aspek komunikasi melalui penampilan rupa dan rungu yang dapat diserap indera penglihatan dan pendengaran untuk mempengaruhi pikiran dan perasaan. Secara sederhana desain komunikasi visual dapat dikatakan sebagai rancangan yang difungsikan untuk „dibaca‟ baik secara 67 eksplisit maupun implisit, tersurat maupun tersirat untuk menghasilkan persepsi tertentu sesuai kehendak pesan yang ingin dikomunikasikan. Secara garis besar, implementasi desain komunikasi visual dalam multimedia interaktif untuk pembelajaran ditempuh setidaknya dalam tiga tahapan, yakni memahami karakteristik media, dalam hal ini adalah multimedia; merumuskan konsep komunikasi visual dan gagasan kreatif; dan eksekusi audio visual 1. Memahami karakteristik multimedia Memahami media adalah hal pertama yang harus dipikirkan oleh perancang multimedia saat memulai pekerjaannya, mengingat setiap media memiliki karakteristik yang unik. Multimedia interaktif untuk pembelajaran memiliki keunikan yang berbeda dengan papan tulis, buku, slide projector, maupun transparansi sebagai media konvensional dalam kegiatan proses belajar mengajar di kelas. Multimedia interaktif untuk pembelajaran secara sekaligus dapat menjanjikan elemen desain yang berupa visual (gambar dan tulisan), suara (narasi, dialog, sound effect), gerak (animation dan video). Karakteristik yang demikian memungkinkan bagi para perancang multimedia untuk mengolah setiap elemen secara komperhensif dalam rangka mengoptimumkan tujuan komunikasi pembelajaran. Multimedia interaktif untuk pembelajaran dapat dimanfaatkan sebagai media presentasi yang disajikan oleh guru sebagai alat bantu pengajaran di kelas. Media presentasi ini diharapkan mampu mengkomunikasikan topik mata pelajaran secara lebih komunikatif, menarik dan persuasif. Selain itu multimedia ini dapat pula dimanfaatkan sebagai media pembelajaran mandiri yang diperuntukkan bagi peserta agar dapat belajar secara mandiri karena selain berisikan materi pelajaran, juga dapat dilengkapi dengan simulasi dan latihan secara interaktif. Kedua multimedia ini akan efektif sebagai alat bantu pembelajaran, tentu saja bila dikerjakan dengan serius, benar dan kreatif. 2. Merumuskan konsep komunikasi visual dan gagasan kreatif Membuat bahan ajar menggunakan multimedia tentu berbeda dengan menyiapkan bahan ajar dengan menggunakan media konvensional yang biasa dilakukan. Kelebihamen multimedia (audio, visual dan gerak) dapat dimanfaatkan secara maksimal untuk menyampaikan materi yang membutuhkan ketiga hal tersebut. Materi bahan ajar dapat disampaikan melalui gagasan yang kreatif. Dalam gagasan kreatif tersebut, peserta dapat 68 mengatur irama penyajian materi agar tidak datar dan membosankan. Langkah operasionalnya adalah peserta terlebih dahulu membuat rancangan skenario pengajaran berupa storyboard atau flow chart, agar alur informasi terkendali sejalan dengan materi yang hendak disampaikan. Tidak perlu seluruh durasi dan layer materi pengajaran dieksplorasi secara kreatif. Adakalanya materi pelajaran disajikan dalam visualisasi yang bernada datar dan biasa-biasa saja, untuk kemudian pada materi tertentu (yang menjadi pokok permasalahan) visualisasi diolah secara optimum. Bila perlu ada bagian yang ingin ditonjolkan dapat disertai dengan ilustrasi dalam gerak (animasi maupun video) dan suara (narasi, dialog dan sound effect) yang tepat. Penekanan ini akan membuat peserta merasakan bahwa materi tersebutlah yang menjadi pokok permasalahannya. Persoalan terpenting dalam menentukan gagasan kreatif dan konsep komunikasi visual adalah mempertimbangkan karakter target audience. Kebenaran materi adalah mutlak, sedangkan menarik atau tidaknya suatu bahan ajar sangat bergantung pada „kedekatan bahasa‟ komunikasinya antara peserta ke peserta lainnya. Gagasan kreatif dan konsep komunikasi visual hendaknya memperhatikan aspek komunikatif, agar mudah dicerna dan disenangi oleh peserta. Untuk itu hal yang seharusnya dilakukan adalah:  Memahami materi yang akan disampaikan secara mendalam.  Susunlah materi yang hendak disampaikan secara sistematik (runut), agar alur pesan dapat dicerna secara lancar.  Pelajari kebiasaan dan hal-hal yang diminati atau disukai oleh peserta, terutama yang berkaitan dengan unsur bahasa visual (icon, bahasa, jargon, ilustrasi musik, dan lain sebagainya).  Pesan disajikan melalui gagasan yang unik dan tidak klise (tidak sering digunakan), agar multimedia pembelajaran yang dibuat tampil segar dan menarik perhatian. 3. Eksekusi audio visual Rancangan yang telah dituangkan dalam gagasan kreatif dan konsep visualisasi, akan menjadi kasat mata sebagai multimedia pembelajaran jika berhasil dieksekusi menggunakan gramatika komunikasi visual yang tepat. Eksekusi elemen-elemen komunikasi visual dalam pembuatan media ini pada 69 intinya mencakup: tata letak, tipografi, gambar dan ilustrasi, warna, animasi dan video, serta audio/suara. a. Tata Letak. Seperti halnya memilih dan menata penempatan perabotan rumah selalu ada pertimbangan fungsi fisik dan fungsi psikologis sesuai konsep makna tempat tinggal bagi penghuninya. Sebagian orang memilih konsep minimalis, form follow function dan sebagian lagi lebih menyukai konservatif atau tradisional yang sarat dengan ornamen. Tidak berbeda ketika menciptakan tata letak bagi media pembelajaran ini, mesti ditentukan terlebih dahulu konsep yang akan digunakan, minimalis atau ornamentaliskah? Hal ini menjadi penting karena pada implementasinya seluruh layer sebaiknya divisualisasikan dengan konsep yang sama (bukan berarti eksekusinya persis sama). Dalam desain komunikasi visual hal ini disebut unity, yakni menggunakan bahasa audio dan visual yang harmonis, utuh, dan senada, agar materi ajar dipersepsi secara utuh (komperhensif). Untuk membantu eksekusi tata letak dapat dibuat grid system, yaitu pembagian bidang sesuai dengan fungsi-fungsi elemen desain komunikasi visual secara ergonomis. Misalnya; peletakan navigasi disesuaikan dengan maksud perintah navigasi tersebut dan kebiasaan ergonomic kita, navigasi NEXT diletakkan di sebelah kanan dan BACK diletakkan di sebelah kiri, dan lain sebagainya. Penyusunan teks secara konsisten dibuat rata kiri, rata kanan, atau simetris tergantung dari konsep yang dikehendaki. Tata letak rata kiri cenderung memberi kesan informal dan mengalir, rata kanan lebih berkesan dinamis namun agak tertutup, rata kiri kanan lebih membawa kesan formal dan kaku, simetris berkesan sangat formal. Silahkan dipilih sesuai dengan konsep yang telah ditentukan. Perlu ditekankan bahwa tata letak dibuat lebih untuk tujuan memberikan nilai tambah terhadap aspek komunikatif multimedia pembelajaran, bukan untuk keindahan semata. Sebagai langkah awal, sebaiknya buatlah tata letak yang sederhana saja, agar visualisasi tidak rumit untuk mengurangi noise pada kejelasan 70 isi materi ajar. Tata letak yang sederhana juga dimaksudkan agar materi pelajaran mudah diingat. Secara keseluruhan, tata letak diharapkan dapat memenuhi kaidah estetika, antara lain: komposisi yang terjaga dan menghasilkan irama, keseimbangan, harmoni yang terkendali. Menjaga kesederhanaan dapat dilakukan dengan cara memilih meletakkan elemen grafis yang tepat, minimal dan senada sesuai karakter informasi. Meskipun tata letak dibuat sederhana, sebaiknya tetap memperhatikan kedekatannya dengan karakter/kebiasaan sasaran atau selera peserta yang pada kebanyakannya berjiwa muda yang dinamis. Pada gilirannya pilihan dan penataan elemen grafis dapat memberikan citra pesan yang diinginkan, misalnya: kesan serius, ringan, formal, informal, dan lain sebagainya. Tata letak bahkan dimanfaatkan untuk merepresentasikan topik yang diajarkan, misalnya gemuruh (untuk letusan gunung berapi), mengalir (untuk topik fluida), serta damai dan romantik (untuk merepresentasikan materi belajar gitar klasik), dan sebagainya. b. Tipografi Tipografi (font dan susunan huruf), dirancang untuk memvisualisasikan bahasa verbal dan diupayakan agar mendukung isi pesan, baik secara fungsi keterbacaan maupun fungsi psikologisnya. Pada esensinya, huruf dipilih guna merepresentasikan dua pengertian, yakni: tersurat (untuk kebenaran pesan, huruf sebagai isi pesan verbal) dan tersirat (untuk citra pesan, huruf sebagai penampilan visual). Buatlah hirarki pengguna huruf baik jenis, ukuran dan penempatannya pada bidang sesuai kebutuhan naskah. Contoh susunan huruf secara hirarki adalah sebagai berikut: Judul, sub judul, intro-copy, body-copy, box/highlight, panjang, photo/illustration misalnya kriteria readable, caption. Untuk untuk body-copy pilih legible, dan clarity (terbaca, naskah huruf bisa yang dan yang relatif memenuhi mudah/jelas dibaca dan nyaman/enak dibaca), dalam hal ini huruf lebih berfungsi representasi verbal. Untuk judul dan sub-judul, pilihlah huruf yang memiliki karakter sesuai dengan topik dari judul tersebut, dalam hal ini fungsi representasi visual lebih dikedepankan. Memilih karakter huruf yang sesuai dengan topik tidak perlu teori khusus, tapi cukup dirasakan 71 dengan hati. Karakter huruf dapat dirasakan melalui jenis/bentuk, struktur, ukuran dan bobot dari huruf yang dipilih. Karakter huruf berdasar pada jenis/bentuk (karakter huruf): - huruf serifa (berkait), misalnya huruf Roman (Times Roman); - huruf sans serif (tak berkait), misalnya huruf Univers (Arial); - huruf script (tulis tangan), misalnya huruf Old English; - huruf decorative (dekorasi), contohnya huruf Antique. Pilihlah keluarga huruf berdasar pada struktur, misalnya miring (italic), normal, tinggi (extended), lebar (expanded). Huruf berdasarkan ukuran, misalnya besar atau kecilnya ukuran huruf ditampilkan dalam bidang naskah (cm/point/pica), besar atau kecil di sini bukan berarti besar sama dengan huruf capital dan kecil sama dengan lowercase. Karakter huruf berdasarkan bobot adalah ringan (thin), sedang (normal), berat (bold, heavy), dan sangat berat (black, extra-black). c. Gambar dan ilustrasi Yakni elemen desain komunikasi visual yang dapat berwujud foto, ilustrasi atau drawing, diagram, serta elemen grafis yang lainnya seperti icon, navigasi, garis, box, splash, dan lain sebagainya. Gambar adalah bahasa visual yang dapat dimanfaatkan di saat bahasa verbal dianggap kurang mampu untuk merepresentasikan pesan bersifat citra abstrak. Pesan abstrak akan menjadi nyata jika disajikan dalam wujud gambar. Satu gambar katanya kadang-kedang lebih bunyi dari seribu kata, oleh karenanya hati-hati dalam menampilkan gambar. Tampilkan gambar jika hanya dianggap ada gunanya dan perlu, hindari penggunaan gambar yang hanya bersifat penghias, karena fungsi gambar adalah tidak hanya sebagai elemen estetik. Foto sangat berguna untuk menunjukkan kondisi fisik secara realistik, ilustrasi atau drawing tepat untuk mendramatisir, mensimulasi dan menyampaikan pesan secara simbolis. Gambar selalu mengusung makna. Sebuah gambar (foto maupun drawing) dapat bermakna denotatif dan/atau konotatif. Denotatif adalah hubungan tanda (gambar) dengan yang 72 ditandainya (makna) terjadi secara langsung (tersurat), misalnya foto sebuah mobil terdenotasi sebagai kondisi mobil tertentu yang ada. Siapapun pemotretnya, pagi, siang atau malam, tetap saja menunjukkan kondisi mobil tersebut. Konotasi lebih menjelaskan interaksi yang terjadi pada saat tanda (gambar) bertemu dengan perasaan, emosi dan nilai-nilai budaya penggunanya. Kursi dikonotasikan sebagai jabatan, mawar sebagai bentuk cinta dan lain sebagainya. Gunakan gambar yang relevan untuk setiap bahasa pesan, misalnya kapan harus mengunakan gambar yang denotatif, atau kapan harus konotatif. d. Warna Seperti elemen komunikasi visual lainnya, warna juga memiliki fungsi secara fisik dan psikologis. Warna berfungsi secara fisik baik jika dalam penampilannya mampu memperjelas indera penglihatan dalam menangkap objek yang disajikan. Biasanya terdapat kontras antara objek dengan latar belakangnya. Warna akan berfungsi psikologis, jika penampilannya menghasilkan perasaan tertentu, misalnya sedih, gembira, sentimental, dingin, panas, cemburu, dan lain sebagainya. Oleh karenanya pilihan warna sebaiknya didasari oleh konsep kreatif yang telah ditetapkan sesuai topik pembelajaran. Untuk mengoptimalkan fungsi fisik dari sebuah warna, pilih warna yang perbedaan intensitasnya tinggi misalnya, objek berwarna putih diletakkan di atas latar berwarna hitam. Agar mudah mendapatkan kontras, warna dapat dianalogikan secara oposisi biner: panas dingin, maskulin feminim, keras lembut, popular klasik, muda tua. Selain pendekatan itu, seluruh warna juga dapat ditingkatkan intensitasnya dengan cara menambahkan warna-warna tersebut ke putih (tin), sebaliknya untuk meredam intensitas dapat ditambahkan unsur hitam (shade). e. Animasi dan video Animasi artinya menghidupkan gambar yang mati, menggerakkan gambar yang diam dengan cara membuat metamorfosa dari bentuk semula ke bentuk selanjutnya dalam durasi tertentu. Video adalah menangkap citra yang bergerak untuk selanjutnya disimpan dalam 73 rangkaian foto yang diam dan diputar kembali menjadi gerak sesuai durasi yang dikehendaki. Perbedaan dimanfaatkan prinsip untuk kerja inilah mendukung yang dapat penyajian dieksplorasi materi ajar dan bebasis multimedia. Video cocok untuk menyajikan realitas dan animasi cocok untuk menciptakan realitas dari sesuatu yang semu, sesuatu yang tidak mampu ditangkap oleh realitas dalam citra visual. Dengan memperhatikan karakteristik tersebut, semestinya akan terhindar dari penyajian animasi dan video demi sekedar meramaikan tampilan tanpa pertimbangan fungsinya. f. Audio Ibarat dua sisi mata uang, dalam multimedia pembelajaran, unsur audio tidak dapat dipisahkan dengan unsur visual. Unsur audio merupakan sarana untuk menyampaikan informasi tentang esensi persoalan yang berkaitan dengan materi yang akan diajarkan melalui multimedia pembelajaran. Selain itu, unsur audio juga merupakan unsur penarik perhatian siswa agar menyimak isi pesan yang dikomunikasikan. Dan yang lebih dahsyat lagi, unsur audio dapat dimanfaatkan untuk memperkaya imajinasi dengan cara menghadirkan theatre of mind agar isi materi pelajaran lebih dihayati oleh siswa. Unsur audio dalam multimedia pembelajaran dapat berupa dialog, monolog, narasi, sound/special effect, dan ilustrasi musik. Dialog merupakan target inferensi yang menyampaikan penggalan-penggalan komunikasi dua arah antara pemeran yang ditampilkan dalam multimedia pembelajaran. Monolog adalah ungkapan verbal yang dilontarkan secara searah oleh salah satu pemeran. Narasi adalah ungkapan verbal yang disampaikan oleh narator (bukan pemeran) berfungsi sebagai penyampai informasi penting yang terkait dengan pesan dalam multimedia pembelajaran. Sound/special effect (SFX) adalah efek audio yang dihasilkan secara artifisial dan dipergunakan sebagai efek tambahan untuk pendukung ilustrasi suasana maupun adegan serta untuk menghadirkan penekanan inti pesan materi pembelajaran. Musik berfungsi sebagai pendukung suasana yang mengarah dalam multimedia pembelajaran. 74 Berdasarkan rancangan antarmuka multimedia pembelajaran interaktif pada kegiatan belajar 3, dapat dibuat desain dengan memasukkan efek visual. a. Tampilan halaman awal Saat aplikasi dijalankan, akan ada animasi hitungan waktu mundur. Setelah itu akan tampil ucapan selamat datang. Tulisan ini akan bergerak dari sisi kiri layar, muncul baris demi baris menuju posisi di layar. Setelah semua baris tulisan tampil, maka akan muncul tombol enter, yang dapat digunakan untuk navigasi menuju halaman selanjutnya. Gambar 35 Visualisasi tampilan awal b. Halaman judul Untuk lebih menarik perhatian, tulisan judul dibuat berkedip-kedip. Terdapat enam buah tombol untuk navigasi menuju menu-menu yang ada. Nama tombol disesuaikan dengan nama menu, hal ini untuk memudahkan pengguna untuk memilih bagian yang akan di pelajari. Tombol dibuat dengan menggunakan fasilitas button pada aplikasi Adobe Flash. Jika kursor berada di atas tombol, maka warna latar belakang berubah menjadi kuning. Jika tombol di klik maka warna tulisan berubah menjadi 75 merah. Hal ini bertujuan untuk mengarahkan pandangan pengguna pada tombol yang di seleksi. Gambar 36 Visualisasi halaman judul c. Halaman standar kompetensi Standar kompetensi terdiri dari beberapa halaman, oleh karena itu diperlukan sebuah tombol untuk melanjutkan ke halaman berikutnya dan sebuah tombol untuk kembali ke halaman sebelumnya. Penamaan tombolnya adalah NEXT dan BACK. Kedua tombol diletakkan disebelah kiri bawah. Sementara itu tombol home berada di kanan bawah. Tombol ini berfungsi untuk membawa kembali pengguna ke halaman judul. 76 Gambar 37 Visualisasi halaman standar kompetensi D. Aktivitas Pembelajaran 1. Pengajar memberikan beberapa contoh aplikasi multimedia interaktif. Peserta diklat membentuk kelompok yang terdiri dari 3-5 orang. Masingmasing kelompok melakukan kegiatan berikut : - Mengamati elemen-elemen visual dalam aplikasi multimedia interaktif - Mengidentifikasi elemen-elemen visual yang terdapat dalam aplikasi multimedia interaktif - Membuat laporan hasil pengamatan 2. Berdasarkan rancangan antarmuka yang telah Anda buat dalam kegiatan belajar 3, tentukan elemen visual yang akan Anda gunakan dalam aplikassi tersebut, baik pada halaman judul maupun halaman isi. E. Latihan Soal Setelah mempelajari uraian materi dan melakukan aktivitas pembelajaran, kerjakan latihan berikut ini - Apa peranan efek visual dalam multimedia interaktif? - Jelaskan unsur-unsur komunikasi visual dalam multimedia interaktif! 77 - Bagaimana implementasi desain komunikasi visual dalam multimedia interaktif F. Rangkuman 1. Efek visual dapat dimanfaatkan sebagai strategi penyajian content agar mudah dicerna (informatif), menarik (interesting) dan merayu (persuasif) bagi para penggunanya. 2. Elemen-elemen komunikasi visual dalam pembuatan multimedia interaktifadalah tata letak, tipografi, gambar dan ilustrasi, warna, animasi dan video, serta audio/suara. 3. Implementasi desain komunikasi visual dalam multimedia interaktif untuk pembelajaran ditempuh dalam tiga tahapan, yakni memahami karakteristik media; merumuskan konsep komunikasi visual dan gagasan kreatif; serta eksekusi audio visual G. Kunci Jawaban - Efek visual dapat dimanfaatkan sebagai strategi penyajian content agar mudah dicerna (informatif), menarik (interesting) dan merayu (persuasif) bagi para penggunanya. - - Unsur-unsur komunikasi visual dalam multimedia interaktif o Tata letak o Tipografi o Gambar dan ilustrasi o Warna o Animasi dan video o audio Tahapan implementasi desain komunikasi visual dalam multimedia interaktif : 78 o Memahami karakteristik media o Merumuskan konsep komunikasi visual dan gagasan kreatif o Eksekusi audio visual H. Umpan Balik Dari kegiatan pembelajaran Efek Visual Multimedia Interaktif diharapkan untuk mengisi umpan balik dari aktivitas pembelajaran yang telah dilakukan dengan cara menjawab pertanyaan sebagai berikut: 1. Apakah peserta dapat mengidentifikasi elemen-elemen komunikasi visual dalam aplikasi multimedia interaktif? 2. Apakah peserta dapat Menentukan elemen-elemen visual yang digunakan dalam aplikasi multimedia pembelajaran interaktif? 79 80 81 82 Produk Multimedia Interaktif A. Tujuan Melalui observasi peserta dapat membuat sebuah media pembelajaran interaktif secara teliti dan bertanggung jawab B. Indikator Pencapaian Kompetensi Membuat sebuah media pembelajaran interaktif secara teliti dan bertanggung jawab C. Uraian Materi Pembuatan multimedia yang interaktif tidak hanya dibuat begitu saja dengan menggabungkan beberapa elemen multimedia. Pembuatan tidak dilakukan secara sembarangan. Berikut beberapa hal yang harus diperhatikan ketika membuat multimedia interaktif agar menjadi menarik 1. Menentukan Proyek dan Tujuan dari Proyek Dalam pembuatan multimedia, menentukan tujuan dari proyek mungkin terlihat sudah sangat jelas tetapi di sini dimaksudkan lebih spesifik dan sejelas mungkin untuk membantu pembuatan proyek. 2. Memahami Audien Tentukan rentang usia, pria atau wanita, kepentingan tertentu dan juga tingkat pendidikan. Perhatikan juga apa audien mengalami cacat penglihatan pendengaran atau sebagainya. Melalui multimedia tersebut audien akan pasif atau aktif dan juga mendidik atau hanya menghibur. 3. Desain Informasi Desain informasi harus tertata rapi dalam suatu pengelompokan dan tidak lompat-lompat dari informasi satu ke informasi lainnya. Tentukan juga isi dari desain informasi dan jangan sampai menyeleweng jauh dari judul multimedia yang ditekankan. Desain informasi sangat memepengaruhi bagaimana pengguna bisa memahami proyek yang dibuat. 83 4. Desain Tampilan Desain dari interface juga harus diperhatikan. Desain interface-nya harus jelas dan terstruktur dan dapat dimengerti. Informasi yang disediakan terorganisasi dengan baik dan jelas. Pertimbangkan juga seberapa susah proyek yang akan dibuat dan memakan waktu seberapa lama. Hal-hal kecil seperti white space, aligment, margin, kontras, simetri dan asimetris, dan hal-hal kecil lainnya perlu diperhatikan. Meskipun terlihat sepele tetapi sangat mempengaruhi desain dari interface. Berdasarkan storyboard dan rancangan antarmuka dalam kegiatan belajar sebelumnya, akan dibuat produk multimedia interaktif secara utuh. Aplikasi yang digunakan dalam membuat multimedia interaktif dalam modul ini adalah adobe flash CS 3 dengan action script 3.0. 1. Pengenalan Adobe Flash CS3 a. Tampilan Awal Cara mengakses Adobe Flash CS3 Professional pertama kali yaitu double klik pada icon yang ada di desktop atau lihat dari daftar program. Tampilan start page pertama kali membuka Adobe Flash CS3 Professional yaitu: Gambar 38 Tampilan aplikasi adobe flash CS3 84 Secara garis besar, lingkungan kerja (Workspace) adobe flash cs3 terdiri dari beberapa komponen utama yang bisa anda lihat seperti pada gambar berikut Gambar 39 Komponen utama adobe flash CS3 Berikut ini penjelasan dari masing-masing komponen 1. Menu Bar adalah kumpulan yang terdiri atas dasar menu-menu yang digolongkan dalam satu kategori. Misalnya menu file terdiri atas perintah New, Open, Save, Import, Export, dan lain-lain. 2. Timeline adalah sebuah jendela panel yang digunakan untuk mengelompokkan dan mengatur isi sebuah movie, pengaturan tersebut meliputi penentuan masa tayang objek, pengaturan layer, dan lain-lain. 3. Stage adalah area untuk berkreasi dalam membuat animasi yang digunakan untuk mengkomposisi frame-frame secara individual dalam sebuah movie. 4. Toolbox adalah kumpulan tools yang sering digunakan untuk melakukan seleksi, menggambar, mewarnai objek, memodifikasi objek, dan mengatur gambar atau objek. 5. Properties adalah informasi objek-objek yang ada di stage. Tampilan panel properties secara otomatis dapat berganti-ganti dalam menampilkan informasi atribut-atribut properties dari objek yang terpilih. 6. Panels adalah sebagai pengontrol yang berfungsi untuk mengganti dan memodifikasi berbagai atribut dari objek dari animasi secara cepat dan mudah b. Toolbox 85 Toolbox berisi kumpulan tool yang digunakan untuk membuat dan memilih isi di dalam Timeline dan Stage. Toolbox terbagi menjadi tool dan modifier. Setiap tool memiliki ukuran Modifier tertentu yang ditampilkan ketika kita memilih tool tersebut. Sebagai contoh, jika kita memilih Texttool maka modifier seperti huruf, ukuran huruf, warna huruf dapat kita atur. Toolbox berisi alat-alat yang digunakan untuk menggambar objek di stage. Gambar 40 Toolbox Adobe flash CS3 Berikut penjelasan setiap tool yang terdapat pada Toolbox . 1. Arrow Tool, Arrow Tool atau sering disebut selection tool berfungsi untuk memilih atau menyeleksi suatu objek. 2. Free Transform Tool, berfungsi untuk mentransformasi objek yang terseleksi. 3. Pen Tool digunakan untuk menggambar garis dengan bantuan titiktitik bantu seperti dalam pembuatan garis, kurva atau gambar. 4. Line Tool digunakan untuk membuat atau menggambar garis. 5. Pencil Tool digunakan untuk membuat garis. 6. Ink Bottle tool digunakan untuk mengisi/mengganti Stroke(garis luar) suatu objek. 86 7. Eye Dropper Tool digunakan untuk mengambil sampel warna. 8. Hand Tool digunakan untuk menggeser tampilan stage tanpa mengubah pembesaran. 9. Stroke Color digunakan untuk memilih atau memberi warna pada suatu garis. 10. Sub selection Tool, berfungsi menyeleksi bagian objek lebih detail dari pada selection tool. 11. Lasso Tool berfungsi untuk memotong gambar secara manual. 12. Text Tool digunakan untuk membuat objek teks. 13. Rectangular tool digunakan untuk menggambar bentuk kotak. 14. Brush Tool digunakan untuk menggambar bentuk garis-garis dan bentuk-bentuk bebas. 15. Paintbucket Tooldigunakan untuk mengisi area-area kosong atau digunakan untuk mengubah warna area sebuah objek yang telah diwarnai. 16. Eraser Tool digunakan untuk menghapus objek. 17. Zoom Tool digunakan untuk memperbesar atau memperkecil tampilan stage. 18. Stroke Color digunakan untuk memilih atau memberi warna pada suatu garis. 19. Fill Color digunakan untuk memilih atau memberi warna pada suatu objek. 20. Swap Color digunakan untuk menukar warna fill dan stroke atau sebaliknya dari suatu gambar atau objek c. Action script Salah satu kelebihan FLASH dibanding dengan perangkat lunak animasi lain yaitu adanya action script. Action Script adalah bahasa pemrograman Adobe Flash yang digunakan untuk membuat animasi atau interaksi, Action Script mengizinkan untuk membuat intruksi berorientasi action (lakukan perintah) dan instruksi berorientasi logic (analisis masalah sebelum melakukan perintah). Kita bisa memunculkan panel action Script dengan cara menekan tombol F9 pada keyboard. Atau melalui menubar dengan cara klik Window > Actions . 87 Gambar 41 Jendela action script Sama dengan bahasa pemrograman yang lain, Action Script berisi banyak elemen yang berbeda serta strukturnya sendiri. Kita harus merangkainya dengan benar agar Action Script dapat menjalankan dokumen sesuai dengan keinginan. Jika tidak merangkai semuanya dengan benar, maka hasil yang didapatkan akan berbeda atau file flash tidak akan bekerja sama sekali. Action Script juga dapat diterapkan untuk action pada frame, tombol, movie clip, dan lain-lain. Action frame adalah action yang diterapkan pada frame untuk mengontrol navigasi movie, frame, atau objek lain-lain. d. Konsep shape dan simbol pada Adobe flash Shape merupakan objek asli yang dibuat pada stage yang belum diubah ke dalam simbol. Pada saat sebuah shape yang berada di stage dipilih, maka akan tampak seperti ada bintik-bintik putih pada objek shape tersebut. 88 Gambar 42 Shape Symbol merupakan bagian yang penting dalam membuat animasi dengan flash. Untuk membuat suatu objek bisa beranimasi, maka objek tersebut diubah menjadi symbol. Dengan merubah suatu objek menjadi symbol, itu artinya objek tersebut sudah menjadi bentuk yang pasti dan tidak bisa memanipulasinya lagi didalam stage misalnya merubah warna, memberikan coretan diatasnya atau yang lainnya. Jadi sebelum merubah suatu objek menjadi symbol maka sebaiknya objek tersebut harus benar- benar sudah siap untuk digunakan sehingga tidak lagi ingin melakukan perubahan terhadap objek tersebut. Tetapi kita bisa melakukan operasi merubahaa bentuk di dalam stage seperti memutar, memperbesar atau memindahkannya. Terdapat 3 jenis symbol yang digunakan di Flash, yaitu : movieclip, button, graphic. Sebelum sebuah objek dirubah menjadi symbol, blok terlebih dahulu objek tersebut dengan menggunakan selection tool yang ada pada toolbar bagian kiri atas. Jika suatu objek sudah diblok maka objek tersebut akan muncul titik titik kecil pada permukaanya. Selanjutnya pilih menu Modify  convert to symbol atau tekan F8 sehingga muncul menu seperti berikut: Gambar 43Jendela convert to symbol Isikan nama sesuai dengan keinginan pada bagian name. Dan pada bagian behavior terdapat tiga pilihan yaitu: 89 movieclip: objek digunakan untuk beranimasi button : objek dibuat sebagai tombol graphic : objek dibuat sebagai gambar yang statis atau tidak beranimasi 2. Pembuatan Navigasi Antar Frame Tombol adalah salah satu elemen penting dalam sebuah media interaktif. Tombol berfungsi untuk mengatur sistem navigasi dari aplikasi yang dibuat. Pembuatan navigasi dalam aplikasi adobe flash menggunakan action script 3.0, yang memiliki tiga tahap yaitu membuat objek, memberikan nama pada objek tersebut, dan menuliskan kode. ActionScript adalah bahasa pemrograman yang bersifat case sensitive, artinya adalah penulisan huruf kapital (huruf besar) dan huruf kecil dianggap berbeda. Kesalahan dalam penulisan huruf kapital atau huruf kecil akan berakibat error pada program. Actionscript memungkinkan pemberian perintah terhadap animasi yang buat. Misalnya pada tombol play, stop dan sebuah objek lingkaran. Jika kita tekan tombol play maka lingkaran bergerak dari kiri ke kanan dan jika kita klik tombol stop maka lingkaran akan berhenti. Semua itu bisa dilakukan dengan memberikan perintah kepada tombol serta lingkarannya sehingga mengikuti apa yang ditulis di script. Berikut ini diberikan contoh cara membuat navigasi dua halaman dengan menggunakan aplikasi adobe flash dan kode program action script 3.0. Ada dua buah tombol dan dua halaman yang masing-masing memiliki gambar. Tombol digunakan untuk mengatur perpindahan antar halaman sehingga dapat menampilkan gambar yang berbeda. a. Tambahkan 3 buah layer dan ubah masing-masing namanya menjadi Tombol, Gambar, Action. Cara mengganti nama layer yaitu dengan cara klik 2 kali pada layer yang akan diganti namanya, lalu ketikkan nama baru 90 Gambar 44 Membuat tiga buah layer b. Di frame 1 layer Tombol, buatlah 3 buah objek button serta satu buah shape untuk background. Gambar 45 Button dan shape background c. Agar tombol dan background tetap terlihat sepanjang animasi, berikan insert frame di frame 40 layer Tombol Gambar 46 Menambah durasi tampilan d. Berikan key frame di frame 2 layer gambar. Lalu klik kanan pilih insert key frame.Tambahkan sebuah gambar dengan cara klik menu File  import  import to library. Dari library drag gambarnya ke stage, atur ukurannya sehingga berada di dalam kotak background. Hidupkan onion skinning untuk mempermudah mengatur posisinya 91 Gambar 47 Pengaturan posisi objek pada stage e. Dengan cara yang sama, tambahkan gambar di frame 3 layer gambar . sedangkan di frame 4 layer gambar anda dapat menuliskan sesuatu menggunakan text tool. Gambar 48 Menambahkan teks pada stage f. 92 Kemudian di frame 40 layer gambar . klik kanan pilih insert frame. Gambar 49 Memperpanjang durasi tampilan g. Klik frame 1 pada layer action , tampilkan window action/ tekan f9 dan tuliskan script berikut. import flash.events.MouseEvent; import flash.system.fscommand; stop(); //menghentikan frame agar tidak berulang terus menerus //menambahkan listener click satu.addEventListener(MouseEvent.CLICK, klik_tombol); dua.addEventListener(MouseEvent.CLICK, klik_tombol); keluar.addEventListener(MouseEvent.CLICK,klik_tombol); //fungsi klik_tombol function klik_tombol(e:MouseEvent):void{ var nama_tombol:String = e.currentTarget.name; if (nama_tombol == "satu"){ gotoAndStop(2); // ke frame 1 jika tombol_1 ditekan } if (nama_tombol == "dua"){ gotoAndStop(3); // ke frame 2 jika tombol_2 ditekan } if(nama_tombol== "keluar"){ fscommand("quit"); } } 93 h. Kemudian pada frame 40 layer action klik kanan pilih insert frame. i. Gambar 50 Memperpanjang durasi tampilan layer Jalankan dengan menekan CTRL+ENTER, maka tampilan gambar akan berubah-ubah sesuai tombol yang ditekan. 3. Bekerja dengan text Teks digunakan untuk menerangkan atau menjelaskan sesuatu dalam bentuk tulisan, pembuatan judul, komponen animasi, keterangan-keterangan untuk movie interaktif. Teks merupakan bagian yang mempunyai peranan cukup besar dalam pembuatan animasi. Teks dapat dimanipulasi atau dimodifikasi sesuai dengan kebutuhan sehingga teks yang dihasilkan mempunyai banyak variasi. Teks dalam Adobe Flash ditulis dengan memggunakan bantuan Text Tool pada Toolbox. Teks yang dihasilkan dapat di setting dengan menggunakan PropetiesPanel. Propeties Panels untuk teks berisi menu atau atribut-atribut untuk membuat dan mengedit suatu teks. Adobe flash mempunyai tiga tipe teks yang masing-masing mempunyai fungsi yang berbeda. Tipe teks tersebut adalah sebagai berikut : a. Static Textadalah jenis teks yang mempunyai karakter-karakter seperti teks biasa pada umumnya. b. Dynamic Textadalah jenis teks yang dapat menampilkan sifat teks yang dinamis dan bisa dikontrol, contohnya skor pertandingan olah raga yang yang dapat berganti sesuai dengan perolehan nilai dari pertandingan, nilai kurs mata uang dalam bursa efek, dll. c. Input Textadalah jenis teks yang dapat diisi oleh pengguna atau user dalam sebuah form isian atau Input Text digunakan untuk menerima berbagai input dari user. 94 Gambar 51 Properti teks Berikut ini diuraikan contoh penggunaan teks dalam aplikasi media interaktif. Jenis teks yang digunakan adalah static dan input dan dynamic text. a. Buat tulisan data diri dan tempat untuk mengisikan jawaban menggunakan text tool. Data diri menggunakan static text. Sedangkan untuk menuliskan jawaban menggunakan input text, ganti instances name-nya menjadi input. Tambahkan sebuah tombol untuk mengeksekusi jawaban. Beri nama enter_btn Gambar 52 Pembuatan obyek teks dan tombol b. Berikan insert keyframe di frame 5 pada layer 1. Rubahlah tampilan seperti di bawah ini. Data diri menggunakan static text. Sedangkan untuk jawaban menggunakan dynamic text,ganti instances name-nya menjadi output. 95 Gambar 53 Pengaturan obyek pada frame 5 c. Tambahkan layer baru dengan cara klik insert layer. d. Pada layer 2 ini tuliskan script dengan menekan f9. Berikut ini scriptnya import flash.events.MouseEvent stop(); var nama:String; var alamat:String; enter_btn.addEventListener(MouseEvent.CLICK, database); function database(e:MouseEvent):void { nama= input.text; alamat = input2.text; gotoAndStop(5); 96 } e. Kemudian pada frame 5 layer 2 klik kanan pilih insert keyframe. f. Tuliskan di frame 5 layer 2,script seperti di bawah ini. output.text = nama; output2.text = alamat; g. Pada saat dijalankan dan kita isikan jawaban nama dan alamat anda, maka tampilannya adalah sebagai berikut Gambar 54 Tampilan pengisian data h. Setelah itu kita enterhasilnya seperti dibawah ini. Gambar 55 Tampilan data 97 D. Aktivitas Pembelajaran Dalam bagian ini, akan dijelaskan tahapan dalam membuat aplikasi multimedia pembelajaran interaktif berdasarkan rancangan yang sudah dibuat pada kegiatan belajar sebelumnya. Untuk memudahkan navigasi, maka setiap bagian dibuatkan scene tersendiri. Setiap scene memiliki desain tampilan yang sama untuk background dan penempatan tombolnya sehingga tidak membingungkan pengguna. Berdasarkan stoyboard yang ada, dibutuhkan 6 scene untuk aplikasi media pembelajaran interaktif program linear, yaitu : - Scene 1 untuk opening - Scene 2 untuk standar kompetensi - Scene 3 untuk sejarah matematika - Scene 4 untuk petunjuk - Scene 5 untuk materi - Scene 6 untuk kuis Aplikasi yang digunakan dalam membuat multimedia interaktif dalam modul ini adalah adobe flash CS 3 dengan action script 3.0. Untuk menambahkan scene, klik menu insert  Scene Gambar 56 Menambahkan Scene Lakukan penambahan scene sebanyak 5 kali, sehingga akan di dapatkan 6 buah scene. Scene yang sedang aktif, ditandai dengan chek di depan nama scene. 98 Gambar 57 Jumlah scene dalam file Untuk memudahkan pengerjaan, sebaiknya nama scene disesuaikan dengan nama halaman/menu. Untuk mengubah nama scene, klik menu window  other panels  scene Gambar 58 Langkah mengubah nama scene 99 Double klik nama scene, lalu ganti namanya sesuai dengan nama menu/halaman yang akan Anda buat Gambar 59 Mengganti nama scene 1) Membuat opening a. Aktifkan scene opening, buatlah empat buah layer. Layer 1 untuk background. Layer 2 untuk hitungan waktu mundur. Layer 3 untuk animasi tulisan ucapan selamat datang. Layer 4 untuk menempatkan tombol enter. Layer 5 untuk menuliskan script. Agar memudahkan pengorganisasian, ganti nama layer sesuai peruntukannya. Gambar 60 Menyiapkan layer untuk membuat opening 100 b. Seleksi layer waktu. Pada frame 1 buatlah tulisan angka 9 Gambar 61 Awal hitungan waktu mundur c. Tambahkan keyframe pada frame 3. Ubah tulisannya menjadi angka 8. Tambahkan keyframe pada frame 5. Ubah tulisannya menjadi angka 7. Tambahkan keyframe pada frame 7. Ubah tulisannya menjadi angka 6. Tambahkan keyframe pada frame 9. Ubah tulisannya menjadi angka 5. Tambahkan keyframe pada frame 11. Ubah tulisannya menjadi angka 4. Tambahkan keyframe pada frame 13 Ubah tulisannya menjadi angka 3. Tambahkan keyframe pada frame 17. Ubah tulisannya menjadi angka 2. Tambahkan keyframe pada frame 19. Ubah tulisannya menjadi angka 1. 101 Gambar 62 Susunan frame pada layer waktu d. Langkah selanjutnya adalah membuat animasi tulisan ucapan selamat datang. Kini kita bekerja pada layer sambutan. Berikan keyframe pada frame 21. Buat tulisan selamat datang dan tempatkan di sebelah kiri stage 102 Gambar 63 Frame awal animasi tulisan berjalan e. Berikan keyframe pada frame 40. Geser tulisan ke tengah stage Gambar 64 Frame akhir animasi tulisan berjalan f. Pilih salah satu frame diantara frame 19 dan 40 (missal frame 25). Klik kanan  Create motion tween. Gambar 63 Memberikan motion tween pada tulisan g. Akan muncul garis yang menghubungkan frame awal (21) dengan frame akhir(40) dan Nampak tulisan bergerak ke kanan 103 Gambar 64 Animasi motion tween pada tulisan h. Selanjutnya kita bekerja pada layer tombol. Klik frame 41. Klik kanan  insert keyframe. Lalu tambahkan tombol enter Gambar 65 Menambahkan tombol enter i. Seleksi tombol enter, pada bagian propertiesnya beri nama enter pada instance name 104 Gambar 66 Memberi nama tombol enter j. Selanjutnya adalah memberikan script. Jika tombol enter di klik, maka tampilan akan menuju halaman judul. Halaman judul berada di frame 45. Berikan keyframe pada frame 41 layer script. Tekan F9 untuk menampilkan jendela action, lalu tuliskan kode berikut Gambar 67 Script untuk tombol enter Penjelasan dari script tersebut adalah sebagai berikut. - stop(); berfungsi untuk menghentikan tampilan layar berada di frame yang diberi action. Jadi tampilan layar akan berhenti pada frame 41 - enter.addEventListener(MouseEvent.CLICK, klik_tombol); menambahkan even pada tombol enter, yaitu jika tombol enter di klik makan akan menjalankan fungsi klik_tombol - function klik_tombol(e:MouseEvent):void membuat fungsi klik_tombol - var nama_tombol:String = e.currentTarget.name; 105 membuat variable nama tombol berupa string - if(nama_tombol == "enter"){ gotoAndStop(45); } Jika tombol enter di klik, maka tampilan akan menuju ke frame 45 Preview hasilnya dengan menekan tombol CTRL+ENTER. Maka akan tampil hitungan waktu mundur dari 9 menuju 1, dilanjutkan animasi tulisan selamat datang dan di akhiri dengan kemunculan tombol enter Gambar 68 tampilan preview halaman opening Setelah tombol enter di klik, maka akan tampil isi frame 45 yang berisi halaman judul. Halaman judul ini terdiri dari 6 buah tombol dan diletakkan pada layer tombol. Sementara tulisan judul dibuat pada layer sambutan. 106 Gambar 69 Halaman judul pada frame 45 2) Pengaturan halaman judul Pada halaman judul terdapat enam buah tombol. Lima tombol jika di klik akan menuju ke scene yang sudah di tentukan, yaitu : - STANDAR KOMPETENSI akan mengarahkan pengguna ke scene standar_kompetensi - SEJARAH MATEMATIKA akan mengarahkan pengguna ke scene sejarah - PETUNJUK akan mengarahkan pengguna ke scene petunjuk - MATERI akan mengarahkan pengguna ke scene materi - KUIS akan mengarahkan pengguna ke scene kuis Satu tombol (KELUAR) jika di klik akan menutup aplikasi multimedia pembelajaran interaktif. Agar masing-masing tombol dapat di panggil menggunakan actionscript, maka harus di beri nama. Untuk memberi nama, klik tombol, kemudian pada bagian properties, isikan pada bagian instance name dengan nama tombol Gambar 70 Pemberian nama pada tombol STANDAR KOMPETENSI Gambar 71 Pemberian nama pada tombol SEJARAH MATEMATIKA 107 Gambar 72 Pemberian nama pada tombol PETUNJUK Gambar 73 Pemberian nama pada tombol MATERI Gambar 74 Pemberian nama pada tombol KUIS 108 Gambar 75 Pemberian nama pada tombol KELUAR Langkah selanjutnya adalah memberikan script. Tambahkan script berikut pada di bawah script yang telah Anda buat sebelumnya standar_btn.addEventListener(MouseEvent.CLICK, menu_mpi); sejarah_btn.addEventListener(MouseEvent.CLICK, menu_mpi); petunjuk_btn.addEventListener(MouseEvent.CLICK, menu_mpi); materi_btn.addEventListener(MouseEvent.CLICK, menu_mpi); kuis_btn.addEventListener(MouseEvent.CLICK, menu_mpi); keluar_btn.addEventListener(MouseEvent.CLICK, menu_mpi); function menu_mpi(e:MouseEvent):void{ var nama_tombol:String = e.currentTarget.name; if(nama_tombol == "standar_btn"){ gotoAndStop(1,"standar_kompetensi"); } if(nama_tombol == "sejarah_btn"){ gotoAndStop(1,"sejarah"); } if(nama_tombol == "petunjuk_btn"){ gotoAndStop(1,"petunjuk"); } if(nama_tombol == "materi_btn"){ gotoAndStop(1,"materi"); } if(nama_tombol == "kuis_btn"){ gotoAndStop(1,"kuis"); 109 } if(nama_tombol == "keluar_btn"){ fscommand("quit"); } } 3) Pengaturan Halaman Sejarah Matematika Pada halaman Sejarah Matematika terdapat sembilan buah tombol yang masing-masing akan mengarahkan ke tampilan penjelasan sejarah matematika dari zaman ke zaman. a. Tampilan halaman sejarah matematika adalah seperti gambar berikut Gambar 76 Tampilan Halaman Sejarah Matematika b. Setiap tombol di beri instance name. Instance name dari masing-masing tombol serta navigasinya, tercantum dalam table berikut Tombol Instance Frame yang dituju name zaman1_btn 5 (tampilan penjelasan sejarah matematika pada zaman purba) 110 zaman2_btn 10 (tampilan penjelasan sejarah matematika pada zaman Mesir) zaman3_btn 15 (tampilan penjelasan sejarah matematika pada zaman Yunani) zaman4_btn 20 (tampilan penjelasan sejarah matematika pada zaman Pertengahan) zaman5_btn 25 (tampilan penjelasan sejarah matematika pada zaman Renaissance) zaman6_btn 30 (tampilan penjelasan sejarah matematika pada abad ke 17) zaman7_btn 35 (tampilan penjelasan sejarah matematika pada abad ke 18) zaman8_btn 40 (tampilan penjelasan sejarah matematika pada abad ke 19) zaman9_btn 45 (tampilan penjelasan sejarah matematika pada abad ke 20) c. Selanjutnya adalah menuliskan script untuk masing-masing tombol zaman1_btn.addEventListener(MouseEvent.CLICK, menu_sejarah); zaman2_btn.addEventListener(MouseEvent.CLICK, menu_sejarah); zaman3_btn.addEventListener(MouseEvent.CLICK, menu_sejarah); zaman4_btn.addEventListener(MouseEvent.CLICK, menu_sejarah); zaman5_btn.addEventListener(MouseEvent.CLICK, menu_ sejarah); 111 zaman6_btn.addEventListener(MouseEvent.CLICK, menu_ sejarah); zaman7_btn.addEventListener(MouseEvent.CLICK, menu_sejarah); zaman8_btn.addEventListener(MouseEvent.CLICK, menu_ sejarah); zaman9_btn.addEventListener(MouseEvent.CLICK, menu_ sejarah); function menu_sejarah (e:MouseEvent):void{ var nama_tombol:String = e.currentTarget.name; if(nama_tombol == "zaman1_btn"){ gotoAndStop(“5"); } if(nama_tombol == "zaman2_btn"){ gotoAndStop(“10"); } if(nama_tombol == "zaman3_btn"){ gotoAndStop("15"); } if(nama_tombol == "zaman4_btn"){ gotoAndStop("20"); } if(nama_tombol == "zaman5_btn"){ gotoAndStop("25"); } if(nama_tombol == "zaman6_btn"){ gotoAndStop("30"); } 112 if(nama_tombol == "zaman7_btn"){ gotoAndStop("35"); } if(nama_tombol == "zaman8_btn"){ gotoAndStop("40"); } if(nama_tombol == "zaman9_btn"){ gotoAndStop("45"); } } 4) Pengaturan Tombol NEXT dan BACK Tombol NEXT digunakan untuk menuju ke halaman berikutnya jika materi lebih dari satu halaman, sedangkan tombol BACK digunakan untuk kembali ke halaman sebelumnya. Gambar 77 Tombol NEXT dan BACK Tombol NEXT diberi instance name : lanjut_btn, sementara tombol BACK diberi instance name : kembali_btn. Script untuk kedua tombol tersebut adalah sebagai berikut lanjut_btn.addEventListener(MouseEvent.MOUSE_DOWN,maju); function maju(event:MouseEvent):void{ nextFrame(); } kembali_btn.addEventListener(MouseEvent.MOUSE_DOWN,mund ur); function mundur(event:MouseEvent):void{ prevFrame(); } 113 114 5) Pengaturan Halaman Kuis a. Berikut ini adalah tampilan untuk halaman kuis Gambar 78 Desain halaman kuis Judul dan keterangan nilai menggunakan static text. Soal dan score akan selalu berubah isinya, sehingga menggunakan dynamic text. b. Seleksi dynamic text untuk soal kemudian buka panel properties. Atur jenis huruf, pada opsi line type,ganti menjadi multi line. Opsi multi line digunakan agar sebuah dynamic text mampu menampilkan beberapa baris teks. Beri instance name soal_txt. Selain itu Anda harus menekan tombol embed untuk menyertakan file huruf ke dalam aplikasi, sehingga aplikasi dapat dijalankan di semua tempat tanpa mengalami distorsi huruf. Gambar 79 Pengaturan teks untuk soal c. Untuk membuat tombol pilihan jawaban, buatlah sebuah Movieclip baru dengan memilih opsi Insert > New Symbol. Ketikan nama alternatif jawaban, lalu tekan OK. Selanjutnya buatlah 2 buah Layer, pada Layer 2(atas) buatlah sebuah dynamic text untuk menampilkan jawaban. Buka 115 panel properties dan tambahkan instance name"jawaban_txt". Pada Layer 1 (bawah) buatlah sebuah background berupa kotak. Gambar 80 Teks untuk pilihan jawaban d. Kembali ke Scene 1 kemudian drag Movieclip alternatif jawaban ke Stage sebanyak 4 kali. Atur posisinya masing-masing. Gambar 81 Pengaturan pilihan jawaban pada stage e. Agar setiap obyek dapat di akses oleh script, maka harus di beri instance name. Untuk memberi instance name, klik obyeknya, lalu pada bagian properties di bawah, ketikkan pada bagian instance name. Sehingga setiap obyek memiliki instance name seperti gambar berikut. 116 Gambar 82 Pemberian instance name f. Kemudian untuk menampilkan apakah jawaban pengguna benar atau salah, digunakan metode pop up. Untuk itu diperlukan sebuah movieclip yang di dalamnya terdapat beberapa pesan pop up. Untuk membuatnya buatlah sebuah tampilan popup ketika jawaban benar seperti pada gambar, lalu seleksi dan pilih convert to symbol (F8) dengan nama hasil_mc. Klik Advanched, dan beri tanda centang pada opsi export for action script Gambar 83 Pembuatan movieclip umpan balik 117 g. Edit Movieclip hasil_mc dengan cara dobel klik movieclip tersebut, kemudian klik frame 2 dan tambahkanKeyframe (F6), lalu edit konten di frame 2 menjadi tampilan ketika jawaban salah. Gambar 83 Umpan balik salah h. Dengan cara yang sama pada frame 3 buatlah tampilan ketika permainan berakhir (soal telah habis) Gambar 84 Tampilan saat soal habis i. Tahapan selanjutnya adalah penambahan kode. Buatlah sebuah layer baru agar tidak mengganggu objek yang sudah Anda buat pada langkah di atas. Selanjutnya klik frame 1layer 2, tekan F9 untuk memunculkan jendela action script dan ketikan kode berikut : var nilai:Number = 0; 118 var no_soal:Number = 0; var max_soal:Number = 10; var hasil:hasil_mc; // struktur soal 0. Soal 1-4 jawaban, Jawaban benar diletakkan no 1 var soal:Array = [["Nilai maksimum dari 2x + y dengan syarat x ≥ 0, y ≥ 0, dan 3x + 5y ≤ 15 adalah....", "10", "15", "5", "3"], ["Akar dari 676 adalah ?", "26", "24", "16", "34"], ["Nilai maksimum dari z = 20x + 30y dengan syarat: x + y ≤ 40; 3y + x ≤ 90; x ≥ 0, dan y ≥ 0, adalah.....", "1050", "950", "1000", "1100"], ["Jika diketahui P = x + y, dan Q = 5x + y, maka nilai maksimum dari P dan Q pada sistem pertidaksamaan x + 2y ≤ 12; 2x + y ≤ 12; x ≥ 0, dan y ≥ 0, adalah....", "8 dan 24", "6 dan 24", "4 dan 6", "6 dan 8"], ["Jumlah seluruh sudut segitiga sikusiku adalah ?", "180", "270", "90", "360"], ["Nilai minimum dari fungsi tujuan t = 3x + 4y dengan syarat:2x + 3y ≤ 12; 5y + 2x ≤ 19; x ≥ 0, dan y ≥ 0, adalah.... ", "17", "15", "16", "18"], ["Hukum gravitasi ditemukan oleh ? ", "Issac Newton", "Einstein", "T. A. Edison", "Kopernicus"], ["(sin 30) x 8 + (sin 90) = ? ", "5", "8", "0", "1"]]; 119 var temp_soal:Array; var temp_jawaban:Array; function acak_soal():void{ //mengacak soal temp_soal = soal.slice(0, soal.length); for (var i:Number = 0; i < soal.length; i++){ var acak:Number = Math.floor(Math.random()*soal.length); var temp:Array = temp_soal[acak]; temp_soal[acak] = temp_soal[i]; temp_soal[i] = temp; } } function restart():void{ //restart kuis, semua variabel dikembalikan ke posisi semula acak_soal(); nilai = 0; no_soal = 0; max_soal = 10; score_txt.text = "0"; //restart_btn.visible = false; } function tampilkan_soal():void{ //tampilkan soal soal_txt.text = temp_soal[no_soal][0]; //acak jawaban 120 temp_jawaban = temp_soal[no_soal].slice(1, 5); for (var i:Number = 0; i < temp_jawaban.length; i++){ var acak:Number = Math.floor(Math.random()*temp_jawaban.length); var temp:String = temp_jawaban[acak]; temp_jawaban[acak] = temp_jawaban[i]; temp_jawaban[i] = temp; } //tampilkan jawaban jawaban_1.jawaban_txt.text = temp_jawaban[0]; jawaban_2.jawaban_txt.text = temp_jawaban[1]; jawaban_3.jawaban_txt.text = temp_jawaban[2]; jawaban_4.jawaban_txt.text = temp_jawaban[3]; } function setup_awal():void{ restart(); tampilkan_soal(); //mengatur jawaban jawaban_1.stop(); jawaban_2.stop(); jawaban_3.stop(); jawaban_4.stop(); jawaban_1.addEventListener(MouseEvent.CLICK, cek_jawaban); jawaban_2.addEventListener(MouseEvent.CLICK, cek_jawaban); jawaban_3.addEventListener(MouseEvent.CLICK, cek_jawaban); 121 jawaban_4.addEventListener(MouseEvent.CLICK, cek_jawaban); } function cek_jawaban(e:MouseEvent):void{ var no_jawaban:Number = Number(e.currentTarget.name.substr(8))-1; if (temp_jawaban[no_jawaban] temp_soal[no_soal][1]){ //jawaban benar tampilkan_hasil(1); nilai+=10; score_txt.text = String(nilai); }else{ //jawaban salah tampilkan_hasil(2); } } function tampilkan_hasil(tp:Number):void{ hasil = new hasil_mc(); hasil.x = 400; hasil.y = 275; hasil.gotoAndStop(tp); hasil.scaleX = 0.2; hasil.scaleY = 0.2; hasil.waktu = 0; hasil.tp = tp; hasil.addEventListener(Event.ENTER_FRAME, 122 == gerak_hasil); addChild(hasil); } function gerak_hasil(e:Event):void{ var ob:Object = e.currentTarget; if (ob.scaleX < 1){ ob.scaleX+=0.1; ob.scaleY+=0.1; } if (ob.waktu > -1 && ob.tp < 3){ ob.waktu++; if (ob.waktu > 60){ ob.waktu = -1; //tambah no soal no_soal++; ob.removeEventListener(Event.ENTER_FRAME, gerak_hasil); removeChild(DisplayObject(ob)); if (no_soal < max_soal){ tampilkan_soal(); }else{ tampilkan_hasil(3); } } } } 123 setup_awal(); j. Tekan CTRL+ENTER untuk melihat hasilnya Gambar 85 Tampilan soal kuis k. Cara menjawabnya adalah dengan cara klik salah satu pilihan jawaban. Apabila jawaban salah, akan muncul pop up pemberitahuan bahwa jawaban salah Gambar 86 Tampilan jika jawaban pengguna salah l. 124 Jika pilihan jawaban benar, maka akan tampil pop up jawaban benar Gambar 87 Tampilan saat pilihan jawaban pengguna benar E. Latihan Soal 1. Sebutkan hal - hal yang harus diperhatikan ketika membuat multimedia interaktif agar menjadi menarik ? 2. Apa fungsi atau peran action script? 3. Coba jelaskan maksud dari script dibawah ini xxx_btn.addEventListener(MouseEvent.MOUSE_DOWN,zzz); function zzz(event:MouseEvent):void{ nextFrame(); } F. Rangkuman 1. Beberapa hal yang harus diperhatikan ketika membuat multimedia interaktif agar menjadi menarikMenentukan Proyek dan Tujuan dari Proyek, Memahami Audien, Desain Informasi, Desain Tampilan 2. Terdapat 3 jenis symbol yang digunakan di Flash, yaitu : movieclip, button, graphic. 3. Tombol adalah salah satu elemen penting dalam sebuah media interaktif. Tombol berfungsi untuk mengatur sistem navigasi dari aplikasi yang dibuat. Pembuatan navigasi dalam aplikasi adobe flash menggunakan action script 3.0, yang memiliki tiga tahap yaitu membuat obyek, memberikan nama pada obyek tersebut, dan menuliskan kode. 125 G. Kunci Jawaban 1. Menentukan Proyek dan Tujuan dari Proyek, memahami Audien, desain Informasi, desain Tampilan 2. - Membuat sistem navigasi situs - Menambahkan interaktivitas dengan user - Membuat situs atau Program yang dinamis 3. Maksud dari script tersebut yaitu Tombol dengan nama instance xxx_btn akan mendengarkan event mouse MouseEvent.MOUSE Apabila xxx_btn di-click dengan mouse, maka fungsi zzz akan dipanggil dan dikerjakan. Fungsi zzz dinamakan event handler. Sebuah event handler harus berupa fungsi dengan satu nilai input dan tidak mengembalikan nilai apa-apa H. Umpan Balik Dari kegiatan pembelajaran produk Multimedia Interaktif diharapkan untuk mengisi umpan balik dari aktivitas pembelajaran yang telah dilakukan dengan cara peserta bisa membuat produk multimedia interaktif dengan teliti dan rasa tanggung jawab. Jika belum bisa coba pelajari mulai dari kompetensi pembelajaran 2! 126 127 128 129 130 Pengujian Multimedia Interaktif A. Tujuan 1. Melalui diskusi peserta dapat membuat butir-butir pertanyaan kuisioner untuk pengujian media pembelajaran interaktif secara santun dan menghargai pendapat orang lain. 2. Melalui observasi peserta dapat melakukan pengujian terhadap media pembelajaran interaktif secara teliti dan bertanggung jawab 3. Melalui diskusi peserta dapat mengidentifikasi perbaikan yang harus dilakukan terhadap media pembelajaran interaktif secara santun dan menghargai pendapat orang lain. B. Indikator Pencapaian Kompetensi 1. Membuat butir-butir pertanyaan kuisioner untuk pengujian media pembelajaran interaktif 2. Melakukan pengujian terhadap media pembelajaran interaktif. 3. Mengidentifikasi perbaikan yang harus dilakukan terhadap media pembelajaran interaktif. 4. Menyajikan laporan hasil pengujian terhadap media pembelajaran interaktif. C. Uraian Materi Pengujian perangkat lunak adalah elemen kritis dari jaminan kualitas perangkat lunak dan merepresentasikan kajian pokok dari spesifikasi, desain dan pengkodean. Pengujian menyajikan anomali yang menarik bagi perekayasa perangkat lunak. Pada proses perangkat lunak, perekayasa pertama-tama berusaha membangun perangkat lunak dari konsep abstrak ke implementasi yang dapat dilihat, baru dilakukan pengujian. Perekayasa menciptakan sederetan test case yang dimaksudkan untuk “membongkar” perangkat lunak yang sudah dibangun. Pada dasarnya, pengujian merupakan satu langkah dalam proses rekayasa perangkat lunak yang dapat dianggap (paling tidak secara psikologis) sebagai hal yang destruktif daripada konstruktif. 131 1. Pengujian Perangkat Lunak Semua produk perangkat dapat diuji dengan satu atau dua cara : (1) dengan mengetahui fungsi yang ditentukan dimana produk dirancang untuk melakukannya, pengujian dapat dilakukan untuk memperlihatkan bahwa masing-masing fungsi beroperasi sepenuhnya, pada waktu yang sama mencari kesalahan pada setiap fungsi; (2) mengetahui kerja internal suatu produk, maka pengujian dapat dilakukan untuk memastikan bahwa “semua roda gigi berhubungan”, yaitu operasi internal bekerja sesuai dengan spesifikasi dan semua komponen internal telah diamati dengan baik. Pendekatan pengujian pertama disebut pengujian black boxdan yang kedua disebut white box. a. Pengujian white box Pengujian white box perangkat lunak didasarkan pada pengamatan yang teliti terhadap detail prosedural. Jalur-jalur logika yang melewati perangkat lunak diuji dengan memberikan test case yang menguji serangkaian kondisi dan atau loop tertentu. “Status program tersebut”dapat diuji pada pada berbgai titik untuk menentukan apakah status yang diharapkan atau dituntut sesuai dengan status aktual. Pengujian white box, kadang-kadang disebut pengujian glass box, adalah metode desaintest case yang menggunakan struktur kontrol desain prosedural untuk memperoleh test case. Dengan menggunakan metode pengujian white box, perekayasa sistem dapat melakukan test case yang : - memberikan jaminan bahwa semua jalur independen pada suatu modal telah digunakan, paling tidak satu kali. - menggunakan semua keputusan logis pada sisi true dan false - mengeksekusi semua loop pada batasan mereka dan baas operasional mereka - menggunakan struktur data internal untuk menjamin validitasnya b. Pengujian black box Pengujian black box berfokus pada persyaratan fungsional perangkat lunak. Dengan demikian, pengjian black box memungkinkan perekayasa perangkat lunak mendapatkan serangkaian kondisi input yang sepenuhnya menggunakan semua peryaratan fungsional untuk suatu 132 program. Pengujian black box bukan merupakan alternatif dari teknik white box tetapi merupakan pendekatan komplementer yang kemungkinan besar mampu mengungkap kelas kesalahan daripada metode white box. Pengujian blackbox berusaha menemukan kesalahan dalam kategori sebagai berikut : o Fungsi-fungsi yang tidak benar atau hilang o Kesalahan interface o Kesalahan dalam struktur data atau akses database eksternal o Kesalahan kinerja o Inisialisasi dan kesalahan terminasi Tidak seperti pengujian white box yang dilakukan pada awal proses pengujian, pengujian black box cenderung diaplikasikan selama tahap akhir pengujian. Karena pengujian black box memperhatikan struktur kontrol, maka perhatian berfokus pada domain informasi. Pengujian didesain untuk menjawab pertanyaan-pertanyaan berikut : - Bagaimana vaiditas fungsional diuji? - Kelas input apa yang akan membuat test case menjadi baik? - Apakah sistem sangat sensitif terhadap harga input tertentu? - Bagaimana batasan dari suatu data diisolasi? - Kecepatan data apa dan volume data apa yang dapat ditolerir oleh sistem? - Apa pengaruh kombinasi tertentu dari data terdahap operasi sistem? 2. Pengujian Produk Media Pembelajaran Interaktif Aspek dan kriteria penilaian dari sebuah media pembelajaran yaitu aspek perangkat lunak, aspek desain pembelajaran dan aspek komunikasi visual Masing-masing aspek memiliki kriteria penilaian yang berbeda dan dimodifikasi dari sumber aslinya, sesuai dengan jenis media yang akan dikembangkan. Berikut aspek dan kriteria penilaian media pembelajaran: 133 a) Aspek Rekayasa Perangkat Lunak, yang terdiri dari kriteria fungsionalitas, reliabilitas dan usabilitas. Instrumen untuk pengujian dapat memuat komponen berikut : b) o Kelengkapan menu navigasi o Fungsionalitas menu yang tersedia o Kesederhanaan fungsi navigasi menu o Aplikasi tidak mudah hang atau crash saat pengujian o Link-link sudah berfungsi dengan benar o Kemudahan pemahaman dan mempelajari menu navigasi o Kemudahan pengoperasian aplikasi Aspek Desain Pembelajaran, yang terdiri dari kriteria kejelasan tujuan, relevansi, kesesuaian dan kedalaman materi, serta umpan balik terhadap evaluasi.Instrumen untuk pengujian dapat memuat komponen berikut : c) o Kejelasan ujuan pembelajaran o Relevansi tujuan pembelajaran dengan SK/KD o Kesesuaian materi yang dipaparkan dengan kompetensi dasar o Materi yang diberikan tepat dan sistematis o Kedalaman materi yang diberikan o Umpan balik/pertanyaan di akhir materi Aspek Komunikasi Visual, yang terdiri dari kriteria kekreatifan ide, komunikatif dan audio visual.Instrumen untuk pengujian dapat memuat komponen berikut : o Interaksi pengguna dengan aplikasi o Ide/gagasan media kreatif o Animasi/video yang digunakan sudah sesuai o Format teks dan kombinasi warna o Penggunaan backsound Evaluasi dilakukan 3 kali yaitu uji ahli, uji terbatas dilakukan terhadap kelompok kecil sebagai pengguna produk, dan uji lapangan. Dengan uji coba kualitas model atau produk betul-betul teruji secara empiris Evaluasi pada kegiatan produksi ini disebut evaluasi formatif, yakni evaluasi yang bertujuan untuk memperbaiki produk. Evaluasi dapat dilakukan dengan beberapa cara, antara lain tes, preview, dan uji coba 134 Tes bertujuan untuk menemukan dan memperbaiki kesalahan, kekurangan ataupun kelemahan produk. Ada beberapa jenis test dalam pembuatan media, antara lain test fungsi, test kehandalan, dan test kompatibilitas. Test fungsi dimaksudkan untuk menguji apakah fungsi-fungsi tombol interaktivitas telah berfungsi dengan baik atau tidak. Test kehandalan untuk menguji kemampuan dan kecepatan software merespon berbagai kemungkinan klik oleh penggunaserta keamanan sistem. Sedangkan test kompatibilitas dimaksudkan untuk menguji kemungkinan software tersebut dijalankan pada berbagai sistem operasi dan kapasitas komputer. Preview adalah proses melihat awal sebelum produk dipublikasikan. Preview biasanya dilakukan oleh tim ahli dan produser untuk melihat apakah produk sudah memenuhi syarat ataukah masih ada bagian-bagian yang harus diperbaiki. Dengan demikian, uji coba merupakan evaluasi yang dilaksanakan setelah produk dianggap selesai. Uji coba bertujuan untuk mendapatkan masukan dari calon pengguna. Uji coba dapat dilakukan secara perseorangan, kelompok kecil, ataupun kelas. Uji coba model atau produk merupakan bagian yang sangat penting dalam penelitian pengembangan, yang dilakukan setelah rancangan produk selesai. Uji coba model atau produk bertujuan untuk mengetahui apakah produk yang dibuat layak digunakan atau tidak. Uji coba model atau produk juga melihat sejauh mana produk yang dibuat dapat mencapai sasaran dan tujuan. Selanjutnya dilakukan revisi yaitu tindakan perbaikan berdasarkan hasil evaluasi. 3. Kuisioner Kuisioner merupakan metode pengumpulan data yang dilakukan dengan cara memberi seperangkat pertanyaan atau pernyataan tertulis kepada responden. Angket diisi oleh responden sesuai dengan yang dia kehendaki/ketahui/rasakan. Ada dua jenis pertanyaan dalam kuesioner, yakni pertanyaan terbuka dan tertutup. Pertanyaan dengan jawaban terbuka adalah pertanyaan yang memberikan kebebasan penuh kepada responden untuk menjawabnya. Di sini peneliti tidak memberikan satupun alternatif jawaban. Keuntungannya menggunakan pertanyaan terbuka antara lain adalah: 135 o dapat digunakan manakala semua alternatif jawaban tidak diketahui oleh peneliti, atau manakala peneliti ingin melihat bagaimana dan mengapa jawaban responden serta alasan-alasannya. Hal ini sangat baik untuk menambah pengetahuan peneliti akan masalah yang diutarakannya; o membolehkan responden untuk menjawab sedetil atau serinci mungkin atas apa yang ditanyakan peneliti. Pertanyaan dengan jawaban tertutup yaitu semua alternatif jawaban responden sudah disediakan oleh peneliti. Responden tinggal memilih alternatif jawaban yang dianggapnya sesuai. Keuntungannya untuk kuesioner ini adalah sebagai berikut: o jawaban-jawaban bersifat standar dan bisa dibandingkan dengan jawaban orang lain; o jawaban-jawabannya jauh lebih mudah dikoding dan dianalisis, bahkan sering secara langsung dapat dikoding dari pertanyaan yang ada, sehingga hal ini dapat menghemat tenaga dan waktu; o responden lebih merasa yakin akan jawaban-jawabannya, terutama bagi mereka yang sebelumnya tidak yakin; o jawaban-jawaban relatif lebih lengkap karena sudah dipersiapkan sebelumnya oleh peneliti; dan o analisis dan formulasinya lebih mudah jika dibandingkan dengan model kuesioner dengan jawaban terbuka. Kuisioner dengan jawaban tertutup juga memiliki beberapa kelemahan, yaitu : o sangat mudah bagi responden untuk menebak setiap jawaban, meskipun sebetulnya mereka tidak memahami masalahnya; o responden merasa frustrasi dengan sediaan jawaban yang tidak satu pun yang sesuai dengan keinginannya; o sering terjadi jawaban-jawaban yang terlalu banyak sehingga membingungkan responden untuk memilihnya; o tidak bisa mendeteksi adanya perbedaan pendapat antara responden dengan peneliti karena responden hanya disuruh memilih alternatif jawaban yang tersedia. D. Aktivitas Pembelajaran 136 Dalam bagian ini akan dibuat pertanyaan/pernyataan untuk kuisioner media pembelajaran interaktif. Berikut ini beberapa panduan dalam membuat pertanyaan kuisioner o Jangan gunakan perkataan sulit o Jangan gunakan pertanyaan yang bersifat terlalu umum o Hindarkan pertanyaan yang ambigu o Jangan gunakan kata yang samar-samar o Hindarkan pertanyaan yang mengandung sugesti o Hindarkan pertanyaan yang berdasarkan preasumsi o Jangan membuat pertanyaan yang menyudutkan responden o Hindarkan pertanyaan yang menghendaki ingatan Ada aturan umum dalam menyusun urutan pertanyaan yang dibuat, meskipun tidak mutlak, yakni sebagai berikut: o Pertanyaan sensitif dan pertanyaan model jawaban terbuka sebaiknya ditempatkan di bagian akhir kuesioner. o Pertanyaan-pertanyaan yang mudah sebaiknya ditempatkan pada bagian awal kuesioner. o Susunlah pertanyaan dengan pola susunan yang saling berkaitan satu sama lain secara logis. o Susunlah pertanyaan sesuai dengan susunan yang logis, runtut, dan tidak meloncat-loncat dari tema satu ke tema yang lain. o Jangan gunakan pasangan pertanyaan yang mengecek reliabilitas. Misalnya, setujukah Anda terhadap aborsi? Sementara itu di tempat lain, ada pertanyaan, tidak setujukan Anda terhadap aborsi?. o Gunakan pertanyaan secara singkat dan jelas, tidak bertele-tele. Skala Likert adalah suatu skala psikometrik yang umum digunakan dalam kuesioner, dan merupakan skala yang paling banyak digunakan dalam riset berupa survei. Nama skala ini diambil dari nama Rensis Likert, yang menerbitkan suatu laporan yang menjelaskan penggunaannya . Sewaktu menanggapi pertanyaan dalam skala Likert, responden menentukan tingkat persetujuan mereka terhadap suatu 137 pernyataan dengan memilih salah satu dari pilihan yang tersedia. Biasanya disediakan lima pilihan skala dengan format seperti: 1. Sangat tidak setuju 2. Tidak setuju 3. Netral 4. Setuju 5. Sangat setuju Berikut ini susunan pertanyaan dalam kuisioner No Pernyataan STS Aspek perangkat lunak 1 Menu navigasi dalam aplikasi ini lengkap 2 Menu-menu navigasi berfungsi dengan baik, langsung mengarahkan ke halaman yang dituju 3 Program berjalan dengan baik, tidak crash dengan aplikasi lain 4 Semua link berfungsi sesuai yang diharapkan 5 Menu navigasi mudah dipahami 6 Media pembelajaran mudah dioperasikan Aspek desain pembelajaran 7 Tujuan pembelajaran jelas 8 Tujuan pembelajaran relevan dengan SK/KD 9 Materi sesuai dengan kompetensi dasar 10 Materi tepat dan sistematis 11 Pembahasan materi sampai mendalam 12 Umpan balik tersedia Aspek komunikasi visual 13 Pengguna dapat berinteraksi dengan aplikasi 14 138 Animasi mendukung materi pembelajaran TS N S SS 15 Video mendukung materi pembelajaran 16 Backsound tidak mengganggu pengguna dalam mempelajari materi 17 Background dan teks berwarna kontras E. Latihan Soal Setelah mempelajari uraian materi dan melakukan aktivitas pembelajaran, kerjakan latihan berikut ini. 1) Apa yang dimaksud dengan pengujian black box? 2) Kriteria apa saja yang dibutuhkan dalam pengujian media pembelajaran berbasis computer? 3) Sebutkan lima panduan dalam pembuatan kuisioner! F. Rangkuman 1. Semua produk perangkat dapat diuji dengan satu atau dua cara yaitu black box dan white box. 2. Aspek dan kriteria penilaian dari sebuah media pembelajaran yaitu aspek perangkat lunak, aspek desain pembelajaran dan aspek komunikasi visual 3. Kuisioner merupakan metode pengumpulan data yang dilakukan dengan cara memberi seperangkat pertanyaan atau pernyataan tertulis kepada responden.Ada dua jenis pertanyaan dalam kuesioner, yakni pertanyaan terbuka dan tertutup. G. Kunci Jawaban - Pengujian black box adalah - Kriteria penilaian dari sebuah media pembelajaran berbasis computer : a) Perangkat lunak b) Desain pembelajaran c) Komunikasi visual - Panduan dalam membuat pertanyaan kuisioner b. Jangan gunakan kata yang samar-samar 139 c. Hindarkan pertanyaan yang mengandung sugesti d. Hindarkan pertanyaan yang berdasarkan preasumsi e. Jangan membuat pertanyaan yang menyudutkan responden f. 140 Hindarkan pertanyaan yang menghendaki ingatan H. Umpan Balik Dari kegiatan pembelajaran Efek Visual Multimedia Interaktif diharapkan untuk mengisi umpan balik dari aktivitas pembelajaran yang telah dilakukan dengan cara menjawab pertanyaan sebagai berikut: 1. Apakah peserta dapat membuat butir-butir pertanyaan kuisioner untuk pengujian media pembelajaran interaktif? 2. Bisakah peserta melakukan pengujian terhadap media pembelajaran interaktif? 3. Apakah peserta dapat mengidentifikasi perbaikan yang harus dilakukan terhadap media pembelajaran interaktif? 4. Apakah peserta dapat menyajikan laporan hasil pengujian terhadap media pembelajaran interaktif? 141 142 EVALUASI 1. Tombol NEXT dan BACK dalam sebuah aplikasi multimedia interaktif menunjukkan bahwa media tersebut memiliki interaktifitas pada level …. a. Manipulasi b. Umpan balik c. Adaptasi d. Komunikasi 2. Media pembelajaran interaktif yang yang memuat penjelasan, rumus, prinsip, bagan, tabel, definisi istilah, dan latihan merupakan model media pembelajaran …. a. Drill and practice b. Tutorial c. Simulation d. Socratic 3. Mengapa perlu dibuat storyboard? a. Biar keren b. Agar dapat dibuat film c. Karena tuntutan klien d. Sebagai gambaran cerita awal 4. Pak Andi menggunakan multimedia pembelajaran interaktif untuk melengkapi atau menunjang materi pembelajaran yang diterima siswa di dalam kelas. Hal ini berarti pak Andi menggunakan media pembelajaran interaktif tersebut sebagai …. a. Komplemen b. Suplemen c. Substitusi d. Nominasi 143 5. Gambar berikut ini merupakan format storyboard berbentuk Visual No. Frame/slide Catatan Audio a. Double kolom b. Single colom c. Kartu d. substitusi 6. Apa yang dimaksud dengan prinsip user compatibility dalam pembuatan antarmuka aplikasi? a. perangkat lunak seolah-olah mengenal usernya, mengenal karakteristik usernya, dari sifat sampai kebiasaan manusia secara umum b. antarmuka harus sesuai dengan sistem aslinya c. antarmuka harus mampu membantu para user dalam menyelesaikan tugasnya d. user lebih menyukai hal-hal yang bersifat sederhana tetapi mempunyai kekuatan/ bobot 7. salah satu cara yang paling tepat diperhatikan ketika membuat multimedia interaktif a. Mencari informasi b. Ketepatan waktu c. Menetukan tingkat pendidikan d. Tujuan dari proyek yang sudah sangat jelas 8. Struktur navigasi linear sangat bagus untuk diterapkan pada hal-hal berikut ini, kecuali a. Simulasi b. Presentasi c. Aplikasi training berbasis computer d. Aplikasi yang memerlukan informasi berurutan 144 9. Berikut ini adalah tahapan implementasi desain komunikasi visual dalam multimedia interaktif untuk pembelajaran, kecuali …. a. Memahami karakteristik media b. Merumuskan konsep komunikasi visual c. Eksekusi audio visual d. Pengujian 10. Berikut ini beberapa trik untuk tetap mempertahankan konsentrasi pengguna pada media pembelajaran interaktif, kecuali …. a. Tempatkan informasi dalam lokasi yang konstan b. Pilih type huruf yang rumit c. Gunakan tata letak konsisten d. Gunakan penanda sebagai alat bantu bagi pengguna 11. Dari pernyataan berikut ini, manakah yang bukan merupakan symbol dalam adobe flash? a. Button b. Movieclip c. Shape d. Graphic 12. Apa maksud dari script berikut ini? if (nama_tombol == "satu"){ gotoAndStop(2); } a. Jika tombol satu di tekan, lompat dan berhenti di frame 2 b. Jika tombol satu ditekan, lompat dan jalankan animasi pada frame 2 c. Jika tombol satu di tekan, isi frame 2 akan hilang d. Jika tombol satu di tekan, aplikasi akan menutup 13. Dari pernyataan berikut ini, manakah yang bukan merupakan jenis teks pada adobe flash? a. Relative text 145 b. Dynamic text c. Input text d. Static text 14. Jendela action pada adobe flash dapat dimunculkan dengan menekan tombol …. a. F6 b. F7 c. F8 d. F9 15. Pengujian perangkat lunak yang didasarkan pada pengamatan yang teliti terhadap detail procedural dikenal dengan nama pengujian …. a. White box b. Black box c. Yellow box d. Blue box 16. Dari pernyataan berikut, kesalahan manakah yang tidak berusaha ditemukan dengan metode pengujian black box a. Interface b. Kinerja c. Struktur control d. Navigasi 17. Berikut ini adalah tahapan pengujian aplikasi media pembelajaran interaktif, kecuali …. a. Uji ahli b. Uji petik c. Ujia terbatas d. Uji lapangan 146 18. Berikut ini adalah prinsip yang harus diperhatikan dalam pembuatan antarmuka sebuah aplikasi, kecuali a. user compability b. product compability c. system compability d. simplicity 19. dari script act.btn.addEventListener (mouseEvent.CLICK, onClick); apa fungsi dari addEventListener a. mendengarkan apa yang dilakukan pada button b. menunjukkan kejadian ketika pengguna di klik c. memberikan perintah untuk pindah frame d. merupakan fungsi 20. Dalam aplikasi adobe flash komponen yang berfungsi mengelompokan dan mengatur isi sebuah movie adalah a. Timeline b. Stage c. Properties d. Toolbox 147 148 PENUTUP Demikianlah akhir dari modul diklat guru pembelajarpaket kompetensi multimedia, kelompok kompetensi J Multimedia interaktif. Semoga setelah mempelajari dan mengerjakan tugas serta latihan yang ada, peserta diklat dapat lebih terampil dalam membuat media pembelajaran interaktif. Apabila ada kekurangan dalam penulisan modul ini, penulis sangat berharap ada saran bagi perbaikan isi modul ini di kemudian hari. 149 150 GLOSARIUM Multimedia interaktifadalah pemanfaatan komputer untuk membuat dan menggabungkan teks, gambar, suara, video, dan animasi dengan menggabungkan perangkat-perangkat tertentu yang dapat memungkinkan pengguna melakukan navigasi, berinteraksi dan berkomunikasi. Storyboard adalah dokumen perancangan multimedia interaktif yang memuat instruksi untuk pemrograman, script audio, dan deskripsi detail element-elemen visual seperti teks, video, gambar dan animasi. Antarmuka merupakan mekanisme komunikasi antara pengguna (user) dengan aplikasi yang dapat menerima informasi dari pengguna dan memberikan informasi kepada pengguna untuk membantu mengarahkan alur penelusuran masalah sampai ditemukan suatu solusi. ActionScript adalah bahasa pemrograman Adobe Flash yang digunakan untuk membuat animasi atau interaksi 151 152 DAFTAR PUSTAKA Maulana, Modul Pelatihan Membuat STORYBOARD, PGSD UPI Bandung Orr, Kay.L, Golas, Katharine C, and Yao, Katty Storyboard Development for Interactive Multimedia Training, http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.118.2147 &rep=rep1&type=pdf diakses 10 Oktober 2015 Wardani, Ratna, Yudha Laksana, Novianto dan Sutedja, Irfan Bawa, Pengembangan Media Pembelajaran Interaktif Wayang BerbasisWeb Untuk Pendidikan Kejuruan, Jurnal SITIA 2013, Jurusan teknik elektro ITS

153