Tip Cepat: Cara Mendeteksi Arah Mouse Menggunakan ActionScript
() 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.