ANIMASI KARTUN THE INCREDIBLES

(1)

Spesifikasi:

Ukuran:

14x21 cm

Tebal:

48 hlm (full color)

Harga:

Rp 25.800

Terbit pertama:

Juni 2005

Sinopsis singkat:

Buku ini ditujukan untuk mereka yang sudah mengetahui teknik dasar Flash MX 2004 dan ingin lebih

lanjut mengembangkan kreativitasnya melalui pembuatan animasi dan efek-efek khusus (special effects).

Penjelasan tentang teknik-teknik pembuatan beberapa animasi kartun The Incredibles dipaparkan

dengan sangat singkat dan mudah melalui praktek langsung.

(2)

Animasi karakter kedua yang akan dibahas adalah animasi karakter tokoh Elastigirl

Elastigirl Elastigirl Elastigirl

Elastigirl. Elastigirl Elastigirl Elastigirl Elastigirl Elastigirl kesehariannya bernama Helen PHelen PHelen PHelen PHelen Parrarrarrarr. Ia adalah istri danarr ibu dari anak-anak superhero yang bernama Violet, Dash Parr, dan Jack Jack Parr. Kehebatan yang dimilikinya adalah super elastis yang dapat meregangkan tubuhnya dengan sangat fleksibel.

Pembuat Efek Khusus“ Digital Raini

Membuat Animasi Karakter Tokoh ELASTIGIRL

Document Properties: Document Properties: Document Properties: Document Properties:

Document Properties: Setting file projek dengan ukuran dimensi 800800800px X 600800800 600600600600px, Frame rate: 25 fps 25 fps 25 fps 25 fps 25 fps dengan warna latar belakang Hitam.Hitam.Hitam.Hitam.Hitam.

Animasi Karakter Elastigirl

Penggabungan Animasi

Tween

dan Animasi

Frame by Frame

Pembuatan projek yang ketiga adalah membuat animasi Elastigirl yang sangat lentur melompat ke udara. Teknik buatan animasi ini menggabungkan pem-buatan animasi tween dan animasi frame by frame. Teknik lain yang digunakan adalah penggunaan beberapa image yang dibuat dengan FX blur untuk membuat efek pergerakan animasi yang cepat.

Persiapan Dokumen Baru

Lakukan setting awal dokumen seperti dalam projek-projek terdahulu dengan lebar dimensi Stage 800px X 600px, Frame rate:

25 fps dan warna latar belakang Hitam.

Timeline: Timeline:Timeline:

Timeline:Timeline: Buat empat buah layer baru dan beri nama sesuai seperti yang disebutkan di atas. Pembuatan dan Penamaan Layer Baru

Buat empat buah layer baru dan beri nama masing-masing layer tersebut sebagai berikut “Background”, ”Blur”, “Elastis ” dan

“BackSound”.

Pengisian Layer Background

Pada Layer Background, buat sebuah Key-frame pada Frame 1, lalu impor sebuah im-age latar belakang menggunakan perintah

File > Import to Stage, lalu arahkan ke sebuah file image berikut:

CD:\ Animasi \ Elastigirl \ Asset \ Images \ CD:\ Animasi \ Elastigirl \ Asset \ Images \CD:\ Animasi \ Elastigirl \ Asset \ Images \ CD:\ Animasi \ Elastigirl \ Asset \ Images \ CD:\ Animasi \ Elastigirl \ Asset \ Images \

Background.jpg Background.jpg Background.jpg Background.jpg Background.jpg

(3)

Lanjutkan dengan mengubah ukuran objek image sesuai dengan ukuran Stage dan ubah Alpha objek image tersebut dalam panel Property menjadi 100%.

Masih pada Layer Background per-panjang masa tayang frame (durasi hingga Frame 145) dengan menyisipkan sebuah Keyframe.

Tambahkan lagi sebuah Keyframe pada Frame 150 dan ubah Alpha image tersebut dalam panel Property menjadi 0%.

Panel Property: Panel Property:Panel Property: Panel Property:

Panel Property: Membuat animasi transisi menggunakan alpha channel objek image Bkg.jpg pada Frame 1 - Frame 35 dan diperpanjang sampai Frame 145 - Frame 150.

Pengisian Layer Blur

Pada Layer Blur, buat sebuah Keyframe pada Frame 60, lalu impor sebuah file image berikut (gunakan perintah File > Import to Stage):

CD:\ Animasi \ Elastigirl \ Asset \ Images \ CD:\ Animasi \ Elastigirl \ Asset \ Images \ CD:\ Animasi \ Elastigirl \ Asset \ Images \ CD:\ Animasi \ Elastigirl \ Asset \ Images \ CD:\ Animasi \ Elastigirl \ Asset \ Images \

S Blur EG.png S Blur EG.png S Blur EG.png S Blur EG.png S Blur EG.png

Klik objek S Blur EG pada Stage lalu ubah ukurannya dalam panel Property menjadi W = 50 x H= 312 dan letakkan image tersebut di tengah luar bawah Stage. (Lihat gambar di samping.)

Buat sebuah animasi Tween pada objek

S Blur EG dengan memperpanjang masa tayang animasi tersebut hingga Frame 65.

Masih pada Frame 65 pindahkan posisi objek tersebut ke tengah atas di dalam Stage. Ubah ukuran objek tersebut dalam panel Property menjadi W = 133 X H= 548.

Layer Background: Layer Background:Layer Background: Layer Background:

Layer Background: Animasi transisi dengan membuat animasi tween objek image Background.jpg pada Frame 1 - 35 dan di-perpanjang sampai Frame 145 - Frame 150.

Panel Property: Panel Property: Panel Property: Panel Property:

(4)

Animasi Animasi Animasi Animasi

Animasi TTTTTwwwwween:een:een:een:een: Gambaran posisi dan ukuran objek S Blur EG pada Frame 60 sampai Frame 65 saat berubah dan bergerak dari luar Stage menuju ke dalam pada Layer Blur.

Masih pada Layer Blur, insert sebuah Blank Keyframe pada Frame 66 dan per-panjang masa durasinya hingga Frame 97.

Lanjutkan pembuatan animasi ini dengan membuat animasi frame by frame. Masih tetap pada Layer Blur, insert beberapa buah Blank Keyframe pada Frame 98, Frame

99, Frame100 perpanjang durasinya sampai Frame 132, Frame 133, Frame 134, dan Frame 135 perpanjang durasinya hingga Frame 139.

Blank Keyframe: Blank Keyframe:Blank Keyframe:

Blank Keyframe:Blank Keyframe: Persiapan pembuatan be-berapa Blank Keyframe pada Layer Blur: Frame 98

9898

9898, Frame 99, 99, 99, 99, 99, Frame 100 100 100 100 100 sampai Frame 132 132 132 132 132, Frame 133 133 133 133 133, Frame 134 134 134 134 134, dan Frame 135 135 135 135 135 sampai Frame 139139139139139.

Beralih ke Frame 98, imporlah sebuah file image berikut:

M Blur EG.png M Blur EG.png M Blur EG.png M Blur EG.png M Blur EG.png

Buka panel Library dan drag symbol bitmap M Blur EG ke dalam Stage. Letakkan Instance M Blur EG tepat di atas posisi bekas hilangnya Instance Small EG. (Cocokkan letak Instance tersebut dengan pengisian Instance lainnya yang terdapat pada Layer Elastis.)

Pada Frame 99 lakukan hal yang sama dengan langkah-langkah di atas dengan mengimpor sebuah file image berikut:

L Blur EG.png L Blur EG.pngL Blur EG.png L Blur EG.png L Blur EG.png

Letakkan objek L Blur EG tepat di atas posisi bekas hilangnya objek M Blur EG.

Animasi Frame by Frame: Animasi Frame by Frame: Animasi Frame by Frame: Animasi Frame by Frame:

Animasi Frame by Frame: Gambaran letak posisi dan ukuran objek M Blur EG pada Frame 98 dan M Blur EG pada Frame 99 masih dalam Layer Blur.

Beralih pada Frame 133 lalu buka panel Library dan drag symbol bitmap M Blur EG ke dalam Stage. (Cocokkan letak semua In-stance tersebut dengan pengisian InIn-stance lainnya pada Layer Elastis.)

(5)

pada Frame 134, lalu geser Instance M Blur EG yang ada pada Stage beberapa milimeter ke bawah dari posisi semula.

Layer Elastis: Layer Elastis:Layer Elastis: Layer Elastis:

Layer Elastis: Posisi objek Small EG dalam membuat animasi Tween pada Frame 66, 70, 80 sampai Frame 97.

Beralih pada Frame 140, drag-lah sym-bol bitmap S Blur EG dari panel Library ke dalam Stage.Letakkan Instance S Blur EG tepat di atas posisi bekas hilangnya Instance Small EG.

Pada Frame 140 tersebut buat sebuah animasi Tween hingga Frame 143. Pada Frame 143 pindahkan Instance S Blur EG yang ada di tengah Stage ke luar atas Stage.

Pengisian Layer Elastis

Pada Layer Elastis, insert sebuah Blank Keyframe pada Frame 66, lalu imporsebuah file image berikut:

Small EG.png Small EG.pngSmall EG.png Small EG.pngSmall EG.png

Klik objek Small EG yang ada pada Stage lalu ubah ukurannya dalam panel Property menjadi W = 133 X H= 378 dan letakkan objek Small EG tepat di atas posisi bekas hilangnya tampilan objek S Blur EG

(Frame 65 pada layer Blur).

Buat sebuah animasi Tween pada objek

Small EG dengan memperpanjang masa tayang animasi tersebut hingga Frame 70

lalupindahkan posisi objek tersebut sedikit ke atas Stage. Jangan lupa mengubah ukurannya menjadi W = 133 X H= 248.

Lanjutkan pebuatan animasi Tween ini dengan membuat sebuah Keyframe pada Frame 80 lalu pindahkan posisi objek tersebut beberapa mili ke atas Stage dari posisi semula. Ubah ukuran tinggi objek H=

221 dan biarkan ukuran lebar (W) tetap.

Animasi Frame by FrameFrame by FrameFrame by Frame:::::Frame by FrameFrame by Frame Gambaran letak posisi objek M Blur EG pada Frame 98 dan Frame 99 pada Layer Blur.

(6)

T TT

TTimeline:imeline:imeline:imeline:imeline: Gambaran konfigurasi frame-frame animasi yang terbentuk dalam beberapa layer.

Buat sebuah Keyframe lagi pada Frame

97 lalu pindahkan posisi objek tersebut beberapa mili ke bawah Stage dari posisi semula tanpa mengubah ukuran tinggi dan lebar objek.

Lanjutkan dengan meng-insert sebuah Blank Keyframe pada Frame 98 - Frame 99. Sedangkan pada Frame 100 insert sebuah Keyframe lalu impor sebuah file image berikut:

Big EG.png Big EG.pngBig EG.png Big EG.png Big EG.png

Letakkan objek Big EG tepat di atas posisi bekas hilangnya objek L Blur EG. Buat sebuah sebuah Keyframe lagi pada

Layer Elastis: Layer Elastis: Layer Elastis: Layer Elastis:

Layer Elastis: Posisi objek Big EG dalam membuat animasi Tween pada Frame 100, 101 sampai Frame 132.

Frame 101 lalu ubah tinggi H=700 dan biarkan ukuran lebar (W) tetap. Perpanjang durasinya hingga Frame 132.

Lanjutkan dengan meng-insert sebuah Blank Keyframe pada Frame 133 dan Frame

134. Sedangkan untuk Frame 135 insert-lah sebuah Keyframe, lalu drag symbol bitmap Small EG yang terdapat pada panel Library menuju ke dalam Stage. Letakkan tepat di tengah hilangnya Instance B Blur EG yang terdapat pada Layer Blur.

Buat sebuah animasi Tween dengan memperpanjang durasi animasi tersebut hingga Frame 139. Geser posisi Instance Small EG pada posisi semula yang terletak di tengah Stage beberapa cm ke bawah.

Layer Elastis: Layer Elastis: Layer Elastis: Layer Elastis:

Layer Elastis: Posisi Instance small EG dalam membuat animasi Tween pada Frame 135, sampai Frame 139.

Instance: Instance: Instance: Instance:

(7)

Animasi K Animasi K Animasi K Animasi K

Animasi Karararararakter akter akter akter akter TTTokTTokokokokoh ELoh ELoh ELoh ELoh ELAASAAASSSSTTTTTIGIIGIIGIRIGIIGIRRRRL:L:L:L:L: Source Code dan Flash Movie CD:/ Animasi/Elastigirl ... Tes Movie, Save, Export, dan Selesai

Untuk melihat pergerakan animasi yang telah dibuat sesuai dengan yang diinginkan, Anda dapat mengetes movie sebelum menyimpan ke dalam format (*.fla) atau mengekspornya ke dalam format akhir Flash (*.swf).

Tambahkan beberapa suara untuk membuat animasi dalam projek ini tampak lebih hidup. Impor dua buah file suara berikut:

CD:\ Animasi \ Elastigirl \ Asset \ Sound \ CD:\ Animasi \ Elastigirl \ Asset \ Sound \ CD:\ Animasi \ Elastigirl \ Asset \ Sound \ CD:\ Animasi \ Elastigirl \ Asset \ Sound \ CD:\ Animasi \ Elastigirl \ Asset \ Sound \

B Sound.mp3 dan Elastigirl.mp3 B Sound.mp3 dan Elastigirl.mp3 B Sound.mp3 dan Elastigirl.mp3 B Sound.mp3 dan Elastigirl.mp3 B Sound.mp3 dan Elastigirl.mp3

Pada Layer BackSound, klik Frame 1

kemudian perpanjang durasi frame ter-sebut hingga Frame 150. Kembali klik Frame 1 pada Layer Backsound kemudian drag Symbol B Sound.mp3 yang berada pada panel Library ke dalam Stage.

Beralih ke Frame 35 Layer Background lalu drag Symbol Elastigirl.mp3 yang berada pada panel Library ke dalam Stage.

Agar Animasi Lebih Hidup

Tambahkan Latar Belakang Musik

Timeline: Timeline: Timeline: Timeline:

(8)

Animasi karakter yang akan dibahas berikut ini adalah animasi karakter tokoh V

V V V

Violetioletioletioletiolet. VVVVioletViolet Pioletioletiolet P P P Parrarrarrarr adalah anak tertua dari keluarga Bob Parr. Ia adalaharr seorang murid SMP yang memendam rasa cinta kepada temannya yang bernama Tony Rydinger. Kehebatan yang dimilikinya adalah dapat menghilang dan dapat membuat perisai diri yang sanggup menahan segala sesuatu dari serangan musuh.

Membuat Animasi Karakter Tokoh VIOLET

Document Properties: Document Properties: Document Properties: Document Properties:

Document Properties: Setting file projek dengan ukuran dimensi 800 800 800 px X 600800 800 600600600 px,600 Frame rate: 25 fps 25 fps 25 fps 25 fps 25 fps dengan warna latar belakang HitamHitamHitamHitamHitam.

Animasi Karakter Violet

Penggunaan Layer Masking

Pembuatan projek yang keempat ini adalah membuat animasi tokoh kartun Violet yang dapat menghilangkan dirinya dan membuat efek yang dimilikinya berupa tenaga elektromagnetis yang dapat di-gunakan untuk membuat sebuah perisai. Teknik pembuatan animasi ini meng-gunakan animasi tween yang berada dalam sebuah Movie Clip.

Persiapan Dokumen Baru

Lakukan setting awal dokumen seperti dalam projek-projek terdahulu dengan lebar dimensi Stage 800px X 600px, Frame rate: 25 fps dan warna latar belakang

Hitam.

Timeline: Timeline:Timeline:

Timeline:Timeline: Buat sembilan buah layer baru dan sebuah Layer Folder lalu beri nama masing-masing layer seperti yang disebutkan di atas. Sedangkan untuk semua nama layer yang berawalan “M...” ubah menjadi Layer Mask. Pembuatan dan Penamaan Layer Baru

Buat sembilan buah layer baru dan beri nama masing-masing layer tersebut sebagai berikut: “Background”, “Violet”, “Hand”, “Beam Ball”, “MC2”, “MC1, “MB2”, “MB1”, “MA2”, “MA1”, dan “BackSound”.

(9)

Pengisian Layer Background

Pada Layer Background, buat sebuah Keyframe pada Frame 1, lalu impor sebuah image latar belakang menggunakan perin-tah File > Import to Stage, kemudian arahkan ke sebuah file image berikut:

CD:\ Animasi \ Violet \ Asset \ Images \

Letakkan image tersebut di tengah-tengah Stage. Pada Frame 1 Layer Back ground perbesar ukuran image-nya sehingga menutupi Stage dan ubah Alpha objek image tersebut dalam panel Property menjadi 0 %

lalu buat animasi Tween hingga Frame 35.

Pada posisi Frame 35 ubah ukuran objek image sesuai dengan ukuran Stage dan ubah Alpha objek image tersebut menjadi 100%.

Masih pada Layer Background per-panjang masa tayang frame (durasi hingga Frame 100) dengan meng-insert sebuah Keyframe.

Tambahkan lagi sebuah Keyframe pada Frame 110 dan ubah Alpha objek image tersebut dalam panel Property menjadi 0%.

Layer Background: Layer Background:Layer Background: Layer Background:

Layer Background: Animasi transisi dengan membuat animasi tween objek image Background.jpg pada Frame 1 - 35 dan diperpanjang sampai Frame 100 - Frame 110.

Pengisian Layer Violet

Pada Layer Violet, buat sebuah Keyframe pada Frame 38, lalu imporsebuah file image berikut:

CD:\Animasi\Violet\Asset \Images\Vio.png CD:\Animasi\Violet\Asset \Images\Vio.pngCD:\Animasi\Violet\Asset \Images\Vio.png CD:\Animasi\Violet\Asset \Images\Vio.pngCD:\Animasi\Violet\Asset \Images\Vio.png

Letakkan image tersebut di tengah-tengah Stage. Perpanjang durasi frame hingga Frame 100 lalu buat animasi tween pada Frame 100 hingga Frame 122, kemudian ubah Alpha objek image Vio menjadi 0%.

Pengisian Layer Hand

Pada Layer Hand, buat sebuah Keyframe pada Frame 41, lalu imporsebuah file image berikut:

Letakkan image tersebut tepat di kedua telapak image Vio. Perpanjang masa tayang. Buat animasi tween pada Frame 41 hingga Frame 46, lalu ubah Alpha objek im-age Palm panel Property menjadi 0%.

Violet & Hand: Violet & Hand: Violet & Hand: Violet & Hand:

Violet & Hand: Pada Layer Violet objek Vio

(10)

Membuat Efek Beam Ball

Penggunaan Movie Clip

Pengisian Layer Beam Ball

Pada Layer Beam Ball, buat sebuah Keyframe pada Frame 42, lalu imporsebuah file image berikut:

CD:\Animasi\Violet\Asset\Images\Ball.png CD:\Animasi\Violet\Asset\Images\Ball.pngCD:\Animasi\Violet\Asset\Images\Ball.png CD:\Animasi\Violet\Asset\Images\Ball.png CD:\Animasi\Violet\Asset\Images\Ball.png

Letakkan image tersebut di tengah-tengah Stage. Buat animasi tween pada Frame 42 hingga Frame 45.

Pada Frame 42 klik objek Ball pada Stage lalu ubah warna dan Alpha dengan memilih opsi Advanced lalu klik tombol Setting...

yang terletak di sebelah kanandalam panel Property. Dalam kotak dialog Advanced Ef-fect atur setting warna Red = (16 % x R)+ 215, Green = (16 % x R)+ 215, Blue = (16 % x R)+ 215,dan Alhpa = (100 % x R)+ 0.

Pada Frame 45 klik objek Ball pada Stage lalu ubah ukurannya dalam panel Property menjadi W = 640 x H= 640 dan letakkan image tersebut di tengah Stage (lihat gambar).

Panel Property: Panel Property:Panel Property:

Panel Property:Panel Property: Pilih opsi Advanced dan klik tombol Settings... Settings... Settings... Settings... yang terletak di sebelah-Settings... nya. Dalam kotak dialog Advanced Effect atur semua seting nilai warna RGB dan nilai Alpha sesuai yang dijelaskan di atas.

Violet & Ball: Violet & Ball:Violet & Ball:

Violet & Ball:Violet & Ball: Gambaran animasi letak dan perubahan ukuran Instance objek Ball yang tampil pada Frame 42 sampai Frame 45 pada Layer Beam Ball.

Lanjutkan pembuatan efek ini dengan membuat sebuah symbol Movie Clip dengan cara Insert > New Symbol...

Dalam kotak dialog Create New Sym-bol beri nama Symbol yang akan dibuat dengan nama “Beam” lalu pilih Behavior

Movie Clip, setelah selesai klik tombol OK. Setelah itu tampilan Stage akan ber-ubah masuk ke dalam Mode Stage dan Timeline Beam. Dalam Timeline Beam tersebut buat sebuah layer baru. Jadi jumlah layer yang ada kini berjumlah dua buah.

Create New Symbol: Create New Symbol: Create New Symbol: Create New Symbol:

(11)

Masih dalam Timeline Beam pada Layer 1, klik pada Frame 1, lalu impor sebuah file image berikut:

CD:\Animasi\Violet\Asset \Images\BmBall.png CD:\Animasi\Violet\Asset \Images\BmBall.png CD:\Animasi\Violet\Asset \Images\BmBall.png CD:\Animasi\Violet\Asset \Images\BmBall.png CD:\Animasi\Violet\Asset \Images\BmBall.png

Letakkan image tersebut di tengah-tengah Stage. Buat sebuah animasi tween pada Frame 1 dan perpanjang durasi frame hingga Frame 170.

Masih tetap pada Layer 1,klik sebuah Keyframe baru pada Frame 85, lalu putar instance objek Beam 180o_{searah jarum}

jam.

Pada Layer 2, klik pada Frame 1, lalu drag sebuah Symbol image BmBall dari panel Library ke dalam Stage.

Letakkan image tersebut di tengah-tengah Stage tepat dengan Instance image BmBall yang pada Layer 1. Buat sebuah animasi tween pada Frame 1 dan per-panjang durasi frame hingga Frame 170.

Masih tetap pada Layer 2,klik sebuah Keyframe baru pada Frame 43, lalu putar in-stance objek BmBall 180o_{pada porosnya}

berlawanan arah jarum jam. Klik pada Frame 44 lalu putar instance objek BmBall

10o_{pada porosnya searah jarum jam.}

Masih tetap pada Layer 2, klik sebuah Keyframe baru pada Frame 127, lalu putar Instance objek BmBall 190o_{pada porosnya}

berlawanan arah jarum jam ke posisi semula.

Layer 1 Movie Clip Beam: Layer 1 Movie Clip Beam: Layer 1 Movie Clip Beam: Layer 1 Movie Clip Beam:

Layer 1 Movie Clip Beam: Gambaran animasi letak dan perputaran Instance objek BmBall

yang tampil pada Frame 1 - 85 - 170.

Layer 2 Movie Clip Beam: Layer 2 Movie Clip Beam: Layer 2 Movie Clip Beam: Layer 2 Movie Clip Beam:

Layer 2 Movie Clip Beam: Gambaran animasi letak dan perputaran Instance objek BmBall

yang tampil pada Frame 1 - 43 -127 -170.

Anda dapat mengetes hasil efek animasi yang dihasilkan dengan menekan tombol Enter pada Keyboard.

Jika hasil efek animasi tersebut telah sesuai dengan yang diharapkan maka kembali ke Timeline Utama dengan mengklik tombol panah berwarna biru yang terletak di kiri atas nama Stage.

T TT

TTimeline Moimeline Moimeline Moimeline Moimeline Movie Clip Beam:vie Clip Beam:vie Clip Beam:vie Clip Beam:vie Clip Beam: Gambaran titik-tik animasi tween pada beberapa Keyframe animasi yang terdapat pada Layer 1 dan Layer 2 Movie Clip Beam.

Timeline Utama: Timeline Utama:Timeline Utama: Timeline Utama: