11/5/2018

1

STORYBOARD(Multimedia Interaktif – Media Pembelajaran)

Pipin Piniman, S. Kom., M. Pd.

Nip. 19850316 201101 1 002

===============================

Mapel – Desain Multimedia Interaktif

Multimedia – SMKN 1 Rancah

MATERI

1. Flowchart2. Struktur Navigasi3. Storyboard

11/5/2018

2

Perancangan Multimedia Interaktif

Perancangan adalah penggambaran, perencanaan danpembuatan sketsa, flowchart atau pengaturan dari

beberapa elemen yang terpisah ke dalam satu kesatuanyang utuh dan berfungsi;

Macam-Macam Perancangan

Desain Struktur Navigasi• Memberikan gambaran link dari halaman satu kehalaman lain. • Digunakan pada multimedia non linear, dan adaptasi dari disain web.

Desain berbasis multimedia• Disain ini dikembangkan dari metode perancangan pembuatan film

menggunakan storyboard. • Saat ini karena multimedia memerlukan aspek interaktif, sehingga

perlu dilengkapi dengan flowchart.

Desain Berorientasi ObyekAdalah metode perancangan dimana komponen multimedia dinyatakansebagai obyek.

11/5/2018

3

Perancangan yang baik

• Perancangan yang baik yaitu denganmenggabungkan metode diatas sehingga mendapatkan gambaran dan pemahaman yang lengkap.

• Contoh : pembuatan story board dilengkapi dengan disain struktur navigasi agar mendapatkan struktur sistem secara keseluruhan.

Struktur Navigasi

Struktur Navigasi merupakan strukturatau alur informasi dari suatu program yang merupakan rancangan hubungan(rantai kerja) dari beberapa area yang berbeda dan dapat membantumengorganisasikan seluruh elemenpembuatan Multimedia Interaktif.

11/5/2018

4

Struktur Navigasi

Struktur Navigasi Struktur Linear

Struktur Non -Linear

Struktur Hierarchical

Struktur Composit

Struktur Linear

Struktur yang hanya mempunyai satu rangkaian ceritaberurut.

Tampilan yang dapat ditampilkan pada struktur jenis iniadalah satu halaman sebelumnya atau satu halamansesudahnya

Biasanya struktur ini digunakan Multimedia Presentasikarena tidak menuntut keinteraksian tetapi hanyamemerlukan keindahan dan kemudahan menampilkan data sebagai informasi.

11/5/2018

5

Struktur Linear

Struktur Non-Linear

Struktur navigasi non linear ( tidak berurut ) merupakanpengembangan dari struktur navigasi linear.

Pada struktur ini diperkenankan membuat navigasibercabang.

Percabangan yang dibuat pada struktur linear ini berbedadengan percabangan pada struktur hierarki, karena padapercabangan non linear ini walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan yang samatidak ada master page dan slave page.

11/5/2018

6

Struktur Non-Linear

Struktur Hierarchical

Struktur navigasi hierarchi ( bercabang ) merupakansuatu struktur yang mengandalkan percabanganuntuk menampilkan informasi yang berdasarkankriteria tertentu.

Informasi pada halaman utama disebut parent daninformasi pada cabangnya disebut child.

11/5/2018

7

Struktur Hierarchical

Struktur Composite

Struktur Navigasi Composite ( campuran ) merupakanstruktur gabungan dari ketiga struktur sebelumnya.

Struktur ini disebut juga struktur navigasi bebas. Kelebihan dengan menggunakan struktur navigasi ini

adalah suatu aplikasi mampu memberikan keterkaitaninformasinya lebih baik.

11/5/2018

8

Struktur Composite

Penugasan Struktur Navigasi

11/5/2018

9

Flowchart view

• Disebut juga diagram tampilan• Adalah diagram yang memberikan

gambaran alir dari suatu scene (tampilan) ke scene lainnya

• Digunakan untuk pengembangan multimedia interaktif.

Pengertian

Flowchart view

• Dalam flowchat view dapat dilihat komponen yang terdapat dalam suatu scene dengan penjelasan yang diperlukan.

• Transisi dari scene ke scene lainnya disebutkan, disamping hubungan antara satu scene dengan scene lain yang dinyatakan dengan garis berikut tanda panah.

• Hotkey dapat berupa teks, image, atau button yang digunakan untuk menghubungkan scene satu dengan lainnya.

11/5/2018

10

Contoh flowchart view

Scene 1 Scene 2 Scene 3

Scene 4

Opening HomeTopik 1

Topik 2

ButonClick

Button Clik 1

Button Click 2

Button Click

Button Click

Scene 5

Close

End Scene

Penugasan Flowchart

11/5/2018

11

Storyboard Media Pembelajaran

SKENARIO STORYBOARD

Menyusun materi yang akandiajarkan pada pembelajaranbeserta cara penyampaiannyadengan memberikan deskripsimateri dan media penyampainya denganmenggunakan Suara, Gambar, Animasi, atau Video

Storyboard dibuat untukmenjelaskan Skenario secaralebih detail dari detik demi detik. Storyboard menjelaskantentang susunan materi yang disampaikan pada detik demi detik beserta suara, grafis, animasi, dan video yang dibutuhkan.

Merupakan gambaran dari media yang akan dibuat, maka harus mudah dimengerti oleh semua pihak.

Merupakan rangkaian gambar manual yang dibuat secara keseluruhan sehingga menggambarkan suatu media

Merupakan deskripsi dari setiap scene yang secara jelas menggambarkan obyek multimedia serta perilakunya.

Pengertian Storyboard (Media Pembelajaran)

11/5/2018

12

Manfaat story board

• Bagi pengembang dan pemilik berfungsisebagai visual test yang pertama-tama dari gagasan secara keseluruhan dapatdilihat apa yang akan disajikan.

• Bagi staff pembuat MM merupakanpedoman dari aliran pekerjaan yang akandilakukan.

• Bagi sponsor gambaran dari suatumultimedia yang akan diproduksi.

Pembuat storyboard

• Untuk project yang kecil bisa dibuat oleh produser sendiri

• Untuk perusahaan yang besar ada departemen khusus storyboard (team)

11/5/2018

13

Contoh Storyboard

Contoh storyboard

11/5/2018

14

Contoh Storyboard

Contoh storyboard

EXIT

APLIKASI PEMBELAJARANIBADAH HAJI BERBASIS

MULTIMEDIADefinisi HajiPendaftaran HajiPerjalanan HajiHaji Tamattu'Haji IfradHaji QiranEvaluasiI

backgroundka'bah

Definisi HajiSyarat HajiRukun HajiWajib Haji

Halaman Utama

Teks judul

TeksTeori

Halaman Utama

Teks judul

Definisi HajiTeks Teori

SCENE VISUAL DESKRIPSI AUDIO DURASI LINK

1

Pada scene 1 (menu utama) terdapat menu-menu pilihan, yaitu definisi haji, pendaftaran haji, perjalanan haji, haji tamattu’, haji ifrad, haji qiran, dan evaluasi.

Lagu Raihan berjudul “Pergi Haji”

User Dependent

Scene 2Scene 3Scene 4Scene 5Scene 6Scene 7Scene 8

2

Menu definisi haji berisi penjelasan mengenai teori haji meliputi definisi haji, syarat haji, rukun haji, dan wajib haji.

Lagu Raihan berjudul “Pergi Haji”

User Dependent

Scene 1Scene 2.1Scene 2.2Scene 2.3Scene 2.4

2.1

Menu definisi haji menjelaskan pengertian mengenai haji dalam bentuk teks.

Lagu Raihan berjudul “Pergi Haji”

User Dependent

Scene 1Scene 2Scene 2.2Scene 2.3Scene 2.4

11/5/2018

15

Penugasan Storyboard