[AS3] XML Loader ActionScript 3

     XML Loader adalah suatu fungsi pada action script yang digunakan untuk me-load suatu file XML. Pada tutorial kali ini kita akan menggunakan fungsi tersebut untuk meload materi yang sebelumnya telah dibuat dalam sebuah file XML. Berikut adalah hasil .swf pemanfaatan fungsi XML Loader yang akan kita buat.

Berikut adalah langkah-langkah pembuatan file .swf di atas.

1) Buat file XML. Beri nama file ini dengan “materiRS” dan simpan pada folder yang sama dengan file .swf.

Isi dari file XML yang saya buat ini saya rujuk dari wikipedia. Berikut adalah isi file XML “materiRS”:

<?xml version="1.0" ?>

<pemrograman>

      <bahasa urutan="1">

            <judul text="C++"/>

            <deskripsi text="C++ adalah bahasa pemrograman komputer yang di buat oleh Bjarne Stroustrup, yang merupakan perkembangan dari bahasa C dikembangkan di Bong Labs (Dennis Ritchie) pada awal tahun 1970-an. Bjarne Stroustrup pada Bel labs pertama kali mengembangkan C++ pada awal 1980-an. Pada C++ ditambahkan konsep-konsep baru seperti class dengan sifat-sifatnya seperti inheritance dan overloading. Salah satu perbedaan yang paling mendasar dengan bahasa C adalah dukungan terhadap konsep pemrograman berorientasi objek (Object Oriented Programming)"/>

      </bahasa>

      <bahasa urutan="2">

            <judul text="JavaScript"/>

            <deskripsi text="JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT."/>

      </bahasa>

      <bahasa urutan="3">

            <judul text="PHP"/>

            <deskripsi text="PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memprogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS"/>

      </bahasa>

      <bahasa urutan="4">

            <judul text="ActionScript"/>

            <deskripsi text="ActionScript adalah bahasa pemrograman yang dibuat berdasarkan ECMAScript, yang digunakan dalam pengembangan situs web dan perangkat lunak menggunakan platform Adobe Flash Player. ActionScript juga dipakai pada beberapa aplikasi basis data, seperti Alpha Five. Bahasa ini awalnya dikembangkan oleh Macromedia, tetapi kini sudah dimiliki dan dilanjutkan perkembangannya oleh Adobe, yang membeli Macromedia pada tahun 2005. Action Script terbaru saat ini adalah Action Script 3.0."/>

      </bahasa>

      <bahasa urutan="5">

            <judul text="Java"/>

            <deskripsi text="Java adalah bahasa pemrograman yang dapat dijalankan di berbagai komputer termasuk telepon genggam. Bahasa ini awalnya dibuat oleh James Gosling saat masih bergabung di Sun Microsystems saat ini merupakan bagian dari Oracle dan dirilis tahun 1995. Java merupakan bahasa pemrograman yang bersifat umum/non-spesifik (general purpose), dan secara khusus didisain untuk memanfaatkan dependensi implementasi seminimal mungkin.  Java dikenal pula dengan slogannya, Tulis sekali, jalankan di mana pun. Saat ini java merupakan bahasa pemrograman yang paling populer digunakan, dan secara luas dimanfaatkan dalam pengembangan berbagai jenis perangkat lunak aplikasi ataupun aplikasi."/>

      </bahasa>

</pemrograman>

2) Buat ScrollPane. Langkah kedua adalah membuat ScrollPane dan beri nama “scrollpane_materi” seperti terlihat pada gambar di bawah ini.

*Ukuran workspace di bawah ini adalah 500 x 350 px

Tampilan ScrollPane

Cara membuat ScrollPane:

Window > Components > Pilih Scrollpane, Drag ke workspace

Atau

Tekan Ctrl + F7 > Pilih ScrollPane, Drag ke workspace

Selanjutnya, atur ukuran ScrollPane. W: 420,00 H: 250,00.   

3) Code ActionScript 3. Sebelum masuk ke code ActionScript 3, berikut ini saya tampilkan urutan layer untuk membuat .swf di atas.

Tampilan Layer-layer yang Digunakan

Berikut adalah code Action Script 3-nya:

/*

[RS]

*/

import flash.display.MovieClip;

import flash.net.URLRequest;

import flash.net.URLLoader;

import flash.text.TextField;

import flash.text.TextFormat;

//membuat movieclip

if(getChildByName ("tempat_materi_mc") == null)

{

      var materi_mc:MovieClip = new MovieClip;

      materi_mc.name = "tempat_materi_mc";

      addChild(materi_mc);

}

var total_judul:int = 0;

var materiXML:XMLList;

var path:String = "materiRS.xml";

var xml_URL:URLRequest = new URLRequest(path);

var loaderku:URLLoader = new URLLoader(xml_URL);

loaderku.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void{

      //event.target.data =  hasil keluaran dari generate xml,

      //                     semua data yang ada pada xml

      var xmlData:XML = new XML(event.target.data);

      materiXML = xmlData.bahasa;

      var judul_text_format:TextFormat = new TextFormat('Arial',17);

      var boldText:TextFormat = new TextFormat();

      boldText.bold = true;

     

      var deskripsi_text_format:TextFormat = new TextFormat('Arial',15);

      var text_align:TextFormat = new TextFormat();

      text_align.align = TextFormatAlign.JUSTIFY;

     

      ////JARAK////

      var jarak_judul_x:int = 5; //jarak judul dengan batas kiri

      var jarak_judul_y:int = 5; //jarak judul dengan batas atas

      //jarak deskripsi dengan batas kiri dan atas

      var jarak_deskripsi_x:int = 5;

      var jarak_deskripsi_y:int = 25;

     

      //////////////////////

      ////////JUDUL/////////

      //////////////////////

     

      //mengambil jumlah bahasa yang ada pada XML

      total_judul = xmlData.bahasa.length();

     

      for (var i:int = 0; i<total_judul;i++){

            var judul_text:TextField = new TextField();

            judul_text.defaultTextFormat = judul_text_format;

            judul_text.defaultTextFormat = boldText;

           

            judul_text.x = jarak_judul_x;

            judul_text.y = jarak_judul_y; 

            judul_text.width = 360;

            judul_text.autoSize = TextFieldAutoSize.LEFT;

            judul_text.multiline = true;

            judul_text.wordWrap = true;

            judul_text.textColor = 0xCC6600;

           

            //menambahkan judul_text ke movieclip yang telah dibuat (materi_mc)

            materi_mc.addChild(judul_text);

           

            judul_text.text = i+1 +'. '+materiXML[i].judul.@text+'\n';

     

            //////////////////////

            //////DESKRIPSI///////

            //////////////////////       

            for each(var deskripsiXML:XML in materiXML[i].deskripsi)

            {

                  var deskripsi_text:TextField = new TextField();

                  deskripsi_text.defaultTextFormat = deskripsi_text_format;

                  deskripsi_text.defaultTextFormat = text_align;

                 

                  deskripsi_text.x = jarak_deskripsi_x;

                  deskripsi_text.y = jarak_deskripsi_y; 

                  deskripsi_text.width = 360;

                  deskripsi_text.autoSize = TextFieldAutoSize.LEFT;

                  deskripsi_text.multiline = true;

                  deskripsi_text.wordWrap = true;

                  deskripsi_text.textColor = 0x2F2F2F;

                 

                  //menambahkan deskripsi_text ke movieclip yang telah dibuat (materi_mc)

                  materi_mc.addChild(deskripsi_text);

                 

                  deskripsi_text.text = deskripsiXML.@text+'\n';

            }

           

            //////////////////////

            /////JARAK SETIAP/////

            ////////MATERI////////

            //////////////////////

            jarak_judul_y += judul_text.textHeight + deskripsi_text.textHeight + 30;

            jarak_deskripsi_y = jarak_judul_y + 25;

      }

     

      scrollpane_materi.source = materi_mc;

     

      //background transparan

      var mc:MovieClip = new MovieClip();

      scrollpane_materi.setStyle("upSkin", mc);

      scrollpane_materi.setStyle("contentPadding", 10);

}

stop();

Penjelasan

     Pada program di atas kita memanfaatkan MovieClip dan TextField. TextField di isi dengan text yang ada pada file XML baik judul maupun deskripsi, selanjutnya TextField yang telah diolah tersebut dimasukkan ke dalam MovieClip. Kemudian MovieClip tersebut digunakan sebagai source oleh ScrollPane. Kurang lebih seperti itu prosesnya, semoga penjelasan saya yang sederhana tersebut dapat dipahami.  

    

     Penjelasan beberapa code di atas sudah tertera pada komentar program, sehingga di sini saya tidak akan menjelaskan semua code di atas. Pada bagian ini saya akan mencoba menjelaskan tentang dua baris code, mengingat dua baris code ini penting untuk penempatan masing-masing materi (*agar tidak saling tumpuk).

jarak_judul_y += judul_text.textHeight + deskripsi_text.textHeight + 30;

jarak_deskripsi_y = jarak_judul_y + 25;

Perhatikan gambar berikut ini!

 

Penjelasan Potongan Code untuk Penempatan Materi

     Jadi, posisi/ letak judul ke-2 ditempatkan pada N px dari batas atas, dimana N merupakan jumlah tinggi text judul + tinggi text deskripsi + space (30). Sehingga text judul ke-2 berada pada posisi seperti yang terlihat pada gambar di atas.

     Dan posisi/ letak deskripsi ke-2, ditempatkan N px dari batas atas + 25. Kenapa harus ditambah 25? Hal ini maksudnya deskripsi ke-2 ditempatkan 25 px setelah judul ke-2 seperti terlihat pada gambar di atas.

Sekian penjelasan saya tentang XML Loader ActionScript 3. Semoga bermanfaat. :)

Baca juga : 
[AS3] Drag dan Drop Object ActionScript 3
[AS3] TransitionManager dan Time Delay ActionScript 3

[AS3] XML Loader ActionScript 3

[AS3] Disable Fullscreen Video pada ActionScript 3 

[RS]

Klik Like & Share jika postingan ini bermanfaat

Tweet

Apa tanggapan Anda?

Berikan tanggapan Anda melalui kolom komentar yang telah disediakan.
- Gunakan bahasa yang sopan;
- Saat menjadikan postingan pada blog ini sebagai referensi, jangan lupa mencantumkan sumbernya (link dari blog ini).

Jika blog ini bermanfaat jangan lupa memberikan 'like' atau 'share' untuk mendapatkan update terbaru.

Terima kasih