Advertisement
  1. Code
  2. ActionScript

Tip Cepat: Cara Mendeteksi Arah Mouse Menggunakan ActionScript

Scroll to top
Read Time: 4 min

() translation by (you can also view the original English article)

Di Tip Cepat ini Anda akan belajar cara mendapatkan arah mouse saat ini dalam aplikasi Flash Anda menggunakan AS3. Anda bisa menggunakan ini untuk membuat metode kontrol yang menarik untuk permainan, menggunakan mouse seperti joystick, misalnya. Untuk saat ini kita hanya akan menampilkan arah di layar.


Pratinjau

Berikut adalah contoh cepat untuk menunjukkan apa yang sedang kita kerjakan:


Gambaran Singkat

Menggunakan acara MouseEvent.MOUSE_MOVE kita akan memantau pergerakan kursor mouse, menyimpan data dalam variabel dan menampilkan arahnya saat ini.


Langkah 1: Membuat File Baru

Buka Flash dan buat File Flash baru (ActionScript 3).


Langkah 2: Buka Panel Actions

Tekan Option + F9, atau pergi ke Window > Actions untuk membuka Panel Actions.


Langkah 3: Variabel-variabel

Masukkan variabel-variabel yang akan kita gunakan; nama mereka cukup jelas:

1
var previousX:Number = 0;
2
var previousY:Number = 0;
3
var currentX:Number = 0;
4
var currentY:Number = 0;
5
var xDir:String;
6
var yDir:String;
7
var dir:TextField = new TextField();

Langkah 4: Fungsi Main

Ini adalah fungsi main:

1
function getMouseDirection():void
2
{
3
  dir.width = stage.stageWidth; //Size of the textfield

4
	addChild(dir); //Adds the textfield to the stage

5
6
   //Adds a mouse move listener to the stage and executes the checkDirection function when a mouse movement occurs

7
	stage.addEventListener(MouseEvent.MOUSE_MOVE, checkDirection);
8
}

Langkah 5: Periksa Arah

Kode ini memanggil fungsi yang memeriksa arah dan menampilkan hasilnya di TextField panggung.

1
function checkDirection(e:MouseEvent):void
2
{
3
	getHorizontalDirection();
4
	getVerticalDirection();
5
	
6
	dir.text = "x: " + xDir + ", y: " + yDir;
7
}

Langkah 6: Dapatkan Arah

Periksa arah mouse.

1
//Horizontal

2
function getHorizontalDirection():void
3
{
4
	previousX = currentX; //Checks the last position

5
	currentX = stage.mouseX; //Gets the current position

6
7
	if (previousX > currentX) //Compares both positions to determine the direction

8
	{
9
		xDir = "left";
10
	}
11
	else if (previousX < currentX)
12
	{
13
		xDir = "right";
14
	}
15
	else
16
	{
17
		xDir = "none";
18
	}
19
}
20
21
//Vertical

22
function getVerticalDirection():void
23
{
24
	previousY = currentY; //Checks the last position

25
	currentY = stage.mouseY; //Gets the current position

26
27
	if (previousY > currentY) //Compares both positions to determine the direction

28
	{
29
		yDir = "up";
30
	}
31
	else if (previousY < currentY)
32
	{
33
		yDir = "down";
34
	}
35
	else
36
	{
37
		yDir = "none";
38
	}
39
}

Langkah 7: Menjalankan Fungsi

Untuk memulai fungsi, tambahkan baris ini ke kode. Setelah fungsi getMouseDirection() dijalankan, itu akan mengatur event listener MOUSE_MOVE yang menggerakkan indikator arah.

1
getMouseDirection();

Langkah 8: Versi Kelas Dokumen

1
package
2
{
3
	import flash.display.MovieClip;
4
	import flash.text.TextField;
5
	import flash.events.MouseEvent;
6
	
7
	public class MouseMoveDemo extends MovieClip
8
	{
9
		public var previousX:Number = 0;
10
		public var previousY:Number = 0;
11
		public var currentX:Number = 0;
12
		public var currentY:Number = 0;
13
		public var xDir:String;
14
		public var yDir:String;
15
		public var dir1:TextField = new TextField();
16
		public var dir2:TextField = new TextField();
17
		
18
		public function MouseMoveDemo()
19
		{
20
			getMouseDirection();
21
		}
22
		
23
		public function getMouseDirection():void
24
		{
25
			dir1.width = stage.stageWidth;
26
			addChild(dir1);
27
			dir2.width = stage.stageWidth;
28
			dir2.y = 50;
29
			addChild(dir2);
30
			stage.addEventListener(MouseEvent.MOUSE_MOVE, checkDirection);
31
		}
32
		
33
		public function checkDirection(e:MouseEvent):void
34
		{
35
			getHorizontalDirection();
36
			getVerticalDirection();
37
			
38
			dir1.text = "x: " + xDir
39
			dir2.text = "y: " + yDir;
40
		}
41
		
42
		public function getHorizontalDirection():void
43
		{
44
			previousX = currentX;
45
			currentX = stage.mouseX;
46
			
47
			if (previousX > currentX)
48
			{
49
				xDir = "left";
50
			}
51
			else if (previousX < currentX)
52
			{
53
				xDir = "right";
54
			}
55
			else
56
			{
57
				xDir = "none";
58
			}
59
		}
60
		
61
		public function getVerticalDirection():void
62
		{
63
			previousY = currentY;
64
			currentY = stage.mouseY;
65
66
			if (previousY > currentY)
67
			{
68
				yDir = "up";
69
			}
70
			else if (previousY < currentY)
71
			{
72
				yDir = "down";
73
			}
74
			else
75
			{
76
				yDir = "none";
77
			}
78
		}
79
80
	}
81
	
82
}

Pilih pendekatan ini jika Anda lebih suka menggunakan kelas dokumen daripada kode timeline. Baca Tip Singkat ini jika Anda tidak yakin apa yang harus dilakukan dengan itu.

Anda bisa menggunakan kelas ini untuk menanamkan indikator arah mouse di dalam proyek apa pun. Cukup salin seluruh kelas ke dalam file AS baru, simpan sebagai "MouseMoveDemo.as", maka Anda dapat merujuknya menggunakan cuplikan berikut:

1
var mouseMoveDemo:MouseMoveDemo = new MouseMoveDemo();
2
addChild( mouseMoveDemo );

Kesimpulan

Ini adalah contoh dasar bagaimana Anda bisa menggunakan fungsi semacam itu; mencobanya, bereksperimen, dan gunakan dalam proyek Anda sendiri!

Terima kasih sudah membaca.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.