Senin, 25 Februari 2013

Animasi Flash- Membuat Jam Analog

Dalam membuat media pembelajaran maupun game edukasi, biasanya Tim Gardu Media menambahkan asessoris untuk mempercantik tampilan. Asessoris yang sering dibuat adalah jam digital. Namun, untuk kali ini kita akan belajar bersama untuk membuat jam analog.
Yuk, mari!

1. Buatlah flash document.
2. Buatlah sebuah gambar seperti di bawah ini. Kita bisa menggunakan oval tool, text tool, dan panel transform untuk membuatnya.


[Image: 537441_2752832397957_1332137249_n.jpg]

3. Untuk jarum jam, kita akan membuat ukurannya sama seperti jam dinding kita: jarum jam terpendek, jarum menit paling panjang, jarum detik panjang tipis.
4. Buatlah tiga buah garis seperti gambar di bawah ini :

[Image: 398160_2752832517960_521645625_n.jpg]

5. Seleksi garis yang paling kecil, kemudian tekan F8 (Klik Kanan --> Convert to Symbol). Pada panel yang muncul masukkan jam_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan OK

[Image: 530612_2752832597962_893018420_n.jpg]

6. Seleksi movie clip jam_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul kita masukkan jam_mc sebagai instance name.
7. Seleksi garis kedua (garis yang tidak terlalu panjang), kemudian tekan F8. Pada panel yang muncul kita masukkan detik_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan OK.
8. Seleksi movie clip detik_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul kita masukkan detik_mc sebagai instance name.
9. Seleksi garis ketiga (garis yang paling panjang), kemudian tekan F8. Pada panel yang muncul kita masukkan menit_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan OK.
8. Seleksi movie clip menit_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul kita masukkan menit_mc sebagai instance name.
9. Letakan movie clip jam_mc di tengah lingkaran yang kita buat sebelumnya, disusul movie clip menit_mc ditempat yang sama movie clip jam_mc, lalu kita letakkan juga movie clip detik_mc ditempat yang sama movie clip jam_mc dan menit_mc berada. Kira-kira tampilannya menjadi seperti ini:

[Image: 601286_2752832797967_1116094857_n.jpg]

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

code;
//perintah yang dijalankan ketika frame dimainkan
onEnterFrame = function () {
    //membuat variable
    waktu = new Date();
    jam = waktu.getHours();
    menit = waktu.getMinutes();
    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;
    }
    //animasi movieclip
    jam_mc._rotation = jam*30+(menit/2);
    menit_mc._rotation = menit*6;
    detik_mc._rotation = detik*6;
};


11. Tekan Ctrl+Enter untuk melihat hasilnya.