Dokumen ini menjelaskan teknik dan langkah-langkah dalam menggunakan alat desain untuk membuat animasi dan objek di aplikasi Flash, termasuk transformasi warna gradasi, pembuatan objek pensil, serta pengolahan layer dan frame. Terdapat penjelasan tentang simbol dan instance, serta penggunaan berbagai teknik animasi seperti frame by frame, motion tween, dan motion guide. Tutorial ini bertujuan untuk memberikan pemahaman mendalam tentang pembuatan animasi dan elemen grafis dalam Flash.

1. Pertemuan 6
WARNA GRADASI
MENGIMPORT SYMBOL, INSTANCE DAN LIBRARY
PENGOLAHAN LAYER & FRAME
ANIMASI

2. WARNA GRADASI

3. Transformasi Warna Gradasi
Transformasi warna gradasi artinya kita dapat
mengatur fill gradasi seperti memindahkan titik
pusat, merotasi dan mengatur panjang gradasi.

4. Langkah-langkah transformasi
 Klik Poly Star Tool
 Pada property inspector klik Options, maka
akan muncul dialog Setting.
 Klik pilihan style lalu pilih star, number of
sides : 5, star point size:0.50
 Klik Selection Tool lalu pilih objek bintang

5. Langkah-langkah transformasi
Tampilkan panel Color Mixer lalu pilih Radial pada
Fill Style
Klik Gradient Transform Tool, lalu pilih fill gradasi
radial. Hasilnya bingkai transform akan tampil
seperti gambar berikut :

6. Latihan
Bagaimana membuat Objek Pensil berikut :

7. Membuat Objek Pensil
Buka dokumen baru
Buat layer baru bernama Ujung
Klik Pen Tool pada Toolbox
Atur warna stroke dan Fill menjadi Hitam
Buat objek segitiga di dlm stage
Klik Selection Tool
Tarik garis bagian atas hingga melengkung
Pilih Free Transform Tool

8. Membuat Objek Pensil
Putarlah ujung pensil itu dengan mengklik dan men-
drag salah satu sudut garis yang muncul pada objek
itu.
Klik Gradient Transform Tool
Klik Color Mixer dan atur warnanya seperti berikut :

9. Membuat Objek Pensil
Kunci Layer “ujung” dgn menklik ikon gembok
Buat layer baru dan beri nama “tengah”
Klik Pen Tool dan buat objek spt di bawah ini:

10. Membuat Objek Pensil
Buat layer baru dan beri nama “batang”
Klik Pen Tool
Buat objek batang pensil shg menghasilkan gambar
spt berikut :

11. Mengimport Symbol, instance, & Library

12. Pengertian
Simbol adalah objek induk yg dpt digunakan
berulang kali pada movie flash.
Instance adlah duplikat atau kloning dari objek
induk tersebut.
Library adalah panel yg berisi kumpulan simbol

13. Perilaku simbol
Movie Clip, berperilaku sbg animasi atau movie
flash
Button, berperilaku sbg tombol yg dpt diklik dalam
sebuah animasi atau movie
Graphic, berperilaku sbg gambar biasa.

14. Mengimport gambar ke Library
Siapkan dokumen baru
Klik File > Import ti Library .
Masukkan gambar yg akan di-import, hasilnya
spt gambar berikut :
Gambar yg telah dijadikan simbol akan di-
group secara otomatis

15. Pengolahan Layer dan Frame

16. Layer
Layer merupakan semacam lapisan plastik
transparan yang dapat kita letakkan bertumpukan
dengan masing-masing plastik transparan tersebut
mengandung elemen tersendiri, sehingga
memudahkan kita untuk mengorganisasikannya.

17. Frame
Frame merupakan adegan, berarti satu frame pada
movie anda melambangkan satu potongan adegan,
yang akan menyusun keseluruhan animasi atau
movie anda.

18. Keterangan Tentang Frame
 Keyframe dengan actions, keyframe tsb akan
memanggil sebuah kode yang kita tentukan dari modul
yang tersedia, diantaranya yakni, go to, play, get url,
stop, tell target, if frame is loaded, dll.
 Frame dengan motion tween, berarti bahwa
diantara dua keyframe, Flash dapat mengambil
perhitungan otomatis secara gerak dan skala tentang isi
dari frame yang ada di antaranya dan akan menciptakan
sekuens gerak atau animasi. Motion tween ini hanya bisa
dilakukan untuk obyek berupa symbol atau grup dan hanya
dapat berlaku pada satu obyek setiap layer.

19. Keterangan Tentang Frame
 Frame dengan shape tween, berarti bahwa tweening
dilakukan untuk obyek diantara dua keyframe berupa
morphing dari benda yang bukan symbol atau group. Shape
tween hanya berlaku untuk obyek yang telah broken apart,
ctrl + b shortcut.
 Frame kosong , kalau setelah sebuah keyframe terdapat
rangkaian frame yang kosong, maka movie akan
menampilkan image atau obyek terakhir pada keyframe
sebelumnya. Hal ini dapat anda terapkan untuk membuat
sebuah background yang statis dengan animasi pada layer
bagian atasnya.

20. Keterangan Tentang Frame
 Insert Blank Keyframe, kita menyelipkan sebuah
keyframe kosong, berguna untuk menghentikan animasi
pada layer tersebut.
 Reverse Frame , berarti membalikkan urutan frame.
Sangat berguna untuk menimbulkan kesan reversi,
misalnya sebuah tabel muncul perlahan dari bawah ke atas,
setelah di klik anda menginginkan efek bahwa tabel
tersebut perlahan kembali ke bawah. Anda tidak perlu
membuat lagi motion tween yang baru cukup dengan copy
frames yang mengandung sekuens muncul, paste pada
tempatnya, kemudian highlight dan pilih reverse
frames...done.

21. Keterangan Tentang Frame
 Sound Frame , pada setiap keyframe dapat anda sertakan
suara/sound, dengan double klik, pilih frame properties,
kemudian pilih tab sound. Sebelumnya anda telah
mengimpor file sound dengan ekstensi wav. Semacam
grafik akan muncul untuk melambangkan adanya sound
pada frame tersebut.
 Insert Frame, kita dapat menyelipkan rangkaian frame
sekaligus dengan memilih frame tab sekaligus, katakanlah
dari timeline 10 hingga 25, dari layer 1 hingga 3, kemudian
setelah highlight muncul, kita klik kanan dan pilih insert
frame, there you go.

22. Animasi

23. Animasi Frame by Frame
Konsep animasi frame by frame adalah
menampilkan gambar-gambar yg ada pada tiap
frame satu per satu shg tampak seperti sebuah
gerakan animasi.
Contoh ; menampilkan tulisan WELCOME yg
muncul satu per satu
Langkah-langkah :
File : New
Pilih Text Tool utk menuliskan teks
Ketik huruf “W”

24. Animasi Frame by Frame
Perhatikan di Frame 1 akan muncul bulatan yg
menunjukkan adanya keyframe yaitu kunci untuk
berpindah dari satu frame gerakan (animasi) ke
frame animasi berikutnya.
Posisikan kursor di frame ke 10. Frame ke 10 akan
gelap.
Sisipkan frame kunci dengan “Insert Keyframe”.

25. Animasi Frame by Frame
Kembalilah ke mode penyutingan teks dengan
meng-klik Text Tool di Tools.
Ketik huruf “e”.
Lakukan hal yg sama utk huruf selanjutnya.
Sehingga menghasilkan tampilan tulisan “Welcome”
secara animasi, spt tampilan flash berikut ini:
Animasi frame

26. Animasi Motion Tween
Dengan Motion Tween , gerakan animasi yg
dihasilkan akan kelihatan lebih halus.
Anda cukup menyediakan objek dlm kondisi mulai
bergerak di frame pertama dan satu lagi objek dlm
kondisi selesai bergerak di frame terakhir
Yang dapat di-Tween adalah perpindahan posisi atau
gerakan (Motion Tweening) dan perubahan bentuk
(Shape Tweening)

27. Animasi Motion Tween
File: New
Gambarlah pesawat dengan teks karakter Q dari font
Wingdings, perbesar hingga 74 point misalnya dan
letakkan di ujung kiri atas layar.
Klik di frame ke-30 (atau bisa lebih jauh lagi).
Sisipkan keyframe dengan “Insert KeyFrame” atau
kunci fungsi F6. Frame ke-30 akan memiliki bulatan
keyframe.

28. Animasi Motion Tween
Dengan tetap di frame ke-30, pindahkan posisi
pesawat ke ujung kanan bawah layar.
Setelah selesai memindah posisi pesawat,
perhatikan bahwa bila frame ke-1 di-klik, posisi
pesawat berada di ujung kiri atas layar. Kalau
frame ke-30 di-klik, posisi pesawat ada di ujung
kanan bawah layar. Sementara antara frame ke-
1 dan 30, hanya ada frame-frame kosong, yang
bila di-klik tidak akan menunjukkan gambar
apa-apa.

29. Animasi Motion Tween
Klik di salah satu frame kunci (bisa di frame ke-
1 atau frame ke-30). Sambil menahan tombol
Shift, klik frame kunci berikutnya, sehingga
kedua frame kunci tsb terpilih (frame ke-1 dan
frame ke-30 terpilih), yang ditandai dengan
blok hitam pada kedua frame kunci tsb.
Pilihlah “Insert:Create Motion Tween”.
“Motion Tween” ditandai dengan munculnya
garis berpanah yang ditarik dari frame pertama
sampai frame kunci berikutnya.

30. Animasi Motion Tween
Bila di-klik di antara kedua frame kunci tsb,
misalnya frame 20, layar akan menunjukkan posisi
pesawat yang sedang bergerak dari kiri ke kanan.
Berarti animasi sudah betul.
Sehingga menghasilkan animasi spt berikut :
Motion Tween

31. Motion Guide
Motion guide digunakan utk membuat animasi objek
bergerak mengikuti alur garis path.
Langkah- langkah :
 Buat dokumen baru
 Buat objek bola
 Letakkan bola di kiri bawah stage
 Pada panel Timeline di Frame 20, tambahkan Insert
Keyframe.

32. Motion Guide
 Pindahkan objek bola ke kanan atas.
 Sorot Frame ke 19 hingga frame 1, lalu pilih
Interpolate: Motion melalui property inspector
 Pilih Frame 1, klik Insert > Timeline > Motion
Guide.

33. Motion Guide
 Klik pada Guide:Layer 1, lalu klik Pencil Tool.
pada pilihan option, tekan Smooth utk membuat
garis lengkung yg lebih halus
 Buat garis melingkar dimulai dari objek bola paling
kiri bawah ke kanan atas.

34. Motion Guide
 Pada Layer1 klik frame 20 lalu pindahkan objek bola
yg sebelum berada di kanan atas ke ujung garis yg
baru. Pastikan bagian tengah objek bola tepat berada
di ujung garis. Hasilnya spt berikut :
motion guide

35. Blog Kuliah
www.zheira83.wordpress.com