Pada tutorial ini akan dijelaskan cara membuat animasi roller coaster yang bergerak mengikuti sebuah pola lintasan. Coba perhatikan output dari tutorial ini
Pada animasi diatas terlihat bahwa terdapat animasi 5 gerbong kereta. Bagi yang belum pernah membuat animasi seperti ini sebelumnya, akan sering berpendapat jika animasi ini dibuat menggunakan teknik Motion Guide sebanyak 5 kali. Atau dengan kata lain akan ada 5 buah animasi dengan 5 buah guide.
Sebenarnya animasi ini dibuat hanya dengan menggunakan 1 buah animasi Motion Guide di dalam sebuah MovieClip yang diduplikasi sebanyak 5 kali, dan dilakukan perubahan waktu mulai. Untuk lebih jelasnya perhatikan langkah-langkah berikut :
Buatlah sebuah project baru dengan memilih menu File > New Pilih opsi Action Script 3. Atur ukuran stage 800 x 600 px.
Selanjutnya klik menu Insert > New Symbol kemudian ketikan nama animasi rc dan type MovieClip. Pada tahapan ini kita akan membuat sebuah movieclip yang di dalamnya terdapat sebuah animasi gerbong roller coaster.
Langkah 2 secara otomatis akan membawa stage ke Mode Edit MovieClip animasi rc. Artinya apapun yang akan kita lakukan di stage, hanya akan berpengaruh pada movieclip animasi rc saja.
Selanjutnya buatlah sebuah gambar gerbong, atau anda bisa mengimport sebuah bitmap ke stage.
Seleksi gambar tersebut kemudian Convert to Symbol menjadi MovieClip dengan nama gerbong
Untuk mempermudah kita dalam membuat animasi gerakan roller coaster, aktifkan Ruler dengan cara klik kanan stage, kemudian pilih Rulers, maka angka kordinat akan muncul di atas dan di samping kiri stage.
Drag Garis Bantu, dari ruler sebelah atas dan samping sebanyak 4 kali yaitu untuk batas-batas stage ( X = 0, X = 800, Y = 0, Y = 600), kemudian letakkan gerbong di sebelah kanan luar (disini letak start dari animasi gerbong). Maksud dari penarikan garis bantu adalah untuk mempermudah kita dalam mengatur animasi terhadap ukuran stage. Dengan garis bantu ini kita dapat mengetahui apakah objek berada di area stage atau di luar.
Selanjutnya klik Frame 200 Layer 1 kemudian tambahkan KeyFrame
Tambahkan Motion Guide Layer kemudian dengan menggunakan Pencil Tool/Pen Tool buatlah sebuah pola gerakan gerbong roller coaster. TIPS : pastikan ujung awal dan akhir lintasan berada di luar stage.
Drag Movieclip gerbong di frame 1 ke ujung awal lintasan dan drag Movieclip gerbong di frame 200 ke ujung akhir lintasan. Selanjutnya tambahkan Motion Tween / Classic Motion dan opsi Orient to Path sehingga terbentuk animasi gerakan gerbong mengikuti pola yang anda buat
Kembali ke scene utama dengan menekan Ctrl+E.
Selanjutnya buka panel Library dengan menekan Ctrl+L atau memilih menu Window > Library. Selanjutnya drag movieclip animasi rc ke stage. Letakkan di sebelah kanan luar stage. Note : semua objek yang telah di convert menjadi symbol secara otomatis akan masuk ke dalam Library, dan dapat kita gunakan sewaktu-waktu
Klik kanan Frame 200 Layer 1 Selanjutnya pilih Insert Frame. Angka 200 diperoleh dari durasi movieclip animasi rc (langkah 7). Jalankan movie dengan menekan Ctrl+Enter, maka akan anda dapati sebuah animasi satu gerbong yang bergerak mengikuti pola lintasan.
Dari langkah ini, akan dijelaskan sebuah konsep animasi menggunakan teknik graphic sebagai berikut :
Movieclip adalah sebuah animasi independen. Animasi ini akan bergerak secara terus menerus apabila diletakkan di dalam sebuah keyframe. Sebuah movieclip berdurasi beberapa frame dapat muncul/dimainkan secara penuh hanya dengan menempati 1 buah keyframe.
Dalam stage, Movieclip hanya ditampilkan pada posisi Frame 1 saja. Animasi Movieclip baru akan terlihat jika animasi/movie sudah dijalankan dengan Ctrl+Enter. Sehingga ketika di eksport menjadi file bertipe AVI/MOV, akan terjadi kesalahan karena hanya menampilkan frame 1 dari movieclip - bukan animasi secara keseluruhan
Movieclip selalu dimulai dari frame 1 dan tidak dapat diatur frame awal dimulainya animasi. Kecuali diatur menggunakan kode Actionscript.
Berbeda dengan symbol bertipe Graphic. Symbol bertipe Graphic membutuhkan durasi frame, untuk menampilkan animasi secara penuh. Animasi graphic akan tampak di timeline tergantung dari durasi (frame) yang ada pada timeline.
Symbol bertipe Graphic memiliki opsi pengaturan untuk awal animasi, waktu animasi dan pemutaran ulang animasi. Sehingga dapat digunakan untuk memanipulasi waktu dari animasi yang dibuat.
Symbol bertipe Graphic tidak dapat diakses menggunakan kode Actionscript. Sehingga proses pengaturan animasi harus dilakukan secara manual
Masing-masing symbol dapat diganti type nya melalui panel Properties, sehingga kita dapat menyesuaikan dengan kebutuhan.
Setelah memahami konsep di atas, klik Movieclip animasi rc Selanjutnya buka panel Properties. Ubah typenya menjadi Graphic dan pilihlah Loop agar animasi dapat berjalan secara terus menerus (Lihat Gambar)
Klik kanan Stage selanjutnya pilih opsi Paste in Place. Kedua langkah copy-paste ini ditujukan untuk membuat gerbong ke dua. Pemilihan Paste in Place ditujukan agar letak gerbong sama persis dengan gerbong pertama.
Klik animasi rc gerbing ke 2 selanjutnya buka panel Properties. Pada kolom first, ketikan 8. Maka animasi gerbong ke 2 akan dimulai dari frame 8, sehingga gerbong ke 2 akan terlihat berada di depan gerbong pertama.
Lakukan Paste in place sekali lagi untuk membuat gerbong ke 3. Buka Properties dan pada kolom first, ketikan 15. Maka animasi gerbong ke 3 akan dimulai dari frame 15, dan gerbong ke 3 berada diposisi terdepan.
Pemilihan angka 8 dan 15 disesuaikan dengan animasi yang anda buat. Setelah frame yang tepat anda temukan, maka start awal gerbong selanjutnya mengikuti kelipatan (jarak antara gerbong 1 dan gerbing 2).
Dalam file tutorial ini menggunakan kelipatan 7 sehingga awal animasi (first) gerbongnya adalah 1, 8, 15, 22, 29 dan seterusnya.
Lakukan penambahan gerbong beberapa kali, sehingga anda dapatkan seperti gambar berikut:
Tambahkan Layer 2 sebagai tempat untuk menggambar lintasan roller coaster.
Selanjutnya buatlah gambar lintasan roller coaster, anda dapat melakukan copy-paste guide pada movieclip animasi rc untuk mempermudah penggambaran lintasan. Atur posisinya dan tambahkan beberapa gambar pendukung.
Jalankan animasi dengan menekan Ctrl+Enter maka akan anda dapatkan animasi roller coaster.
