Upload
erik-kuswanto
View
182
Download
13
Embed Size (px)
Citation preview
1 | t u t o r i a l b y e r i k
Tutorial Flash Cs 3 untuk Orang Awam
Full Imagination
With Adobe Flash Cs 3
2 | t u t o r i a l b y e r i k
Kata Pengantar
Dalam kehidupan sehari hari kita tidak pernah lepas dari yang namanya
gerakan baik itu gerakan tubuh kita , pohon yang yertiup angin dan lain lain
nah gerakan itulah yang disebut dengan animasi.
Biasanya kita sering melihat contoh animasi animasi kartun yang ada di tv
nah kelihatanya animasi itu sulit untuk dibuat tapi anggapan itu salah
karna hanya bermodalkan tekat dan keinginan yang kuat kita bisa
membuatnya.
Adobe flash CS 3 adalah software yang digunakan untuk membuat web
interaktif, E-card, menu interaktif dan salah satunya adalah digunakan
untuk membuat animasi kartun , karera kelengkapan vitur yang disediakan
adobe flash CS 3sehingga pembuatan animasi kartun menjadi mudah.
Dalam E-book ini anda akan mempelajari cara cara pembuatan beberapa
animasi.
3 | t u t o r i a l b y e r i k
Daftar Isi
Cover . ................................................................................................... 1
Kata Pengantar .................................................................................. 2
Daftar isi .............................................................................................. 3
1. Pengenalan Sofware .................................................................. 4
1.1 Mengenal Jendela Kerja ................................................... 4-5
1.2 Mengenal Fungsi Tool ....................................................... 5-8
1.3 Mengenal Time Line .......................................................... 8
1.4 Mengenal Panel ................................................................... 9
1.4.1 Mengenal Panel Properties ..................................... 9
1.4.2 Mengenal Panel Liberary ......................................... 9
2. Tutorial ........................................................................................... 10
a. Animasi Alpha ...................................................................... 10
b. Animasi Burung Terabang ............................................... 11
c. Animasi Rotasi ...................................................................... 13
d. Animasi Motion Shape ....................................................... 13
e. Animasi Teks ........................................................................ 14
f. Tombol Animasi .................................................................... 15
g. Efek Gelombang Air ............................................................ 17
4 | t u t o r i a l b y e r i k
1. Pengenalan Program adobe flash cs 3
Sebelum kita memulai belajar dan berkreasi dengan adobe flash cs 3 /
macromedia flah sebaiknya kita mengenal adobe flash cs 3 / macromedia
flash dan untuk apa fungsinya ter lebih dahulu.
adobe flash cs 3 / macromedia flash adalah sebuah program yang bisa kita
gunakan untuk membuat animasi kartun ( 2D ) , Membangun website,
membuat game flash, membuat pembelajaran ilerning, pembelajaran
interaktif dan presentasi, serta penducumentasian suatu lembaga /
instansi.
1.1Mengenal Jendela Kerja
1. Mengenal Menu Dasar
Berikut merupakan tampilan standar jendela kerja Adobe Flash CS3
Professional, saat Anda memulai membuat file baru.
( Gambar area kerja adobe flash cs 3 )
Jendela kerja Adobe Flash CS3 terdiri atas :
• Menubar
Berisi kumpulan menu atau perintah-perintah yang digunakan dalam
Adobe Flash CS3.
5 | t u t o r i a l b y e r i k
• Toolbar
Toolbar merupakan panel berisi berbagai macam tool. Tool-tool tersebut
dikelompokkan menjadi empat kelompok : Tools
; berisi tombol-tombol untuk membuat dan mengedit gambar, View; untuk
mengatur tampilan lembar kerja, Colors; menentukan warna yang dipakai
saat mengedit, Option;
1.2 Mengenal fungsi tool pada Adobe Fash Cs 3
Gambar yang terlihat di bawah ini adalah gambar dari toolbox adobe
flash cs 3 dan saya akan jelaskan fungsi dari masing masing tool nya.
Beriku penjelasannya secara detil..
1.
Arrow tool atau disebut juga selection tool berfungsi untuk memilih
atau menyeleksi suatu objek.
2.
6 | t u t o r i a l b y e r i k
Subselection toll berfungsi untuk menyeleksi bagian objek lebih detail
dari pada selection tool.
3.
Free transform tool berfungsi untuk mentransformasikan objek
terseleksi
4.
Gradien Transform tool berfungsi untuk mentransformasikan warna
dari fill objek yang terseleksi.
5.
Lasso tool digunakan untuk melakukan seleksi dengan menggambar
sebuah garis seleksi.
6.
Pen tool digunakan untuk menggambar garis dengan bantuan titik-
titik bantu seperti dalam pembuatan garis, kurva atau gambar.
7.
A
Text tool digunakan untuk membuat objek teks
8.
line tool digunakan untuk menggambar garis
7 | t u t o r i a l b y e r i k
9.
rectangular tool digunakan untuk menggambar bentuk persegi
10.
pencil ttol digunakan untuk membuat garis
11.
brush tool digunakan untuk menggambar garis-garis dan bentuk
bebas
12.
digunakan untuk mengubah warna garis, lebar garis dan style garis
13.
paint bucket tool digunakan untuk mengisi area-area kosong
14.
eyedropper tool digunakan untuk mengambil sampel warna dari
gambar atau objek
15.
eraser tool digunakan untuk menghapus objek
16.
handtool digunakan untuk menggeser tampilan stage tanpa mengubah
pembesaran
17.
8 | t u t o r i a l b y e r i k
zoom tool digunakan untuk memperbesar atau memperkecil tampilan
stage
18.
stroke color digunakan untuk memilih atau memberi warna pada
suatu garis
19.
fill color digunakan untuk memilih atau memberi warna pada suatu
objek
1.3 Mengenal Time Line
Timeline atau garis waktu merupakan komponen yang digunakan
untuk mengatur atau mengontrol jalannya animasi. Timeline terdiri dari
beberapa layer. Layer digunakan untuk menempatkan satu atau beberapa
objek dalam stage agar dapat diolah dengan objek lain. Setiap layer terdiri
dari frame-frame yang digunakan untuk mengatur kecepatan animasi.
Semakin panjang frame dalam layer, maka semakin lama animasi akan
berjalan.
1.4 Mengenal Panel
Beberapa panel penting dalam Adobe Flash CS3 Professional,
diantaranya panel: Properties, Filters & Parameters, Actions,
Library, Color dan Align & Info & Transform
9 | t u t o r i a l b y e r i k
1.4.1 Mengenal Panel Propertis
Panel Properties akan berubah tampilan dan fungsinya mengikuti
bagian mana yang sedang diaktifkan. Misalnya Anda sedang mengaktifkan
Line tool, maka yang muncul pada jendela properties adalah fungsi-fungsi
untuk mengatur line/garis seperti besarnya garis, bentuk garis, dan warna
garis.
1.4.2 Mengenal panel Leberarry
Panel Library mempunyai fungsi sebagai perpustakaan
simbol/media yang digunakan dalam animasi yang sedang dibuat. Simbol
merupakan kumpulan gambar baik movie, tombol (button), sound, dan
gambar statis (graphic).
10 | t u t o r i a l b y e r i k
2. Tutorial
a. Membuat Animasi Alpha
di bawah ini kita akan membahas bagai mana membuat
animasi alpha dengan adobe flash CS3 Professional, dan biasanya
animasi ini sering digunakan untuk memberikan efeck transisi
antara foto satu dengan yang lainnya.
Langkah – langkah nya adalah sebagai berikut
1. Buka Adobe Flash CS 3 kemudian import image di bawah ini
pada menu bahan -> alpha yang terdapat pada CD Tutorial.
2. Buat dua layer sebagai tempat untuk memisahkan foto satu
dengan yang lainnya.
3. Letakkann foto satu pada layer 1, pada frame pertama (1) dengan
cara mendrag foto dari panel leberary ke area kerja
4. Lakukan insert keyframe pada frame ke 5 dengan cara klik kanan
pada frame ke 5 kemudian pilih insert keyframe atau menekan
tombol f6 pada keyboard.
5. Lakukan insert keyframe juga pada frame ke 10 dan 15.
Kemudian beri animasi motion tween dengan cara klik frame ke
1,5,dan 10 kemudian klik kanan lalu pilih creat motion tween.
11 | t u t o r i a l b y e r i k
Apa bila motion tween sudah aktif maka Gambarnya sebagai
berikut
6. Klik objek yang terdapat pada frame ke 1 dan pada frame ke 15,
kemudian buka panel properties
Pada option color ganti yang semula none menjadi alpha dan
nilai alphanya 0%.
7. Masukan gambar ke dua pada layer ke dua dan pada frame
pertama.
8. Geser frame pertama pada layer ke dua ke frame ke 20. Lalau
lakukan insert keyframe pada frame ke 25,30,dan 35 serta beri
motion tween. Maka hasilnya seperti gambar dibawah ini.
9. Kemudian pada frame ke 20 dan 35 , klik objek yang ada pada
frame tersebut lalu type colornya memjadi alpha dan nilai
alphanya 0%.
10. Kemudian tekan ctrl + Enter untuk memutar animasi.
b. Membuat Animasi burung terbang.
Pada kali ini kita akan membahas tentang bagai mana cara
membuat aniasi burung terbang.
Langkah – langkah nya sebagai berikut.
12 | t u t o r i a l b y e r i k
1. Aktifkan Adobe Flash, kemudian import foto burung yang ada
pada Folder bahan -> animasi burung yang terdapat pada CD
Tutorial.
2. Buat simbol baru dengan menekan tombol ctrl + f8 pada
keyboard
Pada kotak pilihan name ketikan animasi burung dan pada
typenya pilih Movie clip kemudian klik OK
3. Buka panel lebrary lalu cari simbol movie clip dengan nama
animasi burung yang sudah kita buat tadi kemudian klik kanan
lalu pilih edit.
4. Pada frame ke 1 pada layer satu yang ada pada simbol masukan
( drag) foto twiterbirtd 01 kemuadian pada frame kedua
masukan tweeter bird 02 terus berurutan hingga pada frame ke
lima masukan foto tweeter bird 01 lagi.
5. Aktifkan union sceen untuk mempermudah kita dalam
meletakan objek karena dengan union skin ini objek sesudah
dan sebelunya akan terlihat transparan. Gambarnya seperti
dibawah
Icon union skin
Tampilan saat union skin aktif
13 | t u t o r i a l b y e r i k
6. kemudian tekan CTRL + Enter untuk memutar animasi.
c. Animasi Rotasi
kali ini kita akan membahas tentang cara membuat animasi
rotasi dengan adobe Flash CS3 Profesional.
Langkah – langkahnya adalah sebagai berikut.
1. Buatlah objek bintang dengan menggunakan PollyStar Tool.
2. Gambarkan objek bintang pada area kerja (stage)
3. Kemudian lakukan insert keyframe pada frame ke 30. Dan
kemuadian beri Motion tween. Jika motion tween berhasil maka
gambarnya seperti dibawah ini.
4. Kemudian aktifkan panel properties
Pada option Rotate rubah yang semula none memjadi CCW.
5. Tekan CTRL+ Enter untu memulai animasi.
d. Animasi Motion Shape
kali ini kita akan membahas tentang bagaimana caranya
membuat animasi motion shape, animasi motion shape ini
adalah animasi yang digunakan untuk membuat sebuah objek
berubah kedalam bntuk yang lain misalkan dari bentuk kotak
berubah kedalam bentuk bintang.
14 | t u t o r i a l b y e r i k
Langkah – langkahnya adalah sebagai berikut.
1. Aktifkan Flash CS3 , Kemudian
2. Gambarlah obyek kotak pada frame pertama
3. Kemudian klik pada frame ke satu kemudian klik kanan lalu
pilih creat motion shape.
4. Pada frame ke 15 lakukanlah insert blankeyframe
5. Kemudian gambarkan obyek lingkaran pada stage.
6. Kemudian pada frame ke 30 lakukan insertblank keyframe
7. Dan gambarkan obyek bintang pada area stage.
Dan apabila animasi motion shape sudah aktif maka gambarnya akan
seperti di bawah ini
e. Animasi Teks
kali ini kita akan mempelajari bagaimana cara membuat animasi teks.
Langkah langkahnya sebagai berikut
1. Buaka adobe flash cs3
2. Ketikkan teks “ Animasi Teks” pada area stage
3. Klik teks “ Animasi Teks “ kemudian klik kanan lalu pilih
break apart
4. Kemudian sleksi kembali teks yang sudah kita break apart
5. Setelah itu klik kanan kemudian pilih distrube to layer
Maka tampilan distrube to layer akan seperti gambar di
bawah ini
15 | t u t o r i a l b y e r i k
6. Setelah itu geser frame atu pada hutuf sat frame lebih banyak
dari pada layer a begitu juga dengan layer i dan seterusnya
sehinggsa berbentuk anak tangga seperti gambar di baah ini.
7. Tekan tobol CTRL + ENTER pada keyboard untuk
memjalankan animasi.
f. Tombol Animasi
Kali ini kita akan mempelajari bagai mana cara membuat tombol
animasi.
Langkah langkahnya adalah sebagai berikut:
1. Aktifkan Adobe flash cs 3
2. Buka file tombol gelombang yang terdapat pada cd Interaktif
3. Apada panel liberari drag simbol button 2 dan simbol muvie
clip kedalam stage
4. Klik gamda pada tombol 2 untuk masuk kedalam tombol
5. Setelah kita masuk kedalan simbol tombol 2 selanjutnya kita
akan melakukan insert keyframe pada frame over dan down
6. Kemudian pada frame over klik obyek garis lingkaran yang
ada pada frame over kemudian tkan f8 pada keyboard untuk
16 | t u t o r i a l b y e r i k
mengimport obyek tersebut keedalam simbol. Kemudian
pada kotak pilihan convert to simbol kita pilih muvie clips
dan pada registration kita pilih yang di tengah
7. Kemudian klik ganda pada garis lingkaran yang ada pada
frame over untuk masuk kedalam simbol muvie clip
8. Kemudian pada frame ke ke 5 dan 10 kita lakukan insert
keyframe.
9. Pada frame ke 1 dan 5 kita beri motion tween
10. Pada frame ke 5 ubah bentuk garis lingkaran menjadi
oval
11. Setelah itu kita keluar dari simbol lingkaran dan masih di
simbol tombol
12. Kita klik obyek anak panah yang ada pada frame over
kemudian covert obyek tersebut kedalam simbol movie clip
13. Kemudian masuk kedalam simbol movie clip anak panah
tersebut dan pada frame ke 1 kita beri motion tween dan
padframe ke 5 dan 10 lakukan insert keframe.
14. Pada frame ke 5 letakkan obyek anak panah agak ke
depan
15. Tekan CRTL + ENTER untuk memutar animasi.
g. Efek Gelombang Air
pada kali ini kita akan mempelajari bagaimana cara
membuat efek gelombang air pada gambar bitmap.
Langkah langkanya sebagai berikut
1. Aktifkan flash CS3
2. Buka file efek gelobang yang ada pada cd interaktf
17 | t u t o r i a l b y e r i k
3. Pada panel liberary terdapat 2 obye yaitu image VEDC dan
gambar sebuah lingkaran dengan nama simbol 1
4. Kemudian buatlah 3 layer yaitu layer 1,2, dan 3
5. Pada layer ke 1 masukan image VEDC lalu copy image
tersebut dan paste pada layer ke 2
6. Kemudian pada layer ke 3 masukan simbol satu
7. Kemudian pada layer ketiga ubah ukuran image seperti di
bawah ini
8. Pada layer ke 1 dan 2 dan pada frame ke 50 lakukan insert
frame
9. Dan pada layer ke 3 lakukan insert keyframe pada layer ke
50
10. Pada layer 3 pada frame ke 50 perbesar ukuran
obyeknya dan beri motion tween
11. Tekan tobol CTRL + ENTER untuk memutar animasi.