Animated Calculator

29 Mar 2010

Cara mudah mempelajari penempelan2 action script di flash bisa bermacam2, tetapi yang paling mudah selain animasi jam adalah animasi kalkulator.

[kml_flashembed movie="http://pustakasmasa.com/images/animasi/2011ipa1/1171011772kalkulator.swf" width="400" height="500" wmode="transparent" /]

Bermodalkan 4 buah script dasar yang terletak di tombol angka, tombol operasi, tombol clear dan scritp frame, fungsi alat hitung/kalkulator dapat kita buat lebih menarik, yaitu beranimasi. Berikut langkah2 membuatnya.

1. Buat project baru dengan new flash document beresolusi width 400 dan height 600,

kal001

2. Dalam kalkulator terdapat banyak tombol, nah tombol-tombol yang digunakan di kalkulator pun kita desain masing-masing dengan sendirinya. Pertama gunakan text tool untuk membuat tampilan angka 1, kemudian jadikan angka 1 tersebut tombol, caranya klik kanan di angka 1 kemudian pilih convert to symbol, beri nama angka 1, pilih button dengan registrasi tengah.

kal002

3. Double klik angka 1 yang sudah dijadikan tombol, perhatikan posisi 1 di gambar bawah, ubah nama layer menjadi text.

kal003

Perhatikan posisi angka 2 di gambar atas, berbeda dengan frame-frame yang biasa kita kenal, frame yang dimiliki tombol hanya ada empat buat, yaitu up, over, down dan hit. Setiap frame ini mempunyai fungsi berbeda, up adalah saat tombol dalam posisi siap, over saat pointer mouse berada diatas tombol, down saat tombol ditekan dan hit adalah daat tombol usai ditekan.

Dari keempat frame tersebut, kita hanya menggunakan up, over dan down saja, dimana saat over dan down kita akan menyisipkan animasi.

4. Tambah sebuah layer dibawah layer text, beri nama pad. Tujuan layer ini untuk memberi bentuk tombol, dalam hal ini bisa bulat maupun kotak, terserah selera.

kal004

Pada layer pad tambah keyframe di posisi up, over dan down, lalu gambar object bulatnya dengan warna dalam hijau pada posisi up, kuning pada posisi over dan merah pada posisi down.

5. Tambah sebuah layer diantara text dan pad, namakan animasi. Tambahkan keyframe diposisi over dan down. Import animasi yang akan digunakan, contohnya bintang, lalu tambahkan di layer animasi bagian over dan down dengan posisi yang berbeda.

kal005

6. Seiring dengan selesainya desain tombol angka 1, test animasi tersebut dengan menekan tombol ctrl+enter.

[kml_flashembed movie="http://fajaroktobriarto.fileave.com/tombol1.swf" width="200" height="200" wmode="transparent" /]

7. Begitu tombol sudah nampak seperti diatas, buat tombol sebanyak yang diperlukan oleh kalkulator. Untuk mempermudah prosedur pembuatan yang panjang diatas, duplikasi saja tombol angka 1. Caranya, klik kanan di tombol 1 di window library, lalu pilih duplicate, kemudian ubah nama dengan angka 2. edit tombol angka 2 dengan mengklik 2 kali tombol tersebut, kemudian di layer text, ubah angka 1 dengan 2. Demikian seterusnya untuk tampilan tombol-tombol yang lain. kurang lebih tampilannya seperti dibawah ini.

kal007Jangan lupa memberi nama layer tersebut dengan nama tombol.

8. Untuk tampilan layar perhitungan(gambar bawah), dengan text tool bertype dynamic text(pos 2) tambahkan kotak dengan dengan panjang kurang lebih seperti gambar dibawah ini(pos 1). Isi dengan angka nol (0), lalu ketikkan bagian kolom var dibawah “display”(pos 3). Guna kotak ini adalah mengeluarkan output dari angka yang dimasukkan dan dihitung oleh kalkulator.

kal008

9. Memasukkan Action Script. Tahap berikutnya adalah memasukkan script/program disetiap tombol dan tampilan(mainscript). Script dapat didownload di sini. untuk angka, gunakan script angka, klik tombol 1 lalu klik window actions, copy-paste script angka yang ada ke window action. Berikut untuk angka 2 tinggal ganti saja angka 1 di (”1″) dengan (”2″), demikian selanjutnya untuk tombol angka lainnya.

kal009

Untuk tombol CE, gunakan script CE, untuk tombol operasi perhatikan pada bagian petik, bila bagi (”/”), kali (”*”), tambah (”+”), kurang(”-”) nah untuk sama dengan cukup buka kurung tutup kurung aja ()

10. Yang terakhir, masukkan script frame dengan terlebih dahulu menambahkan layer bernama action script. Klik pada kerframe pertama layer tersebut, kemudian klik pada window actions, lalu copy paste script frame kedalamnya.

kal0101

11. Begitu semua script nempel, cobalah kalkulator yang dibuat dengan menekan tombol ctrl+enter. Jangan lupa untuk menambahkan gambar dilayer background paling bawah.

[kml_flashembed movie="http://pustakasmasa.com/images/animasi/2011ipa1/1171011772kalkulator.swf" width="400" height="600" wmode="transparent" /]

Fajar Oktobriarto

Fajar Oktobriarto


TAGS membuat animasi kalkulator create your own calculator


-

Author

Fajarokto
Seorang guru, yang berusaha mempraktekkan ilmu dalam kehidupan.

Follow Me