Indah Wahyuni

1
3
Elemen Multimedia
4
• Icons : Semantic Images
• Secara umum Icons berarti still icons.
• Manusia sangat berorientasi pada visual dan Icons
merupakan sarana yang sangat baik untuk menyajikan
informasi.
• Icons bisa berlaku universal, dan dapat dimengerti oleh
semua orang meskipun punya perbedaan bahasa.

5
• Graphics :
• Computer generated
• Bisa dalam bentuk 2D atau 3D, tergantung tujuannya.
• Teknologi 3D terdiri dari dua macam :
• Pointing device
digunakan untuk memanipulasi object dalam sistem 3D
• Display / Holografi
Penggunaan komputer secara langsung dengan alat
tertentu

6
• Images :
• Natural source
• Misalnya photography
• Visible images :
• Drawing
gambar denah, blue print engineering
• Dokumen
• Painting
• Still frame yang diambil dari kamera video

7
• Images :
• Non-Visible :
adalah images yang tidak disimpan sebagai
image, tetapi ditampilkan sebagai image.
Contohnya :
ukuran tekanan, ukuran temperatur dan tampilan
lainnya.

8
• Images :
• Abstrak :
Bukan image yang terdapat dalam kenyataan, tetapi
dihasilkan oleh komputer seperti dalam perhitungan
matematik.
contoh : fraktal

9
• Teks :
Hypertext
Sebagian besar penggunaan link dalam multimedia
interaktif berdasarkan penggunaan hypertext yang biasa
disebut hotword atau hotkey.

Auto-hypertext
• Dengan fasilitas ini, pengembangan multimedia tidak
perlu menentukan tanda khusus pada teks yang
mempunyai hubungan dengan link
• tetapi program mengenali teks yang mempunyai informasi
tertentu dan secara langsung otomatis menampilkan
informasi bila teks dipilih oleh user.
10
• Teks :
• Text Searching
pencarian teks merupakan fitur yang memudahkan
user dengan memasukkan suatu kata dalam
program multimedia.
-user dengan cepat memperoleh informasi yang
berhubungan dengan kata tersebut
• Import dan export text

11
• Full motion dan live video
• Berhubungan dengan penyimpanan sebagai video clip,
• Sedang live video merupakan hasil pemrosesan yang
diperoleh dari kamera.
• Interactive link
• Diperlukan bila pengguna menunjuk pada suatu obyek
supaya dapat mengakses program tertentu.
• Menggabungkan beberapa elemen multimedia sehingga
menjadi informasi yang terpadu.

12
Elemen Multimedia
13
• Struktur Navigasi
• Storyboard
• Komponen Antarmuka Multimedia
• Background dan texture
• Buttons dan icon
• Rollovers dan sliders
• Hotspots dan menus
• Feedback
• Desain Antarmuka

14
 • Menggambarkan hubungan
diantara bermacam area untuk
membantu mengorganisasi isi dan
pesan
Struktur • Menyajikan daftar isi dan sebuah
Navigasi aliran logis antarmuka interaktif
• Linear • Mengorganisasikan seluruh elemen
• Hirarki aplikasi multimedia dengan
• Non Linear pemberian perintah dan pesan
• Campuran
• Memberikan kemudahan dalam
menganalisa keinteraktifan seluruh
objek dalam aplikasi multimedia

15
Struktur
Navigasi  Struktur yang hanya mempunyai satu
rangkaian cerita yang berurut.
• Linear  Menampilkan satu demi satu
tampilan layar secara berurut
menurut urutannya dan tidak
diperbolehkan adanya
percabangan.
 Tampilan yang dapat ditampilkan
adalah satu halaman sebelumnya
atau satu halaman sesudahnya.
 Contoh: slide dan presentasi video
16
Struktur
Navigasi
 Struktur yang mengandalkan
• Hirarki percabangan untuk menampilkan
data berdasarkan kriteria tertentu.
 Struktur berupa menu dimana
pengguna dapat membuat pilihan
yang mengarah ke munu lain.
 Struktur navigasi ini tidak
diperkenankan adanya tampilan
secara linier. 17
Struktur
Navigasi
• Non Linear  Navigasi ini tidak terikat oleh rute
yang ditentukan sebelumnya
 Diperbolehkan membuat struktur
navigasi bercabang tapi dengan
level yang sama tidak seperti
navigasi Hirarki.
 Contoh: website.
18
Struktur
Navigasi
• Campuran
(Composite)
 Merupakan gabungan dari ketiga
struktur sebelumnya.
 Banyak digunakan dalam
pembuatan aplikasi multimedia
sebab dapat memberikan
keinteraksian yang lebih tinggi.
19
  Menggambarkan tata letak
dalam aplikasi.
 Digunakan dalam pengembangan
media termasuk pembuatan film
Storyboard dan animasi kartun.
 Representasi visual dari berbagai
bingkai, atau layar.
 Halaman storyboard digunakan
untuk menggambarkan kerangka
waktu tertentu dalam presentasi
multimedia.

20
Storyboard

 Berisi pemformatan, tata letak

konten, tata letak kontrol navigasi,
informasi interaktivitas dan
komentar.
21
Komponen
Antarmuka
Multimedia
• Background
dan texture
 Berisikan desain latar belakang
pada komponen antarmuka
beserta tekstur yang digunakan
dalamnya.

22
 Button dan icon

Komponen
Antarmuka
Multimedia
• Button dan icon
• Rollovers dan
sliders

Rollovers dan sliders

23
Komponen
Antarmuka
Multimedia
• Hotspot dan
Menu  Bagian dari gambar yang ketika
diklik meminta tindakan
 Dalam satu gambar bisa ada
beberapa area yang bisa diklik.
 Menu yang digunakan seperti menu
pull-down biasanya diletakkan di
bagian atas atau area samping
aplikasi 24
Komponen
Antarmuka
Multimedia
• Feedback

 Respon langsung hasil dari aksi

pengguna
 Contoh: muncul jendela untuk
merespon setelah adanya aksi.
25
  Readable
Desain
 Visual cues
Antarmuka
 Simple
 Consistent
 Clarity

26
• Keep Screen Content Simple and Clear

27
• Good use of Margins and White Space

28
The police car in the top
image has no relevance
in a presentation on
playgrounds.

29
Avoid Excessive and Improper Use of Color
Uses of Type
Serif type
• Ideal for large headlines
• Difficult to read in long blocks of
text
• Looks best when surrounded by
lots of white space.
Sans-Serif type
• Works well in smaller sizes
especially in body text
• Looks busy and cluttered in
large size.
Uses of Type
Serif type
• Ideal for large headlines
• Difficult to read in long blocks of
text
• Looks best when surrounded by
lots of white space.
Sans-Serif type
• Works well in smaller sizes
especially in body text
• Looks busy and cluttered in
large size.
30
• An image should not distract from the main message on the
screen

Dance (early 1950s - 19 70s) Dance (early 1950s - 19 70s)

Multimedia Multimedia
(without compute r interaction) (without compute r interaction)

Alwin Nikolais (1910-1993) employed lights, Alwin Nikolais (1910-1993) employed lights,
slides, electronic music, and stage prop
s slides, electronic music, and stage prop
s
to create environments through whi ch to create environments through whi ch
dancers moved, and more important, into dancers moved, and more important, into
which they blended. which they blended.

Obtrusive images Unobtrusive images

31
Make sure there is enough contrast between foreground
and textured background

User will not be able to User will be able to

read this easily read this easier

32
• Careful use of special effect.

33
• Use Dark Type on a Light Background

Easier to read Harder to read

34
 Employ Consistent
How Does the Internet Work? Layouts for
Related
• Packet switched networks
What Makes the
– if it uses phone lines, it must work like the
Materials
phone system, right? WRONG!
– circuit switched/packet switched
Internet Go?
difference H Protocols -- rules of H Routers -- connect
• A better model -- the postal thesystem
road for nets various networks
Packets
– think of a packet as an envelope with an
H H The Internet
address – 1-1500 characters Protocol
– point-to-point collection and– distribution
travel out of How Does the Internet Work?
– addresses the
sequence and by packets
various routes – tells the routers the
best way•toThe
go Transmission Control Protocol
Don’t – breaks the info into packets, puts ordering
info on and inserts into IP “envelopes”

Change – opens the envelopes and reassembles

– if packets are missing or damaged, it asks

Formats in the for retransmission -- parity bits

• The User Datagram Protocol (UDP)
Midst of a Concept – used for short messages only
– doesn’t worry about missing packets

35
• Use Effective Cropping and Image Placement

Most of the trees and part of

Uncropped image
the building are cropped,
emphasizing the student

36
Elemen Multimedia
37
Absolute :
Koordinat relatif standart

Direction relation :
Harus mendefinisikan atau
mengatur posisi di ruang
yang ada

38
 Topological relations :
Disjoint, touch,
equal,inside of, covered
by, contains, cover,
overlap

Text Flow :
Harus mendefinisikan atau
mengatur posisi di ruang
yang ada

39
Elemen Multimedia
40
Models :
: for example 6 seconds

41
Animation :
Mixture of temporal dimension and spatial layout (
misal, position of an object changes in time

42
Elemen Multimedia
43
• Different Levels of Interaction :
- Passive : only visualization
- Reactive : limited inetraction ( e.g., scroll pane
functionality).
- Proactive : choose a path or make selections (e.g.
button)
- Reciprocal: corresponds to user authoring of
information
44
• Interaction Models :
- Navigational: choose to dicide where to go next
- Design: user can modify the visual style of the
presentation (e.g. colors)
- Movie: User can control the global time (e.g. VCR
capabilities)

45
Elemen Multimedia
46
•Tradionally multimedia presentations did not have that much
logic:
-Virtual visit to a museum, DVD menus ……
•Real – time interactive systems:
-Virtual Reality worlds, games
•Application logic needs of a programming language (if,
case, goto, …..)
-Compiled languages C, C++
-Virtual Machine: Java
-WWW, MPEG-7, Director, Scripting
47