You are on page 1of 47

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 • Adobe ImageReady

• Macromedia Director • Swish Max

• ToonBoom Studio • 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 • Vue (landscape animation)

• Maya • Cinema 4D

• Poser (figure animation) • Blender (gratis)

• Bryce (landscape animation) • 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 Mengubah bentuk objek dengan edit A


points
Tool
Free Transform Tool Mengubah ukuran atau memutar Q
bentuk objek sesuai keinginan
Gradient Transform Tool Mengubah warna gradasi F

Line Tool Membuat garis N

Lasso Tool Menyeleksi bagian objek yang akan L


diedit
Pen Tool Membuat bentuk objek secara bebas P
berupa dengan titik-titik sebagai
penghubung
Text Tool Membuat teks (kata atau kalimat) T

Oval Tool Membuat objek elips atau lingkaran O

Ractangle Tool Membuat objek berbentuk segi empat R


atau segi banyak
Pencil Tool Menggambar objek secara bebas Y

Brush Tool Menggambar objek secara bebas B


dengan ukuran ketebalan dan bentuk
yang sudah disediakan
Ink Bottle Tool Memberi warna garis tepi (outline) S

Paint Bucket Tool Memberi warna pada objek secara K


bebas 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
16
Gambar D.9: Document Properties

E. TEKNIK ANIMASI

17
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.

E.3. Motion Tweening

18
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

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

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

20
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.

21
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.

22
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.

23
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.

24
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.

25
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.

26
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.

27
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.

28
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.

29
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

30
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

31
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.

32
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.

33
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.

34
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.

35
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

36
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.

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

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

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

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.

39
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)

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

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:

41
Klik line (baris) 1, maka akan muncul seperti berikut:

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

42
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

43
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

44
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.

45
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

46
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

47

You might also like