Animasi 2D dengan AdobeFlash CS5

Pengantar Adobe Flash CS5

Workspace Adobe Flash CS5

Klik Action Script 2.0 pada Menu Splash Create New

Anda dapat mengatur Stage dengan Klik Edit pada panel Properties disebelah kanan stage.

 Tools pada Adobe Flash CS5

Selection Tool, Digunakan untuk memilih dan memindahkan objek-objek yang ada di
dalam stage.
Subselection, Mirip dengan Selection Tool, tetapi kita bisa memilih komponenkomponen terkecil bila objek yang aktif merupakan objek shape.
Free Transform, Digunakan untuk memanipulasi objek yang terpilih. Manipulasi yang
bisa kita lakukan antara lain rotate, scaling, skew, dll.
Gradient Transform, Digunakan untuk memanipulasi warna gradien yang ada pada
objek.
3D Rotation, Memanipulasi objek menjadi gambar tiga dimensi.
Lasso Tool, Digunakan untuk memilih bagian dar objek shape dengan bentuk yang
kita inginkan. Tidak seperti selection Tool yang hanya memungkinkan kita memilih
objek Shape dengan cakupan wilayah persegi.
Pen Tool, Digunakan untuk menggambar objek shape secara manual.
Add Anchor Point, Digunakan untuk menggambar objek shape secara manual.
Delete Anchor Point, Digunakan untuk menghapus vertex yang ada pada garis
shape.
Convert Anchor Point, Merubah garis menjadi bentuk kurva.
Text Tool, Digunakan untuk menambahkan komponen teks pada satge, typenya
antara lain Static text, dynamic text, input text.
Line Tool, Digunakan untuk menggambar garis lurus, hasilnya berupa garis shape.

Rectangle, Digunakan untuk membuat objek shape berbentuk persegi.

Oval Tool, Digunakan untuk membuat objek shape berbentuk oval/lingkaran.
Rectangle Primitive Tool, Digunakan untuk membuat gambar berupa persegi, yang
modifikasinya tetap dipertahankan pada bentuk aslinya, type gambarnya bersifat
vektor tapi bukan shape.
Oval Primitive Tool, Digunakan untuk membuat gambar berupa Oval, yang
modifikasinya tetap dipertahankan pada bentuk aslinya, type gambarnya bersifat
vektor tapi bukan shape.
Polystar Tool, Digunakan untuk membuat objek shape dengan banyak sisi.
Pencil, Digunakan Untuk Menggambar garis secara bebas, hasilnya berupa garis
shape.
Brush, Digunakan untuk mewarnai stage, seakan layaknya sebuah cat, bentuk yang
dihasilkan merupakan objek shape.
Deco, Tool baru pada adobe flash yang digunakan untuk membuat objek dekorasi.
Bone, Digunakan sebagai alat bantu untuk melakukan pergerakan animasi.

Paint Bucket, Digunakan untuk mewarnai pada suatu bidang/objek yang dipilih.
Ink Bottle Tool, Digunakan untuk mewarnai pada tepi/edge dari objek yang dipilih.
Eyedropper, Digunakan untuk mengeset warna yang dipilh sebagai warna aktif untuk
Stroke atau Fill Color.
Eraser, Digunakan untuk mengahapus objek shape yang ada dalam stage.
Hand, Digunakan untuk bernavigasi secara bebas.
Zoom, Digunakan untuk memperbesar/memperkecil ukuran semua objek yang ada
pada stage.

A. Animasi Keyframe to Keyframe

Animasi ini sama dengan animasi Frame by Frame atau dibuat dari frame ke frame, dimana
akan menghasilkan ukuran file yang sangat besar. Anda harus membuat gambar karakter
dari Frame ke Frame. Biasanya digunakan dalam pembuatan film kartun.
Cara Membuat :
Buat desain karakter dari aplikasi vector misal dengan Corel Draw.

Salah satu cara agar susunan tiap karakter atau objek dapat di urutkan dengan baik
adalah dengan membuat karakter / objek 1 hal 1 karakter , kemudian

Simpan setiap desain karakter dengan format .wmf (windows Meta File) beri nama
file dan angka yang berurutan dan letakkan dalam 1 folder. Centang opsi Selected
only seperti contoh dibawah ini.
Klik Save

Import Kedalam workspace Adobe Flash

Tekan yes apabila muncul warning box seperti berikut untuk mengimport sequence
file .wmf urut yang dibuat

Hasilnya seluruh file .wmf akan otomatis dimasukan kedalam setiap frame seperti
contoh dibawah ini:

Anda dapat mengatur tiap frame dengan menggunakan transform tool

Anda dapat pula mengaktifkan tombol edit multiple frame pada panel Timeline, agar
dapat melihat susunan frame yang lain.

Kemudian atur 2 Slider Edit Multiple Frame kiri dan Kanan

Kemudian anda dapat mengatur susunan karakter dalam frame

Simpan dan coba jalan kan preview nya dengan Ctrl + Enter
Anda dapat menambahkan frame pada setiap gerakan dengan tekan F5

Simpan Kembali dan coba jalan kan preview nya dengan Ctrl + Enter

B. Animasi Tweening
Untuk Menggunakan animasi ini objek yang dibuat di flash atau gambar yang diimport ke
stage flash harus dirubah dahulu behaviour nya menjadi Symbol.
Objek yang dirubah menjadi symbol tersebut akan otomatis masuk dalam Panel library, dan
symbol yang ada di stage dan akan digerakkan disebut dengan instance. Dari instance ini
baru bisa diberi motion tween, dan digerakkan.
Bila objek yang dibuat atau gambar yang di import ke flash tidak dirubah / diconvert menjadi
symbol, dan langsung diberi motion tween, maka Flash akan otomatis merubahnya menjadi
symbol dan menempatkannya dalam library dengan nama tween1, tween2, dst.
Cara Membuat:
Siapkan satu objek dalam stage anda, misal 1 layer dengan objek tulisan seperti
contoh dibawah ini.

Klik pada frame 1 layer 1 untuk menyeleksi seluruh objek dalam frame
Kemudian klik kanan pada objek pilih convert to symbol untuk merubah obyek
menjadi symbol, seperti contoh gambar dibawah ini.
Objek / Shape / text yang dirubah menjadi symbol akan dapat diberi Motion Tween
atau digerakkan dengan motion tween.

Kemudian akan muncul dialog box, anda dapat memberi nama symbol dan type
symbol, klik ok

Maka symbol yang anda buat diatas akan otomatis dimasukan kedalam panel library

Dan bila sudah masuk kedalam panel library symbol akan dapat di drag ke stage
berulang kali sehingga anda tidak perlu mengimport kembali symbol yang sama.

Simbol yang ada di stage dapat di edit dengan cara klik 2x atau beberapa kali pada
symbol tersebut sehingga anda masuk kedalam mode edit dan anda dapat mengedit
objek tersebut. Tampilan stage mode edit seperti gambar dibawah.

Untuk keluar dari mode edit klik tombol scene 1 atau tanda panah biru
Persiapan untuk menggerakan symbol dengan motion tween
Masih pada frame 1 layer 1, klik frame 1, Atur symbol text yang dibuat sebelumnya
letakkan pada posisi seperti gambar dibwah ini.

Kemudian klik kanan pada frame 1 layer 1, pilih create classic tween (di versi flash
terdahulu classic tween bernama motion tween )

Klik kanan pada frame 10 layer 1 pilih insert keyframe, sehingga muncul tanda panah
dari frame 1 ke frame 10 yang menandakan telah diberi motion tween.
Masih di frame 10 layer 1, pada keyframe tersebut, geser symbol text pada posisi
seperti pada gambar dibawah.

Klik Ctrl + Enter, untuk preview hasil motion tween frame 1 ke frame 10, atau tekan
Enter untuk preview di Stage Flash anda.

Klik kanan pada frame 30, insert keyframe, klik Ctrl + Enter untuk preview
Kemudian klik kanan pada frame 40, insert keyframe
Sambil tekan shift, seleksi frame 30 sampai frame 40. Kemudian klik kanan pilih
convert to keyframe. Seperti gambar dibawah.

Hasilnya frame 30 sampai frame 40 berubah menjadi keyframe.

Klik di frame 31, dan klik juga pada symbol text yang ada di stage, sehingga panel
properties menunjukan properties dari symbol text tersebut.
Pada panel properties symbol tersebut, Pilih color Effect, dengan style: Alpha

Rubah opsi prosentase alpha dari 100% menjadi 0%. Sehingga Symbol pada frame 31
tersebut transparant/tidak terlihat.
Lakukan juga perintah ini pada frame 33, frame 35, frame 37, frame 39.
Klik Frame 40, kemudian klik drag keyframe 40 tersebut sampai bergeser kekanan
tepat pada frame 45. Seperti gambar dibawah ini.

Klik frame 60, klik kanan pilih insert keyframe.

Klik kanan pada frame 65, pilih insert keyframe, kemudian klik symbol text, di panel
properties pilih color effect, pilih style: Tint, rubah prosentase Tint dari 50%
menjadi 100%, kemudian rubah RGB nya menjadi misal seperti gambar dibawah ini,

Kemudian Klik kanan pada frame 70, pilih insert keyframe, kemudian klik symbol
text, di panel properties pilih color effect, pilih style: Tint, rubah prosentase Tint
dari 50% menjadi 100%, kemudian rubah RGB nya menjadi misal seperti gambar
dibawah ini

Klik kanan pada frame 75, pilih insert keyframe, kemudian klik symbol text, di panel
properties pilih color effect, pilih style: Tint, rubah prosentase Tint dari 50%
menjadi 100%, kemudian rubah RGB nya menjadi misal seperti gambar dibawah ini

Klik kanan pada frame 80, pilih insert keyframe, kemudian klik symbol text, di panel
properties pilih color effect, pilih style: Tint, rubah prosentase Tint dari 50%
menjadi 100%, kemudian rubah RGB nya menjadi misal seperti gambar dibawah ini

Klik kanan pada frame 85, pilih insert keyframe, kemudian klik symbol text, di panel
properties pilih color effect, pilih style: Tint, rubah prosentase Tint dari 50%
menjadi 100%, kemudian rubah RGB nya menjadi misal seperti gambar dibawah ini

Klik kanan pada frame 90, pilih insert keyframe, kemudian klik symbol text, di panel
properties pilih color effect, pilih style: Tint, rubah prosentase Tint dari 50%
menjadi 100%, kemudian rubah RGB nya menjadi misal seperti gambar dibawah ini

Klik kanan pada frame 105, pilih insert keyframe.

Klik kanan pada frame 110, pilih insert keyframe, klik pada symbol text nya, sambil
tekan tahan shift, geser symbol tersebut kekiri stage seperti gambar dibawah.

Klik kanan pada frame 130 pilih insert frame.

Klik pada stage, kemudian atur propertise stage, rubah warna background menjadi
gray muda (abu-abu muda).
Simpan project flash anda dengan klik menu utama file > Save as

Simpan dalam format .Fla (flash Cs5 Document)

Klik menu utama File> Publish setting

Akan muncul Dialog Box Publish Setting seperti gambar dibawah ini.

Centang Publish Optionnya Flash (.Swf) dan Windows Projector (.exe)

Kemudian Tekan tombol Publish maka dua format .swf dan .exe akan muncul
sebagai hasil publish project yang anda buat. Lokasi hasil publish sama dengan lokasi
penyimpanan file project flash sebelumnya.
Klik Ok. Klik Ctrl + S untuk save kembali.
Cek file hasil publish di folder anda.

****