kontrak kuliah - mahrus.files.wordpress.com€¦ · kontrak kuliah matakuliah : multimedia &...

42
1 KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : [email protected] ThAkad : 2009-2010 Semester : Ganjil (lima) Prodi : Manajemen Informatika 1. Manfaat Matakuliah Dengan mengambil mata kuliah Multimedia & Animasi ini, mahasiswa mempunyai pemahaman mengenai konsep multimedia dan komponen- komponen pembangun multimedia. Pada akhirnya, dengan menggabung semua yang telah dipelajarinya, mahasiswa mampu merancang aplikasi multimedia 2. Deskripsi Perkuliahan Mata kuliah Multimedia & Animasi membahas mengenai konsep dasar Multimedia, perkembangan multimedia, Teks, Suara, Image, Grafik, Video, animasi, kompresi, format standar multimedia, dan aplikasi interaktif multimedia. 3. Tujuan Pembelajaran a. TIU : Mahasiswa mampu menghasilkan aplikasi Multimedia sederhana b. TIK : i. Mahasiswa mampu menjelaskan sejarah, komponen, konsep dasar pembangun multimedia ii. Mahasiswa mampu menjelaskan komponen multimedia: teks iii. Mahasiswa mampu mendemonstrasikan konsep kompresi ke dalam bentuk program jadi iv. Mahasiswa mampu menganalisa aplikasi pengolah grafis dan image untuk menghasilkan grafis dan image v. Mahasiswa mampu menghasilkan file suara yang telah melewati proses recording dan editing vi. Mahasiswa mampu menghasilkan file video yang telah melewati proses recording dan editing vii. Mahasiswa mampu menjelaskan standar format MPEG viii. Mahasiswa mampu mengkombinasikan aplikasi multimedia yang memiliki komponen: teks, kompresi, suara, grafik, image, video dan animasi interaktif

Upload: others

Post on 03-Nov-2020

32 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

1

KONTRAK KULIAH

Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : [email protected] ThAkad : 2009-2010 Semester : Ganjil (lima) Prodi : Manajemen Informatika

1. Manfaat Matakuliah

Dengan mengambil mata kuliah Multimedia & Animasi ini, mahasiswa mempunyai pemahaman mengenai konsep multimedia dan komponen-komponen pembangun multimedia. Pada akhirnya, dengan menggabung semua yang telah dipelajarinya, mahasiswa mampu merancang aplikasi multimedia

2. Deskripsi Perkuliahan

Mata kuliah Multimedia & Animasi membahas mengenai konsep dasar Multimedia, perkembangan multimedia, Teks, Suara, Image, Grafik, Video, animasi, kompresi, format standar multimedia, dan aplikasi interaktif multimedia.

3. Tujuan Pembelajaran

a. TIU : Mahasiswa mampu menghasilkan aplikasi Multimedia sederhana b. TIK :

i. Mahasiswa mampu menjelaskan sejarah, komponen, konsep dasar pembangun multimedia

ii. Mahasiswa mampu menjelaskan komponen multimedia: teks iii. Mahasiswa mampu mendemonstrasikan konsep kompresi ke dalam

bentuk program jadi iv. Mahasiswa mampu menganalisa aplikasi pengolah grafis dan image

untuk menghasilkan grafis dan image v. Mahasiswa mampu menghasilkan file suara yang telah melewati proses

recording dan editing vi. Mahasiswa mampu menghasilkan file video yang telah melewati proses

recording dan editing vii. Mahasiswa mampu menjelaskan standar format MPEG

viii. Mahasiswa mampu mengkombinasikan aplikasi multimedia yang memiliki komponen: teks, kompresi, suara, grafik, image, video dan animasi interaktif

Page 2: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

2

4. Organisasi Materi

5. Strategi Perkuliahan

a. Ceramah, strategi ini digunakan pada saat dosen menjelaskan konsep tentang sebuah materi.

b. Diskusi, strategi ini digunakan supaya ada partisipasi aktif dari mahasiswa dalam memberikan tanggapan, pendapat, dan jawaban seputar materi.

c. Studi kasus, digunakan untuk membahas sebuah permasalahan lengkap beserta solusinya.

d. Problem Based Learning, memberikan sebuah permasalahan kepada mahasiswa untuk dipecahkan. Dari proses pemecahan itu, mahasiswa belajar.

e. Demonstrasi Tugas Besar dilakukan 4 kali sepanjang perkuliahan. Hal ini dimaksudkan untuk mencapai TIU yaitu agar mahasiswa memiliki kemampuan untuk menghasilkan aplikasi multimedia.

6. Tugas-tugas Individu :

a. Membaca materi sebelum perkuliahan b. Mengerjakan latihan membuat aplikasi untuk menyelesaikan masalah

yang diberikan ketika proses pembelajaran berlangsung c. Mengerjakan 4 kali Tugas Besar

Jadwal pengumpulan tugas : Demonstrasi program harus sesuai jadwal yang diberikan. Khusus Tugas Besar 2, jadwalnya bertepatan dengan UTS; Tugas Besar 2 jadwalnya bertepatan dengan UAS. Konsekuensi : Tugas membuat program harus beda dengan mahasiswa / kelompok lain, jika sama akan berpengaruh pada penilaian. Jika terlambat mengumpulkan tugas atau demo tugas besar, nilai akan dikurangi. Terlambat lebih dari 1-2 hari,

TIU:

Mahasiswa mampu menghasilkan aplikasi Multimedia sederhana

aplikasi multimedia

kompresi

grafis dan

image Video

Suara

sejarah, komponen, konsep dasar pembangun multimedia

teks

Animasi

Page 3: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

3

pengurangan 25%. Terlambat 2 minggu, pengurangan 50%. Terlambat lebih dari itu, dianggap tidak mengumpulkan.

Tujuan pemberian tugas :

a. Mahasiswa lebih siap menerima materi b. Mahasiswa bisa mengambil inti dari materi yang diberikan. c. Mahasiswa bisa langsung menerapkan materi yang diterima di kelas. d. Mahasiswa bisa memiliki pengalaman langsung mempraktekkan

pembuatan aplikasi multimedia di komputer Detail Tugas Besar:

1. Tugas Aplikasi Grafik dan Image adalah berbentuk perorangan. Tiap

mahasiswa membuat Desain Tampilan yang memiliki unsur grafik dan image

dengan animasi sederhana. Tema/topik yang dipilih oleh tiap mahasiswa

harus sesuai dengan tema aplikasi akhir dengan menggunakan Adobe

Photoshop.

2. Tugas Aplikasi Grafik dan Image adalah berbentuk perorangan. Tiap

mahasiswa membuat Desain Tampilan yang memiliki unsur grafik dan image

dengan animasi sederhana. Tema/topik yang dipilih oleh tiap mahasiswa

harus sesuai dengan tema aplikasi akhir. Tugas ini juga sebagai evaluasi

tengah semester dengan mengaplikasikan pratikum dengan menggunakan

Macromedia Flash.

3. Tugas Aplikasi Video adalah berbentuk kelompok. Tiap kelompok terdiri atas

3 orang mahasiswa. Kelompok ini juga merupakan kelompok untuk aplikasi

tugas akhir. Tiap kelompok melakukan proses recording, editing, dan

kompresi video. Tema/topik yang menjadi pesan pada video harus sesuai

dengan tema aplikasi akhir.

4. Evaluasi akhir semester adalah berupa tugas untuk membuat aplikasi

Mulitmedia yang mengandung unsur: teks, suara, grafik, image, video, dan

animasi interaktif. Laporan tulis tugas aplikasi dikumpulkan setelah

demonstrasi.

Tema/topik yang dipilih haruslah cukup kompleks sehingga dapat

menampung unsur-unsur multimedia diatas. Tema/topik yang dipilih harus

didiskusikan terlebih dahulu dengan dosen. Contoh tema/topik yang bisa

dipilih: profil jurusan, Tutorial Game.

Spesifikasi aplikasi :

Page 4: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

4

i. Durasi aplikasi minimum 3 menit.

ii. Ukuran aplikasi maksimum 650 MB, tidak termasuk ukuran data-data

pendukung yang menjadi komponen aplikasi utama.

iii. Ukuran minimum bidang animasi: 800 x 600 piksel.

iv. Frame rate minimum: 25 fps

7. Kriteria Penilaian a. Indikator penilaian

i. Syntax program harus beda antar mahasiswa ii. Ide / solusi pemecahan masalah yang efektif iii. Program komputer yang dibuat bisa dijalankan tanpa error iv. Saat kuliah aktif bertanya dan menanggapi permasalahan yang

muncul dalam diskusi kelas b. Bobot penilaian

i. Tugas Besar 1 5% ii. UTS/Tugas Besar 2 30% iii. Tugas Besar 3 5% iv. Tugas Besar 4 10% v. UAS 50%

c. Kategori Nilai, sesuai dengan aturan nilai STMIK Nilai A 81-100

Nilai B+ 76-80 Nilai B 70-75

Nilai C+ 61-69

Nilai C 56-60 Nilai D+ 51-55

Nilai D 45-50

Nilai E 0-44

8. Jadwal Perkuliahan

Pertemuan Pokok Bahasan Sub Pokok Bahasan Keterangan

1

Konsep dasar pembangun multimedia

a. Definisi b. Kegunaan c. Sistem d. Peluang

Konsep teks a. Plain b. Formatted c. Hyper

2

Kompresi a. Pengenalan dan Teori

Dasar b. Lossy dan Loseless

Page 5: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

5

3 Grafis dan image

a. Definisi b. Format File Gambar

Standar c. Kompresi Image: GIF,

JPEG d. Aplikasi pengolah

gambar

Tugas Besar 1

4 Macromedia Flash

a. Pengenalan Macromedia Flash

b. Penggunaan Aplikasi Flash

c. Pengenalan komponen Flash

d. Membuat objek e. Pewarnaan Objek

Konsultasi tugas

5

Membuat Animasi

a. Animasi Frame b. Motion Tween c. Motion Shape

6

a. Motion dengan mask b. Motion dengan guide

Tugas Besar 2

Ujian Tengah Semester

7

Suara

a. Teori Dasar b. Representasi Suara

dalam bentuk Digital c. Digitasi Suara

8

a. Editing b. MIDI

9

a. Format File Suara Standar

b. Kompresi Suara: ADPCM, MP3

Tugas Besar 3

10

Video

a. Definisi b. Teori Dasar c. Jenis Sinyal Video d. Video Analog dan Video

Digital

Konsultasi tugas

11 a. Editing b. Kompresi Video: H.261,

H.263

Tugas Besar 4

12 MPEG a. MPEG 1 b. MPEG 2 c. MPEG 4

Konsultasi tugas

Ujian Akhir Semester

Page 6: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

6

DEFINISI MULTIMEDIA

MULTI [latin nouns] : banyak; bermacam-macam

MEDIUM [latin] : sesuatu yang dipakai untuk menyampaikan atau membawa

sesuatu

MEDIUM [American Heritage Electronic Dictionary, 1991] : alat untuk

mendistribusikan dan mempresentasikan informasi

Multimedia dapat diartikan sebagai penggunaan beberapa media yang

berbeda untuk menggabungkan dan menyampaikan informasi dalam bentuk text,

audio, grafik, animasi, dan video.

Beberapa definisi menurut beberapa ahli:

1. Kombinasi dari komputer dan video (Rosch, 1996)

2. Kombinasi dari tiga elemen: suara, gambar dan teks (McComick,

1996)

3. Kombinasi dari paling sedikit dua media input atau output.

Media ini dapat berupa audio (suara, musik), animasi, video, teks, grafik dan

gambar (Turban dan kawan-kawan, 2002)

4. Alat yang dapat menciptakan presentasi yang dinamis dan interaktif yang

mengkombinasikan teks, grafik, animasi, audio dan video (Robin dan Linda, 2001)

5. Multimedia dalam konteks komputer menurut Hofstetter 2001 adalah:

pemanfaatan komputer untuk membuat dan menggabungkan teks, grafik,

audio, video, dengan menggunakan tool yang memungkinkan pemakai

berinteraksi, berkreasi, dan berkomunikasi.

Sedangkan menurut wikipedia.org:

Multimedia is the use of several different media to convey information (text,

audio, graphics, animation, video, and interactivity). Multimedia also refers to

computer data storage devices, especially those used to store

multimediantent.

Page 7: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

7

DEFINISI KOMPUTER MULTIMEDIA

Menurut wikipedia.org:

Komputer Multimedia adalah sebuah komputer yang dikonfigurasi sesuai dengan

rekomendasi dan memiliki sebuah CD-ROM. Standarisasi komputer mutlimedia

dilakukan oleh "Multimedia PC Marketing Council", sebuah kelompok kerja

dari sebuah perusahaan yang dahulu bernama Software Publishers Association

(sekarang bernama Software and Information Industry Association). Perusahaan ini

merupakan gabungan dari Microsoft, Creative Labs, Dell, Gateway, dan Fujitsu.

Kenapa CD-ROM?

Karena dahulu multimedia sebatas hanya kemampuan komputer untuk menampilkan

video melalui sebuah CD-ROM saja.

Standar Komputer Multimedia menurut Software and Information Industry

Association:

Pada tahun 1990:

16 MHz 386SX CPU

-color, 640 x 480 VGA video card

-ROM drive using no more than 40% of CPU to read, with < 1 second

seek time

-bit sound; and inputting 11 kHz,8- bit

sound

Pada tahun 1993:

-bit color, 640×480 VGA video card

-ROM drive using no more than 40% of CPU to read at 1x, with <

Page 8: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

8

400ms seek time

-bit sound

eo system that can show 352×240 at 30 frames per second, 15-bit color

-1 hardware or software video playback

-ROM drive using no more than 40% of CPU to read, with < 250ms

seek time

-bit sound

MENGAPA MULTIMEDIA?

Multimedia dapat digunakan dalam:

1. Bidang periklanan yang efektif dan interaktif

2. Bidang pendidikan dalam penyampaian bahan pengajaran secara interaktif

dan dapat mempermudah pembelajaran karena dididukung oleh berbagai

aspek: suara, video, animasi, teks, dan grafik

3. Bidang jaringan dan internet yang membantu dalam pembuatan website

yang menarik, informatif, dan interaktif

Menurut riset Computer Technology Research (CTR):

1. Orang mampu mengingat 20% dari yang dilihat

2. Orang mampu mengingat 30% dari yang didengar

3. Orang mampu mengingat 50% dari yang didengar dan dilihat

Page 9: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

9

4. Orang mampu mengingat 30% dari yang didengar, dilihat, dan dilakukan.

Multimedia mampu:

1. Mengubah mengubah tempat kerja. Dengan adanya teleworking, para

pekerja dapat melakukan pekerjaanya tidak harus dari kantor. Contoh

software yang mendukung teleworking/telecommuting: Netmeeting!

2. Mengubah cara belanja. Homeshopping/teleshopping dapat dilakukan dengan

menggunakan internet, kemudian barang datang dengan sendirinya.

3. Mengubah cara bisnis. Nokia membuat bisnis telepon seluler, banyak perusahaan

menggunakan sistem jual beli online, bank menggunakan cara online-banking.

4. Mengubah cara memperoleh informasi. Orang-orang mulai menggunakan

internet dan berbagai software untuk mencari informasi. Misalnya: membaca

koran online, detik.com, menggunakan software kesehatan, belajar gitar dari

software dan masih banyak lagi.

5. Mengubah cara belajar. Sekolah mulai menggunakan komputer multimedia,

belajar online, menggunakan e-book.

SISTEM MULTIMEDIA

A multimedia system is any system which supports more than a single kind of

media [AHD 1991].

Bagaimana sistem bisa disebut sebagai sistem multimedia?

1. Kombinasi Media

Sistem disebut sistem multimedia jika kedua jenis media (continuous/ discrete)

dipakai. Contoh media diskrit : teks dan gambar, dan media kontinu adalah audio

dan video.

2. Independence

Aspek utama dari jenis media yang berbeda adalah keterkaitan antar media

tersebut. Sistem disebut sistem multimedia jika tingkat ketergantungan/

keterkaitan antar media tersebut rendah.

Page 10: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

10

3. Computer-supported Integration

Sistem harus dapat melakukan pemrosesan yang dikontrol oleh komputer. Sistem

dapat diprogram oleh system programmer/ user.

Sistem Multimedia dapat dibagi menjadi:

1. Sistem Multimedia Stand Alone

Sistem ini berarti merupakan sistem komputer multimedia yang memiliki minimal

storage (harddisk, CD-ROM/DVD-ROM/CD-RW/DVD-RW), alat input (keyboard,

mouse, scanner, mic), dan output (speaker, monitor, LCD Proyektor), VGA dan

Soundcard.

2. Sistem Multimedia Berbasis Jaringan

Sistem ini harus terhubung melalui jaringan yang mempunyai bandwidth yang

besar. Perbedaannya adalah adanya sharing sistem dan pengaksesan terhadap

sumber daya yang sama. Contoh: video converence dan video broadcast

Permasalahan: bila bandwidth kecil, maka akan terjadi kemacetan jaringan,

delay dan masalah infrastruktur yang belum siap.

Page 11: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

11

PELUANG MULTIMEDIA

Pemasaran, animasi, desain grafis, electronic publishing, editor, desain

game, public relations, spesial efek, produksi video, dan web master.

Page 12: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

12

KOMPRESI SUARA, GAMBAR DAN VIDEO DIGITAL

4.1 Pendahuluan

Terdapat banyak teknik kompresi yang mengkompres file teks, tetapi bagaimana

dengan kompresi data multimedia. Pada subbab berikut akan dibahas prinsip, teknik dan

standar kompresi pada data multimedia terutama pada data suara, gambar dan video yang

sudah dalam bentuk digital.

4.2 Prinsip Kompresi

Kompresi dalam sistem multimedia sering dipertanyakan, sehingga bit rate atau

penyimpanan data multimedia dapat dikelola. Apakah hal tersebut memungkinkan?

Jawabannya adalah Ya. Kita dapat mengkompresi data dengan memanfaatkan dua faktor

utama, yaitu redundansi data pada suara, gambar atau video dan kepemilikan persepsi

manusia.

4.2.1 Redundancy Data

Seperti kita telah diskusikan pada bab sebelumnya, suara digital adalah nilai sample

seri. Sedangkan sebuah gambar adalah sebuah array segi empat yang berisi nilai sample

(pixel), video adalah sederetaan gambar yang dimainkan dalam kecepatan tertentu. Nilai

sample yang bertetanggan adalah saling berhubungan. Nilai yang berhubungan ini secara

statistik ini yang disebut redundancy. Mneghilangkan redundancy tidak akan merubah arti

data.

Redundancy pada Suara Digital

Dalam beberapa kasus, suara terdengar sama. Nilai sample suara berikutnya dapat

diprediksi berdasarkan nilai sample suara sebelumnya. Teknik kompresi yang menggunakan

fitur ini disebut predictive coding.

Pada suara digital, terdapat tipe redundancy lain: selama kita melakukan percakapan atau

berbicara, terdapat suatu waktu yang kosong atau tidak bersuara. Menghilangkan sample

suara pada saat itu tidak akan mempengaruhi arti dari pembicaraan. Teknik kompresi ini

disebut silence removal.

Redundancy pada Gambar Digital

Page 13: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

13

Pada gambar digital, sample bertetangga pada satu garis scanning biasanya mirip.

Kemiripan ini disebut spatial redundancy. Spatial redundancy ini dapat dihilangkan dengan

teknik pengkodean prediksi dan teknik lain (seperti transform coding).

Redundancy pada Video Digital

Video digital adalah sederetan gambar, maka ia akan memiliki redundancy. Gambar

bertetangga biasanya memiliki kemiripan. Kemiripan ini disebut temporal redundancy dan

dapat dihilangkan dengan pengkodean prediksi.

4.2.2 Persepsi Manusia

Pengguna akhir (end user) dari suara, gambar dan video digital adalah manusia.

Manusia dapat mentolerir beberapa kesalahan (error) atau kehilangan (loss) tanpa

mempengaruhi efektifitas komunikasi. Ini artinya bahwa versi kompresi tidak harus

menampilkan data keseluruhan dari data aslinya. Tetapi hal ini sangat bertolak belakang

dengan data alphanumeric yang tidak memperkenankan data hilang ataupun rusak

sedikitpun, terutama pada program komputer.

Hal diatas menunjukkan bahwa persepsi manusia pada umumnya tidak sensitif

terhadap kerusakan kecil atau kehilangan data pada suara, gambar dan video.

4.3 Klasifikasi Teknik Kompresi

Terdapat banyak teknik kompresi untuk mengkompres data mulltimedia. Mereka

dapat diklasifikasikan dalam berbagai cara dengan berbagai kriteria. Beberapa klasifikasi

berdasarkan algoritma kompresi yang digunakan. Pada modul ini kita akan

mengklasifikasikan berdasarkan hasil teknik kompresi. Tipe klasifikasi ini lebih bermanfaat

bagi pengguna akhir dan pengembang yang merancang dan mengembangkan sistem

multimedia.

GRAFIS DAN IMAGE

APA ITU PENGERTIAN DESAIN ?

Istilah desain muncul sebagai hasil pola industri masal yang dimiliki serta pemikiran

modernisme dengan azas spesialisasinya. Secara singkat istilah desain dapat diartikan

Page 14: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

14

sebagai hasil karya manusia yang harus dapat berfungsi untuk memecahkan suatu masalah

(problem solving). Pada awalnya desain disebut sebagai seni terapan (applied arts), untuk

membedakan dengan seni murni (fine arts). Namun setelah perkembangan industri

moderen terjadi proses sosialisasi yang memisahkan seni terapan menjadi sebuah bidang

tersendiri yang dinamakan desain.

PENGERTIAN DESAIN GRAFIS

Desain grafis awalnya adalah bidang pekerjaan desain yang out putnya adalah karya

desain yang dihasilkan melalui proses cetak, namun seiring dengan perkembangannya

maka aspek komunikasi visual menjadi titik beratnya sehingga disebut pula sebagai desain

komunikasi visual. Desain komunikasi visual merupakan fenomena baru dalam budaya

moderen yang serba visual. Desain komunikasi visual kini mencakup bidang pekerjaan yang

lebih luas tidak hanya dibatasi oleh “proses cetak” saja, namun telah mencakup semua hal

yang serba visual yang secara fungsional untuk berkomunikasi (contohnya, misalnya pada

multimedia).

Desain grafis adalah salah satu salah satu seni terapan yang pada awal-awal

perkembangannya dikenal sebagai commercial art atau seni komersial. Desain grafis

berperan dalam kemajuan budaya yang dapat pula diartikan sebagai aplikasi dari seni dan

komunikasi untuk memenuhi kebutuhan industri dan bisnis. Di dalam aplikasinya termasuk

juga dalam mendukung penjualan produk dan pemasaran serta pelayanan produk

pembuatan indetitas visual untuk perusahaan, produk, lembaga, grafis untuk lingkungan,

atau rambu rambu (sign system), media komunikasi massa, percetakan, filem dan media

elektronik. Desain grafis akan memberi dampak pada upaya mempengaruhi prilaku belanja,

sehingga seseorang dapat memilih sebuah produk karena tampilan visual atau karena

terpengaruh oleh iklannya.

Istilah desain grafis atau graphic designer, yang mempunyai arti proses merancang

gambar atau bentuk-bentuk visual dwimatra (dua dimensi) untuk kepentingan komunikasi

yang fungsional dan efektif. Desain grafis mulanya hanya dimaksudkan untuk bidang desain

yang proses akhirnya menggunakan proses cetak tetapi seiring perkembangan desain istilah

desain grafis berkembang menjadi desain komunikasi visual karena mencakup bidang lain

(non cetak) misalnya multimedia.

Beberapa bidang desain yang lain misalnya; desain interior, desain produk, dan

desain tekstil.

Page 15: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

15

PENGENALAN MACROMEDIA FLASH

Pada prinsipnya animasi dibuat dengan menggunakan berbagai gambar

terpisah. Sementara gerakan (motion) pada dasarnya adalah kumpulan dari gambar

diam yang diurutkan sehingga menyerupai obyek yang bergerak. Seperti halnya

pada TV atau film, sebenarnya layar berkedip dengan kecepatan tertentu dan

menampilkan tiap-tiap gambar. Karena kecepatannya yang sangat tinggi, maka

seluruh gambar tergabung membentuk sebuah aliran adegan yang panjang.

Gambar web pada umumnya (seperti GIF atau JPEG) merupakan ‘bitmap’

yang terdiri atas titik-titik warna tunggal (pixel) yang menyusun gambar sehingga

sering timbul masalah seperti sulit dirubah ukurannya tanpa mengurangi

kualitasnya, kapasitas yang menyita banyak ruang, dan animasinya merupakan

sambungan sejumlah bitmap dalam satu file yang cukup besar, sehingga dalam

kaitannya dengan halaman web, akan memakan waktu yang lama untuk men-

download-nya.

Flash merupakan software yang mampu menghasilkan file animasi dengan

ukuran kecil. Hal ini terjadi karena Flash merupakan program animasi vektor,

maksudnya dibuat dari sejumlah bentuk yang tersusun atas gambar dan warna.

Selain lebih ekonomis ukuran file-nya, vector mudah dibentuk dan digerakkan serta

dapat ditampilkan bahkan dicetak dalam ukuran apapun. Selain gambar dengan

format vektor, Flash juga mampu menggabungkan teks, gambar bitmap, suara serta

elemen interaktif ke dalam movie. Flash memiliki kemampuan untuk

menyederhanakan proses animasi melalui penggunaan frame kunci dan tweening.

Maksudnya cukup dengan membuat titik awal dan akhir animasi, dan Flash akan

mengerjakan tween di antaranya.

PENGENALAN KOMPONEN-KOMPONEN FLASH MX

Sebelum membuat sebuah animasi ada kalanya Anda harus mengenal

dahulu komponen komponen apa saja yang dibutuhkan dalam pembuatan sebuah

animasi. Anda harus mengenal semua komponen yang terdapat di aplikasi Flash MX

ini agar pekerjaan dalam pembuatan animasi ini dapat berjalan dengan lancar. Di

bawah ini merupakan window dari Flash MX yang digunakan dalam pekerjaan

pembuatan animasi, baik itu berupa graphic atau animasi bergerak (cartoon).

Page 16: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

16

Gambar a. Window Macromedia Flash MX

Di bawah ini merupakan keterangan dari kegunaan masing-masing komponen Flash

MX secara detail:

A. Timeline, digunakan untuk mengatur dan mengontrol isi keseluruhan movie

Anda.

Gambar a. Timeline Window

Page 17: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

17

B. Stage, merupakan tempat dimana Anda bekerja dalam membuat sebuah

animasi.

Gambar b. Stage untuk bekerja

C. Tools Box, berisi alat-alat yang digunakan untuk menggambar objek pada stage.

Gambar c. Window Tools box

Page 18: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

18

Description of Tools Box: Arrow Tool Tool ini digunakan untuk memilih suatu objek atau untuk memindahkannya. Subselection Tool Tool ini digunakan untuk merubah suatu objek dengan edit points. Line Tool Tool ini digunakan untuk membuat suatu garis di stage. Lasso Tool Tool ini digunakan untuk memilih daerah di objek yang akan diedit. Pen Tool Tool yang digunakan untuk menggambar dan merubah bentuk suatu objek

dengan menggunakan edit points (lebih teliti & akurat). Text Tool Tool ini digunakan untuk menuliskan kalimat atau kata-kata. Oval Tool Tool yang digunakan untuk menggambar sebuah lingkaran. Rectangle Tool Tool yang digunakan untuk menggambar sebuah segiempat. Pencil Tool Tool ini digunakan untuk menggambar sebuah objek sesuai dengan yang Anda sukai. Tetapi setiap bentuk yang Anda buat akan diformat oleh Flash MX menjadi bentuk sempurna. Brush Tool Tool ini sering digunakan untuk memberi warna pada objek bebas. Free Transform Tool Tool ini digunakan untuk memutar (rotate) objek yang Anda buat atau mengubah bentuk objek menjadi bentuk lain. Fill Transform Tool Tools ini digunakan untuk memutar suatu objek yang diimport dari luar lingkungan Flash MX, serta untuk mengatur efek warna. Ink Bottle Tool Tool ini digunakan untuk mengisi warna pada objek yang bordernya telah hilang (tidak ada). Paint Bucket Tool Tool ini digunakan untuk mengisi warna pada objek yang dipilih.

Page 19: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

19

Eraser Tool Tool ini digunakan untuk menghapus objek yang Anda bentuk.

Page 20: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

20

D. Color Window, merupakan window yang digunakan untuk mengatur warna

pada objek yang Anda buat.

Color Window terdiri dari:

1. Color Mixer, digunakan untuk mengatur warna pada objek sesuai dengan

keinginan Anda. Ada 5 pilihan tipe warna, yaitu: None, Solid, Linear, Radial,

Bitmap.

2. Color Swatches, digunakan untuk memberi warna pada objek yang Anda

buat sesuai dengan yang warna pada window.

E. Actions – Frame, merupakan window yang digunakan untuk menuliskan Action

Script untuk Flash MX. Biasanya Action Script digunakan untuk mengendalikan

objek yang Anda buat sesuai dengan keinginan Anda.

Page 21: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

21

F. Properties, merupakan window yang digunakan untuk mengatur property dari

objek yang Anda buat.

G. Components, digunakan untuk menambahkan objek untuk web application

yang nantinya di publish ke internet.

Window diatas merupakan window utama yang sering digunakan dalam

pembuatan animasi secara window default layout. Pada dasarnya Flash MX

mempunyai banyak window layout dalam pembuatan sebuah animasi, diantaranya

yaitu: Default Layout, Designer [1024x768], Designer [1280x1024], Designer

[1600x1200], Developer [1024x768], Developer [1280x1024], Developer

[1600x1200]. Untuk merubah window layout Anda dapat membukanya melalui

menu Window lalu pilih Panel sets. Tetapi kali ini kita akan menggunakan window

Default Layout, karena semua tools dan window standart yang kita butuhkan untuk

membuat sebuah animasi ada disini semua.

Page 22: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

22

Window Utilitas Pada Flash MX

Library Window

Window ini digunakan untuk menampilkan objek-objek yang kita import dari

luar lingkungan Flash MX maupun objek-objek bawaan dari Flash MX itupun

sendiri. Untuk menggunakannya Anda dapat menekan tombol F11 pada

keyboard atau dari menu Window pilih Library.

Document Properties Window

Window ini digunakan untuk merubah setting (baik itu ukuran, warna, maupun

kecepatan movie) pada dokumen yang berada pada stage. Untuk

menggunakannya Anda harus menekan tombol Ctrl+j secara bersamaan pada

keyboard Anda, atau dari menu Modify pilih Document….Pada window yang

satu ini Anda dapat merubah warna background dari dokumen Anda beserta

ukurannya.

Page 23: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

23

Window Layer Properties

Merupakan window dimana Anda dapat mengatur setting dari layer yang Anda

buat sesuai dengan keinginan Anda. Melalui windowni Anda dapat mengatur

bagaimana sebuah animasi berjalan. Untuk menjalankannya Anda dapat

memilih menu Modify lalu pilih Layer…

Window Scene

Merupakan window dimana Anda dapat mengatur scene yang ada. Melalui

window ini Anda dapat menambahkan scene, menghapus scene, atau

menduplikasikan sebuah scene. Untuk mengaktifkannya Anda dapat menekan

secara bersamaan tombol Shift+F2 melalui keyboard, atau dengan memilih

menu Modify lalu Scene….

Menjalankan Flash MX Movie

Untuk menjalankan movie yang telah Anda buat, Anda dapat mengaktifkannya

melalui menu Control lalu pilih Play (tombol Enter pada keyboard). Untuk membuat

Page 24: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

24

movienya Anda dapat menekan tombol Ctrl+Enter secara bersamaan setelah Anda

simpan project Anda.

Konversi File melalui Flash MX

Anda dapat melakukan konversi file melalui flash MX. File yang dikonversi biasanya

berbentuk file *.swf ke dalam bentuk lainnya, seperti *.html, *.exe, *.avi, dan lain

sebagainya. Untuk mengkonversi file flash yang telah Anda buat, terlebih dahulu

Anda harus mengaktifkan konverternya terlebih dahulu. Cara mengaktifkannya

yaitu dengan memberi checkmark pada type file yang Anda inginkan. Untuk

mengaktifkan publish settings Anda dapat memilih menu File > Publish Settings…

(Ctrl+Shift+F12).

Keterangan:

o Flash (.swf) : Menghasilkan file *.swf (untuk menjalankannya dibutuhkan

flash player).

o Html (.html) : Menghasilkan file *.html (diperlukan internet explorer untuk

menjalankannya). Konversi ini biasanya digunakan untuk membuat web.

o Gif, Jpeg, Png : Menghasilkan file gambar.

o Windows Projector : Menghasilkan file *.exe yang dapat langsung

dijalankan.

o Macintosh Projector : Menghasilkan file *.hqx untuk macintosh.

o Quick Time : Menghasilkan file *.mov untuk Quick time player.

Page 25: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

25

Pengetahuan Dasar Objek Pada Flash MX

Di dalam Flash MX terdapat berbagai macam objek yang sangat unik

diantaranya yaitu oval tool (yang sering digunakan untuk menggambar sebuah

lingkaran) dan rectangle tool (yang sering digunakan untuk menggambar sebuah

bujur sangkar atau persegi panjang). Kedua tool tersebut bersifat paten yakni sudah

menjadi bawaan Flash MX itu sendiri. Kedua objek tool tersebut (oval tool &

rectangle tool) terdiri dari dua bagian yaitu: Outline dan fill. Outline merupakan

bagian terluar dari objek tersebut, sedangkan fill merupakan bagian terdalam dari

objek tersebut yang dapat diisi dengan warna atau gambar [Lihat gambar m].

Outline & Fill dapat disatukan dengan cara membuatnya menjadi satu grup,

yaitu dengan perintah: Group (dapat dipilih melalui menu Modify > Group) atau

dengan cara menekan tombol Ctrl+G secara bersamaan. Tetapi sebelum Anda

menjadikan Outline & Fill menjadi satu grup yang harus Anda lakukan adalah

memblok seluruh bagian Outline & Fill hingga terlihat seperti gambar m.1. Jika telah

diblok maka Anda harus membuatnya menjadi satu grup dengan cara yang telah

dijelaskan diatas.

Page 26: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

26

Membelah Objek dengan Line Tool

Selain itu dalam pemotongan gambar melalui Flash MX tools sangatlah mudah,

karena Anda dapat menggunakan berbagai macam cara. Misalnya dalam memotong

sebuah fill dengan menggunakan line tool.

Menggambar dengan Pencil Tool

Dalam membuat sebuah objek, Anda dapat menggunakan tool yang terdapat pada

Tools box, yaitu pencil tool.

Jika Anda memilih Straighten maka objek yang Anda buat akan berbentuk bujur

sangkar yang rapi. Tetapi jika Anda memilih Smooth maka objek yang Anda buat

akan tampak halus garisnya meskipun tidak serapih straighten. Begitu pula dengan

Ink bentuknya juga tidak serapih Straighten, tetapi yang membedakan antara Ink

dengan Smooth adalah garisnya yang kurang halus(masih terlihat kasar).

Page 27: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

27

Menggambar dengan Pen Tool

Pen tool biasanya digunakan untuk menggambar objek dengan metode edit points.

Untuk menggambar sebuah objek, Anda tinggal menentukan posisi dari edit points

yang Anda inginkan.

Mewarnai objek dengan Brush Tool

Brush yang artinya sendiri adalah sikat/kuas. Tool ini digunakan untuk mewarnai

sebuah objek secara keseluruhan. Ada 5 metode pemberian warna pada brush tool

(lihat gambar dibawah ini).

Merubah Bentuk Objek dengan Arrow Tool

Merubah dalam flash mx sangatlah mudah dan efisien. Untuk mengubah bentuk

suatu objek Anda dapat menggunakan arrow tool. Dengan arrow tool Anda tinggal

mengubah suatu objek dengan menggerakkan outline (garis objek) dari objek

tersebut.

Page 28: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

28

Merubah Bentuk Objek dengan Subselection Tool

Merubah bentuk suatu objek dengan menggunakan Subselection tool sangatlah

mudah dan menyenangkan, karena dengan subselection tool Anda dapat merubah

suatu objek tool menjadi suatu objek yang Anda inginkan. Lihat gambar dibawah ini

yang telah dipilih dengan menggunakan subselection tool.

Dengan menggunakan subselection tool maka objek diatas dapat diubah menjadi

objek baru (seperti gambar dibawah ini).

Page 29: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

29

Dasar – Dasar Pewarnaan Objek Pada Flash MX

Untuk memberikan efek yang baik pada suatu animasi ada kalanya kita harus

mengatur warna suatu objek agar terlihat menarik. Dalam pewarnaan suatu objek

pada Flash MX kita dapat menggunakan berbagai macam tools, diantaranya yaitu:

A. Color Mixer.

B. Color Swatches.

C. Paint Bucket Tools.

D. Ink Bottle Tools.

E. Brush Tools.

F. Fill Transform Tools. (Untuk mengatur efek warna radial)

Jika Anda menginginkan animasi yang Anda buat mempunyai tampilan

menarik dan indah, maka Anda harus memberi efek warna yang baik pula. Oleh

karena itu kali ini kita akan belajar bagaimana memberikan efek warna pada suatu

objek agar terlihat lebih indah.

Memberi warna dengan Color Mixer & Color Swatches

Untuk memberi efek warna pada objek pada Flash MX hanya membutuhkan 2 color

tool, yaitu: Color Mixer & Color Swatches. Saat ini kita akan membahas tentang

bagaimana cara menggunakan tools tersebut.

Didalam Color mixer terdapat 5 macam type fill:

1. None – tidak memberi warna apapun pada fill.

2. Solid – memberi warna padat pada fill.

3. Linier – memberi warna berbentuk linier pada fill.

Page 30: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

30

4. Radial – memberi efek warna radial pada fill.

5. Bitmap – memberi image pada fill. (untuk mengimpor file gambar gunakan

import to library pada file menu).

Untuk memberi warna pada objek yang ditentukan, Anda harus menggunakan tools

yang bernama paint bucket tool. Biasanya yang diberi warna pada object ialah fill-

nya saja. Untuk memberi warna pada outline, Anda harus menggunakan ink bottle

tool.

Pada pojok kanan window color mixer terdapat R, G, B (yang biasa disebut sebagai

penentu warna). R(Red) digunakan untuk memberi nilai seberapa besar kemerahan

warna objek tersebut. G(Green) digunakan untuk memberi nilai seberapa besar

kehijauan warna objek tersebut. B(Blue) digunakan untuk memberi nilai seberapa

besar kedalaman warna biru pada objek tersebut. Alpha memberi efek warna

transparan pada objek yang dituju.

Pada color swatches untuk memberi warna pada object prinsipnya sama saja

dengan color mixer, yang membedakannya yaitu kalau pada color mixer Anda dapat

mencampurkan berbagai warna sekaligus memodifikasinya menjadi suatu efek

warna sesuai dengan keinginan Anda. Tetapi kalau pada color swatches efek warna

sudah ditentukan oleh system. Melalui color mixer Anda dapat membuat warna

baru di color swatches.

Page 31: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

31

Mengatur Tata letak warna pada Objek

Untuk mengatur tata letak warna pada objek dapat menggunakan tool yang

bernama Fill Transform Tool. Cara menggunakannya yaitu:

1. Pilih seluruh area dari objek tersebut. Kemudian pilih Fill Transform Tool dari

Tools Box.

2. Setelah itu klik kembali objek yang akan diatur warnanya.

Maka hasilnya akan seperti gambar dibawah ini.

Selain cara-cara diatas Anda masih dapat mengontrol warna lewat tools box. Hanya

saja warna pilihan untuk outline beserta fill bersifat solid. Kunci kesuksesan dalam

membuat suatu animasi bersifat interaktif terletak dalam pengaturan warnanya.

Jika Anda memberikan warna yang solid saja pada animasi Anda maka animasi yang

Anda buat tersebut akan terlihat kurang menarik. Karena itu efek warna sangat

diperhitungkan dalam pembuatan suatu animasi.

Page 32: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

32

METODE PEMBUATAN ANIMASI

Animasi adalah proses penciptaan efek gerak atau efek perubahan bentuk yang

terjadi selama beberapa waktu. Animasi bisa berupa gerak sebuah objek dari

tempat yang satu ke tempat yang lain, perubahaan warna, atau perubahan bentuk

(yang dinamakan “morphing”)

Animasi Flash dapat dilakukan dengan dua cara yaitu :

1. Frame by frame

2. Tweening

Frame by frame Animation (Animasi Frame Per Frame)

Bentuk dasar dari animasi adalah animasi frame per frame. Animasi frame

per frame menuntut banyak gambar yang harus dibuat. Efek animasi diciptakan

dengan mengganti gambar yang satu dengan gambar yang lain selama beberapa

waktu. Contoh animasi frame per frame dapat dilihat pada Help | Samples |

Flower. Semua gambar yang bergerak dihasilkan dari gambar yang berbeda-beda

tiap framenya. Karena animasi frame per frame harus memiliki gambar yang unik

tiap framenya maka animasi frame per frame sangat ideal untuk membuat animasi

yang kompleks yang terdiri dari banyak perubahaan seperti ekspresi wajah.

Kelemahan dari animasi frame per frame adalah membutuhkan banyak waktu

untuk membuat setiap gambar dan menghasilkan file yang besar ukurannya.

Di dalam Flash, sebuah frame yang memiliki gambar yang unik dinamakan

keyframe. Animasi frame per frame membutuhkan gambar yang unik setiap

framenya, hal ini menyebabkan setiap framenya adalah keyframe.

Menambahkan keyframe

Untuk menambah keyframe pada timeline, sorot frame dan kemudian lakukan satu

dari

beberapa cara berikut ini :

• Klik kanan dan pilih Insert Keyframe.

• Pilih Insert | Keyframe dari menu.

• Tekan F6 pada keyboard.

Page 33: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

33

Membuat animasi frame per frame

Di bawah ini akan ditunjukkan proses pembuatan animasi frame per frame :

1. Sorot frame dimana Anda akan memulai animasi frame per frame.

2. Jikalau belum berupa sebuah keyframe, buatlah menjadi keyframe dengan cara

memilih menu Insert | Keyframe (F6).

3. Gambarlah atau impor gambar pertama Anda dari urutan gambar pada

keyframe ini.

4. Kemudian klik frame selanjutnya dan buatlah menjadi keyframe yang lain.

Rubahlah isi dari keyframe ini dengan gambar berikutnya.

5. Lakukan penambahan keyframe dan perubahan isinya sampai Anda

memperoleh animasi yang utuh. Pada akhirnya teslah animasi Anda dengan

kembali ke frame pertama dan kemudian pilih menu Control | Play .

Contoh :

Untuk membuat animasi ini sangatlah mudah, ikutilah petunjuk berikut ini.

Gambarlah oval tool pada stage. Kemudian klik kanan pada frame kedua lalu

pilih Insert Keyframe.

Gambar 1. Memasukkan keyframe

Page 34: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

34

Setelah itu dengan menggunakan eraser tool hapuslah sebagian dari oval

tool yang telah Anda buat hingga menyerupai gambar dibawah ini.

Sebelumnya di bagian option ubahlah eraser mode menjadi erase normal.

Ikutilah cara diatas untuk menghapus bagian yang lain dari oval tool.

Perhatian: Sebelum menghapus oval tool, harus memasukkan keyframe

terlebih dahulu. Hapuslah perlahan-lahan hingga oval tool habis sesuai

dengan keyframe yang Anda buat.

Jika Anda telah selesai membuatnya, jalankan movie tersebut dengan cara

menekan tombol Enter. Untuk meng-compile film tersebut tekan Ctrl+Enter.

Tweening

Tween animation sangat mengurangi waktu karena Anda tidak perlu membuat

animasi secara frame per frame. Sebaliknya Anda hanya membuat frame awal dan

frame akhir saja. Dua alasan utama mengapa tween animation sangat baik yaitu

karena mengurangi pekerjaan mengambar dan meminimalkan ukuran file karena isi

dari setiap frame tidak perlu disimpan.

Ada 2 jenis tween animation yaitu Shape tween dan Motion tween, dimana

masingmasing memiliki karakter yang unik.

Page 35: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

35

Shape Tweening (Animasi Perubahan Bentuk)

Shape tweening berguna untuk mengubah bentuk. Flash hanya dapat mengubah

bentuk, jadi jangan mencoba untuk melakukan Shape tween untuk group, symbol,

atau teks. Hal ini tidak akan berhasil. Anda dapat melakukan Shape Tween pada

beberapa bentuk di dalam sebuah layer, tetapi lebih baik untuk menempatkannya

pada layer yang berbeda. Hal ini akan memudahkan jika kita ingin melakukan

perubahan. Shape tweening juga memperbolehkan Anda untuk mengubah warna.

Membuat Sebuah Shape Tween

Langkah-langkah membuat shape tween adalah :

1. Sorot frame di mana Anda ingin membuat animasi. Jika belum berupa sebuah

keyframe maka rubahlah menjadi keyframe.

2. Buatlah gambar pada stage. Ingatlah shape tween hanya bekerja pada bentuk –

bukan pada group, simbol atau teks yang dapat diedit. Untuk 3 elemen tersebut

maka Anda perlu mengubahnya menjadi bentuk dasar dengan melakukan

perintah Modify | Break Apart.

3. Buatlah sebuah keyframe kedua, dan buatlah gambar akhir pada stage.

4. Bukalah kotak dialog Frame Properties dengan mengklik ganda pada frame

mana pun yang berada di antara dua keyframe. Anda dapat juga menyorot

sebuah frame di antaranya dan kemudian memilih menu Modify | Frame.

5. Pilih tab Tweening dan pilih Shape pada field Tweening. Anda akan melihat

beberapa pilihan untuk merubah shape tween seperti yang terlihat pada gambar

di bawah ini.

Page 36: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

36

6. Sorot salah satu Blend Type. Pilihan Distributive akan menciptakan animasi

transasi bentuk yang halus, sedangkan pilihan Angular akan menciptakan

transisi bentuk dengan sudut dan garis-garis lurus. Jika gambar akhir Anda berisi

bentuk yang mempunyai sudut dan garis, pilih Angular, selain itu pilih

Distributive.

7. Jika perlu rubahlah Easing slider. Easing menentukan bagaimana animasi Anda

dari awal sampai akhir. Ini berguna jika Anda ingin menciptakan efek

mempercepat atau memperlambat. Jika Anda ingin anmiasi Anda mulai dengan

lambat dan kemudian cepat, geser slider ke arah in. Untuk animasi yang

permulaannya cepat, dan kemudian melambat, geser slider ke arah out. Jika

Anda ingin kecepatan animasi konstan maka biarkan slider berada di tengah.

Anda dapat juga mengetik besar dari Easing yaitu dari –100 sampai 100.

8. Tekan tombol OK. Teslah animasi dengan memilih menu Control | Play (Enter).

Shape hints

Shape hints memberikan kontrol untuk shape tween yang kompleks. Anda bisa

mengatur setiap titik awal dari animasi perubahan bentuk lalu titik akhir dari

animasi perubahan bentuk tersebut. Dengan memberi beberapa shape hints maka

kita bisa mengontrol animasi perubahan bentuk sesuai dengan yang kita inginkan

karena dalam animasi perubahan bentuk yang kompleks seringkali apa yang kita

inginkan tidak bisa dilakukan oleh program Flash secara otomatis kecuali melalui

shape hints.

Menggunakan Shape Hints Pada Sebuah Shape Tween

Anda dapat dengan mudah menggunakan shape hints pada shape tween dengan

cara sebagai berikut :

1. Buatlah shape tween dengan menggunakan langkah-langkah Membuat Shape

Tween di atas.

2. Sorot frame awal dari shape tween. Pilih Modify | Transform | Add Shape Hint,

atau tekan Ctrl + H untuk menambah sebuah shape hint. Shape hint muncul

dengan lingkaran merah dengan sebuah huruf di dalamnya (huruf itu mulai dari

a sampai z).

3. Pindahkan shape hint ke tempat yang Anda inginkan.

Page 37: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

37

4. Sekarang sorot frame terakhir. Anda akan melihat lingkaran hijau kecil dengan

huruf yang sama seperti pada shape hint awal. Pindahkan shape hint ke tempat

di mana Anda ingin shape hint pertama bergerak menujunya.

5. Jalankan movie Anda (Control | Play) untuk melihat bagaimana shape hint

mempengaruhi tweening.

6. Tambahkan shape hint hingga Anda puas dengan hasilnya. Ingatlah untuk

mencocokkan shape hint yang ada pada frame awal dan frame akhir – a harus

ke a, b ke b dan seterusnya.

Jika setelah Anda menambahkan shape hint kemudian Anda tidak menginginkan

shape hint tersebut, Anda dapat membuang semua shape hint dengan memilih

menu Modify | Transform | Remove All Hints. Anda dapat juga mengklik kanan

pada salah satu shape hint untuk membuka menu pop-up shape hint. Menu ini

memungkinkan Anda untuk menambahkan sebuah hint (Add Hint), membuang

sebuah hint (Remove Hint), atau Remove All Hint.

TIPS

Untuk animasi perubahan bentuk yang kompleks, jangan segan-segan untuk

menggunakan shape hint sebanyak-banyaknya. Semakin banyak shape hint maka

animasi Anda akan semakin baik sesuai dengan keinginan Anda.

Motion Tweening (Animasi gerak)

Motion tween tidak hanya berguna untuk menggerakkan groups, simbol, atau teks

yang dapat diedit dari satu tempat ke tempat lain. Motion tween menolong Anda

untuk merubah ukuran, memutar, merubah warna dan transparansi simbol. Motion

tween hanya bisa digunakan pada satu objek pada satu layer. Jadi jika ingin

mengerakkan banyak objek maka membutuhkan banyak layer.

Membuat Motion Tween

Langkah-langkah membuat sebuah motion tween adalah :

1. Sorot frame di mana Anda ingin membuat animasi. Jika belum berupa sebuah

keyframe maka rubahlah menjadi keyframe.

Page 38: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

38

2. Gambar atau imporlah gambar yang Anda ingin lakukan animasi. Anda hanya

dapat melakukan animasi pada group, simbol, dan teks yang dapat diedit.

Jika Anda menggunakan sebuah gambar, grouplah gambar tersebut atau

ubah menjadi sebuah simbol.

Jika Anda mempunyai gambar berupa simbol di library, Anda cukup

mendrag gambar dari library ke stage.

Jika Anda menggunakan teks yang dapat diedit, Anda tidak perlu melakukan

apa pun karena sudah berupa objek.

3. Sorot frame dimana animasi akan berakhir. Rubah frame ini menjadi sebuah

keyframe dengan memilih menu Insert | Keyframe.

4. Pindahkanlah gambar dalam stage ke tempat yang ingin dituju. Ingatlah Anda

tidak hanya dapat menggerakkan gambar, Anda juga bisa melakukan putaran,

merubah ukuran, dan merubah efek warna.

5. Klik kanan pada sebuah frame di antara kedua keyframe dan pilih Create

Motion Tween. Teslah animasi Anda.

6. Jika Anda ingin mengubah properties motion tween, klik ganda pada salah satu

frameyang berada di antara kedua keyframe untuk membuka kotak dialog

Frame Properties. Pilih tab Tweening. Anda dapat melakukan perubahan

properties, seperti pada gambar di bawah ini :

Tween scaling – Jika Anda ingin mengubah ukuran.

Rotate – Jika Anda ingin memutar objek. Pilih jenis putaran pada menu

dropdown dan kemudian angka rotasi pada kotak times. Jika Anda

mengetik 0 pada kotak times, atau memilih None pada menu drop-

down, tidak ada putaran yang dilakukan.

Page 39: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

39

Orient to path direction – Ketika objek mengikuti sebuah alur, pilihan ini

menyebabkan objek berada di tengah alur.

Easing. Easin – menentukan bagaimana animasi Anda dari awal sampai

akhir. Ini berguna jika Anda ingin menciptakan efek mempercepat atau

memperlambat. Jika Anda ingin anmiasi Anda mulai dengan lambat dan

kemudian cepat, geser slider ke arah in. Untuk animasi yang

permulaannya cepat, dan kemudian melambat, geser slider ke arah out.

Jika Anda ingin kecepatan animasi konstan maka biarkan slider berada di

tengah. Anda dapat juga mengetik besar dari Easing yaitu dari –100

sampai 100.

Contoh :

Untuk menggunakan animasi tween tersebut maka ikutilah petunjuk berikut ini.

1. Gambar objek (misal: rectangle tool) pada stage, kemudian buatlah objek

tersebut menjadi satu group (Ctrl+G).

2. Setelah itu klik kanan pada objek lalu pilih Distribute to layers. Kemudian beri

nama layer tersebut dengan nama kotak dengan cara double click item tersebut

di timeline.

3. Melalui timeline tentukanlah panjang animasi tersebut berjalan dengan cara klik

kanan pada frame ke 15 lalu pilih insert keyframe. (lihat gambar 4).

4. Kemudian klik kanan pada frame yang telah terbentuk. Sebelumnya blok dahulu

keseluruhanframe tersebut. Lalu pilih Create Motion Tween…. Maka frame yang

Anda blok tadi akan keluar sebuah tanda panah (sesuai panjang frame).

Page 40: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

40

5. Anda gerakkan objek yang Anda buat dari tempat yang semula ke tempat yang

lain. Jika objek sudah Anda pindahkan, silahkan tekan enter untuk menjalankan

animasi yang Anda disain. Maka objek yang Anda buat tadi akan bergerak dari

sisi awal menuju ke sisi yang lainnya secara otomatis.

Penulis : Yanis Oktri Pranita

Page 41: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

41

KOMPRESI AUDIO

Metode Kompresi yang mudah pada Audio

Metode kompresi lossless yang masih tradisional seperti Huffman, LZW.

Penggunaanya tidak bekerja dengan baik pada kompresi audio, sama seperti sebagian

kompresi untuk gambar. Sehingga dibentuklah sebuah metoda kompesi untuk mengatasi

keterbatasa pada metode kompresi lossless, yaitu disebut dengan metode kompresi lossy.

Berikut ini adalah cirri-ciri dari metode kompresi lossy pada audio:

1 Adaptive Differetial Pulse Code Modulation, contohnya CCITT G.721,16 tau 32

Kbit/sec

a. Melakukan encode dua atau lebih sinyal yang berbeda, perbedaan

kuantisasi pada encode tersebut adalah kehilangan sinyal data suara

b. Mengadaptasi terhadap kuantisasi terhadap beberapa bit dapat digunakan

asalkan isi data sinyal suara sedikit

1 Linier Predective Coding (LPC)difungsikan untuk menyesuaikan sinyal data yang

ada dengan sinyal suara manusia, kemudian mengirimkan parameter model

suara tersebut ketempat tujuan, seperti sebuah computer yang dapat berbicara

dengan bahasa manusia dengan kecepatan 2,4 kbps

2 Code Excited Linear Predicator (CELP) bekerja mirip seperti LPC, tetapi ada

tambahan CELP dapat memancarkan data suara yang salah, sedangkan PLC

tidak, contohnya mutu percakapan audio pada kecepatan 4,8 kbps

Suara Dan Pendengaran Manusia

Jangkauan Frekuensi suara mansusia telah kita ketahui pada bab sebelumnya

adalah 20 Hz s/d 20 kHz, tapi frekuensi yang pasti terdengar jelas oleh telinga manusia

adalah 2 s/d 4 kHz. Jangkauan yang dinamis antara suara yang tinggi dengan yang rendah

adalah 96 dB. Untuk suara yang keluar dari mulut manusia mempunyai jangkauan 500 Hz

s/d 2 kHz, dimana :

1 Dimana frekuensi yang rendah adalah bass atau bisa dengan ucapan untuk

hurup hidup (vokal)

2 Sedangakan untuk frekuensi tinggi adalah treble atau konsonan

Page 42: KONTRAK KULIAH - mahrus.files.wordpress.com€¦ · KONTRAK KULIAH Matakuliah : Multimedia & Animasi Kode : Bobot : 3 (tiga) SKS Dosen : Ahmad Ali Mahrus, S.Kom Email : ali.mahrus@pranataindonesia.com

42

A. Critical Bands

Sistem suara manusia memiliki keterbatasn, dimana resolusi frekuensinya terbatas.

Keragaman leber frekuensi dapat dibedakan menjadi critical bands. Jika frekuensi yang

ada kuramng dari 100 Hz maka diangap frekuensi audio yang rendah, dan apabila lebih

dari 4 kHz disebut frekuensi audi yang tinggi. Kesemuanya frekuensi audio dapat dibagi

menjadi 25 critical bands.

B. Kepekaan Pendengan Manusia Dalam Hubungannya Dengan Frekuensi

Sebuah eksperimen didapatkan jika seseorang ditempatkan pada ruangan yang

sunyi, dan diberikan sebuah suara dengan kenaikan tingkat frekuensi sebesar 1 kHz,

maka orang tersebut tidak dapat mendengar dikarenakan pertukaran frekuensi suara

dan tempat yang digunakan,