SMKN-1 PULAU HANAUT

OLEH

ORYZA DEWI AROFAH, S.Pd

3.2 Memahami Konsep Desain Perancangan Alur Multimedia Interaktif Berbasis
Halaman Web dan Media Interaktif

4.2 Menerapkan Konsep Desain Perancangan Alur Multimedia Interaktif

Berbasis Halaman Web dan Media Interaktif

Setelah mempelajari bab ini, siswa diharapkan mampu:

1. Memahami pengertian Flowchart multimedia interaktif
2. Memahami storyboard multimedia interaktif; serta
3. Mengindentifikasi format storyboard dan komponen
A. Flowchart Multimedia Interaktif

Flowchart adalah bagian-bagian yang memiliki arus, yang menggambarkan langkah-langkah

penyelesaian suatu masalah (Wilden Kusuf, 2013). Dari flowchat anda dapat menggambar alir
proses dari suatu sistem yang akan dibuat.

Untuk multimedia interaktif, flowchat menggambarkan secara langsung alur dari proyek
yang dibuat. Mulai dari awal program, input, proses, output, dilanjutkan dengan keluar dari
program.

STAR/ AWAL PROGRAM

INPUT

PROSES

OUTPUT

END/ KELUAR

Tujuannya adalah

 Menggambarkan suatu tahapan penyelesaian masalah

 Secara sederhana, terurai, rapi dan jelas
 Menggunakan symbol-simbol standar

Pedoman dalam membuat Flowchart

1. Flowchart dari halaman atas ke bawah dan dari kiri ke kanan

2. Aktivitas yang digambarkan harus didefinisikan secara hati-hati dan definisi ini harus
dapat dimengerti oleh pembaca
3. Kapan aktivitas dimulai dan berakhir harus ditentukan secara jelas
4. Setiap langkah dan aktivitas harus diuraikan menggunakan deskripsi kata kerja, misalnya
MENGHITUNG LUAS LINGKARAN
5. Setiap langkah dan aktivitas harus berada pada urutan yang benar
6. Lingkup dan range dari aktivitas yang sedang digambarkan harus ditelusuri dengan hati-
hati
7. Gunakan symbol-simbol flowchart yang standar.

Symbol-simbol Flowchart

 Flow direction symbols

Digunakan untuk menggabungkan symbol satu dengan yang lain, disebut juga
connecting line
 Processing symbols
Menunjukan jenis operasi pengolahan dalam suatu proses prosedur
 Input / Output symbols
Menunjukan jenis peralatan yang digunakan sebagai media input atau output.
 Symbol arus/ flow
Menyatakan jalannya arus suatu proses

 Symbol communication link

Menyatakan transmisi data dari satu lokasi ke lokasi lain
 Symbol connector
Menyatakan sambungan dari proses ke proses lainnya dalam halaman yang
sama
 Symbol offline connectir
Menyatakan sambungan dari proses ke proses lainnya dalam halaman yang
berbeda
 Symbol process
Menyatakan suatu tindakan ( proses) yang dilakukan oleh komputer
 Symbol manual
Menyatakan suatu tindakan (proses) yang tidak dilakukan oleh computer
 Symbol decision
Menunjukan suatu kondisi tertentu yang akan menghasilkan dua
kemungkinan jawaban: ya / tidak
 Symbol predefined proses
Menyatakan menyediakan tempat penyimpanan suatu pengolahan untuk
memberi harga awal
 Symbol terminal
Menyatakan permulaan atau akhir suatu program

 Symbol keying operation

Menyatakan segala jenis operasi yang diproses dengan menggunakan suatu
mesin yang menpunyai keyboard
 Symbol offline-storage
Menunjukan bahwa data dalam symbol ini akan disampaikan ke suatu media
tertentu
 Symbol manual input
Memasukan data secara manual dengan menggunakan online kayboard
 Symbol input/ output
Menyatakan proses input atau output tanpa tergantung jenis peralatannya
 Symbol punched crad
Menyatakan input berasal dari kartu atau output ditulis di kartu
 Symbol magnetic tape
Menyatakan input berasal dari pita magnetis atau output disimpan ke pita
magnetis
 Symbol disk storage
Menyatakan input berasal dari disk atau output disimpan di disk
 Symbol document
Mencetak keluaran dalam bentuk dokumen (melalui printer)
 Symbol display
 Mencetak keluaran dalam layar monitor

Penerapan materi flowchart di atas untuk program multimedia interaktif model tutorial seperti
dibawah ini

Gambar flowchart di atas akan sangat membantu dalam menentukan navigasi dari proyek
multimedia interaktif yang dibuat. Proyek multimedia tidak lebih dari susunan teks, grafik, suara
animasi, dan elemen video sehingga menghasilkan produk yang sesuai dengan pesan yang ingin
disampaikan. Pemetaan struktur proyek harus dimulai dari awal hingga akhir yang
menggambarkan koneksi atau hubungan sehingga menciptakan pengorganisasian isi dan pesan.
Pada navigasi atau site map akan menggambarkan daftar isi dan bagan logis antar muka
interaktif.

Pada halaman web, site map umumnya merupakan daftar isi dengan tingkatan yang sederhana
dan setiap heading terhubung kesebuah halaman web utama. Site map sangat berguna untuk
proyek multimedia interaktif karena berupa daftar isi yang menjelaskan hal yang akan terjadi
ketika pengguna berinteraksi. Berikut ini struktur navigasi proyek multimedia.

1. Linier
Navigasi dilakukan secara berurutan, sehingga pengguna melakukannya satu per satu
secara berurutan. Jika suatu halaman di klik maka akan muncul halaman selanjutnya,
begitu seterusnya.
2. Hierarki
Navigasi cabang pohon yang merupakan linier dengan percabangan

3. Nonlinier
Navigasi yang dilakukan secara bebas tanpa melalui jalur yang telah ditentukan.
Pengguna dapat bergerak bebas tanpa ada pembatasan.

4. Komposit
Navigasi ini dapat bergerak bebas (nonlinier), tetapi terkadang ada pembatasan navigasi.

Peta navigasi umumnya menggunakanstruktur nonlinier. Dalam navigasinya, pengguna

diberi kebebasan untuk melompat dari satu halaman kehalaman yang lain dan dari satu
menu ke menu yang lain. Hal ini tidak masalah, tetapi penting juga jika pengguna
diberikan petunjuk yang konsisten dengan kepentingan, tekanan dan arah terhadapproduk
multimedia.
B. Storyboard Multimedia Interaktif
Storyboard adalah diskripsi visual (sketsa) dan tekstual, yang menggambarkan
bagaimana suatu multimedia disusun, dapat berbentuk gambar yang sangat detail, tetapi
bisa juga berbentuk seketsa sederhana. Tidak diperlukan keahlian menggambar untuk
membuat storyboard. Adapun storyboard multimedia interaktif adalah storyboard yang
digunakan untuk merancang multimedia interaktif. Storyboard multimedia interaktif
harus dapat mempresentasikan teks, audio, grafik, animasi, video dan aspek interaktif.
Fungsi storyboard multimedia interaktif adalah
1. Untuk memperjelas flowchart
2. Sebagai pedoman atau acuan animator, programmer, narrator dan tim yang lain
3. Merupakan dokumen tertulis
4. Bahan pembuatan manual book/ petunjuk penggunaan.
Berikut ini ketentuan storyboard multimedia interaktif
1. Gambar yang disiapkan disertai dengan penjelasan dan navigasi
2. Pembuatan storyboard diawali dengan gambar visual
3. Navigasi digunakan untuk melengkapi hal sulit yang tidak bisa diwakili dengan
bentuk visual
4. Bahasa lisan yang digunakan terutama yang dibaca oleh narrator
5. Menggunakan struktur kalimat yang sederhana
6. Menggunakan symbol yang sederhana dan mudah dipahami oleh semua orang
7. Menggunakan gambar dalam bentuk yang menarik serta komposisi yang tepat dan
mudah dipahami.

Storyboard

Tampilan menu utama berisi tombol pada menu bar:

1. Home,
2. Tujuan
3. Materi
4. Video
5. Evaluasi
6. Propil
Tombol navigasi pendukung berisi:
1. Tombol exit, dan
2. Tombol petunjuk

Tampilan menu materi dengan sub menu:

1. Konsep dasar
2. Segitiga exposure
3. Iso
4. Speed
5. Diafragma dan
6. Mengoprasikan

Hasil setelah render

C. Format Storyboard dan Komponen

Format storyboard multimedia interaktif antar lain kartu, double column, dan landscape.
Visual berisi gambar berbentuk foto atau grafis
Format Storyboard jenis landscape-2

Berikut ini komponen-komponen penyusun storyboard interaktif:

1. Sketsa atau gambaran layar, halaman, atau frame

2. Warna, penempataan dan ukuran grafik jika perlu
3. Teks asli jika ditampilkan pada halaman atau layar
4. Warna, ukuran, dan tipe fort 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, dan
10. Hal-hal yang perlu diketahui oleh satf produksi

D. Template Storyboard
Di bawah ini adalah contoh storyboard multimedia interaktif model kartu
 Berikut hasil storyboard multimedia interaktif di atas

Template Multimedia Interaktif

Flowchat adalah bagian-bagian yang mempunyai arus yang menggambarkan langkah-langkah

penyelesaian suatu maslah. Site map sangat berguna bagi proyek multimedia interaktif karena
berupa daftar isi dan menjelaskan apa yang akan terjadi jika pengguna berinteraksi. Struktur
navigasi proyek multimedia antara lain linier, hierarki, nonlinier, dan komposit.

Storyboard atau disebut juga kerangka grafis digunakan untuk mendiskripsikan proyek multimedia
interaktif dengan detail menggunakan kata-kata dan sketsa untuk setiap tampilan layar, suara,
pilihan navigasi, pilihan warna dan gradasi yang tepat, isi teks, atribut dan font, bentuk tombol,
style, serta umpan balik/respon. Komponen-komponen penyusun storyboard interaktif antara lain
sketsa atau gambar layar, warna, teks, narasi, animasi, video, audio, dan interaksi dengan pengguna
A. Soal Pilihan Ganda
Pilihan Jababan yang paling tepat.

1. Komponen data flow diagram terdiri dari…

a. Eksternal entity
b. Proses
c. Data store
d. Arus data
e. Semua benar
2. Proses dalam diagram arus data menggambarkan…
a. Bagian dari sistem yang mentransformasikan masukan menjadi keluaran
b. Sarana untuk menyimpan data
c. Merepresentasikan exsternal entity
d. Perpindahan data dari suatu bagian ke bagian lain dalam suatu sistem
e. Tidak ada jawaban yang benar
3. Sebelum membuat storyboard, disarankan membuat cakupan storyboard dalam bentuk…
a. File zip
b. Rincian atau naskah
c. Txt
d. Rar
e. Gambar
4. Storyboard yang baik harus menyajikan informasi yan dibutuhkan oleh pelaksanaan produksi,
hal yang tidak termasuk ke dalam pelaksanaan produksi tersebut adalah….
a. Narasi
b. Audio
c. Video
d. Film
e. Animasi
5. Perhatikan gambar di bawah ini!

Gambar di atas menunjukan storyboard jenis…

a. Double column
b. Kartu
c. Landscape
d. Poster
e. Leaflet
6. Kesalahan yang dapat terjadi pada Diagram Arus Data (DAD) antara lain black hole. Black hole
adalah…
a. Proses mempunyai input, tetapi tidak menghasilkan output
b. Proses mempunyai input, tetapi menghasilkan output
c. Proses tidak mempunyai input atau tidak mempunyai output
d. Jawaban a dan b benar
e. Jawaban a, b, dan c benar
7. Berikut ini yang termasuk metode pembahasan adalah…
a. Optimasi keputusan
b. Tim kerja
c. Proposal
d. Penyediaan bahan
e. Semua jawaban benar
8. Perencanaan merupakan spesifikasi dari tujuan perusahan yang ingin dicapai serta cara-cara
yang akan ditempuh untuk mencapai tujuan tersebut. Definisi tersebut berasal dari…
a. Gitosudarmo dan Mulyono
b. Habib dan Safroni
c. Soekarno
d. B.J. Habibie
e. Albert Enstein
9. Pemilihan atau penetapan tujuan-tujuan organisasi dan penentuan strategi, kebijaksanaan,
proyek, program, prosedur, metode, sistem, anggaran, dan standar yang dibutuhkan dalam
mencapai tujuan adalah pengertian dari…
a. Storyboard
b. Planning
c. Praproduksi
d. Produksi
e. Postproduksi
10. Bidang fungsional mencakup hal berikut ini, kecuali…..
a. Produksi
b. Rencana produksi
c. Pemasaran
d. Keuangan
e. Personalia
11. Karakteristik-karakteristik (sifat) rencana meliputi factor-faktor berikut ini, kecuali…
a. Kompleksitas
b. Fleksibel
c. Keformalan
d. Biaya
e. Makanan
 12. Waktu menyangkut rencana….
a. Jangka pendek
b. Jangka sorong
c. Jajar genjang
d. Jam
e. Keuangan
13. Berikut ini yang termasuk salah satu unsur rencana adalah….
a. Waktu anggaran
b. Waktu tidur
c. Waktu makan
d. Waktu istirahat
e. Waktu anggaran
14. Penetuan tujuan yang menyeluruh atau keseluruhan dan menyangkut jaka panjang atau
organisasi tersebut sebagai keseluruhan atau totalitas, merukana pengertian dari…
a. Global plan
b. Postproduksi
c. Produksi
d. Storyboard
e. Semua benar
15. Usaha untuk menyusun dan memilih urutan kegiatan yang akan dicapai terlebih dahulu dan
kegiatan yang akan dilakuan kemudahan, merupakan pengertian dari…
a. Produksi
b. Arti strategi
c. Global plan
d. Storyboard
e. Semuanya benar

B. Soal Esai
Jawablah dengan tepat dan benar.
1. Fungsi essternal entity suatu DFD adalah…
2. Fungsi data store suatu DFD adalah….
3. Kesalahan yang dapat terjadi pada Diagram Arus Data (DAD) antara lain black hole. Black hole
adalah….
4. Tingkatan diagram yang merupakan level tertinggi pada DFD yakni…
5. Symbol yang bertugas mengirimkan data / informasi dari source ke sink atau dari sink ke source
adalah symbol…..
6. Yang bertugas mengolah data/ informasi adalah….
7. Pengertian storyboard secara global adalah…..
8. Daftar gambar dari setiap adegan yang divisualisasikan dalam bentuk sketsa atau gambar
disebut….
9. Dua macam format yang digunakan dalam membuat storyboard yaitu
10. Ide cerita dalam pembuatan stop motion berguna untuk….