Kamis, 15 Desember 2016

Jam Analog | Tutorial Adobe Flash CS3 Profesional

Kali ini gue akan sharing tutorial cara membuat sebuah jam analog. Tampilan jam analog sini sih masih sederhana yah gengs... Tapiii.. lo bisa ngembanginnya sendiri dengan memperbaiki bagian grafiknya. Sehingga nantinya jam akan terlihat lebih bagus lagi.
Okay langsung saja ikuti langkah berikut:
  1. Buatlah flash document.
  2. Buatlah sebuah gambar seperti di bawah ini. Lo bisa menggunakan oval tool, text tool, dan panel transform untuk membuatnya. Atau lo juga bisa masukan gambar yang sudah ada dari library.




     3.  Untuk garisnya kita akan membuat ukurannya seperti ini:
-        garis detik lebih panjang dari garis menit, (warna kuning)
-        garis menit lebih panjang dari garis jam, (warna merah)
-        garis jam lebih pendek dari garis menit (warna hitam).
Buatlah tiga buah garis seperti gambar di bawah ini :
     4.  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. lakukan seperti gambar berikut:

     5.  Seleksi movie clip jam_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan jam_mc sebagai instance name
     6.  Seleksi garis kedua (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.
     7.  Seleksi movie clip detik_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan detik_mc sebagai instance name.
     8.  Seleksi garis ketiga (garis yang paling 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.
     9.  Seleksi movie clip menit_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan menit_mc sebagai instance name.
    10. Letakan movie clip jam_mc, detik_mc, dan menit_mc di tengah lingkaran yang kita buat sebelumnya.
    11. Setelah semuanya terpasang, klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :



onEnterFrame = function () {
               waktu = new Date () ;
               jam = waktu.getHours();
               menit = waktu.getMinutes();
               detik = waktu.getSeconds();
               if (jam>12) {
                               jam -= 12;
               }
               jam_mc._rotation = jam*30+(menit/2);
               menit_mc._rotation = menit*6;
               detik_mc._rotation = detik*6;
};

12. Tekan Ctrl+Enter untuk melihat hasilnya. 


Happy Trying Guys :)

Tidak ada komentar:

Posting Komentar