BAGIAN 1 · Web view... Membuat Animasi dengan Macromedia Flash MX, Quantum, Makassar Wijaya,...

bAGIAN 1 modul ini berisi dasar-dasar ilustrasi

gambar. Kemudian diperkenalkan juga tip dan trik

mengenai animasi dan cara membuat spesial efek

yang menarik. Beberapa tutorial yang ada dalam

bAGIAN 1 ini antara lain animasi keyframe, animasi

tweening, motion guide,dll. Dibutuhkan imajinasi &

kesabaran dalam mempelajari animasi. Selamat

mempelajari dan jangan ribut terus yah Keep

Fighting Spirit!!!

BAB 1 PENGENALAN1.1 Konsep Dasar1.1.a Stage

Stage (area putih dalam Flash) berfungsi seperti layar bioskop

dalam kehidupan nyata. Semua obyek berupa gambar, tulisan, dan

photo ditempatkan pada stage tersebut. Diluar area putih (stage),

yaitu daerah yang berwarna abu-abu adalah daerah yang tidak dilihat

oleh penonton, saat obyek/animasi sedang dimainkan.

1.1.b Tool BoxToolbox berisi alat-alat kerja dalam Flash, yang terbagi atas:

TOOLS : Berfungsi untuk menggambar, menyeleksi, membuat

tulisan, mewarnai, menghapus, dan membuat path.

(Fungsi seperti gambar icon-iconnya )

VIEW : Berfungsi untuk melihat, mengeser kanvas, dan

memperbesar/memperkecil gambar

COLOR : Berfungsi untuk mewarnai gambar dimana :

Stroke Color untuk menentukan warna outline

Fill Color untuk mewarnai gambar

OPTION : Berisi pilihan untuk memberi variasi pada fungsi-fungsi

tools dan view

1.2 Fill dan StrokeYang dimaksud dengan stroke adalah coretan atau garis

outline. Sedangkan fill adalah daerah yang diisi oleh warna.

1.3 Layer Layer yaitu seperti lembar kertas transparan yang berguna

untuk membantu proses animasi dan ilustrasi. Setiap layer dapat

berdiri sendiri-sendiri

1.4 FrameFrame adalah sebuah gambar dari kumpulan banyak gambar.

Kita sering melihat bentuk seperti gambar di bawah dalam kehidupan

nyata.

STAGE

timelineTOOL

BOX

PANEL

Warna isian (fill)

Garis outline (stroke)Layer

Animator Club - Halaman Ke-1

Seperti film-film yang ada di bioskop, film adalah kumpulan banyak

gambar yang ditampilkan satu persatu dengan sangat cepat sehingga

seolah-olah gambar itu bergerak.

BAB 2 GRAFIK DAN ILUSTRASISalah satu kelebihan Flash yaitu dapat digunakan untuk

menggambar bentuk apapun dengan relatif mudah, walaupun hanya

mengunakan mouse. Alat-alat yang digunakan untuk menggambar

terdapat dalam Tool Box, untuk mengetahui namanya cukup arahkan

mouse ke gambar icon-icon, lalu tunggu beberapa saat maka nama-

nama icon tersebut akan muncul.

Contoh Ilustrasi PINK WIN

Gambar di atas sebenarnya terdiri dari lebih dari satu gambar,

PENASARAN? Simak tips berikut ini!

1. Untuk memulai gambar, sebelumnya atur ukuran STAGE.

Terlebih dahulu. Tekan Ctrl+M pada keyboard maka akan

muncul jendela Movie Properties

Selanjutnya ubah ukuran STAGE, misalnya Width-nya 8cm

dan Height-nya 6cm, lakukan seperti gambar di bawah ini!

2. Untuk membuat gambar badan PINKWIN, gunakan

Oval Tool (O) Arahkan mouse kearah gambar lingkaran

pada TOOLBOX, atau cukup tekan huruf O pada keyboard.

Lalu ubah properties stroke color-nya buat tidak ada, dan fill

colornya-berwarna pink. Dengan cara yang sama ubah

properties fill color-nya


ellips sebelumnya - ellips setelah dipilih - ellips setelah di grup

3. Untuk membuat perut PINKWIN yang berwarna putih copy

saja gambar ellips sebelumnya. Klik gambar kemudian

tekan Ctrl+C (Copy) dan Ctrl+V (paste). Lalu ubah warna

PINK menjadi warna PUTIH dan ubah ukurannya dengan

menggunakan Modify>Transform>Scale. Setelah itu klik

gambar perut putih dan tekan Ctrl+G pada keyboard untuk

membuat gambar itu menjadi Group. Dengan cara yang

sama buat Group gambar ellips PINK sebelumnya.

Klik gambar ini untuk meniadakan garis stroke pada gambar yang akan dibuat

STROKE

COLOR

Hasil copy-an perut PINKWIN

FILL

COLOR

Gambar dasar PINKWIN


4. Untuk membuat kaki, buat ellips ukuran kecil dengan warna

pink dan stroke colornya di tiadakan. (Ingat setiap gambar

harus di Grup!

2 kaki PINKWIN

5. Untuk membuat mata PINKWIN buat 2 lingkaran kecil

dengan stroke color berwarna hitam dan fill color-nya putih,

kemudian buat lingkaran yang lebih kecil lagi dengan stroke

dan fill color-nya berwarna hitam. Dan tekan Ctrl+G untuk

masing-masing gambar agar menjadi grup kemudian

gabungkan tiap-tiap 2 lingkaran yang dibutuhkan!

gabungkan gambar di atas menjadi seperti di bawah ini

gambar mata PINKWIN

6. Untuk menggabung, gunakan Ctrl+panah atas atau

Ctrl+panah bawah untuk meletakkan gambar di atas atau

dibawah gambar yang lain.

7. Untuk membuat paruh gunakan Line Tool (N), beri

warna orange pada stroke color-nya. Lalu buat bentuk

segitiga. Setelah itu gunakan Paint Bucket Tool (K) atau tekan huruf K pada keyboard dan pilih option Don’t

Close Gaps pilih warna orange. Dan timpakan kursor

diatas gambar segitiga, kemudian klik!

Gambar paruh PINKWIN

Hasil akhir gambar PINKWIN

++++ DUUUH CAPEKNYA….. ++++


BAB 3 ANIMASIAnimasi dibuat dengan membentuk serangkaian frame yang

berisi grafik di dalam timeline. Keyframe adalah frame dimana

terdapat perubahan yang spesifik didalam animasi.

3.1 ANIMASI KEYFRAME TO KEYFRAMEBIasanya cara ini digunakan untuk membuat animasi yang

membutuhkan pengambaran frame demi frame, seperti yang

digunakan pada film kartun. Animasi ini sangat cocok digunakan

untuk film dengan banyak sekali gerakan yang rumit.

3.1.1 Membuat Animasi Kungfu Mastera. Buat gambar Mr. StickMan (gambar manusia sederhana)

dengan menggunakan Line Tool (N) dan Oval Tool (O). Tetapi tiap anggota tubuh seperti kepala, badan, kaki,

dan tangan berada dalam layer yang berbeda. Dalam

animasi kali ini Mr. StickMan akan dibuat seolah-olah

menjadi hidup dan bermain kungfu. Ciaaaatttt….!!!!

b. Klik kanan pada frame kedua pada masing-masing layer

kemudian pilih Insert Key Frame.

c. PIlih Arrow Tool, dekatkan Arrow Tool misalnya pada

gambar kaki. Pastikan garis tidak terseleksi. Pada Arrow Tool akan muncul garis siku kecil. Geserlah titik sudut

garis tersebut ke arah yang diinginkan.

d. Ulangi dengan membuat keyframe baru dan merubah

kedudukan anggota badan yang lain.

e. Untuk memudahkan dalam menganimasikan, aktifkan

Onion Skin! Maka perubahan gerakan yang terjadi pada

setiap frame akan terlihat.

Onion Skin


f. Buat minimal 12 frame untuk mendapatkan hasil animasi

yang LUMAYAN

3.2 ANIMASI MOTION TWEENINGAnimasi ini diterapkan untuk menganimasikan instance.

Apabila objek yang akan diberi motion tweening bukan instance,

maka Flash akan membuat simbol objek tersebut di Library dengan

nama Tween1, Tween2, dan seterusnya.

a. Buka gambar PINKWIN yang sebelumnya sudah dibuat.

b. Lalu buat keyframe pada frame ke 10. Caranya klik frame

ke-10 kemudian klik kanan dan pilih Insert Keyframe.

(Caranya mirip dengan 3.1.1.b yang di atas yah?)

c. Pada frame ke-10 geser Instance (gambar PINKWIN) ke

arah yang diinginkan. KLik dulu Arrow Tool (V) kemudian

geser gambar PINKWIN. Pastikan frame ke-10 terpilih saat

instance digeser.

Gambar frame ke-1 Gambar frame ke-10

d. KLik kanan salah satu frame antara frame 1 sampai frame

10, pilih Create Motion Tweening.

e. Animasi Motion tweening ditandai dengan munculnya warna

biru dan tanda panah di frame.

Setelah itu lakukan tes movie tekan Ctrl+Enter.

Jika prosedur dilakukan dengan benar akan muncul blok abu-abu pada frame 1 sampai frame ke-10


3.3 ANIMASI SHAPE TWEENINGAnimasi Shape Tweening sering digunakan untuk teknik

morphing yaitu teknik merubah bentuk. Misalnya bentuk kotak

berubah menjadi bentuk kursi atau seperti contoh film Terminator 2

sebuah robot berubah menjadi cairan yang mampu menembus jeruji

sel penjara. Tetapi teknik ini tidak dapat mengeksekusi instance,

instance harus dirubah dulu kebentuk shape (dengan cara pilih

gambar kemudian tekan Ctrl+B sampai gambar berubah menjadi

shape/bentuk) ditandai dengan gambar dipenuhi titik-titik putih dan

hitam.

a. Buat movie baru, klik File>New

b. Sebelumnya atur ukuran STAGE Terlebih dahulu. Tekan

Ctrl+M pada keyboard maka akan muncul jendela Movie

Properties kemudian atur properties dari STAGE.

c. Buat kotak dengan ukuran dan warna sebarang.

d. KLIk kanan frame ke-15, kemudian pilih Insert Blank

Keyframe.

e. Pada frame ke-15 masukkan gambar PINKWIN yang

sudah pernah dibuat.

f. Karena Shape Tweening tidak dapat mengeksekusi

instance, maka instance PINKWIN harus dirubah dulu

kebentuk shape. Pilih gambar PINKWIN kemudian tekan

Ctrl+B terus sampai gambar PINKWIN berubah menjadi

shape/bentuk, ditandai dengan gambar PINKWIN

dipenuhi titik-titik putih dan hitam.

g. PIlih seluruh frame 1 sampai 15.

h. Buka Frame Panel (Window>Panels>Frame) dan ganti

pilihan Tweening dari None menjadi Shape.


i. Shape Tweening ditandai dengan warna hijau pada

frame.

j. Test movie tekan Enter atau Ctrl+Enter pada keyboard.

k. Terlihat gambar kotak akan berubah bentuk menjadi

PINKWIN

3.4 ANIMASI SHAPE TWEENING : SHAPE HINTSHasil animasi shape tween dapat diatur sesuai dengan yang

diharapkan. Dengan bantuan shape hints, dapat ditetapkan titik-titik

tertentu pada awal keyframe yang akan berada di posisi tertentu pada

akhir keyframe. Waaaa.. rumit amat! Tenang, lihat contoh di bawah

ini, OK?

a. Untuk mengetahui manfaat dari Shape Hints, buat movie

baru dulu yah! Kemudian seperti biasa atur properties

STAGE. Yup, tekan Ctrl+M pada keyboard lalu ubah

propertiesnya.

b. Pada frame 1 buat huruf I. Caranya? Klik T pada Toolbox,

kemudian letakkan kursor di area STAGE. Untuk

mengubah properties TEXT klik Ctrl+T pada keyboard

atau Windows>Panels>Character

c. Klik kanan pada frame 10 kemudian pilih Insert Blank

Keyframe lalu buat huruf T.

d. Kemudian antara frame 1 – frame 10 masukkan efek shape

tweening.

e. Ingat! Efek ini hanya bisa berhasil untuk shape saja, jadi

masing-masing huruf ubah dulu menjadi shape. Caranya

klik huruf kemudian tekan Ctrl+B sampai muncul tanda

ttitik-titik hitam dan putih. Wah rumitnya… hush jangan

ngeluh!


f. Terlihat animasi shape berhasil tapi mungkin tidak sesuai

dengan yang diinginkan

g. Hasil animasi shape tween tersebut dapat diatur dengan

bantuan shape hints. Pilih Modify>Transform>Add Shape

Hint atau tekan Ctrl+Shift+H pada keyboard.

h. Pindahkan shape hint ke daerah yang dikehendaki misalnya

bagian bawah huruf I pada frame 1

i. Pada frame 10 pindahkan shape hint keposisi paling atas

huruf T. Shape hint bisa diisi sampai 26 buah (a-z).

j. Jika penempatan sudah benar, shape hint pada awal frame

akan berwarna kuning dan pada akhir frame akan

berwarna hijau. Gunakan Zoom untuk membantu

menempatkan shape hint.

3.5 ANIMASI DENGAN MOTION GUIDEBagaimana supaya gambar (obyek) yang kita buat dapat

berupa animasi yang bergerak mengikuti pola tertentu? Hal itu dapat

diatasi dengan animasi keyframe to keyframe tapi tentu sangat

melelahkan bukan?

Nah ada efek animasi yang disebut sebagai Motion Guide,

wah apaan tuh? Sesuai namanya kita tinggal membuat 'guide' bagi

obyek supaya bergerak mengikutinya.

a. Seperti biasa, buat movie baru. Klik File>New kemudian

atur properties STAGE-nya

b. Buat gambar sebarang misalnya ellips

c. Buat layer baru (yang akan digunakan sebagai guide)

Insert>Motion Guide, layer guide akan muncul diatas layer 1

d. Dengan menggunakan Pencil Tool buat motion path

di layer guide, yaitu kurva yang nantinya akan menjadi arah

jalan obyek (ellips). Pilih Smooth pada Option untuk

menghasilkan kurva yang halus


e. Dilayer "Layer1" dan "Guide:Layer1" buat masing-masing

keyframe di frame ke-25

f. Pada frame 1, geser obyek ke ujung awal path

g. Pada frame 25, geser obyek ke ujung akhir path

h. Pada layer 1, (ingat Layer 1 saja bukan layer Guide:Layer1)

pilih semua frame 1 sampai 25. Tekan shift untuk

memperbanyak frame.

i. Kemudian masukkan efek Motion Tween, Insert > Create

Motion Tween

j. Lakukan test movie terlihat ellips bergerak mengikuti kurva

tapi animasi bergerak aneh. Karena selalu dalam posisi

tegak lurus

(Gerakan ellips mengikuti Guide Layer masih kaku

karena ellips selalu dalam posisi tegak lurus)

k. Untuk mengatasi hal itu buka Frame Panel, Ctrl+F

(Windows > Panels > Frame). Pada pilihan option klik check

box Orient To Path.

(Gerakan ellips mengikuti Guide Layer terlihat lebih bagus

karena ellips bergerak lebih dinamis)


CARA INSTALASI MACROMEDIA FLASH

1. Masukkin CD-ROM (??? Ya jelas dong CD-ROM harus

dimasukkin dulu !!! )

2. Terus buka Windows Explorer, dan cari/pilih Macromedia Flash yang terdapat di CD-ROM (lupa caranya? )

GAMPANG !!! klik kanan pada tombol start, kemudian pilih

explorer… terus apalagi yah? Oh ya! Buka CD-ROM (cari

gambar pada Windows Explorer) klik dua kali, lalu

pilih dan klik 2x folder Macromedia Flash.

3. Setelah folder Macromedia Flash terbuka, pilih dan klik 2x

Flash MX.

4. Windows Instalasi Wizard akan bekerja!, Tunggu

beberapa saat sampai proses tersebut berhenti.

5. Kemudian klik Next>

6. Akan muncul jendela License Agreement (persetujuan

lisensi). Klik Yes aja!

Klik 2x

Klik 2x


7. Akan muncul jendela Choose Destination Location

(Pilihan lokasi folder). Secara default instalasi akan terinstall di

C:\Program Files/Macromedia/ Flash MX. Yang pasti klik

Next> aja lagi!!!

8. Akan muncul (hhhh muncul2 terus…!!) instalasi Macromedia Flash Player. Tetep aja klik Next>

9. Setelah itu muncul jendela yang memastikan apakah setting

instalasi sudah benar (jika prosedur diatas sudah diikuti pasti deh

Insya Allah udah benar ). Kemudian klik Next> dan tunggu

beberapa saat.

10. Yap! Proses instalasi akhirnya selesai. Klik Finish

11. Isi serial number dengan : WSW600-59791-91721-99978CD (ketikkan persis diatas!)


DAFTAR PUSTAKA

1. Ariyanto, Deny, 2003, Membuat Animasi dengan Macromedia Flash

MX, Quantum, Makassar

2. Wijaya, Didik, 2002, Tip&Trik Macromedia Flash 5.0 dengan Action

Script, Elexmedia Komputindo, Jakarta

3. Zeembry, 2002, Animasi Web dengan Macromedia Flash 5,

Elexmedia Komputindo, Jakarta

4. http://www.disney.com

5. http://www.joecartoon.com

6. http://www.showgood.com


http://www.showgood.com/

http://www.popopt.com/

http://www.disney.com/

ANIMATOR CLUB

BAGIAN 1 · Web view... Membuat Animasi dengan Macromedia Flash MX, Quantum, Makassar Wijaya,...

Documents

Transcript of BAGIAN 1 · Web view... Membuat Animasi dengan Macromedia Flash MX, Quantum, Makassar Wijaya,...