BAB 9 | MEMBUAT KUPU-KUPU MOTION GUIDE - Membuat kupu-kupu dengan motion guide

Indikator Hasil Belajar

1. Siswa mampu menjelaskan fungsi guide motion tween.
2. Siswa mampu menjelaskan animasi classic tween.
3. Siswa mampu menggunakan fungsi guides motion.
4. Siswa mampu membuat movie clip.

URAIAN MATERI

Pada pertemuan sebelumnya kita pernah membuat kupu-kupu namun belum bisa bergerak seolah terbang maka pada pertemuan kali ini kita akan membuat kupu-kupu tersebut bisa terbang, untuk bisa terbang tentu saja memerlukan sebuah fungsi, dalam adobe flash fungsi tersebut bisa menggunakan motion guide atau path.

Untuk membuat motion guides atau motion path kita harus mempunyai clip yang harus kita jalankan pada path tersebut. Jika movie clip yang kita buat merupakan clip yang bergerak maka animasi cukup menarik untuk dijalankan pada path. Misalnya kupu-kupu sedang terbang atau burung yang sedang terbang.

MEMBUAT ANIMASI MOVIE CLIP

Pada pertemuan kali ini kita akan membuat sebuah animasi movie clip tentang kupu-kupu terbang. Pada kupu-kupu terbang gerakan sayap bergerak secara berulang terus-menerus sampai kupu-kupu tersebut berhenti. Jika kita akan membuat kupu-kupu terbang bergerak dari satu titik menuju ketitik lainnya maka kita harus membuat movie clip terlebih dahulu, mengenai gerakan kupu-kupu terbang tersebut. Jika gerakan pada movie clip selesai baru kita dapat menempatkan movie clip tersebut pada scene sesuai kebutuhan.

• Buka file movie clip pada pertemuan sebelumnya BAB 08 – KUPU KUPU lalu Save AS...>beri nama BAB 09 -  KUPU-KUPU LANJUTAN maka akan muncul tampilan seperti pada gambar 9.1.

Gambar 9.1 Save As... dari BAB 08 - KUPU KUPU menjadi => BAB 09 – KUPU-KPU LANJUTAN

• Gambar 9.2, Klik kanan pada Layer 1 kemudian pilih Add Classic Motion Guide.
• Gambar 9.3, Akan muncul Layer baru dengan nama Guide: Layer 1.

Gambar 9.2 Menambahkan Add Classic Motion Guide

Gambar 9.3 Hasil Layer Add Classic Motion Guide

• Gambar 9.4, posisi di Layer 1 Klik Free Transform Tool.
• Gambar 9.5, posisi di Layer 1 Klik  Free Transform Tool lalu tarik movie clip kupu-kupu dari Library ke stage.

Gambar 9.4  Posisi di Layer 1

Gambar 9.5  Tarik clip kupu-kupu ke stage

• Gambar 9.6, Klik Free Transform Tool Lalu ubah kupu-kupu seperti terlihat pada gambar, lalu atur letaknya.
• Gambar 9.7, Di Layer 1, Klik kanan frame 50 pilih Insert Keyframe untuk menambahkan keyframe baru.

Gambar 9.6 Ubah dengan Free Transfor Tool

Gambar 9.7 Klik Kanan di Layer 1 frame 50>Insert Keyframe

• Gambar 9.8, Hasil Insert Keyframe Layer 1 frame 50.
• Gambar 9.9, Posisi di layer Guide: Layer 1, Klik kanan di frame 50 Insert Frame, menambahkan frame baru.

Gambar 9.8 Hasil Insert keyframe

Gambar 9.9 Posisi di Layer Guide: Layer 1>Klik kanan di Frame 50>insert Frame

• Gambar 9.10 Insert Frame berhasil.
• Gambar 9.11 Klik layer Guide: Layer 1.

Gambar 9.10 Guide: Layer 1>Insert Frame berhasil

Gambar 9.11 Posisi di layer Guide: Layer 1 frame 1

• Gambar 9.12, klik Pencil Tool lalu buatlah garis seperti terlihat pada gambar boleh bebas.
• Gambar 9.13, klik Free Transform Tool lalu klik kupu-kupu.

Gambar 9.12 Klik Pencil Tool membuat Motion Guide

Gambar 9.13 Klik Free Transform Tool

• Gambar 9.14, di Layer 1, klik Free Transform Tool tarik titik point kupu-kupu ke awal garis motion guide.
• Gambar 9.15, di Layer 1>>Frame 50, klik Free Transform Tool tarik kupu-kupu dari frame 1 ke frame 50.

Gambar 9.14 Layer 1> Frame 1>tarik titik point ke awal garis.

Gambar 9.15 Layer 1>Frame 50>tarik titik point ke akhir garis

• Gambar 9.16, tarik titik point kupu-kupu ke akhir garis.
• Gambar 9.17, kembali ke Layer 1 di frame 1.

 

Gambar 9.16 Geser titik point ke akhir garis

Gambar 9.17 Kembali ke Layer 1 frame 1

• Gambar 9.18, di Layer 1, Frame 1>klik kanan pilih menu Create Classic Tween fungsinya untuk menambahkan animasi classic tween pada layer 1.
• Gambar 9.19, Hasil akhir setelah ditambahkan animasi classic tween untuk melihat hasilnya tekan tombol enter, untuk membuat file .swf tekan tombol ctrl+enter.

Gambar 9.18 Menambahkan Create Classic Tween

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

• Gambar 9.20, untuk mengatur supaya hasilnya lebih halus dan kupu-kupu benar mengikuti garis motion geserlah slider  di cari di posisi mana yang perlu di atur letak kupu-kupunya, klik Layer 1>>frame 14 >>klik kanan>>pilih Insert Keyframe.
• Gambar 9.21, klik Free Transform Tool   lalu rotate kupu-kupu sesuai dengan alur garis seperti terlihat pada gambar.

Gambar 9.20 Layer 1 Insert Keyframe frame 14

Gambar 9.21 Klik Free Transform Tool lalu Rotate

• Gambar 9.22, untuk mengatur supaya hasilnya lebih halus dan kupu-kupu benar mengikuti garis motion geserlah slider  cari di posisi mana yang perlu di atur letak kupu-kupunya, klik Layer 1>>frame 16 >>klik kanan>>pilih Insert Keyframe.
• Gambar 9.23, klik Free Transform Tool   lalu rotate kupu-kupu sesuai dengan alur garis seperti terlihat pada gambar.

Gambar 9.22 Layer 1 Insert Keyframe frame 16

Gambar 9.23 Klik Free Transform Tool lalu Rotate

• Gambar 9.24, untuk mengatur supaya hasilnya lebih halus dan kupu-kupu benar mengikuti garis motion geserlah slider  cari di posisi mana yang perlu di atur letak kupu-kupunya, klik Layer 1>>frame 24 >>klik kanan>>pilih Insert Keyframe.
• Gambar 9.25, klik Free Transform Tool lalu rotate kupu-kupu sesuai dengan alur garis seperti terlihat pada gambar.

Gambar 9.24 Layer 1 Insert Keyframe frame 24

Gambar 9.25 Klik Free Transform Tool lalu Rotate

• Gambar 9.26, untuk mengatur supaya hasilnya lebih halus dan kupu-kupu benar mengikuti garis motion geserlah slider  cari di posisi mana yang perlu di atur letak kupu-kupunya, klik Layer 1>>frame 40 >>klik kanan>>pilih Insert Keyframe.
• Gambar 9.27, klik Free Transform Tool   lalu rotate kupu-kupu sesuai dengan alur garis seperti terlihat pada gambar.

Gambar 9.26 Layer kiri menambahkan Create Motion Tween di frame 40

Gambar 9.27 Klik Free Transform Tool lalu Rotate

• Gambar 9.28, Hasil akhir setelah dilakukan Insert Keyframe dan Free Transform pada tiap frame setelah dijalankan hasilnya akan terlihat lebih halus.

Gambar 9.28 Hasil akhir setelah pengaturan ulang

PERTANYAAN

1. Apakah fungsi Add Motion Guide pada jendela Timeline?
2. Jelaskan apa fungsi motion guide!
3. Jelaskan langkah-langkah Rotate object!
4. Jelaskan langkah-langkah mengatur supaya hasil animasi lebih halus!
5. Apakah yang di maksud dengan Create Classic Tween?