MULTIMEDIA SYSTEMS

Bab 1 - Multimedia

Definisi
- Multimedia: kombinasi dari media (teks, gambar, suara, animasi, dan video) yang
dimanipulasi secara digital
- Interactive Multimedia: multimedia yang bisa membuat user memiliki kontrol terhadap
multimedia tersebut
- Hypermedia: Struktur dari elemen yang berhubungan dalam interactive multimedia
dimana user dapat melakukan navigasi
Penggunaan

Example of using Multimedia in School:

- E-learning
- Interactive Magazine and Newsletters
- Interactive TV: widely used among campuses to join different students from different
location into one class with one teacher.

Example of Using Multimedia in Public Space:

– KiosK in Hotel, airport, train stations, shopping malls, museum, libraries, and grocery
stores.
– Mobile apps
Virtual Reality: pertemuan dari teknologi dan penemuan kreatif dalam multimedia yang berada
di virtual environment
Augmented Reality: virtual component + real environment

Bab 2 - Text

Definisi
- Text: Media yang digunakan untuk menyampaikan pendapat, ide, dan fakta dalam bentuk
kata, kalimat, atau paragraf.
- Face/TypeFace: Family dari karakter grafik termasuk banyak size dan styles.
- Font: Koleksi dari karakter dari satu size dan style milik typeface family tertentu. Font
style = Boldface, Italic, Underlining, Outlining of Characters

Pengukuran dan Anatomi dari Type

 - X-height: jarak dari baseline - meanline
- Cap height: tinggi dari karakter uppercase diukur dari base line
- Set width: panjang horizontal dari karakter
- Point size: satuan pengukuran ukuran type yang diukur dari ascender - descender. 1 point
= 0.0138 inch
- Baseline: garis tembus pandang dimana huruf berjejer
- Mean line: garis imajiner yang berada di atas huruf lowercase yang tidak memiliki
ascender
- Descender: vertical stroke dari lowercase yang memanjang kebawah baseline
- Ascender: vertical stroke dari lowercase yang memanjang ke atas mean line
- Serif: detail yang tidak berstruktur di ujung strokes
- Counter: Ruang yang sepenuhnya/sebagian tertutup dalam huruf

- Shoulder: stroke melengkung yang berasal dari stem

Character Metric
Character metric adalah pengukuran umum yang diaplikasikan pada satu karakter
 - Kerning: proses menyesuaikan spasi antar dua huruf dan tidak selalu digunakan untuk
semua huruf
- Tracking: proses menyesuaikan spasi antar huruf
- Leading: proses menyesuaikan spasi di antara baris text dari baseline baris pertama
sampai baseline baris kedua

Kategori Typeface
● Serif
- Ciri-ciri: sedikit dekorasi di akhir stroke huruf
- Kegunaan: dalam dokumen atau layar yang menampilkan banyak teks
- Contoh: Times, Garamond, Century, Playfair, dll
● Sans Serif
- Ciri-ciri: tampilan bersih dan tegas
- Kegunaan: dalam display komputer karena kontras yang tajam
- Contoh: Arial, Helvetica, Futura, Roboto, Myriad, dll
Simbol: memiliki makna yang diketahui secara umum dan dibuat melalui kesepakatan
Icon: memiliki makna yang hanya diketahui segelintir orang
Guidelines untuk Menggunakan Teks
- Selektif
 - Singkat
- Bisa dibaca
- Konsisten
- Hati-hati
- Hormat
- Gabungkan teks dengan media lain
- Buat teks interaktif
Cara memilih Font Teks
- Untuk tipe kecil, gunakan font yang paling mudah dibaca, font decoratif
kurang berguna
- Gunakan beberapa faces berbeda, style, untuk banyak font yang disebut
ransom-note typography.
- Di blok teks, sesuaikan leading, sesuaikan dengan spasi baris
- Ukuran bervariasi sesuai penggunaan untuk pengiriman pesan
- Sesuaikan jarak antar huruf (kerning) untuk tajuk berita (HEADLINE) besar
- Jelajahi efek warna yang berbeda di latar belakang yang berbeda
- Menggunakan anti-aliasing untuk teks yang lembut dan tercampur

Bab 3 - Image

Definisi
Image adalah representasi visual dan grafikal yang memiliki informasi yang dapat ditampilkan
secara digital maupun fisik

Perbedaan antara Image, Photo, dan Picture

● Image - Any visual object that has been modified or altered by a computer or an imaginary
object has been created using a computer.
● Photo or photograph - Anything taken by a camera, digital camera, or photocopier.
● Picture - A drawing, painting, or other artwork created on a computer. A picture is also
used to describe anything created using a camera or scanner.
Tipe Media Image
● Bitmap/Raster image (painting program)
- Kegunaan: photorealistic images dan gambar rumit yang membutuhkan detail
● Vector image (drawing program)
- Kegunaan: membuat garis, kotak, lingkaran, poligon, dan bentuk grafik lainnya yang
bisa dibentuk secara matematis dalam wujud sudut, koordinat, dan jarak

Bitmap Image
- Bitmap image adalah image yang terdiri dari banyak pixel dan ditampilkan di layar atau
dicetak
- Umumnya setiap bit di set dalam warna hitam dan putih (thresholding iz here)
- Matriks berukuran 1 dimensi (1-bit depth) digunakan untuk menampilkan image
monokrom
- Bit depth dan warna yang dapat dihasilkan:

Bit depth Number of Colors Possible

1 bit 2 (2^1)

2 bit 4 (2^2)

4 bit 16 (2^4)

8 bit 256 (2^8)

- Software-software pengolah bitmap: Ms. Paint, Adobe Photoshop, Adobe Photoshop

Elements, Affinity Photo
- Faktor-faktor yang mempengaruhi kualitas bitmap image:
1. Spatial resolution: Semakin tinggi spatial resolutions, semakin detail, tajam, dan
akurat image yang dihasilkan
 2. Color resolution: satuan banyak warna yang dapat ditampilkan dalam 1 pixel
- Satuan pengukuran spatial resolution:
● Secara digital menggunakan satuan ppi (pixel per inch)
● Secara fisik (image dicetak) menggunakan satuan dpi (dots per inch)
- Efek dari low color resolution(sedikit warna yang ada):
● Jika image yang ditampilkan memiliki sedikit warna, maka low color resolution
bukanlah masalah
● Umumnya diatasi dengan color indexing atau dithering
● Color Indexing: memilih palette color yang spesifik untuk optimisasi penampilan
dari image beresolusi rendah
● Dithering: proses menggabungkan pixel yang berbeda warna untuk menghasilkan
warna lain yang tidak ada
● Color indexing dan dithering masih menjadi pertimbangan yang penting untuk
developer yang ingin memperkecil image file size untuk mengoptimisasi performa
aplikasi mereka, terutama di web
Vector Image
- Vector image adalah image yang dibentuk dari sebuah garis yang dideskripsikan oleh
lokasi dua titik terakhirnya disusun dengan rumus matematika
- Vector drawing menggunakan koordinat Cartesian dimana sepasang angka
mendeskripsikan sebuah titik dalam ruangan 2 dimensi sebagai titik potong dari sumbu x
dan y
- Software-software pengolah vector: Adobe Illustrator, Adobe Freehand, Adobe Flash,
Corel Draw, Affinity Designer
Konversi dari Bitmap ke Vector dan Sebaliknya
- Autotracing: mengubah grafik bitmap ke vector image. File autotracing berguna di
aplikasi berbasis web dimana file sizenya yang kecil mengurangi waktu download
 - Rasterizing: mengubah grafik vector ke bitmap image

Perbandingan Image Bitmap dan Vector

Bitmap Vector

Kelebihan - Representasi image yang akurat
dan realistis. Cth: foto
- Full-featured photo editing
(sizing, cropping, tone, color,
adjustments)
- Artistic effect yang banyak
- Editing lebih presisi
- Scaling dan reshaping yang halus
- Mengedit object lebih mudah
- File size kecil
- Tidak bergantung pada resolusi
device

Kekurangan - File size besar - Representasi image yang kurang

- Kehilangan presisi jika di scale akurat dan cenderung artifisial
atau rotate - Tidak memiliki kapabilitas photo-
- Bergantung pada resolusi device editing
- Kontrol artistik yang terbatas

Tahapan Pembuatan Image 3D

- Modeling: mendefinisikan objek dalam bentuk 3 dimensi tetapi bukan tesktur
permukaannya
- Surface definition: memperjelas tekstur lalu diaplikasikan ke permukaan model
- Scene composition: objek disusun, background dan efek lingkungan ditambahkan, dan
pencahayaan dimasukkan
- Rendering: komputer menggunakan algoritma rumit untuk menerapkan efek yang sudah
dibentuk terhadap objek
Aplikasi pengolah image 3D: Blender, Z-Brush, dan Autodesk 3dsMax
Warna
Warna adalah frekuensi gelombang cahaya dalam pita dari spektrum elektromagnetik yang
mata manusia respon

Metode dalam Membuat Warna

- Additive Color
● Definisi: Warna yang dibuat dengan menggabungkan sumber cahaya berwarna dalam
3 warna primer: Red, Green, dan Blue (RGB)
● Kegunaan: untuk ditampilkan di monitor
- Subtractive Color
● Definisi: Warna yang dibuat dengan menggabungkan media yang diwarnai seperti
lukisan atau tinta yang menyerap beberapa bagian dari spektrum cahaya warna dan
memantulkan yang lain ke mata. 4 warna untuk mencetak: Cyan, Magenta, Yellow,
dan Black (CMYK)
● Kegunaan: untuk dicetak

Image File Format

- Bitmap
● JPEG/JPG(Joint Photographic Experts Group): format file yang paling sering
digunakan dan menggunakan lossy compression
● TIFF(Tagged Image File Format): format fleksibel yang umumnya digunakan di
desktop publishing packages
● GIF(Graphics Interchange Format): file format yang memiliki kapabilitas animasi
sehingga umumnya digunakan untuk membuat image dengan efek animasi
● PNG(Portable Network Graphics): file format yang mendukung 8 bit paletted
images dengan transparansi untuk semua warna palet dan menggunakan lossless
compression
○ PSD: format file yang dihasilkan aplikasi Adobe Photoshop
- Vector
 ● SVG(Scalable Vector Graphics): standar file format vector yang berbasis XML
untuk membentuk gambar dua dimensi dengan dukungan untuk interaktivitas dan
animasi
● AI: format file yang dihasilkan aplikasi Adobe Illustrator
● CDR: format file yang dihasilkan aplikasi Corel Draw
● 3DS: format file yang dihasilkan aplikasi Autodesk 3ds Max

Terminologi Warna dalam Desain Grafis

- Warna primer (warna utama seperti RGB, dan CMYK)
- Warna sekunder (campuran dua warna primer)
- Warna tersier (campuran dua warna sekunder)
- Tints (campuran suatu warna dengan putih)
- Shades (campuran suatu warna dengan hitam)
- Warna monokromatik (warna primer yang dicampurkan dengan warna putih atau hitam
sehingga dihasilkan warna dengan intensitas serta value yang berbeda)
- Warna analog (kombinasi yang melibatkan dua atau tiga corak warna yang posisinya
berdekatan di lingkaran warna) (biru dengan biru violet)
- Warna komplementer (Sepasang warna yang saling meniadakan ketika dicampur)

Guidelines for Use Graphics

- Identifikasi tujuan dari pembuatan grafik
- Pilih format terbaik untuk setiap gambar
- Cocokkan desain grafis dengan tujuan
- Tempatkan desain grafis dengan tujuan
- Pertahankan kualitas gambar
- Gunakan grafik secara efisien
- Atur grafik.
Bab 4 - Audio

Definisi
Audio adalah getaran rapat yang ditransmisikan sebagai variasi tekanan udara yang
membentuk gelombang.
Gelombang suara dibentuk dari: noise, spoken word, voices, dan music.
Gelombang sine adalah gelombang yang secara teratur mengulangi transisi halus dari tekanan
tinggi ke rendah

Gelombang sine menangkap 3 fitur penting dari suara:

- Amplitudo: pengukuran dari tekanan suara/ banyak energi yang berasosiasi dengan suara
(Db=decibel)
- Frekuensi: banyak gelombang yang muncul dalam rentang waktu tertentu (Hz=hertz)
- Durasi: panjang waktu gelombang

Analog Audio: jenis audio yang direkam dalam bentuk fisik, seperti tape/kaset

Digital Audio: jenis audio yang direpresentasikan dalam bentuk angka biner

Faktor-faktor yang Mempengaruhi Kualitas Digital Recording

- Sampling rate: seberapa banyak sample yang diambil
- Bit depth: nilai yang digunakan untuk merepresentasikan tiap sample
- Semakin banyak sample yang diambil dan nilai setiap sample semakin besar, semakin
bagus hasil suara yang ditangkap ketika dimainkan
- Quantization: pembulatan sample ke nilai paling mendekati
 - Quantization dapat menghasilkan suara desis di background yang tidak diinginkan.
Solusinya dengan merekam suara menggunakan resolusi sample yang lebih tinggi. (Cth:
menggunakan 16 bit daripada 8 bit)
- Clipping: bentuk lain dari distorsi yang berkaitan dengan amplitudo gelombang
- Clipping dapat menghasilkan suara yang keras dan terdistorsi

Rumus Menghitung Size dari Digital Recording

𝑆𝑎𝑚𝑝𝑙𝑖𝑛𝑔 𝑟𝑎𝑡𝑒 × 𝐷𝑢𝑟𝑎𝑡𝑖𝑜𝑛 × 𝐵𝑖𝑡 𝑑𝑒𝑝𝑡ℎ
× 𝐶ℎ𝑎𝑛𝑛𝑒𝑙𝑠
8
- Monophonic recording: 1 channel
- Stereo recording: 2 channels
Note:

● Sampling rate measured in kHz.

● Bit depth measured in bits per sample.
● Duration measured in seconds.

Aplikasi dan Operasi Dasar Sound-Editing

- Audacity: aplikasi sound-editing yang bersifat open-source, gratis, dan tersedia di
Windows, Mac, dan Linux
- Operasi dasar sound-editing:
 ● Trimming
● Splicing and assembly
● Volume adjustments
● Format conversion
● Resampling or downsampling
● Fade-in and fade-out
● Equalization
● Time stretching
● Digital Signal Processing (DSP)
● Reversing sounds
● Multiple tracks

Kelebihan Digital Audio dan Kondisi Digital Audio Digunakan

- Kelebihan digital audio:
● Kualitas playback yang konsisten
● Banyak pilihan aplikasi software dan dukungan sistem
● Tidak membutuhkan pengetahuan teori musik untuk menyiapkan dan membuat
digital audio
- Digital audio digunakan pada kondisi:
● Tidak memiliki kontrol terhadap playback hardware
● Memiliki sumber komputasi dan bandwidth untuk mengelola file digital
● Membutuhkan dialog lisan

MIDI (Musical Instrument Digital Interface)

- Definisi: standar komunikasi yang dikembangkan untuk instrumen musik elektronik dan
komputer di awal 1980
- Bukan suara yang didigitalkan
- Bergantung pada kapabilitas sound system dan kualitas instrumen musik yang
dikomputerisasi
- Cara membuat MIDI Scores:
● Notation software
● Sequencer software
● Sound synthesizer
- Kelebihan dan Kelemahan MIDI:

Kelebihan Kelemahan

- Ukurannya kecil - Tidak mudah digunakan untuk

- Mungkin terdengar lebih baik memutar dialog lisan
daripada digital audio - Hanya merepresentasikan
- Bisa di edit instrumen musik
- Bisa diubah ke notasi musik
- File yang embedded di web pages
loading dan lebih cepat dimainkan
daripada format digital lain

- MIDI digunakan pada kondisi:

● Digital audio tidak bekerja
● Memiliki sumber suara MIDI yang berkualitas tinggi
● Memiliki kontrol penuh atas mesin yang mengirimkan program
● Tidak membutuhkan dialog lisan
Audio File Format
- WAV(Waveform Audio): standar audio file di Windows untuk menyimpan bitstream audio
di PC
- MP3(MPEG Layer 3 Audio): format yang paling sering digunakan
- FLAC(Free Lossless Audio Codec): sebuah codec lossless compression yang bersifat open-
source
- M4A(MPEG 4 Audio): digunakan Apple untuk unprotected music yang di download dari
iTunes

Guidelines for Use Sound

- Identifikasi tujuan suara
- Gunakan suara berkualitas tinggi
- Menghemat ruang file
 - Pertimbangkan lingkungan pemutaran audio
- Hindari penggunaan suara yang berlebihan
- Atur file suara

Bab 5 - Animation

Definisi
Animasi adalah objek yang bergerak melewati atau masuk/keluar dari layar. Animasi
merupakan sumber utama dari dynamic action dalam presentasi multimedia. Mengubah
gambar yang dilihat dengan cepat adalah prinsip animasi, flip book, atau zoetrope.

Teknik untuk Menghidupkan Gambar Visual

- Berdasarkan kesulitannya:
● Simplest animation: 2D Animation. Contoh: the blinking word, a color cycling logo
● More complicated animation: 2 1/2D Animation. Contoh: embossing, shadowing,
beveling and highlighting provide a sense of depth by raising an image
● Most realistic animation: 3D Animation. Contoh: Avatar, Toy Story, Shrek
- Berdasarkan cara pembuatannya:
● Cel Animation
➔ Dimulai dan diakhiri dengan keyframes untuk setiap action
➔ Serangkaian frame di antara keyframe diambil dalam proses disebut
tweening
➔ Setiap action dibuat secara manual dari awal
 ● Computer Animation
➔ Menggunakan logika dan konsep prosedural yang sama dengan cel
animation
➔ Perbedaan utamanya adalah seberapa banyak animator harus
menggambar dan berapa banyak yang dihasilkan secara otomatis oleh
software
➔ Dibagi menjadi 3 bentuk: 2D, 2 1/2D, dan 3D

Computer Animation
- Kinematics: ilmu tentang gerakan dan gerakan struktur yang memiliki sendi seperti
manusia berjalan
- Untuk membuat animasi langkah berjalan, butuh menghitung posisi, rotasi, kecepatan,
dan percepatan semua sendi dan bagian artikulasi yang terlibat - knee, bent, hip, flex, etc
- Proses pembuatan animasi 3D: Modeling -> animasi -> rendering
- Morphing: efek populer di mana gambar berubah menjadi gambar lain

Animation File Format

- GIF: format file bitmap yang mendukung animasi dan umumnya digunakan secara luas
- MAX: format file yang dihasilkan aplikasi Autodesk 3ds Max
- FLA: format file yang memiliki material flash untuk di edit melalui Adobe Flash/Animate
dan dapat di convert ke SWF
- SWF: file yang completed, compiled, dan siap untuk di-publish dan tidak bisa diedit
dengan Adobe Flash/Animate

Guidelines for Animation

- Jangan lupa learning curve
- Program animasi master biasanya lebih sulit daripada perangkat lunak lain.
- Desain untuk pengiriman
- Untuk meminimalkan ukuran file animasi:
 - Gunakan latar belakang sederhana
- Sederhanakan dan batasi jumlah objek
- Batasi jumlah lampu dan penggunaan refleksi dan transparansi
- Pilih kombinasi ukuran file dan kualitas terbaik
- Pastikan untuk menyimpan yang asli. bukan terkompresi
- Pertimbangkan flip animasi
- Animasi yang sesuai mungkin tersedia sedikit atau tanpa biaya
- Konsultasikan tradisi
- Pokok seni animator akan sering memudahkan proses pengembangan dan
memeriahkan produksi digital. Pertimbangkan: siklus, tahan, menembaki dua
orang, tweening, strecth & squash, Ease In & Ease Out, Overshoot & gerakan yang
tumpang tindih.

Bab 6 - Video

Definisi
Video adalah rekaman gambar bergerak dan suara yang disimpan dalam bentuk digital maupun
fisik
Analogue Video
- Output dari CCD (Charge-Coupled Device) diproses oleh kamera menjadi 3 channel
informasi warna dan sync pulses dan sinyal direkam ke dalam magnetic tape
- Setiap stripe merepresentasikan informasi untuk satu bidang frame video
- Component: Informasi warna (red, green dan blue) ditransmitkan menjadi sebuah sinyal
yang terpisah pada masing masing konduktor yang digunakan untuk kualitas video tinggi
dan pekerja video professional.
- S-Video: menggunakan 2 sinyal yang membawa tingkat kecerahan dan warna.
- Composite: menggabungkan 3 warna dan tingkat kecerahan dalam satu konduktor
dimana membawa kualitas video yang paling rendah.
Digital Video
- Output dari CCD didigitalkan oleh kamera menjadi urutan frame tunggal, video, dan data
audio yang dikompresi sebelum ditulis ke kaset

- Mengubah sinyal melalui digitalisasi menjadi kode numerik

- Kualitas video digital bergantung pada:
● Resolusi layar: banyak piksel horizontal dan vertikal untuk menampilkan video
image
● Frame rate: banyak individual video frame yang ditampilkan per detik
● Compression method (codec): algoritma khusus yang digunakan untuk kompres
dan dekompresi video digital
- Arsitektur video digital terdiri dari:
● Algoritma: untuk mengkompres dan mengkodekan video dan audio
● Wadah (Container): untuk menyimpan data yang dikompresi
● Aplikasi: untuk dapat mengenali dan memutar file-file itu

- Digital Video Container

- WMV: Windows Media Format
- FLV: Flash Video
- MP4: format yang paling umum digunakan untuk menyimpan video
- MOV: QuickTime
Codec (Coder/Decoder)

- Digital Video Compression Schemes

- Algoritma yang digunakan untuk mengkompres video untuk mengirimkannya dan dekode
secara real time untuk playback yang cepat
- Codec yang berbeda dioptimisasi untuk metode pengiriman yang berbeda. Contoh: dari
hard drive, dari DVD, atau melalui web

MPEG (Moving Picture Experts Group)

- Standar untuk representasi digital gambar bergerak serta audio yang terkait dan data
lainnya.
Guidelines for Video
Shooting
- Pilih kamera dengan hati hati (CCD, Lensa, Mikrofon, Penyimpanan, dll)
- Pakai tripod atau sandarkan ke permukaan rata
- Pilih white balance yang tepat
- Hindari shoot ke cahaya/backlight
- Batasi pergerakan dan zoom
 - Framing subjek
- Buat list untuk shoot
- Beda sudut
- Wide shots, medium shots dan close up
- Establishing shots, sudut mundur, over the shoulder, dan point of view shots.
- Pakai resolusi maksimal yang ada
- Tambah mikrofon eksternal jika diperlukan
- Pakai headphones untuk memonitor kualitas suara
- Rekam suara latar belakang untuk editing
- Jangan langgar time code
Editing
- Amankan source video
- Simpan copy dari master video untuk rendering
Rendering
- Cocokan codec, resolusi, frame rate dan data rate untuk penggunaan dan cara
penyampaiannya
- Pakai variable bit rate jika tersedia

MAKING MULTIMEDIA
Tahapan Membuat Projek Multimedia
1. Planning and Costing
a. Mulailah dengan ide
b. Rencanakan keterampilan menulis, seni grafis, musik, video, dan multimedia lainnya
yang diperlukan
c. Perkirakan waktu
d. Siapkan anggaran
e. Buat prototype
2. Designing and Producing
a. Lakukan setiap tugas yang direncanakan untuk membuat produk jadi
b. Siklus umpan balik dengan client
3. Testing
a. Uji program untuk memastikan bahwa bekerja dengan baik
4. Delivering
a. Package dan kirim ke end user

Intangibles Elements
1. Creativity
2. Organization
3. Communication Skill

Multimedia Skills
1. Project Manager
2. Multimedia Designer
3. Interface Designer
4. Writers
5. Video Specialist
6. Audio Specialist
7. Multimedia Programmers
8. Producers of Multimedia for the Web

Hardware
Peralatan yang diperlukan untuk mengembangkan proyek multimedia tergantung pada konten
proyek serta desainnya.

a. Connection (IDE, Firewire, etc)

b. Memory and Storage Devices
c. Input Devices
d. Output Devices

Software
a. Text Editing and Word Processing Tools
b. OCR Software
c. Painting and Drawing Tools
d. 3D Modelling and Animation Tools
e. Image-Editing Tools
f. Sound-Editing Tools
g. Animation, Video, and Digital Movie Tools

Authoring Tools
Fungsi
a. Merancang interactivity dan user interface
b. Mempresentasikan projek di layar
c. Merakit beragam elemen multimedia menjadi satu produk kohesif tunggal
Dengan menggunakan Multimedia Authoring Software bisa membuat :
a. Video production
b. Animation
c. Games
d. Interactive web sites
e. Demo disks and Guided Tours
f. Presentation

Software
a. Adobe Captivate
b. Adobe Presenter
c. Articulate StoryLine and Studio
d. Composica

Tipe – Tipe Authoring Tools

1. Card atau Page Based Authoring Tools

Contoh : LiveCode
2. Icon – Object Based Authoring Tools
Elemen multimedia dan isyarat interaksi (event) diatur sebagai objek dalam kerangka kerja
struktural atau proses
3. Time – Bassed Authoring Tools
Authoring system dimana elemen dan acara diatur sepanjang garis waktu, dengan resolusi
setinggi atau lebih tinggi dari 1/30 detik.
Contoh : Adobe Flash, Adobe Director

Saat memilih Authoring Tools, perhatikan :

DO
a. Editing Features
Untuk membuat, mengedit, dan mengkonversi elemen multimedia
b. Organizing Features
Menyediakan organisasi, desain, dan proses produksi untuk multimedia melibatkan
storyboard dan flowchart
DON’T
a. Programming Features
o Visual Programming
o Programming dengan skrip
o Traditional Language seperti C
o Document Development Tools
b. Interactivity Features
o Satu atau lebih interactivity
 Simple branching
 Conditional branching
 Structure language yang mendukung complex programming
 Performance Tuning Features
 Playback Features
 Delivery Features

MULTIMEDIA PROJECT

The Processing of Making Multimedia

1. The idea
2. Analysis
a. Analyze the need
b. Analyze the cost
c. Analyze the content
d. Analyze the market
e. Analyze the technology
f. Analyze the delivery medium
3. Pretesting
a. Define project goal
b. Define skillset needs
c. Create content outline
d. Position sales and marketing
e. Create prototype on paper
4. Prototype development
a. Build screen Mock-Ups
 b. Deisgn content maps
c. Design user interface
d. Develop story / messages
e. Test prototype
5. Alpha development
a. Detail the storyboards and flowcharts
b. Finalize story scripts
c. Produce graphic art
d. Produce sound and video
e. Solve technical problems
f. Test working prototype
6. Beta development
a. Distribute to limited tester list
b. Respond to bug reports
c. Prepare user docs
d. Prepare packaging
e. Develop gold candidates
f. Announce to press and PR lists
7. Delivery
a. Prepare technical support
b. Install sales team
c. Replicate gold master
d. Pay bonuses
e. Hold launch party

Scheduling
Untuk membuat scheduling, perkirakan total waktu yang diperlukan untuk setiap tugas dan
alokasikan waktu ini di antara waktu ini di antara jumlah orang yang mengerjakan proyek

Estimating
Mempunyai 3 elemen :
a. Time
b. Money
c. People
RFP (Request for Proposal) biasanya adalah dokumen terperinci dari perusahaan besar yang
merupakan “outsourcing” pekerjaan pengembangan multimedia.
Multimedia Bid Proposal terdiri dari :
a. Ringkasan eksekutif
b. Bagian yang berurusan dengan masalah kreatif
c. Deskripsi bagaimana tujuan project akan dipenuhi
d. Diskusi masalah teknis

Metode untuk Developing Software

1. Waterfall mode
2. The agile approach

Information Design
Storyboards

Wireframing : Metode ini sangat cocok untuk tim yang dapat membuat prototipe dengan
cepat dan cepat menjadi barang jadi

Designing the Structure

Navigation
Navigation map menguraikan koneksi di antara berbagai bidang konten dan untuk
mengatur konten dan pesan

Struktur yang dipakai dalam project multimedia :

a. Linear
b. Hierarchical
c. Non-linear
d. Composite
Saat mendesain produk multimedia, sebaiknya bekerja dengan dua jenis struktur :
1. Depth Structure : Merupakan navigation map yang lengkap dan menjelaskan semua
tautan antara semua komponen proyek

2. Surface Structure : Merupakan struktur yang sebenarnya disadari oleh pengguna saat
menavigasi depth structure

Contoh Navigation Map

Designing the Structure
1. Storyboard
Wireframing menggunakan WireFrameSketcher
2. Navigation Map
Menggunakan PowerMapper ( www.powermapper.com )
3. Hot Spots, Hyperlink, Buttons
a. Sebagian besar sistem penulisan multimedia memungkinkan untuk membuat bagian
layar atau objek apa pun menjadi Hot Spot.
b. Jika mengklik hot spot menghubungkan pengguna ke bagian lain dari dokumen atau
program atau ke program atau situs web yang berbeda, itu disebut sebagai tautan,
hyperlink
c. Button
Jika Hot Spot adalah gambar grafis yang dirancang agar terlihat seperti button

Designing the User Interface

1. User Interface dari multimedia product
Perpaduan elemen grafis dan sistem navigasinya
2. Ada 2 tipe end user :
a. Expert : Mereka yang mengerti tentang komputer
b. Novice : Mereka yang tidak mengerti sama sekali tentang computer
3. Modal Interface
Solusi paling sederhana untuk menangani beragam tingkat keahlian pengguna
Hal yang Harus Dihindari Dalam Membuat Grafik Komputer
1. Bentrokan warna
2. Layar yang penuh
3. Menggunakan gambar dengan banyak contrast
4. Trite humor dalam animasi yang sering diulang
5. Clanging bells ketika tombol di klik
6. Frilly pattern borders

Producing
Fase ketika proyek multimedia kita benar-benar ditampilkan

Starting Up

a. Periksa pengembangan hardware dan software

b. Tinjau pengaturan organisasi dan administrasi

CONTENT AND TALENT

Content
a. Dapat berupa apa saja dan semua elemen multimedia
b. Dapat memiliki nilai produksi rendah dan tinggi
c. Konten akan mempunyai nilai yang tinggi jika : Pekerjakan tim profesional untuk
memotret dan mendigitalkan

Acquiring Content

a. Content Acquiring
Dapat menjadi salah satu tugas paling mahal dan memakan waktu dalam mengatur
proyek multimedia.
b. Menggunakan content yang dibuat orang lain
Saat menggunakan konten yang dibuat oleh orang lain harus diberikan kepada
pembuatnya
 Electronic Rights
Hak untuk menerbitkan karya dalam media penyimpanan dan pengiriman berbasis
komputer seperti pada DVD atau di Web

Photo
Library

PreExistin
Sound Stock
g
Library Content Footage

Clip Art

c. Sumber isi mengandung copyright atau public domain

Public Domain
o The national archive of United States
www.archives.gov
o The national archive of United Kingdom
www.nationalarchives.gov.uk
o The library of congress
www.loc.gov

Copyright
Hukum yang mengatur hak cipta berbeda dari satu negara ke negara

Contoh Copyright :
Amerika Serikat
Perlindungan hak cipta diterapkan pada “karya asli kepenulisan yang ditetapkan dalam
media ekspresi apa pun”

Digital Rights Management ( DRM )

Berbagai teknologi rights management :
a. FairPlay – in Apple
b. Microsoft Windows Media Rights Manager – in Microsoft Windows
c. The Association of American Publishers - Mempromosikan metodologi DRM untuk
melindungi penyalinan buku elektronik tanpa izin

Obtaining Rights

Derivative
Work

Creative
Commons CopyLef
(CC) Licence t
Licences

Permis
a. Derivative Work
sion
Sebagian kecil dari gambar yang dimiliki oleh orang lain
b. Permission
Harus diperoleh untuk menggunakan teks berhak cipta
c. Copyleft
Gunakan undang-undang hak cipta itu sendiri untuk menghapus perlindungan hak
cipta tradisional dari suatu karya dan menawarkan karya itu
d. Creative Commons (CC) Licences
Berikan hak khusus untuk menggunakan kembali dan mendistribusikan media

6 Lisensi Kreatif Umum yang paling umum digunakan

 Lisensi dapat menyalin, mendistribusikan,
Attribution (BY) menampilkan, dan melakukan pekerjaan
serta membuat karya turunan

Lisensi dapat mendistribusikan karya

Share-Alike (SA) turunan hanya di bawah lisensi yang
identik

Lisensi dapat menyalin, mendistribusikan,

Non-Commercial (NC)
menampilkan, dan melakukan pekerjaan

Lisensi dapat menyalin, mendistribusikan,

No Derivative Works (ND) menampilkan, dan hanya melakukan
salinan kata demi kata dari karya tersebut

Ownership of Content
Kepemilikan sebuah project yang dibuat oleh karyawan dalam perjalanan pekerjaan
mereka

Acquiring Talent
Mendapatkan suara aktor, model, atau narator yang sempurna sangat penting
DELIVERING MULTIMEDIA

Testing
1. Alpha Release
Biasanya hanya untuk sirkulasi internal
Tim yang mengerjakan project
2. Beta Release
Dikirim ke user yang lebih luas tetapi tetap memilih dengan kualifikasi yang sama
Mungkin terdapat error, bug

Delivering on CD-ROM
Sebagian besar project multimedia yang dijual ke retail dan bisnis disampaikan
dalam bentuk CD-ROM atau DVD

Compact Disk Standard :

1. Red Book : Audio CD format
2. Yellow Book : CD – ROM
3. Green Book : CD – I (Interactive)
4. Orange Book : Write – Once, Read – Only (WORM)
5. White Book : Video CD (Karaoke CD)

Delivering on DVD
1. Menyediakan penyimpanan 15,9GB pada single disc pada single disc :
a. Double – Sided
b. Dual – Layered Format (DVD – 18)
2. Scara umum :
a. Single side
b. Single Layered dengan penyimpanan 4.37GB (DVD – 5)

DVD Standard :

1. DVD – R or DVD RW
2. DVD + R or DVD + RW
3. DVD - RAM

Delivering on the WWW

Merancang, membangun, dan menguji dalam "ruang web" di seluruh
pengembangan project
Jika memiliki atau host the delivery server :
a. Harus memiliki kontrol keamanan yang lebih baik
b. Integrasi yang lebih baik dari proyek ke LAN internal atau Intranet
c. Kemampuan untuk menyempurnakan parameter konfigurasi server

Jika harus control of the server :

Menyediakan layanan perdagangan yang aman untuk transaksi kartu kredit, enkripsi
dan kata sandi, special database, dan pemrograman CGI khusus

Untuk proyject multimedia yang membutuhkan teknologi streaming seperti

RealAudio atau konferensi video, beli dan instal perangkat lunak yang diperlukan di
server.

Jika proyek tersebut berada di situs yang dihosting oleh Internet Service Provider
(ISP) atau di intranet internal perusahaan sendiri :

Tetapkan batasan the host’s dan rancang project dengan batasan itu

Delivering through an APP Store

Jailbreaking dan rooting memungkinkan pemilik untuk memasang berbagai macam
aplikasi

Platform / Store Owner :

1. Apple
2. Microsoft
3. Google
4. Barnes & Noble
5. Amazon Kindle Fire
MULTIMEDIA ADVANCED

Multimedia on the WEB

Web
Servers

Search
Plug-ins
Tools Engines
for the
WWW
Web Page
Makers
Web
&
Browser
Site
Builders
1. Developing for the web
a. Text for the web
2. Images for the web
a. GIF
b. PNG
c. JPEG
d. SVG
3. Line art lebih baik disimpan dalam bentuk GIF, PNG, atau SVG daripada
dalam bentuk JPEG
4. Vdeo format on web
 .fla

Flash .flv

.swf

.mpg
MPEG - 1
.mpeg

.asf (Advanced Streaming Format)

Video Format
.wmv (Windows Media Video)

QuickTime .mov

Audio / Visual Interleaved .avi

DivX .avi

Real Media .rm

Untuk beberapa alasan, ukuran kecil lebih baik daripada resolusi

5. Sound for the web
Sebagian besar browser memungkinkan penyisipan suara ke dalam dokumen
menggunakan tag <audio>

Inside the tag :

a. Autoplay Attribute
Start the audio secepatnya jika sudah ready
b. Controls Attribute
Play / Pause control dan control lainnya akan di tampilkan
c. Preload Attribute
Audio akan dimuat saat halaman siap dijalankan
6. Animation for the web
a. HTML tidak membuat ketentuan untuk animasi
b. Gunakan JavaScript untuk XML Features dan di combine dengan AJAX
untuk powerful interactive applications
c. Adobe Flash Player plug-in untuk browser menawarkan animasi dan
interaksi
d. Canvas di HTML5 berguna untuk membuat interactive diagrams
 e. Animated GIF (GIF89) untuk membuat simple cell animations
7. Video for the web
a. HTML5 menyediakan <video> tag
b. Plug-ins and Player :
o Shockwave – Macromedia
o LiveCode
o The QuickTime

Mobile Multimedia

Tablets

The nature
of society
was
changed

Smartpho
Readers
nes

1. Mobile hardware
Mengaktifkan gerakan multi-touch seperti pinches, swipes, dan tap
2. The market
a. Samsung
b. Nokia
c. Apple
d. LG Electronics
e. ZTE
f. Huawei
g. Lenovo
h. TCL Communication
i. Sony Mobile Communication
3. Connection

GSM vs 3G vs
CDMA 4G

Wi-Fi

4. Mobile Operating System

a. iOS
b. Android
5. Programming Mobile Apps
a. Tools
o Objective C – iOS
o Java – Android
o HTML5, CSS, JavScript – Hybrid Apps
b. Methods
Responsive Web Design (RWD)

Strategi Multimedia Berbasis Web

1. Audio – Gunakan format standar dan kapasitas kecil
2. Video – Gunakan format yang umum dipakai
3. Animasi – Jangan gunakan animasi yang sama secara terus menerus
4. Text – Gunakan teks yang mudah untuk dibaca
5. Image – Jika ada copyright, cantumkan sourcenya