DIKTAT KULIAH
MULTIMEDIA
DISUSUN OLEH : CATUR ISWAHYUDI, S.KOM, S.E
JURUSAN TEKNIK INFORMATIKA INSTITUT SAINS & TEKNOLOGI AKPRIND YOGYAKARTA 2004
Page 1
BAB I PENDAHULUAN 1. Multimedia •
Multimedia (multiÆbanyak; mediaÆ medium / alat dan cara untuk mengkomunikasikan informasi)
•
Multimedia
:
penggunaan
komputer
untuk
menampilkan
dan
mengkombinasikan text, graphics, audio, video dan animasi dengan menggunakan links dan tools yang memungkinkan pemakai untuk melakukan navigasi, berinteraksi, membuat, dan berkomunikasi •
Cara mengkomunikasi informasi : o Modalities (cara) : penglihatan, pendengaran, sentuhan o Saluran komunikasi : percakapan, sound effects, music o Medium : animasi + suara, gambar + teks
•
4 komponen utama multimedia : 1. Komputer, untuk melakukan koordinasi tentang apa yang dilihat dan didengar oleh pemakai 2. Links, yang menghubungkan dengan informasi 3. Navigational tools, yang memungkinkan pemakai untuk menjelajahi informasi yang ditampilkan 4. Cara, untuk berbagi, memproses, dan mengkomunikasikan informasi dan ide pemakai
•
Bila salahsatu komponen tidak ada Æ disebut mixed media bukan multimedia
•
Mengapa multimedia penting : 1. merupakan pemicu (triggers) Æ pembaca memperoleh sesuatu yang ‘lebih’ dibandingkan topik yang dipelajari 2. Sangat efektif dalam penyampaian informasi
Orang retain (mampu mengingat) dari 20% yang dilihat dan 30% yang didengar
Orang mengingat 50% dari apa yang mereka dengar dan lihat
Page 2
•
Pemanfaatan multimedia : 1. Pendidikan Æ tutorial, ensiklopedia (misaal : microsoft encarta), instruksional) 2. Informasi Æ pariwisata, museum, galeri seni 3. Hiburan Æ games, seni, pertunjukan 4. Kedokteran Æ x-ray scanner 5. dll
•
Keunggulan multimedia : 1. Menarik perhatian Æ karena manusia memiliki keterbatasan daya ingat 2. Media alternatif dalam penyampaian pesan Æ diperkuat dengan teks, suara, gambar, video, dan animasi 3. Meningkatkan kualitas penyampaian informasi 4. Interaktif
•
Kelemahan multimedia : 1. Design yang buruk menyebabkan kebingungan dan kebosanan Æ pesan tidak tersampaikan dengan baik 2. Kendala bagi orang dengan kemampuan terbatas / cacat / disable 3. Tuntutan terhadap spesifikasi komputer yang memadai
•
Distribusi multimedia : 1. Offline :
Installation / kiosk Æ dengan hardware tertentu
CDROM / software download Æ multiple hardware
2. Online :
•
Komunikasi melalui jaringan komputer
Dibutuhkan plug-in
Dimungkinkan terjadi interaksi, feedback
Bentuk-bentuk presentasi multimedia : 1. Card-based / page-based
Dirancang menyerupai halaman-halaman buku / majalah; dengan elemen-elemen teks, images, video, dan suara
Terdapat links antar halaman Æ hypermedia
Contoh : HyperCard, ToolBook, WWW / HTML Page 3
2. Event-based
Presentasi
dikendalikan
berdasar
kejadian
(event-driven),
misalnya dengan menekan suatu tombol kemudian sistem akan merespon (actions)
Diperlukan script dan authoring tools
3. Time-based
Presentasi berjalan berdasar waktu yang telah ditentukan, semacam slide show
Ciri khas : presentasi berjalan urut, paralel, dan sinkronisasi
2. Interactive Multimedia (IMM) •
Pengertian MULTIMEDIA : a. Integrasi dari berbagai macam media, misalnya : gambar, teks, video, suara (sound effect, music, narasi), dan animasi; yang secara bersamasama memperkuat penyampaian pesan b. Interactive Multimedia : kemampuan pemakai dalam mengendalikan komponen-komponen multimedia dan berinteraksi dengannya sesuai kebutuhan pemakai
•
Dengan adanya integrasi teknologi multimedia dalam lingkungan komunikasi telah mengubah model komunikasi dari partisipasi pemakai yang pasif menjadi lebih aktif dengan bantuan ‘media-rich learning process’
•
Pengelompokan media interaktif : a. Reference -
Contoh : Ensiklopedia, OEM References
b. Entertainment dan Games c. Edutainment dan Infotainment d. Education e. Coffee Table Titles (ringkasan dari sebuah buku) f. Self-Improvement g. Humor h. Demos dan Samplers i.
Vertical markets Page 4
j.
Pornography -
•
Contoh : Travel CD, Training Programs
Contoh : Penthouse interactive, Virtual Valerie
Pengertian KOMUNIKASI : adalah pertukaran ide-ide, pesan-pesan dan informasi. -
Dengan adanya IMM komunikasi dapat dilakukan dengan lebih ‘sempurna’, tidak hanya sekedar menyampaikan pesan; namun melibatkan partisipasi aktif dari penerima pesan, dan memberikan pengalaman baru bagi sipenerima pesan
•
Pengertian INTERAKSI : 1. Interaksi fisik : segala tindakan yang menyebabkan perubahan keadaan dalam dunia fisika (misalnya : memukul, menendang) 2. Interaksi komunikatif : segala tindakan yang menyebabkan perubahan keadaan dalam dunia mental (cerita horor menyebabkan rasa takut)
Gambar Komponen multimedia interaktif •
Sejarah singkat komputer dan multimedia -
Tape control device -
Kombinasi slide dan audio tape
-
Berupa silde projector yang dikendalikan secara elektronis, dengan menampilkan slide dan suara / narasi secara bersama-sama Page 5
-
Branching systems -
Dengan
menggunakan
sistem
yang
memungkinkan
proses
bercabang, berupa kombinasi linear presentation dengan mekanisme yang dapat memilih berbagai kegiatan -
Contoh : mesin ATM
Computer presented media -
Menampilkan presentasi dengan bantuan komputer, dengan data yang tersimpan di komputer
3. Computer-Based Multimedia Production •
Proses pengembangan aplikasi multimedia -
Concept definition Æ Storyboard design Æ Development of Multimedia Building Blocks Æ Authoring Æ Testing and Revision Æ Delivery
•
Hal-hal yang harus diperhatikan dalam pengembangan aplikasi multimedia : a. Siapa target audience ? -
Umur & tingkat pendidikan
-
Gaya / cara belajar
-
Kebutuhan dan harapan pemakai
-
Etnik, Gender, komposisi budaya
-
Warna dan logo yang disukai
-
Profil psikologis
b. Apa tujuan program ? -
Berupa presentasi / tutorial / interactive page ?
-
Dipakai oleh group / single user ?
-
Dipakai di TV / komputer / kiosk ?
c. Apa struktur / isi program ? -
Isi program dapat berupa pesan khusus, data, gambar, grafik,, video, atau informasi lain
-
Isi program dirancang oleh content specialist untuk diberikan kepada multimedia architect Æ how can this information be presented using the capabilities of multimedia technologies ? Page 6
d. Komponen-komponen apa saja yang akan dipakai ? -
Gunakan berbagai macam media seperti narasi, gambar, animasi, video, teks, dll untuk menarik pemakai sehingga dapat menangkap informasi yang disampaikan
-
Untuk pemakai individu Æ extensive text, scrolling text fields, audio, interactivity
-
Untuk pemakai kelompok Æ text, audio, interactivity, colors
e. Tingkat interaksi yang diharapkan antara user dan komputer f. Tingkat respon pemakai yang diharapkan -
Sediakan umpan balik / pesan untuk setiap respon dari pemakai; berupa pesan ‘benar’ atau ‘salah’
•
Menghindari kendala : a. Gunakan berbagai macam media untuk menarik pemakai dengan gaya bejalar yang berbeda-beda b. Tetapkan tujuan program dibuat c. Hindari penggunaan animasi, suara yang mengaburkan tujuan penyampaian pesan / informasi
4. Peluang kerja di bidang multimedia •
Untuk menjadi profesional di bidang multimedia, harus : a. Memahami penggunaan teknologi dalam bidang multimedia b. Mampu memilih teknologi yang digunakan dengan tepat c. Dapat bekerja sama dalam sebuah team d. Mampu membedakan berbagai tipe presentasi
Page 7
•
Tingkatan presentasi : a. Slide Presentation -
Merupakan presentasi linear (berurutan)
-
Dikembangkan menggunakan teks, gambar / clipart, photo
-
Tidak ada interaksi dengan pemakai
-
Tidak ada percabangan
b. Multimedia Presentation -
Dikembangkan dengan menggunakan teks, gambar / clipart, suara, digitized video, animasi, atau photo
-
Tidak ada interaksi antara pemakai dan komputer
-
Interaksi terjadi antara presenter dan audience
c. Interactive Multimedia Presentation -
Dikembangkan dengan menggunakan teks, gambar / clipart, suara, digitized video, animasi, atau photo
-
Terjadi interaksi antara pemakai dan komputer, yang berupa form data entry, pemilihan alternatif / jawaban, dll.
-
Format : kiosk, training program, education program
d. Multimedia web pages -
Aplikasi dibangun menggunakan authoring software, dan dapat dijalankan menggunakan web browser
-
Keunggulan : memanfaatkan hypertext, dan akses ke external database
-
Contoh
:
(www.mtv.com);
menggunakan
macromedia
advertising,
Video-based
shockwave •
Peluang kerja : a. Product marketing and Promotion -
TV
commercials,
marketing
and
Multimedia promotion,
Multimedia
storyboarding,
Multimedia resumes, Marketing web page development
Page 8
b. Entertainment -
Film special effects, Video animation and special effects, Television, Multimedia (design, content generation, special effects), Interactive TV, Virtual-reality simulation and arcadestyle virtual games, Internet games development
c. Scientific Research -
Medical and dental research, Physics simulaton, Chemical modeling,
Astronomical
research,
Genetics
research,
Mathematical research, Medical and Research centers web page development d. Multimedia and Interactive publishing -
Multimedia content design, User-interface design, internet page design, Multimedia consulting, Multimedia advertising, Kiosk
design
and
implementation,
Multimedia
books,
Multimedia magazines, magazines web pages e. Real estate development -
Site-use determination studies, Architectural design, Structural design, Construction planning, Utility design and engineering, Information-system wiring, Interior design, Landscape design, Property sales and marketing, Internet property sales and marketing
f. Law enforcement and Government services -
Trial reenactment, Image composting of suspect, on-line government services
g. Investments -
Statistical modeling, Market simulation, Investment analysis, web pages development
h. Education -
Edutaintment software, Educational software, Multimedia textbooks, Classroom instructional materials development, Multimedia yearbook design and development, Educational
Page 9
research, Internet distance learning web pages, Internet university and college promotional web pages •
Personil Multimedia development team : a. Production manager -
Menentukan, mengkoordinasi, memfasilitasi proyek, negosiasi dengan client
-
Mengenal multimedia authoring, Good negotiation skills, skillful proposal writing, good knowledge of legal matters concerning the production of media, good communication skills, budgeting management skills, experience in HRM
-
Pendidikan : business management, media production
b. Content specialists -
Melakukan penelitian untuk keperluan isi dari aplikasi
-
Good writing skills, highly skilled in summarizing complex and extensive information
c. Multimedia architect (program authoring specialist) -
Mengkombinasikan
berbagai
komponen
multimedia
menggunakan authoring software -
harus ahli dalam authoring software, good graphic, video and sound
production
skills;
good
communicator,
computer
programming experience -
Pendidikan : computer science, communications, media production
d. Instructional designer -
Bertugas merancang strategi pembelajaran dan pelatihan yang tepat untuk berbagai macam gaya pembelajaran yang cocok untuk tingkat dan usia dari target audience
-
Pendidikan : education, communications or media production
e. Script writer -
Harus dapat memvisualisasikan keadaan dan lingkungan 3dimensi yang berupa ‘virtual reality’ ke dalam program Page 10
-
Excellent writing skills, capable of constructing story boards, excellent graphics and written communications skills
-
Pendidikan : communications or media production
f. Text editor -
Melakukan koreksi terhadap teks dan narasi secara struktural dan gramatical
-
Excellent writing and editing skills, skill to structure ideas in a meaningful way
-
Pendidikan : communications or literature
g. Computer graphic artist -
Bertanggung jawab pada elemen grafis, seperti latar belakang, tombol, koleksi photo, image editing, logo, animasi, rendering, dll.
-
Pendidikan : graphics arts, communication, media production
h. Audio and video specialist -
Bertanggung jawab pada proses recording dan editing narasi, sound effect, dan music; juga pada video capturing, editing, digitizing
-
Pendidikan : communications, film or video production, sound engineeing, media production
i.
Computer programmer -
Melakukan pemrograman ‘script’ dalam authoring software (misalnya LINGO, Java, C++), yaitu untuk menyusun kode dan fungsi-fungsi khusus untuk mengendalikan peripheral, atau menjalankan progam lain
-
Pendidikan : computer programming
j. Webmaster -
Bertanggung jawab membuat dan merawat web page
-
Pendidikan : computer science
Page 11
Production Manager
Content specialists
Audiovisual specialists
Script writer
Multimedia Architect
Digital video specialists
Computer programmer
Text Editor Audio specialists
Instructional designer
Team Matrix Management or “The client” Budgets Timelines Outside (Content) Contacs
Marketing, PR, QA
Media Acquisition Team
Information Designer
Project Manager
Producer
Art Director
Artists
Marketing Material Demos, Betas Video Crew
Page 12
Sound Design
Programmers
BAB II INTERAKSI YANG KOMUNIKATIF
1. Interaksi •
INTERAKSI adalah hubungan timbal balik antara 2 sistem atau lebih
•
Interaksi merupakan komponen utama dari sebuah sistem multimedia
•
Komponen-komponen
lainnya
berkembang
sesuai
dengan
kebutuhan
interaksi dan bagaimana komponen tersebut diterapkan dalam interaksi •
Dalam interaksi diperlukan adanya goals dan actively plan untuk mencapai tujuan yang diharapkan
•
Dalam interaksi yang komunikatif, tiap-tiap sistem memiliki mental state, dan sistem yang berinteraksi memiliki maksud tertentu (intentions) yang mempengaruhi kondisi internal sistem lainnya
2. Agent •
Kombinasi dari kondisi / keadaan internal dan struktur maksud / tujuan yang berada dalam sebuah kelas sistem disebut agent
Page 13
•
Intentions
Interaction
Internal State
3. Bahasa Komunikasi •
Agent
Bahasa yang digunakan oleh manusia dalam berkomunikasi dibedakan menjadi tiga, yaitu : a. Artificial languages -
Berisi sekumpulan simbol yang didefinisikan oleh seseorang sebagai pengganti bahasa
-
Diperlukan aturan / kesepakatan tertentu
-
Contoh : bahasa matematika Æ 3 + 4, bahasa pemrograman, bahasa logika
b. Natural languages -
Dipelajari dan berkembang sesuai dengan peradaban manusia
-
Contoh : bahasa daerah, bahasa indonesia, bahasa inggris
c. Meta languages -
Bahasa yang secara khusus dirancang secara murni untuk mengekspresikan bahasa-bahasa lain
-
Contoh : dalam bahasa komputer 1. And Æ , (comma) 2. or Æ | (garis tegak) 3. option Æ [ ] 4. group Æ ( ) 5. repeat Æ *
Page 14
4. Komponen Interactive Multimedia •
Interactive multimedia adalah dua atau lebih penggunaan agent (agent engaging) dalam interaksi yang komunikatif dengan menggunakan komunikasi mutimedia Æ IMM = control + content
•
Hubungan antar agent
Intentions
Intentions
Interaction
Internal State
Internal State Agent
Interaction
Communicative interaction
Page 15
Agent
BAB III USER KNOWLEDGE 1. User Knowledge •
Ada 2 jenis pengetahuan user, yaitu : a. Background knowledge -
Pengetahuan yang dimiliki oleh pemakai sebelum ia mengenal sistem / program yang dipakai
-
Misalnya : kemampuan menggunakan komputer, kemampuan bahasa, pengetahuan umum, dll
b. Foreground knowledge -
Adalah pengetahuan yang dimiliki oleh pemakai mengenai apa yang menjadi tema sistem / program dan apa yang akan terjadi selama berinteraksi dengan komputer
-
Misalnya : pengetahuan tentang wilayah dan budaya daerah tertentu pada sistem informasi pariwisata
•
Kategori pengetahuan pemakai : a. Cognitive Æ Knows Æ “mental skills” b. Conative Æ Wants Æ “motivations” c. Affective Æ Feels Æ “emotional state”
COGNITIVE
CONATIVE
AFFECTIVE
BACKGROUND
What you know
Desires in life
How you feel
FOREGROUND
Knowledge gained
Purpose of
How you feel when
from system
interacting with
using the system
system
Page 16
•
Bagaimana menyesuaikan dengan pengetahuan pemakai a. Usability (berdayaguna) -
Pemakai dapat mencapai tujuannya dengan berinteraksi dengan sistem
b. Learnability (mudah dipelajari) -
Pemakai harus dapat berinteraksi dengan sistem tanpa harus belajar ilmu tambahan
c. Accessibility (kemudahan pemakaian) -
Sistem harus mudah digunakan dan transparan bagi pemakai untuk mencapai tujuannya
•
Pendekatan pengetahuan pemakai terhadap disain sistem : a. User-centred design -
Menempatkan user sebagai pusat dari proses pengembangan sistem
-
Sistem dirancang untuk memenuhi kebutuhan pemakai
b. Adapted (customized) systems -
Variasi lain dari user-centred design
-
Memungkinkan sistem ditampilkan melalui lebih dari satu cara
-
Contoh : mesin ATM yang akan menampilkan menu dan bahasa yang berbeda bergantung dari kartu yang dimasukkan
c. Adaptive systems -
Biasanya
diterapkan
pada
kecerdasan
buatan
(artificial
intelligence) -
Sistem
dirancang
untuk
dapat
berubah
(change)
dan
beradaptasi (adapt) secara real time selama interaksi antara user dengan sistem Æ disebut sebagai communicative processes continue
Page 17
BAB IV PEMAKAI •
Sebuah aplikasi multimedia harus memiliki audiens sasaran dan platform yang jelas. Ketika kapabilitas multimedia pengguna akhir memiliki range yang luas dan tak terbatas, maka harus disebutkan spesifikasi hardware dan software yang diperlukan
•
Hal-hal yang harus diperhatikan dalam pengembangan aplikasi multimedia : a. Siapa target audience ? -
Umur & tingkat pendidikan
-
Gaya / cara belajar
-
Kebutuhan dan harapan pemakai
-
Etnik, Gender, komposisi budaya
-
Warna dan logo yang disukai
-
Profil psikologis
b. Apa tujuan program ? -
Berupa presentasi / tutorial / interactive page ?
-
Dipakai oleh group / single user ?
-
Dipakai di TV / komputer / kiosk ?
c. Apa struktur / isi program ? -
Isi program dapat berupa pesan khusus, data, gambar, grafik,, video, atau informasi lain
-
Isi program dirancang oleh content specialist untuk diberikan kepada multimedia architect Æ how can this information be presented using the capabilities of multimedia technologies ?
d. Komponen-komponen apa saja yang akan dipakai ? -
Gunakan berbagai macam media seperti narasi, gambar, animasi, video, teks, dll untuk menarik pemakai sehingga dapat menangkap informasi yang disampaikan
-
Untuk pemakai individu Æ extensive text, scrolling text fields, audio, interactivity
-
Untuk pemakai kelompok Æ text, audio, interactivity, colors Page 18
e. Tingkat interaksi yang diharapkan antara user dan komputer f. Tingkat respon pemakai yang diharapkan -
Sediakan umpan balik / pesan untuk setiap respon dari pemakai; berupa pesan ‘benar’ atau ‘salah’
•
The Golden rule of design: Don’t do to others what others have done to you. Remember the things you don’t like in software interfaces you use. Then make sure you don’t do the same things to users of interfaces you design and develop. Tracy Leonare (1996)
Page 19
BAB V INTERAKSI DAN ANTARMUKA
1. Aspek ergonomi dalam pemakaian komputer •
Ergonomi adalah ilmu yang mempelajari hubungan antara manusia dan lingkungan kerjanya.
•
Pada awalnya aspek yang dipelajari hanya menyangkut aspek fisik, namun kemudian berkembang dengan mempelajari aspek mental (disebut cognitive ergonomics).
•
Aspek ergonomis dalam pemakaian komputer : a. Fisik -
Berkaitan dengan aktivitas pemakai selama menggunakan komputer. Misalnya : tinggi meja dan kursi, jarak meja dan kursi, jarak sudut meja dengan keyboard, jarak meja dengan monitor, dll.
b. Visual -
Berkaitan dengan kemudahan pemakai dalam membaca layar monitor tanpa menimbulkan ketegangan pada mata
-
Dipengaruhi oleh : 1. Lingkungan luar, terdiri dari tipe, kualitas, kecerahan penerangan dalam ruangan, letak dan arah jendela, warna dinding, dll. 2. Fasilitas layar monitor, terdiri dari flicker (refresh rate), sharpness, jitter (horizontal line) 3. Fasilitas perangkat lunak, misalnya ukuran dan jenis fonts, pemilihan warna, jumlah tulisan di layar, dll.
c. Lain-lain -
Adanya kipas tambahan Æ menyebabkan ‘noise’
-
Radiasi elektromagnetic dari monitor
Page 20
2. Antarmuka (interface) •
Antarmuka dapat dibedakan menjadi : a. Interface channel -
Text channel Æ keyboard
-
Spatial position channel Æ mouse, joystick, pen light
b. Conventional interface -
Command lines
-
Spatial textual interface
-
Graphical user interface (WIMP – Windows, Icons, Menus, Pointers)
3. Tampilan visual •
Prinsip-prinsip dalam merancang antar muka yang baik : a. Consistency -
Selalu menjaga konsistensi. Suatu proses yang sama harus dikerjakan dengan cara yang sama dalam setiap keadaan
b. Conceptual model -
Menyediakan model dari sistem kepada pemakai yang berkaitan dengan pengalaman dunia nyata
c. Direct representation -
Gunakan
antarmuka
visual
yang
secara
langsung
menggambarkan apa yang nampak di layar monitor d. Modeless -
Perintah yang sama selalu digunakan untuk menjalankan proses yang sama. Apabila terdapat perbedaan harus secara nyata ditunjukkan kepada pemakai
e. Closure -
Setiap proses harus ada titik akhir yang jelas yang diketahui oleh pemakai
f. Reversal -
Menyediakan fasilitas untuk membatalkan perintah atau mundur dengan mudah tanpa kehilangan data Page 21
g. Feedback -
Menyediakan informasi tentang segala sesuatu yang sedang dan telah dikerjakan oleh komputer setiap kali pemakai menjalankan suatu perintah
h. Selection -
Menyediakan fasilitas kepada pemakai untuk menjalankan beberapa perintah sekaligus
4. Layout dan warna •
Prinsip-prinsip dalam mengatur tataletak yang baik : a. Menyediakan layar ‘default’ untuk kembali dari sebuah proses b. Mengelompokkan beberapa item yang sama c. Men-disable menu / tombol yang tidak aktif Æ jangan dihapus, tapi dengan memberi warna yang berbeda (abu-abu) d. Gunakan text rata-kiri e. Gunakan tipe, ukuran font yang khusus f. Selalu merancang disain dengan sederhana dan tidak kacau
•
Pemilihan warna sangat penting untuk menyampaikan informasi dengan tepat sasaran melalui media visual
•
Aturan dalam pemilihan warna : a. Hindari kombinasi warna yang tidak dikenali oleh pemakai yang buta warna (misalnya merah berbayang, biru berbayang, kombinasi merahhijau-kuning) b. Hindari pemakaian warna yang terlalu mencolok, membuat mata menjadi silau c. Beberapa warna tambahan dapat menyebabkan ‘flickering effect’ (kerlap-kerlip) d. Hindari penggunaan intensitas dan saturasi (titik jenuh) warna yang tinggi Æ menyebabkan mata menjadi tegang e. Corak warna (hue) yang lebih terang lebih sulit untuk dilihat
Page 22
5. Delapan aturan dalam merancang aplikasi berbasis komputer •
Dr. Ruth Colvin Clark (instructional designer) menjelaskan 8 aturan dalam merancang aplikasi instruksional berbasis komputer : a. Gunakan disain layar secara konsisten dan sederhana, termasuk pemilihan teks, suara, gerakan, dan warna b. Gunakan berbagai macam elemen media seperti teks, gambar, dan suara untuk menegaskan sebuah pesan. Jangan memecah menjadi pesan yang berbeda c. Gunakan warna, tanda panah, bayangan, dan suara untuk menarik perhatian pemakai pada pesan yang penting d. Usahakan agar pesan muncul dalam satu layar (tanpa scolling), khususnya apabila memerlukan jawaban dari pemakai e. Menganjurkan pemakai agar mengulang suatu pesan yang sulit diterima, agar dapat diingat lebih baik f. Gunakan kalimat nyata dan media lain (teks, gambar, suara) untuk memperkuat pesan g. Hindari pengulangan dalam interaksi. Gunakan disain interaksi yang sesuai dengan aktifitas pekerjaan dan keahlian h. Untuk kemampuan prosedural, dianjurkan menggunakan praktek secara simulasi
Page 23
BAB VI PENGEMBANGAN MULTIMEDIA
1. Merencanakan produksi aplikasi multimedia •
Langkah-langkah dalam merencanakan produksi aplikasi multimedia : a. Menyusun program script atau konsep b. Menggambar sketsa program c. Menyusun bagan alir d. Menyusun storyboard e. Merancang antar muka pemakai f. Menyiapkan script untuk narasi, text, dan video g. Memperhatikan hak cipta h. Merencanakan produksi musik, audio, video i. Penyiapkan penjadwalan proyek dan pembiayaan
2. The Design Process a. Requirements and Goals b. Content Definition c. Content Outline d. Logic Flow Definition e. Navigation Mapping f. Storyboarding g. Asset Capture h. Implementation
Page 24
3. Design Life-Cycle
Requirements Capture & Goals Identification
Content Definition
Content Outlining
Multimedia Asset Capture
Client Environment Logical Flow Definition/ Navigation Mapping
Storyboarding
Implementation
Client/Developer Environment
Developer Environment
4. Project Planning a. The Process of Making Multimedia b. What is the essence of what you want to do? Your purpose and message c. How can you organize your project? d. What multimedia elements will best deliver your message? e. Do you already have content material with which you can leverage your project, such as videotape, music, documents, photographs, logos, advertisements, marketing packages, and other artwork?
Page 25
5. From Application Planning to Product Delivery
Concept Definition Storyboard Development of Multimedia Building Block Authoring Testing & Revision
Delivery
Page 26
6. Program Goals into Storyboard • Starting the authoring without planning all the components of the project is a serious mistake Plan User interface
Program script or concept
Program Goals
Prepare Scripts for narrations, text, video
Outline
Consider Copyrights
Logic Flow Chart
Music, audio, video production planning
Storyboard
Prepare project time lines and budget
Page 27
BAB VII KOMPONEN MULTIMEDIA
1. Multimedia Building Blocks •
Komponen aplikasi multimedia terdiri dari : a. Graphics -
Background
- Organizational chart
-
Photographs
- Line Art
-
Grafik 3 dimensi
- Clip Art
-
Chart
- Buttons
-
Flowchart
-
Tittles
-
Buttons
-
Bullets
-
Paragraphs
-
Scrolling Text
b. Text
c. Video -
Digitized video
-
Video window Æ menampilkan output dari video player
-
Video window Æ menampilkan siaran TV
d. Sound -
Sound effect
-
Naration
-
Audio tracks
-
Background music
-
Background / ambient sounds
e. Animasi -
Path animation (mengubah posisi, gerak)
-
Animasi 2,5 D (bayangan, higklight, perspektif)
-
Animasi 3D Page 28
A. Graphics •
Komponen grafis merupakan unsur yang mendominasi sebuah presentasi multimedia Æ “a picture is worth a thousand words”
•
Kegunaan grafis dalam aplikasi multimedia : a. Sebagai ilustrasi untuk menjelaskan kosep-konsep b. Chart Æ untuk ilustrasi dan meringkas data-data numerik c. Warna, bakground dan icon untuk menyediakan keseragaman dan keberlanjutan dalam aplikasi d. Integrasi dari text, photo, dan grafik untuk mengekspresikan konsep, informasi atau suasana hati e. Menunjukkan image dan budaya perusahaan f. Simulasi dari lingkungan yang ada g. Menjelaskan proses h. Menjelaskan struktur organisasi i. Ilustrasi dari lokasi
•
Jenis-jenis graphics : a. Backgrounds b. Photos c. Grafik 3-dimensi d. Charts (graphs) e. Flow chart f. Organizational charts g. Buttons
Page 29
•
Alur manipulasi graphics dalam pengembangan aplikasi multimedia
Content Specialist
Graphic Artist
Photos and Images
Scan
Multimedia Authoring Specialist
Image editing
Authoring
Logos, graphics, etc Graphic development Colors, backgrounds, textures
Clipart and photo CD collection
1. Backgrounds •
Merupakan tema dari aplikasi yang dibuat
•
Juga menunjukkan kompleksitas produksi khususnya dalam penggunaan grafik 3-dimensi
•
Pemilihan disain background bergantung pada : a. Tema aplikasi b. Kapasitas resolusi warna proyektor atau monito yang digunakan untuk menampilkan aplikasi c. Kapasitas media penyimpan yang digunakan dalam distribusi d. Jumlah text yang akan ditempatkan di depan background, contoh : -
Jika banyak text yang harus ditampilkan Æ background harus sederhana agar text dapat terbaca dengan jelas
Page 30
-
Jika aplikasi akan ditampilkan di internet, maka semakin banyak graphics akan memperlambat waktu download
2. Parameter dalam pemilihan gambar digital : a. Bit / color resolution -
Merupakan ukuran jumlah bit yang disimpan per pixel yang menunjukkan jumlah warna yang dapat ditampilkan dalam waktu bersamaan di layar
-
Ukuran yang ada : 1. 1 bit (1 color, 1 black) 2. 2 bit (4 colors) 3. 4 bit (16 colors) 4. 8 bit (256 colors) 5. 16 bit (65.536 colors) Æ hi-color 6. 24 bit (16.7 million colors) Æ true color
b. Device / output resolution -
Menunjukkan jumlah dots per inch (dpi) yang dapat dihasilkan oleh piranti keluaran seperti monitor, LCD panel, atau video proyektor
-
Contoh : 300-dpi (dots per inch) printer is one that is capable of printing 300 distinct dots in a line 1 inch long. This means it can print 90,000 dots per square inch.
-
Resolusi monitor biasanya 72 dpi
c. Screen resolution -
Menunjukkan jumlah dpi dalam halftone yang digunakan oleh layar untuk menampilkan gambar abu-abu atau separasi warna
-
Resolusi layar diukur dalam satuan lines per inch (lpi)
d. Image resolution -
Menunjukkan jumlah informasi yang tersimpan untuk sebuah warna; diukur dalam satuan pixels per inc (ppi)
-
Semakin tinggi resolusi gambar Æ semakin besar ukuran file Æ semakin lama di-load Æ semakin lama di-print Page 31
•
Contoh ukuran : 640 x 480, 800 x 600, 1024 x 768
TIPS : a. Pada saat men-scan gambar / photo pilih resolusi antara 300 dpi s.d 600 dpi b. Ukuran gambar tidak boleh melebihi resolusi layar, pilihlah ukuran standar 640 x 480 pixel c. Pada saat meng-export gambar ke aplikasi multimedia turunkan resolusi menjadi 72 dpi (menyesuaikan dengan resolusi layar)
3. Format file •
Pada umumnya format file ditentukan oleh pengembang software. Misalnya Apple macintosh menggunakan format PICT sebagai format standar
•
Pengelompokan format gambar : a. Bitmaps -
Adalah gambar yang disimpan sebagai sekumpulan pixel yang bersesuaian dengan grid dari titik-titik pada layar monitor
Format name
Windows Bitmap
File
Type of
Extension
image file
.bmp
Bitmap
Intended puspose
Format paling efisien dalam windows
Drawing Exchange File
.dxp
Vector
Encapsulated Post Script
.eps, .epsf
Vector
GIF
.gif
Bitmap
Graphics
Interchange
Format; banyak dipakai di internet GEM File
.img
Bitmap
Initial Graphic Exchange
.img, .iges
Vector
JPEG
.jpg, .jpeg
Bitmap
Joint Photographic Experts Group; merupakan platform yang independen
MPEG
.mpg, .mpeg Page 32
Bitmap
Auto CAD
.plt
Vector
Photo CD
.pcd
Bitmap
Dikeluarkan Kodak
PICT / PICT2
.pct, .pict
Bitmap
Standar format Macintosh
Targa
.tga
Bitmap
True Vision Targa format; hasil capture dari video
MS Word Meta File
.wmf
Bitmap
Word Perfect Graphics
.wpg
Bitmap
Format
graphics
dari
WordPerfect TIFF
.tif
Bitmap
Tagged Image File Format (TIFF); terlalu banyak subformat
Device-independent bitmap
.dib
Bitmap
Digunakan untuk transfer bitmap dari satu device ke device lain
Paintbrush graphics format
.pcx
Bitmap
Dikeluarkan Paintbrush;
Zsoft untuk
under
DOS PC paint graphics format
.pic
Bitmap
Dikeluarkan oleh PC Paint
Portable Network Graphics
.png
Bitmap
Portable Network Graphics, telah
dipatenkan
mengganti
format
untuk GIF;
disetujui World Wide Web Concortium (W3C)
b. Vector image -
Adalah gambar yang terimpan sebagai persamaan matematik (disebut algoritma) yang menunjukkan kurva, garis, dan bentuk-bentuk lain
-
Mudah untuk diperbesar / diperkecil tanpa menurunkan kualita gambar; ukuran file lebih kecil dibandingkan dengan bitmaps
Page 33
B. Text •
Pada awal sejarah peradaban, manusia telah menggunakan gambar-gambar dan tulisan untuk menceritakan tentang pengalaman, pengetahuan, dan perasaan mereka
•
Teks merupakan alat komunikasi yang utama, jauh sebelum Gutenberg menemukan mesin cetak
•
Dengan perkembangan teknologi Multimedia, teks dapat dikombinasikan dengan media lain dengan cara yang lebih powerful dan bermakna untuk menyajikan informasi dan mengekspresikan perasaan
•
Teks dapat dirancang dengan menggunakan : a. Word Processor (WP) -
Teks dibuat menggunakan WP kemudian di import dari Multimedia Authoring Program seperti Macromedia Director atau Macromedia Authorware dalam format Rich Text Format (RTF)
b. Authoring Software (AS) -
Teks dibuat menggunakan fasilitas text editor yang terdapat dalam program seperti Macromedia Director
•
Hal-hal yang harus diperhatikan dalam menggunakan teks dalam aplikasi multimedia : a. Pahami kegunaan aplikasi yang dibuat b. Jumlah teks yang digunakan c. Jenis / type font yang dipakai d. Ukuran dan warna font
•
Bedakan penggunaan teks untuk : a. Individual user -
Untuk aplikasi multimedia yang digunakan oleh seorang pemakai
dengan
menggunakan
komputer
Æ
gunakan
extensive text dengan ukuran yang lebih kecil dibandingkan untuk group presentation b. Group presentations Page 34
-
Gunakan teks seminimal mungkin; karena yang berbicara adalah presenter / penyaji. Teks hanya sebagai panduan saja
-
Batasi penggunaan teks hanya pada bullet text atau paragraf pendek
-
Ukuran font minimal 24 points
1. Format Text •
Format teks dapat dibagi menjadi 2 bentuk : a. Bullet text -
Berisi teks pendek; diawal dengan simbol-simbol tertentu
-
Digunakan untuk menjelaskan konsep atau menjelaskan suatu maksud
-
Contoh simbol yang digunakan : y, , 1, a, dll
b. Paragraf text -
Merupakan sekumpulan teks; biasanya terdiri lebih dari 1 kalimat
-
Ada 4 bentuk format paragraf, yaitu : left-aligned, right-aligned, centered, justified
•
Untuk paragraf yang panjang Æ gunakan scrolling text
•
Apabila teks di export / ditampilkan sebagai elemen grafis Æ maka text dapat dimanipulasi / ditambahkan efek-efek khusus seperti : blending, strecthing, resizing, changing color, adding fills, and shadows
2. Font type •
Pada umumnya ada 2 type font yang dikenal komputer : a. Bitmap fonts -
Tersimpan sebagai karakter tunggal, yang terdiri dari kumpulan titik-titik yang nampak di layar ketika diperlukan
-
Apabila ukuran font tidak terinstall di komputer maka font akan disesuaikan ukurannya secara matematis sehingga hasilnya kurang bagus
b. Outline fonts (truetype fonts dan multiple master)
Page 35
-
Terdiri dari outlines yang terisi suatu warna / objek yang terbentuk setiap kali digunakan
-
Selalu
kelihatan
halus
dan
bentuknya
rata
berapapun
ukurannya •
Agar font yang digunakan dapat tampil di setiap platform (cross-platform application) maka font harus di convert ke bitmap font
3. Point sizes (pts) •
Point adalah pengukuran tipografi yang kurang lebih setara dengan 1/72 inci
•
Contoh : 4 point Æ 1/72 x 4 = 0,05 inci
4. Format karakter •
Ada beberapa format karakter, yaitu : a. Bold Æ Bold b. Caps / Small caps Æ Caps / SMALL CAPS c. Underline Æ Underline d. Outline Æ e. Condensed Æ Condensed f. Superscript Æ Superscript g. Shadow Æ Shadow h. Emboss Æ EEm mbboossss i. Engrave Æ EEnnggrraavvee j. All caps Æ ALL CAPS k. Italic Æ Italic l.
Subscript Æ Subscript
m. Strikethrough Æ Strikethrough n. Character spacing Æ C h a r a c t e r s p a c i n g o. Color Æ Color p. Double underline Æ Double underline •
Untuk hal-hal tertentu, gunakan gabungan dari beberapa format karakter
•
Untuk penulisan judul presentasi gunakan spasi antar karakter yang berbeda dengan kalimat lain. Defaultnya adalah 1 pts Page 36
4. Font Moods •
Font moods adalah perasaan yang terkait dengan font style yang dipilih, yang dipengaruhi oleh kondisi sosial dan teknologi yang berpengaruh pada disain
•
Digunakan untuk memperjelas pesan yang digunakan
•
Perasaan (moods) dipengaruhi oleh : a. Personal taste (citra diri) b. Experience (pengalaman) c. Educations (pendidikan) d. Cultural backgrounds (latar belakang budaya)
•
Font moods yang sering dipakai : a. Trendy -
Representasi dari hal-hal yang populer pada saat itu
-
Font : impact
b. Nostalgic -
Melambangkan masa-masa kuno, awal abad 20
-
Font : bodoni
c. Traditional -
Menunjukkan perasaan pemakai yang menyenangkan
-
Font : Bookman
d. Classic -
Menunjukkan keseimbangan yang alami / klasik
-
Font : New York
e. Playfull -
Menghibur dan santai
-
Font : Mistral
f. Agresive -
Mengharap perhatian dan tanggapan dari pemakai atau audience
-
Font : Helvetica
g. Friendly -
Nyaman, mudah dibaca, pendekatan secara personal
-
Font : Arial Page 37
h. Informative -
Menunjukkan bahwa penyampaian informasi merupakan tugas yang paling penting
-
Font : Times Roman
i. Sophisticated -
Sesuatu yang cantik dan atraktif
-
Font : Wide Latin
C. Video •
Suara dan video memegang peranan yang sangat penting dalam presentasi multimedia
•
Sound merupakan dimensi aural yang menentukan mood dan tercapainya tujuan presentasi
•
Video telah diperkenalkan kurang lebih 50 tahun yang lalu. Namun hubungan antara video (televisi) dan komputer merupakan hal yang relatif masih baru; sedangkan digital video merupakan teknologi yang lebih baru lagi.
•
Orang akan lebih tertarik dengan aplikasi / presentasi yang menampilkan tayang dalam bentuk video
•
Proses digital video : a. Analog video acquisition -
Pembuatan script, Penyusunan storyboard, pemilihan peraltan untuk pengambilan gambar
b. Capturing and Storing c. Editing and Adding Special effects d. Delivery and Display Format Video •
Video dibedakan dalam dua format, yaitu : a. Analog : NTSC dan PAL b. Digital : MOV, MPG, AVI, ASF, dll
•
Proses mengubah dari analog ke format digital disebut dengan Capturing atau sampling. Proses capturing memerlukan alat yang berupa video capture board atau frame grabber yang dipasang dalam komputer, yang berfungsi untuk merubah sinyal analog menjadi sinyal digital. Page 38
•
Semakin lama durasi video analog Æ semakin beasr RAM dan harddisk yang dibutuhkan untuk menyimpannya dalam format digital. Sebagai ilustrasi : 1 frame digital video dengan kualitas 24 bits membutuhkan sekitar 1 Mb. 10 detik digital video – full screen – full motion memerlukan 300 Mb
•
Video digital mengalami kompresi antara 1/50 hingga 1/200 dari ukuran aslinya JPEG
Joint Photographic Experts Group Rasio kompresi 20 : 1 Merupakan algoritma kompresi yang paling banyak dipakai
MPEG
Moving Picture Experts Group Rasio kompresi 50 : 1; mampu melakukan kompresi hingga 200 : 1 namun mengalami penurunan kualitas gambar
DVI •
Rasio kompresi 80 : 1 hingga 160 : 1
Hal-hal yang perlu diperhatikan dalam mengolah video : o Data transfer rate dari media penyimpan o Ukuran jendela
Merupakan jumlah pixel yang ditampilkan secara horisontal dan vertikal. Ukuran jendela mempengaruhi kualitas video dan kapasitas media penyimpan. Ukuran standard : 160x120, 240x180, 320x240
o Frame rate
Menunjukkan jumlah frame per seconds (fps) selama video dimainkan. Semakin endah frame rate maka semakin cepat data dapat diproses dan semakin kecil ukuran file video. Format standard 24 fps dan 30 fps
o Kualitas gambar dan resolusi
Merupakan kedalaman bit dari format digital yang akan dicapture oleh encoder (codec). Nilai standarnya 8 hingga 24 bits. Semakin rendah angkanya maka jumlah warna yang bisa ditampilkan semakin sedikit, tapi proses transfer semakin cepat. Page 39
Ukuran yang normal : 240x180, 15 hingga 24 fps, CDROM sbg distribusi
o Kapasitas media penyimpan Video Compression Codecs (Compression decompressions device) No.
Codec
1.
Apple
Kegunaan Animation, Hemat media penyimpan, tidak efisien
Apple None 2.
Cinepak
Kualitas CDROM, paling banyak dipakai
3.
H.261
Low-quality video conferencing
4.
H.263
Medium-quality video conferencing
5.
Intel Indeo 3
Medium-quality CDROM video
6.
Intel
Indeo High-quality CDROM video
Interactive 7.
Motion JPEG
General purpose
8.
Photo JPEG
Menghasilkan file yang kecil
9.
MPEG-1
High-quality CDROM video, butuh alat khusus
10.
MPEG-2
High-quality DVDROM video, butuh alat khusus
11.
MPEG-4
High-quality web-based video
12.
Sorenson
High-quality video untuk publikasi di internet & CDROM
D. Animasi A simulation of movement created by displaying a series of pictures, or frames. Cartoons on television is one example of animation. What is Animation? • 50 years ago Walt Disney created animated objects such as Mickey Mouse. • Today the process used to create animated objects has had to change. • In fact, it continues to change. Definition • The word “animation” is a form of “animate,” which means to bring to life. • Animation is the use of computer to create movement on the screen Page 40
• Thus when a multimedia developer wants to bring an image to life, animation is used. • For example, a spinning globe is it better to film the motion on video, or is animation a better solution.
There are four kinds of animation 1. Frame Animation o Makes object by displaying a series of predrawn pictures, called frames, in which the objects appear in different locations on the screen o In a movie, a series of frames moves through the film projector at about 24 fps. Why 24 fps ? because that is the threshold beneath which you would notice flicker or jerkiness on the screen 2. Vector Animation o Vector is a line that has a beginning, a direction, an a length. o Vector animation makes objects move by varying these three parameters for the line segments that define the object o Software : macromedia flash 3. Computational Animation o You move objects across the screen simply by varying their x (horizontal position) and y (vertical position) coordinates. 4. Morphing o Morphing means to transition one shape into another by displaying a series of frames that creates a smooth movement as the first shape transform itself into the other shape o Software: Avid’s Elastic Reality, Black Belt’s WinImages, Gryphon Software’s Morph, Human Software’s Squizz, MorphWizard, Unlead’s MorphStudio
Models 1. Cel models
Page 41
• early animators drew on transparent celluloid sheets or cels, different sheets contained different parts of the scene, which was assembled by overlaying the sheets • in animation, cels are digital images with a transparency channel • scenes are rendered by drawing the cels back to front, with movement being added by changing the position of cels from one frame to the next • a cel model is therefore a set of images, their back to front order, and their relative position and orientation in each frame 2. Scene-based models • simply a sequence of graphics models, each representing a complete scene • highly redundant and do not support continuity of activities 3. Event-based models • expresses the difference between successive scenes as events that transform one scene to the next • still discrete rather than continuous, but permits the management of scenes by input devices (i.e. mouse, tablet, etc.) rather than each scene having to be entered manually 4. Key frames • in essence, the animator models the beginning and end frames of a sequence and lets the computer calculate the others by interpolation 5. Articulated objects & hierarchical models • attempt to overcome the problems of key frames by developing articulated objects, jointed assemblies where the configuration and movement of sub-parts are constrained • ensures proper relative positioning and constraint maintenance during interpolation (will not allow solid objects to pass through other solid objects) 6. Scripting and procedural models • current state-of-the-art animation modelling systems have tools allowing the animator to specify key frames, preview sequences in real time and control the interpolation of model parameters • an additional feature in many such systems are scripting languages Page 42
• scripting languages offer the animator the opportunity to express sequences in concise form, particularly useful for repetitive and structured motion and also provide high-level operations intended specifically for animation 7. Physically-based models & empirical models • this approach is used to produce sequences depicting evolving physical systems • a mathematical model of the system is derived from physical principles or empirical data and the model is then solved, numerically or through simulation, at a sequence of time points, each one resulting in a single frame for the sequence Animation Operation • Graphics operations
since animation models are graphics models extended in time, all the graphics operations we have already covered are applicable here
• Motion and parameter control
since the essential difference between graphics and animation operations is the addition of the temporal dimension, graphics objects become animations through the assignment of complex trajectories or behaviours over time
commercial 3D animation systems provide modelling tools and animation tools, the modelling tools produce 3D graphic models and the animation tools add temporal transformations to these objects
Principles of Animation • Animation is possible because of a biological phenomenon known as persistence of vision And The psychological phenomenon called phi . • An object seen by the human eye remains chemically mapped on the eye’s retina for a brief time after viewing. • Combined with the human mind’s need to conceptually complete a perceived action. Page 43
• This makes it possible for a series of images that are changed very slightly and very rapidly, one after the other, seem like continuous motion . Approaches to animation • Straight ahead Draw/animate one frame at a time Can lead to spontaneity, but is hard to get exactly what you want • Pose-to-pose Top-down process: Plan shots using storyboards -- Plan key poses first -Finally fill in the in-between frames
Keyframe animation • Keyframing is the technique used for pose-to-pose animation o Head animator draws key poses—just enough to indicate what the motion is supposed to be o Assistants do “in-betweening” and draws the rest of the frames o In computer animation substitute “user” and “animation software” o Interpolation is the principal operation
Kinematics • Kinematics is the study of the movement and motion of structures that have joints, such as a walking man. Page 44
o Forward o Inverse • Software: Fractal Design’s Poser • Sample : robotics
Animation Principles • Timing • Ease in/Out • Moving in arcs • Anticipation • Follow through • Staging • Weight Animation Techniques • Computers have taken a great deal of handwork out of the animation and rendering process. • And commercial films such as Jurassic Park, Beauty and the Beast, Toy Story, and Shrek have utilized the power of the computers. Motion Capture • A method for creating complex motion quickly: measure it from the real world
Page 45
Page 46
• Types :
Page 47
Motion capture data processing • Marker identification: which marker is which o Start with standard rest pose o Track forward through time (but watch for markers dropping out due to occlusion!) • Calibration: match skeleton, find offsets to markers o Use a short sequence that exercises all DOFs (degrees of freedom) of the subject o A nonlinear minimization problem • Computing joint angles: explain data using skeleton DOFs o A inverse kinematics problem per frame!
Basic surface deformation methods • Mesh skinning: deform a mesh based on an underlying skeleton • Blend shapes: make a mesh by combining several meshes
Both use simple linear algebra • Easy to implement—first thing to try • Fast to run—used in games
Page 48
Page 49
2-D Animation 1. Cel animation • Made famous by Disney • 24 frames per second therefore a minute may require as many as 1,440 separate frames. • Cel animation: is based on changes that occur from one frame to the next. • Cel stands for celluloid which is a clear sheet with images drawn on them. • The celluloid images are place on a background that is usually stationary. • The background remain fixed as the images changes.
2. Path animation • Moves an object along a predetermined path on the screen • The path can be a straight line or have a number of curves. • Starts with keyframes (the first and last frame of an action). • The series of frames in between the keyframes are drawn in a process called tweening. • Tweening requires calculating the number of frames between keyframes and the path the action takes, and then actually takes, and then sketches a series of progressively different outlines.
Computer Animation • Typically employees the same logic and procedural concepts as cel animation • You can usually set your own frame rate • At 15 frames a second the animation may appear jerky and slow • 2-D animation can be an acceptable alternative to the expense of creating video 3-D Animation • 3-D Animation involves three steps: modeling, animation, and rendering o Modeling – the process of creating objects and scenes o Animation – the process of defining the object’s motion o Rendering – the final step in creating 3-D animation. 2 basic forms: Page 50
real-time - model is rendered as frames are displayed, 10+ frames per second are required to avoid jerkiness, so only appropriate for simple models or with special hardware
non-real-time -frames are pre-rendered, taking as long as necessary to do so, provides higher visual quality and consistency of frame-rate
Page 51
Animation File Formats Software Director Animator Pro Studio Max SuperCard and Director Windows Audio Video Interleaved Macintosh Motion Video CompuServe Flash Shockwave
File Format .dir & .dcr .fli .max .pics .avi .qt & .mov .mpeg .gif .swf .dcr
E. Digital audio • Digital Audio Representation 2 main areas : o telecommunications o entertainment (audio CD) • Produced by sampling a continuous signal generated by a sound source. An analog-to-digital
converter
(ADC)
takes
as
input
an
electrical
signal
corresponding to the sound and converts it into a digital data stream. The reverse process, to generate the sound through an amplifier and speakers, involves a digital-to-analog converter (DAC)
Sampling • Sampling frequency (rate) o sampling theory shows that a signal can be reproduced without error from a set of samples, providing the sampling frequency is at least twice the highest frequency present in the original signal o telephone networks allocate a 3.4kHz bandwidth to voice-grade lines, thus a sampling rate of 8kHz is used for digital telecommunications o the human ear is sensitive to frequencies of up to about 20kHz, so to digitise any perceivable sound a sampling rate of over 40kHz is required • Sample size and quantisation o during sampling, the continuously varying amplitude of the analog signal is approximated by digital values, this introduces a quantisation error, being the difference between the actual amplitude and the digital approximation Page 52
o quantisation error is apparent when the signal is reconverted to analog form as distortion, a loss in audio quality o quantisation error can be reduced by increasing the sample size, as allowing more bits per sample will improve the accuracy of the approximation Quantisation • Quantisation refers to breaking the continuous range of the analog signal into a number of unique digital intervals, based on one of a number of schemes: o linear quantisation - uses equally spaced intervals, so if the sample size is 3 bits and the maximum signal variation is 5.0 then the quantisation interval would be 0.625 units of signal amplitude o nonlinear quantisation (especially logarithmic quantisation) - uses nonequally spaced intervals, lower amplitude intervals are more closely spaced than higher amplitude, results in greater sensitivity to lower amplitude sound where the human ear is most sensitive • Number of channels (tracks) o speech quality audio is mono (1 track) o stereo audio requires 2 tracks o some consumer audio equipment use 4 tracks (quadrophonic) o professional audio equipment uses 16, 32 or more
Digital audio format • Interleaving o a multi-channel audio value can be encoded by interleaving channel samples or by providing separate streams for each channel o the advantage of interleaving is in synchronisation, and it also offers some benefits in storage and transmission o the disadvantages of interleaving are that it can be wasteful of space or bandwidth if not all channels are needed, it freezes the synchronisation
Page 53
between channels thus preventing temporal shifts, and it may not allow variation in the number of channels • Negative samples o the voltages found in analog audio signals alternate between positive and negative values o negative values can be encoded successfully for processing in twos complement, ones complement or sign-magnitude representation
Encoding • Encoding audio data reduces storage and transmission costs, and compressed audio also provides better quality when compared to uncompressed audio at the same data rate • 2 commonly-used methods: o PCM (Pulse Code Modulation) - uses the fact that a digital signal can be formed from a series of pulses (see diagram). PCM values are simply sequences of uncompressed samples, so they provide a reference format for comparison with more complex coding methods o ADPCM (Adaptive Delta Pulse Code Modulation) - reduces PCM data rate by encoding the differences between samples. ADPCM is widely used and is associated with some encoding standards, such as CCITT G.721 Digital Audio Operations • Storage o it is possible to record digital audio, even at the data rates of the high quality formats, on general purpose magnetic storage o theoretically, a magnetic disk with a sustainable transfer rate of 5 Mbytes per second could playback 50 channels of CD-quality digital audio. In practice this would not be possible without a highly optimised layout, but one or two channels are easily within the reach of small computer systems o since an hour of stereo digital audio, at the CD data rate, requires over half a Gigabyte of storage, tertiary storage in the form of DAT tapes, CD discs or optical disks is normally adopted, with the information being mounted onto the system manually or through a jukebox Page 54
Retrieval • Need to support random access and ensure continuous flow of data to DAC • portions of audio sequences, segments, are identified by their starting time and duration, these can be located is by mapping the starting time to a segment address, which the file system then maps to a physical address on disk o where there is no direct mapping to enable segment location by time code, an index of segments must be separately maintained o continuous flow of data is easy to maintain with a dedicated storage system, but requires careful control where storage is scheduled for a number of such tasks
Editing • as with digital video, 2 types : o tape-based o disk-based • to avoid audible clicks when inserting one sample into another, cross-fades are used, where the amplitudes of the original segment and the inserted segment are added and scaled about the insertion point • digital audio also supports non-destructive editing, where the segments of data are accessed through a data structure known as a play-list, which essentially contains a set of pointers to the data and details on ordering and other forms of edit to be performed on the data when it is joined
Effects • Effects and filtering o digital filtering techniques permit a number of effects on audio : -
Delay
-
Equalisation & Normalisation
-
Noise reduction & Time compression and expansion
-
Pitch shifting
-
Stereoisation Page 55
-
Acoustic environments
• Conversion o one format to another (uncompressing ADPCM Æ PCM) o altering encoding parameters (i.e. resampling at lower frequency)
MIDI • the Musical Instrument Digital Interface was developed in the early ‘80s by musical equipment makers Devices : o electronic keyboards and synthesisers o drum machines o sequencers (to record and play back MIDI messages) o music<->film and music<->video synchronisation equipment • MIDI Concepts: o Channel - a MIDI connection has 16 message channels, devices can be set to respond to all channels or only to specific channels o Key number - notes are identified by key number, 128 compared with a standard keyboard of 88 o Controller - 128 different controllers are available under the MIDI protocol, though not all are currently defined, changing the value of a controller typically alters sound production o Patch/program - an audio palette is called a program or patch, a synthesiser capable of having a number of patches active at the same time is called multi-timbral o Polyphony - the ability of a synthesiser to play many notes at a time o Song - a recorded or preprogrammed MIDI sequence o Timing clock - a MIDI sequencer timestamps messages using a timebase measured in parts per quarter note (PPQ). Typical timebase values are 24, 96 and 480 PPQ. To convert the timebase into actual time you use the tempo, measured in beats per minute (BPM) where we assume that one Page 56
beat is equal to a quarter note. Thus if we have a tempo of 180 BPM, a time base of 96PPQ = 1/3 x 1/96 = 3.47ms o MIDI synchronisation - MIDI devices can be set to internal synch or external synch, when set to internal synch a device is known as a master and produces a timing clock message on its MIDI OUT at 24PPQ which slave devices use for external synch o MTC - MIDI Time Code is used to synchronise MIDI with film or video, used to trigger sound effects or musical sequences • Limitations of MIDI : o operates at 31250bps, allows 500 notes per second which may not be enough for complex pieces o limited number of channels, lack of device addressing and other flaws make configuring large MIDI networks difficult o device dependence of MIDI data
Page 57
BAB VIII PERANGKAT KERAS MULTIMEDIA
a. Standards -
Computer industry is lacking standardization in multimedia
-
Compatibility with other peripherals or later models can often not be guaranteed
-
As a result of this, consumers are often hesitant to buy computer hardware due to lack of standardization
-
Multiple standards in Multimedia will exist for the foreseeable future
-
Keep abreast of emerging standards
-
Purchase products that follow those standards
Organizations and Standardization -
World Wide Web Consortium (W3C)
-
Internet Engineering Task Force (ITTF)
-
Internet Society (ISOC)
-
International Organization for Standardization (ISO)
b. Komputer Multimedia -
Central Processor a. Performs computations b. Processor name indicates the type and speed
-
RAM a. Random access memory b. Measured in MB
-
Color Display a. Come in various sizes b. Number of pixels and number of colors define the quality of the image
-
Pointing Device a. Mouse Page 58
b. Trackballs c. TrackPoint -
Expansion Slot : -
USB a. Universal Serial Bus b. Up to 128 devices can be installed at once
-
SCSI a. Small Computer System Interface b. Up to 8 devices can be daisychained
-
FireWire a. High-speed serial technology originally developed for MacIntosh
-
Hold circuit cards
-
Cards add functionality to a PC
-
ISA and PCI slots
c. Aksesories - Video Overlay: allows a computer to display common video sources including video cameras, VCR’s and video disc simultaneously. a. Multiple inputs, frame grab, TV tuner, Video for Windows, Memory conflicts, Video adapter compatibility b. Check PC World - Digital Video - TV Tuner - MIDI - MIDI kit by Midisoft c. www.rolandus.com laptops Page 59
-
-
-
-
d. www.midisoft.com VideoDisc CD-ROM a. Original CD-ROM read computer data at 150KB/second b. Speed is now expressed as a multiple of the original speed (e.g 8x, 40x) DVD a. Successor of CD-ROM b. Double-sided, dual-layer holds up to 17GB Digital Audio a. 8-bit sound has a dynamic range of 50dB b. 16-bit sound has a dynamic range of 98dB Audio speakers a. Stereo speakers b. Surround sound
z Graphics Accelerator – Additional RAM dedicated to graphics processing z Video Overlay – Allows to display common video sources
Page 60
z MIDI – Musical Instrument Digital Interface – Required according to multimedia PC definition z MPEG – Motion Picture Experts Group – Four versions of MPEG – Latest version is MPEG-4 d. Storage - Hard Disk Drive a. Purchase as much capacity as possible b. Measured in MB or GB - Iomega ZIP Disk and Jaz Disk a. Zip disks hold up to 250MB b. Jaz disks hold up to 2GB - Recordable CD-ROM a. CD-R b. Stores about 650MB c. Cost-effective way of backing up data - Recordable DVD a. DVD-R b. Stores up to 17GB e. Input device - Multimedia Keyboards - Mice, Trackballs, Touch screens - Magnetic Card Encoders and Readers - Graphic Tablets Page 61
-
Scanners OCR Devices Infrared Remotes Voice Recognition Systems Digital Cameras
f. Output device - Audio Devices - Amplifiers and Speakers - Monitors - Video Devices - Projectors a. Luminance b. Chrominance - Printers
Page 62
BAB IX
MENDISAIN MULTIMEDIA INTERAKTIF 1. Tahap-tahap sebuah proyek multimedia Ada 4 tahap dasar dalam proyek multimedia : Perencanaan dan pembiayaan - Kembangkan grafis kreatif yang enak dilihat, didengar dan dirasakan - Kembangkan struktur dan sistem navigasi yang menarik minat pemakai untuk melihat isinya - Susunlah sebuah prototipe untuk memperhitungkan waktu dan biaya Disain dan produksi - Lakukan setiap rencana yang dibuat untuk membuat produk jadi - Mintalah sebanyak mungkin umpan balik dari klien / pemakai sampai ditemukan bentuk yang “pas” Pengujian - Diperlukan untuk memastikan aplikasi dapat berjalan mulus pada platform yang telah ditentukan dengan spesifikasi yang minimal Pengiriman - Kemas aplikasi dalam disain yang menarik - Bungkus juga menentukan isinya 2. Ketrampilan multimedia : kreatifitas • Aset yang paling berharga yang harus dibawa dalam proyek multimedia adalah kreativitas. Inilah yang membedakan multimedia yang biasa-biasa saja dengan multimedia yang “memiliki citarasa” • Kreativitas dapat diperoleh melalui pengalaman empiris yang terus menerus diasah dan diperkaya. Semakin banyak pengalaman yang diperoleh maka semakin banyak inspirasi yang muncul • Sangat sulit untuk mempelajari kreativitas, bahkan tidak mungkin dipelajari. Namun, semakin baik anda mengenal medium, maka semakin mudah untuk menuangkan ekspresi anda. Ini berarti anda harus kuasai dengan mahir hardware dan software dalam pembuatan multimedia interaktif sehingga dapat dihasilkan multimedia yang atraktif dan menggugah pemakai • Untuk membuat multimedia yang bagus, diperlukan bermacam-macam ketrampilan yang sama—pengetahun yang mendetail mengenai komputer, teks, seni grafis, suara, video, dan animasi. Ketrampilan tersebut (skill set multimedia) dapat diperoleh dari satu individu atau sekumpulan orang, dimana tugas-tugas dapat diserahkan kepada ahlinya 3. Audiens sasaran • Sebuah aplikasi multimedia harus memiliki audiens sasaran dan platform yang jelas. Ketika kapabilitas multimedia pengguna akhir memiliki range yang luas dan tak terbatas, maka harus disebutkan spesifikasi hardware dan software yang diperlukan Page 63
4. Disain - Strategi • Mendisain sebuah aplikasi multimedia tidak akan pernah selesai sampai produk tersebut benar-benar jadi dan dikirimkan ke klien • Produk yang terbaik biasanya merupakan hasil modifikasi dan umpan balik berkesinambungan yang diimplementasikan di seluruh proses produksi. Namun, terlalu banyak umpan balik dapat menghancurkan proyek, menghabiskan waktu dan biaya • Mendisain berarti berpikir, memilih, membuat dan mengerjakan. Kuncinya adalah bagaimana mewujudkan ide dan gagasan mendekati kenyataan • Ada dua pendekatan dalam membuat sebuah disain multimedia interaktif : Membuat storyboard yang detil – dengan menggunakan katakata dan sketsa untuk setiap komponen multimedia. Pendekatan ini cocok untuk tim yang memiliki personil dengan keahlian yang lengkap Membuat storyboard yang tidak mendetil sebagai acuan skematis kasar – untuk kemudian diterjemahkan pada saat proses produksi -
Struktur • Peta navigasi (site map) menggambarkan hubungan diantara bermacam area untuk membantu mengorganisasi isi dan pesan. Sebuah site map menyajikan daftar isi dan sebuah bagan aliran logis (logic flow) antarmuka interaktif • Ada 4 struktur dasar proyek multimedia : 1. Linier Æ pengguna melakukan navigasi secara berurutan, dari frame atau informasi satu ke yang lainnya 2. Hierarkis Æ disebut juga linier dengan percabangan; pengguna melakukan navigasi disepanjang cabang struktur yang terbentuk oleh alur dari isi
Page 64
3. Non-linier Æ pengguna melakukan navigasi dengan bebas melalui isi proyek, tidak terikat dengan rute yang telah ditetapkan sebelumnya
4. Komposit (campuran) Æ pengguna melakukan navigasi dengan bebas, tapi terkadang dibatasi oleh presentasi linier film atau informasi kritis dalam suatu hierarki
• Menurut Prof. Judith Junger dari Open University di Amsterdam, ada dua tipe struktur : Struktur dalam Æ menyajikan peta navigasi lengkap dan menjelaskan semua link antara semua komponen Struktur permukaan Æ menjelaskan struktur yang sesungguhnya dipahami oleh seorang pengguna ketika sedang melakukan navigasi struktur dalam Contoh : b a
c
Struktur dalam
d
a
d
c
a
Struktur permukaan Page 65
b
Struktur permukaan berguna untuk melakukan pelacakan rute pengguna melalui situs web untuk menentukan efektivitas disain situs dan untuk mengetahui preferensi pengguna
• Antarmuka pengguna Merupakan perpaduan dari elemen grafis dan sistem navigasi Agar antarmuka anda berhasil, maka disain harus konsisten dalam tampilan maupun perilaku. Sebuah efek visual dan animasi akan memberikan sebuah petunjuk untuk membuat perubahan layar lebih kelihatan Tips : 1. Hindari perintah tersembunyi dan kombinasi tombol yang tidak biasa 2. Buatlah bermacam-macam pilihan yang tersedia dengan mudah 3. Berilah pemakai kesempatan untuk keluar dari keadaan sulit (Cancel) 4. Antarmuka harus tetap simple, bersahabat dan banyak white space (area non-informasi) 5. Hindari pemakaian warna yang berlebihan
Page 66
BAB X AUTHORING SOFTWARE
Authoring Multimedia authoring requires you to develop all the multimedia building blocks and then import and integrate all these elements into a comprehensive and possibly interactive application.
With Multimedia Authoring Tools You Can Make a. Video productions b. Animations c. Games d. Demo disks and interactive guided tours e. Presentations f. Interactive kiosk application g. Interactive training h. Simulations, prototypes, and technical visualizations
Authoring Systems -
Full-fledged application development tools that let you present material, ask questions about it, evaluate user input, and branch accordingly are called authoring systems.
-
Graphically oriented packages have cut the tedious and time consuming process down.
The Right Tool for the Right Job -
Editing Features
-
Organizing Features
-
Organizing Features
-
Programming Features
-
Interactivity Features Page 67
-
Performance Tuning Features
-
Playback Features
-
Delivery Features
-
Cross-Platform Features
-
Internet Playability
Hypermedia Programs
Hypermedia programs go beyond the linear slide-show
Provide an infinite capability to link objects and enable users to navigate
Examples: -
HyperCard
-
ToolBook
-
HyperStudio - easiest and most powerful programs for use in schools
Page 68
Met·a·phor
A figure of speech in which a word or phrase that ordinarily designates one thing is used to designate another, thus making an implicit comparison, as in “a sea of troubles” or “All the world's a stage” (Shakespeare).
One thing conceived as representing another; a symbol: “A trash can on the desktop represents file deletion”
Classification of Authoring Tools
All multimedia tools are based on a metaphor.
The metaphor is used to convey the way the program organizes elements, sequences events, and delivers the multimedia application.
The Four Metaphors Are: a. Time based and presentation tools : Director b. Card-based or page-based relational databases : Hypercard, and ToolBook c. Icon-based, event-driven tools (logic flow) : Authorware, IconAuthor, and Quest d. Object-oriented tools : mTropolis, QuarkImmedia, and MediaForge
Icon-based Authoring Systems
Icons give developer capability to present a logical flow of events visu-ally by dragging icons from an icon menu. Icons represent multimedia tools.
Examples include: Authorware, HSC interactive, conAuthor, Quest.
Object Oriented Metaphor
Director also has a full-featured scripting language called lingo.
mTropolis
QuarkImmedia
MediaForge
Visual Basic
Page 69
Classification by Tool Capability and Complexity
Multimedia-capable presentation tools
Dedicated media integration tools
Professional multimedia development tools
Presentation Packages
Linear
PowerPoint: 42% for presentation 68% for printed handouts -
Most widely used
-
Slide show metaphor
Compel Asymmetrix
Persuasion from Aldus
Lotus Freelance Graphics
WordPerfect Presentation
Harvard Graphics.
Dedicated Media Integration Tools
Cannot develop multimedia elements
They are used to import multimedia elements
Examples: IBM’s storyboard live!, Asymmetric’s media blitz!, And passport design’s passport producer
Professional Multimedia Development Tools
Macromedia’s director and Authorware
Asymmetric’s Toolbook,
Apple’s HyperCard
Aimtech’s IconAuthor
Page 70
BAB XI STORYBOARDING What do we mean by the term “Storyboarding”?
Storyboarding is a powerful and simple technique for capturing ideas about the form and appearance of a system
Derived from film and video production
In planning a scene, a storyboard is created representing the different shots that will be linked together to form the scene.
In multimedia design we can use a line drawing to identify the main features of one screen, drawn at a chosen level of precision. A series of such drawings can be linked together to illustrate the links and transitions between screens.
We start by developing a navigational structure, for the presentation itself
What is a storyboard
The Storyboard actually begins life in the description of the goals of the project itself.
The clients descriptions of their requirements can be divided into : -
the context of the application (metaphor(s))
-
the content of the application
-
the goals and anticipated outcomes of the project
-
functionality additional to the standard interactivity controls provided for multimedia applications
-
multimedia/hypermedia requirements
Specification
From this information an initial specification can be developed : o described in film/video development as an application script o outlines the project goals in terms of: -
development of context and context-related material
-
incorporation of existing content Page 71
-
identification of new content to be developed
-
use of multimedia and hypermedia to support/provide context and content
o structure of the program can be described in terms of: -
standard interface components
-
interactivity controls
-
additional specific functionality
o describes anticipated outcomes in terms of: -
testing and evaluation strategy
-
user acceptance testing
Page 72
Outline of storyboard
From the initial specification, an outline can be developed: o uses same basic technique as outlining content for an essay, identifying main sections of the content under specified heading, then identifying subsections and subsection headings within each section, and so on o only major difference is that it translates the outline structure (the content entries) into branches (points of decision) on the screen o thus the major headings in the outline become the options available to the user in the main menu of the program, subheadings form subsidiary menus on branched screens, etc o this branching provides a halfway-house between the linearity of a standard film/video outline and the full hypermedia web, which includes lateral as well as hierarchical links.
Page 73
Logic flow chart
From the specification and the outline, a logic flow chart is developed: o provides a map of the proposed system, to support multimedia authoring o illustrates the choices available to the user from each screen
The storyboard itself is a graphic representation of the proposed multimedia application, essentially a rendition of the specification : o can use standard templates o supports the development of hypermedia linking, at screen level o provides a history of the development of the design of the application, through the production log
Page 74
BAB XII FUTURE TRENDS Why Is Multimedia Important? • A fast emerging basic skill • Adds dimensions • Is a dynamic experience • Allows cross-referencing through linking • Information Superhighway
Multimedia Is Highly Effective z People retain –
20% of what they see
–
30% of what they hear
–
50% of what they see and hear
–
80% of what they see, hear, and do simultaneously
How Fast Is Multimedia Growing? • At the end of the twentieth century nearly two-thirds of U.S households have home computers • Digital divide is narrowing • eMarketer forecasts 350 million Internet users by 2003 • Multimedia Growth is fueled by:
Advances in technology
Price wars
New tools enabling more people to become developers
Page 75
How Is Multimedia Changing the World? z Mergers and Alliances z Telecommuting z Home Shopping z Business and Advertising z Electronic Publishing z Teaching and Learning z Mass Media Who Needs to Know About Multimedia? z Who needed to know how to read books after the printing press was invented? z Who needed to know how to drive cars after highways got built? z Who needed to know how to call someone when telephones were invented? z Anyone who plans to learn, teach, work, play, govern, serve, buy, or sell in the information society needs to know about multimedia
Page 76
