Bab II Landasan Teori II-1 II. BAB II LANDASAN TEORI Dalam ...
BAB II
description
Transcript of BAB II
BAB II
LANDASAN TEORI
A. Prinsip Dasar Animasi
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:
Animasi perubahan bentuk dari kotak menjadi lingkaran.
Animasi perubahan properti koordinat x dan y objek (bergeser).
Animasi perubahan properti warna dari kuning menjadi merah.
Animasi perubahan properti ukuran, dari kotak kecil menjadi kotak
besar.
Durasi adalah waktu yang ditempuh untuk menyelesaikan suatu tampilan
animasi. Contoh, tampilan animasi pergeseran posisi obyek dari koordinat awal ke
koordinat akhir diselesaikan dalam waktu 5 detik.
Dalam Macromedia Flash, pengaturan durasi dilakukan dengan
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
suatu peristiwa dengan gambar-gambar yang dibuat berurutan pada dinding.
Sejak menyadari bahwa gambar bisa dipakai sebagai alternatif media
komunikasi, timbul keinginan menghidupkan lambang-lambang tersebut menjadi
cermin ekspresi kebudayaan. Terbukti dengan diketemukannya berbagai artefak
pada peradapan Mesir Kuno 2000 sebelum masehi. Salah satunya adalah beberapa
panel yang menggambarkan aksi dua pegulat dalam berbagai pose.
Animasi sendiri tidak akan pernah berkembang tanpa ditemukannya prinsip
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
cenderung menangkap urutan gambar-gambar pada tenggang waktu tertentu
sebagai suatu pola. Dalam perkembangannya animasi secara umum bisa
didefinisikan sebagai:
Suatu sequence gambar yang diekspos pada tenggang waktu tertentu
sehingga tercipta sebuah ilusi gambar bergerak.
2
B. JENIS-JENIS ANIMASI
Dilihat dari tehnik pembuatannya animasi yang ada saat ini dapat
dikategorikan menjadi 3, yaitu:
1. Animasi Stop-motion (Stop Motion Animation)
2. Animasi Tradisional (Traditional animation)
3. Animasi Komputer (Computer Graphics Animation)
B.1. Stop-motion animation
Stop-motion animation sering pula disebut claymation karena dalam
perkembangannya, jenis animasi ini sering menggunakan clay (tanah liat) sebagai
objek yang digerakkan . Tehnik stop-motion animation merupakan animasi yang
dihasilkan dari penggambilan gambar berupa obyek (boneka atau yang lainnya)
yang digerakkan setahap demi setahap. Dalam pengerjaannya teknik ini memiliki
tingkat kesulitan dan memerlukan kesabaran yang tinggi.
. 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
satucontoh karya stop motion animation. Contoh lainnya adalah Celebrity
Deadmatch di MTV yang menyajikan adegan perkelahian antara berbagai selebriti
dunia.
B.2. Animasi Tradisional (Traditional animation)
Tradisional animasi adalah tehnik animasi yang paling umum dikenal
sampai saat ini. Dinamakan tradisional karena tehnik animasi inilah yang
digunakan pada saat animasi pertama kali dikembangkan. Tradisional animasi
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
digambar satu persatu di atas cel.
Gambar B.2: Contoh gambar proses gerakan berjalan pada animasi tradisional.
Dengan berkembangnya teknologi komputer, pembuatan animasi tradisional ini
telah dikerjakan dengan menggunakan komputer. Dewasa ini teknik pembuatan
animasi tradisional yang dibuat dengan menggunakan komputer lebih dikenal
dengan istilah animasi 2 Dimensi.
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.
B.3. ANIMASI KOMPUTER
Sesuai dengan namanya, animasi ini secara keseluruhan dikerjakan dengan
menggunakan komputer. Dari pembuatan karakter, mengatur gerakkan “pemain”
dan kamera, pemberian suara, serta special effeknya semuanya di kerjakan dengan
komputer. Dengan animasi komputer, hal-hal yang awalnya tidak mungkin
5
digambarkan dengan animasi menjadi mungkin dan lebih mudah. Sebagai contoh
perjalanan wahana ruang angkasa ke suatu planet dapat digambarkan secara jelas,
atau
proses terjadinya tsunami. Perkembangan teknologi komputer saat ini,
memungkinkan orang dengan mudah membuat animasi. Animasi yang dihasilkan
tergantung keahlian yang dimiliki dan software yang digunakan.
C. SOFTWARE ANIMASI
Saat ini terdapat banyak jenis software animasi yang beredar di pasaran, dari
software yang mempunyai kemampuan yang sederhana hingga yang komplek,
dari yang gratis hingga puluhan juta rupiah. Dari sisi fungsi penggunaan software
animasi dapat dikelompokkan menjadi Software Animasi 2 Dimensi dan
Software Animasi 3 Dimensi.
C.1. Software Animasi 2 Dimensi.
Software animasi 2D adalah software yang digunakan untuk membuat
animasi tradisional (flat animation), umumnya mempunyai kemampuan untuk
menggambar, mengatur gerak, mengatur waktu, beberapa dapat mengimpor suara.
Dari sisi penggunaan umumnya tidak sulit. Contoh dari Software Animasi 2D ini
antara lain:
• Macromedia Flash
• Macromedia Director
• ToonBoom Studio
• Adobe ImageReady
• Swish Max
• Adobe After Effect
C.2. Software Animasi 3 Dimensi
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
suara, serta masih banyak lagi. Beberapa software animasi 3D mempunyai
kemampuan khusus, misalnya untuk animasi figure(manusia), animasi landscape
(pemandangan), animasi title (judul), dll. Karena kemampuannya yang canggih,
dalam penggunaannya diperlukan pengetahuan yang cukup tinggi dan terkadang
rumit.
Contoh dari Software Animasi 3D ini antara lain:
• 3D Studio Max
• Maya
• Poser (figure animation)
• Bryce (landscape animation)
• Vue (landscape animation)
• Cinema 4D
• Blender (gratis)
• Daz3D(gratis)
D. PERKENALAN LINGKUNGAN KERJA DAN TOOL-TOOLS
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
Gambar D.1: Tampilan star page
Ada beberapa menu di halaman awal macromedia Flash MX professional
2004, yaitu:
Open a Recent Item
Merupakan kategori yang menampilkan semua file / dokumen flash yang
sudah dibuat dalam ekstension .fla
8
Open
Merupakan perintah untuk membuka dokumen yang sudah pernah dibuat
namun tidak tercakup di Open Recent Item karena keterbatasan tempat.
Create New
Merupakan perintah untuk membuat dokumen/ file flash baru.
Create from Template
Merupakan template yang disediakan oleh Macromedia dalam bentuk
user
Interface
Extend
Perintah ini akan memanggil situs web macromedia untuk sesion
Exchange.
Learn
Merupakan perintah untuk menuju ke halaman bantuan Flash (Help).
D.1 Mengenal Jendela Kerja
D.1.1. Mengenal Menu Dasar
Berikut merupakan tampilan standar jendela kerja Flash 8, saat Anda
memulai membuat file baru.
9
Gambar D.2: tampilan standar jendela kerja Flash 8
Jendela kerja Flash 8 terdiri atas :
• Menubar
Gambar D.3: tampilan menu bar
Berisi kumpulan menu atau perintah-perintah yang digunakan dalam Flash 8.
• Toolbar
Toolbar merupakan panel berisi berbagai macam tool. Tool-tool
tersebut dikelompokkan menjadi empat kelompok: Tools; berisi tombol-
tombol untuk membuat dan mengedit gambar, View; untuk mengatur
10
tampilan lembar kerja, Colors; menentukan warna yang dipakai saat
mengedit, Option; alat bantu lain untuk mengedit gambar.
Tool Nama Fungsi Shortcut
Selection Tool Memilih dan memindahkan objek V
Subselection
Tool
Mengubah bentuk objek dengan edit points
A
Free Transform Tool Mengubah ukuran atau memutar bentuk objek sesuai keinginan
Q
Gradient Transform Tool Mengubah warna gradasi F
Line Tool Membuat garis N
Lasso Tool Menyeleksi bagian objek yang akan diedit
L
Pen Tool Membuat bentuk objek secara bebas berupa dengan titik-titik sebagai penghubung
P
Text Tool Membuat teks (kata atau kalimat) T
Oval Tool Membuat objek elips atau lingkaran O
Ractangle Tool Membuat objek berbentuk segi empat
atau segi banyak
R
Pencil Tool Menggambar objek secara bebas Y
Brush Tool Menggambar objek secara bebas dengan ukuran ketebalan dan bentuk yang sudah disediakan
B
Ink Bottle Tool Memberi warna garis tepi (outline) S
Paint Bucket Tool Memberi warna pada objek secara bebas K
K
Eyedropper Tool Mengambil contoh warna I
11
Eraser Tool Menghapus objek E
Hand Tool Menggeser stage H
Zoom Tool Memperbesar atau memperkecil objek M atau Z
Stroke Color Memberi warna pada garis/garis tepi
Fill Color Memberi warna pada pada objek
Option tool Mengatur fungsi tambahan dari tool yang sedang aktif
• Timeline
Timeline atau garis waktu merupakan komponen yang digunakan untuk
mengatur atau mengontrol jalannya animasi. Timeline terdiri dari
beberapa layer. Layer digunakan untuk menempatkan satu atau beberapa
objek dalam stage agar dapat diolah dengan objek lain. Setiap layer
terdiri dari frame-frame yang digunakan untuk mengatur kecepatan
animasi. Semakin panjang frame dalam layer, maka semakin lama
animasi akan berjalan.
Gambar D.4: tampilan time line
12
• Stage
Stage disebut juga layar atau panggung. Stage digunakan untuk
memainkan objek-objek yang akan diberi animasi. Dalam stage kita
dapat membuat gambar, teks, memberi warna dan lain-lain.
• Panel
Beberapa panel penting dalam Macromedia Flash 8 diantaranya panel:
properties, Filters & Parameters, Actions, Library, Color dan Align &
Info & Transform.
Gambar D.5: Tampilan Panel Action Script
Gambar D.6: Tampilan Panel Color
13
• Properties
Gambar D.7: Tampilan Propertis
Panel Properties akan berubah tampilan dan fungsinya mengikuti bagian
mana yang sedang diaktifkan. Misalnya Anda sedang mengaktifkan Line
tool, maka yang muncul pada jendela properties adalah fungsi-fungsi
untuk mengatur line/garis seperti besarnya garis, bentuk garis, dan warna
garis.
• Library
Gambar D.8: Tampilan Library
14
Panel Library mempunyai fungsi sebagai perpustakaan simbol/media
yang digunakan dalam animasi yang sedang dibuat. Simbol merupakan
kumpulan gambar baik movie, tombol (button), sound, dan gambar statis
(graphic).
D.1.2. Document Properties
Fungsi Document Properties adalah untuk melakukan pengaturan ukuran
layar, warna background, framerate, dan dimensi dari animasi yang akan
dibuat. Untuk memanggil kotak dialog Document Properties, pilih
jendela Properties di bawah layar, kemudian pilih tombol Size.
15
Gambar D.9: Document Properties
16
E. TEKNIK ANIMASI
Terdapat tiga teknik dasar pembuatan animasi, yaitu: frame-by-frame,
tweening dan skrip. Masing-masing teknik dapat dieksplorasi untuk membuat
berbagai tampilan animasi. Selain itu terdapat teknik tambahan yang bisa
digunakan untuk memperkaya tampilan animasi, seperti Motion Guide dan
Masking.
E.1. Frame-by-Frame
Teknik frame-by-frame merupakan teknik merangkai urutan gambar yang
diletakkan pada sejumlah frame. Pada dasarnya pembuatan animasi frame-by-
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.
E.2. Shape Tweening
Teknik shape tweening digunakan untuk menganimasi objek shape (kurva),
seperti lingkaran, persegiempat, poligon, atau bentuk bebas. Teknik
pembuatannya adalah:
1. Membuat objek shape pertama pada frame awal.
2. Membuat objek shape kedua pada frame akhir.
3. Memberikan tweening shape di antara frame awal dan
frame akhir.
17
E.3. Motion Tweening
Teknik tweening tipe motion, atau motion tweening, digunakan untuk
menganimasi objek objek, seperti teks, group objek, dan symbol. Cara
membuatnya sama seperti teknik tweening shape:
1. Mengatur objek pada frame awal.
2. Mengatur objek pada frame akhir.
3. Memberikan tweening motion di antara frame awal dan
frame 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.
Objek yang jika terseleksi ditampilkan dengan kotak warna biru di sekelilingnya hanya bisa
diterapkan tweening motion.
F. TEKNIK MASKING
18
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
kotak tidak terlihat. Sedangkan Gambar E.2 mengilustrasikan tampilan setelah
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
menjadi tidak terlihat.
Gambar E.1: Tampilan sebelum penerapan masking
19
Gambar E.2: Tampilan setelah diterapkan masking
Berikut akan dipraktekkan teknik animasi masking untuk membuat animasi
teks.
1. Buatlah dokumen baru dengan properti sesuai keinginan.
2. Pada Layer 1 ketikkanlah sembarang teks, misalnya
DIGINNOVAC.
Gambar E.3: Menuliskan teks pada Layer 1
3. Pada panel Timeline tambahkanlah layer baru dengan mengklik
tombol New Layer yang terletak di bagian bawah panel.
4. Pada layer baru, Layer 2, buatlah objek persegiempat tanpa warna
stroke, dengan ukuran dan posisi seperti contoh pada Gambar E.4.
20
Gambar E.4: Membuat objek kotak pada Layer 2
5. Animasi masking akan dibuat menggunakan 10 frame, dan objek
yang dianimasi adalah objek kotak, sedangkan teks akan terlihat statis.
Oleh karena itu pada Layer 1 tempat teks berada, klik kanan frame 10,
kemudian klik menu Insert Frame. Sedangkan pada Layer 2 tempat
objek kotak berada, klik kanan frame 10, kemudian klik menu Insert
Keyframe.
6. Kotak akan diskala sehingga ukurannya dapat menutup tampilan
teks. Aktifkanlah tool Free Transform pada Toolbox, kemudian
seleksilah objek kotak pada Layer 2 frame 10. Terapkanlah
transformasi skala pada objek sehingga ukurannya menutup semua
tampilan teks.
21
Gambar E.5: Menerapkan transformasi pada kotak
7. Pada Layer 2 tempat objek kotak berada, klik salah satu frame di
antara frame 1 dan 10, misalnya frame 5, kemudian pada panel
Properties pilihlah Shape pada kotak Tweeen untuk menerapkan
animasi shape tweening.
8. Pada panel Timeline posisikanlah playback pada frame 1, yaitu
dengan mengklik frame 1 atau menyeret playback ke frame 1. Tekan
tombol Enter pada keyboard untuk memainkan animasi pada jendela
pengeditan. Terlihat bahwa ukuran kotak semakin melebar sehingga
menutupi teks di bawahnya.
9. Selanjutnya adalah menerapkan masking. Pada panel Timeline klik
kanan nama Layer 2 (tempat kotak berada), kemudian klik menu Mask
untuk membuat Layer 2 menjadi mask, dan layer di bawahnya, yaitu
Layer 1 menjadi layer yang di-masked.
22
10. Pada panel Timeline posisikanlah playback pada frame 1, yaitu
dengan mengklik frame 1 atau menyeret playback ke frame 1. Tekan
tombol Enter pada keyboard untuk memainkan animasi pada jendela
pengeditan. Terlihat bahwa teks yang semula tidak terlihat menjadi
terlihat sesuai animasi pada objek kotak.
Gambar E.6: Hasil menerapkan animasi teknik masking
CATATAN
Pada jendela pengeditan Flash, efek tampilan teknik masking dapat terlihat apabila layer mask dan yang di-masked dalam keadaan terkunci.
F. TEKNIK MOTION GUIDE
Macromedia Flash memungkinkan untuk membuat animasi pergeseran
posisi obyek dengan menentukan garis lintasannya, yaitu menggunakan layer
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
ini hanya dapat diterapkan pada motion tweening.
23
Berikut ini akan dipraktekkan pembuatan animasi dengan menggunakan
teknik motion guide.
1. Buatlah movie baru dengan properti sesuai yang ditentukan
program.
2. Gambarlah obyek lingkaran, kemudian konversikan menjadi
symbol Graphic (klik menu Modify > Convert to Symbol).
Gambar F.1: Membuat symbol Graphic
3. Di dalam layer instance symbol Graphic tersebut, sisipkan
keyframe, misalnya pada frame 20.
4. Klik kanan salah satu frame di antara frame 1 dan 20, kemudian
pilihlah menu Create Motion Tween.
5. Di dalam jendela Timeline, klik tombol Add Motion Guide yang
terletak di bagian bawah jendela, maka akan tampil layer baru (layer
Motion Guide).
6. Di dalam layer Motion Guide, gambarlah garis seperti contoh yang
terlihat pada Gambar F.2.
24
Gambar F.2: Membuat layer Motion Guide
7. Langkah selanjutnya di dalam frame awal (frame 1), Anda harus
memposisikan obyek (instance symbol Graphic) tepat pada ujung
garis. Demikian halnya di dalam frame akhir (frame 20). Untuk
memudahkan pengaturan posisi obyek, Anda dapat mengunci layer
Motion guide, dan mengaktifkan tombol Snap (ikon magnet) yang
terletak di dalam Toolbox.
8. Lakukan test movie, setelah itu simpan latihan ini. Jika movie
dimainkan di dalam jendela pengeditan movie Flash, obyek garis
(lintasannya) masih terlihat. Namun jika Anda menampilkan movie di
dalam Flash Player, obyek garis tidak akan terlihat.
25
G. ANIMASI LOADING MOVIE
Cara membuat loading movie adalah :
1. Buatlah movie baru dengan properti sesuai yang ditentukan
program.
2. Pada frame 1 layer 1 ketikkanlah teks, misalnya loading atau
please wait atau yang lainnya.
Gambar G.2: Menuliskan teks loading
3. Pada panel Timeline tambahkanlah layer baru, kemudiang
gambarlah obyek untuk dijadikan progress status, misalnya
persegiempat atau lingkaran (Gambar G.2).
Gambar G.2: Menggambar objek untuk dijadikan progress status
4. Pada panel Timeline layer 2, tempat objek progress status berada,
klik kanan frame 2, kemudian klik menu Insert Keyframe.
5. Dengan objek masih dalam keadaan terseleksi, tekan tombol
Ctrl+C pada keyboard untuk menggandakannya.
26
6. Tekan tombol Ctrl + Shift + V (menu Edit > Paste in Place)
untuk meletakkan hasil penggandan pada tempat yang sama,
lanjutkanlah dengan langsung menekan tombol panah ke kanan
(sambil dihitung jumlah ketukan penekanan tombol tersebut) untuk
menggeser posisi objek hasil penggandaan, misalnya 7 ketukan.
Gambar G.3 : Menggandakan dan menggeser posisi objek
7. Pada panel Timeline layer 2, klik kanan frame 3, kemudian klik
menu Insert Keyframe.
8. Hilangkan seleksi objek pada keyframe 3 dengan mengklik di luar
area objek.
9. Klik objek ke dua untuk menyeleksinya, kemudian tekan tombol
Ctrl + C untuk menggandakannya.
10. Tekan tombol Ctrl + Shift + V (menu Edit > Paste in Place)
untuk meletakkan hasil penggandan pada tempat yang sama,
lanjutkanlah dengan langsung menekan tombol panah ke kanan
sebanyak jumlah ketukan yang telah dilakukan sebelumnya. Jika
sebelumnya menekan sebanyak 7 ketukkan, maka ulangilah jumlah
tersebut agar jarak antara objek menjadi rata.
27
Gambar G.4 : Menggandakan dan menggeser posisi objek
11. Ulangi langkah di atas, yaitu menyisipkan keyframe,
menggandakan dan menggeser posisi objek, sebanyak yang
diinginkan. Jika akan menggunakan tujuh objek, maka keyframe yang
digunakan juga 7.
Gambar G.5 : Contoh menggunakan tujuh objek dan tujuh keyframe
12. Selanjutnya adalah mengatur agar teks pada layer 1 ditampilkan
dengan durasi yang sama seperti objek pada layer 2. Jika objek pada
layer 2 menggunakan 7 keyframe, maka pada layer 1 klik kanan frame
7 kemudian klik menu Insert Frame (Gambar G.6).
13. Tekan tombol Ctrl + Enter untuk melakukan test movie.
28
Gambar G.6: Mengatur durasi tampil teks
H. ANIMASI SIMULASI JARINGAN MENGGUNAKAN SHAPE
TWEEN
Proyek animasi kedua adalah membuat simulasi jaringan komputer.
1. Buatlah movie baru dengan properti sesuai yang ditentukan
program.
2. Klik menu File > Import kemudian imporlah file komputer.wmf.
Gambar H.1: Mengimpor file komputer.wmf
29
3. Agar memudahkan pengeditan, groupkan gambar tersebut, klik
menu Modify > Group.
4. Atur ulang ukuran gambar komputer untuk disesuaikan ukuran
panggung, kemudian gandakanlah sebanyak 2 kali.
5. Aturlah posisi ketiga gambar komputer sehingga terlihat seperti
Gambar H.2.
Gambar H.2: Menggandakan gambar komputer
6. Untuk mempercantik tampilan, salah satu gambar komputer, yaitu
yang berada paling kanan akan di-mirror. Klik gambar tersebut,
kemudian klik menu Modify > Transform > Flip Horizontal.
Gambar H.3: Membalik (Flip Horizontal) gambar komputer yang posisinya paling
kanan
30
7. Pada panel Timeline tambahkan frame pada layer 1. Klik kanan
frame 80 kemudian klik menu Insert Frame. Untuk memudahkan
pengeditan kuncilah layer ini.
8. Pada panel Timeline tambahkanlah layer baru.
9. Aktifkanlah tool Line, kemudian pada panel Properties ubahlah
ukuran width menjadi 6 atau 8, dan pilihlah warna sesuai keinginan.
Gambar H.4: Mengatur properti tool Line
10. Pastikanlah layer yang aktif adalah layer 2, kemudian gambarlah
garis vertical seperti contoh pada Gambar H.5.
Gambar H.5: Menggambar garis vertical
11. Pada layer 2 klik kanan frame 10 kemudian klik menu Insert
Keyframe.
31
12. Hilangkan seleksi pada garis, kemudian menggunakan tool
Selection seret ujung garis untuk memperpanjang garis. Untuk
mempermudah pengeditan dapat mengaktifkan tombol Snap (ikon
magnit) yang terletak pada Toolbox.
Gambar H.6: Memperpanjang garis
13. Pada layer 2 klik salah satu frame di antara frame 1 dan 10,
kemudian pada panel Properties pilihlah Shape pada kotak Tween.
14. Selanjutnya adalah membuat animasi garis jaringan berikutnya.
Pada panel Timeline tambahkanlah layer baru (layer 3). Dan untuk
memudahkan pengeditan kuncilah layer 2.
32
Gambar F.7: Menggambar garis horizontal pada frame 10 layer 3
Gambar F.8: Gambar garis horizontal dimulai dari frame 10
15. Klik kanan frame 10 layer 3, kemudian klik menu Insert
Keyframe.
16. Klik frame 10 layer 3, kemudian gambarlah garis horizontal
menyambung ujung garis sebelumnya ke arah kanan, seperti contoh
pada Gambar H.7.
17. Pada layer 3 klik kanan frame 20 kemudian klik menu Insert
Keyframe.
18. Hilangkan seleksi pada garis, kemudian menggunakan tool
Selection seret ujung garis untuk memperpanjang garis.
33
19. Pada layer 3 klik salah satu frame di antara frame 10 dan 20,
kemudian pada panel Properties pilihlah Shape pada kotak Tween.
Gambar H.9: Memperpanjang garis pada layer 3
Gambar H.10: Menganimasi garis pada layer 3
20. Selanjutnya adalah membuat animasi garis jaringan berikutnya.
Pada panel Timeline tambahkanlah layer baru (layer 4). Dan untuk
memudahkan pengeditan kuncilah layer 3.
21. Klik kanan frame 10 layer 4, kemudian klik menu Insert
Keyframe.
34
22. Klik frame 10 layer 4, kemudian gambarlah garis horizontal
menyambung ujung garis sebelumnya ke arah kiri, seperti contoh pada
Gambar H.11.
23. Pada layer 4 klik kanan frame 20 kemudian klik menu Insert
Keyframe.
24. Hilangkan seleksi pada garis, kemudian menggunakan tool
Selection seret ujung garis untuk memperpanjang garis (Gambar
H.12).
25. Pada layer 4 klik salah satu frame di antara frame 10 dan 20,
kemudian pada panel Properties pilihlah Shape pada kotak Tween.
Gambar 3: Menggambar garis pada frame 10 layer 4
35
Gambar H.12: Memperpanjang garis
Gambar H.13: Menganimasi garis pada layer 4
26. Jumlah frame yang digunakan adalah 80. Perpendeklah durasinya.
Seleksilah frame yang tidak digunakan, kemudian klik kanan di atas
frame yang terseleksi dan klik menu Remove Frames.
27. Selanjutnya adalah menambah garis sebagai track (jalur) animasi.
Posisikanlah playback pada frame terakhir. Bukalah kunci semua
layer, kecuali layer 1 (gambar komputer), kemudian klik menu Edit >
Select All untuk menyeleksi semua garis yang berada pada frame
terakhir.
36
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
klik menu Edit Paste in Place untuk meletakkan hasil penggandaan
pada tempat yang sama.
30. Klik frame 1 layer 5 untuk menyeleksi garis, kemudian gantilah
warnanya (stroke).
Gambar H.15: Mengganti warna stroke garis pada layer 5
37
31. Garis pada layer 5 merupakan objek track animasi, oleh karena itu
urutan layer 5 harus berada di bawah layer animasi garis. Pada panel
Timeline seretlah nama layer 5 ke bawah layer animasi garis.
Gambar H.16: Mengatur urutan layer 5
32. Animasi akan terlihat lebih cantik jika gambar komputer berada di
atas garis. Oleh karena itu aturlah layer 1, tempat gambar komputer
berada, sehingga berada pada urutan paling atas.
Gambar H.17: Mengatur urutan layer 1 sehingga berada paling atas
33. Tekan tombol Ctrl + Enter untuk melakukan test movie.
38
I. ACTION SCRIPT
Setelah mempelajari animasi-animasi dasar yang terdapat di Flash, seperti:
Tween-Motion, Tween-Shape dan Animasi Mask. Animasi-animasi yang sudah
dipelajari tadi dapat di kontrol dengan Action Script. Action Script adalah kode-
kode program dalam Flash digunakan untuk mengontrol jalannya suatu animasi
agar animasi yang dibuat menjadi lebih atraktif dan menarik.
I.1. Belajar_Script_1/goto:
Langkah 1:
Buat layer-layer dengan susunan sebagai berikut dan objek bola yang di-
convert to symbol (graphic) dengan tween-motion:
Gambar I.1 Susunan layer dan objek bola
Langkah 2:
Klik layer Tombol dan buatlah objek persegi panjang F8 Button. Setelah
itu, klik kanan frame 40 dan F5 (insert frame)
39
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
Gambar I.2 Action stop di layer Action
Gambar I.3 Layer Action setelah diberi script stop
Langkah 4:
Pilih objek persegi, klik Global Functions→Timeline Control→ Klik goto
2x sehingga akan tampil script seperti berikut:
Gambar I.4 Scipt goto yang benar
Langkah 5:
Klik line (baris) 1, maka akan muncul seperti berikut:
40
Gambar I.5 Gambar Mouse event
Jika memilih goto and Stop, maka animasi akan menuju frame 1 dan
berhenti, Itu berarti animasi tidak akan berjalan.
Langkah 6:
Tekan Ctrl + Enter untuk test movie dan klik objek persegi panjang maka
animasi
akan dijalankan
CATATAN:
Kejadian-kejadian pada Mouse event:
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
41
6. Roll out: animasi berlanjut saat pointer mouse berada di luar tombol setelah berada
didalam area tombol
7. Drag over: animasi berlanjut saat pointer mouse setelah mengklik di dalam area tombol
digeser dalam area tombol
8. Drag out: animasi berlanjut saat pointer mouse setelah mengklik di dalam area tombol
dan digeser keluar area tombol
I.2. Belajar_Script_2/Play:
Langkah 1:
Kerjakan langkah 1 sampai dengan langkah 3 di I.1. belajar_Script_1/goto:
Langkah 4:
Pilih objek persegi, klik Global Functions→Timeline Control→Klik play
2x,
sehingga akan tampil script seperti berikut:
Gambar I.6 Scipt play yang benar
42
Langkah 5:
Beri tanda check di Roll Over dan Roll Out, tekan Ctrl + Enter untuk
melihat hasil animasinya. hanya cukup meletakkan pointer di objek persegi
(tombol), maka objek otomatis jalan tanpa harus di klik.
I.3. Belajar_Script_3/Action_Bersama:
Langkah 1:
Kerjakan langkah 1 sampai dengan langkah 3 di I.2. Belajar_Script_2/Play:
Langkah 2:
Pilih objek persegi, klik Global Functions→Timeline Control Buatlah
sedemikian rupa sehingga akan tampil script seperti berikut:
Gambar I.7 Penggunaan bersama Action script
Untuk Key Press: pada kotak dialog tinggaL tekan Enter di keyboard
Gambar I.8 Penggunaan keypress pada event
43
Tekan Ctrl + Enter untuk menjalankan animasinya. Untuk menjalankan
animasi dapat meng-klik dengan mouse/Enter, dan menghentikannya dapat
menekan Enter pada keyboard.
I.4. Action Script Pada Movie Clip
Movie Clip digunakan untuk mengatur jalannya animasi dalam stage.
Dengan movie clip animasi dalam Flash dapat diatur sehingga animasi yang
dibuat tidak menimbulkan keanehan. Misalnya ketika mouse ditekan, movie
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:
Buat layer Bola dan Action sehingga susunannya seperti berikut:
Gambar I.9 Persiapan movie clip
Langkah 2:
Buat objek lingkaran dan F8 → Movie clip di layer Bola. Buat animasi
tween motion.
44
Langkah 3:
Tambahkan frame di layer Action-frame 40. Di layer Action, klik kanan
objek lingkaran→Action, tambahkan script stop, caranya seperti di langkah
sebelumnya.
Langkah 4:
Klik Global Functions→Movie Clip Control→klik On Clip Event 2x
Gambar I.10 Movie Clip Control
Setelah itu pilih mouseDown dan klik 2x play, sehingga akan tampil script
seperti berikut:
Gambar I.11 On Clip Event
45
Gambar I.12 Event pada Movie Clip
Langkah 5:
Tekan Ctrl + Enter untuk menjalankan animasinya.
CATATAN :
Fungsi event pada Movie Clip:
1. Load: saat movie clip pertama kali tampil pada timeline
2. Unload: saat movie clip hilang dari timeline
3. Mouse down: animasi berjalan ketika tombol mouse ditekan
4. Mouse up: animasi berjalan ketika tombol mouse dilepas setelah diklik
5. Mouse move: animasi berjalan setiap ada gerakan mouse
6. Key down: animasi berjalan ketika tombol keyboard ditekan
7. Key up: animasi berjalan ketika tombol keyboard dilepas setelah ditekan
8. Data: saat data diterima dari action load variable atau load movie
46