RSS

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

17 Apr

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. :P 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. :D

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 :D ] 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. (^_^)

About these ads
 
8 Komentar

Ditulis oleh pada April 17, 2011 in Flash

 

Tag: , , ,

8 responses to “Flash8 & Flash CS3 — Membuat Animasi Kincir Angin Yang Berputar Menggunakan _rotation

  1. 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

    Suka

     
    • 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

      Suka

       
    • rohmi julia

      Desember 8, 2011 at 5:38 pm

      kalo pake actionscript… ?? :D
      kalo pake motion tween udah pernah nyoba…

      Suka

       
    • 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 >_<

      function f1(mc:MovieClip)
      {
      if(getTimer() % 2== 0)
      {
      mc.stop();
      }
      else{mc._rotation++;}
      }
      onEnterFrame = function()
      {
      if(mc_K1._rotation % 45 > 0 || mc_K1._rotation % 45 < 0){f1(mc_K1);}
      else{mc_K1._rotation++;}
      }

      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

      Suka

       
    • 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… :D
      kalo pake motion tween udah bisa sih, tp kalo buat banyak kan rada repot :D

      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 :D

      hehe nggak apa kok, kalo nggak nemu, ya berarti pake motion tween saja.. :p

      Suka

       
  2. 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 :)

    Suka

     
    • 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 :

      var keyListener:Object = new Object();
      keyListener.onKeyDown = function() {
      if (Key.isDown(Key.LEFT)) { // saat key Kiri ditekan
      m._rotation+=45; // symbol dengan Instance name m akan berotasi 45 derajat
      }
      };
      Key.addListener(keyListener);

      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 :

      var keyListener:Object = new Object();
      keyListener.onKeyDown = function() {
      if (Key.isDown(Key.LEFT)) { // saat key Kiri ditekan
      m._rotation+=45; // symbol dengan Instance name m akan berotasi 45 derajat
      } else if (Key.isDown(Key.RIGHT)) { // saat key Kanan ditekan
      m._rotation+=45; // symbol dengan Instance name m akan berotasi 45 derajat
      } else if (Key.isDown(Key.UP)) { // saat key Atas ditekan
      m._rotation+=45; // symbol dengan Instance name m akan berotasi 45 derajat
      } else if (Key.isDown(Key.DOWN)) { // saat key Bawah ditekan
      m._rotation+=45; // symbol dengan Instance name m akan berotasi 45 derajat
      }
      else if (Key.isDown(Key.SPACE)) { // saat key Space ditekan
      m._rotation-=45; // symbol dengan Instance name m akan berotasi 45 derajat
      }
      };
      Key.addListener(keyListener);

      Sebagai tambahan, kalau menggunakan tanda + rotasi 45 derajatnya searah jarum jam, tapi kalau menggunakan tanda – rotasi 45 derajatnya berlawanan jarum jam :D

      Semoga membantu. :)

      Suka

       

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
Ikuti

Get every new post delivered to your Inbox.

%d bloggers like this: