Tip Cepat: Menggunakan Kode Kunci AS3

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

Pelajari cara menggunakan kode kunci dalam ActionScript 3.0 untuk mendeteksi ketika pengguna menekan tombol tertentu.

Pratinjau Hasil Akhir

Mari kita lihat hasil akhir yang akan kita jalani:

Uji respons dengan menekan tombol pada keyboard Anda..

Langkah 1: Menambahkan Kotak Teks

Buka dokumen Flash baru. Tambahkan kotak teks statis di sebelah kiri yang memiliki nama kunci yang akan Anda deteksi dan kotak teks dinamis dengan teks "No" di dalamnya.

Berikan nama instance kotak teks dinamis Anda dengan format berikut: "keyname_txt". Milik saya adalah ctrl_txt, shift_txt, left_txt, up_txt, right_txt, down_txt dan space_text masing-masing.

Langkah 2: Membuat Kode Dasar

Buka File 〉 New dan pilih Actionscript File.

Sekarang siapkan kelas dokumen dasar seperti: (Jika Anda ingin belajar tentang kelas dokumen, baca Tip Cepat dari Michael)

package
{
  import flash.display.MovieClip;
	
	public class KeyCodes extends MovieClip
	{
		public function KeyCodes()
		{

		}
	}
}

Langkah 3: Membuat Event Listener

Untuk mendeteksi ketika pengguna menekan tombol dengan AS3 kita perlu menambahkan listener event yang mendengarkan pengguna menekan dan melepaskan kunci. Kita dapat melakukan ini dengan menambahkan potongan kode berikut di dalam fungsi constructor KeyCodes() kita:

public function KeyCodes()
{
	stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress); //Add an event listener to the stage that listens for a key being pressed
	stage.addEventListener(KeyboardEvent.KEY_UP, onKeyRelease); //Add an event listener to the stage that listens for a key being released
}

Sebelum kita melanjutkan, kita perlu menambahkan baris kode untuk mengimpor KeyboardEvent. Tambahkan baris kode di bawah ini dimana kita mengimpor kelas MovieClip pada baris 3:

1	package
2	{
3	import flash.display.MovieClip;
4	import flash.events.KeyboardEvent;

Langkah 4: Pengujian Sederhana

Di bawah listener kita menambahkan dua fungsi yang akan dipanggil ketika pengguna menekan atau melepaskan kunci:

public function KeyCodes()
{
	stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress); //Add an event listener to the stage that listens for a key being pressed
	stage.addEventListener(KeyboardEvent.KEY_UP, onKeyRelease); //Add an event listener to the stage that listens for a key being released

	function onKeyPress(e:KeyboardEvent):void {

	}

	function onKeyRelease(e:KeyboardEvent):void {

	}
}

Sekarang kita dapat menambahkan trace() ke setiap fungsi sehingga ketika Anda menekan tombol itu akan melacak "key pressed" ke dalam panel output dan "key released" ketika kunci dilepaskan. Untuk melakukan ini, kita dapat menambahkan kode berikut ke dalam fungsi-fungsi kita:

public function KeyCodes()
{
	stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress); //Add an event listener to the stage that listens for a key being pressed
	stage.addEventListener(KeyboardEvent.KEY_UP, onKeyRelease); //Add an event listener to the stage that listens for a key being released

	function onKeyPress(e:KeyboardEvent):void {
		trace("key pressed");
	}

	function onKeyRelease(e:KeyboardEvent):void {
		trace("key released");
	}
}

Uji film Anda (Ctrl+Enter). Saat Anda menekan tombol, itu harus melacak "key pressed" ke dalam panel output Anda dan "key released" saat Anda melepaskannya.

Langkah 5: Mendeteksi Kode Kunci

Anda dapat mendeteksi kunci mana yang telah ditekan dengan melacak kode kunci. Ubah pelacakan Anda dari trace("key pressed") ke trace(e.keyCode) dan menghapus jejak kunci yang dilepaskan. Kode Anda seharusnya sekarang terlihat seperti ini:

public function KeyCodes()
{
	stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress); //Add an event listener to the stage that listens for a key being pressed
	stage.addEventListener(KeyboardEvent.KEY_UP, onKeyRelease); //Add an event listener to the stage that listens for a key being released

	function onKeyPress(e:KeyboardEvent):void {
		trace(e.keyCode);
	}

	function onKeyRelease(e:KeyboardEvent):void {
		
	}
}

Sekarang ketika Anda menekan tombol itu akan menelusuri kode yang berhubungan dengan kunci tertentu. Jika saya menekan panah kiri itu akan melacak 37 ke panel output dan spasi akan melacak 32.

Dengan informasi ini secara harfiah di ujung jari Anda, Anda dapat menjalankan berbagai event untuk kunci yang berbeda, semua dengan satu listener event. Coba tambahkan kode ini ke fungsi Anda dan lihat apa yang terjadi saat Anda menekan bilah spasi:

function onKeyPress(e:KeyboardEvent):void {
	trace(e.keyCode);

	if(e.keyCode == 32) { //If the keycode is equal to 32 (spacebar)
		trace("spacebar pressed");
	}
}

Sekarang jika Anda menekan spasi itu tidak hanya akan menelusuri 32, itu akan melacak "spacebar pressed". Anda dapat menggunakan ini untuk menangani banyak kunci yang berbeda secara terpisah dalam satu fungsi.

Langkah 6: Mengubah Teks saat Tombol Ditekan

Lanjutkan dan hapus pelacakan di dalam pernyataan "if". Gantilah dengan ini:

function onKeyPress(e:KeyboardEvent):void {
	trace(e.keyCode);

	if(e.keyCode == 32) { //If the keycode is equal to 32 (spacebar)
		space_txt.text = "Yes"; //Change the spacebar text box to "Yes"
	}
}

Sekarang ketika Anda menekan spasi, Anda akan melihat label spasi berubah dari "No" menjadi "Yes".

Lakukan ini untuk semua kunci kecuali kontrol dan shift, karena mereka memiliki cara khusus untuk dideteksi.

function onKeyPress(e:KeyboardEvent):void {
	if(e.keyCode == 37){ //37 is keycode for left arrow
		left_txt.text = "Yes";
	}
	if(e.keyCode == 38){ //38 is keycode for up arrow
		up_txt.text = "Yes";
	}
	if(e.keyCode == 39){ //39 is keycode for right arrow
		right_txt.text = "Yes";
	}
	if(e.keyCode == 40){ //40 is keycode for down arrow
		down_txt.text = "Yes";
	}
	if(e.keyCode == 32){ //32 is keycode for spacebar
		space_txt.text = "Yes";
	}
}

Langkah 7: Mendeteksi Kontrol dan Shift

Bagaimana cara mendeteksi apakah tombol kontrol atau tombol shift ditekan? Masing-masing memiliki variabel bawaan yang mudah yang secara otomatis berubah ketika tombol ditekan. Anda dapat mendeteksi mereka menggunakan kode berikut. Letakkan kode ini di bawah pernyataan "if" lainnya di onKeyPress().

if(e.ctrlKey == true) {
	ctrl_txt.text = "Yes";
}
if(e.shiftKey == true) {
	shift_txt.text = "Yes";
}

Catatan: ada juga altKey, yang akan mendeteksi apakah tombol alt ditekan. Ini hanya akan bekerja dalam aplikasi Adobe AIR karena menekan alt ketika terfokus dalam file Flash hampir selalu mengambil fokus dari SWF dan karenanya tidak berfungsi.

Langkah 8: Menulis Fungsi Release

Untuk membuat fungsi release, yang perlu kita lakukan hanyalah menyalin kode di dalam fungsi onKeyPress() dan hanya mengubah beberapa hal.

Kita perlu mengubah semua teks untuk mengatakan "No" dan bukan "Yes" dan periksa apakah ctrlKey dan shiftKey adalah false bukan true. Seperti inilah kode terakhirnya:

package
{
	import flash.display.MovieClip;
	import flash.events.KeyboardEvent;
	
	public class KeyCodes extends MovieClip
	{
		public function KeyCodes()
		{
			stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress); //Add an event listener to the stage that listens for a key being pressed
			stage.addEventListener(KeyboardEvent.KEY_UP, onKeyRelease); //Add an event listener to the stage that listens for a key being released
			
			function onKeyPress(e:KeyboardEvent):void {
				if(e.keyCode == 37){ //37 is keycode for left arrow
					left_txt.text = "Yes";
				}
				if(e.keyCode == 38){ //38 is keycode for up arrow
					up_txt.text = "Yes";
				}
				if(e.keyCode == 39){ //39 is keycode for right arrow
					right_txt.text = "Yes";
				}
				if(e.keyCode == 40){ //40 is keycode for down arrow
					down_txt.text = "Yes";
				}
				if(e.keyCode == 32){ //32 is keycode for spacebar
					space_txt.text = "Yes";
				}
				if(e.ctrlKey == true) {
					ctrl_txt.text = "Yes";
				}
				if(e.shiftKey == true) {
					shift_txt.text = "Yes";
				}
			}
			
			function onKeyRelease(e:KeyboardEvent):void {
				if(e.keyCode == 37){ //37 is keycode for left arrow
					left_txt.text = "No";
				}
				if(e.keyCode == 38){ //38 is keycode for up arrow
					up_txt.text = "No";
				}
				if(e.keyCode == 39){ //39 is keycode for right arrow
					right_txt.text = "No";
				}
				if(e.keyCode == 40){ //40 is keycode for down arrow
					down_txt.text = "No";
				}
				if(e.keyCode == 32){ //32 is keycode for spacebar
					space_txt.text = "No";
				}
				if(e.ctrlKey == false) {
					ctrl_txt.text = "No";
				}
				if(e.shiftKey == false) {
					shift_txt.text = "No";
				}
			}
		}
	}
}

Mendeklarasikan fungsi di dalam constructor berarti bahwa mereka akan menjadi sampah yang dikumpulkan jika listener event dihapus. Jika Anda lebih suka ini tidak terjadi, Anda dapat mendeklarasikannya sebagai metode, seperti:

package
{
	import flash.display.MovieClip;
	import flash.events.KeyboardEvent;
	
	public class KeyCodes extends MovieClip
	{
		public function KeyCodes()
		{
			stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress); //Add an event listener to the stage that listens for a key being pressed
			stage.addEventListener(KeyboardEvent.KEY_UP, onKeyRelease); //Add an event listener to the stage that listens for a key being released
		}
		
		public function onKeyPress(e:KeyboardEvent):void {
			if(e.keyCode == 37){ //37 is keycode for left arrow
				left_txt.text = "Yes";
			}
			if(e.keyCode == 38){ //38 is keycode for up arrow
				up_txt.text = "Yes";
			}
			if(e.keyCode == 39){ //39 is keycode for right arrow
				right_txt.text = "Yes";
			}
			if(e.keyCode == 40){ //40 is keycode for down arrow
				down_txt.text = "Yes";
			}
			if(e.keyCode == 32){ //32 is keycode for spacebar
				space_txt.text = "Yes";
			}
			if(e.ctrlKey == true) {
				ctrl_txt.text = "Yes";
			}
			if(e.shiftKey == true) {
				shift_txt.text = "Yes";
			}
		}
		
		public function onKeyRelease(e:KeyboardEvent):void {
			if(e.keyCode == 37){ //37 is keycode for left arrow
				left_txt.text = "No";
			}
			if(e.keyCode == 38){ //38 is keycode for up arrow
				up_txt.text = "No";
			}
			if(e.keyCode == 39){ //39 is keycode for right arrow
				right_txt.text = "No";
			}
			if(e.keyCode == 40){ //40 is keycode for down arrow
				down_txt.text = "No";
			}
			if(e.keyCode == 32){ //32 is keycode for spacebar
				space_txt.text = "No";
			}
			if(e.ctrlKey == false) {
				ctrl_txt.text = "No";
			}
			if(e.shiftKey == false) {
				shift_txt.text = "No";
			}
		}
	}
}

Kesimpulan

Uji film Anda dan semua harus baik-baik saja! Jika Anda memiliki komentar atau masalah cukup posting di bagian komentar dan saya (atau orang lain) akan menjawab pertanyaan Anda.

Terima kasih telah membaca dan semoga ini membantu Anda mempelajari lebih lanjut tentang penekanan tombol di Flash.

1	package
2	{
3	import flash.display.MovieClip;
4	import flash.events.KeyboardEvent;
5
6	public class KeyCodes extends MovieClip
7	{
8	public function KeyCodes()
9	{
10	stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress); //Add an event listener to the stage that listens for a key being pressed
11	stage.addEventListener(KeyboardEvent.KEY_UP, onKeyRelease); //Add an event listener to the stage that listens for a key being released
12
13	function onKeyPress(e:KeyboardEvent):void {
14	if(e.keyCode == 37){ //37 is keycode for left arrow
15	left_txt.text = "Yes";
16	}
17	if(e.keyCode == 38){ //38 is keycode for up arrow
18	up_txt.text = "Yes";
19	}
20	if(e.keyCode == 39){ //39 is keycode for right arrow
21	right_txt.text = "Yes";
22	}
23	if(e.keyCode == 40){ //40 is keycode for down arrow
24	down_txt.text = "Yes";
25	}
26	if(e.keyCode == 32){ //32 is keycode for spacebar
27	space_txt.text = "Yes";
28	}
29	if(e.ctrlKey == true) {
30	ctrl_txt.text = "Yes";
31	}
32	if(e.shiftKey == true) {
33	shift_txt.text = "Yes";
34	}
35	}
36
37	function onKeyRelease(e:KeyboardEvent):void {
38	if(e.keyCode == 37){ //37 is keycode for left arrow
39	left_txt.text = "No";
40	}
41	if(e.keyCode == 38){ //38 is keycode for up arrow
42	up_txt.text = "No";
43	}
44	if(e.keyCode == 39){ //39 is keycode for right arrow
45	right_txt.text = "No";
46	}
47	if(e.keyCode == 40){ //40 is keycode for down arrow
48	down_txt.text = "No";
49	}
50	if(e.keyCode == 32){ //32 is keycode for spacebar
51	space_txt.text = "No";
52	}
53	if(e.ctrlKey == false) {
54	ctrl_txt.text = "No";
55	}
56	if(e.shiftKey == false) {
57	shift_txt.text = "No";
58	}
59	}
60	}
61	}
62	}

1	package
2	{
3	import flash.display.MovieClip;
4	import flash.events.KeyboardEvent;
5
6	public class KeyCodes extends MovieClip
7	{
8	public function KeyCodes()
9	{
10	stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress); //Add an event listener to the stage that listens for a key being pressed
11	stage.addEventListener(KeyboardEvent.KEY_UP, onKeyRelease); //Add an event listener to the stage that listens for a key being released
12	}
13
14	public function onKeyPress(e:KeyboardEvent):void {
15	if(e.keyCode == 37){ //37 is keycode for left arrow
16	left_txt.text = "Yes";
17	}
18	if(e.keyCode == 38){ //38 is keycode for up arrow
19	up_txt.text = "Yes";
20	}
21	if(e.keyCode == 39){ //39 is keycode for right arrow
22	right_txt.text = "Yes";
23	}
24	if(e.keyCode == 40){ //40 is keycode for down arrow
25	down_txt.text = "Yes";
26	}
27	if(e.keyCode == 32){ //32 is keycode for spacebar
28	space_txt.text = "Yes";
29	}
30	if(e.ctrlKey == true) {
31	ctrl_txt.text = "Yes";
32	}
33	if(e.shiftKey == true) {
34	shift_txt.text = "Yes";
35	}
36	}
37
38	public function onKeyRelease(e:KeyboardEvent):void {
39	if(e.keyCode == 37){ //37 is keycode for left arrow
40	left_txt.text = "No";
41	}
42	if(e.keyCode == 38){ //38 is keycode for up arrow
43	up_txt.text = "No";
44	}
45	if(e.keyCode == 39){ //39 is keycode for right arrow
46	right_txt.text = "No";
47	}
48	if(e.keyCode == 40){ //40 is keycode for down arrow
49	down_txt.text = "No";
50	}
51	if(e.keyCode == 32){ //32 is keycode for spacebar
52	space_txt.text = "No";
53	}
54	if(e.ctrlKey == false) {
55	ctrl_txt.text = "No";
56	}
57	if(e.shiftKey == false) {
58	shift_txt.text = "No";
59	}
60	}
61	}
62	}