PTE Konsentrasi AV 2017 Adobe Flash CS3 Pipit Utami
2
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
Double klik shortcut yang ada pada dekstop pilih pilihan “Flash File (ActionScript 2.0)”,
program siap digunakan.
3
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
1
2
3
4
5
6
7
8
Keterangan:
1) Timeline
2) Frame
3) Layer
4) Tools
a) Selection
b) Subselection
c) Free Transform Tool
d) Text tool
e) Sroke Color
f) Fill Color, dll..
5) Panel
6) Library
7) Properties
a) Properties
b) Filter
c) Parameters
d) Ation
8) Scene
Pada saat pertama kali membuka program Adobe Flash, langkah pertama yang harus
dilakukan adalah mengatur dimensi resolusi dan frame rate yang akan dibuat.
5
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
2. Membuat Button dengan efek UP, Over dan Down
a. Klik pilihan “Rectangle Tool” yang berbentuk pada Tools area. Atur nilai “Retangle
Corner Radius” pada Properties Area sebesar 10 untuk memberikan lengkungan pada
sudut-sudut objek. Buat objek berbentuk seperti persegi panjang yang akan difungsikan
sebagai tombol.
6
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
b. Klik kanan objek yang dibuat kemudian pilih option “Convert to Symbol...” seperti yang
terlihat pada gambar dibawah:
c. Beri nama objek = “Tombol 1” lalu pilih Type = “Button”, klik OK.
7
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
d. Pilih objek yang telah dibuat, kemudian klik kanan pilih option “Edit in Place” seperti yang
terlihat pada gambar dibawah:
Tampilan Timeline area akan berubah menjadi seperti berikut:
Ada 4 frame yang disediakan pada symbol button, antara lain:
1) Up : merupakan layer untuk menampilkan bentuk objek pada saat cursor tidak berada
diatas objek.
2) Over : merupakan layer untuk menampilkan bentuk objek pada saat cursor berada diatas
objek.
3) Down : merupakan layer untuk menampilkan bentuk objek pada saat objek tombol
ditekan.
4) Hit : merupakan layer untuk mengatur area tekan tombol.
8
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
Membuat efek Over:
e. Klik kanan frame “Over” pada Layer 1, kemudian pilih option “Insert Keyframe” seperti
gambar dibawah:
f. Pilih (klik) frame “Over” kemudian pilih objek tombol. Kemudian rubah warna objek menjadi
warna yang lebih terang daripada tampilan awal objek seperti pada gambar dibawah:
9
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
Membuat efek Down:
g. Klik kanan frame “Down” pada Layer 1, kemudian pilih option “Insert Keyframe” seperti
gambar dibawah:
h. Pilih (klik) frame “Down” kemudian pilih objek tombol. Kemudian rubah warna objek menjadi
warna yang lebih gelap daripada tampilan awal objek seperti pada gambar dibawah:
i. Klik tombol ctrl+enter atau pilih menu Control Test Movie untuk mencoba hasil animasi
tombol yang dibuat.
j. Kita bisa menambahkan Text kedalam tombol dengan menggunakan cara yang sama atau
menambahkan efek-efek khusus menggunakan fasilitas “Filters”.
10
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
3. Membuat Animasi Objek Bergerak Menggunakan Motion Tween
a. Buka dokumen flash baru dengan menekan tombol ctrl+N. Buat objek seperti pada
gambar dibawah. Misal Kita akan menggeser objek yang telah Kita buat tersebut untuk
bergeser di tengah.
b. Klik kanan frame 10 pada Layer 1 kemudian pilih option “Insert Frame”.
11
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
c. Klik kanan pada area frame gambar tadi kemudian pilih option “Create Motion Tween”.
Kemudian “Insert Keyframe” pada frame 10.
d. Posisikan (klik) frame 10, kemudian geser objek ke tengah. Test Movie untuk melihat hasilnya.
e. Untuk menambahkan animasi-animasi lanjutan, Kita dapat menambah keyframe-keyframe pada
frame di depannya, kemudian menggeser atau merubah objek yang akan di-animasi-kan.
12
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
4. Membuat Animasi Transparan Menggunakan Efek Alpha
a. Buka dokumen flash baru dengan menekan tombol ctrl+N. Buat objek text seperti pada
gambar dibawah. “Convert to Symbol” dengan nama “Tulisan 1”, kemudian buat objek
bergerak bergeser pada empat titik keyframe menggunakan metode pada latihan
sebelumnya.
13
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
b. Posisikan (klik) pada titik Keyframe pertama, klik objek text kemudian rubah parameter
“Color” pada “Properties” area menjadi “Alpha”. Ubah nilai Alpha menjadi 0%.
c. Lakukan juga proses b diatas pada Keyframe keempat. Kemudian test movie untuk melihat
bagaimana hasilnya.
14
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
5. Membuat Animasi Masking
Animasi masking ini sangat sederhana dan mudah. Prinsip kerjanya objek pada layer
masked hanya akan kelihatan jika melewati objek yang ada di layer utama.
a. Buka dokumen flash baru dengan menekan tombol ctrl+N kemudian atur nilai Framerate-
nya sebesar 31fps. Buat objek text seperti pada gambar dibawah.
15
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
b. Buat layer baru kemudian buat objek seperti pada gambar dibawah:
c. Panjangkan layer kedua buah objek sampai dengan layer 30 dengan memilih layer 30 pada
kedua layer, klik kanan kemudian pilih option “Insert Frame”.
16
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
d. Buat efek motion tween pada objek kotak pelangi, kemudian atur agar objek kotak
pelangi melewati bergerak melewati objek tulisan.
e. Posisikan layer tulisan agar berada diatas layer kotak pelangi.
17
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
f. Klik kanan layer tulisan (Layer 1) kemudian pilih option “Mask”. Test Movie untuk melihat
bagaimana hasilnya.
18
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
6. Membuat Animasi Guide
Animasi Guide juga cukup sederhana dan mudah. Prinsip kerjanya adalah bagaimana
sebuah objek bergerak mengikuti jalur yang sudah ditentukan.
a. Buka dokumen flash baru dengan menekan tombol ctrl+N kemudian atur nilai Framerate-
nya sebesar 31fps. Buat objek gambar seperti pada gambar dibawah.
b. Berikan efek motion tween pada objek tersebut agar bergerak dari ujung kiri layar ke
ujung kanan layar seperti pada gambar berikut :
20
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
c. Klik kanan Layer 1 kemudian pilih option “Guide” seperti gambar berikut:
d. Klik frame “Guide : Layer 1”, posisikan pada frame 1 kemudian pilih “Pencil Tool” pada
tools area.
21
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
e. Buat guide track, dengan catatan awal dan akhir motion harus sama dengan motion
tween yang telah dibuat sebelumnya. Test movie untuk melihat bagaimana hasil animasi
yang dibuat.
22
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
7. Membuat Animasi didalam Object Place
Animasi dalam object place adalah animasi yang bekerja dengan memanfaatkan layer-
layer dan frame-frame didalam place movie lip sehingga tidak memenuhi layer di scene
paling depan.
a. Buka dokumen flash baru dengan menekan tombol ctrl+N kemudian atur nilai Framerate-
nya sebesar 31fps. Buat objek gambar seperti pada gambar dibawah.
b. Convert to Symbol objek yang telah dibuat sebagai Movie Clip, kemudian beri nama
“Sayap”.
c. Klik kanan objek lalu pilih edit in place. Atur pusat objek pada pangkal sayap, kemudian
buatlah timeline pada layer seperti pada gambar dibawah ini:
23
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
d. Pilih keyframe pada frame 4, kemudian kecilkan bentuk sayap mendekati pusat objek
yang berada di pangkal sayap tadi. Kemudian test movie untuk melihat bagaimana
hasilnya.
e. Posisikan layar pada “Scene 1” kemudian kopi objek (ctrl-alt) sayap sehingga ada 2 sayap
di layar.
f. Pilih salah satu objek, kemudian pilih panel “Transform”, rubah textbox skew vertically
menjadi 180° klik enter.
24
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
g. Jejerkan objek berdekatan antar poros sayapnya, kemudian Test Movie untuk melihat
bagaimana hasilnya.
h. Kita dapat membuat movie kupu-kupu tadi bergerak seperti terbang dengan
memanfaatkan fasilitas “Guide” yang telah Kita pelajari sebelumnya.
25
PTE Kons. AV 2017
Pengenalan dan Pembuatan Animasi Flash Sederhana
Adobe Flash CS3
PENUGASAN!
1. SECARA MANDIRI MEMPELAJARI FITUR-FITUR LAIN FLASH UNTUK PENGEMBANGAN
MEDIA PEMBALAJARAN.
2. BUATLAH MEDIA PEMBELAJARAN DENGAN FLASH YANG MEMUAT:
a. KONTEN MATERI
b. QUIZ
3. DIBUAT DENGAN MENERAPKAN PRINSIP-PRINSIP MULTIMEDIA DAN MERUPAKAN
HASIL ANALISIS KEBUTUHAN.
4. TUGAS BERSIFAT INDIVIDU DAN DIKERJAKAN DALAM RENTANG 3 S.D 17 APRIL 2017,
DIKUMPUL 18 APRIL 2017 PUKUL 20.00 MELALUI BESMART.
5. FILE YANG DIKUMPULKAN BERBENTUK APLIKASI, LANGSUNG DAPAT DIPUTAR TANPA
ADA APLIKASI FLASH TERINSTAL.