RSS

AS3 — Animasi Kipas Angin Dengan Button

15 Jul

Halo🙂
Postingan kali ini adalah tentang membuat animasi kipas angin yang berputar dengan kecepatan yang berbeda saat suatu button di tekan. Atau berhenti. Jadi prinsipnya sama dengan kipas angin di dunia nyata.
Berikut adalah tampilan hasil jadinya : [dalam bentuk video karena saya ingin supaya hasilnya bisa dilihat dan karena saya tidak bisa mengembed flash di wordpress]

Seperti yang terlihat, saat button yang berbeda ditekan kecepatan/rotasi kipas angin akan berbeda.

  • Masukkan gambar yang akan digunakan ke dalam Flash dengan menggunakan menu File->Import->Import to Stage. Kemudian ubah gambar tersebut menjadi Movie Clip dengan menekan F8. Beri nama mc_KipasAngin, pastikan titik Registration terletak di bagian tengah. Centang pilihan Export for ActionScript.

1

  • Atur posisi kipas angin, ingat koordinatnya kemudian hapus. Selanjutnya tarik Component Button dari jendela Components. Kalau tidak ada jendela Components buka dengan menggunakan menu Window->Components.

2

  • Atur posisi button yang diinginkan dan sekali lagi ingat koordinatnya kemudian hapus.
  • Selanjutnya buka FlashDevelop atau gunakan AdobeFlash dan ketikkan code berikut ini :

3

  • Test dengan menekan Ctrl+Enter

Penjelasan code :

public var kipasangin:mc_KipasAngin = new mc_KipasAngin();
public var waktu:Timer = new Timer(0, 0);
public var tombolberhenti:Button = new Button();
 public var tombolkecepatan1:Button = new Button();
public var tombolkecepatan2:Button = new Button();
public var kecepatan:int = new int();

mendeklarasikan variabel variabel yang digunakan

tombolberhenti.x = 35;
tombolberhenti.y = 350;
tombolberhenti.label = "BERHENTI";
addChild(tombolberhenti);
tombolberhenti.addEventListener(MouseEvent.CLICK, kipasBerhenti);

.x dan .y adalah untuk menentukan koordinat, .label untuk memberi ‘tampilan nama’ pada button, addChild untuk menambah/memunculkan objek di layar. addEventListener untuk membuat sesuatu terjadi ketika mouse di klik [karena eventnya adalah MouseEvent.CLICK] yaitu memanggil fungsi bernama kipasBerhenti

kipasangin.rotation += 10;

membuat objek kipasangin berputar sebanyak 10 derajat

waktu.stop();

menghentikan timer waktu

waktu.removeEventListener(TimerEvent.TIMER, berputarkedua);
waktu.addEventListener(TimerEvent.TIMER, berputarpertama);
waktu.start();

Menghapus event yang sedang berlangsung sebelum memulai event baru. Karena ini menggunakan class Timer maka harus diberi .start() untuk memulai rotasi.

Fla dari postingan ini bisa di download di sini :

KIPAS ANGIN

Terima kasih sudah mampir dan membaca blog saya ini ^_^

 
Tinggalkan komentar

Ditulis oleh pada Juli 15, 2015 in Flash

 

Tag: , , , ,

Tinggalkan Balasan

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

Logo WordPress.com

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

Gambar Twitter

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

Foto Facebook

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

Foto Google+

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

Connecting to %s

 
%d blogger menyukai ini: