Flash8 & FlashCS3 — Membuat Konversi Suhu Celcius-Kelvin-Fahrenheit dengan Radio Button

Halo

Kali ini akan dibuat konversi suhu dengan menggunakan radio button untuk memilih suhu yang akan dikonversi.

Software yang di gunakan :

Flash 8 dan Flash CS3

AS [ActionScript] yang digunakan :

AS 2.0

Preview hasil jadi :

Tampilan hasil jadi, untuk memberi warna pada stage bisa dilihat di sini dan untuk memberi efek pada button bisa dilihat di sini

Sebelah kiri, hasil penghitungan Celcius ke Celcius; tengah hasil penghitungan Celcius ke Kelvin dan sebelah kanan hasil penghitungan Celcius ke Fahrenheit

Sebelah kiri, hasil penghitungan Kelvin ke Celcius; tengah hasil penghitungan Kelvin ke Kelvin dan sebelah kanan hasil penghitungan Kelvin ke Fahrenheit

Sebelah kiri, hasil penghitungan Fahrenheit ke Celcius; tengah hasil penghitungan Fahrenheit ke Kelvin dan sebelah kanan hasil penghitungan Fahrenheit ke Fahrenheit

Gambar di atas adalah alasan kenapa saya menulis kalau max angka inputan 7, karena -459.67 jumlahnya 7 huruf sehingga tempat untuk inputan saya maxkan hanya 7 dan kenapa harus menggunakan tanda titik bukan koma, bila menggunakan koma maka hasilnya akan error seperti di atas.

• Buat tulisan “Masukkan suhu [Max 7 angka dan menggunakan tanda . bukan , ] dan pilih suhu yang ingin dikonversi” dan “Dari” dengan menggunakan Text Tool, Text type Static Text, warna ukuran dan jenis font silakan buat sesuka Anda

• Buat kotak input jawaban dengan Text Tool, type  Input Text, beri nama txt_inputan di kotak Instance Name. Atur properties text tersebut agar sama dengan gambar di bawah -kecuali untuk jenis text, ukuran dan warna,silakan atur sesuka Anda
• Buka panel Components dan tarik Radio Button ke arah Stage, bila panel Components belum ada munculkan dengan menekan Ctrl+F7 atau menggunakan menu Window->Components
• Atur posisi Radio Button [selanjutnya disingkat RB u/ mempermudah] pada stage, ubah properties RB 1, 2, dan 3 sesuai gambar di bawah

  Pada RB 1 nama groupName adalah K1 dan label Celcius

Pada RB 2 nama groupName adalah K1 dan label Kelvin

Pada RB 3 nama groupName adalah K1 dan label Fahrenheit

• Buat tulisan “ke” dengan Text Tool, Text Type Static Text, kemudian copy-paste 3 RB yang sudah ada tersebut –atur posisi mereka pada stage- dan ganti groupName ke 3 RB itu menjadi K2

• Buat button KONVERSI, cara bisa dilihat di sini

•  Buat text dengan Text Tool, Text Type Dynamic Text, dan beri nama txt_Konversi pada kotak Instance name, pilih Multiline pada Lyne type, dan pilih pilihan Show border around the text.

Jangan lupa untuk memilih warna text yang BUKAN warna putih atau tulisan tidak akan terbaca nantinya

• Coding time! Buat layer baru, beri nama Actions dan ketikkan code dibawah ini

Pada RB 3 nama groupName adalah K1 dan label Fahrenheit

• Buat tulisan “ke” dengan Text Tool, Text Type Static Text, kemudian copy-paste 3 RB yang sudah ada tersebut –atur posisi mereka pada stage- dan ganti groupName ke 3 RB itu menjadi K2.
• Buat button KONVERSI, cara bisa dilihat di sini
• Buat text dengan Text Tool, Text Type Dynamic Text, dan beri nama txt_Konversi pada kotak Instance name, pilih Multiline pada Lyne type, dan pilih pilihan Show border around the text.

Jangan lupa untuk memilih warna text yang BUKAN warna putih atau tulisan tidak akan terbaca nantinya

• Coding time! Buat layer baru, beri nama Actions dan ketikkan code dibawah ini

Panjang amat codenya? Tenang, nih saya kasih code nya, silakan di copy-paste aja, gambar di atas untuk mencek apakah tampilan code nya sama atau tidak setelah di copy-paste.

this.createTextField(“txt_K1″, this.getNextHighestDepth(), 10, 10, 400, 22); // width 400, height 22, koordinat x 10 y 10

txt_K1._visible = false;

this.createTextField(“txt_K2″, this.getNextHighestDepth(), 10, 10, 400, 22);

txt_K2._visible = false;

var angka:Number = 0;

function getData1(evt:Object)

{

txt_K1.text = evt.target.selection.label;

}

function getData2(evt:Object)

{

txt_K2.text = evt.target.selection.label;

}

K1.addEventListener(“click”, getData1);

K2.addEventListener(“click”, getData2);

btn_Konversi.onRelease = function()

{

if(txt_K1.text == txt_K2.text)

{

txt_Konversi.text = txt_inputan.text+ ” derajat “+txt_K1.text+ ” sama dengan ” +txt_inputan.text+ ” derajat “+txt_K2.text;

}

else

{

if(txt_K1.text == “Celcius”)

{

if(txt_K2.text == “Kelvin”)

{

//K = °C + 273,15

angka = Number(txt_inputan.text) + 273.15;

txt_Konversi.text = txt_inputan.text+ ” derajat “+txt_K1.text+ ” sama dengan ” +angka+ ” derajat “+txt_K2.text;

}

else

{

//°F = °C × 1,8 + 32

angka = Number(txt_inputan.text) * 1.8 + 32;

txt_Konversi.text = txt_inputan.text+ ” derajat “+txt_K1.text+ ” sama dengan ” +angka+ ” derajat “+txt_K2.text;

}

}

else if(txt_K1.text == “Kelvin”)

{

if(txt_K2.text == “Celcius”)

{

//°C = K − 273,15

angka = Number(txt_inputan.text) – 273.15;

txt_Konversi.text = txt_inputan.text+ ” derajat “+txt_K1.text+ ” sama dengan ” +angka+ ” derajat “+txt_K2.text;

}

else

{

//°F = K × 1,8 − 459,67

angka = Number(txt_inputan.text) * 1.8 – 459.67;

txt_Konversi.text = txt_inputan.text+ ” derajat “+txt_K1.text+ ” sama dengan ” +angka+ ” derajat “+txt_K2.text;

}

}

else

{

if(txt_K2.text == “Celcius”)

{

//°C = (°F − 32) / 1,8

angka = (Number(txt_inputan.text) – 32) /1.8;

txt_Konversi.text = txt_inputan.text+ ” derajat “+txt_K1.text+ ” sama dengan ” +angka+ ” derajat “+txt_K2.text;

}

else

{

//K = (°F + 459,67) / 1,8

angka = (Number(txt_inputan.text) + 459.67) / 1.8;

txt_Konversi.text = txt_inputan.text+ ” derajat “+txt_K1.text+ ” sama dengan ” +angka+ ” derajat “+txt_K2.text;

}

}

}

}

• Test dengan menekan Ctrl+Enter

Penjelasan code:

 Tidak perlu ya? Canda :p

this.createTextField(“txt_K1″, this.getNextHighestDepth(), 10, 10, 400, 22); // width 400, height 22, koordinat x 10 y 10

txt_K1._visible = false;

this.createTextField(“txt_K2″, this.getNextHighestDepth(), 10, 10, 400, 22);

txt_K2._visible = false;

Membuat 2 buah text dengan nama txt_K1 dan txt_K2 yang sama – sama berukuran panjang 400,lebar 200 dan terletak pada koordinat x 10 y 10 kemudian diset agar keduanya tidak terlihat.

var angka:Number = 0;

Membuat sebuah variabel bernama angka dengan tipe Number yang diisi dengan nilai 0

function getData1(evt:Object)

{

txt_K1.text = evt.target.selection.label;

}

function getData2(evt:Object)

{

txt_K2.text = evt.target.selection.label;

}

Mendefinisikan 2 buah fungsi bernama getData1 dan getData2 yang akan menampilkan label dari RB terpilih ke dalam text txt_K1 dan txt_K2

K1.addEventListener(“click”, getData1);

K2.addEventListener(“click”, getData2);

Pada saat RB dengan groupName K1 atau K2 diklik maka akan dijalankan fungsi getData1 atau getData2

btn_Konversi.onRelease = function()

Pada saat button btn_Konversi diklik dan dilepaskan maka

{

if(txt_K1.text == txt_K2.text)

Akan dilakukan pengecekan apakah label pada kedua RB terpilih sama, kalau sama

{

txt_Konversi.text = txt_inputan.text+ ” derajat “+txt_K1.text+ ” sama dengan ” +txt_inputan.text+ ” derajat “+txt_K2.text;

}

Akan ditampilkan kembali angka inputan beserta label kedua RB tersebut

else

Kalau tidak sama

{

if(txt_K1.text == “Celcius”)

Cek apakah RB pertama Celcius, kalau iya maka

{

if(txt_K2.text == “Kelvin”)

Cek apakah RB kedua Kelvin, kalau iya maka

{

//K = °C + 273,15

angka = Number(txt_inputan.text) + 273.15;

txt_Konversi.text = txt_inputan.text+ ” derajat “+txt_K1.text+ ” sama dengan ” +angka+ ” derajat “+txt_K2.text;

Konversi yang dilakukan adalah dari Celcius ke Kelvin [yang diberi tanda // adalah rumus], nilai inputan dari txt_inputan akan diubah dulu ke number karena berupa text kemudian dihitung menggunakan rumus kemudian ditampilkan di dynamic text txt_Konversi

}

else

RB kedua pasti Fahrenheit maka

{

//°F = °C × 1,8 + 32

angka = Number(txt_inputan.text) * 1.8 + 32;

txt_Konversi.text = txt_inputan.text+ ” derajat “+txt_K1.text+ ” sama dengan ” +angka+ ” derajat “+txt_K2.text;

Konversi yang dilakukan adalah dari Celcius ke Fahrenheit [yang diberi tanda // adalah rumus], nilai inputan dari txt_inputan akan diubah dulu ke number karena berupa text kemudian dihitung menggunakan rumus kemudian ditampilkan di dynamic text txt_Konversi

}

}

else if(txt_K1.text == “Kelvin”)

Cek apakah RB pertama Kelvin, kalau iya maka

{

if(txt_K2.text == “Celcius”)

Cek apakah RB kedua Celcius, kalau iya maka

{

//°C = K − 273,15

angka = Number(txt_inputan.text) – 273.15;

txt_Konversi.text = txt_inputan.text+ ” derajat “+txt_K1.text+ ” sama dengan ” +angka+ ” derajat “+txt_K2.text;

Konversi yang dilakukan adalah dari Kelvin ke Celcius [yang diberi tanda // adalah rumus], nilai inputan dari txt_inputan akan diubah dulu ke number karena berupa text kemudian dihitung menggunakan rumus kemudian ditampilkan di dynamic text txt_Konversi

}

else

RB kedua pasti Fahrenheit, maka

{

//°F = K × 1,8 − 459,67

angka = Number(txt_inputan.text) * 1.8 – 459.67;

txt_Konversi.text = txt_inputan.text+ ” derajat “+txt_K1.text+ ” sama dengan ” +angka+ ” derajat “+txt_K2.text;

Konversi yang dilakukan adalah dari Kelvin ke Fahrenheit [yang diberi tanda // adalah rumus], nilai inputan dari txt_inputan akan diubah dulu ke number karena berupa text kemudian dihitung menggunakan rumus kemudian ditampilkan di dynamic text txt_Konversi

}

}

else

RB pertama pasti Fahrenheit, maka

{

if(txt_K2.text == “Celcius”)

Cek apakah RB kedua Celcius, jika iya maka

{

//°C = (°F − 32) / 1,8

angka = (Number(txt_inputan.text) – 32) /1.8;

txt_Konversi.text = txt_inputan.text+ ” derajat “+txt_K1.text+ ” sama dengan ” +angka+ ” derajat “+txt_K2.text;

Konversi yang dilakukan adalah dari Fahrenheit ke Celcius [yang diberi tanda // adalah rumus], nilai inputan dari txt_inputan akan diubah dulu ke number karena berupa text kemudian dihitung menggunakan rumus kemudian ditampilkan di dynamic text txt_Konversi

}

else

RB kedua pasti Kelvin maka

{

//K = (°F + 459,67) / 1,8

angka = (Number(txt_inputan.text) + 459.67) / 1.8;

txt_Konversi.text = txt_inputan.text+ ” derajat “+txt_K1.text+ ” sama dengan ” +angka+ ” derajat “+txt_K2.text;

}

}

}

}

Konversi yang dilakukan adalah dari Fahrenheit ke Kelvin [yang diberi tanda // adalah rumus], nilai inputan dari txt_inputan akan diubah dulu ke number karena berupa text kemudian dihitung menggunakan rumus kemudian ditampilkan di dynamic text txt_Konversi

Hasil jadi (*.fla) bisa di dl di

FLASH8

FLASHCS3

Terima kasih sudah mampir dan membaca blog saya. (^_^)