Professional Documents
Culture Documents
LANDASAN TEORI
Animasi berasal dari kata ”Animation” yang dalam bahasa Inggris ”to
animate” yang berarti menggerakan. Jadi animasi dapat diartikan sebagai proses
perubahan bentuk atau properti obyek yang ditampilkan dalam kurun waktu
tertentu. Contoh:
besar.
animasi. Contoh, tampilan animasi pergeseran posisi obyek dari koordinat awal ke
menggunakan frame rate dengan unit pengukurannya fps (frame per second).
Penentuan nilai fps berarti menentukan jumlah frame yang akan diputar dalam
waktu 1 detik. Sebagai contoh, jika suatu movie Flash menggunakan frame rate:
12 fps, maka movie akan dimainkan dengan memutar 12 frame dalam 1 detik.
CATATAN
Frame merupakan tempat objek-objek movie diletakkan.
1
Sejarah animasi dimulai dari jaman purba, dengan ditemukannya lukisan-
lukisan pada dinding goa di Spanyol yang menggambarkan ”gerak” dari binatang-
binatang. Pada 4000 tahun yang lalu bangsa Mesir juga mencoba menghidupkan
pada peradapan Mesir Kuno 2000 sebelum masehi. Salah satunya adalah beberapa
dasar dari karakter mata manusia yaitu: persistance of vision (pola penglihatan
yang teratur). Paul Roget, Joseph Plateau dan Pierre Desvigenes, melalui
peralatan optic yang mereka ciptakan, berhasil membuktikan bahwa mata manusia
didefinisikan sebagai:
2
B. JENIS-JENIS ANIMASI
Dilihat dari tehnik pembuatannya animasi yang ada saat ini dapat
perkembangannya, jenis animasi ini sering menggunakan clay (tanah liat) sebagai
dihasilkan dari penggambilan gambar berupa obyek (boneka atau yang lainnya)
yang digerakkan setahap demi setahap. Dalam pengerjaannya teknik ini memiliki
. Gambar B.1 Salah satu adegan dari film Chiken Run dan adegan dari film Celebrity
Deadmatch
3
Wallace and Gromit dan Chicken Run , karya Nick Parks, merupakan salah
dunia.
sampai saat ini. Dinamakan tradisional karena tehnik animasi inilah yang
juga sering disebut cel animation karena tehnik pengerjaannya dilakukan pada
celluloid transparent yang sekilas mirip sekali dengan transparansi OHP yang
sering kita gunakan. Pada pembuatan animasi tradisional, setiap tahap gerakan
Gambar B.2: Contoh gambar proses gerakan berjalan pada animasi tradisional.
4
Gambar B.3:”Pinokio” salah satu film animasi tradisional buatan Waltsdisney.
Gambar B.4 :”Naruto” salah satu film animasi tradisional yang proses
pembuatannya telah menggunakan komputer.
dan kamera, pemberian suara, serta special effeknya semuanya di kerjakan dengan
5
digambarkan dengan animasi menjadi mungkin dan lebih mudah. Sebagai contoh
perjalanan wahana ruang angkasa ke suatu planet dapat digambarkan secara jelas,
atau
C. SOFTWARE ANIMASI
Saat ini terdapat banyak jenis software animasi yang beredar di pasaran, dari
dari yang gratis hingga puluhan juta rupiah. Dari sisi fungsi penggunaan software
Dari sisi penggunaan umumnya tidak sulit. Contoh dari Software Animasi 2D ini
antara lain:
6
Software animasi 3D mempunyai fasilitas dan kemampuan yang canggih
untuk membuat animasi 3 dimensi. Fasilitas dan kemampuan tersebut antara lain,
membuat obyek 3D, pengaturan gerak kamera, pemberian efek, import video dan
rumit.
• Maya • Cinema 4D
Macromedia Flash adalah sebuah tool yang dapat digunakan untuk membuat
berbagai macam animasi, presentasi, game bahkan perangkat ajar. Selain itu Flash
MX ini dapat digunakan sebagai tool untuk mendesain web, dan berbagai aplikasi
multimedia lainnya.
7
Start Page
2004, yaitu:
8
• Open
• Create New
user
Interface
• Extend
Exchange.
• Learn
9
Gambar D.2: tampilan standar jendela kerja Flash 8
• Menubar
• Toolbar
10
tampilan lembar kerja, Colors; menentukan warna yang dipakai saat
11
Eraser Tool Menghapus objek E
• Timeline
objek dalam stage agar dapat diolah dengan objek lain. Setiap layer
12
• Stage
• Panel
properties, Filters & Parameters, Actions, Library, Color dan Align &
13
• Properties
untuk mengatur line/garis seperti besarnya garis, bentuk garis, dan warna
garis.
• Library
14
Panel Library mempunyai fungsi sebagai perpustakaan simbol/media
kumpulan gambar baik movie, tombol (button), sound, dan gambar statis
(graphic).
layar, warna background, framerate, dan dimensi dari animasi yang akan
15
16
Gambar D.9: Document Properties
E. TEKNIK ANIMASI
17
Terdapat tiga teknik dasar pembuatan animasi, yaitu: frame-by-frame,
berbagai tampilan animasi. Selain itu terdapat teknik tambahan yang bisa
Masking.
E.1. Frame-by-Frame
frame memerlukan minimal dua frame. Jika pada frame 1 diletakkan objek
lingkaran warna merah, pada frame 2 diletakkan objek lingkaran warna kuning,
maka pada saat movie dimainkan akan tampil animasi warna kelip merah dan
kuning.
pembuatannya adalah:
18
Teknik tweening tipe motion, atau motion tweening, digunakan untuk
menganimasi objek objek, seperti teks, group objek, dan symbol. Cara
akhir.
Gambar E.1: Perbedaan tampilan seleksi antara objek shape dan non-shape
CATATAN
Identifikasi pemilihan tipe tweening yang lebih mudah adalah:
• Objek yang jika terseleksi ditampilkan
dengan titik-titik putih hanya bisa diterapkan tweening
shape.
19
Teknik masking digunakan untuk menampilkan objek yang berada dalam
layer yang di-masked berdasarkan area yang bersimpangan dengan objek yang
berada dalam layer mask. Sebagai contoh, Gambar E.1 mengilustrasikan tampilan
sebelum penerapan masking, objek kotak berada di Layer 2 (yang atas) dan teks
berada di Layer 1, terlihat bahwa karakter dalam teks yang berada di bawah objek
diterapkan masking, yaitu Layer 2 tempat objek kotak berada dijadikan layer
mask, dan Layer 1 tempat teks berada dijadikan layer yang di-masked. Tampilan
menjadi kebalikan dengan sebelum diterapkan mask, karakter dalam teks yang
berada di bawah objek kotak menjadi terlihat, dan yang berada di luar objek kotak
20
Gambar E.2: Tampilan setelah diterapkan masking
teks.
DIGINNOVAC.
stroke, dengan ukuran dan posisi seperti contoh pada Gambar E.4.
21
Gambar E.4: Membuat objek kotak pada Layer 2
yang dianimasi adalah objek kotak, sedangkan teks akan terlihat statis.
Oleh karena itu pada Layer 1 tempat teks berada, klik kanan frame 10,
objek kotak berada, klik kanan frame 10, kemudian klik menu Insert
Keyframe.
tampilan teks.
22
Gambar E.5: Menerapkan transformasi pada kotak
7. Pada Layer 2 tempat objek kotak berada, klik salah satu frame di
kanan nama Layer 2 (tempat kotak berada), kemudian klik menu Mask
23
10. Pada panel Timeline posisikanlah playback pada frame 1, yaitu
Motion Guide. Motion guide adalah layer yang di dalamnya terdapat obyek garis
(baik lurus, melengkung, atau bebas) yang digunakan sebagai garis lintasan
pergeseran obyek yang berada di layer bawahnya (layer target guide). Dari
istilahnya, yaitu motion guide, tentunya bisa disimpulkan bahwa teknik animasi
24
Berikut ini akan dipraktekkan pembuatan animasi dengan menggunakan
program.
4. Klik kanan salah satu frame di antara frame 1 dan 20, kemudian
terletak di bagian bawah jendela, maka akan tampil layer baru (layer
Motion Guide).
25
Gambar F.2: Membuat layer Motion Guide
8. Lakukan test movie, setelah itu simpan latihan ini. Jika movie
26
G. ANIMASI LOADING MOVIE
program.
27
6. Tekan tombol Ctrl + Shift + V (menu Edit > Paste in Place)
area objek.
10. Tekan tombol Ctrl + Shift + V (menu Edit > Paste in Place)
28
Gambar G.4 : Menggandakan dan menggeser posisi objek
digunakan juga 7.
dengan durasi yang sama seperti objek pada layer 2. Jika objek pada
29
Gambar G.6: Mengatur durasi tampil teks
TWEEN
program.
30
3. Agar memudahkan pengeditan, groupkan gambar tersebut, klik
Gambar H.2.
Gambar H.3: Membalik (Flip Horizontal) gambar komputer yang posisinya paling
kanan
31
7. Pada panel Timeline tambahkan frame pada layer 1. Klik kanan
11. Pada layer 2 klik kanan frame 10 kemudian klik menu Insert
Keyframe.
32
12. Hilangkan seleksi pada garis, kemudian menggunakan tool
13. Pada layer 2 klik salah satu frame di antara frame 1 dan 10,
Pada panel Timeline tambahkanlah layer baru (layer 3). Dan untuk
33
Gambar F.7: Menggambar garis horizontal pada frame 10 layer 3
Keyframe.
17. Pada layer 3 klik kanan frame 20 kemudian klik menu Insert
Keyframe.
34
19. Pada layer 3 klik salah satu frame di antara frame 10 dan 20,
Pada panel Timeline tambahkanlah layer baru (layer 4). Dan untuk
Keyframe.
35
22. Klik frame 10 layer 4, kemudian gambarlah garis horizontal
Gambar H.11.
23. Pada layer 4 klik kanan frame 20 kemudian klik menu Insert
Keyframe.
H.12).
25. Pada layer 4 klik salah satu frame di antara frame 10 dan 20,
36
Gambar H.12: Memperpanjang garis
layer, kecuali layer 1 (gambar komputer), kemudian klik menu Edit >
Select All untuk menyeleksi semua garis yang berada pada frame
terakhir.
37
Gambar H.14: Menyeleksi semua garis pada frame terkahir
28. Klik menu Edit > Copy untuk menggandakan garis yang
terseleksi.
29. Pada panel Timeline tambahkanlah layer baru (layer 5), kemudian
warnanya (stroke).
38
31. Garis pada layer 5 merupakan objek track animasi, oleh karena itu
urutan layer 5 harus berada di bawah layer animasi garis. Pada panel
32. Animasi akan terlihat lebih cantik jika gambar komputer berada di
atas garis. Oleh karena itu aturlah layer 1, tempat gambar komputer
39
I. ACTION SCRIPT
dipelajari tadi dapat di kontrol dengan Action Script. Action Script adalah kode-
kode program dalam Flash digunakan untuk mengontrol jalannya suatu animasi
I.1. Belajar_Script_1/goto:
Langkah 1:
Buat layer-layer dengan susunan sebagai berikut dan objek bola yang di-
Langkah 2:
Klik layer Tombol dan buatlah objek persegi panjang F8 Button. Setelah
40
Langkah 3:
Klik layer Action dan klik frame 40-insert frame, setelah itu aktifkan Action
di bawah script, aktifkan atau ikon Script Assist di pojok kanan atas
Action dan pilih Script Assist. Klik Global Functions→ Timeline Control→
Klik stop 2x
Langkah 4:
Langkah 5:
41
Klik line (baris) 1, maka akan muncul seperti berikut:
Jika memilih goto and Stop, maka animasi akan menuju frame 1 dan
Langkah 6:
Tekan Ctrl + Enter untuk test movie dan klik objek persegi panjang maka
animasi
akan dijalankan
CATATAN:
1. Press : animasi akan berjalan saat mouse ditekan dalam area tombol
2. Release : animasi berlanjut saat mouse telah lepas dari klik dalam area tombol
3. Release Outside: animasi berlanjut saat mouse telah lepas dari klik di luar area tombol
4. Key Press: animasi berlanjut saat keyboard tertentu ditekan. Untuk menentukan
keyboard tersebut, tekan salah satu tuts saat Anda memberi tanda centang pada menu ini
5. Roll over: animasi berlanjut saat pointer mouse berada dalam area tombol
42
6. Roll out: animasi berlanjut saat pointer mouse berada di luar tombol setelah berada
7. Drag over: animasi berlanjut saat pointer mouse setelah mengklik di dalam area tombol
8. Drag out: animasi berlanjut saat pointer mouse setelah mengklik di dalam area tombol
I.2. Belajar_Script_2/Play:
Langkah 1:
Langkah 4:
2x,
43
Langkah 5:
Beri tanda check di Roll Over dan Roll Out, tekan Ctrl + Enter untuk
I.3. Belajar_Script_3/Action_Bersama:
Langkah 1:
Langkah 2:
Untuk Key Press: pada kotak dialog tinggaL tekan Enter di keyboard
44
Tekan Ctrl + Enter untuk menjalankan animasinya. Untuk menjalankan
Dengan movie clip animasi dalam Flash dapat diatur sehingga animasi yang
clip A bergerak dan ketika movie clip B ditekan dengan keyboard maka
terus bergerak dan seterusnya. Kini Anda yang menjadi sutradara dalam
pembuatan animasi ini. Anda dapat menentukan movie clip mana yang
bergerak, mana yang diam atau beberapa movie clip dijalankan bersama-
sama.
Langkah 1:
Langkah 2:
Buat objek lingkaran dan F8 → Movie clip di layer Bola. Buat animasi
tween motion.
45
Langkah 3:
sebelumnya.
Langkah 4:
Setelah itu pilih mouseDown dan klik 2x play, sehingga akan tampil script
seperti berikut:
46
Gambar I.12 Event pada Movie Clip
Langkah 5:
CATATAN :
4. Mouse up: animasi berjalan ketika tombol mouse dilepas setelah diklik
7. Key up: animasi berjalan ketika tombol keyboard dilepas setelah ditekan
8. Data: saat data diterima dari action load variable atau load movie
47