Dalam tutorial ini saya akan mencoba menjelaskan bagaimana operator aritmatika diterapkan dalam flash actionscript 3.0, sebagai bagian penting dalam komponen script aplikasi yang akan kita bangun. Aritmatika adalah logika penghitungan matematika menggunakan operasi tambah (+), kurang (-), kali(*), dan bagi (/). Untuk mengubah atau menentukan nilai dari variabel yang telah kita buat (deklarasikan), maka salah satu caranya adalah dengan menggunakan operator aritmatika. Penjelasan lebih lanjut operator aritmatika pada flash baca di sini.
var a = 1;
var b = 2;
var c = a+b //output c = 3;
Untuk memudahkan pemahaman dalam tutorial ini saya menyertakan dengan contoh aplikasi hasil dari script yang telah kita buat pada akhir tutorial ini. Dalam pembahasan kali ini saya menggunakan software Adobe Flash Professional CS 6. Kamu juga tetap bisa menggunan Flash Professional versi lainnya, don't worry sob :).
Oke kita langsung masuk ke pembahasan. Langkah awal yang harus kita lakukan adalah membuka aplikasi Adobe Flash Professional, kemudian pada welcome screen klik dokumen flash (Create New) actionscript 3.0 pada Adobe Flash Professional kita. Lihat gambar di bawah ini.
Gambar 0.1
Atau apabila tidak melihat welcome screen pada Adobe Flash Professional, kita bisa menekan Ctrl+N untuk membuka jendela dokumen baru. Setelah dokumen terbuka simpan dokumen dengan nama aritmatika.fla pada direktori favorite kita. Tekan Ctrl+S atau pada menu file klik Save.
Selanjutnya, kita masuk pada tahap penerapan. Pada penerapan ini kita bagi menjadi dua bagian yakni desain stage dan coding Lets do it.
A. Desain Stage
Kita mulai mendesain stage dengan memanfaatkan tools yang disediakan oleh adobe flash proffesional. Hasil desain stage kita seperti pada gambar 0.2 di bawah ini.
Gambar 0.2
Jangan khawatir kita akan membahas bagaimana mendesain stage tersebut. Perhatikan pada gambar 0.3 berikut.
Gambar 0.3
- Backround stage. Atur warnanya pada panel properties dengan memilih warna favorite kita.
- Judul halaman aplikasi. Klik pada Text Tool yang terdapat pada bar tools. Atau tekan tombol T pada keyboard komputer. Kemudian tempatkan di atas halaman stage dengan mengklik pada bagian stage dan ketik teks sesuai judul halaman aplikasi. Pastikan jenis teks pada properties diatur sebagai Static Text.
- Cara yang sama pada bagian 2, namun jenis teks adalah Dynamic Text. Dan kolom teks tidak perlu di isi dengan karakter apapun. Kita dapat mengatur ukuran kolom teks ini dengan menggeser dot (titik) pada tiap sisi maupun sudut garis kolom
- Objek input/textfield. Cara ini sama dengan bagian 12. Perbedaan hanya pada Instance Name objek. Klik pada panel Components, klik User Interface dan pilih objek TextInput dengan double klik pada mouse. Kemudian klik objek TextInput yang muncul di stage, tempatkan objek sesuai keinginan dengan men-drag objek pada stage. Pastikan kita masih aktif pada objek ini dengan mengklik sekali dan pada panel Properties masukkan nama instance pada field isian <Instance Name>. Instance Name = input2.
- Klik pada panel Components, klik User Interface dan pilih objek TextInput dengan double klik pada mouse. Kemudian klik objek TexInput yang muncul di stage, tempatkan objek sesuai keinginan dengan men-drag objek pada stage. Pastikan kita masih aktif pada objek ini dengan mengklik sekali dan pada panel Properties masukkan nama instance pada field isian <Instance Name>. Instance Name = input1.
- Untuk bagian ini caranya sama dengan bagian 7, 8, 9, dan 10. Hanya bedanya pada value (nama) label dan Instance Name. Sebenarnya kita dapat membuat dan mendesain objek dengan menggunakan tool-tool pada tools bar. Salah satunya untuk membuat objek tombol yang akan kita buat. Namun untuk mempermudah kita memanfaatkan objek UI yang disediakan adobe flash professional. Klik pada panel Components, klik User Interface dan pilih objek Button dengan double klik pada mouse. Kemudian klik objek Button yang muncul di stage dan ubah value label (nama label pada tombol) pada Properties sesuai kebutuhan. Masih pada panel Properties masukkan nama instance pada field isian <Instance Name>. Instance Name = clear.
- Masukkan nama label sesuai kebutuhan dan beri nama instance pada Instance Name. Instance Name = kurang.
- Masukkan nama label sesuai kebutuhan dan beri nama instance pada Instance Name. Instance Name = bagi.
- Masukkan nama label sesuai kebutuhan dan beri nama instance pada Instance Name. Instance Name = kali.
- Masukkan nama label sesuai kebutuhan dan beri nama instance pada Instance Name. Instance Name = tambah.
- Objek Dynamic teks. Untuk membuatnya, pilih Text Tool pada tools bar atau cukup tekan tombol T pada keyboard. Tempatkan objek sesuai keinginan (lihat gambar di atas) dengan mengklik pada tempat yang diinginkan dan ubah ukuran dengan men drag pada dot tiap sisi maupun sudut TextField. Pastikan kita masih memilih objek ini dengan mengklik sekali pada objek. Tentukan jenis objek teks ini adalah Dynamic Text pada Properties, kemudian berikan nama instansi objek dengan mengisi isian Instance Name pada panel Properties. Instance Name =
- Perhatikan huruf X pada Gambar 0.3. Pastikan menu “Show border around text” pada panel Properties tidak aktif.
- Cara yang sama dengan bagian 2. Letakkan teks seperti pada Gambar 0.3. Kita dapat mengatur warna teks pada panel properties. Dan jangan lupa untuk meng-embed text dengan mengklik tombol Embed... pada menu Style dalam panel Properties. Pilih All pada Character ranges. Klik Ok.
Langkah 1 sampai dengan 13 adalah proses design Stage aplikasi kita. Sebenarnya proses pembuatannya tidak harus berurutan seperti pada contoh yang saya buat. Kita bebas mendahulukan bagian mana yang paling mudah.
B. Coding (ActionScript 3.0)
Sebelum mengkoding pastikan kita memasukkan Instance Name pada setiap objek seperti apa yang telah saya contohkan di atas. Sebenarnya kita bebas merubahnya sesuai keinginan, namun akan berpengaruh pada koding nantinya. Dan karakter bersifat case-sensitive.
Pada panel Timeline tambahkan layer baru dengan mengklik tombol New Layer. Ganti nama layer dengan nama action seperti pada Gambar 0.4. Dan kemudian pada frame 1 di layer action klik kanan mouse dan pilih menu Actions.
Gambar 0.4
Pada jendela yang muncul ketikkan atau copy script berikut.
import flash.events.Event;
var inputA:Number = new Number ;
var inputB:Number = new Number ;
var hasilC:Number = new Number ;
input1.text = inputA.toString();
input2.text = inputB.toString();
hasil.text = hasilC.toString();
tambah.addEventListener(MouseEvent.CLICK, tombolTbh);//mendefinisikan event fungsi klik pada Instance tambah
kurang.addEventListener(MouseEvent.CLICK, tombolKrg);//mendefinisikan event fungsi klik pada Instance kurang
kali.addEventListener(MouseEvent.CLICK, tombolKli);//mendefinisikan event fungsi klik pada Instance kali
bagi.addEventListener(MouseEvent.CLICK, tombolBgi);//mendefinisikan event fungsi klik pada Instance bagi
clear.addEventListener(MouseEvent.CLICK, tombolClr);//mendefinisikan event fungsi klik pada Instance clear
//mendefinisikan aksi pada fungsi tombolTbh
function tombolTbh(event:MouseEvent):void
{
inputA = Number(input1.text);
inputB = Number(input2.text);
hasilC = Number(hasil.text);
hasil.text = (inputA + inputB).toString();//operator aritmatika tambah (+)
symOperator.text = "+";
}
//mendefinisikan aksi pada fungsi tombolKrg
function tombolKrg(event:MouseEvent):void
{
inputA = Number(input1.text);
inputB = Number(input2.text);
hasilC = Number(hasil.text);
hasil.text=String(inputA-inputB);//operator aritmatika kurang (-)
symOperator.text = " -";
}
//mendefinisikan aksi pada fungsi tombolKli
function tombolKli(event:MouseEvent):void
{
inputA = Number(input1.text);
inputB = Number(input2.text);
hasilC = Number(hasil.text);
hasil.text = (inputA * inputB).toString(); //operator aritmatika kali (*)
symOperator.text = " x";
}
//mendefinisikan aksi pada fungsi tombolTBgi
function tombolBgi(event:MouseEvent):void
{
inputA = Number(input1.text);
inputB = Number(input2.text);
hasilC = Number(hasil.text);
hasil.text = (inputA / inputB).toString();//operator aritmatika bagi (/)
symOperator.text = " :";
}
//mendefinisikan aksi pada fungsi tombolClr
function tombolClr(event:MouseEvent):void
{
hasil.text = "";
input1.text = "";
input2.
Tekan CTR + ENTER pada keyboard untuk menguji aplikasi. Sampai di sini seharusnya kita sudah bisa menjalankan aplikasi yang kita buat seperti berikut ini.
Silahkan lakukan eksperimen pada contoh yang baru saja kita buat. Selamat Mencoba. Be Creative :)
Silahkan lakukan eksperimen pada contoh yang baru saja kita buat. Selamat Mencoba. Be Creative :)
Kamu dapat mendownload source code untuk penerapan aplikasi yang telah kita buat di atas. Klik di sini.
keren keren gan lanjutkan
ReplyDeletemantab...
ReplyDelete