MEMBUAT KALKULATOR

DENGAN ADOBE FLASH

2
 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 :
4

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

6. Persiapan selesai.
5

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.

6

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.
7

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.

8

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.
9

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 :

1
0

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.

1
1

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 .

1
2

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.

1
3

14
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 :

layar_var="0";
n=0;
koma=0;
temp=0;

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!)
15