BAGIAN 1 - Education



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 PENGENALAN

1.1 Konsep Dasar

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

[pic]

1.1.b Tool Box

Toolbox 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 Stroke

Yang dimaksud dengan stroke adalah coretan atau garis outline. Sedangkan fill adalah daerah yang diisi oleh warna.

3. Layer

Layer yaitu seperti lembar kertas transparan yang berguna untuk membantu proses animasi dan ilustrasi. Setiap layer dapat berdiri sendiri-sendiri

4. Frame

Frame adalah sebuah gambar dari kumpulan banyak gambar. Kita sering melihat bentuk seperti gambar di bawah dalam kehidupan nyata.

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 ILUSTRASI

Salah 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

[pic]

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

[pic]

Selanjutnya ubah ukuran STAGE, misalnya Width-nya 8cm dan Height-nya 6cm, lakukan seperti gambar di bawah ini!

[pic]

2. Untuk membuat gambar badan PINKWIN, gunakan [pic] 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 (

[pic]

[pic]

[pic]

[pic] [pic] [pic]

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.

[pic]

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!

[pic][pic]

gabungkan gambar di atas menjadi seperti di bawah ini

[pic] [pic]

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 [pic] Line Tool (N), beri warna orange pada stroke color-nya. Lalu buat bentuk segitiga. Setelah itu gunakan [pic] Paint Bucket Tool (K) atau tekan huruf K pada keyboard dan pilih option Don’t Close Gaps pilih warna orange. Dan timpakan kursor [pic] diatas gambar segitiga, kemudian klik!

[pic]

[pic] [pic]

Gambar paruh PINKWIN

[pic]

Hasil akhir gambar PINKWIN

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

BAB 3 ANIMASI

Animasi 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 KEYFRAME

BIasanya 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 Master

a. 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….!!!!

[pic] [pic]

b. Klik kanan pada frame kedua pada masing-masing layer kemudian pilih Insert Key Frame.

[pic]

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.

[pic] [pic]

f. Buat minimal 12 frame untuk mendapatkan hasil animasi yang LUMAYAN (

2. ANIMASI MOTION TWEENING

Animasi 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?)

[pic]

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.

[pic] [pic]

Gambar frame ke-1 Gambar frame ke-10

d. KLik kanan salah satu frame antara frame 1 sampai frame 10, pilih Create Motion Tweening.

[pic]

e. Animasi Motion tweening ditandai dengan munculnya warna biru dan tanda panah di frame.

[pic]

Setelah itu lakukan tes movie tekan Ctrl+Enter.

3. ANIMASI SHAPE TWEENING

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

[pic]

c. Buat kotak dengan ukuran dan warna sebarang.

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

[pic]

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.

[pic]

h. Buka Frame Panel (Window>Panels>Frame) dan ganti pilihan Tweening dari None menjadi Shape.

[pic]

i. Shape Tweening ditandai dengan warna hijau pada frame.

[pic]

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

k. Terlihat gambar kotak akan berubah bentuk menjadi PINKWIN (

4. ANIMASI SHAPE TWEENING : SHAPE HINTS

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

[pic]

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

[pic]

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.

[pic]

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

[pic] [pic] [pic] [pic]

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.

[pic] [pic] [pic] [pic]

5. ANIMASI DENGAN MOTION GUIDE

Bagaimana 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

[pic]

d. Dengan menggunakan Pencil Tool [pic] 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

[pic]

[pic]

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

[pic] [pic]

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

[pic]

[pic] [pic]

(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 [pic] pada Windows Explorer) klik dua kali, lalu pilih dan klik 2x folder Macromedia Flash.

[pic]

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

[pic]

4. Windows Instalasi Wizard akan bekerja!, Tunggu beberapa saat sampai proses tersebut berhenti.

5. Kemudian klik Next>

[pic]

6. Akan muncul jendela License Agreement (persetujuan lisensi). Klik Yes aja! (

[pic]

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!!! (

[pic]

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

[pic]

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

[pic]

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

[pic]

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.

5.

6.

ANIMATOR CLUB

-----------------------

STAGE

timeline

T

O

O

L

B

O

X

P

A

N

E

L

Warna isian (fill)

Garis outline (stroke)

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

S

T

R

O

K

E

C

O

L

O

R

Hasil copy-an perut PINKWIN

F

I

L

L

C

O

L

O

R

Layer

Gambar dasar PINKWIN

Onion Skin

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

Klik 2x

Klik 2x

Animator Club - Halaman Ke-1

Animator Club - Halaman Ke-2

Animator Club - Halaman Ke-3

Animator Club - Halaman Ke-4

Animator Club - Halaman Ke-5

Animator Club - Halaman Ke-6

Animator Club - Halaman Ke-7

Animator Club - Halaman Ke-8

Animator Club - Halaman Ke-9

Animator Club - Halaman Ke-10

Animator Club - Halaman Ke-11

Animator Club - Halaman Ke-12

Animator Club - Halaman Ke-13

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download