The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.

Efek Animasi Robot, Ekspresikan Fantasimu Di Dunia Robot Dengan Adobe Flash CS4

Discover the best professional documents and content resources in AnyFlip Document Base.
Search
Published by Perpus Kota Semarang, 2018-10-30 17:43:42

Efek Animasi Robot, Ekspresikan Fantasimu Di Dunia Robot Dengan Adobe Flash CS4

Efek Animasi Robot, Ekspresikan Fantasimu Di Dunia Robot Dengan Adobe Flash CS4

EFEK • Robot Kila~
• TeleportaSJ
Ekspresikan f~b;. FId.~dsunhia CroSbo4t
Robot . ktif
denganAd RobotAtra
.• Robot B.erjalan

dan mas•h.
banyak lag•

Efek Animasi Robot

Ekspresikan Fantasimu di Dunia Robot
dengan Adobe Flash CS4



Efek Animasi Robot

Ekspresikan Fantasin1u di Dunia Robot
dengan Adobe Flash CS4

Penerbit ANDI Yogyakarta

EFEK ANIMASI ROBOT
Ekspresikan Fanlasimu di Dunia Robot dengan Adobe Flash CS4

Oleh: DigiBook Technology

Hak Cipta © 2009 pada Penulis

Editor : Benedicta Rini W
Setting : Alek
Desain Cover : Bowo
Korektor : Suci Nurasih / Aktor Sadewa

Hak Cipta dilindungi undang-undang.
Dilarang memperbanyak atau memindahkan sebagian atau seluruh isi buku ini
dalam bentuk apapun, baik secara elektronis maupun mekanis, termasuk
memfotocopy, merekam atau dengan sistem penyimpanan lainnya, tanpa izin
tertulis dari Penulis.

Penerbit: C.Y ANDI OFFSET (Penerbit ANDI)
Jl. Beo 38-40, Telp. (0274) 561881 (Hunting), Fax. (0274) 588282
Yogyakarta 55281

Percetakan: ANDI OFFSET
Jl. Beo 38-40, Telp. (0274) 561881 (Hunting), Fax. (0274) 588282
Yogyakarta 55281

Perpustakaan Nasional: Katalog dalam Terbilan (KDT)

EFEK ANIMASI ROBOT
Ekspresikan Fantasimu di Dunia Robot dengan Adobe Flash CS4/

- Ed. I. - Yogyakarta: ANDI; DigiBook Technology
18 17 16 15 14 13 12 11 10

viii + 184 him.; 14 x 21 Cm.

10 9 8 7 6 5 4 3 2
ISBN: 978 - 979- 29 - 0823- 7
I. Judul
1. Computer Multimedia

DDC'21 : 006.7

Kat:a Pengant:ar

Saat ini, banyak sekali film-film kartun dengan tokohnya sebuah
robot. Film robot ini memang sangat digemari, tidak hanya
kalangan anak-anak tetapi juga remaja bahkan orang dewasa.
Jika Anda ingin mengetahui rahasia animasi film tersebut maka
Anda dapat membuka dan membaca buku ini. Di dalam buku
ini, Anda akan mendapatkan beberapa rahasia animasi robot
yang belum pernah Anda dapatkan sebelumnya. Beberapa
teknik animasi ini akan dijelaskan secara detail sehingga Anda
dapat mempelajari dan memahami rahasia yang ada di baliknya.
Selain itu, buku ini dilengkapi dengan gambar-gambar yang
bagus yang akan membuat Anda betah berlama-lama mem-
bacanya.
Semoga buku ini dapat bermanfaat bagi pembaca. Membuka
wawasan tentang pembuatan animasi robot. Tak ada gading
yang tak retak. Penulis dengan senang hati menerima masukan
yang membangun dari pembaca.

Jogjakarta, April2009

Penulis

IV !;:R;;:K ANIMASI l=lOBOT

Daftar lsi

KATA PENGANTAR .......................................................... iii

DAFTAR lSI........................................................................ v

BAB 1 PENDAHULUAN .................................................. 1
1.1 Bagaimana Menggunakan Buku Ini .................. 1
1.2 Fitur Baru Adobe Flash CS4 Professional.......... 2
1.3 Tool Pendukung .......... .. .................. ................... 2
1.4 Menuju TKP! ............... .... ..................... .............. 3

BAB 2 PERSIAPAN DENGAN CORELDRAW ................. 5
2.1 Menyiapkan Gambar......................................... 5
2.2 Mengimpor Gambar ke Lembar Kerja
CorelDRAW....................................................... 6
2.3 Mengolah Gambar dengan Fasilitas Trace
Bitmap................................................................ 8
2.4 Mengekspor Gambar ke Ekstensi .swf... ... .... .... 10

BAB3 MEMBUATKELIPANPADAMATA DAN
ANTENA ROBOT .................................................. 13

BAB 4 TRACING EFFECT PADA ROBOT........................ 27

BAB 5 ANIMAS! TULISAN BERJATUHAN...................... 33

BAB6 MEMBUATKABUT............................................... 47

BAB 7 ZOOM EFFECT..................................................... 61

VI tR::K ANIMASI i=l090T

BAB 8 KILAU PADA BAGIAN TEPI ROBOT................... 75
BAB 9 TAMPILAN ROBOT YANG ATRAKTIF ............... 87
BAB 10 TELEPORTAS! ROBOT ........................................ 109
BAB 11 ROBOT BERJALAN .............................................. 135
BAB 12 ADVANCE CIRCULAR PADA ROBOT................ 157

BAB 1
Pendahuluan

Selamat datang,

Apa yang ada di benak Anda ketika membeli buku ini? Tentu
membuat animasi robot. Sudah punya ide bagaimana bentuk
fisiknya, apa yang dapat atau akan dilakukan oleh robot Anda?
Oke. Jika Anda sudah punya gambaran, simpan dengan rapi di
tempat yang aman. Jangan sampai ada yang mencuri ide Anda.
Tahan dulu .... Ada baiknya Anda menyelesaikan membaca bab
ini.

1.1 Bagaimana Menggunakan Buku lni

Saya tidak ingin memaksa Anda untuk mempelajari semua
teknik dalam buku ini. Sungguh, saya ingin Anda bisa
mewujudkan animasi robot Anda hari ini juga. Daripada Anda
menjelajahi dan mencoba semua efek dalam buku ini, sebaiknya
Anda baca sekilas bab-bab dalam buku ini. Anda lihat gambar-
gambar yang ada dalam bab-bab tersebut. Pilihlah efek yang
cocok untuk kebutuhan Anda.

Anda dapat mempelajari dengan melompat-lompat, tidak harus
urut. Masing-masing bab menjelaskan sebuah teknik dan teknik
itu dijelaskan secara detail. Tiap bab dijelaskan secara indepen-
den. Jadi tidak perlu khawatir meskipun Anda baru saja
mempelajari Flash.

2 !;:=K ANIMASI PDBDT /

1.2 Fitur Baru Adobe Flash CS4 Professional

Baiklah, saya akan perkenalkan sekilas tentang fitur baru Adobe
Flash CS4 Profesional. Adobe Flash CS4 ini memiliki beberapa
fitur baru yang dapat Anda gunakan untuk membuat animasi.
Beberapa fitur baru tersebut adalah CS4 Interface. Adobe Bridge
and Version Cue, Bitmap Symbol Library Item dialog box,
Multicolored bounding boxes, Adobe Device Central, Active
content detections, 9-slice on stage preview, Filter copy and
paste, Copy and paste motion, Copy motion as ActionScript 3.0,
Pen tool enhancements, Adobe Photoshop Import, Primitive
Rectangle and Oval driwing tools, Enhanced Quicktime video
support, Save and load cue points for Flash video, Script Assist
mode for ActionScript 3.0 dan Improvement in ActionScript.

Beberapa dari fitur baru tersebut akan kita gunakan untuk
membuat efek dan animasi robot. Saya tidak akan menjelaskan
satu per satu secara khusus tentang fitur tersebut. Anda dapat
mengenalnya dengan mempraktikkannya secara langsung peng-
gunaan fitur tersebut. Jadi, jika Anda masih merasa asing dengan
istilah-istilah tersebut jangan khawatir. Maju terus!

Karena beberapa efek memanfaatkan fitur baru, maka
kebanyakan latihan dalam buku ini hanya dapat Anda jalankan
dengan menggunakan Adobe Flash CS4 Profesional. Jika ada
yang tetap ngotot menggunakan versi sebelumnya, silakan saja.
Tetapi Anda harus mencari penyesuaiannya (temunya jalannya
bertambah panjang ketimbang versi baru).

1.3 Tool Pendukung

Meskipun kita berbicara dalam konteks animasi, kita tetap
memerlukan gambar (baik berformat jpeg atau gif) sebagai
bahan dasar 'masakan' kita. Oleh karena itu, kita tetap

PENDAHULUAN

membutuhkan tool pendukung untuk mengolah bahan dasar
tersebut.

Dalam buku ini, kita akan menggunakan CorelDRAW X4 dan
Macromedia Fireworks. CorelDRAW X4 dapat Anda gunakan
untuk membuat gambar dengan desain yang menarik dan
artistik, sedangkan Macromedia Fireworks dapat Anda gunakan
untuk mengedit gambar yang akan Anda gunakan ke dalam
Adobe Flash CS4 Professional. Sengaja saya memilih mengguna-
kan CorelDrawX4 sebagai salah satu tool pendukung karena
pada saat buku ini dibuat, Corel meluncurkan produk terbaru-
nya yang bernama CorelDRAW X4. Jadi sambil menyelam
minum air. Sambil belajar Adobe Flash CS4, Anda juga akan
berkenalan dengan CorelDRAW X4. Asyik, bukan?

Di luar itu, Anda dapat menggunakan tool pendukung lainnya.
Sebenarnya ini bergantung kepada apa yang Anda butuhkan dan
apa yang sudah biasa Anda gunakan. Anda dapat mengganti tool
image editor yang dibahas di buku ini dengan image editor yang
biasa Anda gunakan. Dengan catatan, asalkan fungsi yang kita
bahas tersedia pada tool yang Anda gunakan.

Gunakan setiap fasilitas pendukung secara maksimal agar hasil
yang didapatkan dalam Adobe Flash CS4 Professional menjadi
lebih baik.

1.4 Menuju TKP!

Anda tentu sudah tidak sabar membuat efek dan animasi robot.
Kini buka kembali ide Anda tersebut. Bayangkan efek yang
Anda inginkan. Kalau perlu, buatlah daftar efek-efek tersebut.
Jangan pedulikan istilah atau nama dari efek tersebut. Anda
berhak memberi nama sendiri. Pendek kata, tulis saja.

4 f;:f=EK ANIMASI l=lDtlDT

Selanjutnya, jelajahi secara cepat judul dan gambar-gambar yang
ada di buku ini. Berhentilah pada bab yang sekiranya mirip
dengan kebutuhan Anda. Tentu saja saya tidak bisa mengatakan
tepat 100%. Setiap orang punya ide unik. Saya hanya membuka
jalan untuk mewujudkan ide Anda.

Tetapi jika Anda belum punya ide, silakan Anda mempelajari
bab yang Anda suka. Selamat mencoba!

BABi!

Per!iiapan dengan
l:oreiDRAW

Mempersiapkan gambar adalah hal yang sangat penting sebelum
membuat sebuah animasi. Sebenarnya gambar berekstensi apa
pun bisa digunakan dalam Adobe Flash CS4 Professional, akan
tetapi ada kalanya kita membutuhkan gambar berekstensi .swf
dengan background transparan. Nah, saat seperti inilah peranan
bab ini diperlukan. Tentunya akan sangat sulit bagi kita untuk
mendapatkan sebuah gambar dengan background transparan,
jika kita belum mengetahui ilmunya. Untuk itu, pada bab ini
Anda akan belajar mengubah background sebuah gambar
bitmap berekstensi .jpg menjadi sebuah gambar vector yang
berekstensi .swf dengan background transparan. Salah satu
program yang bisa membuat gambar menjadi berekstensi .swf
dan ber-background transparan adalah CorelDRAW. Namun
jika Anda tidak memerlukan gambar dengan background
transparan maupun gambar berekstensi .swf, maka Anda dapat
langsung mencoba langkah-langkah pada Bab 3 dan seterusnya.

2.1 Menyiapkan Gambar

Pertama-tama siapkan gambar yang ingin Anda ubah menjadi
berekstensi .swf dan ber-background transparan dengan cara
mencari lewat internet, menggambar sendiri atau mencari lewat
ternan dan kerabat terdekat Anda. Selanjutnya, simpanlah gam-

6 EFEK ANIMASI ROBOT

bar tersebut ke dalam file dan folder yang mudah untuk Anda
ingat.

2.2 Mengimpor Gambar ke lembar Kerja
CoreiDRAW

Setelah Anda menemukan gambar yang sesuai dengan kebutuh-
an Anda, sekarang saatnya memasukkan gambar tersebut ke
dalam lembar kerja CorelDRAW. Karena program CorelDRAW
yang sedang populer saat ini adalah CorelDRAW X4, maka
penulis menggunakan program CorelDRAW X4.

Selanjutnya ikuti langkah-langkah berikut:
1. Buka program CorelDRAW X4.

Klik Start > All Programs > CorelDRAW Graphics Suite X4
> CorelDRAW X4.

Gambar 2.1 longkoh membuko program CoreiDRAW X4

2. Buka halaman baru dengan mengklik icon atau dengan
mengklik File > New.

Gam bar 2.2 longkoh membuko holomon boru

Pf::RSIAPAN Df::NC:.AN CORf::LDJ=lAIAJ 7

3. Impor gambar yang telah Anda siapkan tadi dengan cara:
Klik File> Import atau dengan cara menekan Ctrl+L

4. Muncul kotak dialog Import, klik file gambar yang ingin
Anda Import ke lembar kerja CorelDRAW X4, kemudian
klik tombol Import.

Look in: y ·t 'C:::·

,,.,.,

(C:)LocaiDisk tst2_8006D7_drotd,jpg ist2_3170408_big_tob ... tst2_4596773_crmso ...

(D:)LocaiOKk

.:, tst2_4700094_rriru_O... tstZ_4700099_search_...

(E:)loc.eiDisk

De~op

~ File name: ts.t..z..j.700i i).~bug_de.t.e.ct.·.,.~.~~.b.~.t.·:.;.~.g... v .

MyNetr,mrk F~esoftype: Allfllefotmats v Fullmaoe v
Places

Sortt'tPe: Default
CodeP~:

lmo:~-;~esize: 380 X380 Pixels, 16.7 Mtlion Colot~ (24-bitl

Ffle format: Jp.,; • JPfG Bitmaps JPEG (OII"fJJ"f!SSIOn

Not~: []Extract embedded ICC pdtle
~CheckforW.:.tf'rrMrl-..

Import ij Canced

Gombar 2.3 Tompilon kotok dialog Import

Setelah klik Import, muncul tampilan seperti Gambar 2.3
berikut ini.

V is~2_4700113_bug_de~ec~ion_bo~.jpg
w: 5.278 in, h: 5.278 in
Click and drag ~o resi~e,
Press En~er ~o center on page,
Press Spacebano use original position,

Gombar 2.4 Tompilon seteloh tombollmport diklik

,.I:A

cA.,,8 £R::K ANIMASI PoeOT / /·'··";,·'~

5. Klik mouse di lembar kerja CorelDRAW X4 untuk me-
nampilkan gambaL

•c • •c



•c • •c

Gombar 2.5 Tampilan gam bar yang berhasil diimpor

2.3 Mengolah Gambar dengan Fasilitas Trace
Bitmap

Setelah gambar berhasil Anda masukkan ke dalam lembar kerja
CorelDRAW X4, sekarang waktunya untuk mengubah back-
ground gambar tersebut menjadi transparan. Fasilitas utama
yang akan kita gunakan adalah fasilitas Trace Bitmap. Seperti
apa prosesnya, silakan Anda simak uraian berikut ini.

1. Klik menu Trace Bitmap > Outline Trace > Clipart....

[a Trace Bitmap ~;:,1

l.lJ.l

Quick Trace . inche~ Color
~enterline Trace I
Qutline Trace A

• L[ne art, ..

LQgO, ..

Qet.:tiled lo,;~o, ,,

·,s .~lip<r~-· ..

Gombar 2.6 Tracing bitmap dengan clipart. ..

P£1=lSIAPAN D£NC:OAN COI=l£LDI=lAI.AJ 9

2. Muncul kotak dialog PowerTRACE seperti Gambar 2.7,
tunggu sampai proses tracing selesai.

.+

--~-

Gombar 2.7 Proses tracing pada kotak dialog PowerTRACE

3. Setelah proses tracing selesai, pastikan cek bok Remove
background sudah tercentang, sehingga hasil tracing akan
berupa gambar tanpa background.

C"M':!·:t.qna<,m!~

, •~·r.:···~Wdr,:rour,d
Rerr.o~~ (•)10' /roment~e IIM<;Je

~'"" MW'''' ~n~o"o:'< <Y rC.,. •~mece>h·

Gombar 2.8 Tompilan setelah proses tracing selesai

f
10 !;:FE:K ANIMASI i=lDSOT / . " ~

.:A:.,,

4. Setelah cek bok Remove background tercentang, klik
tombol OK.

• •Cfl •

••

•••

Gombar 2.9 Tompilon gombor hosiltrocing

2.4 Mengekspor Gambar ke Ekstensi .swf
1. Klik gambar hasil tracing dengan Pick Tool [;~ .

2. Kemudian klik File > Export atau tekan Ctrl + E pada key-
board.

3. Muncul kotak dialog Export, pilih direktori untuk menyim-
pan hasil Export.

Gombar 2.10 Memilih direktori untuk menyimpon hosil Export

11

4. Beri nama file hasil Export dengan mengisikan sebuah
nama pada kolom File name.

File name:
Save as type:
Sort type: rvector

··~

Gambar 2.11 Memberi nama file hasil export

5. Pada kolom Save as type, pilih SWF- Macromedia Flash.

File name: Robot

Save as type: JPG - JPEG Bitmaps

Sort type: JPG - JPEG Bitmaps
MAC - MACPaint Bitmap

PCX- PaintBrush

PNG - Portable Network Graphics

PP5 - Picture Publisher 5, 0 I
PPF - Picture Publisher vI 0 Image

PSD - Adobe Photoshop

•in•c-he•s---..J~TR~TGFA~--R~iTcha~Tregxt~Fao~r.mBa~tit~m!apmm•~··· v r

Gambar 2.12 Menentukan Save as type

6. Klik tombol Export untuk melakukan proses ekspor
sekaligus menutup kotak dialog Export.

7. Muncul kotak dialog Flash Export, centang cek bok Object
pada Bounding Box Size.

12 ~Ft:K ANIMASI R080T

General 1:::) No Issues .

JPG Compression: 20 [?.]Convert dashed outlines
Resolution (dpi): 72
Smoothing~ 20 f?..1 Use default fountain steps

Bounding B•:•::< Si;:..;- []File Protection from import
[JText as text
()Page
\1 Display in browser when done
('*:~:ObJects

R1 Use sound behaviors

Compression: Low

Presets:

Gombar 2.13 Kotak dialog Flash Export

8. Klik Ok untuk menutup kotak dialog Flash Export.

Sekarang gambar Anda telah berekstensi .swf dengan back-
ground transparan. Selanjutnya Anda bisa menggunakan gambar
ini pada Adobe Flash CS4 Professional secara fleksibel, karena
Anda bisa menambahkan background apa pun di belakang
gambar tersebut. Selamat mencoba!

Bab3
Membuat: Kelipan pada
Mat:a dan Ant:ena Robot:

Pada Bab 3 ini Anda akan diajak untuk membuat animasi berupa
kelipan di mata dan antena robot. Sebelumnya cari gambar
robot yang bagian mata dan antenanya kelihatan jelas,
kemudian simpan dalam folder yang mudah untuk ditemukan
kernbali.
Setelah gambar yang dimaksud telah Anda temukan, lakukan
langkah-langkah membuat kelipan mata dan antena robot
berikut ini.
1. Buka program aplikasi Adobe Flash CS4 Professional

dengan cara Klik Start > All Programs > Adobe Flash CS4
Profesional.

Gombar 3.1 langkah membuka program Adobe Flash CS4 Professional

14 !;:Ft;:!-< ANIMASI POSOT

2. Muncul tampilan seperti Gambar 3.2 di bawah ini, klik
Flash File (ActionScript 3.0) pada kolom Create New.

}_!_ ActlonScnpt Commur11cal1on F1le

, ~ Flash Project

f>ettinq St.uted ,,
New Features:.-

Gombar 3.2 Tampilan pertama Adobe Flash CS4 Profesional

Tampilan ini akan selalu muncul setiap kali Anda meng-
aktifkan program Adobe Flash CS4 Profesional. Akan tetapi
jika Anda tidak menghendaki tampilan ini muncul lagi saat
membuka program Adobe Flash, centang Checkbox Don't
Show Again di bagian kiri bawah kotak dialog ini.

3. Muncul Lembar Kerja Adobe Flash CS4 Profesional, Klik
File > Import > Import to Stage... atau tekan Ctrl + R pada
Keyboard.

Edit View Insert Modify Text Commands Control Debug

New .. . Ctri+N
Open .. . Ctri+O
Browse in Bridoe Ctti+Ait+O

Export Import to

Gombar 3.3 Langkah mengimpor gam bar ke lembar kerja

1 5IVI£M8UAT !.<£LIPAN PADA IVIAT A DAN ANT£NA

4. Muncul kotak dialog Import, pilih gambar yang ingin Anda
impor.

(C) Local Dd

(D.) Local Disk 1St2_4700llt._web_et.,. ist2_4700121_fire_w ...
JE-] local Did

rst2_4700139_robot_c.., rst2_4700221_internet .. , JO$S

File name: 1st2_4700125_r-ss_bo\

Gambar 3.4 Kotok dialog Import

5. Klik Open atau klik dua kali gambar yang Anda pilih.

6. Setelah itu, otomatis gambar yang Anda pilih akan muncul
di lembar kerja Adobe Flash CS4 Professional dan menem-
pati Layer 1. Ubah nama Layer 1 menjadi Background
dengan cara mengklik 2 kali Layer 1 Kemudian ketikkan
nama Background.

10 15

Gambar 3.5 Tampilan layer 1 sebelum diubah 10

~ Lii ·0D··~~.t.· 5

Gambar 3.6 Tampilan layer Background

~16 E<= AN'W'SI "D<DT

7. Buat layer bam di atas Layer Background, kemudian beri
nama layer bam tersebut dengan Blink. Untuk membuat

layer bam, klik ikon Insert Layer SJ pada panel Frame.

Ikon Insert
Layer

..J;i'
Gambar 3.7 Tompilon ikon Insert Loyer untuk membuot Ioyer boru

5

Gambar 3.8 Tompilon Loyer Blink

8. Klik Oval Tool Q. atau tekan humf 0 pada Keyboard.
9. Atur settingan Stroke color dan Fill color sebagai berikut:

0 OvalTool

pf'l~.

··~

Stroke: :.J" '·
Style:

Gambar 3.9 Settingon podo Stroke color don Fill color

10. Dengan menggunakan Oval Tool tersebut, gambarlah
sebuah elip/lonjong di atas mata robot (lihat Gambar 3.10).

11. Jika diperlukan, klik Free Transform Tool untuk mem-
perbesar/memperkecil dan untuk memutar elip tersebut.

1 7~M9UAT 1-<E:LJ:PAN PADA IV1ATA DAN ANTE:NA

Gambar 3.1 0 Tampilan elip di atas mota robot

12. Ubah Type Solid pada panel Color menjadi Radial.
Jika panel Color tidak terlihat, tekan Shift+F9 untuk
menampilkannya.

Gambar 3.11 Tampilan panel Color

Gambar 3.12 Tampilan panel Color setelah Type Solid diganti dengan Type Radial

"~ AN~I ~18 I'<D=T
~:.,,

13. Klik 2 kali panel warna kiri Iii, kemudian beri warna

#EEEEEE dengan Alpha 90o/o (lihat Gambar 3.13 dan
Gambar 3.14).
14. Klik 2 kali panel warna kananlJ, kemudian beri #FFFFFF
dengan Alpha 60o/o (lihat Gambar 3.15 dan Gambar 3.16).
Untuk memberi nilai Alpha, Anda dapat melakukannya
dengan menggeser skala Alpha atau dapat juga dengan
mengetik nilainya secara langsung pada kolom Alpha.

B: 0 'v .Jllll.l . . ..... . ~

Gombar 3.13 Proses memberi worno panel kiri

Gombar 3.14 Mengetikkon niloi worno don olpho

Gombar 3.15 Proses memberi worno panel konon

1IVIE:M9UAT J..<ELIPAN PADA MATA DAN ANTENA Q

Gombar 3.16 Mengetikkon niloi worno don olpho

Gombar 3.17 Tompilon seteloh gombor elip diberi worno

15. Tekan dan tahan tombol Ctrl pada keyboard, kemudian
tarik gambar elip tersebut ke mata robot yang satunya.
Setelah sampai di mata satunya, lepaskan tombol Ctrl ter-
sebut. Proses tadi merupakan proses menyalin (mengopy)
elip secara cepat. Tetapi jika Anda kesulitan menggunakan
cara tadi, lakukan cara 2 yaitu dengan menekan klik kanan
pada gambar elip, kemudian klik Copy. Setelah itu klik
kanan di luar gambar elip lalu klik Paste. Jika gambar hasil
salinan elip telah muncul, tarik gambar tersebut ke mata
robot yang satunya.

20

..----~Create Shape Tween I,
Cut
Paste I

Gombar 3.18 Proses menyolin elip

Gombar 3.19 Proses menompilkon hosil solinon

Gombar 3.20 Tompilon seteloh hosil solinon elip ditempotkon podo mota robot yong sotunyo

16. Buat layer baru di atas Layer Blink dengan nama Blinkl.

5 10 15

Gombar 3.21 Tompilon Ioyer Blink!

2 1ME:MQUAT 1-<E:LIPAN PADA MATA DAN ANTE:NA

17. Buat lingkaran/elip di atas antena robot denga~ Oval Tool
Q~

18. Ubah type Solid pada panel Color menjadi Radial.

19. Beri warna pada panel warna kiri #EEEEEE dengan Alpha
30% dan panel warna kanan #FFFFFF dengan Alpha 10 %.

.)' /. Type: :Radial v
v
~. :f iOverflow:

I!J 0~) OunearRGB

R: 255 I
G: 255 v
B: 255 v
Alpha: 10% v

Gombar 3.22 Proses memberi worno lingkoron

20. Salin lingkaran/elip tersebut seperti pada langkah 14
kemudian letakkan hasil salinan di antena robot yang
satunya.

Gombar 3.23 Tompilon setelah lingkaran/elip di tempatkan di musing- musing antena robot

. \22
t;:FEK ANIMABI POBOT /

21. Klik Layer Blink kemudian tekan Ctrl + klik layer Blinkl
untuk menyeleksi kedua layer secara bersamaan.

5 10 15 20

,tl Blir-1k • • Iii
1.1 Background
• •D

3.l _j :11 fps

Gam bar 3.24 Menyeleksi Ioyer Blink don Blink1 secaro bersomoon

22. Klik frame 1 kemudian tarik ke frame 2.

10 15

Gombar 3.25 Menorik !rome 1ke !rome 2

23. Lihat hasilnya, jika hasilnya seperti Gambar 3.26 di bawah
ini, berarti langkah Anda benar. Tetapi jika belum, silakan
ulangi sampai benar.

Gombar 3.26 Tompilon seteloh proses pemindohon !rome

24. Lihat pada lembar kerja Adobe Flash CS4 Professional,
Anda akan mendapatkan tampilan gambar seperti berikut:

M~M9UAT 1-<~LIPAN PAOA MATA DAN ANT~NA 2:;l

••

Gambar 3.27 Tompilan pada lembar kerja Adobe Flash CS4 Professional setelah frame 1
dipindah ke frame 2

25. Klik frame 2 pada Layer Background, kemudian tekan FS
pada keyboard.

• •D
Gambar 3.28 Tompilan frame 2 pado layer Background

5 10

Gambar 3.29 Tampilan setelah frame 2 pada layer Background di F5

26. Amati pada lembar kerja Adobe Flash CS4 Professional,
gambar robot pun akan kembali terlihat.

fi!jA\24
~Fa< ANJ:MASJ: QOSOT

Gombar 3.30 Tompilon gombor robot yong terlihot kemboli

27. Klik nilai FPS pada PROPERTIES, kemudian ubah nilai FPS
menjadi 12.

v PROPERTIES:

Gombar 3.31 Kolom FPS

Size: 550 x 400 px
Gombar 3.32 Menguboh niloi FPS

28. Klik menu Control > Play atau tekan Ctrl + Enter pada
keyboard untuk mencoba movie.
Selamat mencoba!

2 5M£M8UAT L-<£LIPAN PADA tv!AT A DAN ANT£NA
Gambar 3.33 Tompilan movie yang secora otomatis diputar oleh Flash Player

26 t:Fa< ANIMABI RDSOT /

BAB4
Tracing Effect: pada Robot:

Pada bah ini Anda akan ditunjukkan cara rnernbuat efek tracing
pada robot. Seperti biasa siapkan dahulu garnbar robot yang
ingin Anda jadikan sebagai objek latihan, usahakan background
garnbar berwarna hitarn/gelap.

Ketika garnbar sudah siap, ikuti langkah-langkah berikut ini.

1. Bukalah program aplikasi Adobe F1ash CS4 lewat Start > All
Programs > Adobe F1ash CS4 Professional, atau jika Anda
sudah berada di dalarn Aplikasi Adobe Flash CS4, tekanlah
Ctrl+N untuk rnernbuka dokurnen baru.

2. Jika Anda rnenekan Ctrl+N, rnaka akan rnuncul kotak dialog
New Document. Pilih salah satu pilihan Type kernudian
klikOK.

-~-~:t~~~ DI!'$Crfl)b.Y>.

T''',"'U#WM4* Create a.-- fLA fole (•.fia) f1 the Fl.t5tl (ooclfilefll: ...-.dow.
1M Pdlktl Sett:~ w1 be !11!11: f.,.. ActlmScript :>.n LM Fl.lo
fO.,.Stoset1.4tl110'tmeda.-dstrud:u'efaS>M'Ides

~dfo.AdobeFtashP~.mr

Gambar 4.1 Kotok dialog New Document

28 t:FEK ANIIVIASI PDBDT /

3. Tekan Ctrl+J untuk menampilkan kotak dialog Document
Properties.

4. Setelah kotak dialog Document Properties itu muncul, ubah
nilai Frame rate menjadi 24 fps.

[.1imensions: 550 px (V·!idth) ·x: 400 p>-; (height)

r·i\atch: Printer Default

Ruier unit::;: P1xels

Gombar 4.2 Mengubah nilai frame rme menjadi 24 Ips

5. Klik OK untuk menutup kotak dialog tersebut.

6. Klik File > Import > Import to Stage ... atau tekan Ctrl+R
pada keyboard untuk mengimpor gambar Anda.

7. l\!Iuncul kotak dialog Import, Pilih gambar vang ingin Anda
impor. Usahakan gambar yang ingin di-trace berlatar
belakang hitam/gelap.

Trace Tr.:lee Pobot

Gambar 4.3 Memilih file yang akan diimpor

TRACING'\ f::FF£CT PADA ROBOT 29

8. Klik OK untuk menutup kotak dialog tersebut.

Gambar 4.4 Tampilan gam bar yang berhasil diimpor

9. Jika ukuran gambar kurang sesuai, perbesar/perkecil dengan
Free Transform Tool •

10. Setelah itu posisikan gambar Anda tepat di tengah-tengah
lembar kerja Adobe Flash CS4 Professional dengan cara
mengklik ikon To stage kemudian klik Align Vertical
Center dan Align Horizontal Center pada panel Align.

Gambar 4.5 Tampilan panel Align

Jika panel Align belum tampil, tekan Ctrl+K untuk me-
nampilkannya.

dO £FE:K AN:IMAS:I ~DSOT

11. Klik frame 20 kemudian tekan F6 pada keyboard.

Gambar 4.6 Tompilon frame 20 seteloh F6 ditekon

12. Ketika Anda masih berada di frame 20, klik Modify >
Bitmap > Trace Bitmap.

iiiirext Commands

Document... Ctrl+J

Convert to Symbol... FS

Break Apart Ctri+B

Gambar 4.7 Menu Truce Bitmap

13. Muncul kotak dialog Trace Bitmap, ubah Minimum area
menjadi 4 px, Curve fit menjadi Tight dan Comer threshold
menjadi Many comers, kemudian klik OK.

Gambar 4.8 Settingon podo kotok dialog Truce Bitmap

14. Muncul proses Tracig Bitmap, tunggu beberapa saat sampai
proses selesai.

Cancel

Gambar 4.9 Proses Trueing Bitmap

Tl=lACINGo t:FFECT PADA i=<DSOT dl

Gombar 4.10 Hosil Tracing Bitmap

15. Klik frame 1, kemudian klik gambar Anda.

10 15 20 25 30

Gombar 4.11 Tompilon frame 1 don gombor

16. Setelah itu tekan Ctrl + B (Break Apart).

Gombar 4.12 Tompilon gombor robot seteloh (trl + B(Break Aport) ditekon

d2 EFEI-< ANIMASI R090T /

17. Tekan F6 di frame 20.

«. Create Classic Tween
Insert Frame

Gambar 4.13 Pilihon Creole Shope Tween

19. Klik nilai Ease pada kolom Tweening. Kemudian ubah
nilainya menjadi 100.

y:TW~"!!I\IG

Gambar 4.14 Menguboh niloi Ease

Gambar 4.15 Tompilon podo panel frame seteloh niloi Ease diuboh

20. Tekan Ctrl+Enter untuk mencoba movie.
Selamat mencoba!

BAB5
Animasi Tulisan

Berjat:uhan

Pada bab ini Anda akan ditunjukkan dengan cara membuat
animasi tulisan berjatuhan. Di sini gambar yang perlu disiapkan
adalah gambar untuk background saja. Akan tetapi penulis
menggunakan 2 buah gambar, yakni gambar pantai dan gambar
robot kalajengking. Untuk mempermudah belajar, cari gambar
pantai dan robot kalajengking yang minimal mirip dengan
gambar milik penulis, kemudian simpan di folder yang mudah
untuk Anda temukan kembali.

Ketika gambar sudah siap, lakukan langkah-langkah berikut ini.
1. Bukalah program aplikasi Adobe Flash CS4 lewat Start > All

Programs > Adobe Flash CS4 Professional, atau jika Anda
sudah berada di dalam Aplikasi Adobe Flash CS4, tekanlah
Ctrl+N untuk membuka dokumen baru.

2. Jika Anda menekan Ctrl+N, maka akan muncul kotak dialog
New Document. Pilih salah satu pilihan Type kemudian
klik OK.

3. Tekan Ctrl+J kemudian ubah nilai Frame Rate menjadi 42
fps.

4. Ubah nama Layer 1 menjadi Background.

:;J4 f;:~=t;:K ANIMASI PDBOT

Gombar 5.1 Menguboh noma layer 1 menjodi Background

5. Tekan Ctrl+R untuk mengimpor gambar pantai yang telah
Anda siapkan.

Gombar 5.2 Gombar pontoi yang berhosil diimpor

6. Jika ukuran background (gambar pantai) terlalu besar,

;.::

gunakan Free Transform Tool · · ·• untuk memperkecil

gambar, begitu pula sebaliknya.

7. Pada panel Align, klik ikon To stage kemudian klik Align
Vertical Center dan Align Horizontal Center.

AUGN

Align·

[J~J

=Distribute:
-"CcJ:"r' -a- ..r:::l.

-c:J-

Match size: Space:

I§!J filii ~;,. =g db

Gombar 5.3 Tompilon panel Align

ANIMASI TULISAN gE:I'luATUHAN d5

8. Buat Layer baru di atas Layer Background, kemudian beri
nama Scorpion.

'1..1 Backgroun D

Gombar 5.4 Tompilon Loyer Scorpion

9. Tekan Ctrl+R, kemudian impor gambar robot kalajengking
yang telah Anda siapkan sebelumnya.

Gombar S.S Gombar robot kalajengking yang berhasil diimpor

10. Jika perlu, perbanyak robot kalajengking dengan cara
menyalin (copy) gambar tersebut. Lakukan langkah berikut
untuk menyalin (copy) gambar robot:
Tekan Ctrl+klik gambar robot kalajengking, tahan
kemudian tarik dan lepaskan, maka hasil salinan pun akan
terlihat.

Atau jika Anda kesulitan menggunakan cara di atas, Anda
dapat menggunakan teknik Copy Paste.

d6 f;:FEJ.< ANIMASI J:logoT

Gam bar 5.6 Proses menyalin gambar robot kalojengking

11. Kecilkan ukuran gambar robot kalajengking hasil salinan

dengan Free Transform Tool •
12. Tata gambar robot kalajengking sedemikian rupa sehingga

enak dilihat.

Gambar 5.7 Tompilon toto Jetok gambor robot kolojengking

13. Buat Layer baru di atas Layer Scorpion kemudian beri nama
Text.

:tJ Q 0~ 5 10 15

0~• • Ill

•QD

Gambar 5.8 Tompilon Loyer Text

ANIMABI TULIBAN Qt:RJATUHAN d7

14. Klik Text Tool atau tekan huruf T pada keyboard.

15. Pada panel Properties, beri nilai jenis huruf dengan

.Mesquite std, type Text dengan Static Text, ukuran dengan

41, wama dengan Orange dan spasi A•V dengan 14.
Sedangkan lainnya biarkan pada posisi default.

Farni!y: '.,

Size: Letter ::p.:King: ,
Color:
Arttl·alias:

Gambar 5.9 Settingon Text Tool poda ponel Properties

16. Ketik kalimat sesuai keinginan Anda, penulis mengetik
kalimat "THE SCORPION KING".

Gambar 5.10 Mengetikkon kolimot "THE SCORPION KING"

17. Klik Selection Tool:~ , kemudian klik kalimat yang baru

saja Anda buat.

d8 f;:FE:K ANIMASI P090T

Gombar 5.11 Tompilon kolimot seteloh diseleksi dengon Selection Tool

18. Tekan Ctrl+B (Break Apart) untuk memecah kalimat
tersebut.

Gombar 5.12 Tompilon kolimot seteloh di Ctri+B (Break Aport)

19. Klik di luar kalimat untuk menghilangkan seleksi.

20. Masih dengan Selection Tool !]~:··.:, klik huruf pertama

(huruf T).
21. Tekan F8 pada keyboard untuk mengubahnya menjadi

simbol Movie clip dan beri nama t_mc.

Gombar 5.13 Tompilon huruf Tketiko diseleksi dengon Selection Tool

Marne: t_mc B_egistration: g~g OK
lype: Movie Clip Cancel
Folder: Libr arv root 000

[ Advanced ]

Gombar 5.14 Kotok dialog untuk menguboh huruf Tmenjodi simbol Movie clip

Gombar 5.15 Tompilon seteloh huruf Tmenjodi simbol Movie clip

ANIMASI TULISAN g~RuATUHAN d9

22. Dengan cara yang sama (seperti langkah 20), ubah semua
huruf menjadi simbol Movie clip. Yang perlu diingat,
pemberian nama simbol Movie clip tidak boleh sama.

Gam bar 5.16 Tampilan huruf G(sebagai huruf terakhir} yang sudah dibuat
menjadi simbol Movie dip

23. Jika semua huruf sudah Anda buat menjadi simbol Movie
clip, seleksi semua huruf dengan Selection Tool

Gambar 5.17 Tampilan ketika semua hurul yang sudah An do buat menjadi
simbol Movie dip diseleksi dengan Selection Tool

24. Di saat semua movie clip sudah terseleksi, silakan klik
Modify > Timeline > Distribute to Layers atau dengan me-
nekan Ctrl+Shift+D untuk menempatkan masing-masing
simbol Movie clip ke dalam layer sendiri-sendiri.

25. Klik dan tarik Layer Text (paling atas) ke dalam ikon Delete

:lit untuk menghapusnya. Kenapa dihapus, karena Layer

Text sekarang sudah tidak ada isinya sehingga tidak perlu
ada.

26. Blok Frame 50 pada semua Layer. Caranya, klik frame 50
pada Layer paling atas (Layer g_mc) kemudian tekan
tombol Ctrl (tahan) lalu klik satu per satu frame 50 pada
semua Layer.

27. Setelah itu, tekan F6 (Insert Keyframe).

40 t:FEK ANIMASI P090T

25

tl nc·-me D

tl i2_me .D
tl k_me
.D
tl n-rnc D

tl o2 __me D
tl ;__me
. Gil
tJ p_rrrc
.D
'tl _rnc
.D
.tJ 0 _me
.D
tl c-me .D
.D
tl $ _me .D
.D
·tl e_me . ;)
. II
·u h_rnc
. bi D
tl t _me
' ' rp,:__'.~
•tl Sc(Jtpion
tl E:ach~round

_J _j '11

Gombar 5.18 Tampilan masing-masing simbol Movie clip yang sudah
menempati layer sendiri-sendiri

'IV iiil 01 5 lO 15 20 25 30 35 40 45

l.l g__rnc .. .. D. 0
J n.:·~mc D. 0
t1 12_rnc 0
. . o. 0
1.1 k_rnc . D. 0
U r1__rno: 0
.. .. D. 0
J c•2_nK 0
tJ unc D. 0
U p_.rnc 0
U t_mc o. 0
tJ o_rnc 0
J c_mo: D. 0
J ~,_ftn.: 0
'1.1 0:_!11( D. 0
1.J h_mo: 0
.... .... D. 0
1,] t __nK D.

iJ D.
u
D.
D.

• • !!!! •

a .:r~··:.N!~:
• iiil D.

Gombar 5.19 Tampilan setelah frame 50 pada semua layer telah terseleksi dan telah di F6.

ANIMASI TULISAN Qt;:RJATUHAN 41

28. Klik frame 60 pada Layer t_mc kemudian tekan F6.

~:'~?[~~;m~;::;~":r~~~=======================---~(~~.~ ;,~

Gam bar 5.20 Tompilon !rome 60 podo loyer !_me

29. Klik kanan di antara frame 50 dan 60 pada Layer t_mc,
kemudian klik Create Classic Tween.

Gambar 5.21 Membuot clossie tween di ontoro !rome 50 don 60 loyer !_me

30. Masih pada Layer t_mc, klik frame 60 kemudian geser
hurufT ke bawah kira-kira 5 em.

I Geser ke bawah
W kira - kira 5 em

Gam bar 5.22 Menggeser huruf Tke bowoh kiro·kiro 5 em

31. Klik menu View > Rullers untuk menampilkan rulers.

Insert lvlodif!" Text Commands
Ctd+=
Ctrl+·

Sh1ft+W

Gambar 5.23 Proses menompilkon Rulers


Click to View FlipBook Version
Previous Book
Depresi No Way
Next Book
Free Online Webstore Hanya 1 Menit Membuat Toko Online