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
Terima kasih sudah mampir dan membaca blog saya. (^_^)
rohmi julia
Desember 7, 2011 at 4:38 pm
mau tanya.., kalo misalkan setiap sekian detik atau setiap sekian derajat, rotasinya berhenti beberapa detik, terus rotasi lagi, gimana ya caranya?
thanks
SukaSuka
8oni
Desember 8, 2011 at 5:23 am
Cara paling gampang menggunakan animasi Motion Tween. Nanti di antara motion tween tinggal buat saja jumlah frame sesuai lamanya rotasi berhenti. Contoh yang saya buat rotasi berhenti selama 1 detik setiap 5 detik/45 derajat. Bisa di dl di sini
SukaSuka
rohmi julia
Desember 8, 2011 at 5:38 pm
kalo pake actionscript… ?? π
kalo pake motion tween udah pernah nyoba…
SukaSuka
8oni
Desember 8, 2011 at 10:37 pm
… Ketahuan deh saya kurang ahli ngitung. :p Coba ketikkan code di bawah ini sebagai ganti code yang ada di atas. Hapus saja mc_K2 dan mc_K3, yang dipakai hanya mc_K1 sebagai perbandingan. Kalau menghitung sekian derajat berhenti saya bisa, tapi kalo sudah menghitung dengan waktu saya belum ketemu rumusnya >_<
Saat di test movie clip mc_K1 akan berhenti pada waktu dan sudut yang acak, sudah saya coba mengubah variabel tapi belum ketemu rumus yang tepat untuk mendapatkan sudut berhenti/lama waktu berhenti. Maaf tidak banyak membantu. :malu
SukaSuka
rohmi julia
Desember 8, 2011 at 10:47 pm
nggak harus berhenti sekian detik jg, pengenya, misalkan setiap 45 derjat muter, berhenti sebentar, terus muter lagi. Pernah coba, cuma bisa, setelah muter 180 derajat, berhenti sebentar, terus muter lagi, tp untuk berhentiin muter yg kedua ini yg belum nemu… π
kalo pake motion tween udah bisa sih, tp kalo buat banyak kan rada repot π
maunya kyk gini
http://www.bbc.co.uk/schools/ks3bitesize/maths/shape_space/symmetry/revise4.shtml,
nggak tau juga sih itu pake motion tween atw actionscript π
hehe nggak apa kok, kalo nggak nemu, ya berarti pake motion tween saja.. :p
SukaSuka
firman
Februari 12, 2012 at 2:20 pm
boleh minta tolong…
sy membuat sebuah button dimana sy ingin button tsb bisa di drag sekaligus dirotasi 45 derajat jika salah satu key ditekan
gmana ya script yang cocok
makasih sebelumnya π
SukaSuka
8oni
Februari 14, 2012 at 12:32 pm
Maaf lama membalas. Button bisa dibuat agar bisa di drag dengan menggunakan script startDrag dan stopDrag, tapi cara ini tidak saya sarankan karena biasanya saat button ditekan akan terjadi trigger perintah pada button, jadi biasanya yang dibuat agar bisa di drag adalah Movie Clip. Kalau untuk membuat button/movie clip berotasi 45 derajat saat suatu key ditekan [contohnya key Kiri] codenya seperti ini :
Kalau mau menggunakan key lain misalnya key SPACE ganti saja code (Key.isDown(Key.LEFT)) dengan code (Key.isDown(Key.SPACE)). Kalau menggunakan lebih dari 1 key contohnya seperti ini :
Sebagai tambahan, kalau menggunakan tanda + rotasi 45 derajatnya searah jarum jam, tapi kalau menggunakan tanda – rotasi 45 derajatnya berlawanan jarum jam π
Semoga membantu. π
SukaSuka