AS3 101: XML

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

Baiklah, hei, ActionScript Journeyman yang lincah! Anda telah melewati banyak pemandangan aneh sejauh ini selama 6 bulan terakhir, tetapi jika semua berjalan sesuai rencana, Anda menjadi lebih kuat dan lebih siap untuk menghadapi tantangan berikutnya. Di sini dengan bagian ke-7, kita akan memuncak dengan topik XML.

Pengenalan

Karena kami telah mengalami kemajuan melalui seri AS3 101, kami telah membiarkan diri kami menjadi semakin fleksibel, menulis program yang merespons pembaruan dengan lebih lancar daripada yang sebelumnya. Di sinilah ia menjadi sangat menarik: jika kita dapat menyimpan data yang mendorong aplikasi eksternal ke SWF, kemudian membuat pembaruan menjadi masalah untuk mengedit file teks (atau bekerja dengan database), daripada mengedit ActionScript dan mengkompilasi ulang SWF.

Ini bukan sesuatu yang baru, tetapi saya akan menganggap itu baru bagi Anda, dan itulah sebabnya Anda ada di sini. Saya akan menganggap Anda merasa nyaman dengan semua hal lain yang telah kami bahas sejauh ini dalam seri AS3 101 - Khususnya Topik Daftar Tampilan, Array, dan Loops. Tapi saya akan menganggap Anda perlu pengantar formal untuk XML itu sendiri, bersama dengan cara bekerja dengannya dalam ActionScript.

Untuk itu, kami akan mengambil ini dalam tiga bagian besar. Pertama, kita akan melihat bagaimana XML ditulis. Selanjutnya, kita akan melihat teknik yang tersedia untuk kita di ActionScript 3 untuk bekerja dengan XML. Akhirnya, kami akan menggabungkan semuanya untuk membangun fitur produk berbasis XML, yang previewnya dapat dilihat di bawah.

Langkah 1: Apakah itu XML?

Kita harus mulai di sini. XML singkatan dari "Extensible Markup Language," dan mungkin "XML" terdengar lebih dingin daripada "EML." Bahasa markup adalah bahasa di mana markup semacam yang diselingi dengan teks biasa, memberikan struktur teks dan / atau atribut. Ini memiliki efek membuat komentar tentang teks yang berbeda dari teks itu sendiri. Seperti biasa, Wikipedia memiliki deskripsi yang lebih menyeluruh dan elegan tentang Bahasa Markup

Anda kemungkinan besar akrab dengan satu bahasa markup: HTML (yang merupakan singkatan dari Hyper Text Markup Language). Dalam kasus ini, tag (yang dimulai dengan < dan diakhiri dengan > ) adalah markup. Jika Anda tahu HTML, maka Anda tidak akan kesulitan mengambil XML, karena sintaksnya identik. Faktanya, XML dan HTML keduanya memiliki leluhur bersama yaitu SGML. Dan XHTML hanyalah HTML yang ditulis ulang sehingga sesuai dengan standar XML (HTML jauh lebih longgar tentang hal-hal tertentu, yang bukan XML).

Markup dalam XML akan familiar, tetapi ide "extensible" ini mungkin perlu dibiasakan. Intinya adalah bahwa meskipun ada aturan tertentu dalam bagaimana XML harus ditulis, tidak ada aturan tentang apa itu markup sebenarnya. Hal ini kontras dengan HTML, yang mana didefinisikan  adalah tag paragraf, dan <a> adalah sebuah tag anchor (atau link). XML mendefinisikan tanpa tag preset. Anda bisa menulis tag sendiri, dan menyusunnya sesuai keinginan Anda. Ini memungkinkan Anda membuat dokumen XML yang cocok dengan kebutuhan struktur data Anda. Inilah yang bisa diperluas tentang XML.

Karena itu, ada beberapa bahasa berbasis XML yang memiliki tag yang telah ditentukan. Satu sudah disebutkan: XHTML. XHTML hanyalah XML dengan hal-hal seperti tag  dan a yang didefinisikan. Bahasa berbasis XML lain yang mungkin dipedulikan pengembang Flash adalah MXML, sintaks markup yang digunakan untuk membuat aplikasi Flex. MXML, sekali lagi, hanya XML, meskipun dilengkapi dengan beberapa tag yang telah ditentukan, dan mencoba menggunakan tag yang tidak memiliki definisi menyebabkan kesalahan. Tapi yang hebat adalah bahwa setelah Anda menguasai XML, tidak perlu banyak belajar bahasa berbasis XML.

Untuk bacaan yang lebih teknis tentang bahasa XML, lihat spesifikasi resmi w3.

Langkah 2: Dokumen XML

Kami akan menulis dokumen XML di paruh pertama tutorial ini, yang akan kami gunakan di bagian kedua untuk memuat di Flash.

Buka file teks baru, dan simpan ke lokasi yang Anda pilih sebagai products.xml.

Hal pertama yang akan kami tambahkan adalah deklarasi XML:

1	<?xml version="1.0" encoding="UTF-8"?>

Flash sebenarnya akan berfungsi dengan baik tanpa ada baris ini. Namun, itu keadaan yang bagus untuk memastikan itu ada di sana. Ini adalah boilerplate; editor mana pun yang layak diberi garam akan memiliki template XML yang menyediakan baris ini untuk Anda.

Sepengetahuan saya, tidak ada nilai lain untuk versi ini, dan encodingnya biasanya UTF-8. Namun, perlu dicatat bahwa jika file teks Anda tidak dikodekan UTF-8 - misalnya, ISO-8859-1 - Anda mungkin perlu menyesuaikan baris itu (atau encode ulang file Anda menjadi UTF-8). Text encoding adalah topik di luar batas tutorial ini. Namun, ini adalah topik yang harus ditinjau kembali. Seorang programmer hidup dengan file teks sebagai mata pencaharian, dan oleh karena itu, lebih baik jika terbiasa dengan text encoding. Lebih banyak informasi daripada yang pernah Anda pikirkan tentang text endoing dapat ditemukan di sini.

Langkah 3: Semua Tentang Elemen

Apa itu elemen? Jika Anda tahu istilah HTML, elemen adalah apa pun yang didefinisikan oleh serangkaian tag, seperti <div>. Elemen ini mencakup semuanya, mulai dari tag pembuka hingga tag penutup yang cocok, sehingga elemen tersebut berisi markup (tag) dan konten dari tag itu. Ada dua jenis elemen kunci: elemen pembuka, dan elemen penutup.

Elemen yang terbuka dilengkapi dengan seperangkat pencocokan tag, seperti..., manaadalah tag pembuka, dan adalah tag penutup. Jadi, tanda "kurang dari" (selanjutnya disebut sebagai penjepit sudut pembuka) adalah karakter pertama dari sebuah tag. Nama elemen datang berikutnya (dalam contoh kami itu "p," tapi ingat, karena XML dapat diperluas, nama dapat berupa apa saja yang terdiri dari huruf, angka, tanda hubung, dan garis bawah). Tag ditutup dengan tanda "lebih besar dari" (kurung sudut penutup). Tag secara keseluruhan membuka elemen. Mungkin ada konten yang mengikuti tag pembuka, tetapi di beberapa titik elemen tersebut harus ditutup.

Ini penting: dalam HTML Anda mungkin terbiasa malas tentang penutupan tag Anda. XML tidak memaafkan. Setiap elemen yang Anda buka harus ditutup.

Untuk menutup simpul, Anda membuat tag lain dengan nama yang sama, hanya antara kurung sudut pembukaan dan nama simpul, ada garis miring:

Elemen harus ditutup sesuai urutan pembukaannya. Elemen dapat disarangkan, dan untuk itu Anda perlu membuka satu elemen, lalu elemen lainnya. Saat menutupnya, elemen kedua ditutup terlebih dahulu, lalu elemen pertama. Sebagai contoh:

1	<a>
2	<b>
3	<c>
4	</c>
5	</b>
6	</a>

Perhatikan kita membuka elemen a, lalu elemen b, dan kemudian elemen c. Ketika tiba saatnya untuk membungkus semuanya, kita perlu menutupnya dalam urutan terbalik: c, lalu b, dan akhirnya a.

Perhatikan bahwa biasanya untuk membuat indentasi elemen bersarang, menggunakan karakter tab atau sejumlah spasi tertentu. Ini untuk tujuan keterbacaan, seperti kebiasaan untuk membuat indentasi isi suatu fungsi atau isi loop. Tetapi seperti dalam ActionScript, whitespace ini cukup banyak diabaikan, dan di atas bisa sama sahnya ditulis sebagai:

1	<a><b><c></c></b></a>

Seperti disebutkan di awal langkah ini, ada yang namanya tag kosong, atau self-closing tag . Ini adalah tag yang tidak mengandung konten. Di HTML-land, kami memiliki tag gambar dan break sebagai contoh:

1	<img src="http://activetuts.s3.amazonaws.com/tuts/044_AS3101XML/Tutorial/some.jpg" />

Sintaks di sini hanya satu tag, dengan garis miring sebagai hal terakhir sebelum kurung sudut penutup. Tag membuka dan menutup semua dalam satu langkah. Karenanya, tidak ada konten yang dapat disarangkan di dalamnya. "src =" http://activetuts.s3.amazonaws.com/tuts/044_AS3101XML/Tutorial/ bukan benar-benar konten, itu adalah atribut. Kita akan membahasnya sebentar lagi.

Langkah 4: Elemen Root

Setiap dokumen XML harus memiliki satu, dan hanya satu, elemen root. Elemen ini akan merangkum semua data dalam dokumen Anda. Pikirkan HTML: ada elemen tunggal yang membungkus semuanya. Ini adalah elemen root.

Dalam tutorial ini, kami akan membuat daftar produk XML. Jadi, untuk merujuk secara umum ke seluruh rangkaian data, kami akan menulis ini:

1	<products>
2
3	</products>

Tidak masalah saat ini, tetapi perhatikan bahwa baris kedua yang kosong sebenarnya memiliki karakter tab di atasnya, untuk tujuan indentasi elemen bersarang.

Yang penting adalah untuk mengetahui bahwa seluruh kumpulan data kami akan cocok di antara tag awal dan akhir dari elemen, tab, dan semua. Dengan demikian, itu bukan ide yang buruk untuk memikirkan nama elemen. Kami hanya akan memiliki daftar produk, jadi "products" masuk akal. Tetapi jika ingin memiliki daftar produk dan daftar kategori, maka mungkin memanggil elemen root "products" kurang masuk akal, karena kita mungkin akan menggunakan "products" untuk elemen bersarang untuk daftar produk.

Karena itu, tidak ada aturan yang mengatakan Anda tidak dapat menggunakan kembali nama elemen. Namun, biasanya lebih mudah membaca jika Anda memiliki nama elemen yang dipikirkan dengan matang.

Langkah 5: Elemen Product

Sekarang mari kita mulai menambahkan beberapa data. Kami akan menambahkan elemen product tunggal ke dokumen. Elemen ini akan bersarang di dalam elemen products. Elemen yang kami tambahkan adalah sebagai berikut:

1	<product>
2
3	</product>

Sekali lagi, kami meninggalkan ruang untuk elemen bersarang, sehingga baris kedua memiliki karakter tab. Ketika ditambahkan ke seluruh dokumen, itu akan terlihat seperti ini:

<products>
	<product>
 
	</product>	
</products>

Langkah 6: Detail Product

Sekarang kita dapat menambahkan beberapa detail tentang product yang diberikan. Kami akan menambahkan nama, tautan ke detail product, dan URL gambar. Kami akan menambahkan deskripsi dalam beberapa langkah.

Kami hanya akan menambahkan elemen ke elemen product, dan memberikan masing-masing nilai:

<products>
	<product>
		<name>Falling Snow Effect</name>
		<link>http://activeden.net/item/as3-as2-falling-snow-effect/69077?id=69077&ref=activetuts</link>
		<image>falling-snow-effect.jpg</image>
	</product>	
</products>

Jadi kami memberikan detail pada produk. Karena elemen <name> , <link> , dan <image> bersarang di dalam elemen <product> , mereka "termasuk" ke dalam <product> . dan beberapa langkah lagi, kami akan menambahkan lebih banyak elemen product. Masing-masing akan memiliki nama, tautan, dan elemen gambar mereka sendiri. Struktur data bersarang elemen-elemen ini akan membuat setiap nama terkait dengan product yang tepat.

Langkah 7: Entitas

Namun, ternyata simpul akan bermasalah. Jika Anda memiliki alat validator XML, lanjutkan dan jalankan. Anda akan mendapatkan kesalahan dengan efek "expected semi-colon". Saya menggunakan TextMate untuk mengedit kode saya, dan menjalankan perintah Tidy dari bundel XML akan menampilkan kesalahan berikut:

Bungkusan XML TextMate juga memiliki perintah "Validate Syntax" yang akan melakukan fungsi serupa, tetapi pada akhirnya akan ada kesalahan pada kenyataan bahwa tidak ada DTD (Document Type Declaration). Namun, Tidy akan "membersihkan" file Anda setelah validasi yang berhasil, membuat indentasi baris dan menghapus baris kosong. Anda mungkin atau mungkin tidak menghargai itu.

Bahkan, Anda juga dapat melihat pada tangkapan layar di atas bahwa TextMate juga menyoroti ampersand sebagai tidak valid (dengan latar belakang merah yang solid).

Ini sebenarnya penyebab kesalahan, karena sesuatu yang disebut entitas.

Anda mungkin sudah terbiasa dengan entitas dari HTML, bahkan jika Anda tidak terbiasa dengan namanya. Mereka hampir sama dalam XML. Entitas adalah kode khusus yang mewakili karakter khusus. Misalnya, dalam HTML Anda dapat mengetikkan kunci kutipan-ganda lama yang biasa dan Anda akan baik-baik saja. Tetapi jika Anda ingin menggunakan tanda kutip "keriting", bahkan jika Anda tahu cara mengetiknya (opsi-kiri-kuadrat-brace dan Option-Shift-kiri-kuadrat pada Mac), Anda tidak dapat dijamin bahwa Prosesor XML yang membuka file akan memperlakukan karakter dengan benar (karena text encoding dan sihir hitam lainnya ... jangan khawatir tentang mengapa sekarang). Sebagai gantinya, Anda dapat mengetik entitas yang mewakili kurung kurawal:

&ldquo;

dan

&rdquo;

Sebagai contoh...

1	“That's what she said...”

Bahkan, kita bisa membuat pernyataan itu lebih cantik dengan lebih banyak entitas, untuk mewakili tanda kutip dan elips (tiga periode ... cara yang tepat untuk mengetik yaitu dengan karakter tunggal yang disebut elips. Ini adalah opsi semi-kolon pada Mac, ngomong-ngomong).

1	“That's what she said…”

Itu terlihat jelek sekarang, tetapi jalankan itu melalui parser HTML dan Anda mendapatkan:

"Itu yang dia katakan ..."

Yang secara halus lebih mudah dibaca daripada:

"Itu yang dia katakan ..."

XML memiliki beberapa entitas bawaan, yang pada dasarnya berjumlah karakter yang memiliki arti khusus dalam spesifikasi XML:, ", ', & &. Perhatikan karakter kutipan keduanya" lurus, "bukan" keriting. "

Ini akhirnya sampai pada masalah yang kita alami. Ampersand adalah karakter khusus dalam XML. Ini dicadangkan untuk menunjukkan awal suatu entitas. Untungnya, entitas ampersand sudah ditentukan sebelumnya, dan kami hanya perlu memastikan bahwa kami mengganti ampersand yang sebenarnya dengan entitasnya:

1	<link>http://activeden.net/item/as3-as2-falling-snow-effect/69077?id=69077&ref=activetuts</link>

Lima entitas yang didefinisikan oleh XML adalah sama seperti mereka dalam HTML, tetapi di sini adalah referensi cepat:

1	< <
2	> >
3	" &quo;
4	' '
5	& &

Sebagai catatan terakhir tentang subjek ini, hal paling keren dari entitas XML adalah Anda dapat mendefinisikan milik Anda sendiri. Kami tidak akan membahas topik ini, tetapi XML tidak hanya memungkinkan substitusi satu karakter, tetapi bahkan seluruh potongan teks. Entitas dapat bertindak seperti variabel (atau lebih tepatnya, konstanta) dalam hal ini; daripada mengetik nama penulis setiap kali itu terjadi, letakkan nama dalam suatu entitas dan gunakan entitas tersebut. Ini keren, tetapi di luar cakupan tutorial kami (beberapa orang mungkin berpendapat bahwa seluruh langkah ini di luar cakupan tutorial kami).

Untuk informasi lebih lanjut tentang entitas, kunjungi Wikipedia.

Langkah 8: CDATA

Seperti yang dijanjikan, kami akan menambahkan elemen deskripsi ke elemen prodcut. Namun di dunia ideal kami, kami akan memformat deskripsi itu dengan HTML untuk tampilan yang cantik di Flash. Tapi pikirkan ini sebentar ... bagaimana kita memisahkan struktur data XML dari markup HTML yang sebenarnya merupakan bagian dari data itu sendiri, bukan strukturnya? Yaitu, jika kita menulis ini:

<product>
	<name>Falling Snow Effect</name>
	<link>http://activeden.net/item/as3-as2-falling-snow-effect/69077?id=69077&ref=activetuts</link>
	<image>falling-snow-effect.jpg</image>
<strong>	<description><font size="24">AS3 / AS2 Falling snow effect</font>
<p> This is an editable flash snow effect. You can change the falling parameters in ActionScript panel without any ActionScript knowledge.  <a href="http://activeden.net/item/as3-as2-falling-snow-effect/69077">View product details</a>.</p></description></strong>
</product>

Bagaimana XML parser tahu bahwa <description>dan <product>XML, dan itu, ,, dan <a> benar-benar bagian dari konten?

(Catatan bahwa saya memahami bahwa tag lama HTML, tapi itu semacam HTML yang Flash dapat tangani, dan itulah tujuan akhir kita, jadi kita menggunakan tag )

Yang cerdik di antara Anda berkata, "Kita bisa menggunakan entitas." Ya kita bisa. Akan terlihat seperti ini:

&lt;description&gt;&lt;font size=&quot;24&quot;&gt;AS3 / AS2 Falling snow effect&lt;/font&gt;

&lt;p&gt; This is an editable flash snow effect. You can change the falling parameters in ActionScript panel without any ActionScript knowledge.  &lt;a href=&quot;http://activeden.net/item/as3-as2-falling-snow-effect/69077&quot;&gt;View product details&lt;/a&gt;.&lt;/p&gt;&lt;/description&gt;

Dan itu secara teknis akan berhasil. Tapi ingat sedikit tentang XML yang bisa dibaca? Saya berpendapat di atas tidak dapat dibaca. Satu atau dua entitas ... baiklah. Semua entitas itu ... tidak terlalu banyak.

Untungnya ada cara lain. Dan Anda mungkin sudah tahu nama itu karena Anda sudah membaca judul langkahnya. Itu disebut CDATA. CDATA adalah kependekan dari Character DATA, dan itu berarti sesuatu yang ditentukan sebagai CDATA akan diabaikan sebagai data XML. Dengan kata lain, jangan memproses karakter, bahkan jika mereka memiliki makna dalam XML. CDATA adalah tag khusus, yang dimulai seperti ini:

<![CDATA[

dan berakhir seperti ini:

]]>

Dan sepanjang bagian tengah Anda dapat memasukkan apa pun yang Anda inginkan, dan prosesor XML akan mengabaikannya. Jadi kita dapat menempatkan teks berformat HTML kita ke XML seperti ini:

<product>
<name>Falling Snow Effect</name>
	<link>http://activeden.net/item/as3-as2-falling-snow-effect/69077?id=69077&ref=activetuts</link>
	<image>falling-snow-effect.jpg</image>
	<description><![CDATA[<font size="24">AS3 / AS2 Falling snow effect</font>
<p> This is an editable flash snow effect. You can change the falling parameters in ActionScript panel without any ActionScript knowledge.  <a href="http://activeden.net/item/as3-as2-falling-snow-effect/69077">View product details</a>.</p>]]>
	</description>
</product>

Dan itu jauh lebih mudah dibaca.

Catatan, kita juga bisa menggunakan CDATA pada elemen tautan. Bagaimanapun, Anda menang. Pilih metode yang paling sesuai dengan situasi. Seperti yang saya katakan, satu atau dua entitas sekaligus dapat dikelola. Di luar, pertimbangkan CDATA.

Wikipedia, seperti biasa, memiliki beberapa detail lagi tentang CDATA.

Langkah 9: Atribut

Kami membutuhkan cara mengidentifikasi product secara internal. Kami akan menetapkan nomor id untuk elemen product. Namun, alih-alih menambahkan elemen lain, kami akan menambahkannya sebagai atribut.

Atribut hanyalah cara lain untuk mengaitkan data dengan elemen, tetapi alih-alih bersarang elemen di dalam elemen lain, kita dapat melampirkan atribut ke elemen secara langsung. Saat Anda menggunakan elemen dalam HTML, Anda akhirnya juga menggunakan atribut untuk menentukan src. Atribut XML bekerja dengan cara yang sama:

1	<product id="42">
2	…

Aturan:

Pertama, atribut harus dimasukkan seluruhnya dalam tag pembuka elemen (atau di dalam tag tunggal elemen kosong)
Harus ada whitespace sebelum dimulainya deklarasi atribut (satu spasi normal, tetapi jumlah spasi, tab, atau pengembalian apa pun baik-baik saja. Saya sering menggunakan whitespace untuk membuat XML lebih mudah dibaca)
Nama atribut ("id" dalam kasus ini) harus mengikuti aturan yang sama untuk penamaan sebagai elemen.
Segera setelah nama atribut harus ada tanda sama dengan ("="). Tidak ada whitespace diizinkan.
Segera setelah tanda sama dengan, harus ada sepasang tanda kutip yang berisi data tekstual yang terkandung oleh atribut.
Di dalam kutipan, Anda dapat menggunakan sebagian besar teks apa pun, tetapi ingat karakter khusus yang ditentukan oleh XML. Gunakan entitas jika diperlukan. Whitespace diizinkan di sini.
Jika satu elemen memiliki lebih dari satu atribut, pisahkan setiap set dengan whitespace, misalnya:

1	<product id="42" order="2">

Di atas hanya untuk tujuan demonstrasi. Kami akan baik-baik saja hanya dengan atribut id.

Kapan Anda menggunakan atribut dan kapan Anda menggunakan elemen? Terserah kamu. Aturan utama saya adalah data pendek bisa masuk di atribut, dan data lebih panjang bisa masuk elemen. Namun, saya menemukan elemen kosong yang nyaman, jadi saya mungkin melakukan kesalahan jika menggunakan atribut jika memungkinkan. Di sisi lain, sintaks untuk membaca atribut dalam ActionScript 3 bisa dibilang (jika sedikit) lebih bertele-tele daripada membaca elemen, jadi jika saya harus menggunakan satu elemen untuk alasan panjang, saya akan cenderung menggunakan elemen untuk sisa data, juga.

Langkah 10: Gandakan Beberapa Product

Sekarang kita memiliki satu product yang dibangun, kita dapat membuat daftar mereka dengan mengetik (atau menyalin dan menempel) struktur yang sama, hanya dengan data yang berbeda. Pandangan mata struktur akan terlihat seperti ini:

<products>
	<product>
		…
	</product>
	<product>
		…
	</product>
	<product>
		…
	</product>
	<product>
		…
	</product>
</products>

Setiap elemen produk individual mewakili satu product, jadi kami memiliki total empat product. Masing-masing akan memiliki data yang berbeda yang terkandung di dalamnya, tetapi masing-masing juga akan mengikuti struktur kami bekerja dengan product pertama. Inilah keseluruhan dokumen:

<?xml version="1.0" encoding="UTF-8"?>

<products>
	<product id="42">
		<name>Falling Snow Effect</name>
		<link>http://activeden.net/item/as3-as2-falling-snow-effect/69077?id=69077&ref=activetuts</link>
		<image>images/snow.jpg</image>
		<description><![CDATA[<p><font size="18">AS3 / AS2 Falling snow effect</font></p>
		<p>This is an editable flash snow effect. You can change the falling parameters in ActionScript panel without any ActionScript knowledge.</p>
		<p><a href="event:link">View product details</a></p>]]></description>
	</product>
 
	<product id="13">

		<name>Flash Banner Creator</name>
		<link>http://activeden.net/item/flash-banner-creator-and-rotator/49745?id=49745&ref=activetuts</link>
		<image>images/banners.jpg</image>
		<description><![CDATA[
			<p><font size="18">Flash Banner Creator and Rotator</font></p>
			<p>This is a very advanced tool to create professional looking dynamic flash banners, slideshows, ads and intros. You don’t need to know Flash or ActionScript to use the Flash Banner Creator and Rotator. You can create a flash banner simply by editing an XML file and adding your own assets. There are more than 10 different effects that can be applied to your images, text and swf files.</p>
			<p><a href="event:link">View product details</a></p>]]>
		</description>
	</product>
 
	<product id="75">
		<name>XML Countdown</name>
		<link>http://activeden.net/item/as3-as2-falling-snow-effect/69077?id=69077&ref=activetuts</link>
		<image>images/countdown.jpg</image>
		<description><![CDATA[
			<p><font size="18">XML Countdown</font></p>
			<p>A dynamic, customisable countdown, with universal time support: Everybody on the internet will countdown to the same moment. It’s flip-style animated: inspired by clocks on grand train stations. Modern stylish way to count down to a date up to 999 days in the future.</p>
			<p><a href="event:link">View product details</a></p>]]>
		</description>
	</product>
 
	<product id="8423">
		<name>XML Slideshow with Ken Burns Effect</name>
		<link>http://activeden.net/item/xml-slideshow-with-ken-burns-effect/32354?id=32354&ref=activetuts</link>
		<image>images/kenburns.jpg</image>
		<description><![CDATA[
			<p><font size="18">XML Slideshow with Ken Burns Effect</font></p>
			<p>MAIN FEATURES:</p>
			<ul>
				<li>Unlimited pictures</li>
				<li>Highly customizable design via XML only</li>
				<li>You can customize this slideshow in it’s smallest aspects: transitions, speeds, colors, sizes, etc, all via a well structured xml file.</li>
				<li>Awesome Ken Burns effect</li>
			</ul>
			<p>This can become the ultimate header, banner, gallery for your website.</p>
			<p><a href="event:link">View product details</a></p>]]>
		</description>
	</product>
</products>

Langkah 11: Beralih ke Flash

Untuk tutorial selanjutnya, kita akan membangun fitur product sederhana yang akan menggunakan dokumen XML yang baru saja kita buat. Ini akan memiliki tombol kecil yang mewakili masing-masing fitur, yang dapat diklik untuk mengisi area utama dengan detail tentang product itu. Selain itu, sebagai bonus kecil, fitur-fitur secara otomatis akan maju melalui daftar.

Seperti biasa, kami akan melewatkan proses pembuatan artwork, dan saya menyarankan Anda untuk menggunakan file starter yang ditemukan dalam file unduhan.

Jika suka, Anda dapat menggunakan deskripsi berikut tentang file starter baik sebagai tur dari apa yang sudah ada, atau sebagai panduan apa yang Anda butuhkan untuk membangun sendiri, jika Anda memilih untuk menolak file starter.

Pertama, ada lapisan latar belakang dengan persegi panjang di atasnya. Bukan masalah besar.

Selanjutnya, ada TextField dinamis yang disebut caption_tf. Ini ditata dengan ukuran font yang lebih besar, sehingga berfungsi seperti judul. Diposisikan sedemikian rupa sehingga deretan tombol akan berada di atasnya, dan gambar akan dimuat di bawahnya. Baik tombol dan gambar akan ditempatkan secara terprogram.

Kemudian kita memiliki TextField dinamis lain, yang disebut description_tf. Ini diatur ke ukuran font yang lebih kecil lebih cocok untuk salinan body. Bidang ini juga diatur ke multiline dan memiliki area yang lebih besar untuk menampung teks yang lebih banyak. Itu diposisikan sehingga akan duduk di bawah gambar.

Kedua TextFields memiliki font yang ditetapkan untuk embedding, karena kami akan memperbarui teks secara dinamis melalui ActionScript.

Terakhir, ada simbol di pustaka yang disebut FeatureButton, dan itu diatur untuk mengekspor ke ActionScript. Nama kelas ActionScript-nya juga FeatureButton (nama ini yang penting), dan disetel untuk diekspor dalam bingkai pertama. sebuah instance dari tombol ini ditempatkan di atas stage dalam lapisan panduan yang disebut "linked symbols" untuk pengeditan yang nyaman. Lapisan ini tidak akan dimasukkan dalam SWF, karena itu adalah lapisan panduan.

Langkah 12: ActionScript 3, XML, dan yang E4X

Sebelum kita membahas kode praktis, saya ingin memunculkan cara ActionScript menangani XML. Untuk lebih spesifik, cara ActionScript 3 menangani XML. Dalam ActionScript 2 (dan 1), XML tentu saja mungkin, dan bahkan sangat umum, tetapi sintaks yang terlibat dalam mendapatkan data dari XML itu rumit. Singkatnya, itu melibatkan banyak penggunaan properti "children" dan agak mudah tersesat ketika membuat jalan Anda melalui dokumen yang kompleks.

ActionScript 3 mempromosikan XML ke "first class citizen," yaitu, objek tingkat atas. Dengan kata lain, XML sangat penting bagi AS3 sehingga secara resmi merupakan tipe data asli. Tidak perlu mengimpor baris untuk membuatnya bekerja, dan yang gila adalah Anda benar-benar dapat mengetik XML langsung ke file ActionScript Anda. Coba ini: buka file Flash ActionScript 3 baru, dan tambahkan berikut ini ke panel Script:

1	var products:XML = <products>
2	<product id="42" />
3	<products>

Anda bisa, jika mau, menjadikannya seluruh product file XML yang kami buat sebelumnya, tetapi intinya saya coba buat adalah ia berfungsi. Saya biasanya tidak menggunakan trik ini terlalu banyak, tetapi ini sangat berguna ketika bekerja dengan data dummy. Yaitu, ketika Anda baru memulai proyek, dan Anda tidak memiliki file XML yang sebenarnya siap, Anda masih bisa mendapatkan hal-hal yang bekerja di ActionScript dengan cepat dengan mematikan beberapa data XML sementara seperti ini. Dalam berita terkait, ketika Anda perlu membuat file uji yang kecil, salin XML Anda langsung ke dalam ActionScript dapat menyelamatkan Anda dari keharusan melalui proses memuat file XML saat itu bukan hal yang ingin diuji.

Terakhir tetapi tentu tidak kalah penting, karena XML adalah first-class citizen dari ActionScript 3, kami memiliki sintaks untuk mendapatkan data dari objek XML melalui sesuatu yang disebut E4X (ECMAScript untuk XML; ActionScript 3 adalah bahasa yang sesuai dengan ECMAScript, dan oleh karena itu mengimplementasikan E4X). E4X menyediakan sintaks dot sederhana untuk melintasi tree structure XML. Jika Anda menggunakan XPath untuk menggali XML, ini mirip dengan sistem itu. Kami akan masuk ke detail saat kami membangun bagian fitur product kami, tapi inilah rasa E4X, menggunakan XML in-ActionScript dari dua paragraf yang lalu:

1	trace(products.product.@id);

Singkatnya, ini mereferensikan objek XML utama (products), memilih elemen produk bersarang (.product), dan akhirnya nilai atribut id dari elemen tersebut (.@id). Detailnya sedikit lebih rumit dari itu, tetapi mudah-mudahan itu menggambarkan betapa lancar ActionScript 3 dapat bekerja dengan XML.

Anda dapat membaca lebih lanjut tentang E4X di Wikipedia, dan tentang ECMAScript juga.

Jika Anda penasaran, Anda dapat menjalankan file AS2 Flash dan memeriksa penanganan XML, atau Anda benar-benar dapat menggunakan port AS3 dari kelas XML AS2. Lihat di dokumen bantuan di bawah flash.xml.XMLDocument. Saya akan menyarankan Anda untuk melakukan ini hanya untuk kepentingan akademis dan untuk memuaskan selera penasaran Anda, karena saya pribadi tidak akan pernah berharap sintaks XML AS2 bahkan pada musuh terburuk saya.

Langkah 13: Membuat Beberapa Variabel

Mari kita mulai. Pertama, kita akan membutuhkan beberapa variabel yang akan digunakan nanti. Kami hanya akan membuatnya sekarang dan tujuannya akan dijelaskan lebih lengkap karena kami perlu menggunakannya.

Di file Flash fitur Anda (kami selesai dengan yang sementara yang kami buat pada langkah terakhir), kami perlu menempatkan skrip pada frame pertama dari layer action. Dalam skrip ini, yang akan berisi semua logika kami untuk bagian tersebut, mulailah dengan mendeklarasikan dan menempatkan nilai ke dalam beberapa variabel:

var xml:XML;
var featureIds:Dictionary = new Dictionary();
var link:String;
var loader:Loader = new Loader();
addChild(loader);
loader.x = 10;
loader.y = 86;

Variabel xml dan link akan mendapatkan nilai nanti di program. FeatureIds harus menjadi Dictionary kosong untuk saat ini, yang akan diisi nanti juga. Loader perlu dibuat dan ditempatkan di atas stage, tetapi sekali lagi, kami tidak akan memuat apa pun sampai nanti.

Langkah 14: Memuat XML file

Kami mungkin dapat menulis XML langsung ke ActionScript, tetapi lebih fleksibel untuk memuatnya saat runtime dari file XML eksternal. Dengan cara ini, kita bisa membuat bagian Flash yang cukup fleksibel untuk menanggapi perubahan dalam XML, dan kemudian melakukan pembaruan menjadi masalah memperbarui file XML, dan bukan file Flash. Ini adalah cara kerjanya; memperbarui XML itu mudah, memperbarui file Flash tidak begitu mudah.

Jadi, kita perlu memuat file XML. Kami menggunakan objek URLLoader untuk melakukan ini. Tambahkan berikut ini setelah deklarasi variabel yang ada:

1	var xmlLoader:URLLoader = new URLLoader();
2	var url:URLRequest = new URLRequest("products.xml");
3	xmlLoader.load(url);
4	xmlLoader.addEventListener(Event.COMPLETE, onXmlLoad);

Pertama, kami membuat URLLoader. Sebuah URLLoader hanya memuat konten dari URL yang diberikan. Ini berbeda dari Loader (yang kami temui dalam tutorial AS3 101 tentang Display Objects), yang dirancang khusus untuk memuat SWF dan file gambar bitmap, dan menampilkannya. URLLoader akan memuat apa saja. Dalam kasus kami, kami ingin memuat file teks.

Di baris kedua, kita membuat objek URLRequest yang menunjuk ke URL file XML yang ingin kita muat. Dalam hal ini, ini adalah path relatif (dan file XML berada di direktori yang sama dengan SWF). Jika suka, Anda dapat menempatkan XML di tempat lain, dan menyesuaikan string yang masuk ke URLRequest. Itu bahkan bisa menjadi path absolut jika Anda mau. Namun, perlu diketahui bahwa pembatasan keamanan muncul ketika loading XML file dari domain yang berbeda dari yang SWF berada. Berurusan dengan ini di luar cakupan tutorial ini, tetapi bermanfaat untuk mengetahui situasinya, dan mengetahui bahwa Anda dapat mencari "crossdomain.xml" untuk cara menghadapinya.

Baris ketiga memberitahu URLLoader untuk mulai memuat dari URLRequest.

Kami menambahkan event listener di baris keempat, memastikan kami dapat bertindak berdasarkan data yang dimuat setelah dimuat sepenuhnya. Kami tidak dapat melakukan apa pun dengan file XML sebelumnya. Juga, kita harus mengatur event handler ProgressEvent.PROGRESS dan IOErrorEvent.IO_ERROR (dibahas lebih lengkap dalam tutorial AS3 101 tentang Obyek Tampilan), tetapi untuk tujuan tutorial ini kita akan menyebutkannya, tetapi tidak menindakinya.

Sebagai bagian terakhir dari langkah ini, kita harus memastikan bahwa kita menulis (atau setidaknya mulai menulis) fungsi onXmlLoad yang akan dieksekusi setelah XML dimuat:

1	function onXmlLoad(e:Event):void {
2	trace("xml loaded");
3	}

Pada titik ini, Anda harus dapat menjalankan file dan melihat jejak di panel Output ketika file XML dimuat (tidak akan lama). Atau jika ada yang salah, Anda mungkin melihat kesalahan di panel Output, mungkin karena file XML salah tempat.

Langkah 15: Membuat XML

Sekarang kita telah memuat file xml, kita perlu mengubah data teks menjadi objek xml. Ini mudah dilakukan dengan menambahkan baris berikut ke fungsi onXmlLoad:

1	function onXmlLoad(e:Event):void {
2	trace("xml loaded");
3	<strong>xml = new XML(xmlLoader.data);</strong>
4	}

Kami menggunakan variabel yang kami buat beberapa langkah yang lalu. Itu ada di luar fungsi sehingga tetap ada selama durasi aplikasi Flash. Sekarang kita bisa menggunakannya.

Properti data URLLoader hanyalah isi dari file yang kami muat. Dalam hal ini, itu adalah data teks, yang merupakan data XML, dan meneruskan String berformat XML ke konstruktor XML (new XML()) akan menguraikan string itu ke objek XML. Jadi sekarang kita memiliki objek XML yang tepat dalam variabel xml. Anda bisa mengujinya

1	trace(xml.toXMLString())

Jika Anda menguji sekarang, Anda akan melihat dokumen XML, lebih atau kurang, dicetak ke panel Output.

Langkah 16: Parsing XML

Sekarang untuk beberapa keajaiban E4X. Kami akan mendapatkan banyak pengalaman dengan ini, tetapi saat ini kami perlu mengeluarkan keempat (atau berapa banyak) elemen product dari XML sehingga kami dapat membuat empat (atau berapa banyak) tombol. Menggunakan ekspresi E4X akan menjadi "serakah" yang mereka bisa, yang berarti mereka akan meraih sebanyak mungkin kecocokan yang valid. Ini bekerja untuk keuntungan kita, karena kita dapat menulis ungkapan yang sangat sederhana dan membuatnya mengambil semua elemen product.

Pada titik ini, variabel xml menampung keseluruhan objek XML. Dengan demikian, merujuk ke variabel xml berarti kita merujuk ke elemen root XML, itu elemen. Dari sana, kita dapat menggunakan ekspresi dot-sintaks untuk menelusuri ke dalam struktur data. Jika kita membuat baris berikut di akhir fungsi onXmlLoad:

1	var productElements:XMLList = xml.product;

Kami akan mendapatkan semuanya elemen yang merupakan anak-anak langsung dari elemen root. Kita akan lihat nanti bagaimana kita bisa lebih selektif. Saat ini, penting untuk dicatat bahwa ekspresi E4X sebenarnya mengembalikan objek XMLList, bukan objek XML. Objek XMLList adalah objek yang agak aneh, dan dapat berperilaku seperti objek XML dalam beberapa situasi. Anda bisa menganggapnya seperti array elemen XML. Dalam kasus kami, ini akan memiliki entri individual untuk masing-masing dari empat elemen.

Bahkan, kita dapat menjelajahi XMLList sedikit sebelum melangkah lebih jauh. Coba yang berikut ini:

1	trace(productElements[2]);

Dan Anda akan melihat ketiga elemen di panel Output (indeks, seperti indeks dan kedalaman Array untuk DisplayObjects, berbasis 0).

Anda juga dapat mengetahui berapa banyak item dalam daftar dengan menggunakan metode length():

1	trace(productElements.length());

Sangat penting untuk menyadari bahwa XMLLists mirip dengan Array tetapi tidak benar-benar Array. Sesuatu yang cenderung membuat saya sering tersandung adalah bahwa saya lupa bahwa Array memiliki myArray.length), dan XMLLists memiliki myList.length()). Ini perbedaan yang penting karena XMLLists mampu memproses ekspresi E4X, jadi menulis myList.length akan benar-benar mencari elemen yang terkandung dalam daftar.

Kami dapat menggabungkan kedua informasi ini dan mengulangi XMLList (menghapus jejak sebelumnya):

var len:int = productElements.length();
for (var i:int = 0; i < len; i++) {
	trace("Element " + i);
	trace(productElements[i].toXMLString());
}

Kami masih melacak, tetapi sekarang kami dapat mengulang data, seperti yang kami lakukan pada tutorial pengulangan. Hanya sekarang data kami bersifat eksternal untuk aplikasi Flash. Betapa kerennya itu?

Langkah 17: Membuat Tombol

Oke, kami mengulang. Mari kita lakukan sesuatu dengan data.

Saat kita mengulang, kita akan membuat tombol baru dari simbol pustaka, posisikan, dan tambahkan ke daftar tampilan. Kami juga akan memberikan nama (untuk kenyamanan) dan menetapkan event listener CLICK.

var len:int = productElements.length();
var btn:FeatureButton;
for (var i:int = 0; i < len; i++) {
	btn = new FeatureButton();
	btn.x = 10 + i * 50;
	btn.y = 10;
	addChild(btn);
	btn.name = "btn" + i;
	btn.buttonMode = true;
	btn.addEventListener(MouseEvent.CLICK, onButtonClick);
}

Ini bukan sesuatu yang baru dari apa yang telah kita bahas dalam tutorial AS3 101 sebelumnya. Properti buttonMode mungkin perlu dijelaskan: secara default Sprite atau MovieClip dengan perilaku seperti tombol tidak menampilkan kursor khusus. Di web, bagaimanapun, kita terbiasa dengan kursor jari ketika menggulirkan sesuatu yang dapat diklik, jadi bagus untuk mengaktifkan buttonMode, yang melakukan hal itu: kursor berubah menjadi kursor jari ketika Sprite digulirkan.

Selain itu, matikan fungsi event handling:

1	function onButtonClick(me:MouseEvent):void {
2	trace("button clicked: " + me.target.name);
3	}

Jika Anda mengujinya sekarang, Anda akan melihat empat tombol muncul, masing-masing, ketika diklik, akan melacak namanya.

Sekarang, untuk bagian yang sangat keren. Edit dokumen XML Anda; baik menghapus a elemen (sehingga Anda memiliki 3) atau menambahkan satu tambahan (sehingga Anda memiliki 5). Ketika Anda menguji SWF Anda lagi (cukup publikasi ulang di Flash), Anda harus tahu jumlah tombol sesuai dengan jumlah elemen. Akui saja, itu keren.

Langkah 18: Klik Tombol

Sekarang kita perlu menangani klik dengan lebih elegan. Apa yang akan kita lakukan adalah mengasosiasikan masing-masing atribut id elemen dengan instance FeatureButton. Kami akan menggunakan Dictionary (featureIds) yang kami siapkan sebelumnya.

Sekarang, dalam loop, kita perlu mendapatkan id dari elemen XML, dan kemudian menyimpannya di Dictionary bersama dengan FeatureButton

for (var i:int = 0; i < len; i++) {
	btn = new FeatureButton();
	btn.x = 10 + i * 30;
	btn.y = 10;
	addChild(btn);
	btn.name = "btn" + i;
	btn.addEventListener(MouseEvent.CLICK, onButtonClick);
 
	var productElement:XML = productElements[i];
	var idString:String = productElement.@id;
	var id:int = parseInt(idString);
	featureIds[btn] = id;
}

Langkah-langkahnya dipecah. Pada baris pertama (baru), kami dengan mudah mendapatkan referensi ke elemen product yang saat ini kami loop. Selanjutnya, kita menggunakan E4X untuk mengambil atribut id dari elemen itu (ingat, simbol "@" membawa kita ke atribut elemen). Sekarang, karena data XML selalu berupa String, dan id kita sebenarnya adalah bilangan bulat, kita perlu mengonversi dari String ke int, yang dilakukan fungsi parseInt.

Poin terakhir ini penting untuk diingat: hanya karena Anda tahu angka (atau boolean, atau tanggal, atau apa pun), tidak berarti bahwa ActionScript mengenalinya. XML benar-benar hanya data teks, jadi semua yang keluar darinya melalui ekspresi E4X akan menjadi sebuah String. Jika Anda menginginkannya menjadi sesuatu yang lain, Anda perlu mengubahnya secara eksplisit.

Baris terakhir membuat koneksi antara tombol dan id dengan menggunakan tombol sebagai kunci dalam Dictionary, dan menetapkan id sebagai nilainya.

Langkah 19: Tombol klik, Bagian 2

Selanjutnya, kita perlu mendapatkan id itu kembali setelah klik terjadi. Dalam fungsi onButtonClick:

1	function onButtonClick(me:MouseEvent):void {
2	trace("button clicked: " + featureIds[me.target]);
3	}

Jika Anda mencoba ini, Anda akan melihat bahwa Anda mendapatkan pelacakan id yang cocok untuk setiap klik.

OK, dengan itu berfungsi, kita sekarang dapat melanjutkan untuk mendapatkan sisa data prodcut. Di sinilah E4X berubah dari keren menjadi powerful. Kami akan secara selektif memilih elemen product dari seluruh dokumen XML kami berdasarkan id ini. Ini tidak seperti meminta database untuk satu baris dengan id tertentu, dari ratusan baris. Ini terlihat seperti ini:

function onButtonClick(me:MouseEvent):void {
	var id:int = featureIds[me.target];
	trace("button clicked: " + id);
	var productElement:XML = xml.product.(@id==id)[0];
}

Sebenarnya ada beberapa trik yang terjadi pada saat bersamaan. Yang pertama adalah bagian yang terlihat seperti ini: (@id == id). Tanda kurung memungkinkan untuk pemilihan elemen XML bersyarat. Jika kami baru saja menulis xml.product.@id, kami akan mendapatkan XMLList dari semua atribut id yang terdapat dalam elemen prodiuct. Namun, dengan ekspresi kondisional ditambahkan, E4X temukan elemen didasarkan pada kriteria yang kita tetapkan dalam tanda kurung. Dalam hal ini, kami sedang melihat atribut id elemen dan membandingkannya dengan id kami yang diketahui dari Dictionary.

Trik kedua melibatkan melewatkan XMLList (dengan cara berbicara). Anda akan ingat bahwa ekspresi E4X mengembalikan XMLList, bukan objek XML. Baiklah, kita dapat yakin bahwa setiap elemen product memiliki id unik (bagaimana? Yah, anggap saja kita memiliki beberapa mekanisme untuk memastikan hal ini, seperti bagaimana database memiliki cara untuk memastikan kunci unik untuk entri tabel). Oleh karena itu, setiap kali ekspresi ini dijalankan, mungkin akan mengembalikan XMLList yang terdiri dari objek XML tunggal. Bahkan jika tidak, kami masih hanya menginginkan satu sehingga kami dapat melanjutkan dengan menampilkan data.

Jadi, kami menambahkan bahwa [0] di akhir ekspresi. Kita bisa menulisnya seperti ini:

1	var productElementMatch:XMLList = xml.product.(@id==id);
2	var productElement:XML = productElementMatch[0];

Yang, tidak diragukan lagi, akan ada komentar berbeda yang mengeluh bahwa saya menyarankan teknik yang mengerikan. Dalam situasi tertentu, Anda mungkin lebih suka pendekatan yang lebih bertele-tele (dua baris). Pada orang lain, Anda dapat memilih teknik tulisan cepat untuk menyelamatkan diri Anda dari baris dan pembuatan variabel tambahan.

Mengapa tunjukkan ini? Ada dua alasan mengapa saya menunjukkan ini kepada Anda. Salah satunya adalah, untuk menunjukkan kepada Anda ini. Jika tidak ada yang memberi tahu Anda detail halus bahasa ActionScript ini, bagaimana Anda akan tahu? Yang lain adalah bahwa saya cukup yakin bahwa id kita akan menjadi unik, dan saya lebih suka versi kode yang kurang verbose.

Langkah 20: Tombol klik, Bagian 3

Akhirnya, kita dapat melakukan sesuatu dengan data ini. Dari sini, sebenarnya agak sederhana. Kami melakukan beberapa ekspresi E4X sederhana untuk mengeluarkan data individual dari elemen product, dan kami menggunakannya untuk mengisi konten area fitur. Inilah fungsi onButtonClick yang lengkap:

function onButtonClick(me:MouseEvent):void {
	var id:int = featureIds[me.target];
	trace("button clicked: " + featureIds[me.target]);
	var productElement:XML = xml.product.(@id==id);

	caption_tf.text = productElement.name.toString();
	description_tf.htmlText = productElement.description.toString();
	link = productElement.link.toString();
	loader.load(new URLRequest(productElement.image.toString()));
}

Dua baris pertama cukup sederhana; mereka hanya mengambil string dari XML dan menempatkan mereka ke dalam dua TextFields. Variasi satu ini dengan deskripsi TextField. Dengan yang itu, kami menggunakan properti htmlText alih-alih properti teks biasa. Melakukan hal itu memungkinkan Flash membuat serangkaian tag HTML sederhana untuk tujuan pemformatan teks. Ini adalah tag yang kami sisipkan ke elemen <description> , yang mengharuskan penggunaan tag CDATA.

Kami juga hanya menempatkan string dari elemen XML <link> ke dalam variabel tautan yang kami buat beberapa waktu lalu. Kami akan menggunakan ini pada langkah berikutnya, ketika kami menghubungkan tautan di bidang teks deskripsi.

Terakhir, kami kembali menggunakan nilai String elemen <image> untuk memuat sesuatu ke Loader yang kami buat pada saat yang sama dengan variabel tautan. URL String harus dibungkus dalam URLRequest, seperti yang terjadi ketika kita memuat dokumen XML. Namun kali ini, kami melakukan itu dan memuat file semua dalam satu langkah. Ini sedikit lebih bodoh, tetapi Anda akan sering melihat gaya ini.

Jika Anda mengujinya sekarang, itu seharusnya terlihat cukup bagus!

Langkah 21: Menangani Tautan Teks

Kami memiliki tag <a> dalam deskripsi kami, tetapi mereka tidak melakukan banyak. Di sini kita akan memperkenalkan teknik lain, TextEvent.

Ketika TextField memiliki teks HTML di dalamnya, dan HTML yang memiliki tag <a>, maka otomatis akan menjadi diklik. Dan jika nilai dari atribut href URL, Anda akan dibawa ke halaman tersebut di browser web Anda ketika Anda mengklik link. Tetapi ActionScript menyediakan sedikit lebih dari sekadar hyperlink; Anda dapat menggunakan tautan untuk memicu ActionScript juga.

Pertama, nilai atribut href harus dimulai dengan "event:" sebagai kebalikan dari "http://" atau menjadi tautan relatif. Menggunakan protokol event psuedo, kita bisa mendapatkan Flash untuk memperlakukan klik sedikit berbeda. Kami sudah melakukan ini dalam dokumen XML, tapi saya sebutkan di sini sebagai langkah yang diperlukan.

Kedua, kita perlu menambahkan event listener ke TextField yang dimaksud:

1	description_tf.addEventListener(TextEvent.LINK, onTextLink);

Ini adalah event yang dikirim ketika href dimulai dengan "event:"

Akhirnya, kita perlu menulis fungsi itu. Anda akan menerima objek TextEvent di parameter fungsi, yang akan memiliki nilai href di properti teks. Kami menggunakan nilai filter, "link." Dalam aplikasi yang lebih kompleks, ini bisa berupa data yang perlu ditindaklanjuti, atau pengidentifikasi yang membedakan antara satu tautan atau lainnya. Kami hanya ingin event teks, maka kami akan menggunakan nilai variabel link untuk melompat ke halaman baru. Untuk melihat apa yang terjadi, coba berikut ini:

1	function onTextLink(te:TextEvent):void {
2	trace(te.text);
3	}

Sekarang, untuk menyelesaikan ini, ganti jejak itu dengan yang berikut ini:

function onTextLink(te:TextEvent):void {

	navigateToURL(new URLRequest(link));
    
}

Uji filmnya, dan Anda harus dapat bernavigasi menggunakan tautan "View product details".

Langkah 22: Membuat State Awal

Saat ini, semuanya berfungsi, kecuali bahwa halaman tersebut cukup kosong saat pertama kali dimuat. Semuanya bagus setelah Anda mengklik tombol, tetapi kami mungkin harus membuat product pertama muncul secara default. Ini mudah dilakukan dengan mensimulasikan klik tombol pada tombol pertama setelah XML dimuat.

Di akhir loop dalam fungsi onXmlLoad, tambahkan kode berikut:

1	if (i == 0) {
2	btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
3	}

Seluruh fungsi sekarang akan terlihat seperti ini:

function onXmlLoad(e:Event):void {
	trace("xml loaded");
	xml = new XML(xmlLoader.data);
	//trace(xml.toXMLString())
	var productElements:XMLList = xml.product;
	//trace(productElements[2])
	//trace(productElements.length());
	var len:int = productElements.length();
	var btn:FeatureButton;
	for (var i:int = 0; i < len; i++) {
		btn = new FeatureButton();
		btn.x = 10 + i * 50;
		btn.y = 10;
		addChild(btn);
		btn.name = "btn" + i;
		btn.buttonMode = true;
		btn.addEventListener(MouseEvent.CLICK, onButtonClick);
 
		var productElement:XML = productElements[i];
		var idString:String = productElement.@id;
		var id:int = parseInt(idString);
 
		featureIds[btn] = id;
 
		if (i == 0) {
			btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
		}
	}
}

Ini hampir sama dengan mengklik tombol pertama (kode ini hanya berjalan jika i adalah 0, dengan kata lain, pertama kali melalui loop ketika kita membuat tombol pertama). Perbedaannya adalah bahwa event CLICK tidak menghasilkan melalui klik mouse yang sebenarnya oleh pengguna, melainkan dengan secara manual memanggil dispatchEvent pada tombol MovieClip. Panggilan dispatchEvent ini akan terjadi secara internal setiap kali klik nyata terjadi. Ini bukan teknik yang tepat dalam semua kasus, tapi di sini tidak masalah; jika Anda menjalankan film sekarang, Anda akan melihat fitur pertama muncul secara otomatis.

Langkah 23: Langkah Bonus: Menata Bidang Teks

Jika Anda tahu HTML, Anda mungkin juga tahu CSS. Seperti halnya Flash mendukung serangkaian HTML terbatas di TextFields-nya, Flash juga mendukung serangkaian CSS terbatas untuk menata teks HTML di TextFields-nya. Langkah ini tidak selalu terkait dengan penggunaan XML, tetapi kami akan dengan cerdik menggabungkan beberapa XML yang dipanggang untuk memberikan beberapa gaya ke bidang teks kami, dan dalam proses mempelajari dasar-dasar cara mendesain teks HTML dinamis dengan CSS.

Pertama, kita perlu menulis style sheet kita. Semua kode berikut dapat dengan mudah ditempatkan di akhir skrip Anda. Kita dapat membuat variabel XML sebaris (yaitu, satu tertanam dalam skrip sebagai lawan memuat dokumen eksternal), dan kemudian menempatkan CSS kami di tag CDATA:

var css:XML = <style>
	<![CDATA[
		a {
			color:#992408;
		}
	]]>
</style>

Jika Anda ingin melihat ini berfungsi, Anda dapat mengikuti ini dengan trace:

1	trace(css.toString());

Selanjutnya, kita bisa membuat objek StyleSheet:

1	var styles:StyleSheet = new StyleSheet();

Dan kemudian kita perlu mem-parsing teks "file" CSS ke dalam StyleSheet, seperti:

1	styles.parseCSS(css.toString());

Ini mengambil string yang berisi kode CSS dan membuatnya dapat digunakan sebagai objek ActionScript StyleSheet. Sekarang kita bisa menerapkan StyleSheet ke deskripsi TextField:

1	description_tf.styleSheet = stylesheet;

Dan jika Anda mengujinya sekarang, Anda akan melihat tautan teks Anda muncul dalam warna merah:

Perhatikan bahwa parseCSS mengambil string apa pun, dan kami bisa saja melakukan ini:

1	styles.parseCSS("a {color:#992408;}");

Untuk gaya yang sederhana, ini mungkin bisa dilakukan, tetapi seperti yang mungkin Anda ketahui, dokumen CSS bisa panjang, dan penggunaan whitespace (baris baru dan identasi) membuatnya jauh lebih mudah untuk bekerja dengan file tersebut. Apa yang kami lakukan di sini adalah menggunakan kemampuan ActionScript untuk menulis data XML langsung ke dalam skrip, dan menggunakan CDATA XML untuk menghasilkan string yang pada dasarnya kode dalam kode (jika Anda menghitung XML sebagai kode juga, maka itu kode dalam kode dalam kode).

Teknik ini membuatnya sangat mudah untuk berurusan dengan keluarnya quote atau baris baru. Mudah, seperti masuk, Anda tidak harus melakukannya. Menggunakan inline XML dengan CDATA juga berguna untuk menulis fungsi-fungsi JavaScript yang Anda jalankan dengan ExternalInterface (teknik yang akan kami sebutkan tetapi tidak dimasukan ke sini). XML lebih dari sekedar penyimpanan data!

Perhatikan bahwa Anda juga dapat memuat file CSS, dengan cara yang sama seperti Anda memuat file XML. Itu lebih ringkas untuk hard-code CSS ke dalam ActionScript, ditambah itu memungkinkan untuk tangen dalam penggunaan XML. Cari "memuat CSS dengan ActionScript" untuk beberapa petunjuk dasar tentang penggunaan file CSS eksternal. Anda akan melihat beberapa kesamaan antara itu dan memuat file XML eksternal.

Langkah 24: kesimpulan

Pada titik ini, Anda harus memiliki alat yang sangat kuat di gudang senjata Anda. XML adalah format yang sangat populer untuk menyimpan data dalam aplikasi Flash. Ada metode lain yang memiliki kelebihan dan kekurangan sendiri, tetapi konsepnya tetap sama. Belajar mengendalikan potonga Flash Anda dengan aset dan data eksternal secara resmi membawa Anda naik dari tingkat pemula dan ke tingkat menengah.

Ya itu benar. Jika Anda telah mengikuti ketujuh bagian dari seri ini sejauh ini, Anda mungkin tidak benar-benar memenuhi syarat sebagai pemula lagi. Anda telah mempelajari tentang variabel, fungsi, logika kondisional, perulangan dan array, daftar tampilan Flash, dan akhirnya XML sebagai sumber data eksternal. Pada titik ini, konsep-konsep utama telah dipresentasikan dan diilustrasikan, dan walaupun pasti ada lebih banyak detail untuk diketahui dan teknik yang lebih maju untuk dipelajari, Anda sekarang harus memiliki pengetahuan yang diperlukan untuk menangani proyek yang sedikit rumit. Saya harap Anda dapat melihat kembali ke awal dan kagum pada seberapa jauh Anda telah datang.

Apa selanjutnya untuk AS3 101, Anda bertanya? Saya pikir sudah waktunya untuk menorehnya. Cari beberapa tutorial tentang dasar-dasar Pemrograman Berorientasi Objek untuk memukul segera. Kami masih akan kembali ke topik "penting" dari waktu ke waktu, jadi jangan khawatir jika Anda masih merasa ada beberapa lubang yang tersisa di pondasi.

AS3 101: XML - Basix