BAB 8 | MEMBUAT ANIMASI KUPU-KUPU - Membuat animasi kupu-kupu dengan motion tween

Indikator Hasil Belajar

1. Siswa memahami fungsi motion tween.
2. Siswa mampu membuat object kupu-kupu dengan oval tool.
3. Siswa mampu menggerakkan sayap kupu-kupu.
4. Siswa mampu menggunakan animasi motion tween.
5. Siswa mampu menggunakan keyframe.

URAIAN MATERI

Dalam membuat kupu-kupu tentu saja memiliki sayap maka di kedua sayap inilah nanti seolah-olah kupu-kupu menggerakkan sayapnya. Untuk membuat pergerakan pada sayap bisa menggunakan motion tween konsep kerjanya adalah setiap keyframe yang mengalami perubahan bentuk.

Hal yang perlu dilakukan sebelum kita melangkah pada membuat karakter kupu-kupu, kita bekerja dalam bentuk movie clip tujuannya adalah kupu-kupu yang akan dibuat bisa digabungkan dengan clip lainnya.

MEMBUAT KARAKTER KUPU-KUPU

Untuk membuat karakter sayap bisa menggunakan Oval Tool , supaya lebih jelas dan ada contoh apa yang akan kita buat, untuk itu kita memerlukan bentuk kupu-kupu yang akan dibuat, berikut contoh kupu-kupu yang akan kita buat lihat gambar 8.1 dibawah ini:

Gambar 8.1 Contoh gambar kupu-kupu

Dari contoh gambar diatas, langkah selanjutnya adalah membuka aplikasi adobe flash, bisa menggunakan adobe flash cs5.5 atau adobe flash cs6.

• Klik menu File>New...>New Document>pilih ActionScript 2.0>klik OK. lihat gambar 8.2. Gambar 8.3 dokument baru terbentuk.

Gambar 8.2 Membuat documen baru

Gambar 8.3 Dokumen Baru terbentuk

• Klik layer plane>klik menu Insert>New Simbol(Ctrl+F8)>Muncul popup Create New Simbol lihat gambar 8.4>name: kupu-kupu>type: Movie Clip>klik OK.
• Gambar 8.5 Movie clip berhasil dibuat.

Gambar 8.4 Membuat movie clip kupu-kupu

Gambar 8.5 movie clip kupu-kupu terbentuk

• Atur Stroke Color  menjadi: None dan Fill Color   menjadi: Merah, posisi di frame 1 kemudian buatlah gambar menjadi oval dengan Oval Tool seperti gambar 8.6.
• Edit gambar oval menjadi sayap seperti gambar 8.7 dibawah caranya:
• Klik Free Transform Tool   atau Selection Tool  pastikan gambar tidak terseleksi.
• Arahkan kursor ke tepi gambar hingga perubahan pada kursor tampak tanda lengkung putus-putus atau tanda siku.
• Tanda lengkungan putus-putus pada kursor gunanya untuk modifikasi lengkungan.
• Tanda siku atau sudut pada kursor gunanya untuk modifikasi pada titik point.
• Kemudian tariklah atau bentuklah sehingga menjadi seperti sayap, lihat gambar 8.7.

Gambar 8.6 membuat object oval

Gambar 8.7 Hasil edit dengan Free Transfor dan Selection Tool

• Tambahkan corak warna pada sayap dengan Oval Tool, corak warna boleh bebas silahkan dikreasikan sendiri. Lihat gambar 8.8.
• Rename layer 1 menjadi kiri, lihat garmbar 8.9.

Gambar 8.8 Menambahkan corak pada sayap

Gambar 8.9 Rename nama Layer

• Gambar 8.10, klik kanan pada layer kiri kemudian pilih Duplicate Layers.

• Gambar 8.11, layer bertambah menjadi 2 hasil duplicate kiri copy.

8.10 Gambar Duplicate layer kiri

Gambar 8.11 Hasil duplicate layer kiri copy

• Rename layer kiri copy menjadi kanan gambar 8.12.
• Klik Free Transform Tool  klik layer kanan klik di frame 1 perhatikan di stage gambar keadaan terseleksi, tarik titik point (bulat putih) sayap ke kanan sehingga akan terlihat seperti digambar kemudian tarik kotak kecil hitam disayap perhatikan gambar 8.13.

Gambar 8.12 Rename layer copy jadi kanan

Gambar 8.13 Tarik titik point sayap ke kanan

• Hasil setelah titik point dan kotak kecil ditarik dan diatur terlihat seperti digambar 8.14.
• Tambahkan layer baru dengan cara klik di kiri bawah New Layer pada Timeline sehingga hasilnya akan tampak pada gambar 8.15.

Gambar 8.14 menggeser kotak kecil hitam ke kanan

Gambar 8.15 Menambahkan layer baru

• Doubble klik di Layer 2 kemudian Rename namanya menjadi ulat gambar 8.16.
• Masih di layer ulat, klik frame 1 kemudian buat badan kupu-kupu dengan  Oval Tool  dengan pengaturan Stroke Color  menjadi: None dan Fill Color  hitam lihat gambar 8.17.

Gambar 8.16 Rename Layer 2 jadi ulat

Gambar 8.17 Membuat badan kupu-kupu dengan  Oval Tool

• Supaya lebih mudah mengerjakannya klik Show/Hide All Layer  di layer kiri dan kanan lihat gambar 8.17.
• Kemudian buatlah antena di kepala ulat dengan Line Tool  dengan pengaturan Stroke: 2,00. 
• Kemudian buatlah diatas antena bulat kecil dengan Oval Tool   buatlah seperti digambar 8.18
• Untuk membuat lengkungan antena seperti digambar 8.18 gunakan Selection Tool  atau Free Transform Tool  sehingga kelihatan lebih menarik.

Gambar 8.18 Membuat antena

Gambar 8.19 Pengatuan antena selesai

• Membuat garis-garis pada badan ulat dengan Line Tool  dengan pengaturan Stroke:4,00, Fill Color: Orange  buatlah seperti digambar 8.20.
• Setelah pengaturan badan kupu-kupu selesai tampilkan kembali Show/Hide All Layer  maka hasilnya akan terlihat seperti digambar 8.21.

Gambar 8.20 Membuat Garis garis badan kupu-kupu

Gambar 8.21 Hasil akhir setelah Show/Hide All Layer di non aktifkan

• Posisi di Layer Kiri lalu klik frame 10 klik kanan akan muncul menu pilih Insert Frame lihat gambar 8.22.
• Hasil akhir Layer Kiri setelah ditambahkan insert frame lihat gambar 8.23.

Gambar 8.22 Layer kiri menambahkan frame baru di frame 10

Gambar 8.23 Hasil akhir layer kiri setelah ditambahkan insert frame

• Posisi di Layer kanan lalu klik frame 10 klik kanan akan muncul menu pilih Insert Frame lihat gambar 8.24.
• Hasil akhir layer kanan setelah ditambahkan insert frame lihat gambar 8.25.

Gambar 8.24 Layer kanan menambahkan frame baru di frame 10

Gambar 8.25 Hasil akhir layer kanan setelah ditambahkan insert frame

• Posisi di Layer ulat lalu klik frame 10 klik kanan akan muncul menu pilih Insert Keyframe lihat gambar 8.26.
• Hasil akhir Layer ulat setelah ditambahkan insert keyframe lihat gambar 8.27.

Gambar 8.26 Layer ulat menambahkan keyframe baru di frame 10

Gambar 8.27 Hasil akhir layer ulat setelah ditambahkan insert keyframe

• Posisi di layer kiri lalu klik di frame 10, klik kanan akan muncul menu pilih Create Motion Tween lihat gambar 8.28.
• Hasil akhir layer kiri setelah ditambahkan Create Motion Tween lihat gambar 8.29. perintah untuk menconvert ke simbol klik OK.

Gambar 8.28 Layer kiri menambahkan Create Motion Tween di frame 10

Gambar 8.29 Hasil akhir layer kiri setelah Create Motion Tween

• Masih di layer kiri posisi kursor di fame 10, setelah diklik OK maka Layer akan berubah tandanya sudah ada animasi lihat gambar 8.30.
• Posisi di layer kiri:
• klik frame 10 kemudian tarik titik point sayap kiri ke titik hitam kanan lihat gambar 8.31.
• klik kotak hitam kecil kiri kemudian tarik kekanan sehingga menjadi seperti gambar 8.31.

Gambar 8.30 Menarik titik point ke kanan

Gambar 8.31 Menarik titik point ke kanan

• Posisi di layer kanan lalu klik di frame 10, klik kanan akan muncul menu pilih Create Motion Tween lihat gambar 8.32.
• Hasil akhir layer kanan setelah ditambahkan Create Motion Tween lihat gambar 8.33. perintah untuk menconvert ke simbol klik OK.

Gambar 8.32 Layer kanan menambahkan Create Motion Tween di frame 10

Gambar 8.33 Hasil akhir layer kanan setelah create motion tween

• Masih di layer kanan posisi kursor di fame 10, setelah diklik OK maka Layer akan berubah tandanya sudah ada animasi lihat gambar 8.34.
• Posisi di layer kanan:
• klik frame 10 kemudian tarik titik point sayap kiri ke titik hitam kanan lihat gambar 8.35.
• klik kotak hitam kecil kiri kemudian tarik kekanan sehingga menjadi seperti gambar 8.35.

Gambar 8.34 Menarik titik point ke kiri

Gambar 8.35 Menarik titik point ke kiri

• Gambar 8.36, untuk melihat hasil dari pekerjaan yang kita buat tekan enter atau bisa pilih menu Control>>Play.

Gambar 8.36 Tekan Enter di keyboard untuk melihat hasilnya.

PERTANYAAN

1. Apakah fungsi menu insert frame?

2. Apakah fungsi menu insert keyframe?

3. Jelaskan apa yang disebut animasi motion tween!

4. Apakah fungsi titik point pada object?

5. Apakah fungsi Free Transform Tool?

6. Apakah fungsi kotak hitam kecil pada object pada saat menggunakan Free Transform Tool?

7. Jelaskan bagaimana caranya menjalankan animasi adobe flash!