cara buat jam digital with Flash

Disadari atau tidak, jam sudah menjadi benda yang sangat penting dalam aktifitas keseharian kita. Dengan jam kita bisa melihat petunjuk waktu dan berjalannya, sehingga kita dapat melakukan rutinitas kegiatan dan acara sesuai pada jadwalnya. Terbayang kan bagaimana kacaunya hidup sehari-hari jika alat penunjuk waktu yang satu ini tidak pernah ada? Nah, sekarang ceritanya kita ingin membuat animasi Flashnya, gimana caranya?


Flash memiliki sebuah predefined Date class yang berguna untuk mengambil data berupa waktu dan tanggal relatif terhadap GMT/UTC atau relatif terhadap local time (yaitu waktu di sistem operasi dimana Flash Player tersebut sedang berjalan), sehingga kita dapat membuat aplikasi yang berhubungan dengan tanggal atau waktu seperti misalnya jam, kalender, timer, dan lain-lain.

Karena judulnya buat animasi jam, jadi disini saya hanya bahas cara membuat jam saja, baik digital (hanya menampilkan digit angka) maupun analog (seperti jam dinding pada umumnya).

1. Jam Digital

Buat 3 buah teks untuk tampilan jam, menit, dan detik. Kemudian ubah tipe teks ketiga-tiganya menjadi dynamic text, pada kolom variabelnya berikan nama teks_displayJam, teks_displayMenit, teks_displayDetik.

buat 3 kotak teks

buat 3 kotak teks

Terakhir baru berikan script di frame tersebut:
view source
print?
01    var dateObj:Date;
02    var jam:Number;
03    var menit:Number;
04    var detik:Number;
05    var teks_displayJam:String;
06    var teks_displayMenit:String;
07    var teks_displayDetik:String;
08   
09    this.onEnterFrame= function()
10    {
11        dateObj = new Date()
12        jam = dateObj.getHours();
13        menit = dateObj.getMinutes();
14        detik = dateObj.getSeconds();
15   
16        if(jam < 10)
17            teks_displayJam = "0" + jam.toString();
18        else
19            teks_displayJam = jam.toString();
20   
21        if(menit < 10)
22            teks_displayMenit = "0" + jam.toString();
23        else
24            teks_displayMenit = menit.toString();
25   
26        if(detik < 10)
27            teks_displayDetik = "0" + detik.toString();
28        else
29            teks_displayDetik = detik.toString();
30    }
hasil akhir

hasil akhir

2. Jam Analog

Pertama-tama buat 3 buah movieclip berbentuk garis yang akan berperan sebagai jarum penunjuk pada jam (jam, menit, dan detik) berikan instance name pada masing2 jarum dengan nama mc_jarumJam, mc_jarumMenit, dan mc_jarumDetik. Satu hal yang perlu diperhatikan adalah saat mengconvert masing2 garis menjadi symbol, set registration point ke titik tengah-bawah (lihat kotak yg ditunjuk mouse).

set registration point

set registration point

Gambar sebuah kerangka jam yang akan ditempati jarum-jarum tersebut, kreasikan sendiri desain bentuk, warna, dan ukurannya sebagus mungkin. Buat juga sebuah titik tepat di tengah-tengahnya agar mudah menyusun jarum-jarumnya, sekarang pasangkan ketiga jarum yang kita buat di awal tadi saling tumpang tindih, dengan acuan bagian bawah ketiga movieclip jarum berada di titik tengah jam, sehingga bagian atasnya mengarah tepat ke angka 12.

susun jarum

susun jarum

Terakhir berikan script pada frame:

view source
print?
01    this.onEnterFrame = function()
02    {
03        var dateObj:Date = new Date();
04        var detik:Number = dateObj.getSeconds();
05        var menit:Number = dateObj.getMinutes();
06        var jam:Number = dateObj.getHours();
07   
08        mc_jarumDetik._rotation = detik*6;
09        mc_jarumMenit._rotation = menit*6;
10        mc_jarumJam._rotation = jam*30;
11        mc_jarumJam._rotation += (menit/2);
12    }
hasil akhir

hasil akhir

Tutorial lengkap ttg pembuatan Jam Digital dan Analog ini bisa dilihat di tabloid PC-Mild edisi 24/2008 (8 desember) ;)

..

3. Tambahan (ngopi dari help-nya Flash CS3):

Constructor

Date([yearOrTimevalue:Number], [month:Number], [date:Number], [hour:Number], [minute:Number], [second:Number], [millisecond:Number])

Method

To call the methods of the Date class, you must first create a Date object using the constructor for the Date class

getDate(), getDay(), getFullYear(), getHours(), getMilliseconds(), getMinutes(), getMonth(), getSeconds(), getTime(), getTimezoneOffset(), getUTCDate(), getUTCDay(), getUTCFullYear(), getUTCHours(), getUTCMilliseconds(), getUTCMinutes(), getUTCMonth(), getUTCSeconds(), getUTCYear(), getYear(), setDate(date:Number), setFullYear(year:Number, [month:Number], [date:Number]), setHours(hour:Number), setMilliseconds(millisecond:Number), setMinutes(minute:Number), setMonth(month:Number, [date:Number]), setSeconds(second:Number), setTime(millisecond:Number), setUTCDate(date:Number), setUTCFullYear(year:Number, [month:Number], [date:Number]), setUTCHours(hour:Number, [minute:Number], [second:Number], [millisecond:Number]), setUTCMilliseconds(millisecond:Number), setUTCMinutes(minute:Number, [second:Number], [millisecond:Number], setUTCMonth(month:Number, [date:Number]), setUTCSeconds(second:Number, [millisecond:Number]), setYear(year:Number), toString(), UTC(year:Number, month:Number, [date:Number], [hour:Number], [minute:Number], [second:Number], [millisecond:Number]), valueOf()