CSM 3014 :

SISTEM &
APLIKASI KOMPUTER

Bab 7:
Pengenalan Kepada Papan Cerita
& Peta Navigasi

Disediakan Oleh:
Haryati Abdul Rahman
Pensyarah Multimedia
Jabatan Multimedia & Matematik
Fakulti Teknologi Maklumat & Sains Komputer
University College Bestari
 KANDUNGAN BAB 7
7.1 Papan Cerita
7.2 Peta Navigasi

2
 7.1 PAPAN CERITA
Apa itu?:
• Panel yang mengandungi lakaran aksi babak
utama dalam siri rakaman.
Tujuan:
• Membantu untuk menjana idea
• Membantu menvisualisasi bagaimana aplikasi akan dihasilkan.
• Membantu menggunakan masa dan sumber sebaiknya apabila
dibangunkan.
• Menjadikan ianya mudah untuk diubahsuai.
• Memberi kefahaman yang sama tentang aplikasi

3
 7.1 PAPAN CERITA
Apa yang perlu ada:
• Transisi/pergerakan dari satu babak ke babak lain
• Sudut pandangan kamera
• Kesan khas
• Masa yang diperlukan untuk setiap babak

And remember to number

each page and each
frame!

4
 7.1 PAPAN CERITA
Langkah Penyediaan:
1. Susun semua maklumat dan elemen media

5
 7.1 PAPAN CERITA
Langkah Penyediaan:
2. Mengkaji rasional memilih media tersebut
Contoh:

6
 7.1 PAPAN CERITA
Langkah Penyediaan:
3. Membuat carta alir skrin (navigasi) secara umum
Contoh:

7
 7.1 PAPAN CERITA
Langkah Penyediaan:
4. Penulisan teks pada papan cerita di peringkat awal
Contoh:

8
 7.1 PAPAN CERITA
Langkah Penyediaan:
5. Menyemak kesesuaian kandungan dengan konteks yang akan
disampaikan
Contoh:

9
 7.1 PAPAN CERITA
Langkah Penyediaan:
6. Membina navigasi dari saru babak ke satu babak
Contoh:

10
 7.1 PAPAN CERITA
Langkah Penyediaan:
7. Megkaji semula carta alir dengan papan cerita yang
dibangunkan.
Contoh:

11
 7.1 PAPAN CERITA
Contoh Format Papan Cerita:
Papan Cerita Standard

12
 7.1 PAPAN CERITA
Contoh Format Papan Cerita:
Papan Cerita Web

13
 7.1 PAPAN CERITA
Jenis-jenis Papan Cerita:

Jenis papan cerita

production conceptual TV Animatik Digital

14
 7.1 PAPAN CERITA
Jenis-jenis Papan Cerita:
PRODUKSI / PRODUCTION
1. Panduan secara keseluruhan (langkah demi langkah)
penghasilan produk.
2. Mengandungi maklumat elemen multimedia yang digunakan,
warna, skrip, jenis tulisan dan sebagainya.
3. Diperlukan oleh kumpulan produksi untuk melakukan tugas
4. Mestilah lengkap
5. Kegunaan :- menbentangkan gambaran yang jelas tentang
apa yang berlaku pada setiap skrin dan apa yang setiap
pembangun akan dilakukan.

15
 7.1 PAPAN CERITA
Jenis-jenis Papan Cerita:
PRODUKSI / PRODUCTION

16
 7.1 PAPAN CERITA
Jenis-jenis Papan Cerita:
KONSEPTUAL / CONCEPTUAL
1. Berbentuk jujukan gambar dan idea untuk menghubungkan
antara satu skrin ke skrin yang lain.

17
 7.1 PAPAN CERITA
Jenis-jenis Papan Cerita:
TV/TV STORYBOARD
1. Direka dan dihasilkan oleh agensi pengiklanan untuk
memaparkan lakaran awal kepada pelanggan.

18
7.1 PAPAN CERITA

19
 7.1 PAPAN CERITA
Jenis-jenis Papan Cerita:
ANIMATIK/ANIMATIC
1. Merujuk kepada skrip, lakaran serta skrin-skrin yang perlu
dihasilkan bagi melengkapkan satu cerita atau animasi.
2. Penjelasan yang lebih mendalam berkenaan jalan cerita dan
adegan-adegan yang akan dianimasikan.

20
 7.1 PAPAN CERITA
Jenis-jenis Papan Cerita:
ANIMATIK/ANIMATIC

21
 7.1 PAPAN CERITA
Jenis-jenis Papan Cerita: ANIMATIK/ANIMATIC

22
 7.1 PAPAN CERITA
Jenis-jenis Papan
Cerita:
DIGITAL
STORYBOARD
1. Merupakan
sebahagian papan
serita produksi yang
telah tersusun
menggunakan imej
digital.

23
 7.1 PAPAN CERITA
Dari Carta Alir ke Papan Cerita

24
 7.1 PAPAN CERITA
Elemen pada papan cerita

• Tajuk • Audio
• No. skrin • Teks
• Imej • Warna/warna latar
• Animasi
• Nota/arahan
• skrip
• Klip video

25
 7.2 PETA NAVIGASI
• Navigasi
 Ciri penting pembangunan multimedia.
 Berkait rapat dengan interaktiviti.
 Membolehkan penggunaan aplikasi dengan lebih berkesan.

• Kawalan Navigasi
 Teknik interaktif yang digunakan di dalam aplikasi
multimedia
 Membantu pengemundian aplikasi multimedia.

26
 7.2 PETA NAVIGASI
1) Mengawal 2) Menyediakan
Jujukan Pautan
Kandungan Sejarah

KAWALAN
NAVIGASI
3) Menyediakan 4) Menyediakan
Maklum balas Rujukan
Interaksi Silang
27
 7.2 PETA NAVIGASI
• Mengawal Jujukan Kandungan
 Butang-butang navigasi: “Next”, “Previous”, “Continue”
membolehkan pengguna mengawal perjalanan aplikasi

• Menyediakan Pautan Sejarah (history of links)

 Membolehkan kita menjejaki skrin-skrin yang anda telah
paut atau lawati
 Menyediakan lompatan tidak linear ke mana-mana skrin
yang telah dilawati sebelum ini.

28
 7.2 PETA NAVIGASI
• Maklum Balas Interaksi Pengguna
 Memberitahu pengguna hasil tindakannya,
 Membantu mengukuhkan proses pembelajaran.
 Maklum balas dalam bentuk tekstual / paparan gambar,
fail bunyi / klip video.

• Rujukan-Silang untuk Maklumat Berkaitan

 Pengguna boleh mengelintar atau menerokai aplikasi
untuk mendapatkanm maklumat yang diingini
 Cth: penggunaan Kamus Elektronik

29
 7.2 PETA NAVIGASI
• Struktur Asas Navigasi
Linear : Navigasi Secara
Berjujukan antara bingkai

Hierarki : Navigasi secara bersturktur

antara nod atas ke nod
bawah.

Tidak Linear : Susunan Navigasi secara

bebas.

Composite : Gabungan antara struktur

navigasi yang lain

30
 7.2 PETA NAVIGASI
• Jenis 1) Menu
Kawalan  Peta navigasi yang menyediakan
antaramuka utama untuk
Navigasi memulakan pengemudian.
N U
ME  Butang atau hypermedia di mana
pengguna perlu mengklik untuk
meneruskan navigasi.

Cth: Pull Down Menu

31
 7.2 PETA NAVIGASI
• Jenis 2) Butang
Kawalan  Peralatan navigasi yang popular
di dalam kebanyakan aplikasi
Navigasi multimedia
 Objek di atas skrin yang
menghasilkan tindak balas
G
BU
TAN apabila pengguna mengklik pada
tetikus

Cth: Push Button

32
 7.2 PETA NAVIGASI
• Jenis 3) Hiperpaut
Kawalan  Hiperpaut adalah kawalan
interaktif yang terdapat di dalam
Navigasi aplikasi multimedia
 Kaedah yang lebih canggih untuk
mencapai maklumat
 Struktur pautan yang tidak
linear: hiperteks dan
r paut hipermedia.
e
Hip

33
 7.2 PETA NAVIGASI
• Jenis Kawalan Navigasi
3) Pikon
 Ikon bergambar yang membawa maksud yang lebih abstrak

4) Rollovers
 Diaplikasikan pada kursor yang diletakkan pada bahagian yang
telah ditentukan pada skrin untuk menghasilkan reaksi multimedia
yang berbeza

34
 7.2 PETA NAVIGASI
• Jenis Kawalan Navigasi
5) Slider
 Petanda tentang kedudukan semasa
pengguna di dalam aplikasi.

6) Hot areas
 Grafik atau teks dan boleh
dibezakan dengan objek lain
yang tidak interaktig dengan
warna atau perubahan yang
berlaku pada kursor

35