Penghitung waktu bergaya Jam Bandara

Dalam tutorial ini kita akan membuat penghitung waktu mundur yang dapat digunakan kembali dengan tanggal target dinamis yang dapat diatur melalui XML. Kami akan menganimasikan angka-angka yang terbalik dengan gaya dari papan status bandara atau stasiun kereta yang lama. Kami akan membahas kode, pembuatan grafik dan animasi.

Langkah 1: Atur File Flash Anda

Buat file Flash baru (Actionscript 3) dengan pengaturan ini: 500x300, latar belakang hitam, dan 30 fps.

Langkah 2: Buat MovieClip digit_bottom

Buat MovieClip baru bernama 'digit_bottom' dan buat persegi panjang bulat di dalamnya kira-kira 36px lebar dengan tinggi 50px. (Cara cepat menggambar persegi panjang dengan dimensi yang tepat adalah memilih alat persegi panjang dan Alt-klik di atas panggung.)

Berikan persegi panjang mengisi gradien dari #111111 (atas) ke #333333 (bawah) dan garis 2 px berwarna #333333.

Langkah 3: Posisikan Rectangle

Posisikan persegi panjang sehingga titik pendaftaran MovieClip (sedikit '+') tepat di tengah antara bagian atas dan bawah dan tepi kiri. Jika Anda membuat tinggi 50px persegi panjang Anda, maka nilai y haruslah -25.

Langkah 4: Tambahkan Nomor

Buat layer baru dan tambahkan kolom teks dinamis bernama 't_num'. Pilih font yang memiliki bandara atau stasiun kereta api yang terasa (seperti Helvetica, DIN, atau Interstate). Saya menggunakan Helvetica Bold.

Set Paragraph Format ke tengah, dan ingat untuk menanamkan font untuk angka 0-9.

Posisikan bidang teks sehingga dipusatkan di latar belakang persegi panjang.

Kami akan menggunakan MovieClip ini sebagai dasar untuk grafik lain, jadi luangkan waktu sejenak untuk memastikannya terlihat bagus.

Langkah 5: Tambahkan Mask

Buat layer baru di timeline dari digit_bottom MovieClip dan menyebutnya 'mask'. Salin persegi panjang bulat dan Tempel di Tempat pada lapisan mask (Edit> Paste in Place, atau Command-Shift-V).

Pilih separuh bagian atas persegi panjang topeng dan hapus.

Klik kanan layer mask, pilih Mask dan pastikan bahwa masking semua lapisan di bawahnya.

Langkah 6: Buat MovieClip digit_top

Pergilah ke Perpustakaan, gandakan digit_bottom MovieClip dan beri nama salinan baru 'digit_top'.

MovieClip ini akan hampir identik dengan klip digit_bottom, kecuali topeng akan menampilkan separuh bagian atas grafis sebagai ganti bagian bawah.

Hapus grafik yang saat ini ada di layer mask. Salin persegi panjang bulat dan Tempelkan kembali di Tempatkan pada layer mask. Kali ini pilih bagian bawah dan hapus.

Satu-satunya penyesuaian lain yang mungkin ingin Anda lakukan di sini adalah untuk menyesuaikan warna teks dan bayangan latar belakang persegi panjang bulat. Saya membuat grafik di klip digit_top saya sedikit lebih gelap untuk mensimulasikan cahaya yang datang dari atas.

Langkah 7: Buat Digit MovieClip

Buat MovieClip baru bernama 'Digit'. Seret di digit_top dan digit_bottom MovieClips dan posisikan keduanya pada 0,0. Beri mereka nama contoh 'teratas1' dan 'bawah1'.

Sekarang salin kedua MovieClips (digit_top dan digit_bottom), buat layer baru, dan Tempel di Tempatkan salinan masing-masing. Beri nama salinan baru '2 teratas' dan 'bawah2'.

Anda seharusnya sudah memiliki 4 MovieClips di dalam Digit MovieClip Anda: 2 salinan digit_top dan 2 salinan digit_bottom. Saya akan menjelaskan mengapa kami menyiapkannya seperti ini di langkah berikutnya.

Langkah 8: Strategi Animasi

Kita harus melakukan sedikit tipuan animasi untuk mendapatkan efek flipping number yang kita inginkan. Lihatlah diagram di bawah Digit MovieClip kami (saya render dalam 3D agar Anda dapat melihat layering lebih mudah):

Animasi Langkah 1:

Kita mulai dengan klip bottom2 membalik terbalik (menggunakan properti scaleY) dan ditempatkan di belakang klip top2. Pada titik ini, 2 klip yang terlihat adalah top2 dan bottom1. Angka-angka pada dua klip ini sesuai satu sama lain, sehingga mereka membentuk digit lengkap.

Animasi Langkah 2:

Sekarang kita membalikkan klip top2 ke tengah digit. Pada titik ini, skalaY menjadi nol, jadi klip tidak akan terlihat. Pada saat yang sama, kita juga membalik klip bottom2, tapi yang ini kita akan membalik ke bawah. Karena berada di belakang top2, itu tidak akan terlihat sampai melewati titik tengah. Sekarang 2 klip yang terlihat adalah top1 dan bottom1. Angka-angka pada dua klip ini tidak cocok, tetapi tidak apa-apa karena langkah ini hanya berlangsung sesaat.

Animasi Langkah 3:

Klip top2 tetap berada di tengah saat bottom2 terus jatuh ke bawah hingga ke bawah. Setelah itu di tempat angka-angka pada klip yang terlihat (top1 dan bottom2) kembali cocok untuk membentuk digit lengkap.

Animasi langkah 4:

Pada titik ini kita akan relayer dan reset posisi klip tersembunyi 2 untuk mendapatkan siap untuk flip berikutnya. Perhatikan bagaimana klip berada di posisi yang sama sebagai langkah 1, hanya terbalik.

Langkah 9: Buat Clock MovieClip

Sekarang setelah kita mengatur Digit MovieClip individual, mari kita bangun jam.

Buat MovieClip baru di atas panggung yang disebut 'Jam' dengan nama instan 'jam'. Di dalam tempat MovieClip baru 9 salinan Digit MovieClip Anda; 2 detik, 2 menit, 2 jam, dan 3 hari. Memberikan setiap digit nama contoh. Dari kiri ke kanan nama mereka 'digit0', 'digit1', 'digit2', dan sebagainya.

Tambahkan beberapa usus untuk memisahkan movieklip dan label untuk setiap bagian. Desain adalah terserah Anda. Saya menambahkan persegi lengkung gelap sebagai latar belakang untuk jam saya.

Terakhir, tambahkan sebuah field teks dinamis yang bernama 't_date'. Ini adalah tempat kami akan menunjukkan tanggal target jam adalah menghitung turun. Ingat untuk menanamkan font untuk bidang teks ini jika Anda tidak menggunakan font sistem.

Langkah 10: Buat Kelas Digit

Buat sebuah file Actionscript baru yang disebut 'Digit.as' dan tambahkan kode ini untuk membuat shell kosong untuk kelas:

1

2

package {

3

4

  import flash.display.MovieClip;

5

6

	public class Digit extends MovieClip {

7

		private const TOP:int = 0;

8

		private const BOTTOM:int = 1;

9

10

		private var _currentDigit:Array;

11

		private var _nextDigit:Array;

12

		private var _number:String = "0";

13

14

		// CONSTRUCTOR

15

		public function Digit() {

16

			_currentDigit = new Array( top1, bottom1 );

17

			_nextDigit = new Array( top2, bottom2 );

18

19

		}

20

21

	}

22

23

}

Ini belumlah banyak. Kami memiliki beberapa array untuk menyimpan 2 set digit_top dan digit_bottom MovieClips. Saya sudah menyiapkan 2 konstanta, TOP dan BAWAH untuk membantu melacak klip atas dan bawah dalam larik tersebut. Variabel _number akan menahan digit yang ditampilkan pada waktu tertentu.

(Catatan: saya menggunakan underscore dalam nama-nama variabel saya untuk menunjukkan variabel pribadi.)

Temukan Digit MovieClip Anda di Perpustakaan dan tetapkan kelas ini ke dalam pengaturan Linkage.

Langkah 11: Impor Perpustakaan TweenLite

Kami akan menggunakan perpustakaan TweenLite untuk menganimasikan Digit MovieClip kami.

Unduh versi AS3 dari pustaka TweenLite di sini.

Tempatkan folder 'com' di direktori yang sama dengan file Flash utama Anda (atau di jalur sumber Anda, jika Anda telah mengatur jalur kelas yang berbeda).

Tambahkan dua baris ini di bagian atas kelas Digit Anda, tepat di bawah impor MovieClip:

1

2

import com.greensock.*

3

import com.greensock.easing.*

Kami hampir tidak akan menggores permukaan apa yang dapat dilakukan oleh TweenLite dalam tutorial ini. Untuk informasi lebih lanjut, lihat Dokumentasi TweenLite.

Langkah 12: Programkan flipTo Animation

Tambahkan fungsi ini ke kelas Digit Anda:

1

2

public function flipTo(num:String):void {

3

	_number = num;

4

	_nextDigit[TOP].t_num.text = num;

5

	_nextDigit[BOTTOM].t_num.text = num;

6

7

	// flip down the top of the digit to the halfway point

8

	TweenLite.to(_currentDigit[TOP], .15, {scaleY: 0, ease: Linear.easeNone});

9

	// flip the next digit bottom down

10

	TweenLite.to(_nextDigit[BOTTOM], .3, {scaleY:1, onComplete: flipComplete,  ease: Bounce.easeOut});

11

}

Inilah yang terjadi, baris demi baris:

• Fungsi ini menerima String yang akan menahan digit yang akan kita balas. Baris pertama hanya menetapkan variabel _number kami untuk menyimpan digit itu.
• Selanjutnya kita mengatur bidang teks di TOP dan BOTTOM MovieClips dalam array _nextDigit kami untuk menampilkan digit yang sama.
• Kemudian kita menggunakan TweenLite untuk tween properti scaleY dari TOP MovieClip dari _currentDigit ke 0. Ini memberikan efek bahwa itu 'jatuh' menuju pusat digit.
• Baris terakhir adalah tween lain, kali ini menjiwai klip BOTTOM dari _nextDigit dari bagian atas digit ke bawah. Sekali lagi kami menggunakan properti scaleY untuk mensimulasikan efek ini, tapi kali ini dari -1 ke 1. Karena itu tweening dua kali sejauh klip atas, kami memberikan dua kali jumlah waktu (.3 detik bukannya.15 mendapat Ketika tween ini selesai itu akan memanggil fungsi disebut 'flipComplete'. Kami akan menulis bahwa fungsi pada langkah berikutnya.

Mari melihat diagram pada langkah 8 jika Anda bingung tentang animasi di sini.

Langkah 13: Tambahkan Fungsi flipComplete()

Tambahkan fungsi ini ke kelas Digit tepat di bawah fungsi flipTo:

1

2

private function flipComplete():void {

3

	// swap digits

4

	var next:Array = _currentDigit;

5

	_currentDigit = _nextDigit;

6

	_nextDigit = next;

7

8

	// reset layering

9

	reset();

10

}

Setelah animasi flip selesai, kami akan menjalankan fungsi ini. Ini swap array _currentDigit dan _nextDigit. Setelah itu telah melakukannya panggilan fungsi bernama 'reset' untuk me-reset klip layering dan posisi untuk flip berikutnya. Mari kita menulis bahwa fungsi sekarang.

Langkah 14: Tambahkan fungsi reset()

Tambahkan fungsi ini ke kelas Digit:

1

2

private function reset():void {

3

	addChild(_nextDigit[BOTTOM]);

4

	addChild(_currentDigit[TOP]);

5

6

	// flip up the next bottom to be behind the current top

7

	_nextDigit[BOTTOM].scaleY = -1;

8

	_nextDigit[TOP].scaleY = 1;

9

}

Dua baris pertama dalam fungsi ini pop _nextDigit BOTTOM dan kemudian _currentDigit TOP ke bagian atas daftar tampilan. Saya biasanya hanya menggunakan addChild() untuk melakukan ini karena memerlukan lebih sedikit mengetik daripada menggunakan setChildIndex().

Setelah klip dilapis ulang, kami mengatur properti scaleY sehingga mereka siap untuk flip berikutnya. Ini berarti mengubah _nextDigit [BOTTOM] dari 1 hingga -1 dan _nextDigit [TOP] dari 0 ke 1.

Sekali lagi, periksa diagram pada Langkah 8 jika Anda tersesat.

Langkah 15: Tambahkan ke Konstruktor

Satu hal yang kita lupa lakukan adalah memposisikan klip dengan benar untuk animasi flip pertama. Kita dapat melakukannya dengan mudah dengan menambahkan panggilan ke fungsi reset tepat di konstruktor kelas Digit:

1

2

// CONSTRUCTOR

3

public function Digit() {

4

	_currentDigit = new Array( top1, bottom1 );

5

	_nextDigit = new Array ( top2, bottom2 );

6

7

	reset();

8

}

Langkah 16: Tambahkan Fungsi nomor()

Satu hal yang kita perlukan di kelas Digit kami adalah cara untuk mengakses variabel _number pribadi dari luar kelas. Kami akan menambahkan fungsi pengakses sederhana:

1

2

public function get number():String {

3

	return _number;

4

}

Langkah 17: Buat Kelas Jam

Buat file ActionScript baru bernama 'Clock.as'. Tempelkan kode ini:

1

2

package {

3

4

	import flash.display.MovieClip;

5

	import flash.events.TimerEvent;

6

	import flash.media.Sound;

7

	import flash.utils.Timer;

8

9

	public class Clock extends MovieClip {

10

		private var _clockTimer:Timer;

11

		private var _targetDate:Date;

12

13

		// CONSTRUCTOR

14

		public function Clock() {

15

16

		}

17

18

	}

19

20

}

Belum banyak di sini. Cukup mengimpor beberapa kelas yang kami butuhkan. Saya juga memiliki beberapa variabel pribadi. _clockTimer akan menghitung mundur detik untuk kami, dan _targetDate akan menahan tanggal yang kami hitung mundur.

Langkah 18: Tambahkan fungsi set()

Tambahkan fungsi ini untuk kelas jam tepat di bawah konstruktor:

1

2

// set the target date and start the countdown timer

3

public function set(date:Date):void {

4

	_targetDate = date;

5

6

	_clockTimer = new Timer(1000) // tick every second (1000 milliseconds)

7

	_clockTimer.addEventListener(TimerEvent.TIMER, update);

8

	_clockTimer.start();

9

10

	// display the target date above the clock

11

	t_date.text = _targetDate.toLocaleString().toUpperCase();

12

13

	// update the clock once here so it starts with the correct time

14

	update();

15

}

Ini adalah fungsi yang kita akan gunakan untuk menetapkan target untuk jam. Ini menerima tanggal (tentu saja) dan menetapkan bahwa variabel _targetDate. Ini kemudian instantiates _clockTimer kami. _ClockTimer akan memanggil fungsi pembaruan sekali per detik untuk memperbarui digit.

Setelah memulai pengatur waktu, fungsi mengatur teks t_date dengan tanggal target. Fungsi toLocaleString() memastikan tanggal ditampilkan dalam zona waktu lokal pengguna.

Baris terakhir dari fungsi ini memanggil pembaruan sekali untuk mengatur jam ke waktu yang tepat. Kalau tidak, itu akan menampilkan '000 00:00:00' untuk satu detik sampai acara timer pertama.

Langkah 19: Tambahkan Fungsi update()

Fungsi ini agak panjang karena di situlah sebagian besar pekerjaan diselesaikan. Tambahkan ke kelas Jam Anda:

1

2

private function update(e:TimerEvent = null):void {

3

	var now:Date = new Date(); // get the current time

4

5

	// find the difference (in ms) between the target and now

6

	var diff:Number = _targetDate.valueOf() - now.valueOf();

7

	if(diff <=0){

8

		// TIME'S UP!

9

		// do something cool here

10

		_clockTimer.stop();

11

		_clockTimer.removeEventListener(TimerEvent.TIMER, update);

12

		diff = 0;

13

	}

14

15

	// convert to seconds

16

	diff = Math.round(diff/1000);

17

18

	// number of days

19

	var days:int = Math.floor(diff/ (24 * 60 * 60));

20

	diff -= days*(24 * 60 * 60 );

21

22

	// number of hours

23

	var hours:int = Math.floor(diff / (60 * 60))

24

	diff -= hours*60 * 60;

25

26

	// number of minutes

27

	var min:int = Math.floor(diff/ 60);

28

	diff -= min*60;

29

30

	// seconds are all that remain

31

	var sec:int = diff;

32

33

	// create an array of strings to hold the number for each value

34

	var diffArr:Array = new Array(String(days), String(hours), String(min), String(sec));

35

	var diffString:String = ""

36

	var len:int = 3; // the first value (days) has 3 digits. All the rest have 2

37

	for each(var s:String in diffArr){

38

		// pad the string with a leading zero if needed

39

		while(s.length < len){

40

			s = "0"+s;

41

		}

42

43

		len = 2; // all the other values are 2 digits in length

44

		diffString += s; // add the padded string to the diffString

45

	}

46

47

	// go through each character in the diffString and set the corresponding digit

48

	for(var i:int = 0; i< diffString.length; i++){

49

		if(diffString.substr(i, 1) != this["digit"+i].number){

50

			this["digit"+i].flipTo(diffString.substr(i, 1));

51

		}

52

	}

53

54

}

Fungsi ini menerima TimerEvent sebagai parameternya. Nilai default untuk parameter ini adalah null. Ini memungkinkan kita untuk memanggil fungsi tanpa mengirim parameter, seperti yang kita lakukan dalam fungsi yang ditetapkan.

Baris pertama dari fungsi ini mendapatkan tanggal dan waktu saat ini sebagai objek Tanggal. Selanjutnya, kita menemukan perbedaan antara tanggal saat ini dan tanggal target (baris 37). Jika perbedaannya adalah 0 atau kurang, maka itu melewati tanggal target, jadi kami menghentikan _clockTimer (baris 38-44).

Karena perbedaan waktu antara sekarang dan target dihitung dalam milidetik, kita perlu mengonversinya menjadi tampilan yang bagus dari hari, jam, menit, dan detik (garis 46-62). Matematika di sini cukup sederhana asalkan Anda tahu bahwa ada 1000 milidetik dalam hitungan detik, 60 detik dalam satu menit, 60 menit dalam satu jam dan 24 jam dalam sehari.

Pada baris 65, kami menyimpan semua nilai tersebut sebagai elemen dalam larik. Mulai di baris 68 kita loop melalui setiap elemen dan menambahkannya ke String karakter yang disebut 'diffString'. Saat melakukan ini, kami juga menambahkan nol terkemuka bila perlu (baris 71). Jadi jika nilai-nilai kami untuk jam adalah 30 hari, 5 jam, 56 menit, dan 6 detik, diffString akan terlihat seperti ini: '030055606'.

Hal terakhir yang dilakukan fungsi ini adalah loop melalui karakter dalam diffString (menggunakan metode charAt()). Untuk setiap karakter dalam string yang kita periksa untuk melihat apakah itu berbeda dari nomor yang saat ini ditampilkan pada digit yang sesuai. Ini mudah karena cara kami memberi nama contoh digit kami. Jika nomornya tidak sama dengan yang ditampilkan saat ini, kami memberi tahu digit itu untuk beralih ke nomor di diffString.

Langkah 20: Tambahkan Suara

Cari (atau buat) suara tik yang bagus yang akan diputar setiap kali jam diperbarui. Impor ke Perpustakaan file Flash Anda dan atur nama kelas ke 'TickSound' di pengaturan Linkage.

Tambahkan variabel _tickSound ke bagian atas kelas Jam Anda tepat di bawah dua variabel lainnya:

1

2

private var _clockTimer:Timer;

3

private var _targetDate:Date;

4

private var _tickSound:Sound = new TickSound();

Dan mainkan suara di dalam fungsi pembaruan:

1

2

_tickSound.play();

Langkah 21: Tambahkan Kelas Dokumen Utama

Penghitung waktu mundur kami selesai, kami hanya perlu beberapa cara untuk mengatur tanggal target. Buat file Actionscript baru bernama 'Main.as' dengan kode ini:

1

2

package {

3

4

	import flash.display.MovieClip;

5

6

	public class Main extends MovieClip {

7

8

		public function Main() {

9

10

			// set the target date for the clock

11

			var targetDate:Date = new Date();

12

			targetDate.setTime( Date.UTC(2010, 4, 28, 20, 00) );

13

			clock.set(targetDate);

14

		}

15

	}

16

17

}

Semua ini adalah mengatur tanggal target untuk contoh Jam di Panggung. Saya menggunakan setTime() dan Date.UTC() untuk mengonversi tanggal ke Universal Timecode. Dengan cara ini tanggalnya akan benar ketika diubah kembali ke waktu lokal di komputer pengguna. Juga, ingat bahwa bulan-bulan berbasis nol. Jadi, bulan 4 sebenarnya adalah Mei, bukan April.

Dalam file Flash Anda mengatur kelas Dokumen ke 'Main'.

Jika Anda membutuhkan penyegaran dalam menggunakan Kelas Dokumen, periksa Tip Cepat ini.

Langkah 22: Uji

Uji film Anda sekarang dan semuanya harus berfungsi. Coba ubah tanggal target di kelas Utama dan lihat bagaimana hitungan mundur berubah.

Satu kelemahan potensial bagaimana kami telah membuat ini adalah bahwa target tanggal keras-kode di SWF kami. Itu baik-baik saja, tapi itu akan menjadi dingin jika kita dapat secara dinamis memuat tanggal sehingga kita bisa menggunakan kembali hitung mundur untuk hal yang berbeda.

Mari kita lihat apa yang bisa kita lakukan tentang itu ...

Langkah 23: Buat File XML

Buat file XML baru di folder yang sama dengan file Flash Anda yang disebut 'targetDate.xml' (file XML hanyalah file teks biasa). Tambahkan ini ke file XML:

1

2

<targetDate>

3

	<year>2011</year>

4

	<month>3</month>

5

	<day>25</day>

6

	<hour>20</hour>

7

	<minute>21</minute>

8

</targetDate>

Menggunakan format ini untuk tanggal target kami cukup bengkak (ada markup lebih banyak daripada ada data aktual), tapi itu akan menjaga hal-hal yang sangat jelas untuk tujuan dari tutorial ini.

Langkah 24: Memuat XML

Sekarang mari kita membuat beberapa perubahan pada kelas dokumen utama kami. Ganti semuanya dalam file itu dengan kode ini:

1

2

package {

3

4

	import flash.display.MovieClip;

5

	import flash.net.URLLoader;

6

	import flash.net.URLRequest;

7

	import flash.events.Event;

8

9

	public class Main extends MovieClip {

10

11

		// CONSTRUCTOR

12

		public function Main() {

13

			// load the XML

14

			var xmlLoader:URLLoader = new URLLoader();

15

			xmlLoader.addEventListener(Event.COMPLETE, onDataLoaded);

16

			xmlLoader.load( new URLRequest("targetDate.xml") );

17

18

		}

19

20

	}

21

22

}

Anda akan melihat kami telah mengimpor beberapa kelas tambahan untuk membantu kami memuat file XML. Dalam fungsi konstruktor kami membuat contoh URLLoader baru untuk memuat file untuk kami. Kami melampirkan pendengar acara yang akan memanggil fungsi bernama 'onDataLoaded' ketika file selesai dimuat.

Langkah 25: Tambahkan fungsi onDataLoaded()

Tambahkan fungsi ini untuk kelas utama:

1

2

private function onDataLoaded(e:Event):void {

3

	var xml:XML = new XML(e.target.data);

4

5

	var targetDate:Date = new Date();

6

	targetDate.setTime(Date.UTC(int(xml.year), int(xml.month), int(xml.day), int(xml.hour), int(xml.minute) ));

7

8

	clock.set(targetDate);

9

}

Fungsi ini menciptakan objek baru XML dari berkas kami dimuat. Lalu kita membuat sebuah objek Date baru dari nilai-nilai dalam XML. Kita lagi menggunakan setTime() dan Date.UTC() untuk mengkonversi tanggal ke Universal Timecode. Baris terakhir adalah sama seperti sebelumnya, hanya mengirimkan target tanggal untuk contoh Clock kami.

Langkah 26: Membungkus

Itu adalah cukup banyak hal untuk yang satu ini. Ada beberapa perangkat tambahan yang mungkin Anda sukai untuk membuat meskipun:

1. Tergantung pada apa yang Anda gunakan hitungan mundur untuk, Anda mungkin ingin melakukan sesuatu yang istimewa bagi pengguna ketika hitungan mundur mencapai nol. Anda akan menambahkan ini ke kelas Clock di bagian fungsi update yang memeriksa apakah pengatur waktu nol.
2. Seperti yang saya sebutkan, format XML kami cukup boros seperti itu. Anda mungkin lebih suka melewatkan tanggal sebagai string melalui FlashVars, menggunakan format data yang berbeda (seperti JSON), atau hanya memformat XML menjadi sedikit lebih ringkas.

Semoga berhasil! Seperti biasa, kirim komentar dan beri tahu saya pendapat Anda.