CountDown Timer

Anda tahu atau tidak CountDown Timer? CountDown Timer adalah penghitung waktu mundur. Biasanya aplikasi ini digunakan untuk lomba-lomba yang dibatasi oleh waktu tertentu dengan hitungan mundur.

Disini kita akan moencoba membuat sebuah aplikasi penghitung waktu mundur atau lebih kerennya CountDown Timer. Langkah-langkah untuk membuatnya adalah sebagai berikut :

Yang pertama adalah buat file baru.
Ubahlah ukuran stage menjadi 500 x 120 pixels warna hitam dan pada Frame Rate isikan 50.

Gambar 5.1

Pilih Text tool dan buatlah Dynamic Text, Font : Verdana, Size : 27, warna : putih, Bold.

Gambar 5.2

Buatlah teks pada stage, tuliskan 00 : 00 : 00 : 00 seperti gambar berikut :

Gambar 5.3

Objek teks masih dalam keadaan terpilih, berikan nama instance dengan count_down pada Instance Name.

Gambar 5.4

Buatlah satu Dynamic Text lagi dengan pengaturan Font : Verdana, Size : 12, warna : putih, Bold.

Gambar 5.5

Buat teks di stage, tuliskan 00 : 00 : 00 : 00 lalu posisikan di samping kiri bawah seperti gambar berikut :

Gambar 5.6

Objek teks dynamic masih dalam keadaan terpilih, lalu pada instance beri nama “count” pada Instance Name.

Gambar 5.7

Kemudian klik Rectangle Tool pada toolbox, buat objek persegi panjang pada stage dengan ukuran 515 x 50 beri warna pada Fill Color dengan merah tua (#990000) dan tanpa Stroke Color. Posisikan seperti dengan gambar berikut :

Gambar 5.8

Klik Line Tool dan buatlah garis-garis seperti gambar berikut :

Gambar 5.9

Pilih objek yang berwarna merah yang berada di dalam objek garis-garis (lihat gambar).

Gambar 5.10

Lalu hapus objek itu tekan tombol Delete pada keyboard. Maka akan tampak seperti gambar berikut :

Gambar 5.11

Pilih atau klik Paint Bucket Tool pada toolbox, pada Fill Color pilih warna abu-abu (#CCCCCC). Kemudian teteskan atau klik pada daerah yang kosong yang terletak di dalam objek garis maka hasilnya akan terlihat seperti gambar berikut :

Gambar 5.12

Pilih Fill pada objek yang berwarna abu-abu. Klik Fill Color pada panel Color Mixer dan pada Type pilihlah tipe Radial.

Gambar 5.13

Lalu berikan warna dari abu-abu tua (#333333) ke warna abu-abu muda (#CCCCCC) lihat gambar berikut :

Gambar 5.14

Maka hasilnya akan terlihat seperti gambar berikut :

Gambar 5.15

Klik Text Tool, buat teks static dengan pengaturan Font : Tahoma, Size : 16, warna : hitam, Bold. Lalu tuliskan teks ”CountDown Timer” pada stage dan posisikan seperti gambar berikut :

Gambar 5.16

Teks masih dalam keadaan terpilih, pada panel Properties pilih tab Filter dan klik tombol Plus (+) pilih Drop Shadow untuk memberikan efek bayangan. Beri warna putih pada efek bayangan, pada blur : 3 dan Distance : 3.

Gambar 5.17

Maka hasilnya akan tampak teks menjadi ada bayangannya yang berwarna putih seperti gambar berikut :

Gambar 5.18

Langkah selanjutnya kita akan memberikan ActionScript pada frame. Buat layer baru dan beri nama action.

Gambar 5.19

Pilih layer action dan klik frame 1, lalu buka panel action dan tuliskan script seperti gambar berikut :

fscommand(“showmenu”, false);
start_time = getTimer();
countdown = 7200000;
onEnterFrame = function () {
elapsed_time = getTimer()-start_time;
_root.count.text = time_to_string(elapsed_time);
_root.count_down.text = time_to_string
(_root.countdown-elapsed_time);
};
function time_to_string(time_to_convert) {
elapsed_hours = Math.floor(time_to_convert/3600000);
remaining = time_to_convert-(elapsed_hours*3600000);
elapsed_minutes = Math.floor(remaining/60000);
remaining = remaining-(elapsed_minutes*60000);
elapsed_seconds = Math.floor(remaining/1000);
remaining = remaining-(elapsed_seconds*1000);
elapsed_fs = Math.floor(remaining/10);
if (elapsed_hours<10) {
hours = "0"+elapsed_hours.toString();
} else {
hours = elapsed_hours.toString();
}
if (elapsed_minutes<10) {
minutes = "0"+elapsed_minutes.toString();
} else {
minutes = elapsed_minutes.toString();
}
if (elapsed_seconds<10) {
seconds = "0"+elapsed_seconds.toString();
} else {
seconds = elapsed_seconds.toString();
}
if (elapsed_fs<10) {
hundredths = "0"+elapsed_fs.toString();
} else {
hundredths = elapsed_fs.toString();
}
return hours+":"+minutes+":"+seconds+":"+hundredths;
}

CATATAN :

Perhitungan waktu mundur ini dimulai dari 2 jam sampai selesai. Action yang menunjukan dimulai dari 2 jam adalah pada baris 3 yang berisi countdown = 7200000;. Perhitungan waktu mulai dari 2 jam adalah :
1000(60 x 60)x2=7200000
Jika Anda ingin memulai dari 1 jam maka perhitungannya adalah :
1000(60 x 60)x1=3600000
Mengapa 1000(60×60)x1 atau x2, karena 1 detik ada 1000 milidetik, 1 menit ada 60 detik, dan 1 jam ada 60 menit. Jika 2 jam maka tinggal dikalikan dengan 2 atau jika 3 jam maka tinggal dikalikan dengan 3.
Tapi kalau misalnya kita menginginkan waktu mundur dimulai dari menit, maka tidak usah dikalikan dengan jam.
Contoh kita ingin waktu mundur dimulai dari 10 menit misalnya, maka perhitungannya adalah :
1000(60×10) = 600000
Angka 10 menunjukan menit, karena 1 detik ada 1000 milidetik, 1 menit ada 60 detik dan kita Cuma akan membutuhkan 10 menit, jadi 60 detik dikalikan dengan 10 menit.

Kemudian simpan file dan lakukan publish ke format Flash (.swf) dan ke format Windows Projector (.exe). Kemudian jalankan movie maka akan tampil waktu hitungan mundur.

Gambar 5.22

Semoga bermanfaat…………
Terima kasih

IT Reksa

Discord#1773

Post a Comment

Previous Post Next Post