23 Comments

Membuat 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

Anda juga dapat melihat tutorial di atas pada GubugFlash.com | Membuat CountDown Timer

Semoga bermanfaat…………
Terima kasih

By : gapra27

Comment navigation

Newer Comments →

23 comments on “Membuat CountDown Timer

  1. ini pake ac2 ya mas…

  2. klw countdown ke tanggal gmna mas ?
    maklum bru bljar..
    hehe

  3. terima kash buat infonya

    cara membuat website gratis silahkan kunjungi blog saya

  4. klo waktu mundurnya detik gmn???
    sama aja AS nya??

  5. kereenn,,
    kalau pakek php bisa gak ??
    kalau bisa tolong dibantu ya , ,
    terima kasih

  6. makasih tutorialnya keren

  7. muncul pesan:
    **Error** Scene=Scene 1, layer=action, frame=1:Line 1: This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.
    fscommand(“showmenu”, false);

    Total ActionScript Errors: 1 Reported Errors: 1

    maksudnya apa mas??

  8. Makasih mas Sangat membantu..
    saya kan pake yang elapsed time.. kalo mau menghentikan waktu pada , kondisi tertentu gimana caranya ya?? mohon bantuanya

Comment navigation

Newer Comments →

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: