Bilingual Flash Application

well ini kali ini saya akan membuat tutorial untuk membuat fitur 2 bahasa dalam company profile berbasis flash. Tutorial ini saya buat berdasarkan pengalaman saya, jadi kalau ada kekurangan mohon dikoreksi. Semoga bisa bermanfaat,,let’s begin!!!!

Sebenarnya untuk membuat fitur 2 bahasa pada flash dapat menggunakan beberapa teknik, yaitu

external database oriented
keyframe oriented

Teknik external database oriented merupakan teknik pembuatan 2 bahasa dengan memanfaatkan file external sebagai library bahasa yang akan digunakan.Dalam implementasinya teknik ini akan mempercepat pengerjaan kita, karena kita hanya perlu membuat satu file library untuk satu bahasa yang nantinya dapat digunakan di bagian manapun pada company profile. Sedangkan keyframe oriented adalah teknik dimana libary bahasa akan diletakan di keyframe yang berbeda. Teknik keyframe oriented memang bisa digunakan, tetapi dalam implementasinya memerlukan pekerjaan yang lebih banyak. Ko bisa?ya karena kita harus membuat 2 konten yang berbeda untuk satu halaman. Sehingga teknik external database oriented lebih efisien dibanding teknik keyframe oriented. Oleh karena itu kali ini saya akan membahasa pembuatan fitur 2 bahasa menggunakan teknik database oriented. Berikut ini adalah tahapannya

1. Persiapan Database

Hal pertama yang harus dilakukan adalah membuat library bahasa. Ada beberapa jenis file yang dapat kita manfaatkan sebagai library, yaitu file text, xml, mysql. Kali ini saya akan menggunakan file xml sebagai library. Berikut ini contoh struktur file xml yang akan digunakan.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

<content>

 <contentPath MENU="Home">
    ini merupakan isi dari node contentPath untuk menu home
 </contentPath>

 <contentPath MENU="Profile">
    ini merupakan isi dari node contentPath untuk menu profile
 </contentPath>

...

</content>

Ini merupakan struktur yang standar, anda bisa mengembangkannya jika perlu. <content></content> merupakan node root yang akan menjadi bagian utama dari library. <contentPath MENU=””></contentPath> merupakan node yang akan di akses untuk menampilkan konten dari setiap menu. Sekarang buatlah 2 buah file xml dengan struktur seperti di atas. Pada bagian isi dari node contentPath di file pertama di isi dengan konten dalam bahasa indonesia dan save dengan nama ina.xml. Kemudian untuk file kedua di isi dengan konten dalam bahasa inggris dan save dengan nama eng.xml. Contoh :

file ina.xml :

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<content>
 <contentPath MENU="Home">
    Selamat datang di Profil Perusahan Kami. Semua informasi dapat anda
    dapatkan dengan menjelajahi aplikasi ini. Terima Kasih
 </contentPath>
 <contentPath MENU="Profile">
    Perusahaan Kami Bergerak di bidang desain grafis dan sudah berdiri
    dari tahun 2005. Kami akan memberikan solusi yang terbaik untuk
    masalah desain anda. Karena Kami adalah rekan bisnis Anda
 </contentPath>
</content>

file eng.xml :

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<content>
 <contentPath MENU="Home">
    Welcome to Our Company Profile. All information can be found
    by exploring this application. Thank You
 </contentPath>
 <contentPath MENU="Profile">
    Our Company Specialized in graphic design and has stood
    from 2005. We will provide the best solutions for your
    design problems. Because we are your business partner
 </contentPath>
</content>

Kemudian simpan kedua file tersebut di folder yang sama pada file swf yang akan di buat.

2. Pemanggilan xml menggunakan ActionScript 2.0

Tahap selanjutnya adalah memanggil file xml tersebut ke dalam file swf dengan menggunakan AS 2.0. Pada tutorial ini saya menggunakan macromedia flash profesional 8. Pertama buatlah new flash document. Kemudian tambahkan 1 layer baru. Beri nama Action pada layer atas dan Object pada layer bawah.

Kemudian buatlah 2 buah dynamic text pada layer object frame 1. Text pertama digunakan untuk menampung judul menu dan text kedua digunakan untuk menampung konten dari menu tersebut.

object

Berikan instance name = homeTitle_txt untuk text pertama, lalu instance name = homeContent_txt untuk text kedua. Khusus untuk text kedua ubah menjadi multiline dan berikan nilai line spacing = -3 pada format option ( ). Anda dapat mengatur line spacing sesuai dengan ukuran font yang anda gunakan.Lalu buat keyframe baru pada layer object, untuk menu profile buat 2 buah dynamic text lagi dan letakan pada layer object frame 2. Berikan pengaturan yang sama, hanya saja ganti instance name home dengan profile.

jika sudah masukan action script di bawah ini pada frame 1 di layer action

xmlData = new XML(); // membuat objek xml dengan nama xmlData
xmlData.ignoreWhite = true; // menghiraukan spasi
xmlData.onLoad = function(success){ // pada saat xml di load
if(success){ // jika berhasil

// memanggil atribut MENU dengan nilai home
homeTitle_txt.text = xmlData.childNodes[0].childNodes[0].attributes.MENU;

// memanggil isi pada node dengan atribut MENU = Home
home_txt.text = xmlData.childNodes[0].childNodes[0].childNodes[0].nodeValue;

// memanggil atribut MENU dengan nilai profile
profileTitle_txt.text = xmlData.childNodes[0].childNodes[1].attributes.MENU;

// memanggil isi pada node dengan atribut MENU = Profile
profile_txt.text = xmlData.childNodes[0].childNodes[1].childNodes[0].nodeValue;

} else { // jika tidak
// do nothing
}
}
onLoad = function() // pada saat aplikasi pertama diload
{
_root.bahasa = “indonesia”; // variable yg menampung bahasa
onEnterFrame = function() // ketika frame aktif
{
if(_root.bahasa == “indonesia”) // jika bahasa = indonesia
{
lang = “ina.xml”;
}
else
{
lang = “english.xml”;
}
xmlData.load(lang); // load xml tergantung bahasa yg diinginkan
}
}

Pengaksesan suatu node pada xml sama halnya dengan pengaksesan node pada tree. Tetapi pada xml pengaksesan slalu dimulai melalui root node baru berlanjut ke node yang berada di level bawahnya. Format pengaksesan pada xml adalah nama_object_xml.node Untuk lebih jelasnya perhatikan ilustrasi berikut ini :

xml tree

Jika kita ingin mengakses node 2 maka pengaksesan dilakukan dengan xmlData.childNodes[0].childNodes[0]. Setelah itu barulah kita bisa mengakses attribut atau nilai node yang ada pada node tersebut.

3. Kontrol

Berikutnya adalah membuat tombol untuk berindah dari menu home ke menu profile. Buatlah layer baru di antara kedua layer yang ada dan beri nama control. Lalu mudah saja buat dua buah tombol yang dapat melakukan link ke menu masing-masing dan letakan di layer control. Berikut ini contoh tombol yang saya buat

: tombol menu

Berikan action berikut pada button home

on(release) // ketika tombol di klik
{
gotoAndStop(1); // pergi ke frame 1 dan berhenti disini
}

Berikan action berikut pada button profile

on(release) // ketika tombol di klik
{
gotoAndStop(2); // pergi ke frame 2 dan berhenti disini
}

Langkah terakhir yang harus dilakukan adalah membuat tombol yang mengkontrol perubahan bahasa. Kemudian buat 2 buah button dan letakan pada layer control. Button pertama digunakan untuk merubah konten ke dalam bahasa Indonesia sedangkan button kedua sebaliknya.

Toggle Button

Selanjutnya berikan action berikut pada button indonesia

on(release) // ketika tombol di klik
{
_root.bahasa = “indonesia”; // nilai variable bahasa yang ada di root akan menjadi indonesia
}

dan berikian action berikut pada button English

on(release) // ketika tombol di klik
{
_root.bahasa = “english”; // nilai variable bahasa yang ada di root akan menjadi english
}

Cara kerja tombol tersebut adalah merubah nilai variable bahasa yang ada pada root dengan nilai sesuai dengan bahasa yang diinginkan. Karena pada action yang ada di layer action terdapat perintah jika variable _root.bahasa = indonesia maka file xml yang akan dipanggil adalah ina.xml yang berarti bahasa akan berubah ke bahasa Indonesia.

Jika anda sudah menyelesaikan tahap ini maka fitur 2 bahasa sudah dapat anda gunakan. Selamat mencoba 🙂

Jika anda ingin melihat contoh yang sudah di buat silakan download disini