Flash8 & Flash CS3 — Membuat Animasi Kincir Angin Yang Berputar Menggunakan _rotation

Halo 🙂

Di postingan kali ini saya membuat animasi sebuah kincir angin yang berputar. Prinsip dari animasi ini adalah bagaimana membuat sebuah objek movie clip berputar dengan menggunakan _rotation. Contoh lain dari aplikasi ini pada kehidupan nyata misalnya pada radar. [Bila Anda memiliki contoh lain silakan beri komentar agar saya bisa mengupdate postingan ini. 🙂 ]

Software yang di gunakan :

Flash 8 dan Flash CS3

AS [ActionScript] yang digunakan :

AS 2.0

Preview hasil jadi :

Kincir angin akan berputar perlahan searah dengan jarum jam.

Flash dari kincir angin di atas bisa di lihat di sini

• Ubah nama Layer 1 menjadi BG dan buat gambar bangunan kincir angin dengan menggunakan Pen Tool, warna terserah sesuai selera. Bila ingin menambahkan background seperti yang saya buat silakan saja, apalagi kalau Anda memang bisa menggambar lebih bagus dari saya. 😛 Tidak perlu mengubah bentuk bangunan kincir angin menjadi symbol.

• Buat layer baru di atas layer BG, beri nama Kincir dan buat gambar sirip kincir angin yang nantinya akan di animasikan. Demi kemudahan, saya menyarankan agar Anda membuat bentuk sirip kincir angin sesuai dengan contoh saya. 🙂

Pertama tama, buatlah gambar lingkaran dengan menggunakan Oval Tool. Tekan Shift agar hasil lingkaran simetris.

Bagi dua gambar lingkaran tersebut dengan menggunakan Line Tool. Pastikan bahwa lingkaran tepat terbagi dua.

Gunakan Pen Tool sehingga mendapat gambar seperti di atas. Pilih potongan yang kecil, kemudian ubah menjadi symbol Movie Clip dengan nama mc_Kincir.

• Atur posisi sirip kincir angin pada bangunan kincir angin.

Jangan lupa memberi nama mc_K1 di kotak Instance Name.

Pastikan bahwa titik tengah dari mc_Kincir [tanda + di dalam lingkaran] persis seperti yang ada pada contoh, karena rotasi akan dilakukan dengan berpusat pada titik tersebut. Jadi, bila titik tersebut letaknya berbeda maka animasi akan menjadi aneh. 🙂

• Copy dan paste sirip kincir angin tersebut, kemudian atur posisi sirip sirip tersebut pada bangunan kincir angin. Saya membuat tiga sirip kincir angin, silakan saja kalau Anda ingin membuat lebih, dan jangan lupa untuk memastikan bahwa posisi titik tengah dari masing masing Movie Clip persis seperti di contoh.

Jangan lupa untuk memberi nama mc_K2 pada kotak Instance Name.

Jangan lupa untuk memberi nama mc_K3 pada kotak Instance Name.

• Buat layer baru dan beri nama Actions. Kemudian ketikkan code di bawah ini : [Penjelasan code akan diberikan nanti 🙂 ]

onEnterFrame = function()

{

mc_K1._rotation++;

mc_K2._rotation++;

mc_K3._rotation++;

}

• Anda boleh menambahkan bulatan di tengah tengah sirip seperti gambar saya bila mau, bila tidak tidak masalah, tapi bila Anda mau Anda harus merubah bulatan tersebut menjadi symbol Graphic [tidak perlu menjadi MC, karena bulatan tersebut juga tidak akan di apa apakan bukan? 😉 ], bila tidak bulatan tersebut akan tertutupi oleh gambar kincir angin.

• Test movie dengan menekan Ctrl + Enter.

• Bila animasi dirasa aneh atau kurang pas, hal itu kemungkinan besar disebabkan oleh posisi titik tengah MC yang belum tepat. 😀

Penjelasan code

onEnterFrame = function()

{

mc_K1._rotation++;

mc_K2._rotation++;

mc_K3._rotation++;

}

Pada saat animasi berjalan [saat memasuki frame] akan dilakukan penambahan rotasi dari posisi awal tiga buah MC sirip kincir angin sebanyak 1. [++ sama artinya dengan =+1, hanya format penulisan saja yang berbeda biar lebih singkat menulis code 😀 ] Bila ingin mengubah kecepatan rotasi sirip kincir angin misalnya menjadi 10 maka code diatas harus diubah menjadi :

onEnterFrame = function()

{

mc_K1._rotation += 10;

mc_K2._rotation += 10;

mc_K3._rotation += 10;

}

Hasil jadi (*.fla) bisa di lihat di

FLASH8

FLASHCS3

Terima kasih sudah mampir dan membaca blog saya. (^_^)