Meletakkan jam pada laman web merupakan salah satu daripada kemestian pada masa kini. Kebanyakan laman web yang “baik” akan menunjukkan waktu malahan tarikh dan hari terkini untuk memudahkan sesiapa sahaja yang melawatnya. Dalam tutorial kali ini, kita akan membina sebuah Jam Analog yang ringkas dan berfungsi sepenuhnya mengikut waktu komputer anda.
1. Melukis Latar Jam
Buka fail Flash format AS3.0 yang baru. Pada menu Modify pilih Document (Ctrl+J). Tetingkap Document Properties berikut akan dipaparkan. Tetapkan nama dan saiz dokumen ini iaitu dengan dimension 300 (width) dan 300 (height). Klik butang OK bila selesai.
Klik pada butang Oval pada panel Tools untuk melukis bulatan dengan ukuran 250 pixel x 250 pixel. Hasilkan bulatan seperti dalam ilustrasi dibawah.
Pastikan pada Properties bar yang berada dibawah Stage menunjukkan saiz bulatan dan juga kedudukannya di atas Stage seperti berikut.
Seterusnya, ubah bulatan berkenaan menjadi Movie clip dengan klik bulatan tadi terlebih dahulu. Pada menu Modify, pilih Convert to Symbol… (F8) dan satu tetingkap akan dipaparkan. Namakan simbol berkenaan Latarbelakang dan klik pada tengah-tengah Registration seperti ilustrasi berikut.
Selesai sahaja, klik butang OK. Jika anda perhatikan, didalam ruangan Library, akan muncul fail Movie clip bernama Latarbelakang. Selain itu, pada ruangan Timeline pula, Layer1 akan bertukar kepada nama Latarbelakang seperti berikut.
2. Melukis Jarum Jam
Kita sedia maklum sebuah jam analog memiliki 3 jarum penting yang masing-masing menunjukkan saat, minit dan jam. Oleh itu, apa yang perlu kita lakukan sekarang ialah dengan menambah sebanyak 4 lagi Layer selepas layer Latarbelakang sebelum ini. Hasilkan layer-layer berkenaan dan namakan mengikut turutan dengan nama Jam, Minit, Saat dan Skrip seperti dalam ilustrasi berikut.
Sebelum kita melukis jarum jam, seeloknya kita mengunci terlebih dahulu layer Latarbelakang dengan klik pada titik yang selari dengan icon Lock (gambar mangga). Selanjutnya, kita mulakan melukis jarum untuk layer Jam terlebih dahulu. Klik pada layer Jam seperti ilustrasi berikut.
Gunakan tool Rectangle yang berbentuk segiempat pada bar Tools untuk melukis jarum jam. Untuk tutorial ini, kita tetapkan saiz jarum berkenaan 15 (Width) dan 80 (Height). Ubah segiempat berkenaan menjadi Movie clip dengan klik menu Modify, pilih Convert to Symbol… (F8) dan satu tetingkap akan dipaparkan. Seperti proses sebelum ini namakan Movie clip berkenaan Jam dan letakkan titik Registration pada kedudukan tengah dan bawah.
Hasilnya mungkin kedudukan segiempat berkenaan seperti berikut.
Jika diperhatikan, layer Latarbelakang yang menunjukkan imej bulatan sebelum ini tidak berganjak kerana kita telah mengunci layer berkenaan sebelum ini. Untuk memastikan kedudukan jarum jam ditengah-tengah bulatan dan Stage, gunakan Align tool. Jika tool berkenaan tidak kelihatan pada skrin anda, bolehlah klik pada menu Window dan pilih Align (Ctrl+K).
Anda boleh menjajarkan (align) ke tengah-tengah stage dengan memilih icon kedua Align. Pastikan icon To stage diaktifkan terlebih dahulu. Jika anda klik pada jarum jam berkenaan, namakan jarum_jam pada ruangan Properties seperti berikut.
Ulangi proses yang sama untuk menghasilkan jarum Minit dan Saat. Jarum minit tetapkan dengan saiz 10 pixel x 100 pixel dan jarum saat bersaiz 3 pixel x 115 pixel. Pastikan Properties untuk Movie clip masing-masing dinamakan jarum_minit dan jarum_saat masing-masing.
Jika kita lihat pada ruangan Library, pastinya senarai Movie clip kita akan kelihatan seperti berikut.
Manakala di atas Stage pula, jarum-jarum akan kelihatan bertindih dan akan kelihatan seperti berikut.
3. Memasukkan Skrip AS 3.0
Setelah selesai dengan rekabentuk latarbelakang dan jarum-jarum jam, kita akan memasukkan pula sedikit Actionscript 3.0 untuk membolehkan jam ini berfungsi. Di dalam ruangan Timeline, terdapat satu layer yang telah kita hasilkan sebelum ini iaitu Skrip.
Pada garisan pertama layer Skrip dalam Timeline berkenaan klik kanan-mouse dan pilih Actions. Sebuah Action-Frame akan dipaparkan untuk kita memasukkan kod yang diperlukan. Fungsinya ialah supaya skrip berkenaan akan dilaksanakan apabila frame berkenaan diaktifkan. Salin kod seperti berikut.
Penerangan ringkas skrip AS3.0 mengikut baris:
- BARIS 1: Memanggil fungsi bernama gerakJam.
- BARIS 2: -
- BARIS 3: Fungsi yang dinamakan gerakJam.
- BARIS 4: Membuka gelungan fungsi gerakJam.
- BARIS 5: Pembolehubah tarikh. Tarikh disamakan dengan tarikh semasa.
- BARIS 6: Pembolehubah jam untuk menyimpan waktu dalam bentuk jam.
- BARIS 7: Pembolehubah minit untuk menyimpan waktu dalam bentuk minit.
- BARIS 8: Pembolehubah saat untuk menyimpan waktu dalam bentuk saat.
- BARIS 9: Pembolehubah milisaat untuk menyimpan waktu dalam bentuk milisaat.
- BARIS 10: -
- BARIS 11: Memutar movieclip jarum_saat mengikut formula.
- BARIS 12: Memutar movieclip jarum_minit mengikut formula.
- BARIS 13: Memutar movieclip jarum_jam mengikut formula.
- BARIS 14: Menutup gelungan fungsi gerakJam.
Jarum-jarum jam, minit dan saat perlu membuat pusingan lengkap sebuah bulatan sebanyak 360 darjah. Oleh itu dalam formula saat, 1 saat diwakili oleh 6 darjah iaitu 360 dibahagi 60 (angka 60 digunakan kerana 1 minit bersamaan 60 saat).
4. Menguji Movie
Kita telah sampai ke peringkat terakhir iaitu menguji jam analog berkenaan. Klik pada menu Control dan pilih Test Movie (Ctrl+Enter). Hasilnya sudah pasti memuaskan hati anda, bukan? Mungkin sedikit sebanyak kelihatan seperti berikut.
Anda mungkin boleh mengubahsuai jam analog ini dengan menambah dan menukar pada grafik yang lebih cantik sama ada latarbelakang mahupun jarum jam itu sendiri mengikut kreativiti masing-masing. Selamat berjaya!!!
