INTERAKTIF
MODUL 2021
Nama :
Kelas :
A. Media Pembelajaran
Kata media berasal dari bahasa latin medius yang secara harfiah berarti
“tengah”, “perantara”, atau “pengantar”. Dalam bahasa Arab, media adalah perantara
atau pengantar pesan dari pengirim kepada penerima pesan (Arsyad, 2011). Pada
pengertian lain, media adalah segala sesuatu yang dapat digunakan utuk menyampaikan
pesan dari pengirim ke penerima pesan (Prawiradilaga, 2008). Menurut Gagne (1992),
media adalah berbagai jenis komponen dalam lingkungan siswa yang dapat
media pembelajaran sebagai bentuk fisik yang dapat menyajikan pesan yang dapat
merangsang siswa untuk belajar. Dari dua definisi ini tampak pengertian media
mengacu pada penggunaan alat yang berupa benda untuk membantu proses
peralatannya. Media pendidikan adalah sumber belajar dan dapat juga diartikan dengan
manusia dan benda atau peristiwa yang membuat kondisi siswa mungkin memperoleh
pengetahuan, keterampilan atau sikap. Selain alat yang berupa benda, yang digunakan
untuk menyalurkan pesan dalam proses pendidikan, pendidikan sebagai figur sentral
atau model dalam proses interaksi edukatif merupakan alat pendidikan yang juga harus
diperhitungkan.
interaksi akan berjalan lancar dan tercapainya hasil yang maksimal, apabila
komunikasi, media adalah alat yang memindahkan informasi (pesan) dari sumber
kepada penerima.
menurut tingkat dari yang paling konkrit ke yang paling abstrak, dimana partisipasi,
observasi, dan pengalaman langsung memberikan pengaruh yang sangat besar terhadap
pengalaman belajar yang diterima siswa. Penyampaian suatu konsep pada siswa akan
tersampaikan dengan baik jika konsep tersebut mengharuskan siswa terlibat langsung
didalamnya bila dibandingkan dengan konsep yang hanya melibatkan siswa untuk
mengamati saja. Sedangkan menurut Newby (2000), media pembelajaran adalah media
media pembelajaran adalah media kreatif yang digunakan dalam memberikan materi
pelajaran kepada anak didik sehingga proses belajar mengajar lebih efektif, efisien dan
menyenangkan.
Objek yang terlalu besar – bisa digantikan dengan realita, gambar, film bingkai,
3. Objek yang kecil – dibantu dengan proyektor mikro, film bingkai, film, atau
gambar. Gerak yang terlalu lambat atau terlalu cepat, dapat dibantu dengan
Kejadian atau peristiwa yang terjadi dimasa lalu bisa ditampilkan lagi lewat
rekaman film, video, film bingkai, atau foto objek yang terlalu kompleks, dapat
Konsep yang terlalu luas (gempa bumi, gunung berapi, iklim, planet dan lainlain)
4. Dengan menggunakan media pendidikan secara tepat dan bervariasi dapat diatasi
sikap pasif anak didik. Dalam hal ini media pembelajaran berguna untuk
5. Dengan latar belakang dan pengalaman yang berbeda diantara peserta didik,
sementara kurikulum dan materi pelajaran di tentukan sama untuk semua peserta
Rudi Bretz mengidentifikasi ciri utama dari media menjadi tiga unsur pokok yaitu
suara, visual dan gerak. Visual sendiri di bedakan menjadi tiga yaitu gambar, garis (line
graphic) dan simbol yang merupakan suatu kontinum dari bentuk yang dapat di tangkap
dengan indera penglihatan. Disamping itu Bretz juga membedakan antara media siar
yaitu:
Desain Multimedia Interaktif ©LailaLimariantika
3
7. Media audio
8. Media cetak.
2. Komunikasi lisan
3. Media cetak
4. Gambar diam
5. Gambar gerak
7. Mesin belajar.
Para ahli telah mengklasifikasikan media pendidikan kepada dua bagian yaitu alat
pendidikan yang bersifat benda (materil) dan alat pendidikan yang bukan benda (non
materil). Oemar Hamalik menyebutkan, secara umum alat pendidikan materil terdiri
dari:
Kedua, alat-alat audio visual yakni alat-alat yang dapat digolongkan pada:
transparansi.
Menurut Ronald H. Anderson yang termasuk media dalam bentuk materil adalah media
yang termasuk media auditif adalah, tape recorder dan radio. Disamping media visual
dan media auditif, media audio visual merupakan media yang berhubungan dengan
Richey (dalam Azhar Arsyad, 2006) membagi media pembelajaran dalam empat
Kelompok media hasil teknologi cetak meliputi teks, grafik, foto, dan
pesan-pesan audio dan visual. Contohnya proyektor film, televisi, video, dan
sebagainya.
Desain Multimedia Interaktif ©LailaLimariantika
5
Pada tahun 2010 perkembangan teknologi digital menuju ke arah mobile (gadget),
sebagian peserta didik memiliki gadget berupa smartphone yang merupakan media
efektif dalam menyampaikan suatu informasi. Dari data yang dikumpulkan oleh
WaiWai Marketing pada tahun 2014, pengguna mobile phone berbasis android di
Indonesia adalah yang tertinggi di Asia Tenggara yaitu 44 juta pengguna. Dari jumlah
tersebut, 11% adalah pengguna handphone berusia antara 7 - 17 tahun, yang merupakan
usia aktif peserta didik. Berkembangnya media mobile phone telah dimanfaatkan oleh
beberapa pihak sebagai salah satu media pembelajaran, sehingga menjadikan klasifikasi
demikian dalam buku ini pembelajaran berbasis mobile phone diklasifikasikan secara
navigasi, berinteraksi dan berkomunikasi. Interaksi adalah suatu fitur yang menonjol
Pembelajaran yang aktif tidak saja memungkinkan pengguna melihat atau mendengar
pertanyaan yang diajukan komputer atau aktif dalam simulasi yang disediakan
komputer.
Multimedia interaktif dapat di bedakan menjadi beberapa macam seperti berikut ini.
melalui jalur atau kawat atau saluran atau jaringan. Contohnya, seperti situs
web, Yahoo Messenggers, dan lain sebagainya. Jenis media ini termasuk media
lini atas, yang komunitas sasarannya luas dan mencangkup masyarakat luas.
tifak melalui jalur atau kawat atau saluran atau jaringan. Contohnya seperti CD
model tutorial, drill and practice, dan simulasi). Media ini termasuk media lini
Desain Multimedia Interaktif ©LailaLimariantika
7
bawah, karena sasarannya tidak terlalu luas dan hanya mencakup masyarakat
nonlinear.
melihat isi materi dengan cara berinteraksi. Tidak ada hierarchy yang
inheren memaksa pengguna untuk berinteraksi dengan materi. I nteraksi ini bervariasi
dari yang paling sederhana hingga yang kompleks. Interaksi sederhana misalnya pe
ngguna harus menekan keyboard atau melaakukan klik dengan mouse untuk b
erpindah-pindah halaman (display) atau memasukkan jawaban dari suatu la tihan dan
komputer merespon dengan memberikan jawaban benar melalui suatu umpan balik
sederhana di mana pen gguna bisa mengubah-ubah suat u variabel tertentu atau simulasi
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.
ateri (penyajian yang dinamis, sudut pandang, contoh-contoh). Kendali terhadap isi
pelajaran meliputi pemilihan sejumlah informasi (umpan balik singkat a tau secara luas,
bantuan), meme cah informasi menjadi bagian yang dapat di pahami dengan tepat
1. Prinsip Multimedia
Keterangan: Orang bisa belajar lebih baik dengan adanya gambar-gambar dan
Keterangan: Orang bisa belajar lebih baik saat kata-kata dan gambar-gambar
layar.
Keterangan: Orang bisa belajar lebih baik saat kata-kata dan gambar-gambar
4. Prinsip Koherensi
Keterangan: Orang bisa belajar lebih baik saat kata-kata, gambar-gambar, atau
5. Prinsip Modalitas
Keterangan: Orang bisa belajar lebih baik dari animasi dan narasi daripada
6. Prinsip Redundansi
Keterangan: Orang bisa belajar lebih baik dari animasi dan narasi daripada
7. Prinsip Personalisasi
Keterangan: Orang bisa belajar lebih baik dari kata-kata yang bersifat
8. Prinsip Interaktivitas
Keterangan: Orang bisa belajar lebih baik saat dapat mengoperasikan sendiri
9. Prinsip Pembagian
Keterangan: Orang bisa belajar lebih baik saat mereka mengetahui nama dan
Keterangan: Orang bisa belajar lebih baik saat kata-kata yang penting diberi
penekanan.
Desain Multimedia Interaktif ©LailaLimariantika
11
Keterangan: Orang bisa belajar lebih baik saat narasi dalam multimedia
pembelajaran diberi suara manusia yang berlogat biasa daripada suara mesin
Keterangan: Orang tidak bisa belajar lebih baik dari sebuah multimedia
1. Umpan balik
Tingkat umpan balik merupakan tingkat interaktif yang paling rendah, berkaitan
dengan tersedianya umpan balik terhadap tindakan siswa yang telah ditentukan
jawaban, tombol lanjut yang disembunyikan. Umpan balik dapat diberikan secara
langsung atau di tunda untuk beberapa saat, sederhana, bersifat korektif (ya-tidak,
daftar kata, bantuan), dengan atau tanpa kendali siswa (umpan balik otomatis atau
2. Manipulasi
danbervariasi. Tingkat interaktif ini ada dua macam, yaitu kendali siswa , misalnya
memindahkan obyek mengguna kan teknik drag and drop, memutar obyek,
simulasi atau visualisasi dinamis (animasi, rotasi) yang menunjukkan suatu proses
3. Adaptasi
kebiasaan siswa secara online. Tampilan selanjutnya ditentukan secara real time
berdasarkan tindakan yang dilakukan siswa saat ini dan yang telah dilakukan
sebelumnya. Interaksi adaptif dapat berupa kendali sistem (adaptasi otomatis) atau
4. Komunikasi
tugas pribadi secara real time dan penyesuaian informasi. Secara teknis,
Desain Multimedia Interaktif ©LailaLimariantika
13
level ini membutuhkan kanal komunikasi sinkron atau tak sinkron antar
1. Tutorial
pertanyaan.
bagian demi bagian atau kuis pada akhir presentasi. Instruksi tutorial
ekumpulan tampilan.
Model drill and practice menganggap bahwa konsep dasar telah dikuasai oleh
dengan kasus-kasus konkret, dan menjelajahi daya tangkap mereka terhadap materi.
Cara kerja Drill and practice ini terdiri dari tampila n dari sebuah pertanyaan
tidak menampilkan suatu instruksi, tetapi hanya mempraktekkan konsep yang sudah
3. Simulasi
4. Instructional games
Model ini jika didesain dengan baik dapat memanfaatkan sifat kompetitif
game pembelajaran yang baik sukar dirancang dan perancang harus yakin bahwa
dalam upaya memberikan suas ana permainan, integritas tujuan pembelajaran tidak
hilang.
5. Hybrid
Model hybrid adalah gabungan dari dua atau lebih model multimedia
model drill and practice dengan tujuan untuk meemperkaya kegiatan pengguna,
meningkatkan pem belajaran. Meskipun model hybrid bukanlah model yang unik,
tetapi model ini menyajikan metodee yang berbeda dalam kegiatan pembelajar an.
6. Socratic
Model ini berisi percakapan atau dialog antara pengguna dengan komputer
dalam natural language. Bila pengguna dapat menjawab sebuah pertanyaan disebut
7. Inquiry
Model Inquiry adalah suatu sistem pangkalan data yang dapat dikonsultasikan
oleh pengguna, dimana pangkalan data tersebut berisi data yang dapat memperkaya
pengetahuan pengguna.
8. Informational
1. Suplemen (tambahan)
untuk materi pelajaran tertentu. Dalam hal ini, tidak ada keharusan bagi guru atau
memanfaatkan multimedia secara tepat dalam membelajarkan siswa atau para siswa
2. Komplemen (pelengkap)
apabila kepada siswa yang dapat dengan cepat menguasai materi yang disampaikan
guru sec ara tatap muka diberikan kesempatan untuk memanfaatkan multimedia
tertentu yang memang dikembangkan secara khusus. Tujuannya ada lah untuk lebih
kepada para siswa yang mengalami kesulitan memahami materi pelajaran yang
agar para siswa semak in lebih mudah memahami maateri pelajaran yang disajikan
guru di kelas.
3. Substitusi (pengganti)
menggantikan sebagian besar peran guru. Ini dapat menjadi alternatif sebagai
sebuah model pembelajaran. Tujuannya adalah agar para siswa dapat secara luwes
pembelajaran yang dapat dipilih guru dan siswa, yaitu: sepenuhnya secara tatap
secara tatap muka dan sebagian lagi melalui multimedia, dan pembelajaran
J. Aktivitas Pembelajaran
K. Latihan
Mendesain dan membuat proyek multimedia interaktif seperti seorang arsitek gedung,
yang harus memahami bagaimana menggunakan segala sumber daya yang ada menjadi
Rancangan produk multimedia interaktif dimulai dengan bagian sketsa kasar yang
A. Flowchart
menggambarkan secara langsung alur dari proyek yang dibuat. Mulai dari awal
Dari gambar flowcart diatas akan sangat membantu kita dalam menentukan navigasi
Proyek multimedia tidak lebih daripada susunan teks, grafik, suara, animasi
dan elemen video sehingga menghasilkan produk yang sesuai dengan tujuan dan
Pada halaman web, site map umumnya merupakan daftar isi dengan tingkatan
utama. site map sangat berguna bagi proyek multimedia interaktif karena berupa
daftar isi dan menjelaskan apa yang akan terjadi ketika pengguna bernteraksi.
1. Linier
satu persatu secara berurutan. Jika satu halaman di klik maka akan muncul
2. Hierarki
3. Nonlinear
Navigasi yang dilakukan secara bebas tanpa melalui jalur yang telah
4. Komposit
B. Pengertian Storyboard
audio, dan deskripsi de tail element-elemen visual seperti teks, video, gambar dan
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
pekerjaan yang berfungsi memba ntu untuk mengidentifikasi material apa saja yang
programmer. Storyboard menjadi dokumen utama desain yang menjadi acuan bagi
lain.
3. Narasi digunsksn untuk melengkapi hal sulit yang tidak bisa diwakili dengan
bentuk visual.
6. Gunakan simbol yang sederhana dan mudah dipahami oleh semua orang.
7. Gunakan gambar bentuk yang menarik serta komposisi yang tepat dan mudah
1. HOME
2. TUJUAN
3. MATERI
4. VIDEO
5. EVALUASI
6. PROFIL
Berisi
1. TOMBOL EXIT
2. TOMBOL PETUNJUK
1. KONSEP DASAR
2. SEGITIGA EXPOSURE
3. ISO
4. SPEED
5. DIAFGRAMA
6. MENGOPERASIKAN
Format storyboard multimedia interaktif antara lain kartu, double coloum dan
landscape.
5. Narasi.
atau narasi.
4. Bahasa yang digunakan adalah bahasa lisan bukan bahasa tulisan (terutama
6. Simbol dalam bentuk yang sederhana, jelas maknanya serta sudah diketahui
oleh siswa.
7. Gambar dalam bentuk yang menarik, warna kontras (kecuali untuk background)
Kuantitas dari interaksi tergantung pada beberapa kriterian yaitu jenis input yang
multimedia interaktif :
1. Sediakan kesempatan untuk berinteraksi setiap tiga atau empat halaman, atau
2. Pecah materi menjadi beberapa bagian dan buatlah dalam bentuk pertanyaan
dan umpan balik, review secara berkala dan rangkuman dari setiap bagian.
instruksi pembelajaran.
Desain Multimedia Interaktif ©LailaLimariantika
31
telah dipelajarinya
keseluruhan aplikasi
Berikut ini beberapa panduan bagi perancangan kendali pengguna baik dalam
harus menyelesaikan materi yang panjang dalam tiap topik dan pengguna sudah
familiar dengan materi dan diperbolehkan memilih topik apa yang akan
dipelajari.
2. Jangan gunakan kendali pengguna terhadap topik materi jika ada persyaratan
4. Jangan gunakan kendali penuh terhadap materi jika semua materi diperlukan
salah persepsi pada pengguna atau pengetahuan dasar yang diperlukan. Umpan
balik juga dapat digunakan untuk membantu pengguna belajar, mengingat dan
mengukur seberapa banyak yang telah dipelajari. Berikut ini beberapa panduan
pengguna
tanggapan
interaktif untuk mata kuliah Aljabar dengan pokok bahasan Program Linear
8, 7, 6, 5, 4, 3, 2, 1.
(Lanjut)
Narasi:
melanjutkan pembahasan
MENU
1. STANDAR KOMPETENSI
2. SEJARAH MATEMATIKA
3. PETUNJUK
4. MATERI
5. QUIZ
6. KELUAR
SI BAGIAN 2
….
MATEMATI masehi.
H. Aktivitas Pembelajaran
3. Membuat laporan hasil pengamatan dan identifikasi, informasi apa saja yang
perlu ditambahkan jika memang merasa ada informasi yang kurang dalam
storyboard tersebut.
I. Latihan
A. User Interface
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).
1. User Compatibility
sifat dari user karena antarmuka harus disesuaikan dengan user yang
jumlahnya bias jadi lebihdari1 dan mempunyai karakter yang berbeda. Hal
Desain Multimedia Interaktif ©LailaLimariantika
37
2. Product Compatibility
dengan sistem manual atau sistem yang ada. Hal tersebut sangat tidak
3. Task Compatibility
berpikir, tapi user dihadapkan dengan pilihan yang mudah dan proses
antarmuka. Contoh: User hanya klik setup, tekan tombol next, next, next,
4. Workflow Compatibility
yang ada pada sistem manual tidak ditemukan pada software yang
5. Consistency
Sebuah sistem harus sesuai dengan sistem nyata serta sesu ai dengan
produk yang diha silkan. Oleh karena itu software engineer harus
sehingga user tidak mengalami kesulitan pada saat berpin dah posisi
6. Familiarity
umumnya, dari segi tata letak, model dan sebagainya. Hal ini dapat
membantu user cepat berinteraksi dengan sisem melalui antar muka yang
7. Simplicity
baik. Kesederhanaan disini lebih berarti sebagai hal yang ringkas dan tidak
terlalu berbelit. User akan merasa lelah dan bosan jika pernyataan,
dan berbelit. User lebih menyukai hal-hal yang bersifat sederhana tetapi
8. Direct Manipulation
dengan kebutuhan, sifat dan karakteristik user tersebut. Selain itu, sifat
dariuser yang suka merubah atau mempunyai rasa bosan. Contoh: tampilan
warna sesuai keinginan (misal pink) pada window bisa dirubah melalui
9. Control
Prinsip control ini berkenaan dengan sifat user yang mempunyai tingkat
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
kesalahan.
10. Flexibility
Fleksibel merupakan bentuk dari dari solusi pada saat menyelesaikan masalah.
masalah. Sebagai contoh adanya menu, hotkey, atau model dialog yang lainnya.
Multimedia Interaktif
1. Direct Manipulation
Interaksi langsung dengan objek pada layar. Misalnya d elete file dengan
sangat singkat, umpan baliklangsung diberikan pada tiap aksi sehingga kesalah an
terdeteksi dan diperbaiki dengan cepat. Kekurangannya adalah antarmuka tipe ini
rumit dan memerlukan banyak fasilitas pada sistem komputer, cocok untuk
2. Menu selection
Memilih perintah dari daftar yang disediakan. Misalnya saat klik kanan dan
memilih aksi yang dikehendaki. Kelebihannya adalah pengguna tidak perlu ingat
adalah tidak ada logika AND atau OR, perlu ada struktur menu jika banyak pilihan,
dan menu dianggap lambat oleh pengguna ahli dibanding command language.
3. Form Fill in
Mengisi area-area pada form. Kelebihannya masukan data yang sederhana dan
4. Command Language
diketikan langsung pada system, 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
5. Natural language
Internet. Kelebihannya perintah dalam bentu k bahasa alami, dengan kosa kata yang
terbatas (singkat) misalnya kata kunci yang kita tentukan unt uk dicari oleh search
di dalam buku ke layar komputer. Layar pada akhirnya berisi penuh dengan
materi yang harus dibaca oleh peserta didik, yang mana menurut Edgar Dale
Berbeda halnya jika sebuah media pembelajaran dibuat dengan desain yang
baik, dengan melibatkan grafis, audio, video dan interaktifitas akan menaikkan
pengetahuan dasar desain tenaga pengajar yang membuat media tersebut. Pada
pengetahuan dasar tentang desain yang baik, komposisi, tata letak, warna dan
materinya. Ketika kita menggunakan istilah “desain”, maka dalam teori desain
1. Design Treatment
pengertian analisis tentang produk apa yang akan dibuat dan apa yang
mendalam tentang apa saja yang terkait dengan media tersebut diantaranya
adalah:
ada, apa yang membedakan media yang akan dibuat dengan media
yang sudah ada. Selain itu juga perlu dipikirkan fitur apa yang akan
Semua hal yang terkait dengan ide yang akan kita wujudkan perlu
pembelajaran “Pengenalan Sayur dan Buah” pada anak usia dini. Ketika
berbicara target audiense dari media yang akan dibuat yaitu anak usia dini,
maka harus didefinisikan terlebih dahulu sifat-sifat dari target tersebut yaitu
suka sesuatu yang berwarna cerah, sebagian besar belum bisa membaca namun
aktif mendengar (dalam hal ini audio akan berperan penting), menyukai benda-
benda yang bergerak dan dapat mengoperasikan media dengan cara yang
paling sederhana yaitu dengan menekan layar (touch). Maka desain yang
ditampilkan adalah sebuah layar dengan gambar buah dan sayur yang
dipersonalifikasi, dalam artian buah dan sayur seolah-olah hidup dan bergerak
bebas di alam. Ketika anak menyentuh salah satu objek, maka akan muncul
Pada tahapan ini aset-aset visual dibuat. Asets visual meliputi grafik yang
Pada umunya tahapan ini lebih mudah dilakukan oleh desainer grafis,
pembelajaran yang dibuat menjadi lebih atraktif dan efisien dari sisi ukuran
file.
Pada saat ini terdapat beberapa situs yang menyediakan aset grafis secara
macam, mulai dari 100% gratis, lisensi nama pembuat dan lisensi
Pada dasarnya tipe grafis ada 2 jenis yaitu vector dan bitmap.
3. Programming Phase
4. Testing Phase
Tahapan testing lebih baik dilakukan oleh beberapa orang dengan tingkat
sudut pandang, apakah media pembelajaran sudah sesuai atau belum. Dari
tekstur dan gelap terang. Unsur tersebut juga muncul dalam sebuah desain
hubungan antara:
7. Audio
8. Video/animasi
elemen navigasi dapat dibuat antara 10-20% dari ukuran layar, dan
layar.
dengan baik. Misal, elemen teks diatur sedemikian rupa dari sisi ukuran
gagasan yang lebih perlu ditampilkan dari pada yang lain. Dalam
informasi atau apa yang akan disampaikan akan menjadi tidak jelas.
untuk penekanan.
rasa serasi atau sepadan. Dengan kata lain bila bobot elemen-
elemen itu setelah disusun memberi kesan mantap dan tepat pada
tempatnya.
sebuah karya. Dari ritme dapat ditentukan eyeflow atau arah baca
sebuah desain. Secara umum arah baca suatu desain adalah dari kiri
sama.
Gambar 25. Elemen yang selaras dari segi warna, gaya desain
E. RANCANGAN ANTARMUKA
mencapai an gka 1 maka akan tampil ucapan selam at datang bagi pengguna
aplikasi
Halaman judul m enampilkan judul materi dalam aplika si media pembelajaran inter
aktif. Pada halaman ini sudah ditampilkan m enu-menu dalam aplikasi yaiitu menu
halaman judul ini, pengg una dapat langsung memilih salah satu menu yang ada
dalam apliikasi. Jika pengguna memilih menu keluar, maka aplikasi akan tertutup.
Jika penggu na memilih menu standar kompetensi, ma ka akan tampil halaman yang
memuat informasi mengenai standar kompetensi. Pada halaman ini t erdapat tombol
untuk lanjut ke halaman sta ndar kompetensi berikutnya dan tombol kembali untuk
menuju halam an sebelumnya. Terdapat jug a tombol home yang jika dipilih akan
zamannya. Oleh karena itu, pada menu sej arah matematika terdapat beb erapa
tombol pilihan untuk mempelajari sej arah matematika sesuai dengan zamannya.
Pengguna tinggal memilih sa lah satu zaman yang akan di pelajari, maka akan
Pada menu kuis terdapat form fill in. Pengguna harus memasukkan nama
dan NIM, setelah itu menekan tombol lanjut. Jika tombol lanjut di tekan,
F. Aktivitas Pembelajaran
Berdasarkan storyboard yang telah Anda buat dalam kegiatan belajar sebelumnya,
A. Struktur Navigasi
Salah satu ciri multimedia interaktif adalah kemudahan navigasi. Sebuah aplikasi
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
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
dan mudah.
1. 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:
a. Presentasi
2. Struktur hirarki
memiliki lebih banyak menu dengan banyak pilihan. Tidak ada batas
ukuran atau jumlah menu dan sub-menu yang dapat dimiliki dalam
Struktur hirarki diadaptasi dari top – down design. Konsep navigasi ini
dengan banyak obyek dalam setiap arah pada setiap obyek dalam
aplikasi multimedia.
Untuk membuat struktur hyperlink yang fleksibel, struktur jaringan dapat bekerja
Pada model ini hanya terdapatdua macam link, yaitu dari halaman utama ke
4. Struktur kombinasi
halaman intro terdapat tombol untuk menampilkan menu utama. Untuk lebih
halaman intro terdapat tombol untuk menampilkan halaman menu utama. Setelah
menu utama tampil, pengguna menekan tombol standar kompetensi, maka akan
halaman intro terdapat tombol untuk menampilkan halaman menu utama. Setelah
menu utama tampil, pengguna menekan tombol sejarah matematika, maka akan
D. Aktivitas Pembelajaran
Peserta diklat membentuk kelompok yang terdiri dari 3-5 orang. Masing
interaktif!
A. Komunikasi Visual
dengan berbagai gramatika tertentu. Oleh karena itu, desain komunikasi visual
dikomunikasikan.
audio visual.
yang berupa visual (gambar dan tulisan), suara (narasi, dialog, sound
komunikasi pembelajaran.
media presentasi yang disajikan oleh guru sebagai alat bantu pengajaran
Selain itu multimedia ini dapat pula dimanfaatkan sebagai media pembelajaran
mandiri yang diperuntukkan bagi siswa 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.
melalui gagasan yang kreatif. Dalam gagasan kreatif tersebut, guru dapat
secara kreatif.
datar dan biasa-biasa saja, untuk kemudian pada materi tertentu (yang
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 siswa merasakan bahwa
materi adalah mutlak, sedangkan menarik atau tidaknya suatu bahan ajar
dan siswanya.
komunikatif, agar mudah dicerna dan disenangi oleh siswa. Untuk itu hal yang
➢ Pesan disajikan melalui gagasan yang unik dan tidak klise (tidak
media ini pada intinya mencakup: tata letak, tipografi, gambar dan
a. Tata Letak.
eksekusinya persis sama). Dalam desain komunikasi visual hal ini disebut
unity, yakni menggunakan bahasa audio dan visual yang harmonis, utuh,
Untuk membantu eksekusi tata letak dapat dibuat grid system, yaitu
Penyusunan teks secara konsisten dibuat rata kiri, rata kanan, atau
simetris tergantung dari konsep yang dikehendaki. Tata letak rata kiri
kejelasan isi materi ajar. Tata letak yang sederhana juga dimaksudkan agar
elemen grafis yang tepat, minimal dan senada sesuai karakter informasi.
dan penataan elemen grafis dapat memberikan citra pesan yang diinginkan,
misalnya: kesan serius, ringan, formal, informal, dan lain sebagainya. Tata
b. Tipografi
bahasa verbal dan diupayakan agar mendukung isi pesan, baik secara fungsi
Desain Multimedia Interaktif ©LailaLimariantika
75
pesan, huruf sebagai isi pesan verbal) dan tersirat (untuk citra pesan, huruf
dibaca dan nyaman/enak dibaca), dalam hal ini huruf lebih berfungsi
memiliki karakter sesuai dengan topik dari judul tersebut, dalam hal ini
yang sesuai dengan topik tidak perlu teori khusus, tapi cukup
Roman);
sini bukan berarti besar sama dengan huruf capital dan kecil sama
(thin), sedang (normal), berat (bold, heavy), dan sangat berat (black,
extra-black).
pesan bersifat citra abstrak. Pesan abstrak akan menjadi nyata jika
makna.
yang ada. Siapapun pemotretnya, pagi, siang atau malam, tetap saja
d. Warna
secara fisik dan psikologis. Warna berfungsi secara fisik baik jika
klasik, muda tua. Selain pendekatan itu, seluruh warna juga dapat
Desain Multimedia Interaktif ©LailaLimariantika
78
rangkaian foto yang diam dan diputar kembali menjadi gerak sesuai
f. Audio
oleh siswa.
effect (SFX) adalah efek audio yang dihasilkan secara artifisial dan
Setelah itu akan tampil ucapan selamat datang. Tulisan ini akan bergerak
Desain Multimedia Interaktif ©LailaLimariantika
80
dari sisi kiri layar, muncul baris demi baris menuju posisi di layar. Setelah
semua baris tulisan tampil, maka akan muncul tombol enter, yang dapat
b. Halaman judul
ada. Nama tombol disesuaikan dengan nama menu, hal ini untuk
Flash. Jika kursor berada di atas tombol, maka warna latar belakang berubah
menjadi kuning. Jika tombol di klik maka warna tulisan berubah menjadi merah.
Hal ini bertujuan untuk mengarahkan pandangan pengguna pada tombol yang di
seleksi.
kiri bawah. Sementara itu tombol home berada di kanan bawah. Tombol
D. Aktivitas Pembelajaran
Peserta diklat membentuk kelompok yang terdiri dari 3-5 orang. Masingmasing
multimedia Interaktif
Pembuatan multimedia yang interaktif tidak hanya dibuat begitu saja dengan
terlihat sudah sangat jelas tetapi di sini dimaksudkan lebih spesifik dan
2. Memahami Audien
Tentukan rentang usia, pria atau wanita, kepentingan tertentu dan juga
audien akan pasif atau aktif dan juga mendidik atau hanya menghibur.
3. Desain Informasi
Desain informasi harus tertata rapi dalam suatu pengelompokan dan tidak
dari desain informasi dan jangan sampai menyeleweng jauh dari judul
4. Desain Tampilan
proyek yang akan dibuat dan memakan waktu seberapa lama. Hal-hal
kecil seperti white space, aligment, margin, kontras, simetri dan asimetris,
1. Tampilan Awal
double klik pada icon yang ada di desktop atau lihat dari daftar
terdiri dari beberapa komponen utama yang bisa anda lihat seperti
a. Menu bar
Menu Bar adalah kumpulan yang terdiri atas dasar menu-menu yang
digolongkan dalam satu kategori. Misalnya menu file terdiri atas perintah New,
b. Timeline
dan mengatur isi sebuah movie, pengaturan tersebut meliputi penentuan masa
c. Stage
Stage adalah area untuk berkreasi dalam membuat animasi yang digunakan
d. Toolbox
e. Properties
f. Panels
memodifikasi berbagai atribut dari objek dari animasi secara cepat dan mudah
2. Toolbox
memilih isi di dalam Timeline dan Stage. Toolbox terbagi menjadi tool
ditampilkan ketika kita memilih tool tersebut. Sebagai contoh, jika kita
huruf dapat kita atur. Toolbox berisi alat-alat yang digunakan untuk
❖ Arrow Tool, Arrow Tool atau sering disebut selection tool berfungsi
terseleksi
suatu objek.
mengubah pembesaran.
suatu garis.
bentuk-bentuk bebas.
diwarnai.
tampilan stage
suatu garis.
objek.
dimana instruksi tersebut menggunakan bahasa yang dimengerti oleh komputer atau
Desain Multimedia Interaktif ©LailaLimariantika
89
yang disebut sebagai Action Script, dan sejak tahun 2007 standart industi yang
pemula yang sudah memiliki konsep terlalu kompleks sehingga dalam proses
sebuah kode pemrograman harus dimulai dari teknik yang paling dasar terlebih
dahulu. Seiring waktu belajar, maka kemampuan seseorang akan meningkat dan
Dalam Flash kode Actionscript dituliskan di action panel. Pada saat aplikasi
dijalankan, maka compiler akan mengecek kode baris demi baris mulai dari yang
teratas sampai kode baris terakhir. Dari proses pengecekan tersebut, apabila
ditemukan kesalahan maka proses akan berhenti dan kesalahan akan ditampilkan.
berikut:
1. Buatlah sebuah file baru. Kemudian klik frame 1 layer 1 dan buka action panel
sebelumnya yang dapat dituliskan di dalam movieclip dan tombol. Oleh karena
itu perlu selalu diingat bahwa sebelum menuliskan kode, terlebih dahulu harus
3. Klik panel action, dan ketikkan kode berikut pada editor kode.
Output dengan tulisan “belajar kode Actionscript”. Hal ini dikarenakan kode
trace berfungsi untuk menampilkan parameter yang ada di dalam tanda ( ); yang
5. Selanjutnya ubah sedikit kode tersebut dengan menghapus salah satu tanda
pada kode yaitu kesalahan sintaks (Syntax Error): A String literal must be
terminated before the line break atau dapat diartikan sederhana bahwa sebuah
Dari percobaan di atas, diketahui bahwa penulisan sebuah kode sangatlah spesifik
dan detail. Sebuah kesalahan kecil saja bisa berakibat berhentinya aplikasi atau
gagalnya proses compiling kode. Selain itu juga terdapat istilah-istilah seperti
Syntax, String dan sebagainya yang bagi seseorang yang baru belajar pemrograman
akan cukup membingungkan. Untuk itu pada sub bab berikut akan dijelaskan secara
Syntax
dipenuhi dalam penulisan kode. Sintaks meliputi simbol, kata, dan fungsi yang
(Syntax error), dimana kesalahan sintaks akan menyebabkan kode tidak bisa
(AS3).
1. Case Sensitive
Penulisan kode AS3 menggunakan format sensitif case, sehingga setiap kode
1. var bilanganGenap:int;
2. var BilanganGenap:int;
2. Semicolons
Semicolons (;) atau titik koma dalam AS3 digunakan sebagai akhir dari sebuah
baris kode. Meskipun dituliskan dalam satu baris, jika ditambahkan tanda titik
1. kode baris 1;
3. Parentheses
4. Code blocks
Dalam pemrograman AS3, satu baris atau lebih yang terletak di dalam kurung
kurawa { } disebut sebagai satu blok kode. Satu blok kode merupakan sebuah
paket yang biasanya digunakan dalam sebuah fungsi, class, loop dan
sebagainya.
1. function kuadrat(num:Number):Number{
2. return num*num;
3. }
Desain Multimedia Interaktif ©LailaLimariantika
93
4.
8. }
5. Whitespace
Whitespace merupakan istilah untuk jarak penulisan, tab, enter dan spasi yang
terdapat jarak antara fungsi kuadrat dengan operasi loop di baris 5 – hal
bawah berikut ini, yang bermakna sama namun ditulis dengan cara yang
berbeda.
2. trace(i);
3. }
4.
6. Comments
akan mengabaikan baris komentar, sehingga kita tidak perlu khawatir dalam
2.
Kegunaan lain dari komentar yang umum digunakan oleh programer adalah
untuk menonaktifkan sementara kode yang tidak dibutuhkan. Pada saat proses
pengecekan kode yang panjang (debugging), sering kali beberapa baris kode
7. Literals
Literals adalah nilai yang kita tuliskan ke kode dalam bentuk angka, string
atau array.
Merupakan kata kunci dan kata-kata khusus yang telah dipakai oleh kode,
keyword dan kata khusus yang pada panel actionscript akan diberi warna
a. Lexical Keywords
b. Syntactic Keywords
Variable
Sistem kerja komputer adalah dengan menyimpan data dan mengolahnya. Dalam
mengelola data komputer akan meyimpan sebuah nilai ke dalam memori, dimana
seorang programer dapat mengatur nilai tersebut dan memberikannya nama. Nama dan
nilai yang akan disimpan ke dalam memory itulah yang disebut sebagai variabel.
Sebagai contoh, ketika kita menulisakan kode var waktu: Number = 60; ini berarti
komputer akan menyimpan sebuah data bernama waktu bertipe Number (angka) dan
bernilai 60. Variabel ini akan terus disimpan oleh memori komputer sepanjang aplikasi
berjalan.
Dalam menuliskan nama dan dilai variabel terdapat aturan yang harus dipenuhi, yaitu:
1. Tidak boleh menggunakan keywords atau reserved words (lihat point 8 subbab
sebelumnya)
3. Masing-masing variabel harus unik (berbeda antara satu dengan yang lain)
5. Lebih baik menggunakan sistem camelCase atau membedakan kata dengan huruf
7. Tanda dollar ($) hanya boleh untuk variabel yang bersifat static.
metode dan class dapat diakses secara khusus dengan menggunakan Access control
attributes.
Terdapat 4 jenis Access control attributes yaitu Private, Public, Protected dan
Internal. Dalam buku ini tidak digunakan metode tersebut, sehingga tidak dibahas
secara mendalam.
Mendeklarasikan Variabel
Dalam mendeklarasikan variabel, AS3 menggunakan kata kunci var, diikuti dengan
nama variabel, jenis data dan nilai variabel. Perhatikan contoh berikut :
String merupakan jenis data dan “Azka” adalah nilai dari variabel tersebut.
Constants
Berbeda dengan variabel yang bersifat dinamis, konstanta bersifat statis sepanjang
aplikasi berjalan. Nilai konstanta akan selalu tetap dan tidak dapat diubah kembali
Contoh:
Data Types
Data types atau jenis data adalah beberapa klasifikasi data yang digunakan dalam
pemrograman AS3. Secara mendasar jenis data di AS3 ada 7 yaitu String, Number,
1. String
String adalah data yang bernilai tekstual dan penulisannya dalam AS3
2. Number
3. Int
Int adalah kependekan dari integer yaitu data yang bernilai angka dari -
bertipe int lebih efisien dari segi kecepatan pengolahan data dibanding dengan
4. Uint
Berbeda dengan int yang bernilai negatif sampai positif, uint hanya bernilai
5. Boolean
Boolean merupakan nilai benar atau salah. Dalam AS 3 bernilai true atau
false.
6. Null
Null merupakan nilai kosong atau tidak bernilai, namun bukan tidak
terdefinisikan (undefined).
7. Void
Void adalah sesuatu yang tidak menghasilkan nilai, pada umumnya digunakan
Pada pengembangan berikutnya akan ditemukan tipe data yang lebih kompleks
Operators
Function
Function atau fungsi merupakan satu atau beberapa baris kode dalam satu blok,
perhitungan jarak antara objek dan mouse, maka fungsi menghitung jarak
berisi beberapa baris. Untuk menghitung jarak tentunya ada beberapa variabel
yang diperlukan yaitu titik kordinat awal dan titik kordinat akhir, selanjutnya
berikut :
Desain Multimedia Interaktif ©LailaLimariantika
99
contoh berikut :
1. function haloDunia():void{
2. trace(“Hello world”);
3. }
4.
Pada fungsi haloDunia di atas, berisi satu baris kode yaitu kode trace.
jika kode tersebut dijalankan, pada output panel akan muncul teks “Hello
world”.
1. function kuadrat(angka:int):int{
2. return(angka*angka);
3. }
4.
diproses oleh kode blok dimana hasil dari fungsi adalah angka*angka.
(void), fungsi kuadrat menghasilkan sebuah nilai yang bertipe int (:int).
Loops
Loops atau operasi berulang adalah satu blok kode yang dijalankan secara
menghitung angka mulai dari angka 1 sampai 10, menampilkan data siswa
satu kelas, mensortir nilai ujian beberapa peserta sekaligus dan sebagainya.
Secara umum loops dalam AS3 terbagi menjadi 3 yaitu for,while dan
2. trace(i);
3. }
var i:int = 0; disebut sebagai inisiasi atau kondisi awal i<10; disebut
sebagai test atau kondisi dimana operasi berulang akan terhenti bila sudah
tercapai i++; disebut sebagai update atau kondisi yang terjadi pada
variabel penguji loop. { ... } disebut sebagai loop body atau blok kode
karena tepat
Sejenis dengan for loop, operasi while loops hampir sama dengan operasi
for hanya saja tidak memiliki perintah untuk update, atau dengan kata lain
blok kode akan dijalankan secara terus menerus sampai kondisi terpenuhi.
1. var angka:int = 0;
3. angka ++;
4. trace(angka);
5. }
layar. Output 1 karena kondisi awal saat inisiasi yaitu 0 bertambah 1 akibat
ke-3, dan diakhiri pada angka = 9 namun karena adanya kode angka++;
Sedangkan do..while loops adalah format lain dari operasi while loops
1. var angka:int = 0;
2. do{
3. angka++;
4. trace(angka);
berulang (loops).
2. if(i==13){
3. break;
4. }
5. trace(i);
6. }
7. //output 1 5 9
Pada contoh di atas, operasi for seharusnya akan menaikkan nilai variabel i
17, dan 20. Namun akibat kondisi (i==13) terpenuhi maka kode break
angka 1, 5 dan 9.
2. if(i==13){
3. continue;
4. }
6. trace(i);
6. }
7. //output 1 5 9 17 21
Desain Multimedia Interaktif ©LailaLimariantika
103
continue akan melewatkan satu langkah apabila kondisi terpenuhi, maka pada
Conditional if
Dengan kode if sebuah kondisi dicek kebenarannya dan blok kode akan
1. function bilanganGenap(angka:int):void{
2. if (angka % 2 == 0) {
4. }
5. }
6.
7. Bilangan Genap(6);
1. function bilanganGenap(angka:int):void{
2. if (angka % 2 == 0) {
4. }else{
6. }
Desain Multimedia Interaktif ©LailaLimariantika
104
7. }
8.
Pada contoh di atas digunakan operasi kondisi if .. else. Pada kondisi ini,
apabila kondisi bernilai salah, kode pada blok else akan dijalankan. Kondisi if
.. else juga dapat dilakukan beberapa kali dengan kondisi yang berbeda-beda.
1. function cekNilai(nilai:int):void{
2. if (nilai < 6) {
8. }else{
10. }
11. }
12.
Pada kondisi if .. else if di atas, pengecekan logika dimulai dari kondisi teratas
kondisi (nilai < 8), sedangkan kondisi (nilai < 10) tidak terpenuhi. Untuk itu
Desain Multimedia Interaktif ©LailaLimariantika
105
ditampilkan hasil kondisi terakhir yang terpenuhi yaitu (nilai < 8).
Conditional switch
beda.
1. function cekNilai(nilai:String):void{
2. switch(nilai){
3. case "A":
5. break;
6. case "B":
8. break;
9. case "C":
11. break;
D");
14. break;
17. break;
18. default:
20. break;
21. }
22. }
23.
24. cekNilai("C");
Pada kode tersebut beberapa kondisi telah ditentukan, dan ketika kondisi yang
dimaksud terpenuhi di salah satu kode case, maka kode akan dijalankan
sampai dengan eksekusi kode break. Apabila tidak ada kondisi yang terpenuhi,
Array
Array adalah sebuah stuktur data yang bisa digunakan untuk menyimpan
beberapa variabel dengan nama yang sama. Sebagai contoh data nama siswa
"Sabtu", "Minggu"];
2.
3. trace(namaHari[0]); //Senin
4. trace(namaHari[3]); //Kamis
Untuk menggunakan data yang berada di dalam Array, dapat digunakan nama
“Senin”, karena berada di urutan pertama (dimulai dari angka 0), dan
seterusnya.
beberapa kasus kita memerlukan fitur untuk mengendalikan animasi yang kita
buat, sebagai contoh dalam sebuah media pembelajaran terdapat animasi yang
pada awalnya merupakan gambar diam, namun setelah tombol ditekan gambar
stop();
Kode stop(); berfungsi untuk menghentikan timeline pada frame dimana lokasi
buatlah sebuah animasi bola yang bergerak dari kiri ke kanan dengan
durasi 30 frame.
2. Buatlah sebuah layer baru (layer 2), selanjutnya klik frame 1 layer 2.
stop();
dikarenakan
frame 15.
Dengan kata lain kode stop(); saat ini berada di frame 15. Jalankan
gotoAndStop();
Kode gotoAndStop(frame); berfungsi untuk melompat dan berhenti pada frame yang
diset dalam parameter frame. Untuk lebih jelasnya perhatikan contoh berikut :
1. Buatlah sebuah file baru. Kemudian dengan teknik Motion Tween, buatlah
sebuah animasi bola yang bergerak dari kiri ke kanan dengan durasi 30 frame.
2. Buatlah sebuah layer baru (layer 2), selanjutnya klik frame 1 layer 2. Buka panel
gotoAndStop(15);
gotoAndPlay();
berfungsi untuk melompat dan memainkan timeline mulai dari frame yang diset
dalamparameter frame. Untuk lebih jelasnya, pada tutorial di atas edit kode
gotoAndStop(15); menjadi
gotoAndPlay(15);
bola pada posisi frame 15 dan bola bergerak sampai frame 30, lalu kembali lagi ke
frame 1. Selanjutnya, karena di frame 1 terdapat kode tersebut, maka timeline akan
melompat langsung ke frame 15, sehingga animasi frame 1 sampai frame 14 terlewati.
Desain Multimedia Interaktif ©LailaLimariantika
109
stage dipilih, maka akan tampak seperti ada bintik-bintik putih pada
Gambar 42 Shape
Symbol merupakan bagian yang penting dalam membuat animasi dengan flash.
untuk membuat suatu obyek bisa beranimasi, maka obyek tersebut diubah menjadi
symbol.
menjadi bentuk yang pasti dan tidak bias memanipulasinya lagi didalam stage
misalnya merubah warna, memberikan coretan diatasnya atau yang lainnya. Jadi
Terdapat 3 jenis symbol yang digunakan di Flash, yaitu : movieclip, button, graphic.
Sebelum sebuah obyek dirubah menjadi symbol, blok terlebih dahulu obyek tersebut
dengan menggunakan selection tool yang ada pada toolbar bagian kiri atas. Jika
suatu obyek sudah diblok maka obyek tersebut akan muncul titik titik kecil pada
Isikan nama sesuai dengan keinginan pada bagian name. Dan pada bagian behavior
button: obyek dibuat sebagai tombol graphic: obyek dibuat sebagai gambar yang
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. Action Script adalah bahasa pemrograman yang bersifat case sensitive, artinya
dianggap berbeda. Kesalahan dalam penulisanhuruf kapital atau huruf kecil akan
pada tombol play, stop dan sebuah obyek 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 bias dilakukan dengan memberikan perintah kepada tombol
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
cara klik 2 kali pada layer yang akan diganti namanya, lalu ketikkan
nama baru
2. Di frame 1 layer Tombol, buatlah 3 buah obyek button serta satu buah
4. Berikan keyframe di frame 2 layer gambar. Lalu klik kanan pilih insert
key frame. Tambahkan sebuah gambar dengan cara klik menu File ➔
7. Klik frame 1 pada layer action, tampilkan window action/ tekan f9 dan
import flash.events.MouseEvent;
import flash.system.fscommand;
menerus
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{
if (nama_tombol == "satu"){
if (nama_tombol == "dua"){
if(nama_tombol== "keluar"){
fscommand("quit");
8. Kemudian pada frame 40 layer action klik kanan pilih insert frame.
Teks digunakan untuk menerangkan atau menjelaskan sesuatu dalam bentuk tulisan,
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
3. Input Textadalah jenis teks yang dapat diisi oleh pengguna atau
user dalam sebuah form isian atau Input Text digunakan untuk
interaktif. Jenis teks yang digunakan adalah static dan input dan dynamic
text.
menjadi output.
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);
output.text = nama;
output2.text = alamat;
g. Pada saat dijalankan dan kita isikan jawaban nama dan alamat anda,
E. AKTIVITAS PEMBELAJARAN
Setiap scene memiliki desain tampilan yang sama untuk background dan
buah scene. Scene yang sedang aktif, ditandai dengan chek di depan nama
scene
Double klik nama scene, lalu ganti namanya sesuai dengan nama
1. MEMBUAT OPENING
datang. Kini kita bekerja pada layer sambutan. Berikan keyframe pada
frame 21. Buat tulisan selamat datang dan tempatkan di sebelah kiri
stage
i. Pilih salah satu frame diantara frame 19 dan 40 (missal frame 25). Klik
j. Akan muncul garis yang menghubungkan frame awal (21) dengan frame
k. Selanjutnya kita bekerja pada layer tombol. Klik frame 41. Klik kanan ➔
l. Seleksi tombol enter, pada bagian propertiesnya beri nama enter pada
instance name
tampilan akan menuju halaman judul. Halaman judul berada di frame 45.
yang diberi action. Jadi tampilan layar akan berhenti pada frame 41
even pada tombol enter, yaitu jika tombol enter di klik makan akan
if(nama_tombol == "enter"){
gotoAndStop(45);
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.
Pada halaman judul terdapat enam buah tombol. Lima tombol jika di klik akan
standar_kompetensi
sejarah
pembelajaran interaktif.
maka harus di beri nama. Untuk memberi nama, klik tombol, kemudian pada
bagian properties, isikan pada bagian instance name dengan nama tombol
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{
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"){
Desain Multimedia Interaktif ©LailaLimariantika
128
gotoAndStop(1,"materi");
if(nama_tombol == "kuis_btn"){
gotoAndStop(1,"kuis");
if(nama_tombol == "keluar_btn"){
fscommand("quit");
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);
zaman7_btn.addEventListener(MouseEvent.CLICK, menu_sejarah);
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");
if(nama_tombol == "zaman7_btn"){
gotoAndStop("35");
Desain Multimedia Interaktif ©LailaLimariantika
131
if(nama_tombol == "zaman8_btn"){
gotoAndStop("40");
if(nama_tombol == "zaman9_btn"){
gotoAndStop("45");
lebih dari satu halaman, sedangkan tombol BACK digunakan untuk kembali
ke halaman sebelumnya.
lanjut_btn.addEventListener(MouseEvent.MOUSE_DOWN,maju);
function maju(event:MouseEvent):void{
nextFrame();
kembali_btn.addEventListener(MouseEvent.MOUSE_DOWN,mundur);
function mundur(event:MouseEvent):void{
prevFrame();
Judul dan keterangan nilai menggunakan static text. Soal dan score akan selalu
b. Seleksi dynamic text untuk soal kemudian buka panel properties. Atur jenis huruf,
pada opsi line type,ganti menjadi multi line. Opsi multiline 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
dengan memilih opsi Insert > New Symbol. Ketikan nama alternative
jawaban, lalu tekan OK. Selanjutnya buatlah 2 buah Layer, pada Layer
e. Agar setiap obyek dapat di akses oleh script, maka harus di beri instance
name. Untuk memberi instance name, klik obyeknya, lalu pada bagian
salah, digunakan metode pop up. Untuk itu diperlukan sebuah movieclip
nama hasil_mc. Klik Advanched, dan beri tanda centang pada opsi
baru agar tidak mengganggu objek yang sudah Anda buat pada langkah
var nilai:Number = 0;
var no_soal:Number = 0;
var hasil:hasil_mc;
"1000", "1100"],
+ y ≤ 12; x ≥ 0, dan y ≥ 0, adalah....", "8 dan 24", "6 dan 24", "4 dan
var temp_soal:Array;
var temp_jawaban:Array;
function acak_soal():void{
//mengacak soal
var acak:Number =
Math.floor(Math.random()*soal.length);
temp_soal[acak] = temp_soal[i];
Desain Multimedia Interaktif ©LailaLimariantika
137
temp_soal[i] = temp;
function restart():void{
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
var acak:Number
Math.floor(Math.random()*temp_jawaban.length);
temp_jawaban[acak] = temp_jawaban[i];
temp_jawaban[i] = temp;
//tampilkan jawaban
Desain Multimedia Interaktif ©LailaLimariantika
138
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);
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;
Desain Multimedia Interaktif ©LailaLimariantika
139
score_txt.text = String(nilai);
}else{
//jawaban salah
tampilkan_hasil(2);
function tampilkan_hasil(tp:Number):void{
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, gerak_hasil);
addChild(hasil);
function gerak_hasil(e:Event):void{
ob.scaleX+=0.1;
ob.scaleY+=0.1;
ob.waktu++;
ob.waktu = -1;
//tambah no soal
no_soal++;
ob.removeEventListener(Event.ENTER_FRAME,
gerak_hasil);
removeChild(DisplayObject(ob));
tampilkan_soal();
}else{
tampilkan_hasil(3);
setup_awal();
k. Cara menjawabnya adalah dengan cara klik salah satu pilihan jawaban.
jawaban salah.
l. Jika pilihan jawaban benar, maka akan tampil pop up jawaban benar
Pengujian perangkat lunak adalah elemen kritis dari jaminan kualitas perangkat lunak dan
Menyajikan anomali yang menarik bagi perekayasa perangkat lunak. Pada proses perangkat
lunak, perekayasa pertama-tama berusaha membangun perangkat lunak dari konsep abstrak
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
Semua produk perangkat dapat diuji dengan satu atau dua cara : (1) dengan mengetahui
fungsi yang ditentukan dimana produk dirancang untuk melakukannya, pengujian dapat
pada waktu yang sama mencari kesalahan pada setiap fungsi; (2) mengetahui kerja
internal suatu produk, maka pengujian dapat dilakukan untuk memastikan bahwa
sesuai dengan spesifikasi dan semua komponen internal telah diamati dengan baik.
Pendekatan pengujian pertama disebut pengujian black boxdan yang kedua disebut
white box.
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 control desain
operasional mereka
validitasnya
Pengujian black box berfokus pada persyaratan fungsional perangkat lunak. Dengan
peryaratan fungsional untuk suatu program. Pengujian black box bukan merupakan
alternatif dari teknik white box tetapi merupakan pendekatan komplementer yang
box.
Desain Multimedia Interaktif ©LailaLimariantika
145
berikut:
➢ Kesalahan interface
➢ Kesalahan kinerja
c. Tidak seperti pengujian white box yang dilakukan pada awal proses pengujian,
pertanyaan berikut:
- Kelas input apa yang akan membuat test case menjadi baik?
- Kecepatan data apa dan volume data apa yang dapat ditolerir
oleh sistem?
sistem?
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
berikut :
komponen berikut :
komponen berikut :
Desain Multimedia Interaktif ©LailaLimariantika
147
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 Tes
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 pengguna serta keamanan sistem. Sedangkan test
Preview biasanya dilakukan oleh tim ahli dan produser untuk melihat
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,
Desain Multimedia Interaktif ©LailaLimariantika
148
kelompok kecil, ataupun kelas. Uji coba model atau produk merupakan bagian yang
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
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.
yang diutarakannya;
yang ada, sehingga hal ini dapat menghemat tenaga dan waktu;
juga memiliki beberapa kelemahan, yaitu sangat mudah bagi responden untuk
masalahnya;
B. Aktivitas Pembelajaran
kuisioner
dalam riset berupa survei. Nama skala ini diambil dari nama Rensis Likert,
satu dari pilihan yang tersedia. Biasanya disediakan lima pilihan skala
2. Tidak setuju
3. Netral
4. Setuju
5. Sangat setuju
No Pernyataan STS TS N S SS
Aspek perangkat
lunak
Menu navigasi dalam aplikasi ini
1
lengkap
Menu-menu navigasi berfungsi
dengan
2 baik, langsung mengarahkan ke
halaman
yang dituju
No Pernyataan STS TS N S SS
Aspek perangkat
lunak
Menu navigasi dalam aplikasi ini
1
lengkap
Menu-menu navigasi berfungsi
dengan
2 baik, langsung mengarahkan ke
halaman
yang dituju
Program berjalan dengan baik, tidak
3
crash dengan aplikasi lain
Semua link berfungsi sesuai yang
4
diharapkan
5 Menu navigasi mudah dipahami
Media pembelajaran mudah
6
dioperasikan
Aspek desain
pembelajaran
7 Tujuan pembelajaran jelas
Tujuan pembelajaran relevan dengan
8
SK/KD
Materi sesuai dengan kompetensi
9
dasar
10 Materi tepat dan sistematis
Pembahasan materi sampai
11
mendalam
12 Umpan balik tersedia
Aspek komunikasi
visual
Pengguna dapat berinteraksi dengan
13
aplikasi
Animasi mendukung materi
14
pembelajaran
Video mendukung materi
15
pembelajaran
Backsound tidak mengganggu
16 pengguna
dalam mempelajari materi
Background dan teks berwarna
17
kontras
2) Kriteria apa saja yang dibutuhkan dalam pengujian media pembelajaran berbasis
computer?
DAFTAR PUSTAKA
Hamalik, Oemar. 1990. Sistem Internship Kependidikan Teori dan Praktek. Bandung:
CV Mandarmaju.
https://taufikhendratmoko.wordpress.com/2015/01/04/prinsip-prinsip-desain-
multimedia/
https://elisernasari.blogspot.com/2019/10/macam-macam-multimedia-interaktif.html