Jam Analog
Pada kali ini kita akan mempelajari cara membuat sebuah jam
analog. Tampilan jam analog yang akan kita buat di sini masih sederhana. Anda
dapat mengembangkannya dengan memperbaiki bagian grafiknya. Sehingga nantinya
jam akan terlihat lebih bagus lagi.
Pertama-tama buatlah background pada layer 1 sesuai dengan
keinginan anda (Anda bisa memilih warna background, ataupun menambahkan
tulisan), seperti gambar di bawah ini:
Kemudian tambahkan layer dan buatlah sebuah gambar seperti
di bawah ini. Saya menggunakan gambar jam analog png dari google, anda juga dapat menggunakan Rectangle tool (Oval), text tool, dan
panel transform untuk membuatnya
Untuk garisnya saya akan membuat ukurannya seperti ini :
garis jam lebih pendek dari garis menit, garis menit lebih pendek dari garis
detik, garis detik lebih panjang dari garis jam dan menit. Anda dapat mengubah
ukurannya sesuai keinginan anda
Buatlah tiga buah garis seperti gambar di bawah ini:
Seleksi garis yang paling kecil, kemudian tekan F8. Pada
panel yang muncul masukkan jam_mc dan movie clip sebagai type serta pastikan
titik registrationnya berada di tengah bagian bawah lalu tekan ok
Seleksi movie clip jam_mc di stage kemudian tekan Ctrl+F3.
Pada panel properties yang muncul masukkan jam_mc sebagai instance name
Seleksi garis kedua (garis yang tidak terlalu panjang),
kemudian tekan F8. Pada panel yang muncul masukkan menit_mc dan movie clip
sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah
lalu tekan ok
Seleksi movie clip menit_mc di stage kemudian tekan Ctrl+F3.
Pada panel properties yang muncul masukkan menit_mc sebagai instance name
Seleksi garis ketiga (garis yang tidak terlalu panjang),
kemudian tekan F8. Pada panel yang muncul masukkan detik_mc dan movie clip
sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah
lalu tekan ok
Seleksi movie clip detik_mc di stage kemudian tekan Ctrl+F3.
Pada panel properties yang muncul masukkan detik_mc sebagai instance name
Letakan movie clip jam_mc di tengah lingkaran yang
kita buat sebelumnya
Selanjutnya letakan movie clip menit_mc di tengah
lingkaran (ditempat yang sama movie clip jam_mc berada)
Lalu letakan juga movie clip detik_mc di tengah
lingkaran (ditempat yang sama movie clip jam_mc dan menit_mc berada)
Setelah semuanya terpasang, klik frame 1 dan tekan F9. Pada
panel actions yang muncul masukkan script berikut :
1 //perintah yang dijalankan ketika frame dimainkan
2 onEnterFrame = function () {
3 //membuat variable waktu sebagai date object
4 waktu = new Date();
5 //membuat variable jam dengan nilai sama dengan jam pada komputer
6 jam = waktu.getHours();
7 //membuat variable menit dengan nilai sama dengan menit pada komputer
8 menit = waktu.getMinutes();
9 //membuat variable detik dengan nilai sama dengan detik pada komputer
10 detik = waktu.getSeconds();
11 //digunakan jika komputer menggunakan sistem 12 jam
12 //jika nilai variable jam lebih dari 12 maka akan dikurangi 12
13 if (jam>12) {
14 jam -= 12;
15 }
16 //movie clip jam_mc akan berotasi sesuai nilai variable jam dikali 30
yang ditambah
17 nilai variable menit di bagi 2
18 jam_mc._rotation = jam*30+(menit/2);
19 //movie clip jam_mc akan berotasi sesuai nilai variable menit dikali 6
20 menit_mc._rotation = menit*6;
21 //movie clip detik_mc akan berotasi sesuai nilai variable detik dikali
6
22 detik_mc._rotation = detik*6;
23 };
Tekan Ctrl+Enter untuk melihat hasilnya.
