BAB 11 | MEMBUAT WALKING MAN - Membuat animasi walkingman dengan motion guide

Indikator Hasil Belajar

1. Siswa mampu membuat animasi motion guide.
2. Siswa mampu membuat movie clip.
3. Siswa mampu menggunakan animasi classic tween.
4. Siswa mampu membuat walking man.

ANIMASI MOTION GUIDE

Untuk membuat motion guides atau motion path kita harus mempunyai clip yang akan kita jalankan pada path tersebut. Jika movie clip yang kita buat merupakan clip yang bergerak, maka animasi ini cukup menarik untuk dijalankan pada path. Misalnya orang sedang berjalan.

MEMBUAT BACKGROUND DAN KARAKTER

Untuk membuat background dan karakter bisa dibuat sendiri dengan aplikasi photoshop atau bisa juga mencari di internet:

Berikut background dan karakter yang akan digunakan: Gambar 11.1 sebagai background sedangkan gamnbar 11.2 sebagai karakter walking man.

Gambar 11.1 Sebagai background

Gambar 11.2 Karakter walking man

Setelah background dan karakter selesai dibuat maka langkah selanjutnya adalah bagaimana kedua object tersebut dapat digabungkan menjadi sebuah movie clip.

MEMBUAT MOVIE CLIP WALKING MAN

• Klik layer plane>>klik menu Insert>>New Simbol(Ctrl+F8)>>Muncul popup Create New Simbol lihat gambar 11.3>>name: man in>>type: Movie Clip>>klik OK.
• Untuk membuat movie clip man in maka harus ada gambar, silahkan cari di internet kata kunci walking man. Kemudian pisahkan gambar-gambar tersebut dengan corel draw gambar  tool ungroup lihat 11.4 sehingga oject menjadi terpisah.
• Setelah gambar terpisah drag & drop object dimulai dari frame 1 lihat gambar 11.5. kemudian untuk mengatur supaya object gambar ditengah stage gunakan panel Align. Align>>Align Horizontal Center, Align Vertical Center.

Gambar 11.3 Membuat movie clip man in.

Gambar 11.4 Memisahkan obejct dengan corel draw.

Gambar 11.5 Object 1 diletakkan di frame 1.

• Untuk menambahkan frame baru klik kanan frame 3 Insert Blank Keyframe lihat gambar 11.6
• Gambar 11.7 frame 3 berhasil dibuat.

Gambar 11.6 menambahkan Insert Blank Keyframe

Gambar 11.7 keyframe 3 berhasil dibuat

• drag & drop object 2 di frame 3 lihat gambar 11.8 kemudian untuk mengatur supaya object gambar ditengah stage gunakan Panel  Align. Align>>Align Horizontal Center, Align Vertical Center.
• Lakukan hal yang sama seperti langkah nomor 4-6 sehingga semua frame terisi oleh object walking man. Lihat gambar 11.9 jika sudah klik Scene 1 untuk keluar dari movie clip.

Gambar 11.8 Frame 3 sudah ditambahkan object

Gambar 11.9 Hasil akhir setelah semua frame diberi object

• Gambar 11.10 adalah hasil movie clip yang dikerjakan dari langkah 1 sampai langkah 7, namun tampilan kembali ke layer biasa. Lihat Timeliw Layer 1 masih kosong.
• Drag & drop main in movie clip di stage Layer 1 sehingga hasil seperti gambar 11.11 tekan ctrl+enter di keyboard untuk melihat hasilnya.

Gambar 11.10 Setelah keluar dari movie clip

Gambar 11.10 Movie clip main in letak di stage

• Walking man sudah bisa berjalan namun belum bisa mengikuti alur atau motion guide, maka langkah selanjutnya adalah memberikan animasi bagaimana supaya object tersebut berjalan.

MENGGERAKKAN MOVIE CLIP WALKING MAN

Setelah object walking man berhasil langkah selanjutnya adalah menambahkan Layer 2 untuk background berikut:

• Tambahkan Layer baru dengan cara klik New Layer pada Timeline sudut kiri bawah lihat gambar 11.11.
• Gambar 11.12 membuat layer berhasil.

Gambar 11.11 Cara menambahkan layer baru

Gambar 11.12 Hasil layer baru

• Rename Layer 1 dengan nama walkingman dan layer 2 dengan bg lihat gambar 11.13 kemudian pindahkan layer walkingman diatas sedangkan layer bg dibawah.
• Posisi di layer bg, lalu Drag&drop gambar backround atur sehingga tampilan menjadi seperti gambar 11.14 klik lock untuk mengunci layer bg.

Gambar 11.13 Rename dan pindah urutan layer

Gambar 11.14 Hasil penambahan background

• Posisi di layer bg frame 50, klik kanan lalu pilih Insert Keyframe untuk memperpanjang durasi frame lihat gambar 11.15.
• Gambar 11.16 keyframe baru berhasil dibuat.

Gambar 11.15 Insert Keyframe layer bg

Gambar 11.16 Hasil Insert Keyframe layer bg

• Posisi di layer walkingman frame 50, klik kanan lalu pilih Insert Keyframe untuk memperpanjang durasi frame lihat gambar 11.17.
• Keyframe baru berhasil dibuat lihat gambar 11.18.

Gambar 11.17 Insert Keyframe layer walkingman

Gambar 11.18 Hasil Insert Keyframe layer walkingman

• Posisi dilayer walkingman klik kanan kemudian pilih Add Classic Motion Guide, lihat gambar 11.19.
• Gambar 11.20 Guide: walkingman secara otomatis akan terbuat.

Gambar 11.19 Menambahkan Classic Motion Guide

Gambar 11.20 Muncul layer Guide: walkingman

• Posisi di layer Guide: walkingman di frame 1, klik Pencil Tool kemudian buat garis lurus atau bebas di jalan dari kiri kenan lihat gambar 11.21 gunannya untuk motion guide.
• Klik layer walkingman, secara otomatis object walkingman terseleksi. Lihat titik point object (bulat putih kecil) lihat gambar 11.22.

Gambar 11.21 Membuat path/jalan dengan pencil tool

Gambar 11.22 Hasil Insert Keyframe

• Posisi masih di layer walkingman di frame 1 object dalam keadaan terseleksi, jika tidak muncul tanda kotak hitam atau seleksi pada object walkingman maka klik Free Transform Tool. 
• Pindahkan titik point (bulat putih kecil) walkingman ke awal garis. Caranya klik dan tahan titik point tersebut kemudian geser ke awal garis yang tadi dibuat. lihat gambar 11.23.
• Masih dilayer walkingman pindah kursor ke frame 50, lalu geser object walkingman yang di frame 1 ke frame 50. Sehingga begitu di klik akan ada 2 object walkingman di frame 1 dan frame 50.

Gambar 11.23 Hasil Insert Keyframe

Gambar 11.24 Pindah object di frame 50

• Posisi di layer walkingman di frame 50 object dalam keadaan terseleksi, jika tidak muncul tanda kotak hitam atau seleksi pada object walkingman.
• klik Free Transform Tool geser titik point (bulat putih kecil) walkingman ke ujung garis. Caranya klik dan tahan titik point tersebut kemudian geser ke ujung garis akhir yang tadi dibuat. lihat gambar 11.25.
• Klik layer walkingman lalu klik kanan, akan muncul menu pilih Create Classic Tween gunanya untuk memberikan animasi classic tween. Lihat gambar 11.26.

Gambar 11.25 Memindahkan titik point walkingman

Gambar 11.26 Klik kanan layer walkingman

• Gambar 11.27 menunjukkan walkingman sudah ada animasi.
• Untuk melihat hasil dalam bentuk swf tekan ctrl+enter di keyboard, lihat gambar 11.28 hasil akhir dari motion guide walkingman.

Gambar 11.27 Hasil create classic tween

Gambar 11.28 hasil akhir motion guide

PERTANYAAN

1. Apakah fungsi menu insert frame?
2. Apakah fungsi insert layer pada jendela Timeline?
3. Apakah fungsi menu Add Motion Guide pada jendela Timeline?
4. Apakah fungsi drag&drop pada adobe flash?
5. Bagaimana cara menampilkan hasil akhir suatu animasi menjadi file swf!