Saya
akan berbagi sedikit pengalaman saya pada Jam yang akan kita bahas ini.
Pernahkah anda memasuki sebuah situs baik itu blog maupun website yang
menampilkan sebuah Jam Analog yang memiliki animasi yang berbeda-beda,
atau anda kenal kenal situs yang bernama clocklink.com. Situs tersebut
menawarkan animasi-animasi jam analog yang dapat kita peroleh source
html codenya dan kita letakkan di blog maupun website kita. Yang saya
tidak sukai dari beberapa situs yang menawarkan aksesoris jam tersebut
adalah mereka memberikan iklan tentang situs baik sekedar teks maupun
saat cursor mouse berada di area hit jam tersebut.
Yang
saya ketahui jam analog tersebut di buat menggunakan sofware flash.
Kemudian saya mencari tahu apa kita bisa membuat Jam Analog Digital kita
sendiri lewat internet dan beberapa tutorial yang diberikan dan
ternyata memang banyak tutorial-tutorial sejenis yang memiliki beberapa
kesamaan tema, Anda ingin mencoba membuat Jam Analog Digital sendiri
anda bisa mengikuti tanpa harus mengikuti tutorial saya 100% dalam
membuat jam anda sendiri.
Baik anda dapat memulai mengatur ukuran stage kira-kira sebesar 150x150 pixel,
dapat anda sesuaikan dengan keperluan anda. Lalu gambar di stage
menggunakan line tool, untuk detik, menit, dan jam. Sesuaikan dengan
kebutuhan anda.
Covert
shape tersebut menjadi movie clip (F8), beri intance name untuk jarum
detik menjadi “detik_mc”, jarum menit menjadi“menit_mc”, dan jarum jam
menjadi “jam_mc”. Jangan lupa atur letak registrasi point tepat dititik
rotasi bawah jarum, ini penting karena ini yang menjadi titik rotasi
perputaran jarum.Setelah
anda berhasil membuat ketiga jarum jam menjadi movie clip dan
memberikan instance point dan mengatur letak registrasi point anda dapat
mengatur susunan jarum jamnya menjadi seperti di bawah ini.
Setelah
anda menyusun susunan jarum jam inilah saatnya kita memasukkan action
script pada frame pertama, tentunya dengan layer yang terpisah dengan
jarum maupun background jam agar terlihat rapi. Tekan F9 untuk
memunculkan Action Script bar dan massukkan script di bawah ini.
//membuat variabel Date object
tanggal = new Date();
//rotasi movieclip "jam_mc"
jam_mc._rotation = tanggal.getHours()*30+(tanggal.getMinutes()/2);
//rotasi movieclip "menit_mc"
menit_mc._rotation = tanggal.getMinutes()*6+(tanggal.getSeconds()/10);
//rotasi movieclip "detik_mc"
detik_mc._rotation = tanggal.getSeconds()*6;
};
Untuk selanjutnya anda dapat menambahkan background jam yang anda inginkan dengan menyisipkan moviclip untuk animasi berulang, atau sekedar menggambar pola jam analog biasa saja anda dapat menambahkan action script wmode="transparent" untuk membuat animasi yang transparant pada halaman web. Akhir kata selamat berkreasi.
0 comments:
Posting Komentar