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 lukisanlukisan pada dinding goa di Spanyol yang menggambarkan ”gerak” dari binatangbinatang. 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 C.2. Software Animasi 3 Dimensi • Adobe ImageReady • Swish Max • Adobe After Effect

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 tomboltombol 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 Selection Tool Subselection Tool Free Transform Tool Gradient Transform Tool Line Tool Lasso Tool Pen Tool

Fungsi Memilih dan memindahkan objek Mengubah bentuk objek dengan edit points Mengubah ukuran atau memutar bentuk objek sesuai keinginan Mengubah warna gradasi Membuat garis Menyeleksi bagian objek yang akan diedit Membuat bentuk objek secara bebas berupa dengan titik-titik sebagai penghubung Membuat teks (kata atau kalimat) Membuat objek elips atau lingkaran Membuat objek berbentuk segi empat atau segi banyak Menggambar objek secara bebas Menggambar objek secara bebas dengan ukuran ketebalan dan bentuk yang sudah disediakan Memberi warna garis tepi (outline) Memberi warna pada objek secara bebas K Mengambil contoh warna

Shortcut V A Q F N L P

Text Tool Oval Tool Ractangle Tool Pencil Tool Brush Tool

T O R Y B

Ink Bottle Tool Paint Bucket Tool Eyedropper Tool

S K I

11

Eraser Tool Hand Tool Zoom Tool Stroke Color Fill Color Option tool

Menghapus objek Menggeser stage Memperbesar atau memperkecil objek Memberi warna pada garis/garis tepi Memberi warna pada pada objek Mengatur fungsi tambahan dari tool yang sedang aktif

E H M atau Z

• 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-byframe 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. 2. 3. Membuat objek shape pertama pada frame awal. Membuat objek shape kedua pada frame akhir. 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. 2. 3. akhir. Mengatur objek pada frame awal. Mengatur objek pada frame akhir. Memberikan tweening motion di antara frame awal dan frame

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 dan

di

atas,

yaitu posisi

menyisipkan objek,

keyframe, yang

menggandakan

menggeser

sebanyak

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 kodekode 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 diconvert 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 bersamasama. 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

Sign up to vote on this title
UsefulNot useful