Membuat Jam Dinding

Adhitya warman Thu Apr 19, 2012 4:59 am

Tik tok tik tok, sambil menunggu waktu berbuka puasa lebih baik kita belajar animasi dengan Flash. Pada Tutorial Flash kali ini kita akan mencoba membuat jam dinding sederhana. Penasaran cara membuatnya? mari kita belajar bersama di IlmuGrafis

Langkah - langkahnya sbb:

1.
Buka Program Flash
Start >> All Program >> Flash , pilih flash dokumen
disini penulis menggunakan Flash MX 2004 namun tutorial ini bisa diterapkan di Adobe Flash versi berapapun termasuk Flash CS5

2. Buat lingkaran Gunakan

oval tool (shortcut tombol: O), tips: tekan dan tahan tombol shift pada keyboard agar lingkaran bulat sempurna
Membuat Jam Dinding 13fl1

3. Ubah warna fill jadi hitam, Gunakan text tool (Short cut tombol : T) dan tulis 1 per 1 nomor jam mulai dari 1 - 12
untuk penomoran angka

gunakan Selection tool untuk meletakkan nomor - nomor tersebut pada bagian jam
Membuat Jam Dinding 13fl2

4. Dengan Line Tool (N) buatlah 3 buah garis untuk penunjuk arah jam

garis jam (pendek) , garis menit (agak panjang) , garis detik (panjang)
Membuat Jam Dinding 13fl3

5. Seleksi garis yang paling pendek dengan selection tool (V) dan tekan F8
muncul jendela dan masukkan jam_mc dan pilih movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.
Membuat Jam Dinding 13fl4

Seleksi movie clip jam_mc di Lembar kerja kemudian tekan Ctrl+F3 untuk
memunculkan panel properties. Pada panel properties yang muncul masukkan
jam_mc sebagai instance name.
Membuat Jam Dinding 13fl5

6. Sama seperti di atas

Seleksi garis kedua (agak 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. Pada panel properties yang muncul masukkan menit_mc sebagai instance name.

7. Sama seperti di atas

Seleksi garis ketiga (paling 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. Pada panel properties yang muncul masukkan detik_mc sebagai instance name.

8. Satukan dan letakkan garis dengan urutan jam lalu menit kemudian detik dan letakkan di dalam tempat jam

Membuat Jam Dinding 13fl6

9. Setelah semuanya terpasang, klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

Membuat Jam Dinding 13fl7

Masukkan code script berikut ini:

//perintah yang dijalankan ketika frame dimainkan
onEnterFrame = function () {
//membuat variable waktu sebagai date object
waktu = new Date();
//membuat variable jam dengan nilai sama dengan jam pada komputer
jam = waktu.getHours();
//membuat variable menit dengan nilai sama dengan menit pada komputer
menit = waktu.getMinutes();
//membuat variable detik dengan nilai sama dengan detik pada komputer
detik = waktu.getSeconds();
//digunakan jika komputer menggunakan sistem 12 jam
//jika nilai variable jam lebih dari 12 maka akan dikurangi 12
if (jam>12) {
jam -= 12;
}
//movie clip jam_mc akan berotasi sesuai nilai variable jam dikali 30 yang ditambah nilai variable menit di bagi 2
jam_mc._rotation = jam*30+(menit/2);
//movie clip jam_mc akan berotasi sesuai nilai variable menit dikali 6
menit_mc._rotation = menit*6;
//movie clip detik_mc akan berotasi sesuai nilai variable detik dikali 6
detik_mc._rotation = detik*6;
};

10. Tekan Ctrl+Enter untuk melihat hasilnya.

kira - kira seperti ini:
Membuat Jam Dinding 13fl8

Animasinya bisa diexport dalam bentuk flash movie dengan cara klik File >> Export movie, beri nama dan pilih format swf
seperti ini:
Tutorial jam Dinding ini Saya Buat Untuk bertujuan agar mudah dipraktikkan oleh pemula yang baru Belajar Flash