Modul Animasi

Animation :

Is the process of recording and playing back a sequence of still images to achieve the illusion of continuous motion.

Pengertian :

Animasi adalah proses membuat dan memainkan kembali serangkaian gambar diam untuk mendapatkan ilusi pergerakan yang terus menerus.

Contoh kasus :

Buatlah gambar di lembaran-lembaran kertas kemudian putar/mainkan kertas-kertas tersebut dalam urutan waktu tertentu, sehingga menyebabkan gambar-gambar tersebut seperti bergerak/hidup.

Kata kunci :

Yang diperlukan untuk membuat animasi adalah :

1.      Gambar / objek (gambar berbeda di tiap waktu/frame/kertas)

2.      Waktu / frame / kertas (waktu putar teratur)

Frame rate : kecepatan putar rata-rata

Satuan FPS (frame per second)

24 fps = 24 frame per 1 detik

1 detik = 24 frame

Menggambar karakter dengan Flash (Macromedia/Adobe Flash)

Menggambar karakter bisa dilakukan dengan menggunakan tool yang ada pada program/aplikasi Macromedia/Adobe Flash. Konsep menggambar dalam Flash terdiri dari 2 cara :

1.      Menggambar seluruh karakter langsung di dalam Flash

2.      Menjiplak gambar di dalam Flash

Menggambar seluruh karakter langsung di dalam Flash

Tool inti yang dipakai :

1.      Selection Tool (V) : menyeleksi dan mengedit objek

2.      Line Tool (N) : membuat garis

3.      Paint Bucket Tool (K) : mewarnai objek

4.      Subselection Tool (A) : mengedit sub di dalam objek

5.      Zoom Tool (Z) : memperbesar/memperkecil tampilan (enlarge/reduce)

Catatan :

·        Membuat garis harus menyambung dengan garis yang lain agar objek dapat diwarnai.

·        Untuk membuat garis bayangan, gunakan warna Stroke Color / warna garis yang berbeda dengan garis sebelumnya.

·        Edit garis lengkung lebih lanjut menggunakan Subselection Tool (A).

Menjiplak gambar di dalam Flash

1.      Import gambar dari menu File – Import – Import to Stage

2.      Pilih gambar/image/scan gambar dari kertas ke Flash hingga masuk ke lembar kerja

3.      Ubah properties gambar agar sesuai dengan lembar kerja dalam Panel Properties (width : 550px atau menyesuaikan)

4.      Kunci layer dengan memilih tombol lock di dalam kolom layer 1 (agar layer gambar/layer 1 tidak bisa diedit).

5.      Buat layer baru dengan memilih tombol New Layer (layer 2).

6.      Buat/jiplak gambar karakter dengan menggunakan Line Tool (N), Selection Tool (V), dan Subselection Tool (A) Paint  di dalam layer 2.

7.      Warnai objek dengan Paint Bucket Tool (K)

8.      Buat bayangan dengan Line Tool (N) dan Paint Bucket Tool (K)

Menggerakkan/Menganimasikan Karakter (Frame by Frame Animation)

Setelah gambar karakter selesai dibuat, langkah berikutnya adalah membuat karakter tersebut bergerak. Langkah-langkahnya adalah sebagai berikut :

1.      Klik kanan frame 2 – Insert Keyframe (menduplikat gambar)

2.      Pada frame ke-2, ubah bentuk (edit/gambar ulang) karakter yang ingin digerakkan (contoh : mulut)

3.      Ulangi langkah 1 dan 2 pada frame 3, 4, 5, dan seterusnya.

Catatan :

Anda dapat membuat gambar karakter (mulut, rambut, dll) dalam beberapa layer untuk memudahkan dalam menggambar/mengedit gambar animasi anda.

Mengenal Timeline

Timeline di dalam Flash terbagi menjadi 2 bagian, yaitu :

1.      Layer

2.      Frame

Di dalam frame timeline Flash anda dapat membuat 3 macam bentuk objek yaitu Frame, Blank Keyframe, dan Keyframe

Frame, Blank Keyframe, dan Keyframe

1.      Blank Keyframe : Keyframe kosong (tidak ada objek di lembar kerja) : Bulatan Putih

2.      Keyframe : frame yang memiliki objek : Bulatan hitam (objek dapat di edit/modifikasi)

3.      Frame : Perpanjangan dari Keyframe : Kotak (objek dapat di modifikasi dari keyframe sebelumnya)

Animasi dalam Flash

Jika anda membuat Animasi dari Flash, maka anda dapat membuatnya menggunakan dua buah cara yang berbeda, yaitu :

Animasi Frame by Frame

Animasi Frame by Frame adalah membuat sebuah ilusi pergerakan dari sebuah gambar/objek yang diam (still image) frame demi frame-nya (perbedaan pada setiap frame).

Animasi frame by frame dapat dibuat menggunakan dua cara yaitu :

1.      Membuat Objek Baru dalam Tiap Frame

Contoh sederhana :

a.       Buatlah sebuah objek/gambar (contoh : bola dengan Oval Tool) di sebelah kiri stage (lembar kerja)

b.      Buat sebuah Keyframe kosong (Blank Keyframe) pada frame 2 (Klik kanan frame 2 > Insert Blank Keyframe)

c.       Buat kembali sebuah objek/gambar (contoh : bola lagi) di tengah stage (lembar kerja) catatan : klik tombol union skin untuk memprediksi gambar sebelum dan sesudah keyframe yang ada.

     

d.      Buat kembali sebuah Keyframe kosong (Blank Keyframe) pada frame 3 (Klik kanan frame 3 > Insert Blank Keyframe)

e.       Buat kembali sebuah objek/gambar (contoh : lagi-lagi bola) di sebelah kanan stage

f.        Ulangi membuat Blank Keyframe (frame 4, 5, 6, dst) dan buatlah objek/gambar kembali di bagian lain stage (bawah kiri, bawah tengah, bawah kanan, dst)

g.       Lihat hasil animasi dengan memilih menu Control > Test Movie (shortcut key : Ctrl+Enter)

Jika anda perhatikan, bola (seperti) bergerak dari kiri ke kanan. Namun jika anda lihat lagi pada pekerjaan anda (stage/lembar kerja), bahwa bola pada frame 1, frame 2, frame 3, dan seterusnya hanya merupakan objek/gambar bola yang diam saja (still image).

Kesimpulan :

Flash hanya “memainkan” frame-frame tersebut secara berurutan sehingga bola-bola yang diam pada frame-frame tersebut seperti “bergerak”.

2.      Membuat Objek dan Mengeditnya Di Frame-frame Berikutnya

Contoh sederhana :

a.       Buatlah sebuah objek/gambar (contoh : bola) di sebelah kiri stage (lembar kerja)

b.      Buat sebuah Keyframe pada frame 2 (Klik kanan frame 2 > Insert Keyframe)

c.       Edit objek (Contoh : Pilih Selection Tool > Lalu pindahkan bola ke tengah)

d.      Buat kembali sebuah Keyframe pada frame 3 (Klik kanan frame 3 > Insert Keyframe)

e.       Edit objek lagi (Pilih Selection Tool > Lalu pindahkan bola ke kanan lagi)

f.        Ulangi membuat Keyframe (frame 4, 5, 6, dst) dan editlah objek/gambar kembali di bagian lain stage (bawah kiri, bawah tengah, bawah kanan, dst)

g.       Lihat hasil animasi dengan memilih menu Control > Test Movie (shortcut key : Ctrl+Enter)

Seperti halnya pada cara pertama, Flash hanya “memainkan” frame-frame tersebut secara berurutan sehingga bola-bola yang diam pada frame-frame tersebut seperti “bergerak”. Perbedaannya adalah pada cara ini kita hanya membuat sebuah objek/gambar saja dan mengeditnya pada frame-frame berikutnya. Mudah bukan?

Latihan :

Gunakan satu cara yang anda anggap paling mudah!

1. Buatlah sebuah gambar muka (dengan mata dan mulut), kemudian animasikan mata & mulutnya dengan animasi frame by frame!

2. Buatlah sebuah kaki, kemudian animasikan (gerakan kaki berlari)!

Animasi Tween (Tweened Animation)

Hampir sama dengan animasi Frame by Frame pada cara yang kedua, Animasi Tween adalah membuat sebuah ilusi pergerakan dari sebuah gambar/objek yang diam (still image) pada Keyframe awal dan membuatnya seperti bergerak pada keyframe berikutnya.

Contoh sederhana :

1.      Buatlah sebuah objek/gambar (contoh : bola) di frame 1 (sebelah kiri stage/lembar kerja)

2.      Klik Kanan Keyframe di frame 1 > Create Motion Tween (membuat animasi tween)

3.      Klik kanan  frame 10 > Insert Keyframe (akan terlihat tanda panah ke kanan dari frame 1 hingga 10)

4.      Edit posisi objek (Pindahkan objek ke kanan dengan Selection Tool)

5.      Klik kanan  frame 20 > Insert Keyframe (akan terlihat tanda panah ke kanan dari frame 10 hingga 20)

6.      Edit posisi objek (Pindahkan objek ke kanan dengan Selection Tool)

7.      Buat Keyframe dan edit posisi objek lagi pada frame 30, 40, 50, dst

8.      Lihat hasil animasi dengan memilih menu Control > Test Movie (shortcut key : Ctrl+Enter)

Jika anda perhatikan objek “juga” bergerak dari posisi frame 1 (ada keyframe), ke posisi frame 10 (ada keyframe lagi), ke posisi frame 20, 30, 40, dst (yang memiliki keyframe).

Kesimpulan Membuat Animasi Tween

Klik kanan sebuah keyframe > Create Motion Tween, kemudian klik kanan frame lain > Insert Keyframe (harus terlihat ada tanda panah ke kanan), maka anda dapat mengubah posisi objek (yang ada keyframenya) ke posisi lain yang anda suka.

Jenis animasi Tween :

1.      Motion Tween

2.      Motion Guide

3.      Mask

4.      Alpha

Animasi Iklan Web (Banner Iklan)

1.      Setting dokumen (sesuaikan dengan ukuran space iklan di website) dari menu Modify – Document (Ctrl + J)

 dimension : width + height, background, frame rate

2.      Buat animasi tween di layer yang diinginkan.

Tugas : Buatlah sebuah iklan animasi/banner untuk website

Symbol

Terdiri dari 3 macam :

1.      Movie Clip     : berbentuk animasi

2.      Button             : berbentuk tombol

3.      Graphic           : berbentuk grafis/gambar

Symbol adalah sebuah bentuk yang dapat dijalankan dalam 1 frame (sub bagian dari scene). Symbol terletak di dalam sebuah scene (bagian dari scene).

Pembuatan symbol :

1.      Buat objek yang akan dijadikan sebuah symbol

2.      Klik kanan objek tersebut – Convert to Symbol (F8)

3.      Pilih tipe symbol yang akan digunakan (Movie Clip/Button/Graphic), namai symbol tersebut - OK

4.      Mengedit symbol dilakukan dengan melakukan double klik pada symbol yang ada hingga masuk ke dalam symbol (nama symbol di kanan scene 1), kemudian membuat animasi (movie clip) atau tombol (button) atau gambar (graphic).

5.      Setelah symbol selesai di edit, kemudian klik scene 1 untuk kembali lagi ke lembar kerja anda.

Pembuatan Symbol Movie Clip (animasi)

1.      Buat objek yang akan dijadikan animasi

2.      Klik kanan objek – Convert to symbol (F8)

3.      Pilih tipe symbol : Movie Clip – OK

4.      Double click symbol hingga masuk ke pengeditan symbol movie clip

5.      Buat animasi di dalam symbol (bukan di scene 1)

6.      Setelah animasi selesai dibuat, klik kembali scene 1 untuk kembali ke lembar kerja awal.

Pembuatan Symbol Button (Tombol)

1.      Buat objek yang akan dijadikan ke tombol

2.      Klik kanan objek – Convert to Symbol (F8)

3.      Pilih tipe symbol : Button – OK

4.      Double click symbol hingga masuk ke pengeditan symbol button

5.      Buat perbedaan di dalam symbol button tersebut (bukan di scene 1) pada :

Up : keadaan ketika kursor di luar tombol

Over : keadaan ketika kursor di atas tombol

Down : keadaan ketika kursor memilih tombol (tombol di klik)

Hit : posisi/letak dari tombol (area tombol)

6.      Setelah tombol selesai dibuat, klik kembali scene 1 untuk kembali ke lembar kerja awal

Pembuatan Symbol Graphic (gambar)

1.      Buat objek yang akan dijadikan ke graphic

2.      Klik kanan objek – Convert to Symbol (F8)

3.      Pilih tipe symbol : Graphic – OK

4.      Double click symbol hingga masuk ke pengeditan symbol graphic

5.      Edit gambar/graphic kemudian setelah selesai klik kembali scene 1 untuk kembali ke lembar kerja awal

Actionscript

1.      Buka panel Actions di bawah properties (menu Window – Actions)

2.      Klik objek yang akan diberikan actionscript, dan pilih actionscript yang dipakai.

3.      Dalam memilih actionscript, gunakan menu navigasi di sebelah kiri dan atas panel.

4.      Gunakan menu “Script Assist” untuk membantu anda dalam memahami kode actionscript yang ada.

Sound

Sound atau suara adalah sebagian dari materi tentang multimedia yang akan dibahas dalam modul ini. Dalam penerapannya ada beberapa langkah yang harus diketahui dalam materi suara yaitu :

1.      Sound Recording / merekam suara

2.      Sound Editing / mengedit suara

3.      Sound Effect / efek suara

4.      Sound Publish / mengubah ekstensi suara

Aplikasi suara berbasis komputer (digital audio editor) saat ini sangat banyak dijumpai di internet. Anda cukup mendownload dan menginstalnya pada komputer anda untuk dapat menjalankan aplikasi tersekbut. Tak sedikit juga aplikasi sound editing berbasis internet (online/tanpa harus menginstal di komputer) yang banyak tersedia.

Dalam modul ini kita akan menggunakan aplikasi suara yaitu Adobe Audition 1.0 karena aplikasi ini cukup ringan dipakai dan menyediakan berbagai fitur yang cukup memadai untuk kebutuhan editing sound sederhana hingga professional.

1.      Sound Recording

a.       Dalam Adobe Audition anda dapat melakukan perekaman suara (sound recording) dengan masuk ke bagian Single Track View dan memilih tombol Record di dalam kolom navigasi suara.

b.      Setting bitrate dan pengaturan suara yang diinginkan, maka Adobe Audition akan langsung melakukan perekaman suara (komputer harus terhubung dengan microphone).

c.       Setelah proses perekaman selesai maka dilanjutkan dengan proses penyimpanan suara dengan memilih menu File – Save Copy As.

d.      Pilih ekstensi suara yang diinginkan, setting options dari file suara yang diinginkan, dan pilih Save untuk mengakhiri langkah tersebut.

2.      Sound Editing

Dalam Adobe Audition anda dapat melakukan editing suara dengan masuk ke bagian Single Track View dan melakukan pengeditan suara dengan memilih terlebih dahulu daerah (area) suara yang ingin anda edit.

Dalam menu Effect terdapat beberapa efek suara yang dapat digunakan untuk memberikan efek suara yang anda kehendaki.

3.