Adobe Flash PTE Kons. AV 2017 Pengenalan dan Pembuatan Animasi Flash Sederhana Adobe Flash CS3 7. Membuat

Embed Size (px)

Text of Adobe Flash PTE Kons. AV 2017 Pengenalan dan Pembuatan Animasi Flash Sederhana Adobe Flash CS3 7....

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 :

19

PTE Kons. AV 2017

Pengenalan dan Pembuatan Animasi Flash Sederhana

Adobe Flash CS3

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 ko