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

AS3 101: Pendahuluan OOP – Basix

by
Read Time:25 minsLanguages:
This post is part of a series called AS3 101.
AS3 101: XML – Basix
AS3 101: Five Reasons to use Setters and Getters

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

Dua kali sebulan, kita mengunjungi kembali beberapa postingan favorit pembaca dari sepanjang sejarah Activetuts+. Tutorial retro-Active minggu ini, pertama kali diterbitkan pada Oktober 2010, merupakan pengantar pemrograman berorientasi objek di AS3. Jangan lupa untuk melihat tutorial AS3 101 lainnya!

Pemrograman Berorientasi Objek adalah sedikit topik hangat. Semakin banyak bahasa pemrograman yang mendukungnya (Ruby, misalnya), dan semakin banyak bahasa yang sebelumnya tidak mendukung Pemrograman Berorientasi Objek (singkatnya OOP) telah dirilis dengan versi yang mendukung, seperti PHP dan ActionScript . Beberapa bahasa hanya berfungsi jika Anda menggunakan seluruh OOP untuk memulai, seperti Java dan Objective-C.

Ini sebenarnya sudah ada sejak lama, tetapi muncul di pusat perhatian pada 1990-an terutama karena kelebihannya dengan pemrograman GUI dan munculnya C++ dan Objective-C. Wikipedia memiliki bagian yang menarik tentang sejarah OOP, yang merupakan tempat yang tepat untuk mulai belajar.


Pengenalan

Jika Anda baru mengenal Pemrograman Berorientasi Objek, Anda memiliki sedikit kurva pembelajaran di depan Anda. Namun, merangkul teknik ini bukan hanya hal "dalam" yang harus dilakukan; itu dapat mengurangi waktu pengembangan Anda sambil juga mengurangi jumlah bug dalam kode Anda. Itu membuat Anda terorganisir dan mencegah duplikasi yang tidak perlu. Tapi mungkin yang lebih menarik dari janji-janji luhur itu adalah fakta bahwa Adobe tentu saja meletakkan semua bobot mereka di belakang konsep OOP ketika datang ke ActionScript. ActionScript 1 sama sekali tidak Berorientasi Objek, dan AS 2 hanya Berorientasi Objek sebagai kenyamanan pengembang. Sebaliknya, AS 3 mendukung fitur Berorientasi Objek penuh, dan jika ada, hanya akan berbuat lebih banyak di tahun-tahun mendatang. Jadi, jika Anda suka memprogram Flash dan tidak ingin ketinggalan, sebaiknya Anda mengadopsi OOP sebagai cara hidup.

Dalam tutorial ini kita secara bertahap akan memperkenalkan beberapa konsep inti yang terlibat dalam Pemrograman Berorientasi Objek. Produk akhir yang keluar dari Flash akan sedikit loyo, tetapi ini baru Bagian 1. Anda akan melihat beberapa eksplorasi praktis teknik OOP, bahkan jika tutorial ini tidak benar-benar membangun proyek tertentu.

Namun, Anda akan belajar membuat tombol yang dapat digunakan kembali yang dapat digunakan dalam kasus-kasus di mana tombol cepat dan kotor diperlukan, atau bahkan, dengan modifikasi, sebagai elemen kunci untuk proyek Anda berikutnya.


Langkah 1: Pertanyaan Besar

Jadi apa maksud Pemrograman Berorientasi Objek ini?

Pertama, izinkan saya menjelaskan apa yang bukan. Pemrograman Berorientasi Objek (atau singkatnya OOP) bukan satu-satunya atau bahkan selalu cara terbaik untuk memprogram dalam ActionScript 3. Tampaknya ada mitos yang beredar sejak ActionScript 3 memulai debutnya bahwa, untuk menggunakan AS3, Anda harus menggunakan OOP.

Memang benar bahwa AS3 jauh lebih cocok untuk OOP daripada AS2, dan bahwa Anda didorong untuk bergerak ke arah itu, tidak benar bahwa Anda harus belajar menulis kelas dan membuat instance objek untuk membangun aplikasi nyata dalam Flash. Jika Anda telah mengikuti seri AS3 101 hingga sekarang, Anda mungkin telah memperhatikan bahwa setiap baris ActionScript 3 yang ditulis dalam proses berada di panel skrip, bukan file kelas. Ini akan membantu menggambarkan bahwa sangat diterima untuk tidak menggunakan OOP saat Anda bekerja di Flash.

Yang sedang berkata, ActionScript 3 benar-benar bersinar ketika Anda mulai merangkul OOP. Dan bukan hanya AS3, tetapi bahasa apa pun yang mendukung OOP dapat digunakan secara lebih efektif ketika teknik OOP digunakan. Ini karena OOP benar-benar hanya sebuah teknik – teknik besar, kompleks dengan banyak pilihan untuk dipertimbangkan, tetapi tetap saja, hanya teknik – dan bukan mandat. Dan itu adalah teknik yang hebat, yang harus Anda mulai kuasai. Dan itu sebabnya kamu di sini, kan?


Langkah 2: Kelas dan Objek

Pemrograman Berorientasi Objek benar-benar bermuara pada dua unit dasar: kelas dan objek. Keduanya terkait secara intrinsik: kelas melahirkan objek.

Pikirkan kelas sebagai blueprint rumah, dan objek sebagai rumah yang sebenarnya. Blueprint lebih merupakan skema untuk seperti apa rumah itu, bukan rumah yang sebenarnya. Ketika Anda menulis kode berorientasi objek, Anda menulis blueprints, kelas-kelas. Kode Anda kemudian membuat objek dari kelas-kelas ini ketika dijalankan.

Blueprint juga dapat digunakan kembali untuk membuat lebih dari satu rumah. Dalam perkembangan perumahan tertentu, Anda dapat melihat ini beraksi; teknik hemat biaya yang membayar arsitek untuk satu blueprint, tetapi menghasilkan beberapa rumah dari blueprint itu. Semua rumah ini adalah entitas yang unik, dan apa yang terjadi dalam satu rumah terisolasi dari apa yang terjadi di rumah lain. Namun, mereka berbagi banyak fitur yang sama, seperti tata letak pipa ledeng dan kabel listrik, atau di mana tangga berada. Semua rumah mungkin memiliki pintu depan di lokasi yang sama, tetapi satu rumah mungkin memiliki pintu besi yang dicat merah, dan rumah lain mungkin memiliki pintu kayu yang tidak dicat dengan pengetuk.

Kelas, juga dapat membuat lebih dari satu objek. Objek-objek ini semuanya memiliki tipe yang sama, tetapi semuanya merupakan entitas unik, seperti rumah. Sekali lagi, mereka berbagi banyak fitur umum, tetapi mempertahankan identitas terpisah. Objek yang memuat data dari sumber eksternal akan memiliki, sebagai fitur umum, kemampuan untuk memuat data dan mengirimkan peristiwa lengkap ketika sudah siap. Namun, satu instance dari pemuat ini akan memiliki karakteristik unik yang memuat data dari satu URL, sedangkan instance lain akan memuat data dari URL yang berbeda.

Istilah instance adalah kata yang menggambarkan objek. Ketika sebuah objek dibuat dari suatu kelas, ia dikatakan sebagai instantiated, dan dengan demikian sebuah instance dari kelas tersebut lahir. Objek kata biasanya bersinonim dengan instance.

Jika terminologi mengganggu Anda, ingatlah hubungan Simbol Perpustakaan/Instance yang telah ada sejak Flash 1. Simbol adalah satu item di perpustakaan. Sebuah instance adalah manifestasi khusus dari simbol itu. Mungkin ada lebih dari satu contoh simbol yang diberikan, dan perubahan pada karya seni simbol tunggal akan mengubah semua instance simbol itu. Namun setiap instance individual dapat mempertahankan beberapa properti unik, seperti posisi, rotasi, transformasi warna, filter, dan skala (untuk beberapa nama). Ini secara langsung dianalogikan dengan kelas dan objek (instance). Faktanya, ini lebih dari sekadar analog, seperti yang akan kita lihat di bagian selanjutnya dari seri ini.


Langkah 3: Temui Kelas Dokumen

Baiklah, mari kita memasukinya, oke? Saya pikir cara terbaik untuk membuat kaki Anda basah di OOP AS3 adalah menjadi terbiasa dengan kelas dokumen. Kelas dokumen adalah kelas seperti yang lainnya di AS3, kecuali bahwa ia memiliki hubungan yang sangat istimewa dengan file Flash. Ini merupakan kelas yang mewakili SWF yang Anda terbitkan. Kelas dokumen akan dipakai saat SWF mulai. Ini analog dengan gagasan fungsi "utama" jika Anda memiliki  dalam background C, atau metode "utama" dari kelas utama di Jawa.


Langkah 4: Buat Folder Proyek

Mari kita buat kelas dokumen, yang akan bertindak sebagai dasar untuk langkah-langkah selanjutnya dalam tutorial ini. Untuk melakukannya, pertama buat folder pada sistem file Anda yang akan menampung proyek khusus ini.

Sekarang buat file Flash (ActionScript 3.0), dan simpan ke folder ini. Nama itu tidak terlalu penting, tapi aku akan menamai namaku MeetTheDocumentClass.fla


Langkah 5: File Teks Kelas Dokumen

Sekarang Anda perlu membuat file teks. Anda dapat menggunakan Flash CS3 + untuk ini, atau Anda dapat menggunakan Flex/Flash Builder, atau Anda dapat menggunakan editor teks lain yang andal. FlashDevelop adalah pilihan yang besar (dan gratis), jika Anda pada Windows. Ada banyak pilihan dalam editor teks, dan tidak ada jawaban yang benar (walaupun, seperti yang saya katakan kepada siswa saya, ada satu jawaban yang salah. Editor teks yang ada dalam Flash CS3/4 sebenarnya cukup buruk, dan semakin cepat Anda menerima kenyataan itu, semakin cepat Anda akan menikmati pengkodean dalam editor nyata). Secara pribadi, saya suka TextMate, tetapi perlu diingat bahwa yang penting adalah teks di dalam file.

Semua yang dikatakan, buat file baru di editor yang Anda pilih (jika Anda menggunakan Flash CS3+, buka menu File, pilih New, dan kemudian pilih File ActionScript dari daftar. Jika tidak, maka saya menganggap Anda cukup familiar dengan editor Anda untuk dapat melakukan ini tanpa arahan dari saya).

Simpan file ini sebagai DocumentClass.as dalam folder yang sama dengan file Flash Anda. Ini penting: lokasi dan nama sangat penting. Nama tidak harus benar-benar menjadi "DocumentClass.as" tetapi itu yang akan saya gunakan dan untuk mencegah kebingungan, saya sarankan Anda melakukan apa yang saya lakukan. Nama dapat berupa apa saja yang Anda inginkan (kurang lebih), tetapi poin saya adalah bahwa nama tersebut memainkan peran penting dalam AS3 OOP, jadi perhatikanlah. Kesepakatan yang sama dengan lokasi file; secara teknis bisa di mana saja tetapi untuk kenyamanan cukup ikuti petunjuk saya. Lebih banyak opsi akan terungkap pada akhir seri ini.

Untuk meringkas, inilah folder proyek saya yang ada:


Langkah 6: Tulis Kelas Dokumen

Anda sekarang dihadapkan dengan file kosong. Jika Anda pernah mengalami penghambatan penulis (saya punya, yang mungkin ditebak oleh pembaca biasa...), Anda dapat terhibur dengan kenyataan bahwa hal pertama yang perlu Anda tulis adalah benar-benar sederhana. Anda harus menulis yang berikut ini:

Wow, apa semua itu? Yah, itu sedikit lebih daripada kita perlu menjelaskan sekarang. Saya hanya akan menunjukkan beberapa tempat menarik.

Pertama, perhatikan bahwa package tersebut mencakup semuanya. Jangan khawatir tentang apa ini sekarang, ingatlah bahwa itu harus ada di sana, dan kelas harus terkandung di dalamnya.

Kedua, kita memiliki pernyataan import. Anda mungkin belum pernah melihat baris kode seperti ini sebelumnya; jika Anda terjebak untuk coding di panel Script sampai sekarang dan belum memanfaatkan perpustakaan ActionScript pihak ketiga, Anda tidak perlu menulis pernyataan impor. Dalam dunia OOP, setiap kelas perlu mengimpor berbagai kelas yang dibutuhkan untuk melakukan hal tersebut. Lebih lanjut tentang impor nanti.

Ketiga, "pembungkus" berikutnya adalah class itu sendiri. Anda dapat melihat kata kunci "class" di baris ketiga. Anatomi dari baris ini lebih dari yang kita butuhkan saat ini, hanya perhatikan bahwa kata yang mengikuti kata "class" adalah nama kelas. Anda mungkin memperhatikan bahwa nama yang saya gunakan sama dengan nama file, tanpa ekstensi. Ini bukan kebetulan. Agar kelas berfungsi di AS3, nama kelas harus cocok dengan nama file. Jangan lupakan itu.

Kita akan kembali ke bit "extends MovieClip" di tutorial berikutnya. Untuk saat ini, ketahuilah bahwa bit ini diperlukan untuk kelas dokumen (Anda juga dapat memperluas Sprite, a la "extends Sprite", jika Anda tidak memerlukan timeline, dan jika Anda mengubah baris impor ke "import flash.display.Sprite;")

Akhirnya, kita memiliki konstruktor.


Langkah 7: Constructor

Dalam contoh sebelumnya, ada (hampir) fungsi normal yang didefinisikan dalam kelas. Hampir normal, kecuali untuk "publik" di depan, dan tipe data yang hilang. Sekali lagi, jangan khawatir tentang "publik" untuk saat ini, itu akan datang pada waktunya. Namun, perhatikan nama fungsinya. Itu benar, itu sama dengan file dan sebagai nama kelas. Semoga Anda tidak terlalu paranoid, karena ini bukan konspirasi. Hanya cara kerjanya. Dengan memberi nama fungsi dengan nama yang sama dengan kelas, kita membuat fungsi khusus yang disebut constructor. Constructor dijalankan selama instantiasi. Semoga Anda mengikuti terminologi baru, karena kita hanya menggunakan dua istilah baru dalam kalimat yang sama. nerdCred++;

Objek akan dapat memiliki fungsi-fungsi lain di dalamnya, yang dapat Anda definisikan, tetapi konstruktor adalah satu-satunya fungsi yang dipanggil secara otomatis saat instantiasi. Oleh karena itu, konstruktor adalah tempat Anda ingin meletakkan kode yang harus dijalankan untuk mendapatkan objek yang siap digunakan awal. Misalnya, jika Anda menulis kelas untuk objek yang tugasnya memuat beberapa XML, parsing, lalu muat gambar mini berdasarkan data itu, Anda mungkin ingin membuat URLLoader, mengatur pendengar acara, dan bahkan mungkin mulai memuat, semua saat Anda membuat objek. Logika itu kemudian bisa masuk ke constructor.


Langkah 8: Halo, Dunia!

Sebagai contoh praktis, kita akan melakukan sedikit program "Halo, Dunia". Kita tidak akan hanya melacak kata-kata ke panel Output, tidak, itu sedikit mamsy dan pasti terlalu pamsy. Kita akan membuat TextField, menambahkannya ke panggung, dan memasukkan beberapa teks ke dalamnya. Perluas file DocumentClass.as Anda agar terlihat seperti ini (perubahan dicetak tebal):

Perhatikan bahwa selain tiga baris yang ditambahkan ke konstruktor, sekarang ada garis import tambahan untuk mengantisipasi TextField.

Kita jelas dapat mengambilnya lebih jauh, memposisikan dan menata teks, dan Anda dipersilakan untuk melakukannya sendiri, tetapi untuk sekarang ini melayani tujuannya. Kode ini menciptakan kotak teks dengan kata-kata "Halo Kata" di dalamnya, dan menampilkannya di atas panggung. Kecuali satu hal: File Flash tidak tahu bahwa itu seharusnya memiliki kelas dokumen. Jika Anda mencoba menjalankan file Flash Anda sekarang, Anda akan mendapatkan jendela kosong. Mari kita perbaiki itu selanjutnya.


Langkah 9: Menetapkan Kelas Dokumen

Seperti yang disebutkan di akhir langkah terakhir, file Flash (MeetTheDocumentClass.fla dalam kasus saya) belum tahu bahwa ia memiliki kelas dokumen khusus yang terkait dengannya. Secara teknis, itu memang memiliki kelas dokumen, hanya kelas dokumen yang hanya MovieClip tua biasa, sehingga tidak akan berbuat banyak.

Adalah baik untuk mengetahui hal itu, tetapi yang benar-benar kita inginkan saat ini adalah membiarkan file Flash ini tahu di mana file DocumentClass.as yang baru saja kita tulis. Untuk melakukannya, pertama-tama pastikan tidak ada yang dipilih (Anda dapat mengklik di mana saja pada tahap di mana tidak ada aset visual, atau Anda dapat memilih Edit > Deselect All, atau tekan Command-Shift-A atau Control-Shift-A) .

Selanjutnya, buka panel Properties. Jika Anda telah berhasil membatalkan pilihan semuanya, panel Properties akan mengatakan "Dokumen" di bagian atas

Sekarang, di mana dikatakan "Class:" di bawah bagian "Publish" dari panel Properties, ketik "DocumentClass" (atau nama apa pun yang Anda gunakan untuk versi kelas Anda, jika Anda bersikeras menempa jalur Anda sendiri). Perhatikan bahwa ini tanpa ".as" - itu hanya nama kelas, bukan nama file.

Jika Anda telah mengikuti petunjuk sejauh ini, Anda harus dapat menekan Return/Enter dan semuanya akan baik-baik saja. Jika entah bagaimana Anda salah nama kelas, atau tidak menyimpan file di folder yang sama, Anda tidak akan mendapatkan kesalahan saat Anda mempublikasikan. Anda seharusnya mendapatkan kesalahan ini saat mengetikkan nama kelas:

Jika Anda mengabaikannya, atau tidak melihatnya karena sebelumnya Anda telah memeriksa opsi "Don't show again", maka SWF akan menerbitkan tanpa kesalahan, tetapi Anda akan mendapatkan layar putih polos. Jika ini terjadi, periksa ulang nama kelas yang telah Anda masukkan ke panel Properties.

Setelah kelas dokumen terhubung dengan benar, Anda dapat memverifikasi itu dengan mengklik ikon pensil kecil di sebelah bidang teks kelas dokumen di panel properti. Ini akan membuka file di Flash CS3 + untuk diedit. Bukannya saya sarankan menyimpannya di sana, tetapi memverifikasi bahwa Anda memiliki file yang tepat dapat menjadi tip pemecahan masalah yang bermanfaat.

Setelah semuanya selesai, silakan dan uji film Anda. Anda akan melihat jendela polos dengan tulisan Hallo Dunia di dalamnya:


Langkah 10: Properti

Pada titik ini, Anda sudah diatur untuk memasukkan logika aplikasi Anda ke dalam kelas dokumen dan mulai membuat SWF yang lebih menarik. Namun, Anda mungkin akan membutuhkan lebih dari sekadar fungsi konstruktor untuk membuat SWF tersebut menarik. Biasanya Anda perlu membuat objek lain, menempelkannya dalam variabel, menggunakan fungsi untuk mendengarkan acara dan memiliki hal-hal ini berinteraksi dengan cara yang bermakna. Tentu saja, di OOP Anda memiliki hal-hal seperti variabel dan fungsi, hanya saja mereka menggunakan nama yang berbeda: properties dan methods (kita akan menangani metode pada langkah berikutnya).

Properti, pada intinya, hanyalah variabel. Namun, ada sedikit perbedaan antara properti dan variabel. Ini halus, dan kita harus mengilustrasikannya dengan sebuah contoh, tetapi kita memiliki beberapa alasan untuk dibahas sebelum kita sampai di sana.

Pertama, properti ditulis identik dengan variabel, dengan dua peringatan. Ini sebuah contoh:

Peringatan pertama harus jelas: ada "pribadi" besar tua di depan kata kunci var. "private" mirip dengan "public" yang saya minta Anda abaikan beberapa langkah yang lalu. Saya akan meminta Anda untuk terus mengabaikannya. Kita tidak akan membahasnya hingga tutorial berikutnya.

Peringatan kedua tidak akan terlihat jelas, karena cuplikan di luar konteks. Ini lebih tepat:

Perhatikan posisi properti terkait dengan struktur kelas. Fungsi konstruktor dan properti keduanya pada "level" dan "milik" yang sama langsung ke kelas (keduanya bersarang langsung ke dalam kelas). Karakteristik ini menjadikan variabel properti (meskipun dideklarasikan dengan menggunakan kata kunci var).

Sebaliknya, variabel bernama "foo" dalam cuplikan di bawah ini hanyalah variabel:

Why? Karena itu "dimiliki" oleh fungsi, bukan oleh kelas. Ketika suatu variabel atau fungsi dideklarasikan dalam batas kurung kurawal (yang secara teknis setiap waktu), ia ada hanya selama hal yang diwakili oleh kurung kurawal ada. Jadi - dan di sini adalah perbedaan halus - properti "tf" ada selama objek "DocumentClass" ada, dan "milik" ke objek DocumentClass, tetapi variabel "foo" hanya ada selama fungsi yang mengandungnya berjalan, dan tidak ada lagi setelah fungsi selesai dieksekusi.

Tentu saja ada pengecualian untuk aturan "kurung kurawal". Loop, misalnya, tidak memengaruhi ruang lingkup variabel yang dideklarasikan di dalamnya, jadi ambil aturan itu dengan sebutir garam. Anda tidak akan menemukannya disebutkan dalam buku pemrograman.

Anda mungkin bertanya,

tapi tunggu, bukankah fungsi ada di objek pada tingkat yang sama dengan properti? Bukankah itu ada secara permanen seperti properti, dan karena itu bukankah variabel di dalam fungsi juga ada?

Anda ada benarnya, bagaimanapun, perbedaannya adalah bahwa potensi untuk menjalankan fungsi ada di dalam objek, sedangkan fungsi yang sebenarnya berjalan hanya ada pada saat dipanggil. Variabel akan dibuat selama menjalankan, dan karena itu lenyap setelah menjalankan dilakukan. Saya memang mengatakan perbedaannya halus. Tapi ini penting, seperti yang akan kita lihat nanti.


Langkah 11: Metode

Sebelum kita sampai pada hal itu, saya perlu memperkirakan apa yang baru saja kita pelajari untuk fungsi dan metode. Pada dasarnya, metode hanyalah fungsi-fungsi yang dimiliki oleh suatu objek, seperti fungsi konstruktor, hanya saja mereka tidak dinaikkan ke status khusus apa pun. Di sini, kita menambahkan metode lain:

Sekarang, onButtonClick() adalah fungsi yang cukup akrab, kecuali untuk public yang sial di awal. Sekali lagi, tunda. Kalau tidak, Anda harus mengenali ini sebagai fungsi biasa. Satu-satunya perbedaan adalah bahwa konsep "kepemilikan" yang sama berlaku untuk metode seperti halnya pada properti, versus variabel dan fungsi reguler. Akhirnya, mari kita jelajahi ini dengan contoh yang berfungsi.

Di DocumentClass Anda, kita akan menyempurnakan cuplikan yang telah dilihat. Jadikan kelas Anda terlihat seperti ini:

Perhatikan perubahan dan penambahan: Kita telah menambahkan properti yang disebut "tf". Di konstruktor, kami masih membuat TextField, tetapi alih-alih membuat variabel di konstruktor seperti yang dilakukan sebelumnya, kita cukup menggunakan "tf" - properti. TextField kita sekarang disimpan di properti alih-alih variabel.

Kita juga menambahkan pendengar klik ke panggung (tidak, panggung bukan benar-benar sebuah tombol, tetapi dalam hal ini menghemat kita dari keharusan membuat MovieClip untuk bertindak sebagai tombol). Dan pendengar itu adalah metode yang disebut onButtonClick(), dan selain sebagai metode alih-alih fungsi, itu identik dengan pendengar acara lainnya.

Apa yang dilakukan metode ini sangat penting: itu menggantikan teks di bidang teks dengan string lain. Ini hanya dapat terjadi jika tf tetap mempertahankan nilainya dari waktu ke waktu. Jika filmnya berfungsi, maka kita tahu tf masih mereferensikan TextField yang dibuat dalam konstruktor, meskipun beberapa detik mungkin terlewati antara penciptaan TextField dan populasi ulangnya.


Langkah 12: Menjelajahi Lingkup

Sekarang, jika Anda menghapus properti dan mengembalikan kreasi TextField menjadi variabel, Anda sebenarnya tidak akan bisa mengujinya, karena kompiler akan memberi Anda kesalahan yang mengatakan tidak dapat menemukan properti yang disebut tf. Itu adalah, kode ini:

Menghasilkan kesalahan ini:

Apa yang terjadi? Nah, dalam ActionScript, variabel yang dibuat dalam satu fungsi ada selama durasi fungsi (yang lebih dari beberapa baris kemudian), dan hilang setelah fungsi kedua berjalan. Jadi jika kita membuat variabel tf di fungsi konstruktor dan mencoba menggunakannya di fungsi onButtonClick(), kita punya masalah. tf tidak ada lagi saat onButtonClick() berjalan.

Namun, properti tetap ada sepanjang umur suatu objek, jadi jika kita menyimpan TextField di properti alih-alih variabel, kita memiliki akses ke TextField itu di fungsi lain, hampir setiap saat.

Dalam konteks ini, variabel kadang-kadang disebut sebagai variabel lokal karena mereka lokal ke fungsi.

Dan ini adalah titik halus yang memulai langkah maraton ini. Semoga itu meresap, karena saya menemukan titik ini menjadi penyebab banyak "gotcha" untuk memulai siswa OOP.

Ingatlah bahwa ada lebih banyak hal yang terjadi dengan properti, metode, kegigihan, dan referensi. Saya merasa saya sudah cukup menekankan poin, dan tidak akan membantu Anda dengan membedah poin referensi yang lebih baik dan menunda pengetahuan penting lainnya.


Langkah 13: Tentang tombol yang...

OK, pada langkah terakhir saya melewatkan pembuatan tombol dan hanya menggunakan panggung sebagai area yang dapat diklik. Kita akan mengubahnya, tetapi bukan karena mengklik pada tahap itu salah (tidak, dalam keadaan tertentu), tetapi karena kita dapat membuat kelas Button untuk lebih mengeksplorasi OOP.

Tujuan kita adalah untuk menciptakan kelas Button, dari mana kita dapat membuat beberapa Button objek. Setiap objek Button akan memiliki beberapa fungsionalitas inti yang universal di seluruh tombol:

  • Arahkan kursor dan kondisi normal
  • Kursor berubah menjadi ikon tangan
  • Background grafik dengan label teks

Pada saat yang sama, perlu ada hal-hal unik untuk setiap tombol:

  • Teks label
  • Tindakan klik
  • Posisi tombol

Kita akan melihat apa yang diperlukan untuk membuat kelas kedua yang terlibat dalam proyek Anda dan menggabungkan persyaratan ini seiring berjalannya waktu.


Langkah 14: Buat Kelas Tombol

Kita akan membuat kelas yang, ketika instantiated, menggambar persegi panjang, menempatkan teks ke dalam label, menangani roll overs dan out, dan dapat menanggapi klik. Mulailah dengan membuat file teks baru di editor teks Anda. Simpan sebagai "Button101.as" di folder yang sama dengan file Flash Anda. Ini penting. Jangan mengacaukannya! Aku serius.


Langkah 15: Tulis pelat Boiler

Di file baru Anda, mulai stubbing di boilerplate kelas:


Langkah 16: Tambahkan Beberapa Properti

Selanjutnya kita akan menambahkan beberapa properti untuk menahan bentuk background dan label:

Properti bgd akan menyimpan referensi ke Shape yang akan kita gambar secara program menjadi persegi panjang yang diisi, dan ditambahkan sebagai anak Sprite.

Properti labelField akan menyimpan referensi ke TextField yang juga akan kita buat dengan kode, dan gunakan untuk menampilkan label teks di atas background.


Langkah 17: Tambahkan Logika

Dan sekarang kita akan memasukkan logika yang sebenarnya. Untuk konstruktor:

Itu banyak kode, tetapi tidak mengejutkan sebagian besar. Kita sedang membuat Shape dan menggambar persegi panjang ke dalamnya. Kemudian kita membuat TextField, mengaturnya dengan beberapa format dasar. Selanjutnya, kita menambahkan beberapa acara rollover dan peluncuran (pendengar yang akan ditambahkan di langkah berikutnya). Akhirnya kita atur beberapa properti untuk membuat objek berperilaku lebih seperti sebuah tombol.

Satu-satunya bagian yang mungkin menyebabkan kebingungan adalah panggilan untuk addChild(), dan dari mana properti mouseChildren dan buttonMode berasal. Saya akan meminta Anda untuk menunggu lagi jawaban yang lebih lengkap, karena itu akan datang dalam angsuran berikutnya, tetapi itu ada hubungannya dengan "extends Sprite" yang ditulis sebelumnya.


Langkah 18: Tambahkan Beberapa Metode

Sekarang, kita dapat terus bekerja di kelas kita. Setelah konstruktor, buat fungsi yang disebut setLabel:

Dan akhirnya, buat dua pendengar acara:

Kode akhir akan terlihat seperti ini:

Satu hal yang sangat penting adalah memastikan metode Anda dideklarasikan di tingkat kelas. Ini adalah kesalahan pemula lainnya: kadang-kadang orang tidak memperhatikan di mana kurung kurawal mereka mulai dan berhenti, dan akhirnya bersarang apa yang seharusnya menjadi metode (yaitu, dideklarasikan pada "level akar" kelas) di dalam metode lain. Ini secara efektif mengubah metode (yang harus bertahan untuk kehidupan objek) menjadi fungsi lokal (yang hanya bertahan untuk kehidupan metode yang berjalan di mana ia dinyatakan).

Semoga kesalahan penyusun akan memberi tahu Anda tentang kesalahan seperti itu, tetapi kesalahan itu sendiri mungkin samar. Itu akan mengatakan "1114: Atribut public/private/protected/internal hanya dapat digunakan di dalam sebuah paket." Jika Anda mendapatkannya, periksa level bersarang dari metode Anda. Hal lain untuk membantu mencegah kesalahan ini adalah memperhatikan spasi dan indentasi dengan hati-hati. Editor teks "nyata" dapat membantu Anda dengan ini, tetapi pastikan semua deklarasi metode Anda berada pada level indentasi yang sama (biasanya dua penghentian tab).

Apa yang kita miliki sekarang adalah roll siap-kelas, yang, ketika dipakai, akan membuat objek tampilan khusus yang memiliki persegi panjang abu-abu dengan label. Label dapat diatur menggunakan metode dan tombol akan secara otomatis merespons overs dan roll out roll mouse. Yang perlu kita lakukan sebenarnya adalah instantiate.


Langkah 19: Buat Tombol

Kembali ke kelas dokumen Anda, dan kita akan menambahkan tombol ke film. Ini akan sangat mudah dibandingkan dengan langkah sebelumnya.

Pertama, kita akan menambahkan properti baru untuk menahan tombol. Tempel di bawah garis dengan properti Anda yang ada.

Ini tidak diharuskan untuk menyatukan semua properti, tetapi untuk organisasi file Anda, sangat membantu untuk menjaga hal-hal di tempat yang konsisten. Secara pribadi, saya selalu membuat daftar properti di bagian paling atas kelas, sebelum konstruktor. Dengan cara ini, saya selalu tahu ke mana harus mencari deklarasi properti. Ke mana mereka pergi dalam file tidak sepenting datang dengan standar Anda sendiri dan berpegang teguh pada itu.

Selanjutnya, kita sekarang dapat instantiate Button101 di konstruktor kelas dokumen:

Perhatikan bahwa kita memodifikasi garis yang mengatur pendengar untuk klik di panggung. Kita menggeser interaktivitas itu ke tombol.

Sekarang, Anda mungkin bertanya-tanya bagaimana kita memperlakukan objek Button101 ini seolah-olah itu Sprite atau MovieClip (lihat tutorial AS3 101 pada Daftar Display jika Anda tidak bertanya-tanya). Ini ada hubungannya dengan bisnis yang extends yang telah saya minta untuk saya selesaikan sekarang. Saya berjanji, kita akan segera melakukannya (di bagian selanjutnya dari seri ini).

Pada titik ini, kita harus bisa mengujinya. Itu harus bekerja sama seperti sebelumnya, kecuali bahwa Anda akan melihat tombol muncul, dan alih-alih mengklik di mana saja di atas panggung, Anda harus mengklik tombol.

Untuk referensi, inilah kelas dokumen lengkap pada saat ini, dengan tambahan dan perubahan dalam huruf tebal:

Jadi, apa yang berhasil bagi kita? Yang penting adalah kita mendapat tombol yang cukup bagus yang bisa digunakan dengan sedikit usaha (tidak termasuk usaha yang dilakukan untuk menulis kelas Button101 di tempat pertama).

Untuk mencapai fungsi yang sama tanpa kelas dan OOP, kita harus menulis lebih banyak kode dalam skrip utama kita. Untuk menggambarkan hal ini lebih lanjut, mari kita buat tombol kedua.


Langkah 20: Buat Tombol Lain

Oke, sekarang mari kita biarkan OOP benar-benar bersinar. Kita akan membuat instance kedua tombol, hanya dengan menambahkan beberapa baris kode ke kelas dokumen.

Perubahan yang terlibat akan sangat mirip dengan langkah sebelumnya. Pertama, tambahkan properti:

Kemudian atur di konstruktor:

Anda dapat, pada kenyataannya, hanya menyalin dan menempelkan baris kode tombol pertama dan hanya mengubah button ke button2, dan juga posisi x dari tombol kedua (jika tidak button2 akan duduk tepat di atas button1).

Kita telah menggandakan kompleksitas aplikasi kita hanya dalam beberapa baris kode pendek, berkat penggunaan ulang kelas Button101. Kita memiliki kelas, yang, jika Anda ingat, adalah blueprint dari mana contoh yang sebenarnya dibuat. Kita sekarang memiliki dua tombol berbeda, namun mereka memiliki "warisan" yang sama. Meskipun ada banyak karakteristik yang sama antara dua tombol ini, seperti efek rollover dan ukuran, masih ada aspek individualitas, yaitu posisi.

Mudah-mudahan ini mulai menggambarkan kegunaan dan kekuatan Pemrograman Berorientasi Objek, di mana kita memfasilitasi penggunaan kembali kode dengan sangat mudah.

Silakan dan coba saja; Anda harus memiliki dua tombol yang melakukan hal yang persis sama.

Tentu saja, Anda mungkin ingin mengubah kelas Button101 sehingga terlihat lebih bagus, atau memiliki efek roll over slicker, atau apa pun yang Anda miliki. Dengan segala cara, ambil kelas Button101 dan buat lebih bermanfaat untuk kebutuhan Anda sendiri. Tujuan kita di sini adalah untuk menunjukkan bagaimana kelas tombol dapat dibuat, bukan untuk membuat kelas tombol utama.


Langkah 21: Ringkasan

Ada dua tema utama dalam tutorial hari ini. Sebagai rekapitulasi, ini adalah: gagasan blueprints (kelas) dan rumah (contoh); dan gagasan tentang ruang lingkup.

Kelas adalah file kode yang kita tulis, serta konsep entitas yang berfungsi sebagai blueprint untuk objek yang akan dibuat dari mereka. Satu kelas dapat menghasilkan sejumlah instance. Objek adalah instance dari kelas, dan cenderung menjadi hal-hal yang, ketika disatukan, membentuk aplikasi kita. Contoh dari jenis fungsi yang sama yang sama, tetapi mempertahankan identitas unik dan mungkin dapat berisi varians dalam data yang terkandung di dalamnya.

Lingkup adalah konsep penting melalui semua pemrograman, dan tidak kurang dalam Pemrograman Berorientasi Objek. Lingkup menentukan "rentang hidup" dari suatu variabel atau fungsi, dan juga "tempat tinggal". Variabel pada lingkup objek memiliki rentang hidup yang berbeda dari variabel pada lingkup metode.


Sampai Lain Waktu

Namun, ini hanya menggores permukaan ujung gunung es. Ini semua yang kita punya waktu sekarang, tetapi dalam Bagian 2 yang akan segera diterbitkan dari seri AS3101 OOP, kita akan menyelam sedikit lebih dalam dan akhirnya mendapatkan penjelasan tentang semua hal yang saya minta kesampingkan, seperti extends dan public. Segala sesuatu akan mulai lebih masuk akal. Tetapi ketika datang ke topik yang rumit seperti Pemrograman Berorientasi Objek, yang terbaik untuk mengambil hal-hal lambat.

Advertisement
Did you find this post useful?
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.