sumber belajar multimedia

89

Sumber Belajar Multimedia

BAB VIII

PRINSIP DASAR DAN MENYAJIKAN ANIMASI DUA DIMENSI

Kompetensi Dasar:

Memahami prinsip dasar Animasi 2D

Menyajikan Animasi 2D

Materi Pokok:

Prinsip-prinsip dasar Animasi 2D

Teknik Animasi Frame

Animasi Tweening

A. Sejarah dan Konsep Animasi

Kelahiran animasi sudah dimulai sejak jaman batu, yaitu lebih dari 15.000 tahun

yang lalu. Hal ini dibuktikan dengan ditemukannya lukisan dan cerita bergambar pada din-

ding gua jaman Paleolitikum. Berabad-abad kemudian, perkembangan cerita bergambar

sampai pada bangsa Mesir kuno, yaitu pada tahun 2.000 SM, sering sekali menggambarkan

subjek yang diceritakan dalam bentuk pergerakan. Salah satu gambar yang ditemukan ada-

lah beberapa gambar posisi gulat pada jaman Mesir. Kebiasaan menggambar ini juga diikuti

oleh bangsa Yunani dan Romawi. Perkembangan cerita bergambar pada jaman kuno inilah

yang merupakan cikal bakal Teknik Animasi jaman sekarang. Pada tahun 1914, Winsor

McCay membuat animasi bernama Gertie the Dinosaur. Pada tahun berikutnya Otto Mes-

mer membuat animasi bisu dengan plot cerita terkenal, yaitu Felix the Cat.

Pelopor dunia animasi adalah Walt Disney dan Roy Disney. Pada tahun 1923 mereka

membuat animasi fantasi disertai iringan musik, dengan tokoh kartun seekor tikus bernama

Mortimer, sebuah tokoh cikal bakal Mickey Mouse. Setelah sukses dalam menghidupkan

Mickey Mouse, mereka membuat animasi "White Snow and Seven Dwarfs", dan berbagai

animasi lainnya yang sukses sampai sekarang, serta dinaungi oleh Pixar Animation.

Animasi mampu menyampaikan suatu konsep yang kompleks menjadi menarik

secara visual dan juga dinamik, sehingga animasi terus berkembang hingga saat ini. Untuk

menjadi sebuah animasi yang menarik secara visual, maka muncul teori yang dinamakan

90


prinsip-prinsip Animasi. Prinsip-prinsip Animasi digunakan para animator sebagai pakem

atau pedoman utama gambar bergerak menjadi lebih hidup. Secara sederhana prinsip kerja

Animasi adalah dengan menumpuk beberapa gambar secara bergantian dan berurutan.

Contoh: prinsip kerja Animasi dengan menumpuk beberapa gambar secara berurutan

dalam tempo yang cepat. Gambar akan ditampilkan mulai dari urutan pertama sampai

dengan terakhir, sehingga seolah-olah gambar yang ada, misalnya gambar bola, bergerak

dari bawah ke atas. Kecepatan gerak bola tergantung pada delay antar gambar. Semakin

kecil delay maka akan semakin cepat pula gerakan bola itu. Langkah ini juga merupakan

cara pembuatan kartun-kartun klasik.

Dua orang animator profesional Thomas dan Ollie Johnston, memberikan 12 prinsip

Animasi yang diadopsi dari Animasi produksi Walt Disney. Merekalah yang merumuskan

kedua belas prinsip Animasi tersebut. Dua belas (12) prinsip dasar Animasi ini diciptakan

pada tahun 1930, dan dikenalkan pertama kali pada tahun 1981 lewat buku mereka The

Illusion of Life: Disney Animation. Dengan munculnya 12 prinsip Animasi, dapat mencipta-

kan hasil Animasi yang menarik, dinamis, dan tidak membosankan.

B. Prinsip Dasar Animasi

1. Squash and Stretch

Squash and strecth adalah upaya penambahan efek lentur (plastis) pada objek atau

figur, sehingga seolah-olah ‘memuai’ atau ‘menyusut’, yang dapat memberikan efek gerak

yang lebih hidup. Penerapan squash and stretch pada figur atau benda hidup (misal: ma-

nusia, binatang, creatures) akan memberikan ‘enhancement’ sekaligus efek dinamis terha-

dap gerakan/action tertentu. Pada benda mati (misal: gelas, meja, botol) penerapan squash

and stretch akan membuat mereka (benda-benda mati tersebut) tampak atau berlaku se-

perti benda hidup.

Gambar 8.1 Contoh Penerapan Squash and Stretch

91


Contoh ketika sebuah bola dilemparkan. Pada saat bola menyentuh tanah, maka

dibuat seolah-olah bola yang semula bentuknya bulat sempurna menjadi sedikit lonjong

horizontal, meskipun kenyataannya keadaan bola tidak selalu demikian. Hal ini memberi-

kan efek pergerakan yang lebih dinamis dan ‘hidup’.

2. Anticipation

Anticipation boleh juga dianggap sebagai persiapan/awalan gerak atau ancang-an-

cang. Seseorang yang bangkit dari duduk harus membungkukkan badannya terlebih dahulu

sebelum benar-benar berdiri. Pada gerakan melompat, seseorang yang tadinya berdiri

harus ada gerakan ‘membungkuk’ terlebih dulu sebelum akhirnya melompat-lompat.

Gambar 8.2 Contoh Penerapan Anticipation

3. Staging

Staging dalam animasi meliputi bagaimana ‘lingkungan’ dibuat untuk mendukung

suasana atau ‘mood’ yang ingin dicapai dalam sebagian atau keseluruhan scene. Biasanya

hal ini berkaitan dengan posisi kamera pengambilan gambar. Posisi kamera bawah membu-

at karakter terlihat besar dan menakutkan, kamera atas membuat karakter tampak kecil

dan bingung, sedangkan posisi kamera samping membuat karakter tampak lebih dinamis

dan menarik.

Gambar 8.3 Contoh Penerapan Staging

92


4. Straight Ahead Action

Straight Ahead Action, yaitu membuat Animasi dengan cara seorang Animator

menggambar satu per satu, frame by frame, dari awal sampai selesai seorang diri. Teknik

ini memiliki kelebihan, yakni kualitas gambar yang konsisten karena dikerjakan oleh satu

orang saja. Tetapi teknik ini juga memiliki kekurangan, yaitu waktu pengerjaan yang lama.

Gambar 8.4 Contoh Penerapan Straight Ahead Action

5. Pose to Pose

Pose to Pose, yaitu pembuatan Animasi oleh seorang Animator dengan cara meng-

gambar hanya pada key frame-key frame tertentu saja. Selanjutnya in-between atau inter-

val antar key frame digambar/dilanjutkan oleh asisten/animator lain. Cara ini memiliki

waktu pengerjaan lebih cepat, karena melibatkan lebih banyak sumber daya, sehingga lebih

cocok diterapkan pada industri animasi.

Gambar 8.5 Contoh Penerapan Pose to Pose

6. Follow Through and Overlapping Action

Follow through adalah tentang bagian tubuh tertentu yang tetap bergerak meski-

pun seseorang telah berhenti bergerak. Misalnya, rambut yang tetap bergerak sesaat se-

telah melompat. Overlapping action secara mudah bisa dianggap sebagai gerakan saling-

silang, yakni serangkaian gerakan yang saling mendahului (overlapping). Contoh: Kelinci

93


yang melompat. Sesaat setelah melompat telinganya masih bergerak-gerak meskipun ge-

rakan utamanya, yakni melompat, telah dilakukan.

Gambar 8.6 Contoh Penerapan Follow Through and Overlapping Action

7. Slow in and Slow out

Slow in and Slow out menegaskan bahwa setiap gerakan memiliki percepatan dan

perlambatan yang berbeda-beda. Slow in terjadi jika sebuah gerakan diawali secara lambat

kemudian menjadi cepat. Slow out terjadi jika sebuah gerakan yang relatif cepat kemudian

melambat. Contoh Slow in di atas:

Gambar 8.7 Contoh Penerapan Slow in

8. Arcs

Pada Animasi, sistem pergerakan tubuh manusia, binatang, atau makhluk hidup la-

innya, bergerak mengikuti pola/jalur (maya), yang disebut Arcs. Hal ini memungkinkan

mereka bergerak secara ‘smooth’ dan lebih realistik, karena pergerakan mereka mengikuti

suatu pola yang berbentuk lengkung (termasuk: lingkaran, elips, atau parabola). Sebagai

contoh, Arcs ditunjukkan pada lintasan tangan saat melempar bola dan lintasan gerak bola

di udara.

94


Gambar 8.8 Contoh Penerapan Arcs

9. Secondary Action

Secondary action adalah gerakan-gerakan tambahan yang dimaksudkan untuk

memperkuat gerakan utama supaya sebuah Animasi tampak lebih realistik. Secondary

action tidak dimaksudkan untuk menjadi ‘pusat perhatian’, sehingga mengaburkan atau

mengalihkan perhatian dari gerakan utama. Kemunculannya lebih berfungsi memberikan

emphasize untuk memperkuat gerakan utama.

Gambar 8.9 Contoh Penerapan Secondary Action

Contoh, ketika seseorang sedang berjalan, tentu gerakan utamanya adalah melang-

kahkan kaki sebagaimana berjalan seharusnya. Namun sambil berjalan ‘seorang’ figur atau

karakter Animasi dapat sambil mengayun-ayunkan tangannya. Gerakan mengayun-

ayunkan tangan inilah yang disebut secondary action untuk gerakan berjalan.

95


10. Timing and Spacing

Grim Natwick, seorang Animator Disney pernah berkata, “Animasi adalah tentang

timing dan spacing”. Timing adalah tentang menentukan waktu kapan sebuah gerakan ha-

rus dilakukan, sementara spacing adalah tentang menentukan percepatan dan perlam-

batan dari bermacam-macam jenis gerak.

Gambar 8.10 Contoh Penerapan Timing

Contoh Timing, menentukan pada detik keberapa sebuah obyek/karakter berjalan sampai

ke tujuan atau berhenti.

Gambar 8.11 Contoh Penerapan Spacing

Contoh Spacing, menentukan kepadatan gambar (yang pada Animasi akan berpengaruh

pada kecepatan gerak).

11. Exaggeration

Exaggeration merupakan upaya mendramatisir Animasi dalam bentuk rekayasa

gambar yang bersifat hiperbolis, yang dibuat sedemikian rupa sehingga terlihat sebagai

bentuk ekstrimitas ekspresi tertentu, dan biasanya digunakan untuk keperluan komedi.

Seringkali hal ini ditemui pada film-film Animasi anak-anak (segala usia) seperti Tom & Jery,

Donald Duck, Mickey Mouse, Sinchan, dan lain sebagainya.

96


Gambar 8.12 Contoh Penerapan Exaggeration

Contoh, tubuh Donald Duck melayang mengikuti sumber asap saat hidung Donald Duck

mencium aroma masakan/makanan lezat.

12. Solid Drawing

Kemampuan menggambar sebagai dasar utama Animasi memegang peranan yang

menentukan “baik proses maupun hasil” sebuah Animasi, terutama Animasi klasik. Meski-

pun kini peran gambar yang dihasilkan sketsa manual sudah bisa digantikan oleh komputer,

tetapi dengan pemahaman dasar ‘menggambar’ akan menghasilkan Animasi yang lebih

‘peka’. Sebuah obyek/gambar dibuat sedemikian rupa, sehingga memiliki karakteristik se-

buah obyek (volume, pencahayaan dan konsistensi kualitas gambar/bentuk/karakter).

Gambar 8.13 Contoh Penerapan Solid Drawing

97


C. Adobe Flash

Sebelum membahas mengenai pembuatan Animasi, terlebih dahulu akan dibahas

mengenai software Adobe Flash. Adobe Flash merupakan software yang dirancang oleh

Adobe yang dapat digunakan untuk membuat Animasi web, film kartun, simulasi, dan

media pembelajaran interaktif. Software ini dulunya bernama Macromedia Flash yang

dikeluarkan oleh perusahaan Macromedia. Berikut ini adalah tampilan lembar kerja Adobe

Flash CS6.

Gambar 8.14 Tampilan Lembar Kerja Adobe Flash CS6

1. Menu Bar, berisi kumpulan menu perintah, antara lain: File, Edit, View, Insert, Modify,

Text, Commands, Control, Debug, Window, dan Help.

2. Stage: halaman kerja yang digunakan untuk menempatkan objek yang ingin ditampilkan

pada saat publishing.

3. Timeline: panel yang berguna untuk mengatur objek pada tingkat layer maupun frame,

serta sebagai pengatur jalannya Animasi dan durasi waktu kecepatan frame-nya.

4. Panel: terdapat dua panel. Panel dengan susunan ikon-ikon menurun, terdiri dari: Color

Mixer Panel, Info, Transform, Component, dan Motion Presets Panel. Panel dengan

susunan tab-tab mendatar, terdiri dari: Tab Properties yang berfungsi untuk mengatur

properties document, Object, Tool, dan lain-lain. Sedangkan Tab Library berfungsi

sebagai tempat penyimpanan objek-objek yang digunakan (symbol, gambar, suara,

video, dan lain-lain).

98


5. Tool Box: panel yang berisi kumpulan tool yang dapat digunakan untuk membuat dan

mengedit objek.

Berikut ini adalah fungsi dari masing-masing tool pada Toolbox

Tabel 8.1 Fungsi Masing-masing Toolbox

Tool Fungsi

Selection Tool (V) Untuk memilih atau menyeleksi suatu objek.

Sub Selection Tool (A) Untuk menyeleksi objek shape lebih detail dari Selection Tool.

Free Transform Tool (Q) Untuk mentransformasikan objek yang terse-leksi.

Gradient Transform Tool (F) Untuk mentransformasikan gradient fill objek yang terseleksi.

Line Tool (N) Untuk membuat objek berupa garis.

Lasso Tool (L) Untuk menyeleksi objek dengan menggambar sebuah garis seleksi.

Pen Tool (P) Untuk menggambar garis dengan bantuan titik bantu seperti dalam pembuatan garis, kurva. atau gambar. Text Tool (T) Untuk membuat objek teks.

Oval Tool (O) Untuk membuat objek berbentuk bulat atau oval.

Rectangle Tool (R) Untuk membuat objek berbentuk persegi panjang.

Pencil Tool (Y) Untuk membuat garis.

Brush Tool (B) Untuk membuat bentuk garis-garis dan bentuk bebas.

Deco Tool (U) Untuk membuat objek effect yang sudah dise-diakan.

Ink Bottle Tool (S) Untuk mengubah warna garis, lebar garis, dan style garis atau garis luar sebuah bentuk.

Paint Bucket Tool (K)

Untuk memberi atau mengubah warna area sebuah objek yang telah diwarnai. Paint dapat digunakan untuk mewarnai warna solid, peng-isian warna gradasi dan pengisian bitmap.

Eyedropper Tool (I) Untuk mengambil sample satu warna dari gambar atau objek.

Eraser Tool (E) Untuk menghapus objek.

99


Hand Tool (H) Untuk menggeser tampilan stage tanpa mengubah pembesaran.

Zoom Tool (M,Z) Untuk memperbesar atau memperkecil tam-pilan stage.

Stroke Color Digunakan untuk memilih atau memberi warna pada suatu garis

Fill Color Untuk memilih atau memberi warna pada suatu objek

Black and White, Swap Color

Black and White hanya digunakan untuk war-na hitam putih, Swap Color digunakan untuk menukar warna fill atau stroke yang aktif.

D. Istilah-Istilah Dasar dalam Pembuatan Animasi

1. Frame, Keyframe, dan Blank Keyframe

Gambar 8.15 Contoh Frame

Frame merupakan tempat objek yang dibuat berada. Isi frame akan selalu sama

dengan key frame sebelumnya. Untuk menambahkan frame dapat dilakukan dengan klik

kanan dan pilih Insert Frame atau tekan F5. Key frame merupakan frame, dimana kita bisa

meletakkan objek. Key frame digunakan untuk menempatkan perubahan gambar atau

objek dari Animasi. Untuk menambahkan key frame dapat dilakukan dengan klik kanan dan

pilih Insert Keyframe atau tekan F6.

Blank key frame atau frame kosong dilambangkan dengan bulatan putih. Apabila

blank key-frame ini berisi objek, maka frame ini akan berubah menjadi key frame. Untuk

100


menambahkan blank key-frame dapat dilakukan dengan klik kanan dan pilih Insert Blank

Keyframe atau tekan F7.

2. Layer

Gambar 8.16 Contoh Layer

Layer pada Flash dianalogikan sebagai sebuah media gambar yang transparan. Kita

dapat menghasilkan komposisi gambar dengan menumpuk beberapa gambar yang dibuat

pada media transparan. Gambar pada lapisan bawah akan tertutup oleh gambar pada

lapisan atasnya, akan tetapi gambar pada lapisan bawah dapat terlihat di bagian yang

kosong dari lapisan atasnya.

3. Symbol

Symbol adalah objek yang yang berupa symbol. Ada 3 (tiga) jenis symbol pada Flash,

yaitu: (1) Movie Clip, merupakan symbol yang berupa kumpulan frame, dan dapat berulang;

(2) Button, merupakan symbol yang berupa tombol; dan (3) Graphic merupakan symbol

yang berupa gambar. Untuk membuat symbol dapat dengan berbagai cara, antara lain:

1. Membuat symbol baru, Insert -> New Symbol (Ctrl + F8), kemudian pilih type symbol.

2. Merubah objek yang sudah ada dan menjadi symbol, Select Objek -> klik kanan ->

Conver to Symbol (atau tekan tombol F8) -> Pilih type symbol.

Gambar 8.17 Merubah Obyek yang Sudah Ada

101


E. Teknik Animasi

1. Animasi Frame by Frame

Teknik ini adalah teknik paling dasar dari Animasi. Teknik Animasi frame by frame

adalah Teknik Animasi yang dilakukan dengan mengubah obyek (baik bentuk ataupun

posisinya) pada halaman kerja di setiap frame-nya. Lama tidaknya sebuah Animasi sangat

bergantung dari jumlah frame. Pembuatan Animasi frame by frame membutuhkan waktu

yang lama, karena harus mengubah obyek pada setiap frame untuk membuat Efek Animasi.

Berikut ini merupakan contoh pembuatan Animasi frame by frame, sebagai contoh

adalah menggerakkan obyek persegi panjang ke arah kanan.

1) Buat obyek persegi panjang menggunakan Rectangle Tool pada Tool Box.

Gambar 8.18 Contoh Pembuatan Animasi Frame by Frame

2) Pada frame kedua, tambahkan key frame baru dengan cara: klik kanan pada frame

kedua, dan kemudian pilih Insert Keyframe.

Gambar 8.19 Tambah Key Frame Baru

102


3) Pada frame kedua, geser posisi obyek persegi panjang ke sebelah kanan.

Gambar 8.20 Menggeser Posisi Objek Persegi Panjang

4) Tambahkan lagi key frame pada frame ketiga, dengan cara seperti pada langkah kedua.

Kemudian geser lagi obyek ke sebelah kanan seperti pada langkah ketiga.

5) Ulangi langkah kedua sampai keempat sampai dengan jumlah frame yang diinginkan.

Semakin banyak frame, semakin lama durasi Animasi yang terbentuk.

6) Agar transisi perpindahan obyek terlihat halus, maka sebaiknya jangan terlalu jauh

menggeser obyek pada tiap frame-nya.

7) Jalankan Animasi, dengan memilih menu Control -> Test Movie -> Test atau tekan Ctrl

+ Enter.

2. Animasi Tweening

Untuk membuat Animasi (objek bergerak) pada Flash ada beberapa cara, antara

lain: Motion Tween, Shape Tween, Motion Guide, dan Masking.

a. Motion Tween

Merupakan Animasi pergerakan/perubahan koordinat suatu symbol. Jadi, objek

yang dapat digunakan pada Motion Tween hanya objek jenis Symbol.

Langkah-langkah membuatnya:

1) Buatlah sebuah objek persegi pada layer 1 frame 1.

2) Kemudian klik kanan pada layer 1 frame 15 -> pilih Insert Keyframe.

Geser kedudukan objek persegi layer 1 frame 15 ke arah kanan.

103


Gambar 8.21 Menggeser Kedudukan Obyek Persegi

3) Klik kanan pada frame (antara key frame 1 dan 15), pilih Create Classic Tween.

4) Jalankan Animasi dengan memilih menu: Control -> Test Movie (Ctrl+Enter).

b. Shape Tween

Merupakan Animasi perubahan bentuk/koordinat suatu objek jenis Shape. Cara ini

mirip dengan Motion Tween, hanya saja objek yang digunakan tidak perlu di-convert

menjadi symbol terlebih dahulu. Langkah-langkah membuatnya:

1) Buatlah sebuah objek segi empat pada layer 1 frame 1.

2) Kemudian klik kanan pada layer 1 frame 15, pilih Insert Blank Keyframe.

3) Buat objek lingkaran pada layer 1 keyf rame 15 tersebut.

Gambar 8.22 Contoh Pembuatan Shape Tween

4) Klik kanan pada frame antara key frame 1 dan 15, lalu klik kanan pilih Create Shape

Tween.

5) Jalankan Animasi dengan Memilih menu Control > Test Movie (Ctrl+Enter).

104


c. Motion Guide

Merupakan Animasi pergerakan suatu objek yang mengikuti guide (garis) yang

dibuat. Cara ini juga menggunakan cara Motion Tween, sehingga objek yang digunakan

harus objek jenis symbol. Langkah-langkah membuatnya:

1) Buat 2 buah layer masing-masing beri nama: layer=bola dan layer=garis.

2) Buatlah sebuah objek lingkaran pada frame 1 layer “bola” dan objek garis pada layer

“garis” (bisa menggunakan pen/pencil tool).

3) Lalu pada frame 15 layer “garis”, klik kanan -> pilih Insert Frame dan pada frame 15

layer “bola” pilih Insert Keyframe.

4) Kemudian pada frame 15 layer “bola”, pindahkan objek bola ke bagian bagian/ujung

akhir garis.

Gambar 8.23 Memindahkan Objek Bola ke Akhir Garis

5) Klik kanan pada layer “garis”, pilih Guide/ Add Classic Motion Guide.

6) Klik kanan pada frame antara key frame 1 dan 15 pada layer “bola”, pilih Create Classic

Tween.

7) Jalankan Animasi dengan memilih menu Control -> Test Movie (Ctrl+Enter).

d. Masking

Fasilitas ini digunakan untuk menutupi layer yang berada di bawah layer mask,

sehingga objek yang tampak hanya yang berada di area objek masking. Contoh Animasi yang

digunakan dengan cara ini adalah Animasi Teks Kilap berjalan. Langkah-langkah membuat

Animasi Teks Kilap:

1) Buat 3 layer, masing-masing beri nama layer: “teks”, “kilap”, dan “mask”.

105


Gambar 8.24 Membuat 3 Layer

2) Pada layer “teks”, buat objek text bertuliskan “MULTIMEDIA”.

Kemudian copy teks tersebut dan paste in place (Ctrl + Shift + V) ke layer “mask” pada

frame 1. Setelah itu buat objek segi empat pada layer “kilap” frame 1.

3) Selesai membuat objek, tambahkan 40 frame pada layer “teks” dan layer “mask”, serta

Insert Keyframe pada frame 40 layer “kilap”. Ubah kedudukan objek “kilap” pada akhir

teks “MULTIMEDIA”.

Klik kanan pada frame layer “kilap”, pilih Create Shape tween.

4) Kemudian klik kanan pada layer “mask”, pilih Mask untuk memberi efek mask. Hasilnya

seperti gambar di bawah.

5) Jalankan Animasi dengan memilih menu Control > Test Movie (Ctrl+Enter).

106


Sajian Sumber Belajar ini disusun untuk kepentingan belajar, yang dirujuk/disa-lin/disarikan/diadaptasi dari:

Oprekzone. 2016. 12 Prinsip Dasar Animasi, (Online), (http://oprekzone.com/12-prinsip-animasi/), diakses 13 Juli 2016.

Purnomo, Wahyu. 2013. Animasi 2D untuk SMK/MAK Kelas XII Semester 1. Jakarta: Ke-

mendikbud. Williams, R. 2012. The Animator's Survival Kit: A Manual of Methods, Principles and

Formulas for Classical, Computer, Games, Stop Motion and Internet Animators. New York: Farrar, Straus, and Giroux.

http://oprekzone.com/12-prinsip-animasi/

http://oprekzone.com/12-prinsip-animasi/

sumber belajar multimedia

Documents