ari fadli - tutorial flash_membuat aplikasi perhitungan dengan flash 8

Itshareunimal.com Copyright ©2010

Tutorial Flash – Membuat Aplikasi Perhitungan dengan Flash 8 Ari Fadli

Tutorial Flash- Membuat Aplikasi Perhitungan dengan Flash 8 Ari Fadli ari_larsson21@yahoo.com

Lisensi Dokumen:

Copyright © 2010 Itshareunimal.Com

Seluruh dokumen di Itshareunimal.Com dapat digunakan, dimodifikasi dan disebarkan

secara bebas untuk tujuan bukan komersial (nonprofit), dengan tidak menghapus atau

merubah atribut penulis dan pernyataan . Itshareunimal.com adalah situs milik Kelompok

Belajar informatika Unimal Provinsi Aceh

Itshareunimal.com Copyright ©2010

Tutorial Flash – Membuat Aplikasi Perhitungan dengan Flash 8 Ari Fadli

Kata Pengantar Puji syukur kepada Allah SWT, atas nikmat yang tlah Diberikan. Shalawat dan

salam kepada pengubah wajah dunia, Nabi Muhammad SAW beserta keluarga dan

sahabatNya.

Terimakasih kepada keluargaku, teman-teman, serta kepada semua pihak yang

telah ikut membantu menyelesaikan tutorial ini.

Sangat banyak kekurangan dalam tutorial ini, oleh karena itu kritik dan saran

sangat diharapkan.

“Ada tiga amalan yang pahalanya akan terus mengalir, meskipun ia telah

meninggal, sedekah jariah, ilmu yang bermanfaat, dan anak yang shaleh”.

Berdasarkan hadits itu, harapan saya semoga tutorial ini termasuk kedalam

kategori ilmu yang bermanfaat.

Lhokseumawe, 09 Juni 2010 Ari Fadli

Itshareunimal.com Copyright ©2010

Tutorial Flash – Membuat Aplikasi Perhitungan dengan Flash 8 Ari Fadli

Saya kira FLASH hanya dapat digunakan untuk membuat aplikasi interaktif, presentasi, atau semua yang berhubungan dengan animasi, tapi ternyata Flash juga bisa membuat aplikasi matematika seperti kalkulator dan semacamnya yang biasanya dibuat menggunakan Delphi, C, dll. Dasar pembuatannya hampir sama, logikanya tetap sama namun hanya berbeda pada penulisannya saja. Berikut cara membuatnya : 1. Buka Aplikasi Flash (saya menggunakan Mac. Flash 8)

2. Pada stage, buatlah tampilannya kira-kira seperti di bawah ini :

Dynamic text

button

Input text

Static text

Itshareunimal.com Copyright ©2010

Tutorial Flash – Membuat Aplikasi Perhitungan dengan Flash 8 Ari Fadli

3. Tampak pada stage ada 2 buah input text, 1 buah dynamic text, 2 buah static

text, dan sebuah button.

Ada 3 buah type text yang berbeda dalam aplikasi flash.

Static text : adalah tulisan yang sifatnya tidak dapat berubah atau diubah ketika

flash telah dijalankan, baik itu karena script ataupun lainnya.

Cara menampilkannya pada stage :

1. Klik pada toolbox kemudian pada properties atur seperti dibawah ini :

2. Setelah mengatur type menjadi static text, kemudian drag pada stage, dan

ketikkan “+”.

3. Seleksi static text tsb, kemudian klik kanan, copy, paste, lalu ubah textnya

menjadi “=”

4. Letakkan static text tersebut pada stage seperti yang tampak pada langkah

nomor 2.

Dynamic text : adalah tulisan yang dapat berubah atau diubah dengan script.

Cara menampilkannya pada stage: 1. Klik pada toolbox kemudian pada properties atur seperti dibawah ini :

2. Setelah mengatur type menjadi Dinamic text, dan mengaktifkan “show

border around text” dan mengetikkan “hasil” pada var, lalu drag pada stage.

biarkan kosong (tidak ada yang diketikkan).

Type text

Type text

Show border around text variabel

Itshareunimal.com Copyright ©2010

Tutorial Flash – Membuat Aplikasi Perhitungan dengan Flash 8 Ari Fadli

3. Letakkan dynamic text tersebut setelah text “=” pada stage. lihat langkah

nomor 2.

Input text : adalah suatu form tempat user memberi masukan, masukkan

tersebut akan menjadi sebuah nilai bagi variablenya nanti.

Cara menampilkannya pada stage. 1. Klik pada toolbox kemudian pada properties atur seperti dibawah ini :

2. Setelah mengatur type menjadi input text, dan mengaktifkan “show border

around text” serta mengetikkan “bilangan1” pada var, lalu drag pada stage.

biarkan kosong (tidak ada yang diketikkan).

3. Letakkan input text tersebut sebelum text “+” pada stage. lihat langkah nomor

2.

4. Seleksi input text tadi, klik kanan, copy, paste dan letakkan input text hasil

copy-an setelah tanda “+” dan jangan lupa pada variablenya ketikkan

“bilangan2”

Setelah membuat static text, dynamic text, dan input text maka langkah selanjutnya adalah membuat tombol yang fungsinya sebagai eksekutor dalam proses penjumlahan.

Type text

Show border around text variabel

variabel

Itshareunimal.com Copyright ©2010

Tutorial Flash – Membuat Aplikasi Perhitungan dengan Flash 8 Ari Fadli

Langkah-langkah dalam membuat button adalah sebagai berikut : 1. klik rectangle tool pada toolbox, double klik agar kita dapat mengatur

corner radiusnya. Ketikkan 20 pada corner radius pointnya lalu ok.

2. Drag pada stage shingga jadinya seperti ini.

3. Kemudian klik pada toolbox dan pilih static text pada typenya. Ubah

warna menjadi putih, lalu ketikkan “proses” dan letakkan tepat diatas kotak

merah tersebut.

4. Seleksi kotak tersebut dan tulisan proses, kemudian tekan F8 dan ketikkan

“tombolProses”, pilih button sebagai type, lalu OK.

5. Lalu klik kanan pada “tombolProses” dan pilih edit.

Itshareunimal.com Copyright ©2010

Tutorial Flash – Membuat Aplikasi Perhitungan dengan Flash 8 Ari Fadli

6. Seleksi frame over dan frame Down dengan menekan CTRL, lalu tekan F6.

7. Klik Pada Frame Over, ubah warna kotak merah menjadi berwarna merah.

Fungsinya yaitu agar pada saat mouse mengarah ke tombol, maka warna

tombol yang tadinya merah menjadi merah muda, ketika kursor tidak mengarah

pada tombol, maka akan kembali ke warna merah.

8. Klik Pada Frame Down, ubah warna kotak merah menjadi berukuran lebih

kecil. Gunakan free transform tool.

Fungsinya yaitu agar pada saat mouse menekan tombol, ukuran tombol akan mengecil.

9. Klik CTRL+E untuk kembali ke scene.

4. Setelah semuanya selesai, maka tinggal kita masukkan script agar program berjalan

lancar.

Dynamic text

button

Input text

Static text

Itshareunimal.com Copyright ©2010

Tutorial Flash – Membuat Aplikasi Perhitungan dengan Flash 8 Ari Fadli

Bila melihat tampilan seperti ini, logikanya kita akan menjumlahkan 2 buah bilangan, 2 bilangan tersebut kita inputkan terlebih dahulu pada dua buah “input text”, kemudian pada saat tombol proses ditekan, maka hasilnya akan keluar pada dynamic text. Action scriptnya kita berikan pada tombolProses, caranya seleksi tombolProses lalu tekan F9. Setelah panel action terbuka, ketikkan :

Penjelasan : 1. on(release){ // ketikan mouse ditekan

2. hasil = Number(bilangan1) + Number(bilangan2); // maka pada kolom hasil

akan ditampilkan hasil penjumlahan dari inputan “bilangan1” dan “bilangan2”.

3. Number // fungsinya untuk mengubah string bilangan1 dan bilangan2 terbaca

menjadi sehingga dapat dilakukan perhitungan.

Untuk melihat hasilnya, tekan CTRL+Enter Bila ingin membuat perhitungan berupa pengurangan, perkalian, ataupun pembagian, kita tinggal mengubah tanda “+” pada actionscript menjadi “-“ untuk pengurangan, “*” untuk perkalian , atau “/” untuk pembagian. Sekian tutorial dari saya, semoga bermanfaat! Selamat mencoba.

Itshareunimal.com Copyright ©2010

Tutorial Flash – Membuat Aplikasi Perhitungan dengan Flash 8 Ari Fadli

Ari Fadli. berawal dari kegemaran mencoret-coret dibuku, meja,

dinding, juga tanah, pernah terpikir waktu kecil tentang bagaimana

pembuatan sebuah animasi. Hingga pada akhirnya aku mengenal

komputer dan mulai belajar animasi lewat fitur animasi dengan

format GIF pada software photoshop. Hingga kini aku masih belajar

tentang semua yang berbau animasi.