modul praktikum adobe flash kelas xi

2

Membuat Animasi Frame by Frame

Animasi frame by frame dibuat dengan cara menggambar animasi per frame satu per satu.

Berikut ini adalah animasi yang dapat dibuat dengan menggunakan teknik frame by frame.

Teknik ini sama halnya dengan prinsip pembuatan animasi straight ahead.

A. Membuat Animasi Bola

Langkah-langkah praktikum:

1. Buat dokumen baru dengan tipe file Action Script 2.0

2. Klik Oval Tool untuk membuat bentuk lingkaran

3. Buat lingkaran pada area kotak putih dengan warna gradasi seperti di bawah ini

3

4. Klik 2x pada tulisan Layer 1 dan ganti nama layer menjadi bola

4

5. Tambahkan layer baru dan ubah namanya menjadi dinding

6. Klik layer dinding dan buat sebuah garis horizontal di bawah posisi bola dengan

menggunakan Line tool

5

7. Klik kanan pada frame ke 15 pada layer dinding, pilih Insert Frame untuk membuat

frame yang sama dengan frame 1 sebanyak 15 frame.

8. Sekarang kita akan membuat gerakan bola masuk dari tepi kiri layar putih, masuk

dan memantul mengenai garis datar.

Klik layer bola dan pindahkan posisi bola ke tepi kiri layar dengan menggunakan

Selection Tool

6

9. Klik kanan pada frame kedua pada layer bola, pilih Insert Keyframe untuk membuat

frame yang sama dengan frame sebelumnya.

Geser posisi bola mendekati bidang garis datar.

10. Ulangi langkah nomor 9 sampai dengan frame ke 6

Pada frame ke-6 bola sudah menyentuh garis datar. Ubah bentuk bola menjadi

melebar ke samping

7

11. Ulangi langkah nomor 9 dengan posisi bola memantul kembali ke atas

Putar bola dengan menggunakan Free Transform Tool seperti posisi di bawah

ini

12. Insert Keyframe dan geser bola ke atas sampai pada frame ke-15

8

13. Tekan tombol Ctrl + Enter untuk melihat hasilnya

Soal Tantangan!

Lanjutkan animasi bola di atas dan modifikasi menjadi animasi dengan urutan gerak

seperti berikut!

Tampilan awal :

13

Animasi motion tween

Animasi motion tween merupakan animasi yang dibuat di aplikasi Adobe Flash dengan cara

menentukan keyframe awal dan keyframe akhir saja. Frame di antara keyframe awal dan

keyframe akhir akan dibentuk/dikerjakan oleh Flash. Teknik ini sama dengan prinsip

pembuatan animasi yakni Pose to Pose.

Berikut ini adalah animasi stickman berjalan dan mobil yang dapat dibuat dengan

menggunakan teknik ini.

A. Animasi Stickman

Langkah-langkah pembuatan :


2. Klik Oval Tool untuk membuat bagian kepala dan Line tool untuk membuat bagian

badan, tangan dan kaki.

Untuk membuat garis, jangan lupa untuk mengatur ketebalan garis sebesar 8 pt dan

warnanya hitam pada tab Properties

14

3. Blok stickman dengan Selection tool dan klik kanan. Lalu pilih Convert to Symbol

Beri nama objek stickman sesuai dengan keinginanmu, pilih type symbol Graphic

4. Klik 2x pada stickman. Kita masuk pada pembuatan gerakan jalan di tempat,

15

5. Dengan selection tool ubah bentuk kaki dan tangan stickman seperti di bawah ini

sampai pada frame ke – 6

Frame 1

Frame 2

Frame 3

Frame 4

16

Frame 5

Frame 6

17

6. Setelah gerakan jalan terbentuk klik Scene 1 untuk kembali ke tampilan awal

7. Pada frame 1 geser posisi stickman ke tepi kiri layar

8. Klik kanan pada frame ke 30, pilih Insert Keyframe

Pindahkan posisi stickman ke kanan layar.

9. Klik kanan pada sembarang frame di antara frame 1 dan frame 30, pilih Create

Motion Tween.

18

Tekan tombol Ctrl + Enter untuk melihat hasilnya. Hasilnya stickman berjalan dari

kiri ke kanan layar.

Soal Tantangan

Modifikasi animasi stickman di atas dengan cerita sebagai berikut :

1. Stickman berjalan dan menemui sebuah batu

2. Stickman lalu berpikir

3. Stickman mendapatkan sebuah ide

19

4. Stickman lalu melangkah melewati batu dan berjalan lagi.

20

B. Animasi Mobil di Jalanan



2. Dengan menggunakan rectangle tool, selection tool dan oval tool buatlah

kerangka mobil seperti gambar di bawah ini.

3. Lalu buatlah sebuah roda dari 3 lingkaran dan sesuaikan ukurannya dengan

kerangka

4. Beri 2 buah garis melengkung berwarna putih pada roda untuk membuat efek

perputaran roda lebih terlihat

21

5. Blok semua bagian roda, klik kanan, pilih Convert to Symbol, pilih Movie Clip

dan beri nama roda

6. Klik 2x pada roda

7. Blok lagi semua bagian roda dengan menggunakan Selection tool dan klik

kanan, lalu pilih Convert to Symbol. Beri nama roda_putar

8. Klik kanan pada frame 15,pilih Insert Keyframe

9. Klik kanan di salah satu frame antara frame 1 - 15, pilih Create Motion Tween

10. Lihat di tab Properties bawah. Pilih CW pada kolom rotate untuk memutar

objek searah jarum jam

11. Kembali ke tampilan awal, klik Scene 1.

22

12. Duplikat roda satu kali (Ctrl+D), dan tempatkan di kerangka mobil.

13. Blok seluruh bagian mobil dan tekan tombol Ctrl+G untuk menyatukan

kerangka dan roda mobil.

14. Buat sebuah layer baru dan beri nama jalanan. Layer 1 beri nama mobil

15. Klik layer jalanan. Klik menu File pilih Import Import to Stage

Cari dan masukkan gambar jalan ke stage/layar putih

23

16. Duplikat objek mobil dan posisikan kedua mobil seperti di bawah ini. untuk

memutar balik posisi mobil yang menghadap ke kanan, klik mobil yang lain, klik

menu Modify pilih Transform , klik Flip Horizontal

17. Pisahkan kedua mobil ke layer yang berbeda. Insert layer beri nama

mobil 2 klik mobil yang lain Ctrl + X klik layer mobil 2 Ctrl +V

18. Klik kanan pada frame ke-20. Pilih Insert Keyframe.

24

19. Pada Layer mobil 2 :

Klik kanan frame di antara frame ke 1-20 pada layer mobil 2. Pilih Create

Motion Tween. Klik frame 20, pindahkan posisi mobil ke tepi kiri layar.

20. Pada Layer mobil 1 :

Klik kanan frame di antara frame ke 1-20 pada layer mobil 1. Pilih Create

Motion Tween. Klik frame 20, pindahkan posisi mobil ke tepi kanan layar.

25

21. Memberikan efek slow in dan slow out.

a. Memberikan efek slow out pada mobil 1.

- Klik frame pada layer mobil 1

- Klik tab Properties di bawah

- Pada kolom Ease, isikan angka 91. Yang menandakan membuat efek

slow out sebesar 91.

b. Memberikan efek slow in pada mobil 2.

- Klik frame pada layer mobil 2

- Klik tab Properties di bawah

- Pada kolom Ease, isikan angka -74. Yang menandakan membuat efek

slow in sebesar 74.

26

ANIMASI MOTION GUIDE

Adobe Flash juga menyediakan fitur yang bernama motion guide untuk membuat

jalur gerakan animasi sesuai dengan jalur yang kita buat. Berikut ini adalah

contoh penggunaan motion guide.

1. Buka file animasi mobil

2. Tambahkan layer baru dan beri nama mobil 3. Duplikat mobil 1 pada layer

mobil 3.

3. Klik layer mobil 3, lalu klik Add motion guide yang ada di samping ikon

Insert layer.

4. Klik kanan pada frame ke 20 pada layer motion guide dan mobil 3, pilih

Insert Keyframe

5. Klik layer motion guide dan buat garis seperti di tengah gambar jalan di

bawah ini dengan menggunakan Pen tool.

6. Klik frame 1 pada layer mobil 3, drag gambar mobil ke 3 ke ujung garis

sampai lingkaran pusat pada gambar menyentuh ujung garis

27

7. Klik frame 20 pada layer mobil 3 dan drag gambar mobil ke 3 ke ujung

garis yang lain.

8. Untuk membuat gerakan mobil yang sedang menyalip mobil pertama, ubah

nilai ease pada mobil 1 = -60 dan ease pada mobil kedua -36.

9. Tekan tombol Ctrl + Enter untuk melihat hasilnya.

Note :

Contoh animasi yang lain yang bisa dibuat dengan menggunakan fitur ini adalah

animasi perputaran planet.

28

ACTION SCRIPT

Adobe Flash menyediakan bahasa pemrograman action script yang memungkinkan

pengguna membuat animasi yang lebih interaktif. Misalnya dalam pembuatan tombol play,

pause dan stop.

A. Membuat tombol play


1. Buka file stickman yang sudah kamu buat.

2. Insert layer baru dan beri nama tombol

3. Buat sebuah lingkaran di layer tombol dan beri tulisan play

4. Blok lingkaran dan tulisan, klik kanan, pilih Convert to Symbol

Beri nama play dan pilih type simbol Button

5. Sekarang kita beri script pada tombol yang sudah kita buat

Klik kanan tombol, pilih Actions

29

6. Isikan tulisan/script sebagai berikut di kotak yang sudah disediakan

Maksud dari script :

Ketika tombol ditekan dan dilepaskan (on release), maka animasi akan

dijalankan (play ( ); )

Atau kalau tidak bisa diketik, klik dan seret tulisan play yang ada di sebelah kiri

kotak dialog ke dalam kotak yang sudah disediakan

7. Klik tombol close

30

B. Membuat tombol pause


1. Masih dalam layer yang sama dengan tombol play , Buat sebuah lingkaran di layer

tombol dan beri tulisan pause

2. Blok lingkaran dan tulisan, klik kanan, pilih Convert to Symbol

Beri nama pause dan pilih type simbol Button





31


dihentikan pada saat itu juga (stop ( ); )

Atau kalau tidak bisa diketik, klik dan seret tulisan stop yang ada di sebelah kiri

kotak dialog ke dalam kotak yang sudah disediakan


C. Membuat tombol stop

Selain dapat membuat tombol sendiri kita juga bisa memakai tombol yang sudah

disediakan oleh Flash. langkah-langkahnya :

1. Masih dalam layer yang sama dengan tombol play , klik menu Window, pilih

Common Libraries, klik Buttons

2. Pada kotak dialog buttons, klik 2x folder playback flat, lalu pilih flat blue stop

32

3. Klik dan seret gambar tombol ke dalam stage. Sesuaikan ukurannya






dihentikan dan kembali pada frame 1 (gotoAndStop (1 ); )

Atau kalau tidak bisa diketik, klik dan seret tulisan gotoAndStop yang ada di

sebelah kiri kotak dialog ke dalam kotak yang sudah disediakan

33


10. Tekan tombol Ctrl + enter untuk melihat hasilnya

34

Membuat efek masking text

Masking merupakan teknik menutupi sebuah objek dan hanya menampilkan gambar objek

sesuai dengan ukuran objek tersebut.



2. Masukkan gambar yang kamu inginkan, lalu atur ukuran gambar agar sesuai dengan

layar

35

3. Buat layer baru dan beri nama lubang gambar

4. Buat lingkaran dengan ukuran yang kecil di posisi kiri layar

5. Klik kanan lingkaran, pilih Convert to Symbol, beri nama yang kamu inginkan dan

pilih type simbol graphic

36

6. Klik kanan frame ke 30 pada kedua layer dan pilih Insert Keyframe

7. Klik frame 30 pada layer lubang gambar dan perbesar ukuran lingkaran sampai

memenuhi stage

8. Klik kanan pada salah satu frame pada layer lubang_gambar, dan pilih Create

Motion Tween

9. Klik kanan pada layer lubang_gambar, pilih Mask

10. Tekan tombol Ctrl+Enter untuk melihat hasilnya

modul praktikum adobe flash kelas xi

Documents