Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Flash

Pengenalan Cepat: Komponen CheckBox dan RadioButton Flash

by
Read Time:7 minsLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Dalam Tip Cepat ini pada Komponen-komponen Flash Professional, kita akan melihat pada Komponen CheckBoxtak dan RadioButton.


Gambaran Singkat

Dalam pratinjau Anda melihat satu kotak centang di bagian atas. Ketika kotak centang ini dipilih, label kotak centang akan berubah menjadi "Checked" atau "Not Checked".

Dengan enam kotak centang bawah Anda dapat memilih olahraga apa yang Anda minati dan area teks di bawah ini akan diperbarui untuk menampilkan perubahannya. Dengan tombol radio di sebelah kanan Anda hanya dapat memilih satu opsi; label akan berubah setiap kali Anda membuat pilihan dan memperbarui untuk mengatakan opsi mana yang telah Anda pilih.


Langkah 1: Menyiapkan Dokumen

Buka Flash Document baru dan atur properti berikut:

  • Document Size: 550x400px
  • Background Color: #FFFFFF

Langkah 2: Menambahkan Komponen ke Panggung

Buka panel Components (Menu > Window > Components atau CTRL+F7).

Seret empat label, tujuh kotak centang, tiga tombol radio, dan satu bidang teks ke atas panggung.

Di panel Properties beri kotak centang pertama nama instance "toggleCheckBox".

Jika panel Properties tidak muncul, buka Menu > Window > Components atau tekan CTRL+F3.

Setel X dari kotak centang menjadi 5.00 dan Y menjadi 21.00.

Catatan: Sekarang mengikuti proses yang cukup berulang hingga semua komponen kita siap - tunggu di sana :)

Pada panel Properties beri kotak centang kedua nama instance "swimmingCheckBox". Setel X dari kotak centang menjadi 5.00 dan Y menjadi 91.00.

Di panel Properties beri kotak centang ketiga nama instance "footBallCheckBox". Setel X dari kotak centang menjadi 116.00 dan Y menjadi 191.00.

Di panel Properties beri kotak centang keempat nama instance "hikingCheckBox". Setel X dari kotak centang menjadi 5.00 dan Y menjadi 127.00.

Di panel Properties beri kotak centang kelima nama instance "soccerBox". Setel X dari kotak centang menjadi 116.00 dan Y menjadi 127.00.

Di panel Properties beri kotak centang keenam nama instance "boxingCheckBox". Setel X dari kotak centang menjadi 5.00 dan Y menjadi 161.00.

Di panel Properties beri kotak centang ketujuh nama instance "baseballCheckBox". Setel X dari kotak centang menjadi 116.00 dan Y menjadi 161.00.

Di panel Properties beri label pertama nama instance "sportsLabel". Setel X dari label menjadi 5.00 dan Y menjadi 57.00.

Di panel Properties beri label kedua nama instance "interestLabel". Setel X dari label menjadi 5.00 dan Y menjadi 191.00.

Di panel Properties beri label ketiga nama instance "attendingLabel". Setel X dari label menjadi 278.00 dan Y menjadi 21.00.

Di panel Properties beri label keempat nama instance "willAttendLabel". Setel X dari label menjadi 278.00 dan Y menjadi 143.00.

Di panel Properties beri tombol radio pertama nama instance "yesRadio". Setel X dari tombol radio menjadi 278.00 dan Y menjadi 51.00.

Di panel Properties beri tombol radio kedua nama instance "noRadio". Setel X dari tombol radio menjadi 367.00 dan Y menjadi 51.00.

Di panel Properties berikan tombol radio ketiga nama instance "notSureRadio". Setel X dari tombol radio menjadi 278.00 dan Y menjadi 88.00.

Di panel Properties berikan area teks nama instance "sportsTA". Setel X dari area teks X menjadi 5.00 dan Y menjadi 223.00.


Langkah 3: Mempersiapkan File .as dan Mengimpor Kelas

Buat file ActionScript baru dan beri nama "Main.as".

Kita akan mendeklarasikan komponen-komponen kita di file Main.as ini sehingga kita perlu mematikan "auto declare stage instances". Manfaat dari
melakukan ini adalah bahwa Anda mendapatkan petunjuk kode untuk instance.

Pergi ke Menu > File > Publish Settings. Klik Settings di sebelah "Script[Actionscript 3]"

Hapus centang "automatically declare stage instances".

Di Main.as, buka deklarasi paket dan Impor kelas yang akan kita gunakan dengan menambahkan kode berikut:


Langkah 4: Menyiapkan Kelas Main

Tambahkan Kelas, extend Movie Clip dan mengatur Fungsi Constructor kita.

Tambahkan yang berikut ke Main.as:


Langkah 5: Fungsi di Constructor Main

Di sini kita mendefinisikan fungsi setupLabel(), setUpCheckBoxes(), dan setupRadioButtons().

Dalam fungsi setupCheckBoxes(), kita menempatkan semua kotak centang olahraga ke dalam array; dengan cara ini kita dapat mengulang melalui mereka dan menambahkan event listener tunggal untuk masing-masing dari mereka, menyelamatkan kita dari keharusan secara manual mengetik addEventListener() setiap saat.

Untuk setupRadioButtons() kita telah menggunakan radioButtonGroup. Tombol radio hanya ditujukan untuk satu grup yang akan dipilih pada satu waktu. Saat kita menambahkan tombol radio ke grup, kita menyatakan tombol radio yang mana itu.

Tambahkan yang berikut ini ke Main.as:


Langkah 6: Event Listener

Di sini kita akan mengkode Event Listener kita. Tambahkan yang berikut ini ke Main.as


Kesimpulan

Menggunakan tombol radio dan kotak centang adalah cara yang bagus untuk memungkinkan pengguna Anda membuat pilihan.

Anda akan melihat di panel "Component Parameters" dari komponen yang dapat Anda periksa dan memilih properti tertentu:

Gambar ini untuk komponen kotak centang.

Propertinya adalah sebagai berikut untuk komponen kotak centang:

  • enabled: nilai Boolean yang menunjukkan apakah komponen dapat menerima masukan pengguna.
  • label: label teks untuk komponennya.
  • labelPlacement: Posisi label dalam kaitannya dengan kotak centang.
  • selected: nilai Boolean yang menunjukkan apakah kotak centang berada dalam posisi aktif atau nonaktif.
  • visible: nilai Boolean yang menunjukkan apakah instance komponen terlihat.

Properti untuk radioButton adalah sebagai berikut:

  • enabled: nilai Boolean yang menunjukkan apakah komponen dapat menerima masukan pengguna.
  • groupName: Nama grup untuk instance grup atau tombol radio.
  • label: label teks untuk komponennya.
  • labelPlacement: Posisi label dalam kaitannya dengan radioButton..
  • selected: nilai Boolean yang menunjukkan apakah tombol radio berada dalam posisi aktif atau tidak aktif.
  • value: Nilai yang ditentukan pengguna yang dikaitkan dengan tombol radio..
  • visible: nilai Boolean yang menunjukkan apakah instance komponen terlihat.

Terima kasih telah membaca dan tetap membuka mata Anda untuk tutorial komponen yang akan datang!

Advertisement
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.