Pages

Me-load gambar menggunakan XML

Oke, sekarang kita akan membuat script untuk me-load gambar-gambar berdasar sebuah file xml yang kita buat. Sebelumnya, apa sih sebenernya XML itu ?

kalo menurut wikipedia kayak gini nih :
XML (Extensible Markup Language) adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan pertukaran data antar sistem yang beraneka ragam.  XML merupakan kelanjutan dari HTML (HyperText Markup Language) yang merupakan bahasa standar untuk melacak Internet.
Pola XML itu seperti HTML, jadi kita membutuhkan tag pembuka dan tag penutup
<iniadalahtag></iniadalahtag>
tapi kalo kita tidak memiliki tag penutup, cukup seperti ini :
<iniadalahtag/>
Oke, langsung kita mulai cara-caranya :
  • Buat sebuah file baru ActionScript 2.0 minimal menggunakan Macromedia Flash 8.
  • Kemudian buat sebuah file baru, beri nama yaitu data.xml, kemudian isikan dengan teks berikut :
    <konfigurasi>
    <gambar name="Gedung">gedung.png</gambar>
    <gambar name="Pasar">pasar.png</gambar>
    <gambar name="Pantai">pantai.png</gambar>
    </konfigurasi>
  • Kemudian kembali pada dokumen flash, dan tekan F9 pada frame 1 layer 1 agar muncul panel Actions :)
  • Kemudian ketikkan script berikut :
    //deklarasi variabel xml
    var xml:XML = new XML();
    //maksudnya kita tidak mempedulikan adanya spasi antara tag-tag xml
    xml.ignoreWhite=true;
    //mengeksekusi load
    xml.load("data.xml");
    //memberikan event load
    xml.onLoad = function(sukses:Boolean) {
     if (sukses == true) {
      //jika berhasil di-load
      trace("xml berhasil diload.");
    
      var nodeUtama:XMLNode = xml.firstChild; //Node Konfigurasi
    
      var arrayNode:Array = xml.firstChild.childNodes; //Array
      for (var i:Number = 0; i < arrayNode.length; i++) {
       var node:XMLNode = arrayNode[i];
       var name = node.attributes.name; //Atribut name pada node gambar
       var nilai = node.firstChild.nodeValue; //isi dari node gambar
       trace(name+"="+nilai);
       //membuat movieclip baru
       var mc = _root.createEmptyMovieClip(name,i);
       //mengatur letak movieclip
       mc._x = i*100+25;
       mc._y = i*60+20;
       //mengambil gambar, dan memasukkannya ke dalam movieclip yang baru tadi
       loadMovie(nilai,mc);
      }
     } else {
      //jika xml tidak berhasil diload
      trace("xml tidak berhasil diload.");
     }
    };
    
  • Sekarang kita save file flash kita ke dalam sebuah folder (foldernya bisa di mana saja).
  • Tambahkan 3 buah gambar sesuai dengan isi dari data di dalam xml, yaitu :
    1. gedung.png
    2. pasar.png
    3. pantai.png
  • Kemudian jika sudah selesai, kembali ke flash dan lakukan Test Movie ( Ctrl + Enter ), maka hasilnya seperti berikut :
Load XML
Load XML
Penjelasan :
XML digunakan sebagai sebuah sarana untuk menyimpan data konfigurasi, jika sewaktu-waktu kita ingin mengganti gambarnya, kita tidak perlu untuk meng-kompilasi ulang file .fla menjadi .swf, sehingga cukup mengedit file xml-nya saja :)
Mudah-mudahan mengerti :)

0 comments:

Post a Comment