Motion Guide

Konsep Dasar

Ketika membuat animasi terkadang kita membutuhkan sebuah gerakan yang tidak beraturan, tidak seperti motion tween yang berbasis pada perubahan tempat/bentuk dalam garis lurus. Sebagai contoh ketika kita akan membuat sebuah animasi kupu-kupu yang sedang terbang, maka secara riil kupu-kupu tersebut akan terbang secara bebas (tidak lurus), sehingga untuk animasi yang seperti itu dibutuhkan sebuah garis bantu atau disebut sebagai motion guide.







Animasi Motion Guide

Pada tutorial ini akan dijelaskan cara membuat animasi pesawat yang bergerak mengikuti sebuah pola, sebagai berikut:

  1. Buatlah sebuah project baru dengan memilih menu File > New Pilih opsi Action Script 3
  2. Selanjutnya klik menu File > Import > Import to Stage kemudian pilihlah sebuah gambar pesawat.png. Pesawat tersebut nantinya akan kita gerakkan sesuai dengan pola guide. tutorial animasi by wandah_w
    tutorial animasi by wandah_w
  3. Setelah gambar pesawat muncul di stage, klik pesawat kemudian pilih menu Modify > Convert to symbol. Ketikan kapal pada kolom nama, dan pastikan titik registrasi-nya ada di tengah.
    tutorial animasi by wandah_w
  4. Klik frame 200 kemudian tambahkan keyframe
  5. Untuk menambahkan pola / guide yang akan menjadi lintasan dari gerakan pesawat, klik kanan Layer 1, kemudian pilih Add Motion Guide, maka sebuah layer baru akan muncul di atas layer 1.
    tutorial animasi by wandah_w
  6. Klik frame 1 layer guide, kemudian dengan menggunakan Pencil Tool atau Pen Tool buatlah sebuah pola lintasan. Untuk membuat pola tersebut terdapat 2 syarat yang harus terpenuhi :
    1. garis yang dibuat tidak boleh putus
    2. garis yang dibuat memiliki 2 buah ujung (awal lintasan dan akhir lintasan)

    tutorial animasi by wandah_w
  7. Selanjutnya klik Pesawat pada frame 1 kemudian drag ke awal lintasan, sampai menempel (agar menempel dengan baik, pastikan ikon magnet di drawing tool menyala, dan pastikan lingkaran kecil di tengah movieclip berubah menjadi lingkaran yang lebih besar).
    tutorial animasi by wandah_w
    Dengan cara yang sama klik pesawat di Frame 200 lalu drag menuju akhir lintasan. tutorial animasi by wandah_w
  8. Klik kanan Frame 100 pada timeline kemudian pilih Create Motion Tween untuk CS3 ke bawah atau Create Classic Tween untuk CS4 ke atas. Maka timeline akan berubah menjadi berwarna biru dan bergaris, dan animasi pesawat bergerak mengikuti pola akan terbentuk.
    tutorial animasi by wandah_w
  9. Simpan project, kemudian jalankan animasi dengan menekan tombol Ctrl+Enter. Jika anda perhatikan pesawat akan bergerak mengikuti pola, akan tetapi posisi pesawat tetap tegak. Agar pesawat dapat mengikuti pola lintasan, sekaligus menyesuaikan rotasi pesawat terhadap lintasan, maka anda harus menyeleksi frame 100 layer 1 kemudian buka panel properties dan mengaktifkan opsi Orient to path, maka pesawat akan bergerak dan berotasi sesuai dengan pola.
    tutorial animasi by wandah_w tutorial animasi by wandah_w

Output


Get Adobe Flash player

File Sumber


download