Modul Revisi PDF

MODUL SMK MULTIMEDIA KELAS XII
DESAIN MEDIA
INTERAKTIF
[Type the document subtitle]
Windows User
2019
Nama :
Kelas :
Laila Limariantika, S.Pd

1
BAB I
KONSEP MEDIA INTERAKTIF
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 merangsangnya untuk belajar. Senada dengan pendapat Gagne,
Briggs mendefinisikan 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 penyampaian pesan. Sementara itu Asosiasi Pendidikan Nasional
(Nation Education Association/ NEA) memberikan batasan tentang media yaitu
bentuk-bentuk komunikasi baik tercetak maupun audi visual serta bebagai
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.
Menurut Oemar Hamalik (1986), media pembelajaran adalah hubungan komunikasi
interaksi akan berjalan lancar dan tercapainya hasil yang maksimal, apabila
menggunakan alat bantu yang disebut media komunikasi. Dalam pengertian
Laila Limariantika, S.Pd ©Laila Limariantika

2
komunikasi,media adalah alat yang memindahkan informasi (pesan) dari sumber
kepada penerima.
Menurut Edgar Dale (1946), media pembelajaran merupakan klasifikasi pengalaman
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 yang dapat menyampaikan pesan pembelajaran atau
mengandung muatan untuk membelajarkan seseorang. Dari beberapa pendapat
tersebut dapat disimpulkan bahwa media pembelajaran adalah media kreatif yang
digunakan dalam memberikan materi pelajaran kepada anak didik sehingga proses
belajar mengajar lebih efektif, efisien dan menyenangkan.
B. Manfaat Media Pembelajaran
Media pembelajaran memiliki peranan yang besar dan berpengaruh terhadap
pencapaian tujuan pendidikan yang diinginkan. Kegunaan Media/ alat pembelajaran
dalam proses belajar mengajar diantaranya:
1. Memperjelas penyajian pesan supaya tidak terlalu verbalitas (dalam bentuk
katakata tertulis atau hanya kata lisan)
2. Mengatasi keterbatasan ruang, waktu dan daya indera, misalnya;
Objek yang terlalu besar – bisa digantikan dengan realita, gambar, film bingkai,
film, atau model.

3
3. Objek yang kecil – dibantu dengan proyektor mikro, film bingkai, film, atau
gambar. Gerak yang terlalu lambat atau terlalu cepat, dapat dibantu dengan
timelapse atau high-speed photography.
Kejadian atau peristiwa yang terjadi dimasa lalu bisa ditampilkan lagi lewat
rekaman film, video, film bingkai, atau foto objek yang terlalu kompleks, dapat
disajikan dengan model, diagram atau melalui program komputer animasi.
Konsep yang terlalu luas (gempa bumi, gunung berapi, iklim, planet dan lainlain)
dapat divisualisasikan dalam bentuk film, gambar dan lain-lain.
4. Dengan menggunakan media pendidikan secara tepat dan bervariasi dapat diatasi
sikap pasif anak didik. Dalam hal ini media pembelajaran berguna untuk
menimbulkan motivasi belajar, memungkinkan interaksi langsung antara anak
didik dengan lingkungan secara seperti senyatanya, memungkinkan peserta didik
belajar mandiri sesuai dengan kemampuan dan minatnya.
5. Dengan latar belakang dan pengalaman yang berbeda diantara peserta didik,
sementara kurikulum dan materi pelajaran di tentukan sama untuk semua peserta
6. didik dapat diatasi dengan media pendidikan yaitu : memberikan perangsang
yang sama, mempersamakan pengalaman, menimbulkan persepsi yang sama.
Selain itu beberapa pakar berpendapat bahwa kegunan media pembelajaran itu antara
lain adalah :
a. Mampu mengatasi kesulitan-kesulitan dan memperjelas materi pelajaran yang
sulit,
b. Mampu mempermudah pemahaman dan menjadikan pelajaran lebih hidup dan
menarik,
c. Merangsang anak untuk bekerja dan menggerakkan naluri kecintaan menelaah
(belajar) dan menimbulkan

4
d. Kemauan keras untuk mempelajarai sesuatu,
e. Membantu pembentukan kebiasaan, melahirkan pendapat, memperhatikan dan
memikirkan suatu pelajaran serta,
f. Menimbulkan kekuatan perhatian (ingatan) mempertajam indera, melatihnya,
memperluas perasaan dan kecepatan dalam belajar.
C. Jenis Media Pembelajaran
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 (telecommunication) dan media rekam (recording) sehingga ada 8
klasifikasi media, yaitu:
1. Media audio visual gerak
2. Media audio visual diam
3. Media audio semi gerak
4. Media visual gerak
5. Media visual diam
6. Media semi gerak
7. Media audio
8. Media cetak.
Sementara menurut Gagne (1992) mengelompokan media dalam 7 macam yaitu;
1. Benda untuk didemonstrasikan
2. Komunikasi lisan
3. Media cetak

5
4. Gambar diam
5. Gambar gerak
6. Film bersuara dan
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:
pertama, bahan-bahan cetakan atau bacaan, dimana bahan-bahan ini lebih
mengutamalkan kegiatan membaca atau penggunaan simbol-simbol kata dan visual.
Kedua, alat-alat audio visual yakni alat-alat yang dapat digolongkan pada:
1. Alat tanpa proyeksi seperti papan tulis dan diagram
2. Media pendidikan tiga dimensi, seperti benda asli, peta
3. Alat pendidikan yang menggunakan teknik seperti radio, tape recorder,
transparansi.
Ketiga, sumber-sumber masyarakat, seperti peninggalan sejarah. Keempat, kumpulan
benda-benda (material collection), seperti dedaunan, benih, batu, dan sebagainya.
Menurut Ronald H. Anderson yang termasuk media dalam bentuk materil adalah
media auditif, dimana pesan-pesan pengajaran dituangkan dalam lambang-lambang
auditif, yang termasuk media auditif adalah, tape recorder dan radio. Disamping
media visual dan media auditif, media audio visual merupakan media yang
berhubungan dengan indera pendengaran dan indera penglihatan sekaligus.
Perkembangan media pembelajaran seiring dengan perkembangan teknologi. Seels
dan Richey (dalam Azhar Arsyad, 2006) membagi media pembelajaran dalam empat
kelompok berdasarkan perkembangan teknologi, yaitu:

6
a. Media hasil teknologi cetak
Media hasil teknologi cetak adalah cara untuk menghasilkan atau
menyampaikan materi melalui proses pencetakan mekanis atau fotografis.
Kelompok media hasil teknologi cetak meliputi teks, grafik, foto, dan
representasi fotografik. Materi cetak dan visual merupakan pengembangan dan
penggunaan kebanyakan materi pengajaran lainnya. Teknologi ini
menghasilkan materi dalam bentuk Salinan tercetak, contohnya buku teks,
modul, majalah, hand-out, dan lainlain.
b. Media hasil teknologi audio-visual
Media hasil teknologi audio-visual menghasilkan atau menyampaikan materi
dengan menggunakan mesin-mesin mekanis dan elektronik untuk menyajikan
pesan-pesan audio dan visual. Contohnya proyektor film, televisi, video, dan
sebagainya.
c. Media hasil teknologi berbasis computer
Media hasil teknologi berbasis komputer merupakan cara menghasilkan atau
menyampaikan materi dengan menggunakan sumber-sumber yang berbasis
mikro-prosesor. Berbagai jenis aplikasi teknologi berbasis komputer dalam
pengajaran umumnya dikenal sebagai computer-assisted instruction
(pengajaran dengan bantuan komputer).
d. Media hasil teknologi gabungan
Media hasil teknologi gabungan adalah cara untuk menghasilkan atau
menyampaikan materi yang menggabungkan beberapa bentuk media yang
dikendalikan oleh komputer. Perpaduan beberapa teknologi ini dianggap
teknik yang paling canggih. Contohnya: teleconference, realitas maya (virtual
reality)

7
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 atau jenis media pembelajaran bertambah. Meskipun beberapa
pakar mengklasifikasikan media pembelajaran berbasis mobilephone masuk ke dalam
kategori pembelajaran berbasis komputer (CAI), namun demikian dalam buku ini
pembelajaran berbasis mobile phone diklasifikasikan secara tersendiri karena
memiliki perbedaan yang signifikan dibandingkan dengan pembelajaran berbasis
komputer.
D. Pengertian Multimedia Interaktif
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).

8
Dalam konteks multimedia do disini dapat berupa memberikan respon terhadap
pertanyaan yang diajukan komputer atau aktif dalam simulasi yang disediakan
komputer.
E. Jenis- Jenis Media Interaktif
1. Hierarchycal, pemakai memiliki pilihan, tetapi topik-topik dapat dibagi
menjadi subtopik yang lebih spesifik.
Gambar 1. Diagram multimedia interaktif hierarchical
2. 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.

9
Gambar 2. Diagram multimedia interaktif nonlinear
Keunggulan multimedia dalam hal interaktivitas adalah media ini secara
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
(feedback). Interaksi yang komplek misalnya aktivitas di da lam suatu simulasi
sederhana di mana pen gguna bisa mengubah-ubah suat u variabel tertentu atau
simulasi kompl ek seperti simulasi menerbangkan pesawat udara.
Pembelajaran selalu m emerlukan 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.

10
Lingkungan pembelajaran yang interaktif adalah pembelajaran yan g memiliki
kemampuan untuk memberikan tanggapan terhadap tindakan siswa,sehingga siswa
dapat mengendalikan bagaimana penyampaian, bentuk penyajian dan isi pelajaran.
Pengendalian penyampaian pelajaran meliputi tahapan (mengubah kecepatan
penyampaian pelajaran) dan urutan (mengubah cara penyampaian). Pengendalian
terhadap bentuk penyajian membuat siswa dapat memilih bentuk-bentuk penyajian m
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 (memperbesar/memperkecil), memilih bagian pelajaran yang akan dipelajari
(navigasi menuju bagian tertentu, memilih menu).
F. Tingkat interaktif dalam pembelajaran berbasis komputer
1. Umpan balik
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).
2. Manipulasi
Tingkat manipulaasi meliputi perubahan secara real time atau transformasi
informasi sebagai tanggapan atas tindakan siswa. Berkebalikan dengan tanggapan

11
di tingkat sebelumnya, tingkat manipulasi menyediakan tanggapan yang fleksibel
danbervariasi. Tingkat interaktif ini ada dua macam, yaitu kendali siswa ,
misalnya memindahkan obyek mengguna kan 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 siswa sebagai tanggapan terhadap tindakan
mereka.
3. Adaptasi
Tingkat adaptasi meliputi tanggapan yang disesuaikan dengan kebiasaan siswa
sebelumnya. Tingkat ini secara dinamis menyesuaikan pilihan tugas pembelajaran,
prosedur dan format instruksional berdasarkan informasi tentang tindakan dan
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
kendali siswa (misal sistem penasihat yang memberikan pilih an kemungkinan
untuk dipilih oleh siswa).
4. Komunikasi
Tingkat komunikasi direpresentasikan dengan lingkungan
pembelajaran online dinamis yang fleksibel, tanggapan terhadap tindakan
siswa 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 siswa dan antara siswa dengan guru.

12
G. Model multimedia interaktif
1. Tutorial
Model tutorial adal ah salah satu jenis model pembelajaran yang
memuat penjelasan, rumus, prinsip, bagan, tabel, definisi istilah, la tihan
dan branching yang sessuai. 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 khu sus
terdiri dari diskusi mengenai konsep atau prosedur dengan pertanya an
bagian demi bagian atau kuis pada akhir presentasi. Instruksi tutorial
biasanya disajikan dalam istilah “”Frames” yang berhubungan dengan s
ekumpulan tampilan.
Model tutorial bertujuan untuk menyampaikan atau menjelaskan
materi tertentu, komputer menyampaikan materi, mengajukan pertanyaan
dan memberikan umpan balik sesuai dengan jawaban pengguna.
Gambar 3 Multimedia interaktif model tutorial

13
2. 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 tampila n dari sebuah pertanyaan
atau masalah, penerimaan respon dari pengguna, periksaan jawaban, dan
dilanjutkan dengan pertanyaan lainn ya berdasarkan kebenaran jawaban. Jenis ini
tidak menampilkan suatu instruksi, tetapi hanya mempraktekkan konsep yang
sudah ada. Jadi jenis ini merupakan bagian dari testing.
Gambar 4 Multimedia interaktif model drill and practice
3. Simulasi
Simulasi dengan situasi kehidupan nyata yang dihadapi pengguna,
dengan maksud untuk memperoleh pengertian global tentanng proses.
Simulasi digunakan untuk memperagakan sesuatu (keterampilan)
sehingga penggunna merasa seperti berada dalam keadaan yang

14
sebenarnya. Simulasi banyak digunakan pada pembelajaran materi yang
membahayakan, sulit, atau memerlukan biaya tinggi, misalnya untuk
melatih pilot pesawat terbang atau pesawat tempur.
Gambar 5 Multimedia interaktif model simulasi
4. 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 suas ana permainan, integritas tujuan pembelajaran
tidak hilang.
Gambar 6 Multimedia interaktif model instructional games

15
5. 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 meemperkaya kegiatan pengguna,
menjamin ketuntasan belajar, dan menemukan metode-metode yang berbeda
untuk meningkatkan pem belajaran. Meskipun model hybrid bukanlah model yang
unik, tetapi model ini menyajikan metodee yang berbeda dalam kegiatan
pembelajar an. Model hybrid memung kinkan pengembangan pembelajaran secara
komprehensif yaitu menyediakan seperangkat kegiatan belajar yang lengkap.
Gambar 7 Multimedia interaktif model hybrid
6. 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).

16
Gambar 8 Multimedia interaktif model Socratic
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.
Gambar 9. Multimedia interaktif model inquiry
8. Informational
Informational biasanya menyajikan informasi dalam bentuk daftar atau tabel.
Informational menuntut interaksi yang sedikit dari pengguna.

17
Gambar 10. Multimedia interaktif model information
H. Fungsi Media Interaktif Dalam Pembelajaran
1. 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.
2. 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 dip
rogramkan sebagai materi reinforcement (pengayaan) atau remedial bagi siswa
dalam mengikuti kegiatan pembelajaran. Multimedia dikatakan sebagai

18
enrichment 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 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 me mang dirancang secara khusus dengan
tujuan agar para siswa semak in lebih mudah memahami maateri pelajaran yang
disajikan guru di kelas.
3. Substitusi (penngganti)
Multimedia di katakan 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 waktu, gaya belajar, dan
kecepatan belajar masing-masing siswa. Ada 3 tiiga alternatif model kegiatan
pembelajaran yang dapat dipilih guru dan siswa, yaitu: sepenuhnya secara tatap
muka yang pembelajarannnya disertai dengan pemanfaatan multim edia, sebagian
secara tatap muka dan sebagian lagi melalui multimedia, dan pembelajaran
sepenuhnya melalui multimedia.
I. Aktivitas Pem belajaran
1. Berdiskusi untuk mengelompokkan aplikasi yang diberikan oleh pengajar, apakah
termasuk multimedia interaktif atau bukan.

19
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.
J. Latihan
1. Apa yang dimaksud dengan multimedia interaktif!
2. Jelaskan level interaktifitas dalam media pembelajaran berbasis
komputer!
3. Jelaskan tujuan penggunaan simulasi dalam proses pembelajaran!

20
PERANCANGAN MULTIMEDIA
BAB II INTERAKTIF
( STORYBOARD)
A. Pengertian Storyboard
Storyboard merupakan sebuah dokumen yang penting dalam produksi
multimedia interaktif. Storyboard memuat instruksi untuk pemrograman, script
audio, dan deskripsi de tail 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 memba ntu untuk mengidentifikasi material apa saja
yang harus dibuat, didapatkan, atau disusun.
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.
B. Aturan Dalam Membuat Storyboard
1. Bentuk-bentuk gambar yang disiapkan disertai dengan penjelasan-
penjelasan atau narasi.
2. Penulisan storyboard ini sebaiknya diisi unsur visual terlebih dahulu.

21
3. Narasi biasanya disusun kemudian untuk melengkapi hal-hal yang sulit
diungkapkan dalam bentuk visual.
4. Bahasa yang digunakan adalah bahasa lisan bukan bahasa tulisan (terutama
yang harus dibacakan oleh narrator)
5. Struktur kalimat sederhana, hindari kalimat-kalimat yang panjang dan
berbelit.
6. Simbol dalam bentuk yang sederhana, jelas maknanya serta sudah
diketahui oleh siswa.
7. Gambar dalam bentuk yang menarik, warna kontras (kecuali untuk
background) komposisi yang tepat dan sederhana, mudah dibaca dan
dipahami.
C. Format Dalam Pembuatan Storyboard
1. Sketsa atau gambaran layar, halaman atau frame.
2. Warna, penempatan dan ukuran grafik, jika perlu.
3. Teks asli, jika ditampilkan pada halaman atau layar.
4. Warna, ukuran dan tipe font jika ada teks.
5. Narasi jika ada.
6. Animasi jika ada.
7. Video, jika ada.
8. Audio, jika ada.
9. Interaksi dengan pengguna, jika ada.
10. Hal-hal yang perlu diketahui oleh staf produksi.

22
D. Panduan Untuk Interaktifitas
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 respons balik pada pengguna.
Berikut ini beberapa panduan untuk meningkatkan interaktifitas dalam aplikasi
multimedia interaktif :
1. Sediakan kesempatan untuk berinteraksi setiap tiga atau empat halaman, atau
satu interaksi permenit.
2. Pecah materi menjadi beberapa bagian dan buatlah dalam bentuk pertanyaan
dan umpan balik, review secara berkala dan rangkuman dari setiap bagian.
3. Sediakan sebanyak mungkin pertanyaan tanpa menganggu kelangsungan
aliran instruksi pembelajaran.
4. Berikan pertanyaan diakhir setiap bagian materi
5. Berikan pertanyaan dapat dijawab oleh pengguna berdasarkan materi yang
telah dipelajarinya
6. Berikan pertanyaan pada pengguna agar mereka mengaplikasikan apa yang
telah dipelajari, bukan sekedar mengingat dan mengulang jawabannya
7. Gunakan pertanyaan retorika untuk memicu pengguna berpikir tentang
materi yang dipelajarinya.
8. Disarankan membuat desain agar pengguna bukan menemukan informasi
dalam bentuk linear namun memungkinkan pengguna untuk mengeksplorasi
keseluruhan aplikasi

23
E. Panduan Untuk Kendali Pengguna
Kendali penggguna berkaitan dengan sejauh mana penggunan 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 :
1. 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.
2. Jangan gunakan kendali pengguna terhadap topik materi jika ada persyaratan
yang harus dipenuhi oleh pengguna sebelum melanjutkan ke topik baru.
3. 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 diperbolehkan
memilih sendiri materi yang akan dipelajari.
4. Jangan gunakan kendali penuh terhadap materi jika semua materi diperlukan
untuk penyelesaian program pembelajaran.
F. Panduan Untuk Umpan Balik
Umpan balik memberikan informasi kepada pengguna mengenai ketepatan
tanggapannya. Umpan balik dapat di gunakan untuk mengetahui kemungkinan
salah persepsi pada pengguna atau pengetahuan dasar yang diperlukan. Umpan
balik juga dapat digunakan untuk membantu pengguna belajar, mengingat dan

24
mengukur seberapa banyak yang telah dipelajari. Berikut ini beberapa panduan
dalam membuat umpan balik :
1. Buatlah umpan balik satu layar dengan pertanyaan dan jawaban
pengguna
2. Berikan umpan balik beberapa saat setelah pengguna memberikan
tanggapan
3. Sediakan umpan balik untuk memverifikasi suatu kebenaran
4. 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 Keterangan Visual Audio
1. Opening. Animasi hitungan mundur Musik pembuka
: 10, 9, 8, 7, 6, 5, 4, 3, 2, 1.
(Lanjut)
2. “Selamat Datang dalam Narasi:
Penjelajahan Selamat Datang
Dunia Matematika yang dalam Penjel ajahan
Menyenangkan!” Dunia Matematika
(Lanjut) yang Menyenangkan!
3. Judul. PROGRAM LINEAR Musik latar.
Narasi:
Kali ini, mari kita mencoba
melanjutkan pembahasan
perkuliahan matematika, dengan

25
lebih memfokuskan kajian pada
Permasalahan
Program Linear.
4. Menu Utama Animation Button and Efek Button
Transition:
MENU
1. STANDAR
KOMPETENSI
2. SEJARAH
MATEMATIKA
3. PETUNJUK
4. MATERI
5. QUIZ
6. KELUAR
5. Sub menu utama : BAGIAN 1 Narasi:
STANDAR Standar Kompetensi : Silahkan Anda simak dengan baik
KOMPETENSI Merancang dan standar kompetensi, serta beberapa
menggunakan model indikator
matematika program linear
BAGIAN 2
….. Musik Latar
KEMBALI KE MENU
UTAMA

26
6. Sub menu utama : ( Disediakan pilihan- Efek Button.
SEJARAH pilihan)
MATEMATIKA 1. ZAMAN PURBA Narasi:
2. ZAMAN MESIR Kita coba kilas balik perkembangan
3. ABAD KE -17 matematika
4. ABAD KE 18 Bisakah anda membedakan ciri
5. ABAD KE 19 khas untuk setiap zaman?
6. ABAD KE 20
KEMBALI KE MENU
UTAMA
7. Sub menu utama : Tertulis : Musik Latar.
SEJARAH Kegiatan manusia mulai
MATEMATIKA tercatat sejak millenium
kedua sebelum masehi.
ZAMAN PURBA Piramid di mesir
merupakan saksi dari
pengetahuan dasar tentang
survey dan geometri
sekitar tahun 2900 masehi.
G. Aktivitas Pembelajaran
1. Mengamati storyboard yang diberikan oleh pengajar
2. Mengidentifikasi informasi-informasi yang terdapat dalam storyboard

27
3. Membuat laporan hasil pengamatan dan identifikasi, informasi apa saja yang
perlu ditambahkan jika memang merasa ada informasi yang kurang dalam
storyboard tersebut.
H. Latihan
1. Buatlah storyboard media pembelajaran interaktif sesuai mata pelajaran yang
2. Anda ajarkan di sekolah dengan menggunakan format double coloumn.
3. Pilihlah satu topik dari mata pelajaran itu

28
BAB III PRINSIP DESAIN USER

INTERFACE
A. User Interface
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 mengarahkann 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).
B. Prinsip Dalam Pembuatan Suatu Antarmuka Sebuah Aplikasi
1. 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 mengumpulkanberbagai karakteristik serta
sifat dari user karena antarmuka harus disesuaikan dengan user yang
jumlahnya bias jadi lebihdari1 dan mempunyai karakter yang berbeda.

29
Hal tersebut harus terpikirkan oleh desainer dan tidak dianjurkan
merancang antar muka dengan didasarkan pada dirinya sendiri.
2. 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.
3. Task Compatibility
Sebuah aplikasi yang menggunakan antarmuka harus mampu membantu
para user dalam menyelesaikan tugasnya. Semua pekerjaan serta tugas-
tugas user harus diadopsi di dalam aplikasi teersebut 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
4. Workflow Compatibility
Sebuah aplikasi sistem sudah pasti mengapdopsi sistem manualnya dan
didalamnya tentunya terdapat urutan kerja dalam menyelesaikan
pekerjaan. Dalam sebuah aplikasi, software engineer haarus memikirkan
berbagai runutan-rununtan pekerjaan yang ada pada sebuah sistem.
Jangan sampai user mengalami kesulitan dalam menyelesaikan
pekerjaannya karena user mengalami kebingungan ketika urutan

30
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.
5. Consistency
Sebuah sistem harus sesuai dengan sistem nyata serta sesu ai dengan
produk yang diha silkan. 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 berpin dah 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.
6. Familiarity
Sifat manusia mudah mengingat dengan hal-hal yang sudah sering
dilihatnya atau didapatkannya. Secara singkat disebut dengan familiar.
Antarmuka sebisa mungkin didesain sesuai dengan antarmuka pada
umumnya, dari segi tata letak, model dan sebagainya. Hal ini dapat
membantu user cepat berinteraksi dengan sisem melalui antar muka yang
familiar bagi user.

31
7. 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.
8. Direct Manipulation
User berharap aplikasi yang dihadapinya mempunyai media atau tools
yang dapat digunakan untuk melakukan perubahan pada antarmuka
tersebut. User ingin sekali aplikasi yang dihadapannya bias disesuaikan
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 desktop properties, tampilan skin winamp bisa diubah, dan lain-
lain.
9. 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 innformasi yang dihasilkan sangat dimungkinkan
salah. Oleh karena itu software engineer haruslah merancang

32
suatukondisi yang mampu mengatasi dan menanggulangi hal-hal seperti
itu. Contoh : “illegal command”, “can‟t recognize input” sebagai portal
jika terjadi kesalahan.
10. 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.
C. Jenis Antarmuka Untuk Menjembatani Interaksi Antara Pengguna dan
Multimedia Interaktif
1. Direct Manipulation
Interaksi langsung dengan objek pada layar. Misalnya d elete file dengan
memasukkannya ke trash. Kelebihannya adalah waktu pembelajaran pengguna
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
penggambaran secara visual untuk satu operasi atau objek.
G ambar 11. Direct manipulation

33
2. Menu selection
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 12. Menu selection
3. Form Fill in
Mengisi area-area pada form. Kelebihannya masukan data yang sederhana dan
mudah dipelajari. Kekurangannya memerlukan banyak tempat di layar, harus
menyesuaikan dengan form manua l dan kebiasaan pengguna.
Gambar 13. Form Fill In

34
4. Command Language
Menuliskan perintah yang sudah ditentukan pada program. Kelebihannya perintah
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 pemulihan kesalah an.
Gambar 14. Command Language
5. Natural language
Menggunaka n bahasa alami untuk mendapatkan hasil. Contoh: search engine di
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
engine. Kekurangann ya tidak semua sistem cocok menggunakan ini.

35
Gambar 15. Natural language

( http://www.intellexer.com/natural_language.h tml)
D. Desain Media Pembelajaran
Kelemahan beberapa media pembelajaran berbasis komputer yang sudah ada
adalah sifat dari media tersebut yang hanya memindah materi
di dalam buku ke layar komputer. Layar pada akhirnya berisi penuh dengan
materi yang harus dibaca oleh peserta didik, yang mana menurut Edgar Dale
(1946) efektifitas membaca sebuah materi hanya berada dikisaran 10%.
Berbeda halnya jika sebuah media pembelajaran dibuat dengan desain yang
baik, dengan melibatkan grafis, audio, video dan interaktifitas akan
menaikkan efektifitas penyerapan materi hingga 80 – 90%. Pentingnya
sebuah desain yang baik dalam sebuah media pembelajaran terkadang
terbentur dengan pengetahuan dasar desain tenaga pengajar yang membuat
media tersebut. Pada umumnya tenaga pengajar menguasai materi yang
diajarkannya, akan tetapi pengetahuan dasar tentang desain yang baik,
komposisi, tata letak, warna dan elemen kesenirupaan jarang dikuasai. Hal
inilah yang menyebabkan media pembelajaran pada akhirnya menjadi tidak
optimal dalam menyampaikan materinya. Ketika kita menggunakan istilah
“desain”, maka dalam teori desain kita harus melakukan beberapa langkah

36
yaitu: design treatment, visual development phase, programming phase,
testing phase.
1. Design Treatment
Design treatment merupakan sebuah istilah desain yang mengandung
pengertian analisis tentang produk apa yang akan dibuat dan apa yang
dibutuhkan untuk membuatnya. Pada tahapan ini sebuah media
pembelajaran harus melalui sebuah proses analisis secara
mendalam tentang apa saja yang terkait dengan media tersebut
diantaranya adalah :
a. Materi apa sajakah yang akan disampaikan dalam media tersebut.
Pembatasan materi mutlak diperlukan untuk menjaga media agar
fokus mencapai tujuan yang diharapkan.
b. Siapakah target audience media yang akan dibuat, apakah balita,
anak-anak, remaja atau orang dewasa. Penentuan target audience
digunakan untuk menetapkan pengayaan desain, kekompleksan
navigasi, dan interaktifitas
c. Fitur-fitur apa saja yang akan ditampilkan. Apakah media nantinya
menampilkan sebatas materi, atau terdapat simulasi, evaluasi dalam
bentuk kuis, penyimpanan data evaluasi dan sebagainya.
d. Bagaimana dengan media sejenis yang sudah ada sebelumnya. Jika
ada, apa yang membedakan media yang akan dibuat dengan media
yang sudah ada. Selain itu juga perlu dipikirkan fitur apa yang akan
menjadi nilai tambah dari media tersebut, sehingga penggunanya
mendapatkan manfaat khusus ketika menggunakan media tersebut.

37
e. Berapakah lamanya waktu untuk mewujudkan media tersebut dan
aplikasi yang akan digunakan untuk mewujudkannya.
Semua hal yang terkait dengan ide yang akan kita wujudkan perlu
didokumentasikan dalam bentuk catatan atau sebuah sket gambar untuk
mempermudah gambaran anda atau tim anda dalam mewujudkannya.
Sebagai contoh design treatment, Laras Safitri (2012) mendesain sebuah
media 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 penjelasan secara audio pada objek tersebut.
2. Visual Development Phase
Pada tahapan ini aset-aset visual dibuat. Asets visual meliputi grafik yang
akan dipakai sebagai objek dalam media, efek visual, typografi
pengggunaan huruf) dan grafik untuk keperluan interface (antar muka).
Pada umunya tahapan ini lebih mudah dilakukan oleh desainer grafis,
karena membutuhkan skill grafis dan kepekaan estetik. Sebuah media
pembelajaran interaktif merupakan produk dari multidisiplin ilmu,

38
sehingga apabila pembuat media pembelajaran hanya menguasai
pembuatan dan pengolahan materi, maka dibutuhkan tenaga grafis untuk
mengerjakan tahapan ini.
Beberapa aplikasi yang dapat dimanfaatkan untuk membangun grafis dari
sebuah multimedia pembelajaran diantaranya adalah Photoshop, Corel
Draw, Adobe Ilustrator, Adobe Flash dan sejenisnya. Penguasaan teknis
terhadap aplikasi tersebut diperlukan agar tampilan multimedia
pembelajaran yang dibuat menjadi lebih atraktif dan efisien dari sisi
ukuran file.
Pada saat ini terdapat beberapa situs yang menyediakan aset grafis secara
gratis maupun berbayar. Penggunaan aset yang sudah tersedia secara
online dapat menghemat waktu dan biaya, namun demikian perlu
diperhatikan beberapa aturan agar media yang dihasilkan nantinya
menjadi lebih optimal, yaitu :
a. Gambar yang tersedia di internet memiliki lisensi yang bermacam
macam, mulai dari 100% gratis, lisensi nama pembuat dan lisensi
berbayar. Sebelum memanfaatkan gambar tersebut kita harus
memastikan dulu tentang lisensinya.
b. Gambar yang memiliki “watermark” menandakan bahwa gambar
tersebut berlisensi dan tidak boleh dipakai tanpa ijin.
c. Gambar yang tersedia secara online memiliki variasi tipe grafis.
Pada dasarnya tipe grafis ada 2 jenis yaitu vector dan bitmap.
Vector merupakan gambar yang terbentuk atas beberapa kurva,
sedangkan bitmap terbentuk atas titik-titik yang berwarna. Karena

39
terdapat perbedaan yang signifikan antara gambar bertipe vektor
dan bitmap, maka diperlukan kemampuan dalam mengolahnya.
d. Setiap gambar yang tersedia secara online memiliki ukuran
tertentu. Untuk gambar bertipe bitmap, harus dilakukan
penyesuaian ukuran sebelum gambar dipakai dalam media.
Gambar yang terlalu kecil akan terdistorsi jika diperbesar, dan
sebaliknya gambar yang terlalu besar akan memakan banyak
memori dan ukuran file sehingga tidak efektif.
e. Penggunaan gambar yang bersumber secara online,
memungkinkan sebuah objek ditampilkan secara berulang-ulang
di media lain. Sehingga kesan eksklusif sebuah media menjadi
berkurang.
3. Programming Phase
Pemrograman diperlukan dalam sebuah aplikasi media pembelajaran
interaktif. Pekerjaan pemrograman membutuhkan ketelitian dan
pemahaman atas logika. Pada umumnya kegiatan pemrograman dapat
dilakukan dengan mudah oleh programmer, namun khusus untuk
pemrograman multimedia pembelajaran dapat dilakukan oleh non
programer karena tidak membutuhkan kode yang terlalu panjang. Untuk
mempermudah proses pemrograman dapat digunakan sistem flowchart.
Flowchart adalah adalah suatu bagan dengan simbol-simbol tertentu yang
menggambarkan urutan proses secara mendetail dan hubungan antara
suatu proses (instruksi) dengan proses lainnya dalam suatu program.
Perhatikan contoh flowchart berikut :

40
Gambar 16. Contoh flowchart multimedia pembelajaran interaktif
4. Testing Phase
Tahapan testing adalah sebuah proses pengumpulan informasi untuk
memperbaiki segala kesalahan desain dan kesalahan programming.
Tahapan ini diperlukan sebagai bentuk quality control dari media
pembelajaran yang dibuat. Dari tahapan ini akan diketahui berbagai
kesalahan, kesalahan penulisan materi, kesalahan logika, kesalahan
ukuran interface dan sebagainya.
Tahapan testing lebih baik dilakukan oleh beberapa orang dengan tingkat
keahlian yang berbeda, sehingga akan didapatkan masukan dari berbagai
sudut pandang, apakah media pembelajaran sudah sesuai atau belum.
Dari masukan-masukan tersebut dilakukan perbaikan ulang, untuk
memperoleh hasil akhir yang benar-benar siap untuk dipublikasikan.

41
Gambar 17. Tahapan testing aplikasi Science Fun (Argani, 2016)
dalam mode mobile/tablet
5. Prinsip Desain Media Pembelajaran
Di dalam unsur-unsur senirupa dikenal adanya garis, raut, warna, ruang,
tekstur dan gelap terang. Unsur tersebut juga muncul dalam sebuah
desain media pembelajaran interaktif, sehingga kita dapat mengaitkan
prinsip desain/seni rupa pada desain media pembelajaran. Beberapa
prinsip yang dapat diaplikasikan dalam desain media pembelajaran antara
lain :
a. Prinsip Kesebandingan (Proporsi)
Kesebandingan (proporsi) merupakan hubungan perbandingan
antara bagian dengan bagian lain atau bagian dengan elemen
keseluruhan. Kesebandingan dapat dijangkau dengan
menunjukkan hubungan antara:
1. Suatu elemen dengan elemen yang lain,
2. Elemen bidang/ ruang dengan dimensi bidang atau ruangnya.
3. Dimensi bidang/ruang itu sendiri.
4. Dalam sebuah media pembelajaran interaktif terdapat
beberapa elemen. Secara umum elemen yang terdapat pada
pembelajaran interaktif antara lain :

42
5. Antarmuka (User Interface) meliputi : tombol navigasi, teks,
dan elemen grafis di luar konten.
6. Konten, merupakan materi utama dalam media pembelajaran
7. Audio
8. Video/animasi
Setiap elemen tersebut ditampilkan dalam proporsi yang berbeda.
Untuk memenuhi prinsip kesebandingan, harus diperhatikan ukuran
output yang ingin dihasilkan. Untuk output aplikasi desktop (komputer)
ukuran elemen navigasi dapat dibuat antara 10-20% dari ukuran layar,
dan materi yang ditampilkan berukuran 60 – 70%. Berbeda dengan
output untuk smartphone (handphone), dimana ukuran yang lebih kecil
menuntut proporsi navigasi yang lebih besar yaitu 15 – 25 % dari
ukuran layar.
Gambar 18. Penggunaan proporsi tombol dalam pembelajaran
rambu lalulintas untuk handphone (Trifandianto, 2016)
Prinsip utama dalam proporsi adalah setiap elemen dapat difungsikan
dengan baik. Misal, elemen teks diatur sedemikian rupa dari sisi ukuran
dan jenis huruf agar keterbacaannya tinggi.

43
Gambar 19. Keterbacaan yang kurang baik pada media
pembelajaran berbasis mobile/handphone (Trifandianto, 2016)
b. Prinsip Penekanan (Emphasis)
Di dalam sebuah karya desain/seni terdapat beberapa bahan atau
gagasan yang lebih perlu ditampilkan dari pada yang lain. Dalam
penciptaan desain/seni tidak seharusnya elemen yang ada
menonjol semuanya, dalam artian sama kuatnya, sehingga terlihat
ramai dan informasi atau apa yang akan disampaikan akan
menjadi tidak jelas.
Tampilnya emphasis merupakan strategi komunikasi yang
bertujuan untuk mengarahkan pandangan pembaca pada suatu
yang ditonjolkan. Emphasis dalam media pembelajaran dapat
dicapai misalnya mengganti ukuran teks, menampilkan
ilustrasi dengan proporsi yang lebih besar atau menggunakan
warna yang berbeda untuk penekanan.

44
Gambar 20. Penekanan teks MENGAJI pada halaman judul
media pembelajaran (Rizkiana, 2016)
Gambar 21. Penekanan materi dengan cara membingkai materi
dan meletakkannya di pusat layar (Argaini, 2016)
c. Prinsip Keseimbangan (Balance)
Keseimbangan dipengaruhi berbagai faktor, antara lain faktor
tempat posisi suatu elemen, perpaduan antar elemen, besar
kecilnya elemen, dan kehadiran lemen pada luasnya bidang.
Keseimbangan akan terjadi bila elemen-elemen ditempatkan dan
disusun dengan rasa serasi atau sepadan. Dengan kata lain bila
bobot elemen-elemen itu setelah disusun memberi kesan mantap
dan tepat pada tempatnya.
Bentuk keseimbangan yang sederhana adalah keseimbangan
simetris yang terkesan resmi atau formal, sedangkan
keseimbangan asimetris terkesan informal dan lebih dinamis.

45
Gambar 22. Keseimbangan simetris pada desain media
pembelajaran (Rizkiana, 2016)
Gambar 23. Keseimbangan asimetris pada desain media
pembelajaran (Fajrina, 2016)
d. Prinsip Irama (Ritme)
Ritme terjadi karena adanya pengulangan pada bidang/ruang yang
menyebabkan kita dapat merasakan adanya perakan, getaran, atau
perpindahan dari unsur satu ke unsur lain. Gerak dan pengulangan
tersebut mengajak mata mengikuti arah gerakan yang terjadi pada
sebuah karya. Dari ritme dapat ditentukan eyeflow atau arah baca
sebuah desain. Secara umum arah baca suatu desain adalah dari
kiri ke kanan dan dari atas ke bawah.

46
Gambar 24. Unsur pengulangan membentuk ritme dan
eyeflow pada media pembelajaran (Argaini, 2016)
e. Prinsip Keselarasan (Harmony)
Kondisi selaras atau harmoni terbentuk karena tidak adanya
pertentangan antara satu elemen dengan elemen lainnya. Dalam
desain untuk membentuk harmoni dengan dilakukan dengan
mengaplikasikan bentuk dan warna yang sama pada
elemen sejenis dan menampilkan elemen dengan penggayaan
yang sama.
Gambar 25. Elemen yang selaras dari segi warna, gaya desain
dan proporsi (Pintaka, 2016)
f. Prinsip Kesatuan (Unity)
Pada akhirnya prinsip kesatuan adalah sebuah kohesi, konsistensi,
ketunggalan atau keutuhan, yang merupakan isi pokok dari
komposisi. Prinsip ini akan tercapai jika prinsip-prinsip
sebelumnya telah diterapkan. Untuk mememenuhi
prinsip kesatuan, hal yang dapat dilakukan antara lain:

47
1. Menggunakan hanya dua atau tiga type styles (jenis huruf)
dengan ukuran yang memiliki keterbacaan yang baik dan
relatif sama di seluruh halaman media pembelajaran interaktif.
2. Menggunakan palet warna yang identik di seluruh halaman.
3. Mengulang warna, bentuk, atau tekstur untuk membentuk
irama dan eyeflow - Menggunakan proporsi ukuran objek
grafis yang baik dan peletakan yang teratur
4. Menyediakan ruang kosong untuk menghadirkan harmoni
Gambar 26. Kesatuan di tiap-tiap halaman media
pembelajaran interaktif (Pintaka, 2016)
E. RANCANGAN ANTARMUKA
1. Rancangan t ampilan awal
Tampilan aw al adalah animasi hitungan waktu mundur. Setelah hitungan
mencapai an gka 1 maka akan tampil ucapan selam at datang bagi pengguna
aplikasi

48
Gambar 27. Rancangan tampilan awal
2. Rancangan tampilan halaman judul
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 standar kompetensi, sejarah matematika, petunjuk, materi, ku is dan keluar.
Dari halaman judul ini, pengg una dapat langsung memilih salah satu menu yang
ada dalam apliikasi. Jika pengguna memilih menu keluar, maka aplikasi akan
tertutup.
Gambar 28. Rancangan tampilan halaman judul
3. Rancangan tampilan halaman standar kompetensi
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

49
kembali untuk menuju halam an sebelumnya. Terdapat jug a tombol home yang
jika dipilih akan membawa pengguna kembali ke tampilan judul.
Gambar 29. Rancangan tampilan menu STANDAR KOMPETENSI
4. Rancangan t ampilan menu sejarah matematika
Sejarah matematika sangat panjang dan dapat dikelompokkan berdasarkan
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
tampil halaman seja rah matematika sesuai dengan zamannya.
Gambar 30. Rancangan tampilan menu SEJARAH MATEMATIKA

50
5. 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 31. Rancangan tampilan menu KUIS
F. Aktivitas Pembelajaran
Pengajar memberikan beberapa contoh aplikasi multimedia interaktif. Peserta diklat
membentuk kelompok yang terdiri dari 3-5 orang. Masing-masing kelompok
melakukan kegiatan berikut :
1. Melakukan pengamatan terhadap antarmuka aplikasi multimedia
interaktif.
2. Menganalisis prinsip user compatibility, product compatibility, task
compatibility, workflow compatibility, consistency, familiarity, simplicity yang
ada dalam antarmuka aplikasi multimedia interaktif.
3. Menuliskan laporan hasil analisis prinsip user compatibility, product
compatibility, task compatibility, workflow compatibility, consistency,
familiarity, simplicity yang ada dalam antarmuka aplikasi multimedia interaktif.

51
G. Latihan/ Kasus /Tugas
Berdasarkan storyboard yang telah Anda buat dalam kegiatan belajar sebelumnya,
cobalah untuk membuat rancangan antarmukanya untuk tampilan awal
(halaman judul) dan halaman isi.

52
BAB IV
PRINSIP DESAIN USER INTERFACE
A. 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 32. Hubungan antar halaman
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.

53
Dengan penggambaran struktur navigasi, pembuatan sebuah aplikasi dapat sistematis
dan mudah.
B. Jenis Struktur Navigasi
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
b. aplikasi computer based – training
c. aplikasi yang memerlukan informasi berurutan
Gambar 33. Struktur navigasi linear
2. Struktur hirarki
Struktur hirarki merupakan struktur seperti tangga atau pohon, dimana
masing–masing obyek 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.

54
Struktur hirarki diadaptasi dari top – down design. Konsep navigasi ini
dimulai dari satu node yan menjadi halaman utama atauhalamanawal.
Dari halaman tersebut dapat dibuat beberapa cabang ke halaman –
halaman level 1. Halaman tersebut adalah isi atau halamanpenunjang
dari sebuah halaman utama, dari tiap halaman level 1 dapatjuga
dikembangkan menjadi beberapa cabang lagi
Gambar 34. Struktur navigasi hirarki
3. Struktur jaringan (spoke and hub)
Bentuk struktur jaringan merupakan desain yang paling kompleks
dengan banyak obyek dalam setiap arah pada setiap obyek dalam
aplikasi multimedia.
Untuk membuat struktur hyperlink yang fleksibel, struktur jaringan dapat bekerja
dengan baik. Hub dinyatakan deengan halaman utamayang mempunyai hubungan
dengan setiap node. Setiap node dapatberhubungan kembali ke halaman utama.
Pada model ini hanya terdapatdua macam link, yaitu dari halaman utama ke
halaman tertentu, dan darihalaman tersebut kembali ke halaman utama.

55
Gambar 35. Struktur navigasi spoke and hub
4. 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 36. Struktur navigasi kombinasi

56
C. Perancangan Struktur Navigasi
Perancangan struktur navigasi media pembelajaran interaktif untuk mata kuliah
Aljabar dengan pokok bahasan Program Linear adalah sebagai berikut
Gambar 37. Struktur navigasi media pembelajaran interaktif Aljabar Linear
1. 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

57
Gambar 38. Navigasi untuk melihat halaman menu utama
2. Navigasi untuk menampilkan halaman Standar kompetensi
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 39. Navigasi untuk melihat halaman standar kompetensi

58
3. Navigasi untuk menampilkan halaman Sejarah matematika
halaman intro terdapat tombol untuk menampilkan halaman menu utama. Setelah
menu utama tampil, pengguna menekan tombol sejarah matematika, maka akan
tampil halaman sejarah matematika
Gambar 40. Navigasi untuk melihat halaman sejarah matematika
4. Navigasi untuk menampilkan halaman Materi
Gambar 41. Navigasi untuk melihat halaman Materi

59
5. Navigasi untuk menampilkan halaman Petunjuk
Gambar 42. Navigasi untuk melihat halaman petunjuk
6. Navigasi untuk menampilkan halaman Kuis
Gambar 43. 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. Masing
masing kelompok melakukan kegiatan berikut :

60
a. Mengamati aplikasi multimedia interaktif dengan mencoba menu
menu yang ada
b. Mengidentifikasi struktur navigasi yang digunakan dalam aplikasi
multimedia interaktif tersebut
c. 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. Latihan/ Kasus /Tugas
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!

61
BAB V UNSUR VISUAL, AUDIO DAN

VIDEO MULTIMEDIA INTERAKTIF
A. Komunikasi Visual
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 untuk menyampaikan pesan yang utamanya
menggunakan elemen-elemen rupa (gambar dan 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 eksplisit maupun implisit, tersurat maupun tersirat untuk
menghasilkan persepsi tertentu sesuai kehendak pesan yang ingin
dikomunikasikan.

62
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.
B. Tahapan Implementasi Desain Komunikasi Visual Dalam Multimedia
Interaktif Untuk Pembelajaran
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 matapelajaran secara lebih komunikatif, menarik dan persuasif.

63
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.
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. Kelebihan 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, guru dapat
mengatur irama penyajian materi agar tidak datar dan membosankan.
Langkah operasionalnya adalah guru terlebih dahulu membuat rancangan
skenario pengajaran berupa story-board atau flow chart, agar alur
informasi terkendali sejalan dengan materi yang hendak disampaikan.
Tidak perlu seluruh durasi dan layermateri 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 siswa merasakan bahwa
materi tersebutlah yang menjadi pokok permasalahannya. Persoalan

64
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 guru
dan siswanya.
Gagasan kreatif dan konsep komunikasi visual hendaknya memperhatikan aspek
komunikatif, agar mudah dicerna dan disenangi oleh siswa. 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
siswa, 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 intinya mencakup: tata letak, tipografi, gambar dan
ilustrasi, warna, animasi dan video, serta audio/suara.

65
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 sebahagian 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 denganfungsi-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.

66
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 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 siswa 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

67
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, photo/illustration caption. Untuk naskah yang relatif
panjang, misalnya untuk body-copy pilih huruf yang memenuhi
kriteria readable, legible, dan clarity (terbaca, bisa dan 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 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

68
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 ditandainya (makna) terjadi secara langsung (tersurat),

69
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

70
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
rangkaian foto yang diam dan diputar kembali menjadi gerak sesuai
durasi yang dikehendaki.
Perbedaan prinsip kerja inilah yang dapat dieksplorasi dan
dimanfaatkan untuk mendukung penyajian materi ajar 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

71
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 penyampaiinformasi 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.
Berdasarkan rancangan antarmuka multimedia pembelajaran interaktif pada
kegiatan belajar 3, dapat dibuat desain dengan memasukkan efek visual.

72
C. Rancangan antarmuka multimedia pembelajaran interaktif
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 44. 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 merah.
Hal ini bertujuan untuk mengarahkan pandangan pengguna pada tombol yang di
seleksi.

73
Gambar 45. Visualisasi halaman judul
c. Halaman standar kompetensi
Standar kompetensi terdiri dari beberapa halama, 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.
Gambar 46. 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 :

74
a. Mengamati elemen-elemen visual dalam aplikasi multimedia interaktif
b. Mengidentifikasi elemen-elemen visual yang terdapat dalam aplikasi
multimedia Interaktif
c. 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/ Kasus /Tugas
kerjakan latihan berikut ini
Apa peranan efek visual dalam multimedia interaktif?

75
BAB VI PRODUK MULTIMEDIA

INTERAKTIF
A. Membuat Multimedia Interaktif
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

76
4. Desain Tampilan
Desain dari interface juga harus diperhatikan. Desain interfacenya 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.
B. Pengenalan Adobe Flash CS3
1. 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 47. Tampilan aplikasi adobe flash CS3

77
Secara garis besar, lingkungan kerja (Workspace) adobe flash cs3
terdiri dari beberapa komponen utama yang bisa anda lihat seperti
pada gambar berikut
Gambar 48. Komponen utama adobe flash CS3
Berikut ini penjelasan dari masing-masing komponen
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, Open, Save, Import, Export, dan lain-lain.
b. Timeline
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.
c. Stage
Stage adalah area untuk berkreasi dalam membuat animasi yang digunakan
untuk mengkomposisi frame-frame secara individual dalam sebuah movie.
d. Toolbox
Toolbox adalah kumpulan tools yang sering digunakan untuk melakukan
seleksi, menggambar, mewarnai objek, memodifikasi objek, dan mengatur
gambar atau objek.

78
e. Properties
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.
f. Panels
Panels adalah sebagai pengontrol yang berfungsi untuk mengganti dan
memodifikasi berbagai atribut dari objek dari animasi secara cepat dan mudah
2. Toolbox
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 obyek di stage.
Gambar 49. Toolbox Adobe flash CS3

79
Berikut penjelasan setiap tool yang terdapat pada Toolbox.
 Arrow Tool, Arrow Tool atau sering disebut selection tool berfungsi
untuk memilih atau menyeleksi suatu objek.
 Free Transform Tool, berfungsi untuk mentransformasi objek yang
terseleksi
 Pen Tooldigunakan untuk menggambar garis dengan bantuan titik
titik bantu seperti dalam pembuatan garis, kurva atau gambar.
 Line Tooldigunakan untuk membuat atau menggambar garis.
 Pencil Tooldigunakan untuk membuat garis.
 Ink Bottle tooldigunakan untuk mengisi/mengganti Stroke(garis luar)
suatu objek.
 Eye Dropper Tooldigunakan untuk mengambil sampel warna.
 Hand Tooldigunakan untuk menggeser tampilan stage tanpa
mengubah pembesaran.
 Stroke Colordigunakan untuk memilih atau memberi warna pada
suatu garis.
 Subselection Tool, berfungsi menyeleksi bagian objek lebih detail
dari pada selection tool.
 Lasso Tool, berfungsi untuk memotong gambar secara manual.
 Text Tooldigunakan untuk membuat objek teks
 Rectangular tool digunakan untuk menggambar bentuk kotak
 Brush Tooldigunakan untuk menggambar bentuk garis-garis dan
bentuk-bentuk bebas.

80
 Paintbucket Tooldigunakan untuk mengisi area-area kosong atau
digunakan untuk mengubah warna area sebuah objek yang telah
diwarnai.
 Eraser Tooldigunakan untuk menghapus objek.
 Zoom Tooldigunakan untuk memperbesar atau memperkecil
tampilan stage
 Stroke Colordigunakan untuk memilih atau memberi warna pada
suatu garis.
 Fill Colordigunakan untuk memilih atau memberi warna pada suatu
objek.
 Swap Colordigunakan untuk menukar warna fill dan stroke atau
sebaliknya dari suatu gambar atau objek
3. Dasar Pemrograman Action Script 3
Untuk membentuk sebuah interaktifitas dalam sebuah multimedia pembelajaran
interaktif diperlukan tahapan pemrograman. Pemrograman adalah suatu kegiatan
menuliskan kumpulan urutan perintah ke komputer untuk mengerjakan sesuatu,
dimana instruksi tersebut menggunakan bahasa yang dimengerti oleh komputer
atau dikenal dengan bahasa pemrograman. Adobe Flash memiliki bahasa
pemrograman yang disebut sebagai Action Script, dan sejak tahun 2007 standart
industi yang digunakan adalah Actionscript 3.0.
Untuk memahami dengan baik konsep dasar pemrograman Actionscript 3, maka
diperlukan pemahaman secara bertahap. Di lapangan sering ditemui seorang
pemula yang sudah memiliki konsep terlalu kompleks sehingga dalam proses
membangun aplikasi akan menemui banyak kendala. Seyogyanya mempelajari

81
sebuah kode pemrograman harus dimulai dari teknik yang paling dasar terlebih
dahulu. Seiring waktu belajar, maka kemampuan seseorang akan meningkat dan
mampu mengerjakan projek yang lebih kompleks.
Mencoba Kode Actionscript
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.
Hal ini tentu saja mempermudah seorang pengembang aplikasi untuk
menyempurnakan kode. Sebagai contoh perhatikan aplikasi sederhana sebagai
berikut :
1. Buatlah sebuah file baru. Kemudian klik frame 1 layer 1 dan buka action panel
dengan menekan menu Window > Action (F9).
2. Dalam Flash Actionscript 3 hanya dapat diletakkan di sebuah frame atau
disebuah file terpisah ( dengan metode Class), berbeda dengan versi
sebelumnya yang dapat dituliskan di dalam movieclip dan tombol. Oleh
karena itu perlu selalu diingat bahwa sebelum menuliskan kode, terlebih
dahulu harus menyeleksi. Keyframe tempat kode tersebut akan dijalankan.
Gambar 50. Panel Action

82
3. Klik panel action, dan ketikkan kode berikut pada editor kode.
trace("belajar kode Actionscript");
4. Jalankan aplikasi dengan menekan Ctrl+Enter. Maka akan muncul panel
Output dengan tulisan “belajar kode Actionscript”. Hal ini dikarenakan kode
trace berfungsi untuk menampilkan parameter yang ada di dalam tanda ( );
yang dalam hal ini parameter tersebut berisi sebuah tulisan.
Gambar 51. Hasil pada output panel.
5. Selanjutnya ubah sedikit kode tersebut dengan menghapus salah satu tanda
petik, misalkan menjadi trace("belajar kode Actionscript);
Selanjutnya jalankan kembali aplikasi dengan menekan Ctrl+Enter. Maka
akan muncul panel Compiler Errors dengan menampilkan pesan khusus
bahwa terjadi kesalahan pada kode yaitu kesalahan sintaks (Syntax Error) : A
String literal must be terminated before the line break atau dapat diartikan
sederhana bahwa sebuah variabel berupa String harus diakhiri dengan tanda “.
Gambar 52. Tampilan Compiler Errors.
Dari percobaan di atas, diketahui bahwa penulisan sebuah kode sangatlah spesifik
dan detail. Sebuah kesalahan kecil saja bisa berakibat berhentinya aplikasi atau

83
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 mendetail tentang fundamental dalam mempelajari Actionscript
Syntax
Dalam pemrograman komputer sintaks berarti seperangkat aturan yang harus
dipenuhi dalam penulisan kode. Sintaks meliputi simbol, kata, dan fungsi yang
dapat digunakan serta bagaimana menggunakannya dalam sebuah struktur kode.
Kesalahan umum yangsering dilakukan oleh programer adalah kesalahan sintaks
(Syntax error), dimana kesalahan sintaks akan menyebabkan kode tidak bisa
dijalankan oleh aplikasi. Berikut adalah aturan dalam penulisan Actioscript 3
(AS3).
1. Case Sensitive
Penulisan kode AS3 menggunakan format sensitif case, sehingga setiap kode
harus ditulis tepat sebagaimana mestinya. Satu perbedaan karakter akan
menghasilkan perbedaan, sebagai contoh 2 baris kode berikut berbeda.
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
koma dapat diartikan sebagai baris perintah baru
1. kode baris 1;
2. kode baris 2; kode baris 3;

84
3. Parentheses
Parentheses atau tanda kurung ( ) digunakan untuk mengubah urutan dalam
sebuah operasi/fungsi. Operasi yang diberikan tanda kurung akan dijalankan
terlebih dahulu oleh program. Perhatikan contoh berikut :
1. trace(2 + 3 * 4); // akan menghasilkan nilai 14
2. trace((2 + 3) * 4); // akan menghasilkan nilai 20
Parentheses juga dapat digunakan untuk memberikan masukan pada sebuah
fungsi. Perhatikan contoh berikut :
1. trace("Belajar AS3"); // menghasilkan kata
Belajar AS3
2. trace(kuadrat(4)); // menghasilkan nilai 16
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.
Perhatikan contoh berikut :
1. function kuadrat(num:Number):Number{
2. return num*num;
3. }
4.
5. for(var i:uint=1; i<10; i++){
6. var hasil_kuadrat:Number = kuadrat(i);
7. trace("hasil kuadrat "+i+" = "+hasil_kuadrat);
8. }

85
5. Whitespace
Whitespace merupakan istilah untuk jarak penulisan, tab, enter dan spasi yang
ditujukan untuk mempermudah penulisan kode. Perhatikan kode di atas, pada
baris 2 ditulis menjorok masuk, pada baris 4 sengaja dikosongkan agar
terdapat jarak antara fungsi kuadrat dengan operasi loop di baris 5 – hal
tersebut diistilahkan sebagai whitespace (ruang kosong). Perhatikan kode di
bawah berikut ini, yang bermakna sama namun ditulis dengan cara yang
berbeda.
1. for(var i:uint=0; i<10; i++){
2. trace(i);
3. }
4.
5. for(var i:uint=0; i<10; i++){trace(i);}
6. Comments
Comments atau komentar merupakan catatan yang bisa ditambahkan pada
kode untuk mempermudah penjelasan kode. Ketika menulis kode dalam
jumlah banyak (misal 2000 baris kode) dibutuhkan penjelasan-penjelasan pada
baris kode untuk mempermudah proses pengecekan. Program secara otomatis
akan mengabaikan baris komentar, sehingga kita tidak perlu khawatir dalam
menggunakan komentar. Perhatikan contoh berikut :
1. trace("comment"); // komentar dalam 1 baris
2.
3. /* gunakan tanda ini jika ingin
4. komentar lebih dari satu baris */
Kegunaan lain dari komentar yang umum digunakan oleh programer adalah

86
untuk menonaktifkan sementara kode yang tidak dibutuhkan. Pada saat proses
pengecekan kode yang panjang (debugging), sering kali beberapa baris kode
dinonaktifkan sementara untuk menguji kesalahan/kebenarannya.
7. Literals
Literals adalah nilai yang kita tuliskan ke kode dalam bentuk angka, string
atau array.
Misal 1, 832009, “kata-kata”, [4, 5, 6] dan sebagainya.
8. Keywords and reserved words
Merupakan kata kunci dan kata-kata khusus yang telah dipakai oleh kode,
sehingga tidak bisa digunakan sebagai identifier. AS3 memiliki beberapa
keyword dan kata khusus yang pada panel actionscript akan diberi warna
berbeda dan akan diberikan peringatan apabila kita memakainya. Terdapat 3
jenis keyword yaitu :
a. Lexical Keywords
Merupakan kata-kata yang sudah digunakan dalam rangkaian kode.
Misalnya as if return break super case
b. Syntactic Keywords
c. Merupakan kata-kata yang dapat digunakan sebagai idetifier, namun
memiliki fungsi tertentu jika digunakan dalam konteks yang benar.
Misalnya each include override get dynamic static
d. Future Reserved Word
Merupakan kata-kata yang disimpan untuk fitur actionscript versi selanjutnya.
Misalnya abstract export throws float to byte

87
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)
2. Harus dimulai dengan huruf, underscore ( _ ) atau tanda dollar ( $ )
3. Masing-masing variabel harus unik (berbeda antara satu dengan yang lain)
4. Sebaiknya menggunakan kata-kata yang mudah dipahami, misal
var bilanganGenap : number = 2;
5. Lebih baik menggunakan sistem camelCase atau membedakan kata dengan
huruf kapital pada huruf pertama setiap kata.
6. Underscore ( _ ) hanya boleh untuk variabel yang bersifat private.
7. Tanda dollar ( $ ) hanya boleh untuk variabel yang bersifat static.
Access control attributes
Dalam pemrograman berbasis objek (OOP), masing-masing variabel, fungsi,
metode dan class dapat diakses secara khusus dengan menggunakan Access
control attributes.

88
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 :
var nama_siswa: String = “Azka”;
var merupakan deklarasi variabel sehingga komputer mengalokasikan memorinya,
nama_siswa merupakan nama variabel yang akan disimpan ke dalam memori.
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
oleh kode atau fungsi setelah pendeklarasiannya. Konstanta dalam AS3
dideklarasikan dengan keyword const.
Contoh :
const gravitasi:Number = 0.98; // mengeset nilai grafitasi
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,int, uint, Boolean, Null, dan void

89
1. String
String adalah data yang bernilai tekstual dan penulisannya dalam AS3
menggunakan tanda petik, misalnya
var nama:String = “Izzan”;
2. Number
Number adalah data yang bernilai angka tanpa batasan. Misal :
var nilaiUjian:Number = 97;
3. Int
Int adalah kependekan dari integer yaitu data yang bernilai angka dari -
2,147,483,648 sampai dengan 2,147,483,647 (32 bit data). Penggunaan
variable bertipe int lebih efisien dari segi kecepatan pengolahan data
dibanding dengan variabel bernilai Number.
4. Uint
Berbeda dengan int yang bernilai negatif sampai positif, uint hanya bernilai
positif yaitu mulai dari angka 0 sampai dengan 4,294,967,295.
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
untuk fungsi yang tidak mengembalikan/menghasilkan nilai spesifik.

90
Pada pengembangan berikutnya akan ditemukan tipe data yang lebih
kompleks seperti Array, Object, Date dan sebagainya.
Operators
Operators merupakan simbol yang digunakan untuk operasi matematika
seperti penjumlahan (+), pengurangan ( - ), perkalian ( * ), pembagian ( / ),
sama dengan ( = ) dan sebagainya. Perhatikan contoh berikut :
1. trace(4*5+8); //menghasilkan 28
Function
Function atau fungsi merupakan satu atau beberapa baris kode dalam satu
blok, yang ditujukan untuk menyederhanakan suatu operasi dan dapat
digunakan beberapa kali. Sebagai contoh, ketika membuat aplikasi yang
melibatkan perhitungan jarak antara objek dan mouse, maka fungsi
menghitung jarak tersebut ditulis dalam sebuah blok kode yang
berisi beberapa baris. Untuk menghitung jarak tentunya ada beberapa variabel
yang diperlukan yaitu titik kordinat awal dan titik kordinat akhir, selanjutnya
dilakukan perhitungan menggunakan rumus pitagoras dan terakhir hasil
perhitungan ditampilkan oleh fungsi.
Mendefinisikan sebuah fungsi di dalam AS3 memiliki beberapa elemen
sebagai berikut :
1. Deklarasi keyword function
2. Pemberian nama fungsi
3. Parameter (variabel) awal sebagai masukan
4. Hasil dari fungsi (return)
5. Blok kode fungsi (function body)

91
Untuk mempermudah pemahaman terhadap fungsi perhatikan beberapa
contoh berikut :
1. function haloDunia():void{
2. trace(“Hello world”);
3. }
4.
5. haloDunia(); // Hello world
Pada fungsi haloDunia di atas, berisi satu baris kode yaitu kode trace.
Kode trace digunakan untuk menampilkan hasil di output panel. Sehingga
jika kode tersebut dijalankan, pada output panel akan muncul teks “Hello
world”.
1. function kuadrat(angka:int):int{
2. return(angka*angka);
3. }
4.
5. trace(kuadrat(5)); //fungsi kuadrat 5 akan
menghasilkan 25
6. trace(kuadrat(6)); //fungsi kuadrat 6 akan
menghasilkan 36
Pada fungsi kuadrat tersebut, terdapat parameter angka yang selanjutnya
diproses oleh kode blok dimana hasil dari fungsi adalah angka*angka.
Berbeda dengan fungsi sebelumnya yang tidak menghasilkan apa-apa
(void), fungsi kuadrat menghasilkan sebuah nilai yang bertipe int (:int).
Sebuah fungsi baru akan dijalankan jika fungsi tersebut
dipanggil/diaktifkan. Sebagai contoh di atas fungsi kuadrat dipanggil 2 kali

92
pada baris ke 5 dan baris ke 6.
Loops
Loops atau operasi berulang adalah satu blok kode yang dijalankan secara
terus menerus sampai kondisi yang ditentukan terpenuhi. Misalnya
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
do..while. Perhatikan stuktur operasi berulang for berikut ini :
1. for(var i:int=0; i<10; i++){
2. trace(i);
3. }
for merupakan keyword yang digunakan untuk operasi berulang
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
yang dijalankan sepanjang loop Apabila kode tersebut dijalankan akan
menghasilkan angka 0 sampai 9 di layar. Output 0 karena merupakan
kondisi awal saat inisiasi, selanjutnya bertambah 1 demi 1 karena ada
update i++, yang sama artinya dengan i = i + 1; dan diakhiri pada i = 9
karena tepat
pada kondisi i < 10;
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.

93
Untuk lebih jelasnya
perhatikan contoh berikut :
1. var angka:int = 0;
2. while(angka < 10) {
3. angka ++;
4. trace(angka);
5. }
Apabila kode tersebut dijalankan akan menghasilkan angka 1 sampai 10 di
layar. Output 1 karena kondisi awal saat inisiasi yaitu 0 bertambah 1 akibat
kode angka++, selanjutnya bertambah 1 demi 1 karena adanya kode baris
ke-3, dan diakhiri pada angka = 9 namun karena adanya kode angka++;
maka nilai akhir dari angka adalah 10.
Sedangkan do..while loops adalah format lain dari operasi while loops
namun test kondisi dilakukan di akhir. Perhatikan contoh berikut :
1. var angka:int = 0;
2. do{
3. angka++;
4. trace(angka);
5. }while(angka < 10);
Apabila kode tersebut dijalankan akan menghasilkan angka 1 sampai 10 di
layar, dengan penjelasan sama dengan operasi while loops.
Break dan Continue
Break dan continue digunakan untuk menginterupsi sebuah operasi
berulang (loops).

94
Break digunakan untuk menghentikan operasi berulang ketika suatu
kondisi dalam blok terpenuhi. Perhatikan contoh berikut :
1. for(var i:int=1; i<23; i+=4){
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
sebanyak 4 poin setiap langkah, sehingga menghasilkan angka 1, 5, 9, 13,
17, dan 20. Namun akibat kondisi (i==13) terpenuhi maka kode break
dijalankan dan operasi berulang dihentikan sehingga hanya dihasilkan
angka 1, 5 dan 9.
1. for(var i:int=1; i<23; i+=4){
2. if(i==13){
3. continue;
4. }
6. trace(i);
6. }
7. //output 1 5 9 17 21
Berbeda dengan kode break yang menghentikan secara langsung. Kode
continue akan melewatkan satu langkah apabila kondisi terpenuhi, maka pada
kode di atas ketika (i == 13) terpenuhi perulangan dilewati satu langkah,
sehingga angka 13 tidak muncul.

95
Conditional if
Kondisi if merupakan logika dasar sebagian besar bahasa pemrograman.
Dengan kode if sebuah kondisi dicek kebenarannya dan blok kode akan
dieksekusi berdasarkan kondisi tersebut. Perhatikan contoh berikut :
1. function bilanganGenap(angka:int):void{
2. if (angka % 2 == 0) {
3. trace(angka+" adalah bilangan genap");
4. }
5. }
6.
7. bilanganGenap(6);
Pada baris 2 terdapat sebuah kondisi dimana angka mengalami operasi
modulus (%) dengan angka 2. Apabila angka dibagi dengan bilangan 2
menyisakan bilangan 0 (disimbolkan dengan operator == ) maka angka
tersebut dipastikan sebagai bilangan genap.
1. function bilanganGenap(angka:int):void{
2. if (angka % 2 == 0) {
3. trace(angka+" adalah bilangan genap");
4. }else{
5. trace(angka+" adalah bilangan ganjil");
6. }
7. }
8.
9. bilanganGenap(8); // 6 adalah bilangan genap
10. bilanganGenap(3); // 6 adalah bilangan ganjil

96
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.
Perhatikan contoh berikut:
1. function cekNilai(nilai:int):void{
2. if (nilai < 6) {
3. trace("Maaf anda tidak lulus");
4. }else if (nilai < 8){
5. trace("Lumayan!, anda mendapat nilai C");
6. }else if (nilai < 10){
7. trace("Hebat!, anda mendapat nilai B");
8. }else{
9. trace("Luar biasa!, nilai sempurna");
10. }
11. }
12.
13. cekNilai(7); // Lumayan!, anda mendapat nilai C
Pada kondisi if .. else if di atas, pengecekan logika dimulai dari kondisi teratas
dan apabila terpenuhi maka akan dilanjutkan ke logika berikutnya. Sehingga
ketika kode cekNilai(8); dijalankan, maka kondisi (nilai < 6) terpenuhi,
kondisi (nilai < 8), sedangkan kondisi (nilai < 10) tidak terpenuhi. Untuk itu
ditampilkan hasil kondisi terakhir yang terpenuhi yaitu (nilai < 8).
Conditional switch
Kondisi switch digunakan ketika terdapat beberapa kondisi yang berbeda-

97
beda.
Perhatikan contoh kode berikut :
1. function cekNilai(nilai:String):void{
2. switch(nilai){
3. case "A":
4. trace("Sempurna - anda mendapat nilai A");
5. break;
6. case "B":
7. trace("Bagus - anda mendapat nilai B");
8. break;
9. case "C":
10. trace("Lumayan - anda mendapat nilai C");
11. break;
12. case "D":
13. trace("Lebih giat lagi - anda mendapat nilai
D");
14. break;
15. case "E":
16. trace("Maaf anda tidak lulus");
17. break;
18. default:
19. trace("Masukan data salah");
20. break;
21. }
22. }
23.

98
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,
maka blok kode default yang akan dijalankan.
Array
Array adalah sebuah stuktur data yang bisa digunakan untuk menyimpan
beberapa variabel dengan nama yang sama. Sebagai contoh data nama siswa
kelas 1, data soal kuis dan sebagainya. Perhatikan contoh berikut :
1. var namaHari:Array = ["Senin", "Selasa", "Rabu",
"Kamis", "Jumat", "Sabtu", "Minggu"];
2.
3. trace(namaHari[0]); //Senin
4. trace(namaHari[3]); //Kamis
Pada kode di atas dideklarasikan variabel namaHari dengan tipe Array.
Variabel tersebut memiliki beberapa nilai yaitu “Senin” sampai “Minggu”.
Untuk menggunakan data yang berada di dalam Array, dapat digunakan nama
variable diikuti tanda [ no data ]. Contoh variabel namaHari[0] bernilai
“Senin”, karena berada di urutan pertama (dimulai dari angka 0), dan
seterusnya.
Mengendalikan Timeline dengan Actionscript
Salah satu kegunaan actionscript adalah untuk mengatur timeline. Dalam
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

99
tersebut bergerak – hal ini membutuhkan pengaturan yang melibatkan kode.
stop();
Kode stop(); berfungsi untuk menghentikan timeline pada frame dimana lokasi
kode tersebut berada. 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 Action (F9), kemudian ketikan kode
stop();
Gambar 126. Peletakan kode stop();
3. Jalankan aplikasi dengan menekan Ctrl+Enter. Maka aplikasi akan
memunculkan bola tersebut namun bola tidak bergerak. Hal tersebut
dikarenakan
kode stop(); berjalan sehingga timeline berhenti.
4. Klik frame 1 layer 2, kemudian drag Keyframe tersebut menuju ke
frame 15.
Dengan kata lain kode stop(); saat ini berada di frame 15. Jalankan
kembali aplikasi dengan menekan Ctrl+Enter. Maka bola akan bergerak
dan berhenti tepat ketika berada di posisi frame 15.

100
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
Action (F9), kemudian ketikan kode
gotoAndStop(15);
3. Jalankan aplikasi dengan menekan Ctrl+Enter. Maka aplikasi akan
memunculkan bola pada posisi frame 15 dan bola tidak bergerak.
gotoAndPlay();
Berkebalikan dengan kode gotoAndStop(frame); kode gotoAndPlay(frame);
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);
Jalankan aplikasi dengan menekan Ctrl+Enter. Maka aplikasi akan memunculkan
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.
4. Konsep symbol pada adobe flash
hapemerupakan obyek asli yang dibuat pada stageyang belum
diubah ke dalam simbol. Pada saat sebuah shape yang berada di
stage dipilih, maka akan tampak seperti ada bintik-bintik putih pada
obyek shape tersebut.

101
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.
Dengan merubah suatu obyekmenjadi symbol, itu artinya obyektersebut sudah
menjadi bentuk yang pasti dan tidak bias memanipulasinya lagi didalam stage
misalnya merubah warna, memberikan coretan diatasnya atau yang lainnya. Jadi
sebelum merubah suatu obyek menjadi symbol maka sebaiknya obyek
tersebut harus benar- benar sudah siap untuk digunakan sehingga
tidak lagi ingin melakukan perubahan terhadap obyek tersebut. Tetapi
kita bisa melakukan operasi merubah bentuk di dalam stage seperti
memutar, memperbesar atau memindahkannya.
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 permukaanya. Selanjutnya pilih menu Modify convert tosymbol
atau tekan F8 sehingga muncul menu seperti berikut:
Gambar 43. Jendela convert to symbol

102
Isikan nama sesuai dengan keinginan pada bagian name. Dan pada bagian
behavior terdapat tiga pilihan yaitu: movieclip : obyekdigunakan untuk beranimasi
button : obyek dibuat sebagai tombol graphic : obyek dibuat sebagai gambar yang
statis atau tidak beranimasi
C. 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 obyek, memberikan nama pada obyek 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 penulisanhuruf kapital atau huruf kecil akan
berakibat error pada program.
Actionscript memungkinkan pemberian perintah terhadap animasi yang buat.
Misalnya 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 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.
1. Tambahkan 3 buah layer dan ubah masing-masing namanya menjadi
Tombol, Gambar, Action. Cara mengganti nama layer yaitu dengan

103
cara klik 2 kali pada layer yang akan diganti namanya, lalu ketikkan
nama baru
Gambar 55. Membuat tiga buah layer
2. Di frame 1 layer Tombol, buatlah 3 buah obyek button serta satu buah
shape untuk background.
Gambar 56. Menambahkan objek button
3. Agar tombol dan background tetap terlihat sepanjang animasi, berikan
insert frame di frame 40 layer Tombol
Gambar 57. Menambah durasi tampilan
4. Berikan keyframe di frame 2 layer gambar. Lalu klik kanan pilih insert
key frame.Tambahkan sebuah gambar dengan cara klik menu File 
import 
ukurannya sehingga berada di dalam kotak background. Hidupkan
onion skinning untuk mempermudah mengatur posisinya

104
Gambar 58. Pengaturan posisi obyek pada stage
5. 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 59. Menambahkan teks
6. Kemudian di frame 40 layer gambar . klik kanan pilih insert frame.
Gambar 60. Memperpanjang durasi tampilan
7. 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

105
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");
8. Kemudian pada frame 40 layer action klik kanan pilih insert frame.
Gambar 61. Memperpanjang durasi tampilan layer
9. Jalankan dengan menekan CTRL+ENTER, maka tampilan gambar
akan berubah-ubah sesuai tombol yang ditekan

106
D. Bekerja dengan text
Teks digunakan untuk menerangkan atau menjelaskan sesuatu dalam bentuk tulisan,
pembuatan judul, komponen animasi, keteranganketerangan 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 :
1. Static Text adalah jenis teks yang mempunyai karakter-karakter
seperti teks biasa pada umumnya.
2. 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.
3. 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.

107
Gambar 62. 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 63. Penambahan input 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.

108
Gambar 64. 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);
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

109
Gambar 65. Tampilan pengisian data
h. Setelah itu kita enterhasilnya seperti dibawah ini.
Gambar 66. Tampilan data
E. 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 :
o Scene 1 untuk opening
o Scene 2 untuk standar kompetensi
o Scene 3 untuk sejarah matematika

110
o Scene 4 untuk petunjuk
o Scene 5 untuk materi
o 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 
Gambar 161. 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
Gambar 162. Jumlah scene dalam file
Untuk memudahkan pengerjaan, sebaiknya nama scene disesuaikan dengan
nama halaman/menu. Untuk mengubah nama scene, klik menu window 
other panels 

111
Gambar 163. Langkah mengubah nama scene
Double klik nama scene, lalu ganti namanya sesuai dengan nama
menu/halaman yang akan Anda buat
Gambar 164. Mengganti nama scene
1. MEMBUAT OPENING
d. 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.

112
Gambar 165. Membuat opening
e. Seleksi layer waktu. Pada frame 1 buatlah tulisan angka 9
Gambar 166. Awal hitungan waktu mundur
f. Tambahkan keyframe pada frame 3. Ubah tulisannya menjadi angka 8.
Tambahkan keyframe pada frame 5. Ubah tulisannya menjadi angka 7.
Tambahkan keyframe pada frame 13 Ubah tulisannya menjadi angka 3.

113
Gambar 167. Menambahkan keyframe terakhir
g. 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
Gambar 168. Susunan frame pada layer waktu
h. Berikan keyframe pada frame 40. Geser tulisan ke tengah stage
Gambar 169. Frame akhir animasi tulisan berjalan
i. Pilih salah satu frame diantara frame 19 dan 40 (missal frame 25). Klik
kanan 

114
Gambar 170. Menambahkan motion tween
j. Akan muncul garis yang menghubungkan frame awal (21) dengan frame
akhir(40) dan Nampak tulisan bergerak ke kanan
Gambar 171. Animasi motion tween pada tulisan
k. Selanjutnya kita bekerja pada layer tombol. Klik frame 41. Klik kanan 
nsert keyframe. Lalu tambahkan tombol enter
Gambar 172. Menambahkan tombol enter
l. Seleksi tombol enter, pada bagian propertiesnya beri nama enter pada
instance name

115
Gambar 173. Memberi nama tombol enter
m. 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 174. Script untuk tombol enter
Penjelasan dari script tersebut adalah sebagai berikut.
o stop(); berfungsi untuk menghentikan tampilan layar berada di frame
yang diberi action. Jadi tampilan layar akan berhenti pada frame 41
o enter.addEventListener(MouseEvent.CLICK, klik_tombol); menambahkan
even pada tombol enter, yaitu jika tombol enter di klik makan akan
menjalankan fungsi klik_tombol
o function klik_tombol(e:MouseEvent):void membuat fungsi klik_tombol
o var nama_tombol:String = e.currentTarget.name; membuat variable
nama tombol berupa string

116
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 175. 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.
Gambar 176. 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 :

117
o STANDAR KOMPETENSI akan mengarahkan pengguna ke scene
standar_kompetensi
o SEJARAH MATEMATIKA akan mengarahkan pengguna ke scene
sejarah
o PETUNJUK akan mengarahkan pengguna ke scene petunjuk
o MATERI akan mengarahkan pengguna ke scene materi
o 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 action script,
maka harus di beri nama. Untuk memberi nama, klik tombol, kemudian pada
bagian properties, isikan pada bagian instance name dengan nama tombol
Gambar 177. Pemberian nama pada tombol STANDAR KOMPETENSI
Gambar 172. Pemberian nama pada tombol SEJARAH MATEMATIKA

118
Gambar 173. Pemberian nama pada tombol KUIS
Gambar 178. 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{
if(nama_tombol == "standar_btn"){
gotoAndStop(1,"standar_kompetensi");
if(nama_tombol == "sejarah_btn"){
gotoAndStop(1,"sejarah");

119
if(nama_tombol == "petunjuk_btn"){
gotoAndStop(1,"petunjuk");
if(nama_tombol == "materi_btn"){
gotoAndStop(1,"materi");
if(nama_tombol == "kuis_btn"){
gotoAndStop(1,"kuis");
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

120
Gambar 179. Tampilan Halaman Sejarah Matematika
b. Setiap tombol di beri instance name. Instance name dari masing-masing
tombol serta navigasinya, tercantum dalam table berikut
Gambar 180. Keterangan masing-masing tombol
a. Selanjutnya adalah menuliskan script untuk masing-masing tombol
zaman1_btn.addEventListener(MouseEvent.CLICK, menu_sejarah);

121
zaman5_btn.addEventListener(MouseEvent.CLICK, menu_ sejarah);
function menu_sejarah (e:MouseEvent):void{
if(nama_tombol == "zaman1_btn"){
gotoAndStop(“5");
gotoAndStop(“10");
gotoAndStop("15");
gotoAndStop("20");
gotoAndStop("25");

122
gotoAndStop("30");
gotoAndStop("35");
gotoAndStop("40");
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 181. 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{

123
nextFrame();
kembali_btn.addEventListener(MouseEvent.MOUSE_DOWN,mundur);
function mundur(event:MouseEvent):void{
prevFrame();
5. Pengaturan Halaman Kuis
a. Berikut ini adalah tampilan untuk halaman kuis
Gambar 182. 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 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
mengalami distorsi huruf.

124
Gambar 183. Pengaturan teks untuk soal
c. Untuk membuat tombol pilihan jawaban, buatlah sebuah Movieclip baru
dengan memilih opsi Insert > New Symbol. Ketikan nama alternative
jawaban, lalu tekan OK. Selanjutnya buatlah 2 buah Layer, pada Layer
2(atas) buatlah sebuah dynamic text untuk menampilkan jawaban. Buka
panel properties dan tambahkan instance name"jawaban_txt".
Pada Layer 1 (bawah) buatlah sebuah background berupa kotak.
Gambar 184. Teks untuk pilihan jawaban
d. Kembali ke Scene 1 kemudian drag Movieclip alternatif jawaban ke
Stage sebanyak 4 kali. Atur posisinya masing-masing.
Gambar 185. 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.

125
Gambar 186. 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 scrip.
Gambar 187. Pembuatan movieclip umpan balik
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.

126
Gambar 188. Umpan balik salah.
h. Dengan cara yang sama pada frame 3 buatlah tampilan ketika
permainan berakhir (soal telah habis)
Gambar 189. 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;
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"],

127
["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 siku-siku 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"]];
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];

128
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
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

129
jawaban_1.jawaban_txt.text = temp_jawaban[0];
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);
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;

130
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, 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){

131
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);
setup_awal();
j. Tekan CTRL+ENTER untuk melihat hasilnya

132
Gambar 190. 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 191. Tampilan jika jawaban pengguna salah
l. Jika pilihan jawaban benar, maka akan tampil pop up jawaban benar

133
Gambar 192. Tampilan saat pilihan jawaban pengguna benar
F. Latihan/ Kasus /Tugas
Dengan menggunakan action script 3, buatlah navigasi media pembelajaran
interaktif yang telah anda rancang dalam kegiatan belajar sebelumnya

134
BAB VI PENGUJIAN MULTIMEDIA
INTERAKTIF
A. Pengujian Multimedia Interaktif
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.
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.

135
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 control 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 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.

136
Pengujian blackbox berusaha menemukan kesalahan dalam kategori sebagai
berikut :
 Fungsi-fungsi yang tidak benar atau hilang
 Kesalahan interface
 Kesalahan dalam struktur data atau akses database eksternal
 Kesalahan kinerja
 Inisialisasi dan kesalahan terminasi
c. 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:

137
a) Aspek Rekayasa Perangkat Lunak, yang terdiri dari kriteria fungsionalitas,
reliabilitas dan usabilitas. Instrumen untuk pengujian dapat memuat komponen
berikut :
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
b) 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 :
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
c) 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

138
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 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 pengguna serta 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

139
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:
 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;
 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:

140
 Jawaban-jawaban bersifat standar dan bisa dibandingkan dengan
jawaban orang lain;
 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;
 Responden lebih merasa yakin akan jawaban-jawabannya, terutama
bagi mereka yang sebelumnya tidak yakin;
 Jawaban-jawaban relatif lebih lengkap karena sudah dipersiapkan
sebelumnya oleh peneliti; dan
 Analisis dan formulasinya lebih mudah jika dibandingkan dengan
model kuesioner dengan jawaban terbuka. Kuisioner dengan jawaban tertutup
juga memiliki beberapa kelemahan,yaitu sangat mudah bagi responden untuk
menebak setiap jawaban, meskipun sebetulnya mereka tidak memahami
masalahnya;
 Responden merasa frustrasi dengan sediaan jawaban yang tidak
satu pun yang sesuai dengan keinginannya;
 Sering terjadi jawaban-jawaban yang terlalu banyak sehingga
membingungkan responden untuk memilihnya;
 Tidak bisa mendeteksi adanya perbedaan pendapat antara
responden dengan peneliti karena responden hanya disuruh
memilih alternatif jawaban yang tersedia.

141
B. Aktivitas Pembelajaran
Dalam bagian ini akan dibuat pertanyaan/pernyataan untuk kuisioner media
pembelajaran interaktif. Berikut ini beberapa panduan dalam membuat pertanyaan
kuisioner
 Jangan gunakan perkataan sulit
 Jangan gunakan pertanyaan yang bersifat terlalu umum
 Hindarkan pertanyaan yang ambigu
 Jangan gunakan kata yang samar-samar
 Hindarkan pertanyaan yang mengandung sugesti
 Hindarkan pertanyaan yang berdasarkan preasumsi
 Jangan membuat pertanyaan yang menyudutkan responden
 Hindarkan pertanyaan yang menghendaki ingatan
Ada aturan umum dalam menyusun urutan pertanyaan yang dibuat,
meskipun tidak mutlak, yakni sebagai berikut:
a) Pertanyaan sensitif dan pertanyaan model jawaban terbuka sebaiknya
ditempatkan di bagian akhir kuesioner.
b) Pertanyaan-pertanyaan yang mudah sebaiknya ditempatkan pada
bagian awal kuesioner.
c) Susunlah pertanyaan dengan pola susunan yang saling berkaitan
satu sama lain secara logis.
d) Susunlah pertanyaan sesuai dengan susunan yang logis, runtut, dan
tidak meloncat-loncat dari tema satu ke tema yang lain.

142
e) Jangan gunakan pasangan pertanyaan yang mengecek reliabilitas.
Misalnya, setujukah Anda terhadap aborsi? Sementara itu di tempat
lain, ada pertanyaan, tidak setujukan Anda terhadap aborsi?.
f) 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 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 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

143
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

144
C. Latihan/ Kasus /Tugas
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!

145
DAFTAR PUSTAKA
Arsyad, Azhar. 2006. Media pembelajaran. Jakarta : Raja Grafindo Persada.
Hamalik, Oemar. 1990. Sistem Internship Kependidikan Teori dan Praktek. Bandung:
CV Mandarmaju.
Jember. Cerdas Ulet kreatif
Wibawanto, Wandah. 2017. Desain dan pemrograman Media Pembelajaran Interaktif.

Modul Revisi PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Revisi PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL SMK MULTIMEDIA KELAS XII

Laila Limariantika, S.Pd

menyampaikan pesan dari pengirim ke penerima pesan (Prawiradilaga, 2008).

Briggs mendefinisikan media pembelajaran sebagai bentuk fisik yang dapat

membantu proses penyampaian pesan. Sementara itu Asosiasi Pendidikan Nasional

(Nation Education Association/ NEA) memberikan batasan tentang media yaitu

bentuk-bentuk komunikasi baik tercetak maupun audi visual serta bebagai

yang digunakan untuk menyalurkan pesan dalam proses pendidikan, pendidikan

pendidikan yang juga harus diperhitungkan.

Menurut Oemar Hamalik (1986), media pembelajaran adalah hubungan komunikasi

menggunakan alat bantu yang disebut media komunikasi. Dalam pengertian

Laila Limariantika, S.Pd ©Laila Limariantika

komunikasi,media adalah alat yang memindahkan informasi (pesan) dari sumber

Menurut Edgar Dale (1946), media pembelajaran merupakan klasifikasi pengalaman

observasi, dan pengalaman langsung memberikan pengaruh yang sangat besar

terlibat langsung didalamnya bila dibandingkan dengan konsep yang hanya

pembelajaran adalah media yang dapat menyampaikan pesan pembelajaran atau

mengandung muatan untuk membelajarkan seseorang. Dari beberapa pendapat

belajar mengajar lebih efektif, efisien dan menyenangkan.

B. Manfaat Media Pembelajaran

Media pembelajaran memiliki peranan yang besar dan berpengaruh terhadap

pencapaian tujuan pendidikan yang diinginkan. Kegunaan Media/ alat pembelajaran

dalam proses belajar mengajar diantaranya:

1. Memperjelas penyajian pesan supaya tidak terlalu verbalitas (dalam bentuk

katakata tertulis atau hanya kata lisan)

2. Mengatasi keterbatasan ruang, waktu dan daya indera, misalnya;

film, atau model.

Laila Limariantika, S.Pd ©Laila Limariantika

timelapse atau high-speed photography.

disajikan dengan model, diagram atau melalui program komputer animasi.

dapat divisualisasikan dalam bentuk film, gambar dan lain-lain.

menimbulkan motivasi belajar, memungkinkan interaksi langsung antara anak

didik dengan lingkungan secara seperti senyatanya, memungkinkan peserta didik

belajar mandiri sesuai dengan kemampuan dan minatnya.

6. didik dapat diatasi dengan media pendidikan yaitu : memberikan perangsang

yang sama, mempersamakan pengalaman, menimbulkan persepsi yang sama.

a. Mampu mengatasi kesulitan-kesulitan dan memperjelas materi pelajaran yang

b. Mampu mempermudah pemahaman dan menjadikan pelajaran lebih hidup dan

c. Merangsang anak untuk bekerja dan menggerakkan naluri kecintaan menelaah

(belajar) dan menimbulkan

Laila Limariantika, S.Pd ©Laila Limariantika

d. Kemauan keras untuk mempelajarai sesuatu,

e. Membantu pembentukan kebiasaan, melahirkan pendapat, memperhatikan dan

memikirkan suatu pelajaran serta,

f. Menimbulkan kekuatan perhatian (ingatan) mempertajam indera, melatihnya,

memperluas perasaan dan kecepatan dalam belajar.

C. Jenis Media Pembelajaran

media siar (telecommunication) dan media rekam (recording) sehingga ada 8

klasifikasi media, yaitu:

1. Media audio visual gerak

2. Media audio visual diam

3. Media audio semi gerak

4. Media visual gerak

5. Media visual diam

6. Media semi gerak

Sementara menurut Gagne (1992) mengelompokan media dalam 7 macam yaitu;

1. Benda untuk didemonstrasikan

Laila Limariantika, S.Pd ©Laila Limariantika

6. Film bersuara dan

pertama, bahan-bahan cetakan atau bacaan, dimana bahan-bahan ini lebih

mengutamalkan kegiatan membaca atau penggunaan simbol-simbol kata dan visual.

1. Alat tanpa proyeksi seperti papan tulis dan diagram

2. Media pendidikan tiga dimensi, seperti benda asli, peta