Jumat, 20 April 2012

Jam Dinding Flash

Materi kali ini adalah Jam Dinding Flash , dengan sedikit bantuan action script tutorial ini akan menjadi sangat mudah.

Langkah - langkahnya sbb:
1. Buka Program Flash
Start >> All Program >> Flash , pilih flash dokumen


2. Buat lingkaran Gunakan
oval tool (shortcut tombol: O), tips: tekan dan tahan tombol shift pada keyboard agar lingkaran bulat sempurna
image ilmugrafis



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
image ilmugrafis



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

garis jam (pendek) , garis menit (agak panjang) , garis detik (panjang)
image ilmugrafis

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.
image ilmugrafis

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.
image ilmugrafis


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

image ilmugrafis


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

image ilmugrafis


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:
image ilmugrafis

Animasinya bisa diexport dalam bentuk flash movie dengan cara klik File >> Export movie, beri nama dan pilih format swf

Terima kasih, Selamat belajar

Semoga Bermanfaat


sumber : Ilmugrafis.com

Tidak ada komentar:

Posting Komentar