Membuat Jam dan Kalender Digital Menggunakan Adobe Flash

Hai, apa kabar semuanya?

Baik-baik sajakan? “Lagi Semangat 45” nih. Pada tutorial kali ini saya akan membuat sebuah animasi jam dan kalender digital dengan menggunakan adobe flash.. mungkin teman-teman sudah pernah baca tutorial yang sama dengan tutorial ini, akan tetapi saya akan mencoba membuat tutorial ini dengan versi saya sendiri, Cekidot.

Pertama, yang harus dilakukan adalah memahami terlebih dahulu text type yang ada pada adobe flash, didalam flash terdapat 3 text type yakni : static text, input text & dynamic text. Masing-masing text memiliki kegunaan masing-masing. Static text sering untuk menampilkan kata/kalimat yang hanya dapat diubah bentuk dan isinya saat berada di flash, Input text sering digunakan untuk membuat form username dan password seperti textfield pada adobe dreamweaver, dan Dynamic text sering digunakan untuk menampilkan kata/kalimat yang dapat berubah sewaktu-waktu, untuk mengubah bentuk dan isinya teman-teman dapat menggunakan Action Script pada flash. Nahh.. yang akan kita gunakan untuk membuat jam digital adalah Dynamic text.

Berikut adalah animasi timer yang akan kita buat.

Langkah Pertama

Buat file baru dengan ukuran yang kita inginkan sebagai contoh disini ukuran stage yang saya gunakan adalah width 350px dan height 100px.

Langkah Kedua

Buat Object Rectangle yang digunakan sebagai background jam digital yang ingin kita buat. Warna yang digunakan sesuai dengan keinginan masing-masing jika ingin member variasi desain silahkan gunakan corner radius untuk mengubah nilai sudut object rectangle.

Langkah Ketiga

Buat Dynamic Text dengan nama variable masing-masing misalnya var “kalender” dan var clock”.

Langkah Keempat

Buka ActionFrame dengan cara klik pada Keyframe pertama lalu tekan tombol F9 atau klik kanan pada Keyframe pertama lalu pilih action, setelah masuk ke action panel, masukkan ActionScriptnya sebagai berikut :

//ketika movie dijalankan
onEnterFrame = function() {

waktu = new Date(); //Membuat variabel waktu

//pastikan penggunaan nama var pada dynamic textnya sama
//Actionscript berikut digunakan untuk menampilkan waktu dan tanggal sesuai dengan Data Waktu pada komputer anda
jam = waktu.getHours();
menit = waktu.getMinutes();
detik = waktu.getSeconds();

tanggal = waktu.getDate();
bulan = waktu.getMonth();
tahun = waktu.getFullYear();

//variabel berikut digunakan untuk membuat penamaan pada bulan
bln = new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","Nopember","Desember");
bulan = bln[bulan];

//Actionscript berikut digunakan untuk menampilkan angka 0 jika angka yang tampil bernilai dibawah 10
if (jam<10) {
jam = "0"+jam;
}
if (menit<10) {
menit = "0"+menit;
}
if (detik<10) {
detik = "0"+detik;
}

//Actionscript berikut digunakan untuk menampilkan Actionscript diatas pada DynamicText pada movie yang telah kita buat
// yaitu Actionscript Kalender dan Waktu
kalender = tanggal+" - "+bulan+" - "+tahun;
clock = jam+":"+menit+":"+detik;

}
Download script file (1268)

Maka hasilnya akan jadi seperti ini.

Dapat juga di beri variasi desain seperti berikut ini.

Hasil Akhir

Demikanlah tutorial ini saya buat, dibawah ini saya shared file .FLA-nya semoga dapat bermanfaat buat teman-teman sekalian. “Indahnya Berbagi”.. ^_^ ..

Download timer.fla (1684)

M. Ridho Ardiansyah

Ridho bekerja sebagai staff pengajar di LKP PalComTech Palembang. Kesehariannya selain sebagai Pembina PalComTech Animation Club, klub musik juga mengajar desain grafis (Corel Draw, Photoshop, Flash, Swishmax).

41 comments

  1. kereen euy kak,
    real time tanpa manipulasi. .

    :2thumbup :2thumbup

  2. wah keren dho , jam dan kalender digital… akan dicoba nich , :ngacir:
    trims ilmunya…

  3. Om , itukan yg tampil jam komputer client .. Bisa nggak dimodif biar yang tampil jam server ????

  4. T.O.P bgt dheeeee :2thumbup :selamat :thumbup :recsel :rate :babyboy1 :alay

  5. Waw mantap keren :matabelo :mewek :mewek :request :pertamax :supermaho :kiss :nosara :ilovekaskus :recsel :takut :ngacir2 :shakehand2

  6. Fenny Wijayanti Saputri

    :thumbup :2thumbup
    kerennnnn sangad kk…!!!!!!
    bagossssssssss……..
    hahahahah..!!! :selamat
    bwt lgee yg sangad bgs ee kk…

  7. :2thumbup :2thumbup
    q_rend Habis kk..
    :peluk

  8. :request :request :thumbup :recsel :2thumbup keren kak kalender n jam digtalny,,.,.

    • om berkunjung ke braga city walk saya setiap hari ke sana kalo om ada di sana aku bisa lebih cepat menghafal.om gimana sih cara bikin variasinya aku mau tau dong
      kalo saya tau saya bisa mengasih tau ke teman teman dan orang tua sata thanks you

  9. met malam kak…. ajari adk bwt web ya…hehehe :angel

  10. wah keren,, buat yang ada jarum jam nya donk!! yang spt jam tangan gtu>>>
    tq

  11. wow, sangat membantu. ada yang analog gak mas jamnya?

  12. umm,, bisa gk pake Server Time? GMT +7

    jadi bukan tergantung waktu client…

    kalau di Php+Javascript bisa, tapi di flash masih gelap .__.
    mohon bantuannya :)

  13. thx , sangat membantu buat tugas sekolah

  14. kak ridho yg suka di aquarium bukan?
    makasih ya kak :)

  15. gan punya ane detik nya gak jalan ,, gimana ini

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

[+] kaskus emoticons nartzco