(C3) KELAS XII€¦ · Buku teks utama SMK berjudul Desain Media Interaktif ditulis dan disusun...

DESAIN MEDIA INTERAKTIF

(C3) KELAS XII

Rudi Nurcahyo

PT KUANTUM BUKU SEJAHTERA

DESAIN MEDIA INTERAKTIFSMK/MAK Kelas XII© 2020Hak cipta yang dilindungi Undang-Undang ada pada Penulis.Hak penerbitan ada pada PT Kuantum Buku Sejahtera.

Penulis : Rudi NurcahyoEditor : Mira Eri Ismi WardiyaniDesainer Kover : Achmad FaisalDesainer Isi : Ayu Amelia SyafitrieTahun terbit : 2020ISBN : 978-623-7591-78-8

Diterbitkan oleh PT Kuantum Buku SejahteraAnggota IKAPI No. 212/JTI/2019Jalan Pondok Blimbing Indah Selatan X N6 No. 5 Malang - Jawa TimurTelp. (0341) 438 2294, Hotline 0822 9951 2221; Situs web: www.quantumbook.id

Dilarang memperbanyak atau memindahkan sebagian atau seluruh isi buku ini dalam bentuk apapun, baik secara elektronis maupun mekanis, termasuk memfotokopi, merekam atau dengan sistem penyimpanan lainnya, tanpa izin tertulis dari PT Kuantum Buku Sejahtera.

iii

Daftar Isi

Kata Pengantar .................................................................................................................. viPrakata ..................................................................................................................... viiBab 1 Konsep Multimedia Interaktif .......................................................................... 1 A. Pengertian Multimedia Interaktif ................................................................................ 2 B. Jenis Multimedia Interaktif ............................................................................................. 4 C. Manfaat Multimedia Interaktif ...................................................................................... 4 D. Konsep Dasar Multimedia Interaktif ........................................................................... 6 E. Website Multimedia Interaktif ................................................................................ 9 Uji Kompetensi ............................................................................................................................. 15

Bab 2 Desain Perancangan Alur Multimedia Interaktif ............................................ 19 A. Flowchart Multimedia Interaktif .................................................................................. 20 B. Storyboard Multimedia Interaktif ................................................................................ 23 C. Format Storyboard dan Komponen ........................................................................... 25 D. Template Storyboard ....................................................................................................... 26 Uji Kompetensi ............................................................................................................................. 29

Bab 3 Desain User Interface Multimedia Interaktif ................................................... 33 A. Mengenali User Interface ............................................................................................... 34 B. Manfaat Antar Muka (Interface) Pengguna ............................................................. 34 C. Prinsip Desain User Interface ........................................................................................ 35 D. Interaksi Pengguna ................................................................................................... 43 Uji Kompetensi ............................................................................................................................. 47

Bab 4 Pengoperasian Aplikasi Multimedia Interaktif ............................................... 51 A. Pengenalan Aplikasi ......................................................................................................... 52 B. Toolbox ................................................................................................................................. 54 C. Fitur Adobe Flash................................................................................................................ 56 D. Multimedia Interaktif Berbasis Halaman Web ......................................................... 58 Uji Kompetensi ............................................................................................................................. 62

Bab 5 Penggabungkan Media Dalam Sajian Multimedia Interaktif ........................ 67 A. Mengenal Unsur-Unsur Multimedia ........................................................................... 68 B. Bekerja dengan Program Berbasis Web .................................................................... 72 C. Bekerja dengan Program Media Interaktif ............................................................... 80 Uji Kompetensi ............................................................................................................................. 85

Bab 6 Style Multimedia Interaktif Berbasis Halaman Web dan Media Interaktif .. 89 A. Mengenali Struktur Navigasi ......................................................................................... 90 B. Perancangan Struktur Navigasi .................................................................................... 93 C. Efek Visual Multimedia Interaktif ................................................................................. 97 Uji Kompetensi ............................................................................................................................. 100

iv

Bab 7 Review Produk Web ........................................................................................... 105 A. Pengenalan Website ......................................................................................................... 106 B. Cara Kerja Website ............................................................................................................ 107 C. Unsur Website ..................................................................................................................... 107 D. Fungsi Web .......................................................................................................................... 109 E. Jenis Website ....................................................................................................................... 110 F. Mengatur Mutu Website ................................................................................................. 112 G. Aplikasi Online untuk Membuat Survey ................................................................... 115 H. Membuat Kuisioner Menggunakan Google Form ................................................ 119 Uji Kompetensi ............................................................................................................................. 122

Bab 8 Teknik Pemrograman Multimedia Interaktif .................................................. 125 A. Mengenali Action Script .................................................................................................. 126 B. Dasar Penulisan Action Script dalam Flash .............................................................. 127 C. Pola Penulisan Action Script dalam Flash ................................................................. 127 D. Pola Penulisan Action Script pada Movieclip .......................................................... 129 E. Pola Penulisan Action Script pada Frame ................................................................. 131 F. Kesalahan Action Script .................................................................................................. 134 G. Kesalahan Logika Action Script .................................................................................... 136 H. Operasi Teks ......................................................................................................................... 136 Uji Kompetensi ............................................................................................................................. 144

Bab 10 Pengolahan Multimedia Interaktif .................................................................. 149 A. Mengenal Action Script Navigasi ................................................................................ 150 B. Action Script Mengontrol Movie Clip ........................................................................ 154 C. Action Script Mengontrol Suara .................................................................................. 158 D. Action Script Mencetak Movie Flash .......................................................................... 159 Uji Kompetensi ............................................................................................................................. 162

Bab 11 Mengolah Data Produk Multimedia Interaktif ............................................... 165 A. Pengolahan Data Adobe Flash ..................................................................................... 166 B. Action Script Pengolahan Data .................................................................................... 166 Uji Kompetensi ............................................................................................................................. 186

Bab 12 Publikasi Multimedia Interaktif ....................................................................... 189 A. Media Interaktif Sebagai Sarana Publikasi dalam Teknologi Mendatang ...... 190 B. Brosur Interaktif Berbasis Augmented Reality ........................................................ 192 C. Publikasi pada Android ................................................................................................... 194 Uji Kompetensi ............................................................................................................................. 199

Bab 13 Pembuatan Produk Multimedia Interaktif ...................................................... 203 A. Konsep Pengembangan Multimedia Interaktif ...................................................... 204 B. Pembuatan Media Interaktif .......................................................................................... 205 C. Membuat Game Berhitung ............................................................................................ 214 Uji Kompetensi ............................................................................................................................. 218

v

Bab 14 Evaluasi Produk Media Interaktif ..................................................................... 221 A. Pengertian Evaluasi Media Interaktif .......................................................................... 222 B. Penulisan Media Interaktif ............................................................................................. 224 C. Kelebihan dan Kekurangan Multimedia Interaktif ................................................ 225 D. Membuat Kuis Pilihan Ganda dengan Actionscript 2 ........................................... 225 Uji Kompetensi .............................................................................................................................. 233 Glosarium ..................................................................................................................... 237Daftar Pustaka ................................................................................................................... 241Biodata Penulis .................................................................................................................. 244Biodata Konsultan ............................................................................................................. 245Tim Kreatif.......... ................................................................................................................ 246

vi

Kata Pengantar

Puji dan syukur kami panjatkan kepada Tuhan yang Maha Esa sehingga buku-buku bahan ajar terbitan PT Kuantum Buku Sejahtera dapat tersusun untuk memenuhi kebutuhan dunia pendidikan khususnya Sekolah Menengah Kejuruan di Indonesia untuk bekal menuju dunia industri, usaha, maupun akademik. Kualitas pendidikan erat kaitannya dengan buku sebagai media pengajaran dan pembelajaran bagi pendidik untuk menyampaikan ilmu pengetahuan kepada peserta didik sebelum terjun ke dunia industri, usaha, maupun akademik. Buku berperan penting agar peserta didik mudah memahami mata pelajaran yang sedang ditempuh. Selain itu, buku merupakan salah satu faktor untuk mengoptimalkan penyampaian informasi kepada peserta didik. Peran pendidik sangat penting untuk meningkatkan dan menyesuaikan daya serap siswa dengan ketersediaan kegiatan pada buku ini yang sudah terintegrasi ke dunia usaha maupun industri. Para pendidik pun dapat lebih kreatif dalam mengajarkan ilmu yang akan disampaikan ke peserta didik. Implementasi pengajaran disesuaikan dengan kurikulum 2013 yang dirancang untuk meningkatkan kualitas peserta didik dari sisi ilmu pengetahuan dan keterampilan sesuai dengan kebutuhan dunia industri maupun dunia usaha serta penyikapan permasalahan yang akan mereka hadapi di dunia kerja. Proses penyusunan buku ini telah dikaji mendalam oleh tim ahli yang kompeten di bidangnya dan sudah terintegrasi ke dunia industri maupun dunia usaha, karena PT Kuantum Buku Sejahtera telah bekerja sama dengan banyak perusahaan untuk pengembangan ilmu pengetahuan. Namun buku ini memerlukan saran dan kritik untuk perbaikan edisi selanjutnya, sehingga dapat terus dimanfaatkan sebagai peningkatan kualitas pendidikan di Sekolah Menengah Kejuruan. Kami PT Wonokoyo Group mengucapkan terima kasih atas kerja sama berbagai pihak mulai dari penulis naskah, tim editor serta tim-tim yang berkontribusi untuk kesempurnaan isi buku. Harapan kami buku ini dapat ikut serta memajukan dunia pendidikan serta dapat membentuk generasi yang berkualitas. PT Wonokoyo Group mendukung dan bekerja sama dengan PT Kuantum Buku Sejahtera untuk memajukan pendidikan di Indonesia terutama dalam pengembangan skill di SMK Seluruh Indonesia. Semoga buku ini bermanfaat.

Malang, Februari 2020

PT Wonokoyo Group

vii

Prakata

Sungguh sebuah kebahagiaan dan rasa syukur yang mendalam bagi penulis karena dapat menyelesaikan buku ini setelah ditulis selama lebih kurang enam bulan. Buku teks utama SMK berjudul Desain Media Interaktif ditulis dan disusun sebagai bahan ajar primer untuk siswa SMK (C3) Kelas XII. Buku ini terdiri atas 13 bab yang telah disesuaikan dengan Revisi K-13. Untuk menunjang pembelajaran yang aktual, buku ini sudah menerapkan STEM (science, technology, engineering, and mathematics) serta soal-soal evaluasi berbasis HOTS. Selain itu, penerapan KIKD terbaru dirancang untuk menghadapi Revolusi Industri 4.0. Kompetensi Multimedia merupakan salah satu kompetensi dalam struktur kurikulum 2013 Tingkat SMK/MAK khususnya Bidang studi keahlian Teknik Informasi dan Komunikasi. Kompetensi Multimedia ini sangat di butuhkan seiring perkembangan teknologi Informasi. Setiap bab dalam buku ini dilengkapi dengan Kompetensi Dasar, Tujuan Pembelajaran, Aktivitas Pembelajaran Siswa, Tugas Siswa, Rangkuman, Uji Kompetensi, dan Tugas Proyek. Pembahasan materi disajikan dengan bahasa yang lugas dan mudah kita pahami, dari pembahasan secara umum ke pembahasan secara khusus. Penulis menerima dengan senang haati jika ada kritik dan saran dari pembaca atau pihak lainnya demi kemajuan teknologi informasi di Indonesia. Dengan demikian, buku ini diharapkan dapat menjadi teman sekaligus menjadi bacaan yang menyenangkan bagi Anda untuk mempelajari lebih dalam tentang Desain Media Interaktif dan menerapkannya dalam kehidupan sehari-hari untuk diri sendiri dan lingkungan. Akhirnya, semoga buku pelajaran Desain Media Interaktif SMK/MAK Kelas XII ini bermanfaat bagi siswa dan seluruh pembaca dalam memperoleh pengetahuan.

Selamat belajar, semoga sukses.

Penulis

viii

Do not Pray for an Easy life,

pray for the strength to endure a difficult one

Jangan kamu berdoa untuk hidup yang mudah,Berdoalah agar diberi kekuatan supaya dapat

menghadapi hidup yang sulit.

"Bruce Lee"

Konsep Multimedia Interaktif 1

Konsep Multimedia Interaktif

3.1 Memahami konsep multimedia interaktif berbasis halaman web dan media interaktif.4.1 Mendemontrasikan konsep multimedia interaktif berbasis halaman web dan media interaktif.

Kompetensi Dasar

1BAB

Setelah mempelajari bab ini, peserta didik mampu:1. memahami pengertian multimedia interaktif,2. memahami jenis multimedia interaktif, serta3. mengindentifikasi fungsi multimedia interaktif.

Tujuan Pembelajaran

Desain Media Interaktif2

Gambar 1.1 Foto ilustrasi multimedia interaktif

Sumber: Violet Kaipa, 2018

Anda sudah tidak asing lagi dengan penggunaan komputer dan ponsel dalam perkembangan teknologi yang semakin canggih saat ini. Kedua alat tersebut sangat memengaruhi kebiasaan manusia untuk memenuhi kebutuhan informasi setiap hari. Manusia membutuhkan informsasi dan selalu ingin mendapatkan informasi terbaru dengan cepat dari berbagai sumber.

Pada tahun 1996, multimedia dikenal dengan arti komputer dan video serta mencakup suara, gambar, animasi, dan teks di dalamnya. Multimedia dimanfaatkan dalam berbagai hal, baik itu bisnis maupun pembelajaran. Ada dua sisi dalam penggunaan multimedia. Pertama, membuat konten dan memasukkan ke dalam komputer dengan perangkat lunak dan link. Kedua, pengguna memanfaatkan multimedia sebagai alat atau sarana mencari informasi yang tak terbatas.

Melalui multimedia interaktif, pengguna (user) dapat mengontrol secara penuh mengenai apa dan kapan elemen multimedia akan ditampilkan atau dikirimkan. Contoh: game, CD interaktif, apilkasi program, virtual reality, dan lain-lain.

A. Pengertian Multimedia Interaktif

Multimedia interaktif adalah media yang menggabungkan teks, grafik, video, animasi, dan suara untuk menyampaikan suatu pesan dan informasi melalui media elektronik seperti komputer dan perangkat elektronik lainnya.Berikut ini pengertian multimedia interaktif menurut beberapa ahli.1. Menurut Robin dan Linda (seperti dikutip Benardo, 2011), multimedia interaktif

adalah alat yang dapat menciptakan persentasi yang dinamis dan interaktif yang mengombinasikan teks, grafik, animasi, audio, dan gambar video.

2. Menurut Hofstetter (seperti dikutip Benardo, 2011), multimedia interaktif adalah pemanfaatan komputer untuk membuat dan menggabungkan teks, grafik, audio, gambar bergerak (video dan animasi) dengan menggabungkan link dan tool yang memungkinkan pemakai melakukan navigasi, berinteraksi, berkreasi, dan berkomunikasi.Sebelum memahami tentang multimedia interaktif, terlebih dahulu akan dibahas

tentang multimedia. Multimedia adalah kombinasi dari teks, foto, seni grafis, suara, animasi, dan elemen-elemen video yang dimanipulasi secara digital. Ketika Anda mengizinkan pengguna akhir pemirsa dari proyek multimedia—mengontrol apa dan kapan elemen-elemen tersebut akan dikirimkan, multimedia disebut multimedia interaktif (Tay Vaughan, 2004).


Gambar 1.2 Ilustrasi multimedia interaktifSumber: Alphaspirit, 2016

Berdasarkan beberapa pengertian di atas, dapat didefinisikan bahwa multimedia interaktif adalah penggabungan antara teks, foto, seni grafis, suara, animasi, dan video serta memungkinkan pengguna untuk berinteraksi dan berkomunikasi dengan produk multimedia.

Meskipun secara pengertian, mutimedia interaktif sederhana, tetapi untuk menjalankannya sangat kompleks karena banyak yang harus dipahami. Bagian input, proses, dan output dari produk multimedia interaktif tersebut adalah bagian yang perlu dipahami sebelum menjalankannya. Bagaimana setiap elemen dibuat dan dapat dijalankan, sehingga dapat memahami keinginan dari pengguna.

Proyek multimedia merupakan peranti perangkat lunak yang berisi informasi, pengetahuan, dan hasil yang ditampilkan pada layar komputer. Adapun proyek dapat diedarkan atau dijual kepada konsumen atau pengguna akhir biasanya dalam bentuk Compact Disk (CD) atau melalui internet. Media pendistribusian produk multimedia dapat melalui CD-ROM atau website/World Wide Web.

Gambar 1.3 Multimedia elementsSumber: Daniyal, 2018

Multimedia interaktif dimanfaatkan secara luas pada kehidupan masyarakat. Multimedia Interaktif dalam bisnis, seperti aplikasi bisnis yang menerapkan multimedia interaktif adalah presentasi, demo produk, database, katalog, dan pemasaran. Multimedia Interaktif dalam bidang pendidikan/sekolah antara lain presentasi, simulasi pembelajaran, CD pembelajaran, dan pembelajaran interaktif. Multimedia interaktif dalam bidang rumah tangga antara lain tutorial memasak, mendesain rumah, dan pemodelan ulang. Adapun pemanfaatan multimedia Interaktif di tempat umum, contohnya informasi yang diletakkan di hotel, stasiun kereta api, mal perbelanjaan. Untuk sekarang ini, pemanfaatan multimedia interaktif semakin luas dengan adanya teknologi smartphone. Banyak aplikasi yang bisa Anda download di Appstore yang bisa dimanfaatan. Contoh yang paling banyak adalah aplikasi Bukalapak, aplikasi simulasi mengendarai pesawat terbang, dan sebagainya.


B. Jenis Multimedia Interaktif

Menurut Suyanto (seperti dikutip Benardo, 2011), jenis multimedia interaktif terbagi menjadi dua bagian.1. Multimedia Interaktif Online

Multimedia interaktif online adalah media interaktif yang cara penyampaiannya melalui jalur/kawat/saluran/jaringan. Contohnya, situs web, Yahoo Messengers, dan sebagainya. Jenis media ini termasuk media lini atas yang komunitas sasarannya luas dan mencakup masyarakat luas.

2. Multimedia Interaktif Offline Multimedia interaktif offline adalah media interaktif yang cara penyampainnya tidak melalui jalur/kawat/saluran/jaringan. Contohnya, CD interaktif, company profile, dan media pembeajaran. Media ini termasuk media lini bawah, karena sasarannya tidak terlalu luas dan hanya mencakup masyarakat pada daerah tertentu saja.

C. Manfaat Multimedia Interaktif

Berikut ini manfaat multimedia interaktif dalam bidang pendidikan khususnya pembelajaran. 1. Proses pembelajaran lebih menarik.2. Lebih interaktif.3. Jumlah waktu mengajar dapat dikurangi.4. Kualitas belajar dapat ditingkatkan dan proses belajar mengajar dapat dilakukan di

mana dan kapan saja serta sikap belajar siswa dapat ditingkatkan.Adapun keunggulan multimedia dalam hal pembelajaran dapat dijabarkan sebagai berikut.1. Memperbesar benda yang sangat kecil dan tidak tampak oleh mata, seperti kuman,

bakteri, elektron, dan lain-lain.2. Memperkecil benda yang sangat besar, yang tidak mungkin dihadirkan di sekolah,

seperti gajah, rumah, gunung, dan lain-lain.3. Menyajikan benda atau peristiwa yang kompleks, rumit, dan berlangsung cepat atau

lambat, seperti sistem tubuh manusia, bekerjanya suatu mesin, beredarnya Planet Mars, berkembangnya bunga, dan lain-lain.

4. Menyajikan benda atau peristiwa yang jauh, seperti bulan, bintang, salju, dan lain-lain.

5. Menyajikan benda atau peristiwa yang berbahaya, seperti letusan gunung berapi, harimau, racun, dan lain-lain.

6. Meningkatkan daya tarik dan perhatian siswa.Secara umum, manfaat multimedia interaktif dapat dijadikan untuk media:1. promosi (company profile, iklan);2. tutorial (panduan penggunaan alat);3. hiburan (game); dan lain-lain.


Gambar 1.4 Ilustrasi seseorang menggunakan virtual realitySumber: Metamorworks, 2018

Multimedia memiliki manfaat yang beragam, seperti penggunaan di bawah ini. 1. Industri Kreatif

Industri kreatif menggunakan multimedia untuk berbagai keperluan, mulai dari seni untuk hiburan maupun seni untuk komersial.

2. KomersialPresentasi yang menarik digunakan untuk menjaga perhatian dalam periklanan. Bisnis dan komunikasi seringkali dikembangkan oleh tim kreatif perusahaan untuk menawarkan atau menjual ide maupun dalam pelatihan berbentuk presentasi multimedia.

3. Hiburan dan Seni RupaSelain itu, multimedia ini berisi banyak hal yang digunakan dalam industri hiburan, khususnya untuk mengembangkan efek khusus dalam film dan animasi. Permainan populer dalam multimedia sebagaimana permainan dan program perangkat lunak yang telah tersedia baik terdistribusi dalam CD-ROM atau online. Beberapa video games mengajak pengguna untuk berpartisipasi aktif, bukan hanya duduk sebagai penerima pasif informasi.

4. Pendidikan Dalam pendidikan, multimedia digunakan untuk memproduksi pelatihan berbasis komputer dan buku referensi seperti ensiklopedia dan almanacs yang memungkinkan pengguna melalui serangkaian modul presentasi, teks tentang topik tertentu, dan gambar yang terkait dalam berbagai format informasi. Informal edutainment adalah istilah yang digunakan untuk menjelaskan penggabungan pendidikan dengan hiburan multimedia. Belajar teori dalam dekade terakhir telah berkembang dramatis karena pengenalan multimedia.

5. TeknikPerangkat lunak dapat menggunakan multimedia dalam menciptakan simulasi komputer sebagai hiburan dan pelatihan, seperti pelatihan militer dan industri. Multimedia sebagai desain antarmuka yang sering dilakukan sebagai sebuah kolaborasi antara kreativitas dan perangkat lunak.

6. PerindustrianPada sektor industri, multimedia digunakan sebagai cara untuk menyajikan informasi untuk membantu pemegang saham, rekan kerja, dan atasan. Multimedia ini juga bermanfaat untuk memberikan pelatihan karyawan, periklanan, dan penjualan produk di seluruh dunia hampir tidak terbatas melalui web berbasis teknologi.


7. Matematika dan Penelitian IlmiahDalam matematika dan penelitian ilmiah, multimedia dipakai terutama untuk modelling dan simulasi. Misalnya, seorang ilmuwan bisa melihat pada model molekular tertentu dari substansi dan memanipulasinya untuk tiba pada suatu zat baru. Perwakilan penelitian dapat ditemukan pada jurnal seperti Journal of Multimedia.

8. KesehatanDalam pengobatan, dokter dapat dilatih dengan melihat virtual operasi atau mereka dapat menyimulasikan bagaimana tubuh manusia yang terkena penyakit menular oleh virus dan bakteri kemudian mengembangkan teknik untuk mencegahnya.

9. Gambar DokumenPengambil foto copy/dokumen dan mengonversi ke dalam format digital.

D. Konsep dasar multimedia interaktif

Produk multimedia berdasarkan karakteristiknya dibagi menjadi dua kategori, yaitu multimedia linier dan multimedia interaktif/nonlinier. Multimedia linier merupakan produk multimedia yang dimulai dari awal menuju akhir dengan sedikit atau tanpa interaksi dengan pengguna, contoh: televisi, film, majalah, dan koran. Adapun multimedia interaktif/nonlinier adalah adanya kontrol dengan pengguna.

Berdasarkan definisi di atas, maka kunci utama dari multimedia interaktif adalah adanya pengguna yang bisa berinteraksi dan berkomunikasi dengan sistem secara baik. Proyek multimedia interaktif menggabungkan antara komponen-komponen multimedia dengan bahasa pemrograman, sehingga hasil yang diperoleh dapat berinteraksi dengan pengguna. Multimedia dibagi menjadi komponen-komponen multimedia. Komponen yang perlu diketahui adalah teks, foto, seni grafis, suara, animasi, dan video.

Gambar 1.5 Multimedia tool Sumber: Ra2studio, 2018

Level interaktivitas dalam pembelajaran berbasis komputer.1. Umpan balik, merupakan tingkat interaktif yang paling rendah, berkaitan dengan

tersedianya umpan balik terhadap tindakan pengguna yang telah ditentukan sebelumnya, misalnya langkah-langkah penyelesaian masalah, pertanyaan, jawaban, tombol lanjut dan lain sebagainya.

2. Manipulasi, meliputi perubahan secara real time atau transformasi informasi sebagai tanggapan atas tindakan pengguna, tingkat manipulasi menyediakan tanggapan yang fleksibel dengan bervariasi.


3. Adaptasi, meliputi tanggapan yang disesuaikan dengan kebiasaan pengguna sebelumnya secara dinamis menyesuaikan pilihan tugas pembelajaran, prosedur, dan format instruksional berdasarkan informasi tentang tindakan dan kebiasaan pengguna sebelumnya secara online.

4. Komunikasi, diwujudkan dengan lingkungan pembelajaran online dinamis yang fleksibel. Tanggapan terhadap tindakan pengguna tidak ditentukan sebelumnya.

Berikut ini model multimedia interaktif.1. Model tutorial merupakan salah satu jenis model yang memuat penjelasan,

rumus, prinsip, bagan, tabel, definisi istilah, latihan, dan percabangan yang sesuai. Percabangan di sini dibentuk untuk berpindah atau bergerak sesuai pembelajaran berdasarkan jawaban atau respon pengguna terhadap materi dan pertanyaan-pertanyaan. Tujuan dari model tutorial untuk memberikan informasi, mengevaluasi/pertanyaan-pertanyaan, dan adanya umpan balik sesuai dengan keinginan pengguna.

Gambar 1.6 Model tutorialSumber: Simonkolton, 2016

2. Model drill and practice merupakan model yang tidak memuat materi, tetapi langsung pada berlatih dan praktik sesuai dengan teori yang pernah diperoleh sebelumnya. Model ini menganggap bahwa konsep dasar telah dikuasai oleh pengguna sebelumnya dan mereka sekarang siap untuk menerapkan rumus-rumus, bekerja dengan kasus-kasus konkret, dan menjelajahi daya tangkap mereka terhadap materi. Fungsi utama untuk memberikan latihan dan praktik sebanyak mungkin terhadap kemampuan pengguna.

Gambar 1.7 Model drill and practiceSumber: Panonpoe, 2018

3. Model simulasi merupakan model yang disesuaikan dengan kenyataan sebenarnya yang dihadapi oleh pengguna dengan tujuan memperoleh pengertian global tentang proses. Simulasi digunakan untuk memperagakan sesuai dengan aslinya/


nyatanya, sehingga pengguna merasa seperti berada dalam keadaan yang sebenarnya.

Gambar 1.8 Model simulasi

Sumber: Calif, 2012

4. Model instructional games merupakan model yang berisi tentang tata cara menjalankan atau suatu prosedur menjalankan proyek multimedia interaktif. Manfaat model ini adalah untuk meningkatkan kemampuan memahami suatu prosedur. Seperti halnya simulasi, game pembelajaran, dan lain-lain.

5. Model hybrid merupakan gabungan dari dua atau lebih model multimedia interaktif. Contoh model hybrid adalah penggabungan model tutorial dengan model drill and practice dengan tujuan memperkaya kegiatan pengguna dalam memahami informasi atau pengetahuan yang disampaikan pada multimedia interaktif.

Gambar 1.9 Model hybrid

Sumber: Gorodenkoff, 2018

6. Model socratic merupakan model yang berisi percakapan atau dialog antara pengguna dengan komputer dalam natural language.

Gambar 1.10 Multimedia interaktif model socraticSumber: Simpson, 2005


7. Model inquiry merupakan suatu system sebagai pangkalan data dan dapat dikonsultasikan dengan pengguna. Pangkalan data berisi data yang dapat memperkaya pengetahuan pengguna.

Gambar 1.11 Multimedia interaktif model inquirySumber: Newpath, 2014

8. Model informational menyajikan informasi dalam bentuk data daftar atau tabel. Informational sangat dibutuhkan sebagai sumber informasi yang menuntut interaksi sedikit dari pengguna.

Gambar 1.12 Model informationalSumber: Gaudilab, 2019

E. Website Multimedia Interaktif

Konsep adalah sesuatu yang dipahami atau abstraksi suatu ide atau gambaran mental. Adapun konsep multimedia interaktif berbasis halaman web dan media interaktif adalah memahami 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, baik berbasis halaman web maupun media interaktif.

Interaksi adalah suatu fitur yang menonjol dalam multimedia dan memungkinkan terjadinya pembelajaran yang aktif (active learning). Pembelajaran yang aktif tidak saja memungkinkan pengguna melihat atau mendengar (see and hear), tetapi juga melakukan sesuatu (do). Dalam konteks multimedia, do di sini dapat berupa memberikan respon terhadap pertanyaan yang diajukan komputer atau aktif dalam simulasi yang disediakan komputer.

Multimedia berbasis web mengandung lebih dari satu jenis media, biasanya suara, video, atau animasi di samping teks dan gambar. Situs multimedia sering mengandung


unsur-unsur yang berinteraksi dengan pengguna secara langsung, mengontrol pengiriman suara atau klip video, memanipulasi objek 3D, bermain game, dan lain-lain. Komputer cepat dan koneksi internet broadband membuat multimedia berbasis web jauh lebih layak daripada pada masa lalu.

Gambar 1.13 Situs multimediasumber: Rudinur

Berikut ini keuntungan dan kerugian menggunakan web berbasis multimedia. Keuntungan:1. Dapat mengatasi berbagai gaya belajar.2. Belajar dengan sistem visual.3. Belajar secara auditori.4. Kinestetik peserta didik.5. Bahan lebih menarik dan menyenangkan.6. Banyak ide-ide lebih mudah untuk disampaikan.Kekurangan:1. Waktu dan biaya pengembangan.2. Kompatibilitas dan waktu unduh untuk multimedia berbasis web.

Sebenarnya, World Wide Web pada awal diluncurkan pada tahun 1989 didesain bukan untuk multimedia, tetapi untuk pengiriman dokumen berformat HTML dengan menambahkan gambar dan ilustasi garis. Perkembangan internet dewasa ini sudah tidak dapat dipungkiri lagi. Hal ini menuntut perkembangan multimedia interaktif untuk memberikan solusi yang kreatif sebagai penyedia layanan informasi berbasis web. Perkembangan yang cukup besar yaitu adanya elemen-elemen multimedia yang diletakkan pada World Wide Web.

Pada tahap awal, teks dan gambar merupakan penyusun utama sebuah World Wide Web dan dengan adanya tambahan interaktivitasnya. Awal interaktivitas dari sebuah web hanya sekedar link atau menghubungkan ke web lain. Namun, dengan perkembangan sekarang ini, interaktivitas web lebih dari sebuah link. Web mampu menyajikan pengolahan proses data yang kompleks. Komponen multimedia audio, animasi dan video sudah mampu diakomodasi dengan baik pada tampilan sebuah website tanpa meninggalkan sesi interaktivitasnya. Berdasarkan pernyataan tersebut maka World Wide Web merupakan multimedia interaktif yang sangat handal.

Seiring dengan perkembangan smartphone, banyaknya aplikasi yang dibuat dengan berbasis HTML 5 merupakan suatu perkembangan yang luar biasa pesat. Aplikasi multimedia interaktif berbasis HTML 5 memiliki kelebihan yang luar biasa. Kelebihan tersebut dapat diuraikan sebagai berikut.


1. Lebih mudah dikembangkan, karena bahasa pemrograman yang dipakai meruapakan bahasa pemrograman yang banyak dipakai oleh sebagian besar pengembang software.

2. Mudah di-update, karena hal ini hanya dilakukan di server pusat. Oleh karena itu, setiap user akan mendapatkan update yang sama.

3. Akses informasi lebih mudah, karena setiap user dapat mengakses informasi dengan internet dan dapat diakses di manapun dan kapanpun.

4. Lebih murah dan powerful, karena aplikasi bisa digunakan pada semua perangkat yang sudah menyertakan browser.

5. Happy platform, karena aplikasi ini bisa diakses menggunakan perangkat berbasis windows, linux, iOS, Mac OS, Blackbarry, Android, dan lainnya.

6. Bisa digunakan secara offline. Walaupun sebagian besar aplikasi web diakses dengan internet, tetapi bisa dijalankan secara offline.

Tugas Kelompok (Berbasis STEM)Sebelum mengerjakan tugas, buatlah kelompok yang terdiri atas 2−3 orang! Dalam kegiatan ini, setiap kelompok mengerjakan tugas berikut.Diskusikan dengan kelompok Anda mengenai Proyek 1 dan Proyek 2 berdasarkan instruksi di bawah ini!1. Berdasarkan penjelasan materi sebelumnya, analisislah media interaktif berbasis

halaman web dan berbasis dekstop (CD pembelajaran)! Kerjakan sesuai dengan lembar kerja di bawah ini!

Proyek 1

Situs 1

URL (alamat)Deskripsikan GUI (Graphical User Interface) atau antarmuka tampilan dari web yang diamati!1. Bagaimana layout/tata letak yang digunakan?2. Warna apa yang digunakan? 3. Apakah warna yang digunakan?4. n sesuai dengan content/isi dari web tersebut?5. Elemen navigasi apa yang dimiliki? 6. Apakah susunan navigasi yang digunakan sesuai?

Deskripsikan setiap presentasi multimedia dari content/isi yang ditampilkan!1. Apakah dapat dengan mudah mempelajari

permasalahan yang disampaikan saat menggunakan produk tersebut?

2. Konten multimedia apa saja yang gunakan?3. Apak ah content/ is i yang ditampilk an bisa

dikembangkan lagi?


Situs 2

URL (alamat)

Deskripsikan GUI (Graphical User Interface) atau antar muka tampilan dari web yang diamati!1. Bagaimana layout/tata letak yang digunakan?2. Warna apa yang digunakan? 3. Apakah warna yang digunakan sesuai dengan

content/isi dari web tersebut?4. Elemen navigasi apa yang dimiliki? 5. Apakah susunan navigasi yang digunakan sesuai?

Deskripsikan setiap presentasi multimedia dari content/isi yang ditampilkan!1. Apakah dapat dengan mudah mempelajari


2. Konten multimedia apa saja yang digunakan?3. Apak ah content/ is i yang ditampilk an bisa

dikembangkan lagi?

Proyek 2

Judul CD/ Judul Media Interaktif

Deskripsikan GUI (Graphical User Interface)/antarmuka pengguna grafis!1. Bagaimana layout/tata letak yang digunakan?2. Warna apa yang digunakan? 3. Apakah warna yang digunakan sesuai dengan


Deskripsikan content/isi. Apakah content/isi diorganisasikan dengan baik? 1. Apakah dapat dengan mudah mempelajari



dikembangkan lagi?


Judul CD

Deskripsikan GUI (Graphical User Interface)/antarmuka pengguna grafis!1. Bagaimana layout/tata letak yang digunakan?2. Warna apa yang digunakan? 3. Apakah warna yang digunakan sesuai dengan


Deskripsikan content/isi!Apakah content/isi diorganisasikan dengan baik? 1. Apakah dapat dengan mudah mempelajari



dikembangkan lagi?

2. Carilah media interaktif di sekitar Anda yang dibuat untuk memudahkan dalam mencari informasi, simulasi, maupun mengerjakan atau membantu manusia dalam pekerjaannya! Analisis tugas di atas menggunakan metode pembelajaran STEM (Science, Technology, Engineering, Mathematic) sesuai dengan lembar kerja di bawah ini! (Pendekatan STEM)

No Metode Analisis Hasil Analisis

1. Sains :- Faktual

- Konseptual

- Prosedural

2. Teknologi

3. Engineering

4. Matematika


Contoh:Website: https://shopee.co.id/

No Metode Analisis Hasil Analisis

1. Sains:a. Faktual

b. Konseptual

c. Prosedural

Web https://shopee.co.id/ memuat barang yang ditawarkan yang dibagi berdasarkan kategori barang.Web dibuat untuk memudahkan pengguna untuk berbelanja secara online.Web dibuat dengan kemudahan navigasi dalam berbelanja.

2. Teknologi Menggunakan media sosial untuk menawarkan produk selain melalui web.

3. Engineering Web didesain dengan user freindly menggunakan warna cerah dan dinamis, sehingga memberikan daya tarik.

4. Matematika Perhitungan diskon secara otomatis pada barang tertentu, sehingga memudahkan pembeli mengetahui harga barang secara langsung.

Buatlah presentasi dari hasil diskusi yang telah dilakukan!

Rangkuman

Multimedia Interaktif adalah penggabungan antara teks, foto, seni grafis, suara, animasi, dan video serta memungkinkan pengguna untuk berinteraksi dan berkomunikasi dengan produk multimedia. Kunci utama dari multimedia interaktif adalah adanya pengguna yang bisa berinteraksi dan berkomunikasi dengan sistem secara baik. Proyek multimedia interaktif menggabungkan antara komponen-komponen multimedia dengan bahasa pemrograman, sehingga hasil yang diperoleh dapat berinteraksi dengan pengguna.

Level interaktivitas dalam multimedia interaktif antara lain umpan balik, manipulasi, adaptasi, dan komunikasi. Model multimedia interaktif antara lain tutorial, drill and practice, simulasi, instructional games, hybrid, socratic, inquiry, dan informational.

World Wide Web merupakan multimedia interaktif yang memiliki keunggulan antara lain lebih mudah dikembangkan, mudah di-update, akses informasi lebih mudah, lebih murah dan powerful, happy platform, serta bisa digunakan secara offline. Konten yang membentuk sebuah multimedia interaktif antara lain teks, foto/image, seni grafis, suara, animasi, video, dan disempurnakan dengan interaktivitasnya.


Uji KompetensiA. Soal Pilihan GandaPilihlah jawaban yang paling tepat.1. Pemanfaatan komputer untuk membuat dan menggabungkan teks, gambar, suara,

video, dan animasi adalah pengertian dari ....a. multimedia interaktifb. hierarchycalc. nonlineard. multimediae. interaktif

2. Multimedia adalah kombinasi dari ....a. user, grafis, BIOS, dan suarab. teks, grafis, seni, suara, animasi, dan videoc. suara, animasi, blog, banner, dan CMOSd. natrium klorida, NaCl, H2O, dan videoe. semua benar

3. Sebuah struktur multimedia dengan pengguna bernavigasi sesuai urutan dari satu frame atau bite informasi ke yang lainnya disebut ....a. bentuk nonlinierb. bentuk vectorc. bentuk aljabard. bentuk liniere. bentuk logaritma

4. Hal yang tidak termasuk tingkat interaktif dalam pembelajaran berbasis komputer adalah ....a. umpan balikb. sudut pandangc. manipulasid. adaptasie. komunikasi

5. Struktur multimedia dengan pengguna bernavigasi secara bebas, tidak dibatasi oleh rute yang ditentukan disebut ....a. gladeb. officec. nonlinierd. drivee. user

6. Beberapa bentuk penyajian materi berikut ini yang termasuk ke dalam bentuk penyajian materi adalah ....a. umpan balikb. manipulasic. sudut pandangd. adaptasie. komunikasi


7. Multimedia yang pengguna akhir atau user dapat mengotrol apa dan dalam hal apa urutan elemen multimedia dikirimkan disebut ....a. multimedia interaktifb. multimedia programmerc. multimedia RPLd. multimedia proyeke. multimedia LDR

8. Multimedia yang penggunaan dan pemrosesannya menggunakan beberapa media (text, audio, graphics, animation, video, dan interactivity) disebut ....a. multimedia content productionb. multimedia ponten nalurisationc. multimedia communicationd. mutlimedia art basice. multimedia shut down

9. Mode tutorial adalah salah satu jenis model pembelajaran yang terdiri dari ....a. penjelasan, rumus, prinsipb. bagan, definisi, contohc. istilah, penjelasan, manipulasid. latihan, umpan balik, rumuse. tabel, rumus, latihan

10. Cara kerja drill and prartice adalah ....a. Terdiri dari tampilan dan sebuah pertanyaan atau masalah, menerima respon

dari pengguna, periksa jawaban, dan dilanjutkan dengan pertanyaan lainnya berdasarkan kebenaran jawaban.

b. Pada pembelajaran yang membahayakan, sulit, atau perlu biaya tinggi.c. Memperagakan sesuatu (ketrampilan), sehingga pengguna merasa seperti

berada dalam keadaan yang sebenarnya.d. Menggabungkan dua atau lebih model multimedia.e. Menjelaskan materi tertentu, komputer menyampaikan materi, mengerjakan

pertanyaan, dan memberi umpan balik sesuai dengan jawaban pengguna.11. Contoh model hygrid adalah ....

a. Melatih pilot pesawat terbang atau pesawat tempur.b. Penggabungan model tutorial dengan model drill and practice.c. Bentuk gambar yang diarsipkan.d. Penulisan story board.e. Simbol dalam bentuk yang menarik.

12. Perhatikan gambar di bawah ini!


Gambar di atas menunjukan gambar ....a. diagram multimedia interaktif hierarchicalb. multimedia interaktif model tutorialc. drill and practiced. multimedia interaktif model simulasie. diagram multimedia interaktif nonlinear

13. Isi dari model socratic adalah ....a. percakapan atau dialog antara pengguna dengan komputer dalam natural

languageb. memberi praktik dalam programc. berisi data yang dapat memperkaya pengetahuan penggunad. menuntut interaksi yang sedikit dari penggunae. menyajikan informasi

14. Sebelum membuat story board, disarankan untuk membuat cakupan story board dalam bentuk ....a. file zipb. rincian atau naskahc. txtd. rare. gambar

15. Story board yang baik harus menyajikan informasi yang dibutuhkan oleh pelaksana produksi. Hal yang tidak termasuk ke dalam informasi tersebut adalah ....a. narasib. audioc. videod. filme. animasi

B. Soal EsaiJawablah dengan tepat dan benar.1. Media yang menggabungkan teks, grafik, video, animasi, dan suara untuk

menyampaikan suatu pesan dan informasi melalui media elektronik seperti komputer dan perangkat elektronik lainnya, merupakan pengertian dari ....

2. Dengan multimedia interaktif, pengguna/user dapat mengontrol secara penuh mengenai apa dan kapan elemen multimedia akan ditampilkan atau dikirimkan, contohnya ....

3. Kombinasi dari teks, foto, seni grafis, suara, animasi, dan elemen-elemen video yang dimanipulasi secara digital disebut ....

4. Multimedia yang menggunakan media massa, seperti televisi, radio, cetak, dan internet untuk memublikasikan/menyiarkan/mengomunikasikan material advertising, publicity, entertainment, news, education disebut ....

5. Multimedia yang menggunakan multimedia untuk berbagai keperluan, seni, hiburan, seni komersial disebut ....

6. Suatu bentuk komunikasi visual yang menggunakan teks dan gambar untuk menyampaikan informasi atau pesan disebut ....


7. Suatu sistem sebagai pangkalan data dan dapat dikonsultasikan dengan pengguna, pangkalan data berisi data yang dapat memperkaya pengetahuan pengguna merupakan multimedia interaktif model ….

8. Secara etimologi, multimedia diartikan sebagai persekutuan alat dengan informasi disimpan, dipresentasikan, dan diterima. Pengertian tersebut merupakan pengertian multimedia menurut ....

9. Format file hasil kerja multimedia yang menggunakan program grafis atau program gambar akan tersimpan dalam bentuk ....

10. Untuk mengabadikan karya multimedia, konten harus disimpan dengan media tertentu agar karya tersebut bisa awet dan tahan lama. Salah satu contoh media penyimpanan tersebut adalah ....

C. Soal Esai UraianJawablah dengan ringkas dan benar.1. Jelaskan yang dimaksud dengan multimedia interaktif!2. Apakah manfaat multimedia dalam kehidupan sehari-hari?3. Apa perbedaan multimedia linear dan multimedia interaktif? Sertakan contoh!4. Berilah alasan bahwa website termasuk dalam multimedia interaktif! (HOTS)5. Aplikasi simulasi menerbangkan pesawat terbang termasuk dalam multimedia

interaktif. Komponen multimedia apa saja yang menyusun aplikasi tersebut dan mengapa disebut sebagai multimedia interaktif? (HOTS)

(C3) KELAS XII€¦ · Buku teks utama SMK berjudul Desain Media Interaktif ditulis dan disusun...

Documents

Transcript of (C3) KELAS XII€¦ · Buku teks utama SMK berjudul Desain Media Interaktif ditulis dan disusun...