AS3 101: Variabel - Basix

Indonesian (Bahasa Indonesia) translation by Zadip (you can also view the original English article)

Dua kali sebulan, kami mengunjungi kembali beberapa posting favorit pembaca dari sepanjang sejarah Activetuts+. Tutorial klasik ini pertama kali diterbitkan pada Juni 2009 dan merupakan yang pertama dalam seri yang luar biasa.

Ini adalah awal dari serangkaian yang akan berjalan melalui beberapa konsep dasar pemrograman, karena mereka berlaku untuk ActionScript 3.0. Untuk memulai, kita akan berbicara tentang variabel.

AS3 101

Tut ini ditujukan langsung pada mereka yang memiliki sedikit pengalaman scripting, tetapi jika Anda telah menggunakan variabel tanpa benar-benar masuk ke seluk-beluk dari tipe data dan casting, Anda mungkin ingin mengikuti.

Terima kasih juga kepada Davide Di Stefano karena mengizinkan kami untuk merusak ikonnya.

Pengenalan

Pada langkah-langkah berikut, kita akan membuat contoh sederhana, fitur utamanya adalah deretan tombol yang bertindak sebagai grup. Tombol yang dipilih saat ini memiliki tampilan yang berbeda, tidak dapat diklik lagi dan penampilan dikembalikan ke keadaan semula ketika tombol lain diklik. Kita akan menggunakan variabel untuk melacak apa yang terjadi.

Langkah 1: Apa itu Variabel?

Hal pertama yang pertama: mari kita tentukan apa itu variabel. Jika Anda ingat matematika SMA, Anda mungkin ingat bahwa variabel adalah nilai "stand-in". Yaitu, mereka adalah simbol (biasanya huruf tunggal, seperti "x", atau "E" dan "m" dalam E=mc2) yang mewakili nilai numerik. Dipahami bahwa nilainya mungkin berubah tergantung pada faktor-faktor lain dalam suatu persamaan.

Dalam pemrograman, variabel adalah hal yang persis sama, dengan dua pengecualian utama. Pertama, dalam pemrograman, suatu variabel dapat menampung lebih dari sekedar angka. Itu dapat menampung urutan karakter teks (disebut "string"), dapat menunjukkan benar atau salah (disebut "boolean"), atau dapat menyimpan sesuatu yang jauh lebih kompleks, seperti tanggal, dokumen XML, atau film klip.

Perbedaan utama kedua dengan matematika adalah bahwa variabel pemrograman biasanya memiliki nama-nama deskriptif, bukan hanya satu huruf nama. Ada pengecualian, tentu saja: "x," "y," dan "z" biasanya digunakan untuk referensi posisi dan "i" yang umum digunakan menunjukkan iterasi saat ini melalui loop. Nama yang relevan dengan nilai yang disimpan tidak hanya umum, tetapi juga membantu menjaga program Anda terbaca. Misalnya, jika Anda ingin melacak berapa banyak partikel yang Anda miliki di layar, Anda dapat memberi nama variabel "Jumlah Partikel" atau "Partikeltotal."

Seperti variabel matematika, variabel program memiliki potensi untuk diubah selama program berlangsung. Misalnya, jika Anda mulai dengan 10 partikel, variabel "particleCount" akan memiliki nilai numerik 10. Namun, jika Anda menghasilkan 10 partikel lebih banyak, variabel kemudian akan memiliki nilai numerik 20. Ini adalah salah satu fitur utama dari variabel. Anda memiliki nama yang mereferensikan suatu nilai, tetapi nilai itu tidak harus sama setiap kali Anda mengaksesnya. Ini adalah aspek variabel yang misterius namun kuat. Anda akan belajar untuk menghargai ini, meskipun itu membingungkan pada awalnya.

Untuk meringkas definisi ini, variabel pada dasarnya adalah sebuah wadah tempat Anda menetapkan nama dan di mana Anda memberi nilai. Anda selalu bisa mendapatkan nilai yang terkandung di dalamnya dengan mereferensikan variabel dengan nama dan Anda bisa menempatkan nilai baru di dalam wadah di titik mana pun. Setiap kali Anda mengakses variabel dengan nama, Anda mendapatkan nilai saat ini yang terkandung di dalamnya. Untuk bacaan lebih lanjut, Anda mungkin ingin melihat apa yang dikatakan Wikipedia tentang variabel.

Langkah 2: Mendeklarasikan Variabel

Cukup teori, mari kita mulai bekerja membuat variabel. Buat dokumen Flash baru (ActionScript 3.0). Klik pada bingkai pertama dari layer pertama (itu harus menjadi satu-satunya bingkai).

Buka panel Actions dengan memilih Window > Actions (atau menekan F9 pada Windows atau Opt-F9 pada Mac).

Di panel Actions, ketikkan yang berikut:

1	var message;

Pada titik ini, variabel dideklarasikan. Ini berarti bahwa wadah itu ada, tetapi saat ini tidak memiliki nilai yang terkait.

Ini adalah minimum yang Anda butuhkan untuk mendeklarasikan variabel. Kata "var" dikenal sebagai kata kunci, yang berarti dicadangkan oleh bahasa ActionScript dan memiliki arti tertentu. Dalam hal ini, ia menyatakan sebuah variabel. Itu harus diikuti oleh nama variabel yang ingin digunakan; jika Anda tidak mengikuti kata kunci var dengan nama variabel Anda akan mendapatkan kesalahan saat Anda mencoba menguji film.

Langkah 3: Memberi Nama Variabel Anda

Ada beberapa aturan yang harus Anda ikuti saat memberi nama variabel. Beberapa diberlakukan oleh kompiler ActionScript, yang lain hanya konvensi yang, ketika diikuti, membantu Anda dan orang lain lebih memahami kode Anda.

Pertama, bahasa ActionScript menentukan bahwa Anda hanya dapat menggunakan karakter tertentu dalam nama variabel Anda. Ini adalah karakter alfanumerik (huruf dan angka), garis bawah dan tanda dolar. Karakter lain apa pun (tanda hubung, spasi, periode, dll.) Tidak diperbolehkan. Biasanya ini karena banyak karakter lain memiliki arti khusus dalam ActionScript.

ActionScript juga memberlakukan aturan bahwa nama variabel tidak boleh dimulai dengan angka. Angka, bagaimanapun, diizinkan setelah karakter pertama.

Juga disebutkan bahwa ActionScript peka huruf besar-kecil, artinya Anda harus cocok dengan huruf besar-kecil ketika merujuk ke variabel. Dengan kata lain, variabel "message" tidak sama dengan variabel "MESSAGE". Ini mungkin tampak membatasi sebagai yang pertama, tetapi sebenarnya ada alasan bagus untuk menegakkan ini. Namun, Space tidak mengizinkan wacana tentang alasan-alasan ini. Untuk saat ini, belajarlah mengetik nama variabel Anda persis sama setiap kali Anda ingin menggunakannya.

Komunitas ActionScripting pada umumnya telah mencapai konsensus umum tentang cara memberi nama variabel Anda, meskipun aturan berikut ini lebih banyak konvensi dan pedoman, daripada ditegakkan oleh ActionScript.

Sebagai permulaan, Anda harus menggunakan nama deskriptif. Ini adalah semacam teknik dokumentasi diri. Jika Anda memberi nama variabel "message", kemungkinan Anda sudah memiliki gagasan tentang apa peran yang dimaksud dari nilai yang terkandung. Jika hanya "m," maka itu jauh kurang jelas. Sangat menggoda untuk menggunakan nama variabel yang disingkat dan sementara Anda awalnya menulis skrip Anda, itu mungkin berarti kurang mengetik dan masih masuk akal. Orang berikutnya yang melihat kode Anda, atau Anda sendiri enam bulan kemudian, kemungkinan akan bingung.

Konvensi lain adalah penggunaan camel case. Ini adalah teknik untuk mengubah dua kata atau lebih menjadi satu kata. Ingatlah bahwa Anda tidak dapat menggunakan spasi (atau ruang putih lainnya, dalam hal ini) dalam nama Anda, jadi jika Anda ingin menggunakan frasa "total particles" Anda harus menemukan cara untuk menghilangkan ruang itu. "totalparticles" berfungsi, tetapi pemisahan antara kata-kata itu hilang. Camel case adalah metode kapitalisasi yang mengatakan bahwa seluruh kata huruf kecil kecuali untuk huruf pertama dari setiap kata, dengan pengecualian huruf pertama dari kata pertama. Dengan kata lain, mengaplikasikan kasing unta ke "total particles" menghasilkan "totalParticles".

Ada lebih banyak panduan untuk memilih nama variabel, tetapi mereka mulai mendapatkan lebih banyak esoterik dari sini. Untuk saat ini, ingatlah aturan di atas dan Anda akan memulai dengan baik. Wikipedia memiliki beberapa artikel tentang masalah ini, termasuk bagian pendek di artikel yang sebelumnya ditautkan tentang variabel secara umum, artikel ini tentang konvensi penamaan, dan artikel pendek tentang efek yang disebut shadowing. Beberapa bacaan menarik lainnya adalah daftar nama variabel buruk ini, pernyataan dua nama variabel terburuk yang pernah ada dan anekdot ini menggambarkan mengapa nama variabel penting.

Langkah 4: Mengatur Nilai

Sekarang setelah variabel kita dideklarasikan, kita dapat memberikan nilai ke dalamnya. Pada baris berikutnya dari panel Actions, ketikkan kode berikut:

1	message = "Hello";

Kita mulai dengan hanya menggunakan variabel dengan namanya. Kemudian kita mengikutinya dengan tanda sama dengan, yang dikenal sebagai operator assignment. Setelah itu, kita memiliki urutan karakter yang dikutip (diakhiri dengan titik koma, yang merupakan cara Anda mengakhiri baris dalam ActionScript - Anda akan melihat banyak penghentian titik koma dalam kode).

Operator penugasan mewajibkan ada sesuatu di kedua sisi itu. Ini bekerja dengan mengambil nilai di sisi kanan ("Halo", dalam hal ini) dan memasukkannya ke dalam variabel di sisi kiri (pesan).

Jika kita menjalankan kode ini, kita akan memiliki variabel bernama "message," yang berisi nilai "Hello." Itu tidak melakukan hal lain, jadi tidak ada yang bisa dilihat saat ini, tetapi mungkin ide yang bagus untuk menguji film untuk memastikan Anda tidak mendapatkan kesalahan, jika Anda mengetik sesuatu yang salah.

Script akan terlihat seperti ini sejauh ini:

Langkah 5: Mendapatkan Nilai

Kita sekarang memiliki wadah bernama yang memiliki nilai di dalamnya. Mari kita akses nilai itu. Dalam hal ini, kita hanya akan melacak nilai ke panel Output.

Pada baris kode baru, tulis yang berikut ini:

1	trace(message);

Seluruh skrip akan terlihat seperti ini:

Seperti yang Anda ketahui, fungsi jejak mengambil apa pun yang Anda berikan di antara tanda kurung dan memasukkannya ke panel Output. Saat Anda menguji film, Anda akan melihat panel Output terbuka secara otomatis dan nilai variabel pesan ("Hello", tanpa tanda kutip) dicetak.

Setiap kali Anda menggunakan variabel dengan nama dan tidak meletakkannya di sisi kiri operator penugasan (tanda sama dengan), Anda meminta ActionScript untuk mendapatkan nilai yang terkandung oleh variabel dan menggunakan nilai itu. Ini disebut mengevaluasi variabel.

Langkah 6: Memanipulasi Nilai

Sekarang mari kita buktikan bahwa kita dapat meletakkan nilai yang berbeda ke dalam wadah yang sama. Pada baris berikutnya, mari kita atur kembali nilai variabel message:

1	message = "How are you?";

Dan kemudian pada baris setelah itu, lacak lagi:

1	trace(message);

Seluruh skrip akan terlihat seperti ini:

Jalankan film dan Anda sekarang harus memiliki dua jejak:

Perhatikan bahwa baris 3 dan 5 identik - keduanya melacak pesan, tetapi menghasilkan hasil yang berbeda! Setiap kali kita meminta pesan dilacak, nilai variabel saat ini dievaluasi dan digunakan. Pertama diatur ke "Hello" dan itu muncul di panel Output. Setelah itu kita atur ke "Bagaimana kabarmu?" dan kemudian itu muncul di panel Output.

Ini bukan ilmu roket, tetapi ini adalah salah satu aspek yang lebih membingungkan dari penggunaan variabel. Jika Anda bisa menguasainya, Anda akan menjadi guru ActionScript.

Langkah 7: Memahami Jenis Data

ActionScript mendukung sesuatu yang disebut strong typing. Ini adalah bahasa yang menarik karena hanya diketik dengan sangat kuat jika Anda mengatakannya demikian dan dapat diketik dengan kuat pada titik-titik tertentu dan diketik dengan lemah di tempat lain. Ada sesuatu yang bisa dikatakan untuk kemudahan penggunaan bahasa yang diketik dengan lemah, tetapi sebagian besar programmer yang serius akan dapat berbicara selama beberapa jam tentang manfaat dari pengetikan yang kuat. Jadi apa itu?

Mengetik dengan kuat berarti bahwa ketika kita mendeklarasikan variabel, kita juga bisa mendeklarasikan nilai jenis apa yang bisa dimasukkan ke dalamnya. Artinya, jika kita mengatakan bahwa variabel pesan kita hanya dapat berisi string (seperti yang terjadi saat ini), maka jika kita mencoba memasukkan angka atau tanggal ke dalamnya, ActionScript akan mengeluh dalam bentuk kesalahan. Menyebabkan kesalahan mungkin tampak seperti halangan, tetapi ketika Anda memberdayakan komputer untuk menangkap kesalahan Anda, Anda sebenarnya menghemat waktu. Ketik variabel Anda yang lemah akan menghindari kesalahan kompiler, tetapi mungkin memungkinkan kesalahan logis (misalnya, mencoba huruf besar angka), dalam hal ini hal-hal dapat gagal tanpa peringatan. Mengizinkan ruang untuk kesalahan kompiler melalui pengetikan kuat kode Anda sebenarnya menghemat waktu Anda dalam jangka panjang.

Singkatnya, tipe data adalah tipe data yang nilainya. Artinya, nilai bisa berupa string, angka, boolean, tanggal, dokumen XML, klip video, dan banyak lagi tipe bawaan - bahkan tipe yang Anda buat. Variabel pesan kita secara implisit bertipe String (perhatikan huruf kapital "S"), jadi mari kita buat tipe itu secara eksplisit. Kita akan membuat kode sangat diketik, dengan mendeklarasikan tipe data. Kembali ke baris kode pertama, tempat kita mendeklarasikan variabel pesan, modifikasi untuk dibaca:

1	var message:String;

Tanda titik dua menentukan bahwa apa yang akan diikuti adalah tipe data dan kemudian Anda akan melihat tipe data itu sendiri. Semua tipe data bawaan akan dimulai dengan huruf kapital dan itu juga merupakan konvensi umum untuk tipe data khusus. Namun, kita tidak akan menulis tipe data khusus.

Jika Anda menjalankan kode pada titik ini, Anda akan melihat bahwa fungsinya persis sama.

Untuk diskursus yang lebih panjang tentang tipe data dan pengetikan yang kuat, kunjungi Wikipedia.

Langkah 8: Menyebabkan Kesalahan

Namun, kita bisa menggambarkan seberapa kuat pengetikan bekerja dengan sengaja menyebabkan kesalahan. Mari kita tambahkan beberapa kode lagi, menugaskan variabel ke nilai lain. Namun, kali ini, kita akan mencoba memasukkan nomor ke dalamnya alih-alih String. Pada akhirnya, ketikkan yang berikut ini:

1	message = 42;
2	trace(message);

Uji filmnya dan Anda akan melihat kesalahan berikut:

1	1067: Implicit coercion of a value of type int to an unrelated type String.

Bahasa ini sedikit kuno, tetapi itu berarti bahwa kita memiliki nilai angka (atau "int") dan kita mencoba memasukkannya ke dalam variabel yang sebelumnya dinyatakan hanya berisi Strings.

Mari kita melempar kesalahan lain. Hapus dua baris kode yang baru saja Anda tambahkan dan ganti dengan baris berikut:

1	isNaN(message);

Kemudian jalankan filmnya. Anda harus mendapatkan kesalahan berikut:

Fungsi isNaN() mengharapkan angka untuk diteruskan ke dalamnya melalui tanda kurung (NaN berarti Bukan Angka, yang merupakan nilai khusus yang berarti angka yang sebenarnya tidak memiliki nilai. Fungsi ini menguji kasus itu). Karena kita meneruskan sebuah String, pada dasarnya kita mendapatkan kesalahan terbalik dari apa yang kita miliki sebelumnya.

Perhatikan bahwa jika Anda menghapus datatype string dari variabel dan kemudian menjalankan kembali dua percobaan ini, Anda tidak akan mendapatkan kesalahan. Kode ini akan benar-benar dieksekusi dan dalam hal ini kurangnya datatyping bukan masalah besar. Dalam proyek yang lebih besar, memiliki asuransi semacam ini dapat mencegah kesalahan dan bug yang meruntuhkan seluruh film Anda.

Langkah 9: Buat Tombol

Itu seharusnya cukup sebagai pengantar; mari kita lihat penggunaan variabel secara spesifik dalam aksi. Kita sekarang akan mulai membuat contoh kelompok tombol yang ditunjukkan di awal tutorial ini.

Buat file Flash ActionScript 3 baru dan buat beberapa karya seni untuk dijadikan tombol. Ubah menjadi klip video.

Langkah 10: Buat Empat Instance

Seret simbol di atas panggung empat kali sehingga ada empat contoh tombol. Meskipun tidak diperlukan untuk fungsi film, Anda mungkin ingin mengaturnya secara berurutan di bagian atas panggung. Berikan masing-masing nama instance dengan mengklik masing-masing secara individual dan ketikkan nama tersebut di bidang nama instance panel Properties.

Saya telah menamai tombol saya "button1," "button2," "button3," dan "button4." Untuk mempermudah dalam mengikuti kode, konsisten dan gunakan nama saya.

Langkah 11: Buat Bidang Teks

Di bawah deretan tombol, buat bidang teks dinamis, berikan nama contoh (saya menggunakan "output") dan lanjutkan dan buat sebesar yang sesuai di atas panggung. Tujuan dari bidang teks ini adalah untuk mencatat nama tombol saat diklik. Kita tidak membutuhkan terlalu banyak ruang horisontal tetapi harus memiliki ruang vertikal sebanyak mungkin.

Langkah 12: Menghubungkan Klik Pendengar

Buat layer baru untuk menahan kode Anda, kunci dan kemudian klik di frame untuk layer itu. Buka panel Actions. Tulis kode berikut untuk menghubungkan tindakan untuk menanggapi klik mouse untuk setiap tombol:

button1.addEventListener(MouseEvent.CLICK, buttonClick);
button2.addEventListener(MouseEvent.CLICK, buttonClick);
button3.addEventListener(MouseEvent.CLICK, buttonClick);
button4.addEventListener(MouseEvent.CLICK, buttonClick);
function buttonClick(event:MouseEvent):void {
  trace("click");
}

Untuk saat ini, tindakan aktual yang diambil sebagai respons terhadap klik adalah sepele, tetapi cukup bagi kita untuk menguji. Jika Anda telah melakukan semuanya dengan benar sejauh ini, Anda harus dapat menguji film dan mengklik masing-masing dari empat tombol. Setiap kali Anda mengklik, Anda akan melihat kata "click" muncul di panel Output.

Langkah 13: Memahami Event.target

Anda mungkin bertanya-tanya bagaimana kita akan mencapai tujuan kita hanya dengan satu fungsi. Bagaimana satu fungsi itu bereaksi secara tepat untuk masing-masing dari empat tombol yang berbeda?

Tanpa terlalu banyak merinci ke dalam paradigma peristiwa dari ActionScript 3, setiap fungsi yang bertindak sebagai pendengar acara akan menerima objek acara sebagai parameter. Ada beberapa jenis objek acara, dari Event objects biasa ke MouseEvents ke KeyboardEvents untuk ProgressEvents dan banyak lagi, tetapi setiap objek acara akan memiliki beberapa karakteristik umum. Salah satu yang paling berguna dari ini adalah properti "target". Setiap objek acara menentukan properti target yang menunjuk ke hal yang sebenarnya menyebabkan acara.

Kita dapat mengetahui tombol mana yang diklik dengan mengakses target MouseEvent dalam fungsinya. Untuk melihat ini dalam tindakan, ubah konten fungsi menjadi:

1	trace(event.target.name);

Seluruh skrip terlihat seperti ini:

Jalankan kembali film dan klik tombol lagi. Anda harus melihat nama yang sesuai muncul di panel Output.

Ini berfungsi karena objek acara itu sendiri diadakan di variabel yang disebut "event." Objek itu memiliki properti (properti pada dasarnya adalah variabel, kecuali bahwa itu milik objek) yang disebut "target", dan menggunakan dot sintaks kita dapat mengakses variabel target dari variabel acara. Targetnya adalah klip video yang benar-benar diklik dan menyebabkan acara. Dengan mengakses properti nama klip video itu, kita bisa mendapatkan indikasi tombol mana yang diklik untuk mencetak ke panel Output.

Langkah 14: Keluarkan Nama Tombol

Mari sekarang kita benar-benar melakukan sesuatu ketika sebuah tombol diklik. Kita akan memasukkan nama tombol ke dalam bidang teks. Tambahkan berikut ini ke fungsi Klik tombol (mengganti, jika Anda suka, pernyataan jejak)

1	output.appendText(event.target.name + "\n");
2	output.scrollV = output.maxScrollV;

Baris pertama menempatkan nama tombol yang diklik ke dalam bidang teks. Metode appendText() akan mengambil teks saat ini dan menambahkannya. Kita akan menempatkan karakter baris baru ("\n") di akhir teks yang ditambahkan untuk memastikan bit teks berikutnya yang ditambahkan akan berada di baris baru.

Baris kedua memastikan bahwa baris teks terakhir selalu terlihat. Singkatnya, baris ini menetapkan jumlah gulir (baris teks mana yang berada di atas area yang terlihat) ke jumlah maksimum berdasarkan pada berapa banyak baris yang ada.

Langkah 15: Buat Negara yang Dipilih

Ingatlah bahwa tujuan kita adalah menjadikan tombol yang diklik sebagai tombol yang dipilih, jadi kita ingin menggambarkannya secara visual. Untuk dengan mudah melakukan perubahan visual ke tombol, kita hanya akan mengatur alpha ke sesuatu yang sedikit transparan.

Ganti pernyataan jejak dengan yang berikut ini:

1	event.target.alpha = 0.7;

Properti alpha dari klip video menyesuaikan transparansi dan berkisar dari 0 hingga 1, dengan 1 sepenuhnya buram. Oleh karena itu, 0.7 adalah sesuatu yang 70% buram, atau 30% transparan.

Jalankan film dan klik tombol. Anda harus melihatnya berubah. Tentu saja, kita masih memiliki sedikit untuk diimplementasikan, jadi setelah sebuah tombol mendapatkan tampilan yang dipilih, ia tetap seperti itu.

Langkah 16: Nonaktifkan Event.target

Anda akan melihat bahwa jika Anda mengklik tombol, Anda dapat terus mengkliknya, seperti dibuktikan oleh nama yang muncul setiap kali Anda mengklik. Kita menginginkan sesuatu seperti sekelompok tombol tab, di mana tombol yang saat ini dipilih tidak dapat diklik. Kita dapat dengan mudah mencapai ini dengan mengatur properti mouseEnabled dari tombol yang baru saja diklik (masih event.target) menjadi false.

1	event.target.mouseEnabled = false;

Seluruh skrip pada titik ini akan terlihat seperti berikut:

Langkah 17: Variabel untuk Menahan Tombol Saat Ini

Sejauh ini kita memulai dengan awal yang baik, tetapi ketika tombol bereaksi dengan tepat ketika kita mengkliknya pertama kali, kita memiliki masalah setelah itu. Tombolnya agak macet di negara yang dipilih dan tidak pernah dikembalikan ke keadaan normal ketika tombol lain diklik.

Sekarang kita bisa memperkenalkan variabel yang akan menyelesaikan semua masalah kita. Kita membutuhkan variabel yang akan berisi klip video yang merupakan tombol yang dipilih saat ini. Dengan menyimpannya dalam variabel, informasi tentang tombol mana yang saat ini dipilih dapat bertahan dari klik untuk klik.

Kita akan menyebutnya "currentButton" dan kita akan memberikannya tipe data MovieClip. Di bagian atas skrip, tulis baris ini:

1	var currentButton:MovieClip;

Langkah 18: Atur Variabel ke Event.target

Sekarang, setiap kali kita mengklik tombol, kita ingin melacak tombol itu di variabel currentButton, sehingga pada waktu tertentu kita tahu tombol mana yang saat ini. Ini dilakukan dengan modifikasi berikut untuk fungsi tombol Klik:

1	currentButton = event.target as MovieClip;

Perhatikan "sebagai MovieClip" dalam kode sebelumnya. Kita akan menutupi semua detail berdarah di sini, tetapi ini adalah keharusan karena pengetikan yang kuat. Variabel currentButton kita dinyatakan sebagai MovieClip. Namun, properti target objek acara dinyatakan sebagai objek, yang merupakan tipe data yang sangat umum. Target didefinisikan sebagai Obyek sehingga bisa generik; banyak hal dapat membuat acara dan target tidak selalu berupa MovieClip. Masalahnya adalah bahwa kedua tipe data tidak benar-benar cocok; kita berjanji bahwa hanya MovieClips yang akan masuk ke variabel currentButton, tetapi kita mencoba memasukkan Object.

Hal terbaik yang dapat kita lakukan adalah berasumsi bahwa target acara adalah, pada kenyataannya, sebuah MovieClip dan jadi kita melakukan cast di atasnya. Operator "as" mengambil nilai di sebelah kiri dan memperlakukannya seolah-olah dari tipe data yang ditentukan di sebelah kanan. Asumsinya masuk akal, karena kode tersebut berada di dalam fungsi yang seharusnya hanya dipanggil ketika pengguna mengklik MovieClip dan MovieClip yang menciptakan MouseEvent.

Perhatikan bahwa casting bukan tanpa masalah. Masalah terbesar datang dalam bentuk para pemain yang tidak bisa dihormati. Sebagai contoh, jika kita mencoba untuk melemparkan event.target kita sebagai objek XML, yah, itu tidak akan berhasil sama sekali, bukan? MovieClips dan objek XML memiliki sedikit kesamaan. Ketika para pemain dicoba, kita akan mendapatkan nilai kosong kembali, yang membuat kita dengan program yang rusak. Jika beruntung, kita akan mendapatkan kesalahan runtime yang mengatakan bahwa para pemain tidak dapat diselesaikan; jika kita beruntung kita akan mendapatkan nilai kosong dan dibiarkan bertanya-tanya mengapa semuanya tidak berjalan sesuai rencana.

Casting harus dihindari jika tidak perlu, tetapi dalam beberapa kasus (seperti ini) itu adalah satu-satunya pilihan. Jika kita tidak memasang target, kita akan mendapatkan kesalahan kompiler. Silakan dan coba jika Anda ingin melihat apa yang terjadi.

Langkah 19: Gunakan currentButton

Meskipun tidak sepenuhnya diperlukan, kita juga dapat menggunakan variabel currentButton baru kita alih-alih event.target di tubuh fungsi. Itu tidak perlu karena sementara kita dalam fungsi, kita memiliki akses ke event.target dan kode kita akan berfungsi dengan baik tanpa melakukan perubahan berikut. Namun, ada dua alasan kuat untuk membiasakan diri menggunakan variabel yang diketik (dan dicor, jika perlu) jika memungkinkan.

Alasan pertama adalah alasan utama. Seperti yang disebutkan dalam langkah terakhir tentang casting, event.target tidak diketik sebagai MovieClip. Namun kita tahu bahwa itu adalah, jadi kita melemparkan seperti. Pikirkan kembali ke langkah 9, di mana kita sengaja mengetik variabel sebagai satu hal dan mencoba menggunakannya sebagai hal lain, yang menyebabkan kesalahan. Sekarang, jika kita pergi dan memberi tahu variabel currentButton untuk mengatur alpha-nya menjadi 0.7, currentButton adalah MovieClip dan MovieClip memiliki properti alpha dan semuanya baik-baik saja. Jika kita secara tidak sengaja mencoba mengatur properti aplah (ini terjadi lebih sering daripada yang Anda pikirkan), Flash akan mengeluh tentang hal itu dan memberi tahu dan kita akan dapat memperbaiki kesalahan dengan cepat. Menggunakan event.target (yang merupakan variabel yang sangat umum, diketik dengan longgar), mungkin perlu waktu lebih lama untuk menemukan kesalahan ketik itu.

Alasan kedua berkaitan dengan kinerja. Dalam kasus khusus ini, kita tidak akan melihat keuntungan besar dari menggunakan variabel yang diketik alih-alih event.target. Dalam ActionScript 3, lebih cepat untuk menggunakan nilai dari variabel yang diketik tunggal bahwa itu keluar dari properti yang tidak diketik (seperti event.target adalah). Dalam aplikasi kritis ini mungkin memberi Anda beberapa siklus prosesor tambahan.

Jadi, pada langkah ini kita hanya mengubah kejadian event.tahu dengan currentButton, setelah itu ditetapkan.

Kode Anda akan terlihat seperti berikut:

Langkah 20: Hapus pilihan Tombol Lama Saat Ini

Sekarang kita memiliki variabel yang dideklarasikan dan memegang nilai, kita dapat menggunakannya untuk mengembalikan tampilan visual dari tombol yang dipilih sebelumnya. Yaitu, jika Anda mengklik tombol1 dan itu mengubah penampilan, maka Anda mengklik tombol2, kita ingin tombol1 terlihat normal lagi.

Bit kode berikutnya perlu terjadi sebelum kita menetapkan variabel currentButton. Kalau tidak, kita akan memengaruhi tombol saat ini, bukan tombol sebelumnya.

1	currentButton.alpha = 1;

Ini akan mengembalikan tampilan tombol sebelumnya, tetapi kita tidak akan dapat mengkliknya. Kita sebelumnya menonaktifkannya dengan menyetel properti mouseEnabled ke false, jadi kita dapat mengaktifkannya dengan menyetelnya kembali ke true. Tempatkan kode ini segera setelah sedikit kode terakhir yang ditulis:

1	currentButton.mouseEnabled = true;

Kode akan terlihat seperti ini:

Langkah 21: Periksa Nilai null

Jika Anda mencoba menjalankan film setelah langkah terakhir, Anda akan mengalami kesalahan runtime yang melibatkan "null object." Ini adalah cara ActionScript untuk mengatakan bahwa suatu variabel tidak memiliki nilai sebelum Anda mencoba melakukan sesuatu dengannya.

Apa yang terjadi adalah ketika film dimulai, variabel currentButton dideklarasikan, tetapi belum memiliki nilai. Hanya mendapat nilai ketika Anda mengklik tombol. Nah, ketika Anda mengklik tombol, fungsi buttonClick berjalan dan hal pertama yang dilakukannya adalah mencoba mengatur alpha dari apa pun yang ada di Tombol saat ini. Sayangnya, tidak ada yang ada di currentButton dan kesalahan "null object" dilemparkan. Pada titik itu, eksekusi skrip berhenti dan akhirnya kita tidak pernah sampai ke tempat di mana dapat benar-benar menetapkan tombol saat ini.

Ini mudah dihindari. Kita hanya perlu memeriksa bahwa currentButton tidak sama dengan nol sebelum melanjutkan. Ganti dua baris pertama dengan:

1	if (currentButton) {
2	currentButton.alpha = 1;
3	currentButton.mouseEnabled = true;
4	}

Tanpa terlalu banyak detail, ini menetapkan kondisi yang hanya menjalankan pernyataan setelah tanda kurung if pernyataan di dalam tanda kurung memiliki nilai. Dengan kata lain, jika currentButton belum disetel, lewati bagian tentang mengatur alpha-nya dan ambil dengan baris kode berikutnya.

Ini adalah kode lengkap, dalam bentuk teks untuk referensi:

var currentButton:MovieClip;

button1.addEventListener(MouseEvent.CLICK, buttonClick);
button2.addEventListener(MouseEvent.CLICK, buttonClick);
button3.addEventListener(MouseEvent.CLICK, buttonClick);
button4.addEventListener(MouseEvent.CLICK, buttonClick);
function buttonClick(event:MouseEvent):void {
	if (currentButton) {
		currentButton.alpha = 1;
		currentButton.mouseEnabled = true;
	}
	currentButton = event.target as MovieClip;
	trace(currentButton.name);
	output.appendText(currentButton.name + "\n");
	output.scrollV = output.maxScrollV;
	currentButton.alpha = 0.7;
	currentButton.mouseEnabled = false;
}

Pada titik ini, Anda telah membuat variabel. Ini memiliki nama dan tipe data. Ini menyimpan beberapa nilai berbeda dari waktu ke waktu, sehingga pada titik-titik tertentu dalam waktu Anda dapat melacak nilai saat ini dan melakukan sesuatu dengannya. Anda belajar tentang casting dan mengapa variabel adalah blok bangunan semua program dengan kompleksitas apa pun.

Saya harap Anda menikmati artikel pemula ini, jangan ragu untuk meninggalkan pertanyaan dan pendapat di bagian komentar. Kita memiliki lebih banyak tutorial yang direncanakan untuk seri AS3 101, jadi tunggu saja!