Belajar Flash Membuat Kalkulator Sederhana - Nurdiana.web.Id

BELAJAR FLASH : MEMBUAT KALKULATOR SEDERHANA

VERSI 1.0

2010

http://www.nurdiana.web.id | Belajar Flash : Membuat Kalkulator Sederhana 2

Ebook ini dipublikasikan oleh :

HTTP://WWW.NURDIANA.WEB.ID

Untuk mengecek revisi ataupun update dari ebook ini, silahkan kunjungi

http://www.nurdiana.web.id/belajar-flash-membuat-kalkulator-sederhana

Hak Cipta Milik Allah SWT.

http://www.nurdiana.web.id/



PENDAHULUAN

1. Ebook ini lebih cocok untuk siapa?

Ebook ini bisa digunakan siapapun juga.

2. Bagaimana cara terbaik menggunakan ebook ini?

a. Learning by doing. Belajarlah sambil praktek.

b. Ebook ini sudah saya usahakan agar berurut agar mempermudah pembuatan. Ebook ini

memiliki 4 bab :

i. BAB I : Persiapan Program. Bab ini menjelaskan persiapan program sebelum

melakukan desain maupun coding.

ii. BAB II : Membuat desain Background . Bab ini digunakan untuk mendesain

background dari kalkulator yang akan kita buat. Pada bab ini kita akan membuat

beberapa symbol berbentuk graphic, yang merupakan gambar statis atau tidak

dapat dibuat sebagai animasi (gambar bergerak).

iii. BAB III : Pembuatan Tombol dan Layar. Pada bab ini, kita akan belajar membuat

symbol berbentuk tombol. Tombol disini adalah tombol dinamis, dimana bentuk

tombol ketika mouse berada di luar tombol, ketika di atas tombol, maupun ketika

diklik akan berbeda bentuk. Setelah itu, kita akan membuat layar menggunakan

Text Tool yang nantinya akan membuat sebuah “dynamic text”, yaitu teks yang

berubah-ubah, tergantung input dari user melalui tombol.

iv. Bab IV : Pembuatan Action Script. Bab ini adalah bab pamungkas, dimana desain

yang sudah kita buat tadi yang hanya berupa gambar, akan kita ubah menjadi

aplikasi kalkulator sederhana.

c. Saya menyertakan file penunjang berupa file .fla. Namun, usahakan jangan dulu

menggunakan file source tersebut. Gunakanlah jika memang sudah kepepet.

3. Aduh! File penunjang ebook kok gak ada?

Jika memang file .fla tidak anda dapatkan, bisa berkunjung ke blog saya


4. Ya, ampun………….! Sudah baca berkali-kali, praktek berkali-kali, otak mengepul karena panas kok

belum berhasil juga???

Silahkan bertanya dengan memberikan komentar di blog saya.


LET’S GO!



BAB I

PERSIAPAN PROGRAM

Bab ini akan menjelaskan tentang persiapan sebelum kita mendesain. Hal ini untuk

mempermudah pembuatan aplikasi pada bab-bab selanjutnya.

Langkah-langkah.

1. Jalankan program Adobe Flash

2. Pilih Flash File (Action Script 2.0)

3. Buatlah layer baru, sehingga berjumlah 4 layer.

4. Untuk memudahkan pengeditan, sebaiknya nama layer diganti menjadi seperti di bawah ini :


5. Aturlah ukuran dokumen menjadi ukuran 240 X 320 px dengan cara mengklik size di document

properties.

6. Persiapan selesai.


BAB II

MEMBUAT DESAIN BACKGROUND

Pada bab ini, kita akan mendesain gambar background dari kalkulator yang akan kita buat.

Gambar background yang akan kita buat ini adalah berbentuk statis, yang berarti tidak akan berubah

maupun bergerak ketika aplikasi dijalankan.

Langkah-langkah pembuatan.

1. Pastikan layer yang aktif adalah layer Background.

2. Buatlah sebuah lingkaran kira-kira seperti di bawah ini.

3. Sorotlah lingkaran tersebut, baik fill maupun strokenya. Klik kanan, dan pilih convert to symbol.

Beri nama background_tombol dan pilih Graphic. Klik OK.


Setelah itu, maka lingkaran tersebut telah menjadi symbol graphic.

4. Buat juga sebuah persegi 4 Kira-kira bentuknya seperti di bawah ini. Ubahlah menjadi symbol

grafik seperti langkah nomor 2. Beri nama background_layar.

5. Untuk memperindah, boleh menambahkan obyek persegi panjang di belakang symbol, dan

mengubah warna latar.

6. Untuk background mungkin dicukupkan dahulu. Anda bisa mendesain menurut selera anda.


BAB III

PEMBUATAN TOMBOL DAN LAYAR

Pada bab ini, kita akan mempelajari cara-cara pembuatan tombol dan layar. Berbeda dengan

desain pada bab II yang bersifat statis, kali ini kita akan membuat symbol berbentuk dinamis, yang

berarti akan berubah-ubah sesuai keinginan user ketika menjalankan aplikasi.

Langkah-langkah.

1. Untuk mempermudah pembuatan tombol, kuncilah layer Background agar tidak ikut tersorot.

Setelah itu, aktifkanlah layer Tombol.

2. Klik insert, new symbol

3. Kini stage akan berubah, yang khusus untuk pembuatan symbol button.

Perhatikan! Timeline akan berubah menjadi Up, Over, down, hit.


a. Up : bentuk tombol ketika mouse berada di luar tombol.

b. Over : bentuk tombol ketika mouse berada di atas tombol.

c. Down : bentuk tombol ketika mouse menekan tombol.

d. Hit : untuk menentukan luas area dari tombol.

4. Kini kita akan membuat sebuah tombol. Klik Oval Tool, atau tekan huruf O pada keyboard. Buatlah

sebuah lingkaran kecil tepat di tengah stage, yang bentuknya kira-kira seperti di bawah ini :

5. Pilihlah warna yang berbeda untuk up, down dan over agar tombol terlihat menarik. Caranya, klik

kanan di timeline, tepatnya di bawah Over, kemudian klik insert keyframe.

Maka, gambar akan tersalin ke over. Kini anda dapat merubah warna tombol. Pastikan Stage dalam

timeline Over.


6. Ubah juga warna di timeline Down seperti langkah di atas agar tombol lebih menarik.

7. Jika sudah selesai, klik scene untuk kembali.

Kini anda akan melihat symbol bertipe button yang bernama tombol di library. (Untuk menampilkan

Library, tekan Ctrl+L).

Nah, drag simbol tersebut ketengah stage dan atur sizenya, kemudian diperbanyak. Tampilannya

kira-kira seperti dibawah ini :


8. Dengan menggunakan text tool (Tekan tombol T di keyboard), buatlah beberapa angka, yang diatur

sedemikian rupa seperti dibawah ini :

Berilah nama pada masing-masing symbol-symbol tombol tersebut (bukan text) pada instance

name berurut : nol, satu, dua, tiga, empat, lima, enam, tujuh, delapan, sembilan, koma. (Masing-

masing symbol harus memiliki instance name yang berbeda).

9. Sekarang, kita akan membuat tombol baru. Buatlah 4 buah tombol seperti d bawah ini seperti cara

diatas! Berilah instance name pada masing-masing tombol : tambah, kurang, bagi, kali.


10. Sekarang yang terakhir kita akan membuat tombol untuk Hasil dan Reset. Masing-masing tombol

ubah menjadi symbol button, dengan nama hasil dan reset. Begitu pula dengan instance name,

ubah menjadi hasil dan reset.

11. Pembuatan tombol selesai. Sekarang kita akan membuat layar penampil. Sebelumnya, aktifkan

terlebih dahulu layer layar.

12. Gunakan text tool. Buat sebuah persegi panjang tepat diatas background_layar yang telah kita buat

tadi. Buat pengaturan di properties seperti di bawah ini

13. Pembuatan tombol dan layar sudah selesai. Namun ini bukan suatu keharusan, anda boleh saja

mendesain lagi sesuai dengan selera anda .


BAB IV

PEMBUATAN ACTION SCRIPT

Kali ini, kita akan ke bagian pemrograman Action Script agar desain yang sudah kita buat dapat

bekerja sebagai kalkulator sederhana. Siapkan mental dan fisik anda, sediakan kopi hangat dan camilan

di sisi anda karena bagian ini mungkin akan cukup memusingkan .

Sebelumnya, tampilkan dahulu panel action dengan menekan tombol F9. Jika sudah muncul,

mari kita melakukan pemrograman…

Apa yang Kita Butuhkan?

Sebelumnya, kita harus mengenal dulu apa saja yang dibutuhkan oleh action script kita kali ini.

1. Variabel, yaitu data yang nilainya dinamis (berubah-ubah). Perlu diketahui bahwa variable di dalam

action script 2 tidak membutuhkan deklarasi sebelum digunakan dan bersifat case sensitive, maka

penulisan huruf kecil dan besar harus diperhatikan. Contohnya, “nilai” tidak sama dengan ”NILAI”.

Oke, disini kita akan menggunakan beberapa variable sebagai berikut :

a. layar_var , ini adalah variable yang telah kita buat tadi, yang digunakan di dalam layar (lihat

kembali pembuatan layar di bab 3) yang telah kita buat di properties -> var.

b. n , adalah variable yang nanti akan kita buat. n digunakan untuk menentukan, apakah digit yang

nanti kita masukkan adalah sebelum atau sesudah tombol aritmetika (+ - / x ) ditekan? Jika tidak

maka n bernilai 0 dan kita bisa memasukkan digit angka lebih dari satu buah, namun jika ya

maka n akan berubah nilainya menjadi satu, dan kita akan memasukkan digit angka berikutnya

(angka sebelum tombol aritmetika ditekan tidak akan bertambah kembali).

c. koma , koma adalah variable yang kita gunakan untuk menghindari pemasukkan digit koma (.)

yang aneh, seperti 3….5 atau .7 (ingat bahwa koma di dalam kalkulator adalah berupa titik).

Logikanya sederhana, variable koma diberi nilai awal 0, yang memperbolehkan menginputkan

koma (.) ke layar. Namun, jika kita sudah menginputkan koma ke layar , maka variable koma

ini akan berubah nilai menjadi 1 dan kita tidak boleh menginputkan kembali.

d. kondisi , kondisi adalah variable yang akan kita gunakan untuk mendefinisikan tombol

aritmetika mana yang sudah ditekan ditekan (berhubungan dengan poin b). Variabel kondisi ini

berupa string. Contoh, jika kita menekan tombol + , maka nilai dari variable kondisi adalah

“tambah” (kondisi=”tambah”), namun jika kita menekan tombol - , maka kondisi=”kurang”.

e. temp. Variable temp kita gunakan untuk memindahkan nilai dari layar_var agar kita bisa

menginputkan data kembali. Contoh, kita sudah menginputkan nilai 654 ke dalam variable

layar_var menggunakan tombol angka. Nah, jika kita menekan tombol aritmetika, maka nilai di

dalam layar_var kita salin ke variable temp, dan layar_var dapat kita masukkan nilai baru.

f. hasil . Variabel hasil kita gunakan untuk menghitung jumlah. Logikanya, hasil ini adalah :

hasil = temp (kondisi) layar_var

Misal, kita sudah memasukkan digit 34, menekan tombol + dan memasukkan digit 65 , maka :

hasil = 34 + 65

dan nilai hasil menjadi 99.


LOGIKA.

Yang pertama kali harus kita fahami dalam pembuatan action script ini adalah logika. Seperti

apa dan bagaimana cara kerjanya kalkulator sederhana kita nanti harus kita fahami agar aplikasi yang

nanti dibuat tidak mengalami eror atau paling tidak meminimalisir eror yang terjadi.

Tombol angka ditekan

Tombol aritmetika ditekan

Layar_var=””;

n=0;

koma=0;

temp=0;

Ingin memasukkan angka lagi? Ya

Tidak

N=1;

temp=layar_var;

Tombol angka ditekan

Ingin memasukkan angka lagi? Ya

Tidak

Tombol hasil ditekan

hasil=temp(kondisi)layar_var;

Layar_var=hasil;

Ingin menghitung lagi? Ya

Tombol Reset ditekan

Tidak

Disini, variable

layar_var akan

diisi oleh karakter

angka yang kita

input melalui

tombol angka.

Variable kondisi

akan diisi nilai

n=1, maka angka

yang tadi sudah kita

masukkan ke

layar_var akan

dimasukkan ke temp,

dan layar_var siap

menerima input

angka kembali

layar_var=””;

layar_var akan diisi

oleh digit baru.

Layar akan

menampilkan hasil

hitungan kita


Fahamilah algoritma di atas sebelum meneruskan! Jika sudah faham, kita buka file flash tadi dan masuk

ke layer action.

1. Menentukan default nilai variable saat pertama kali masuk program. Ini penting agar program pada

saat pertama kali dijalankan tidak berisi nilai apa-apa.

Panel action akan menjadi action frame. Isikan script dibawah ini :

Seperti di bawah ini

2. Menulis action script ke dalam tombol angka. Caranya, klik tombol angka satu persatu, maka panel

action akan menjadi action-button. Oke, kita mulai dari tombol 1 :

a. on(release){ adalah fungsi dimana action script akan dieksekusi manakala tombol ditekan.

if(n==0) adalah tombol ditekan sebelum tombol aritmetika dimasukkan. Maka, layar_var akan

dimasukkan string 1. Mengapa string? Karena jika menggunakan tipe data integer, maka jika

kita menekan tombol 1 dua kali, layar tidak akan menampilkan 11, melainkan menjadi 2.

Kemudian, if(layar_var=="0"){layar_var=""; } adalah perintah mengosongkan layar terlebih

dahulu sebelum angka dimasukkan (agar tidak terjadi : 0111).

Selanjutnya, else if(n==1) adalah tombol ditekan setelah tombol aritmetika ditekan. Jika

tombol aritmetika ditekan, maka n==1, dan tombol akan mengubah layar_var menjadi

kosong: layar_var=””; dan variable koma dan n akan menjadi 0 kembali. Variabel n menjadi 0

agar kita bisa menginputkan nilai kembali ke layar lebih dari 1 digit angka. Sedangkan variable

koma akan kita pelajari di poin selanjutnya. (Jika belum faham, silahkan pelajari kembali

algoritma diatas!)

layar_var="0";

n=0;

koma=0;

temp=0;


Buat juga untuk tombol 2-9 seperti diatas! (Perhatikan bahwa perbedaan terletak di

layar_var+= )

on (release) {

if(n==0)

{

if(layar_var=="0"){layar_var=""; }

layar_var+=1;

}

else if(n==1)

{

layar_var="";

koma=0;

n=0;

layar_var+=1;

}

}

on (release) {

if(n==0)

{


layar_var+=2;

}

else if(n==1)

{

layar_var="";

koma=0;

n=0;

layar_var+=2;

}

}

on (release) {

if(n==0)

{


layar_var+=3;

}

else if(n==1)

{

layar_var="";

koma=0;

n=0;

layar_var+=3;

}

}

on (release) {

if(n==0)

{


layar_var+=4;

}

else if(n==1)

{

layar_var="";

koma=0;

n=0;

layar_var+=4;

}

}

on (release) {

if(n==0)

{


layar_var+5;

}

else if(n==1)

{

layar_var="";

koma=0;

n=0;

layar_var+=5;

}

}


Khusus untuk tombol 0 dan koma (.) memiliki script yang berbeda dengan yang diatas.

Mengapa? Karena kita tidak ingin jika user dapat menginputkan 000330 atau 3….4.6 kan?

Untuk tombol 0, logikanya seperti ini, jika layar masih baru dan belum diinput nilai :

if(layar_var==”0”) , maka kita tidak dapat menginputkan 0 meski menekan tombol 0 berkali-

kali : layar_var==”0”; , namun jika layar sudah terisi nilai : else , maka kita dapat menekan

tombol 0.

on (release) {

if(n==0)

{


layar_var+=6;

}

else if(n==1)

{

layar_var="";

koma=0;

n=0;

layar_var+=6;

}

}

on (release) {

if(n==0)

{


layar_var+=7;

}

else if(n==1)

{

layar_var="";

koma=0;

n=0;

layar_var+=7;

}

}

on (release) {

if(n==0)

{


layar_var+=8;

}

else if(n==1)

{

layar_var="";

koma=0;

n=0;

layar_var+=8;

}

}

on (release) {

if(n==0)

{


layar_var+=9;

}

else if(n==1)

{

layar_var="";

koma=0;

n=0;

layar_var+=9;

}

}


Sekarang untuk tombol koma (.), logikanya sederhana, Jika kita sudah menekan tombol koma

sebelumnya, maka kita tidak dapat menekan tombol koma untuk kedua kalinya (4..5). Untuk

itu, jika kita sudah memasukkan koma ke layar, maka variable koma akan menjadi satu

(koma=1;), sehingga kita tidak dapat memasukkan koma kembali (Perhatikan baris : Else

if(koma==1) ) Untuk n!=2; akan kita bahas dalam pembuatan script hasil.

on (release) {

if(layar_var=="0")

{

layar_var="0";

}

else

{

if(n==0)

{

layar_var+=0;

}

else if(n==1)

{

layar_var="";

n=0;

koma=0;

layar_var+=0;

}

}

}

on (release)

{

if(koma==0&&n!=2)

{

layar_var+=".";

koma=1;

}

else if(koma==1)

{

layar_var+="";

}

}


b. Menulis action script untuk tombol aritmetika (+ - / x)

Tombol aritmetika ini akan memasukkan nilai berupa string ke variable kondisi.

Dibawah ini adalah script yang harus dimasukkan kedalam tombol tambah.

Perintah temp=layar_var; berfungsi untuk memindahkan nilai yang sudah kita inputkan ke

layar tadi dipindahkan, dan layar siap menerima inputan digit angka yang baru.

kondisi=”tambah”; berfungsi untuk memasukkan nilai ke variable kondisi. Ini akan

berhubungan dengan action script yang akan kita masukkan ke dalam tombol hasil nanti. n=1

sudah kita jelaskan diatas. Sedangkan koma=1; berfungsi agar kita tidak dapat menginputkan

koma(.) setelah tombol aritmetika ditekan, sampai kita menekan tombol angka kembali

(perhatikan script yang kita masukkan ke tombol angka di atas!).

Untuk tombol kurang, bagi dan kali hanya mengubah sedikit baris :

c. Menulis action script untuk tombol hasil dan reset.

Logika untuk tombol hasil cukup sederhana, yakni hasil dimasukkan nilai dari temp dan

layar_var, kemudian layar_var dimasukkan nilai hasil agar hasil tertampil di layar kalkulator.

hasil = temp (kondisi) layar_var

Perlu diperhatikan, bahwa nilai temp dan layar_var bertipe string, sehingga tidak dapat

digunakan untuk operasi aritmetika. Lho? Jadi???????????! Tenang dan santailah karena

action script memiliki fungsi untuk merubah tipe data string menjadi angka sehingga nantinya

on(release)

{

temp=layar_var;

kondisi="tambah";

n=1;

koma=1;

}

on(release)

{

temp=layar_var;

kondisi="kurang";

n=1;

koma=1;

}

on(release)

{

temp=layar_var;

kondisi="bagi";

n=1;

koma=1;

}

on(release)

{

temp=layar_var;

kondisi="kali";

n=1;

koma=1;

}


dapat kita gunakan untuk operasi aritmetika.Sebelumnya, ayo kita lihat script yang kita

masukkan ke tombol hasil :

Ada beberapa pemilihan dengan menggunakan if. Ini berhubungan dengan action script yang

kita masukkan kedalam tombol aritmetika, yakni tergantung nilai dari variable kondisi.

Perhatikan penggalan script di bawah ini :

if(kondisi=="tambah")

{

hasil=Number(temp)+Number(layar_var);

layar_var=hasil;

n=2;

}

Script di atas digunakan jika kita menekan tombol tambah, Mmka akan mengeksekusi argument

tersebut. hasil=Number(temp)+Number(layar_var); adalah perintah aritmetika untuk

pertambahan. Number(…) digunakan untuk mengubah tipe data dari string (huruf) menjadi

on(release)

{

if(layar_var!=""&&n!=2)

{

if(kondisi=="tambah")

{

hasil=Number(temp)+Number(layar_var);

layar_var=hasil;

n=2;

}

else if(kondisi=="kurang")

{

hasil=Number(temp)-Number(layar_var);

layar_var=hasil;

n=2;

}

if(kondisi=="bagi")

{

hasil=Number(temp)/Number(layar_var);

layar_var=hasil;

n=2;

}

if(kondisi=="kali")

{

hasil=Number(temp)*Number(layar_var);

layar_var=hasil;

n=2;

}

}

}


angka. Nah, jika nilai hasil sudah diketahui, maka saatnya layar menampilkan hasil perhitungan :

layar_var=hasil; . Oh, ya. n==2; digunakan agar tombol hasil tidak dapat dieksekusi berkali-kali

(perhatikan baris : if(layar_var!=""&&n!=2) ). n=2 pun digunakan agar setelah kita menekan

tombol hasil, maka tombol koma tidak bisa ditekan.

Untuk tombol reset sangat sederhana, yaitu untuk mengembalikan kondisi layar serta nilai-nilai

dari variable ke kondisi awal agar kita bisa melakukan perhitungan kembali.

Dengan ini, pembuatan kalkulator sederhana TELAH SELESAI.

on(release)

{

layar_var="0";

n=0;

koma=0;

hasil=0;

temp=”0”;

}


BAB V

MENGUBAH KALKULATOR SEDERHANA MENJADI SCIENTIFIC

Perlu diketahui, bahwa proses perhitungan diatas masih ada yang salah, yakni jika anda

menghitung nilai 3+2x4 hanya dapat dihitung manual, yakni :

1. Tombol 3 ditekan.

2. Tombol tambah (+) ditekan.


4. Tombol hasil ditekan, menghasilkan nilai 5 di layar.

5. Tombol kali (x) ditekan.


7. Tombol hasil ditekan.

Yang pada akhirnya menghasilkan nilai 20. Padahal, jika mengikuti kaedah matematika, maka

3+2x4 = 11 . Tentu sangat fatal jika digunakan oleh orang yang tidak tahu menahu.

Karena itu, pada bab ini kita akan membahas masalah ini, berikut menambah fitur-fitur lain

pada kalkulator seperti menghitung log atau sin.

STAY TUNE!

BAB V ini akan saya selesaikan di ebook revisi

selanjutnya. Untuk melihat apakah update-an ebook telah

tersedia atau tidak, silahkan berkunjung ke


Terima kasih sudah bersedia mendownload dan membaca

e-book saya.



PENUTUP

Akhirnya, ebook Belajar Flash : Membuat Kalkulator Sederhana versi 1.0 ini dapat saya

selesaikan. Terima kasih saya ucapkan kepada semua fihak yang telah ikut membantu secara langsung

maupun tidak langsung dalam pembuatan e-book ini. Juga kepada pembaca yang sudah bersedia

meluangkan waktunya yang sangat berharga untuk mengunduh dan membaca e-book ini.

Namun, saya sebagai penulis tidak dapat menjamin bahwa tutorial dalam e-book ini maupun

aplikasi yang dihasilkan nanti akan benar-benar lepas dari kesalahan dan eror dalam menjalankannya,

karena saya sendiri pun masih dalam tahap belajar. Karena itu, segala pertanyaan, kritik, saran maupun

masukan terhadap e-book ini sangatlah saya harapkan. Jika anda menemukan kesalahan, baik dari segi

tutorial, kata-kata maupun logika yang saya gunakan dalam action script, anda dapat membantu dan

member itahu saya melalui http://www.nurdiana.web.id/belajar-flash-membuat-kalkulator-sederhana

dengan memberikan komentar. Setiap kritik maupun saran akan saya tuliskan sebagai ralat di website

tersebut, dan akan dimasukkan ke dalam e-book revisi selanjutnya sebagai perbaikan, sehingga setiap

masukkan dari anda akan berfaedah dan bermanfaat bagi banyak orang.

Akhir kata, saya mohon maaf yang sebesar-besarnya jika ada kata-kata yang kurang berkenan di

dalam e-book ini.

Ttd.

Nurdiana Atmanagara

http://www.nurdiana.web.id


Belajar Flash Membuat Kalkulator Sederhana - Nurdiana.web.Id

Documents

Transcript of Belajar Flash Membuat Kalkulator Sederhana - Nurdiana.web.Id