Bab 2 Merancang Desain Alur Multimedia Interaktif untuk kelas XII MM

1. Desain
Multimedia
Interaktif

2. BAB II
Merancang Desain Alur Multimedia Interaktif

3. Peta
Konsep
Storyboard Multimedia Interaktif
02
Komponen dan Format
Storyboard
03
Cara Membuat dan Contoh
Storyboard
04
Flowchart Multimedia Interaktif
01

4. Flowchart Multimedia Interaktif
Definisi
Flowchart
Fungsi flowchart adalah digunakan untuk
menganalisa, mendesain, mendokumentasikan dan
memanajemen sebuah proses atau program di
berbagai bidang. Secara khusus, flowchart berfungsi
untuk membantu menggambarkan situasi apa yang
sedang terjadi dan yang akan terjadi dari sebuah
simbol dan tanda penghubungnya. Selain itu,
flowchart ini mampu memperjelas sebuah alur dari
suatu sistem baik itu kekurangan atau kelebihan dari
berbagai proses di dalam tahapan suatu sistem.
Flowchart bertujuan untuk :
•Menggambarkan urutan atau tahapan dari penyelesaian
masalah
•Menggambarkan permasalahan secara sederhana,
terurai, rapi dan jelas
Flowchart membantu analis dan programmer untuk
memecahkan masalah ke dalam bagian-bagian yang lebih
kecil dan menolong dalam menganalisis alternatif-alternatif
lain dalam pengoperasian. Flowchart mempermudah
penyelesaian suatu masalah khususnya masalah yang
perlu dipelajari dan dievaluasi lebih lanjut.
Teknik perancangan flowchart tidak dapat dilakukan secara sembarangan, melainkan telah diatur
secara khusus sebagai berikut :
 Penyusunan flowchart diawali dari pojok kiri atas layar
 Setiap proses harus memiliki input dan output
 Simbol harus selalu disesuaikan dengan jenis flowchart-nya
 Bila ada garis alur yang berpotongan, gunakanlah symbol koneksi guna menghindari kekusutan.
 Setiap symbol harus diberikan deskripsi agar lebih jelas.
Flowchart adalah bagan atau gambar yang menunjukan urutan dan
hubungan antara suatu proses dengan proses lain.
Flowchart Multimedia Interaktif
01

5. Simbol
Flowchart
Dan contohnya
Hakikat flowchart atau bagan alur adalah suatu
bagan yang berisi simbol-simbol grafis yang
menunjukan arah aliran kegiatan dan data-
data yang dimiliki program sebagai suatu
proses eksekusi.
Simbol dan contoh flowchart
Contoh flowchart
Simbol flowchart
Flowchart Multimedia Interaktif
01

6. Jenis-Jenis Flowchart
01 System Flowchart
02 Document
Flowchart
03 Schematic
Flowchart
04 Program
Flowchart
05 Process
Flowchart
Flowchart sistem adalah
bagan yang
menampilkan tahapan
kerja atau proses yang
sedang berlangsung di
dalam sistem secara
menyeluruh dan
menguraikan urutan dari
setiap prosedur yang
berada di dalam system.
Oleh karena itu,
flowchart ini disebut
sebagai gambaran
grafik urutan prosedur
yang berkombinasi
dalam membentuk
suatu sistem.
Flowchart Sistem
Flowchart dokumen
adalah bagan yang
menampilkan arus dari
laporan serta formulir
berikut tembusan –
tembusannya dengan
memakai simbol –
simbol seperti pada
flowchart sistem.
Flowchart Dokumen
Flowchart skematic adalah
bagan yang menampilkan alur
prosedur suatu sistem sama
dengan flowchart sistem.
Namun, ada perbedaan dalam
penggunaan simbol – simbol
dalam menggambarkan alur.
Selain menggunakan simbol –
simbol yang ada pada flowchart
sistem, flowchart skematik juga
menggunakan gambar –
gambar komputer berserta
peralatan lainnya guna
mempermudah dalam
pembacaan flowchart kepada
orang yang kurang paham.
Flowchart Skematik
Flowchart program atau
diagram alir program
adalah bagan yang terbuat
dari derivikasi flowchart
system yang isinya
menjelaskan secara rinci
tahapan dan langkah –
langkah dari sebuah proses
program. Diagram alir ini
terdiri dari 2 macam yakni
diagram alir logika
program dan diagram alir
program komputer terinci.
Flowchart Program
Flowchart Proses adalah
cara penggambaran
rekayasa industrial dengan
merinci dan menganalisis
tahapan langkah – langkah
selanjutnya dalam suatu
prosedur atau sistem.
Penggunaan flowchart ini
lebih efektif dipakai untuk
menelusuri alur suatu
laporan atau form secara
prosedural.
Flowchart Proses
Flowchart Multimedia Interaktif
01

7. Struktur Navigasi Multimedia
Merupakan struktur yang hanya mempunyai satu
rangkaian cerita berurut. Tampilan yang dapat
ditampilkan pada struktur jenis ini adalah satu
halaman sebelumnya atau satu halaman
sesudahnya tidak dapat dua halaman
sebelumnya atau dua halaman sesudahnya.
Biasanya struktur ini digunakan Multimedia
Presentasi karena tidak menuntut keinteraksian
tetapi hanya memerlukan keindahan dan
kemudahan menampilkan data sebagai informasi.
FLOWCHART
Struktur navigasi non linear ( tidak berurut )
merupakan pengembangan dari struktur
navigasi linear. Pada struktur ini
diperkenankan membuat navigasi
bercabang. Percabangan yang dibuat pada
struktur linear ini berbeda dengan
percabangan pada struktur hierarki, karena
pada percabangan non linear ini walaupun
terdapat percabangan, tetapi tiap-tiap
tampilan mempunyai kedudukan yang sama
tidak ada master page dan slave page.
Struktur navigasi hierarchi ( bercabang )
merupakan suatu struktur yang
mengandalkan percabangan untuk
menampilkan informasi yang berdasarkan
criteria tertentu. Informasi pada halaman
utama disebut parent dan informasi pada
cabangnya disebut child.
Struktur navigasi ini merupakan struktur
navigasi yang paling kompleks karena
menggabungkan ketiga struktur sebelumnya.
Struktur ini sering disebut sebagai struktur
navigasi bebas. Meskipun lebih lengkap,
struktur ini memiliki kelebihan dan
kekurangan tersendiri. Kelebihannya adalah
aplikasi mampu memberikan keterkaaitan
informasi yang lebih baik, tapi
kekurangannya menjadi lebih rumit saat
pembuatannya.
Flowchart Multimedia Interaktif
01

8. Contoh Struktur Navigasi Multimedia
Struktur
Nonlinear
Struktur Linear
Struktur
Hierarchical
Struktur
Composite
Struktur Nonlinear
Flowchart Multimedia Interaktif
01

9. Storyboard Multimedia Interaktif
Storyboard adalah sketsa gambar yang di susun sesuai
dengan naskah. Dengan storyboard kita dapat menyampaikan
ide cerita kita kepada orang lain dengan lebih mudah.
Karena,kita dapat mengiring khayalan seseorang mengikuti
gambar gambar yang tersaji, sehingga menghasilkan persepsi
yang sama pada ide cerita kita.
Berbeda dengan storyboard untuk produk multimedia lainnya
seperti film, storyboard produk multimedia berbasis web harus
disesuaikan navigasi dari web tersebut. Struktur navigasi pada
suatu web merupakan tahapan alur informasi dari aplikasi
multimedia.
Tujuan Storyboard antara lain :
• Sebagai alat untuk memandu beberapa orang yang terlibat dalam
produksi film / video pendek, seperti sutradara, aktor / aktris,
kameramen, bagian lighting, dan lain sebagainya.
• Membantu seorang pembuat film dalam memvisualisasikan ide /
gagasan yang ia miliki.
• Sebagai alat untuk menyampaikan / menceritakan ide film kepada
orang lain.
• Menjelaskan alur kejadian yang terdapat dalam suatu cerita.
• Membantu pembuat cerita dalam penentuan timing yang tepat.
Pembuat cerita jadi bisa membayangkan bagaimana frame yang
akan terbentuk, bagaimana sudut pandang kamera, serta
bagaimana kesinambungan antara elemen-elemen yang ada
pada suatu frame.
Fungsi storyboard adalah sebagai media konsep dan
ungkapan yang kreatif dalam penyampaian ide atau gagasan.
Pada storyboard juga seseorang bisa menambahkan arahan-
arahan seperti arahan audio, letak atau arahan informasi lainnya.
Terdapat beberapa fungsi dari storyboard, antara lain:
• Dalam pembuatan sebuah film, storyboard bermanfaat untuk
menggambarkan alur cerita menurut garis besarya saja dari
bagian awal, tengah dan akhir.
• Kemudian berguna sebagai pembuat perencanaan di suatu film.
• Dan secara keseluruhan bisa membuat mudah dalam
pembuatan dan pemahaman alur film. Sekarang ini storyboard
juga bermanfaat dalam pembuatan sebuah game, seperti
membuat sketsa alur game tersebut dari awal sampai selesa
Manfaat Storyboard antara lain :
• Mempermudah dan mempercepat dalam pembuatan suatu
film (baik itu film pendek atau film animasi), video pendek,
dan lain sebagainya.
• Bisa dipakai untuk mempermudah orang lain dalam
memahami jalan cerita.
• Bisa dipakai untuk mengingatkan animator tentang alur yang
terdapat dalam suatu cerita.
• Menunjukkan segi artistik dari suatu film / video pendek.
• Memperlihatkan tata letak visual dari sebuah adegan,
misalnya bagaimana tata letak adegan utama dari sudut
pandang lensa kamera.
01
03
02
04
Storyboard Multimedia Interaktif
02

10. Penggunaan Storyboard
Film
Animasi Komik Bisnis Media Interaktif
Dalam dunia perfilman, storyboard
juga dikenal dengan shooting board.
Pengertian storyboard dalam
perfilman berarti sekumpulan gambar
yang berisi kejadian di dalam film.
Bentuk storyboard dalam film ini bisa
dibilang komik khusus yang bisa
dipelajari sebelum proses produksi
dilaksanakan.
Keuntungan storyboard dalam film
sangat banyak. Ini membantu para
director, klien yang berkecimpung
diperiklanan, cinematographer dan
lainnya dalam menemukan
kelemahan yang mungkin akan
muncul. Tidak hanya itu, storyboard
akan membantu mereka dalam
mencari gambaran biaya produksi
dan waktu yang diperlukan.
Dalam animasi dan efek khusus
bekerja, tahap storyboard
mungkin akan diikuti oleh
disederhanakan mock-up yang
disebut “animatics” untuk
memberikan ide yang lebih baik
tentang bagaimana adegan itu
akan terlihat dan merasa
dengan gerak dan waktu.
Animatic adalah tahap sebelum
terciptanya animasi. Gerakan
yang masih "staging" dan yang
pasti belum "sempurna". Bisa
juga dikatakan sebagai
storyboard dan untuk
mengetahui pewaktuan secara
realtime.
Pada intinya, animatic
merupakan pergerakan dari
storyboard, storyboard
menunjukkan berapa detik dari
tiap scene. kemudian gambar
animatic disusun di software
editing video, untuk hasil lebih
bagus dapat diberi dubbing
suara supaya lebih bagus tiap
detiknya.
Beberapa penulis telah
menggunakan jenis gambar
storyboard (meskipun agak
samar) untuk scripting buku
komik mereka, sering
menunjukkan pementasan
tokoh, latar belakang dan
penempatan balon dengan
instruksi untuk seniman yang
diperlukan sering ditulis dalam
bentuk margin dan dialog /
keterangan ditunjukkan. John
Stanley dan Carl Barks (ketika
ia menulis cerita untuk SMP
Woodchuck judul) diketahui
telah menggunakan gaya
scripting.
Storyboard yang digunakan
saat ini oleh industri untuk
perencanaan kampanye iklan,
iklan, sebuah usulan atau
presentasi bisnis lain yang
dimaksudkan untuk meyakinkan
atau memaksa untuk bertindak.
Perusahaan konsultan
mengajarkan teknik untuk staf
mereka untuk menggunakan
selama pengembangan
presentasi klien, sering
mempekerjakan “teknik kertas
coklat” dari merekam mock-up
slide presentasi dengan
sepotong besar kertas kraft
yang dapat digulung untuk
transportasi mudah. Storyboard
awal dapat yang sederhana
seperti judul slide pada Post-It
catatan, yang kemudian diganti
dengan slide presentasi
rancangan sebagaimana
mereka diciptakan.
Storyboard media interaktif
dapat digunakan dalam
antarmuka grafik pengguna
untuk rancangan rencana
desain sebuah website atau
proyek interaktif sebagaimana
alat visual untuk perencanaan
isi.
Storyboard visualisasi ide dari
aplikasi yang akan dibangun,
sehingga dapat memberikan
gambaran dari aplikasi yang
akan dihasilkan. Storyboard
dapat dikatakan juga visual
script yang akan dijadikan
outline dari sebuah proyek,
ditampilkan shot by shot yang
biasa disebut dengan istilah
scene.
keuntungan menggunakan
Storyboard adalah dapat
membuat pengguna untuk
mengalami perubahan dalam
alur cerita untuk memicu reaksi
atau ketertarikan yang lebih
dalam. Kilas balik, secara cepat
menjadi hasil dari pengaturan
Storyboard secara kronologis
untuk membangun rasa
penasaran dan ketertarikan.
Storyboard Multimedia Interaktif
02

11. Dalam setiap
adegan
terdapat :
Penulisan storyboard tidak bisa terlepas dari penulisan storyline karena
keduanya saling mendukug satu sama lain. Setiap potongan gambar
adalah bentuk kasar dari sebuah adegan.
• Bentuk adegan/potongan-potongan gambar sketsa
• Bentuk (alurcerita) untuk memperjelas gambar sketsa
• Bentuk dramatisasi (adegan yang berisi tentang adegan karakter
tertentu)
Berisi tentang Judul, Episode,
Scene, dan Halaman
Bagian Judul
berisi tentang uraian audio yang
akan melengkapi berupa nama dari
file musik atau rekaman, dan atau
efek suara(SFX) yang akan
bermain dilayar masing-masing.
Bagian Audio
Berisi tentang Penjelasan Takeshot,
Panel, Squence, Lokasi, dan
Setting Waktu
Bagian Sub Judul
berisi detil action dan pergerakan
kamera (framing, angle) serta
dialog adegan (jika ada)
Bagian Dialog/Action
Berisi tentang Gambaran adegan
dengan menyisipkan visual atau
foto, grafis, dll. Anda juga dapat
mencakup teks yang akan
ditampilkan di layar, atau Anda
dapat membuat bagian lain untuk
teks.
Bagian Visual
berisi tentang penjelasan artistic,
property, wardrobe, dan Timing/
durasi.
Bagian Properties
Komponen
Storyboard
Komponen dan Format Storyboard
03

12. Format
Storyboard
dalam Media
Interaktif
NO Berisi Nomor frame (satu tampilan di layar monitor)
KETERANGAN Berisi Keterangan keterangan yang
menunjukan posisi frame cotoh misalnya seperti : menu, sub
menu, uraian menu, dll
VISUAL Berisi semua unsur yang divisualkan meliputi teks,
animasi, video, gambar, dll
AUDIO Berisi semua unsur yang audio, meliputi narasi, musik,
sound effect, dll
Ket:
Storyboard Model
Kartu
Storyboard
Jenis
Landscape
Storyboard Double Coloum
Komponen dan Format Storyboard
03

13. Cara Membuat
Storyboard
1. Pertama, buat rincian naskah.
2. Selanjutnya, buat catatan mengenai point-point
penting diantaranya yaitu ide dan konsep yang akan
dijadikan storyboard.
3. Kemudian, tentukan media yang nantinya dijadikan
storyboard. Ini bisa dalam bentuk gambar manual atau
aplikasi komputer
4. Buat gambar sketsa kasar tentang alur cerita dalam
storyboard, lengkapi dengan penjelasan dan keterangan
dalam pembuatan video/film.
5. Setelah itu, visualisasikan adegan utama secara
nyata.
Berikut ini langkah-langkah cara membuat
storyboard diantaranya yaitu
6. Storyboard yang dibuat harus dilengkapi dengan
informasi, seperti:
• Sketsa/gambaran tentang layar, halaman/frame.
• Warna, bentuk, dan juga ukuran grafik jika perlu.
• Teks asli.
• Apabila menggunakan teks, sebaiknya
cantumkan informasi warna, ukuran dan tipe
tulisan.
• Narasi (jika perlu).
• Animasi (jika perlu).
• Video (jika perlu).
• Audio (jika perlu).
• Interaksi dengan audiens (jika perlu).
Cara Membuat dan Contoh Storyboard
04

14. Contoh Storyboard
dalam Media Interaktif
Cara Membuat dan Contoh Storyboard
04

15. Tips dalam membuat storyboard
sebagai berikut :
• Catat poin-poin penting, ide, serta
konsep yang akan di masukan
didalam storyboard.
• Storyboard anda harus pada
dasarnya merupakan gambar serial,
dan dilengkapi uraian semua
langkah dan keterangan yang
diperlukan untuk menyelesaikan
tujuan dibuatnya film .
• Membuat sketsa kasar visual untuk
semua frame
• Visual dengan jelas menampilkan
adegan utama,
• Storyboard dapat dirancang
menggunakan dikertas dengan
coretan dan tulisan manual atau
dengan perangkat lunak seperti
Microsoft Word
Contoh Storyboard
dalam Media Interaktif
Cara Membuat dan Contoh Storyboard
04

16. THANK YOU
By Erlina