Kali ini, kita akan cuba hasilkan contoh jam digital beserta tarikh semasa dengan Adobe Flash CS3. Hasilnya nanti bolehlah digunakan untuk menambahkan seri laman web anda mengikut kreativiti dan tema yang anda kehendaki.
1. Melukis Latarbelakang
Langkah pertama ialah dengan mengimport imej latarbelakang yang telah siap atau rekabentuk latarbelakang dengan tool Flash itu sendiri. Untuk tutorial ini, kita gunakan ruangan Stage dengan luas 300 pixel x 200 pixel. Kemudian dengan tool Rectangle, hasilkan segiempat tepat mengikut saiz yang sesuai. mengikut selera anda. Pastikan saiz segiempat tepat berkenaan boleh memuatkan 2 kotak dalam Stage.
Seterusnya, jadikan segiempat tepat berkenaan sebagai Movie clip dengan klik pada menu Modify, dan pilih dari senari berkenaan Convert to Symbol… (F8). Apabila tetingkap Convert to Symbol dibuka, anda namakan ia Latarbelakang dan pilih titik Registration di tengah-tengah.
Apabila selesai, klik butang OK. Jika diperhatikan, pada tetingkap Library, akan wujud satu Movie clip bernama Latarbelakang beserta imej segiempat yang kita hasilkan tadi.
Selain itu, perhatikan pada Layer1 dalam tetingkap Timeline, akan nama Layer1 berkenaan akan menjadi Latarbelakang.
Seterusnya, gunakan Movie clip Latarbelakang ini untuk membina 2 segiempat tepat pada Stage dengan drag Movie clip Latarbelakang tadi ke Stage. Susun aturkan mengikut citarasa anda seperti berikut.
2. MeletakkanTeks Latar
Sebelum kita memasukkan teks dalam Stage, seeloknya kita tambahkan layer pada Timeline untuk memudahkan pengurusan suntingan. Namakan layer-layer selain Latarbelakang tadi kepada Teks Waktu dan Skrip seperti berikut.
Kemudian, kunci atau Lock layer Latarbelakang terlebih dahulu sebelum kita letakkan teks dengan klik pada titik yang selari dengan gambar mangga. Klik pada layer Teks Waktu terlebih dahulu dan sekarang anda boleh gunakan Text Tool untuk meletakkan teks pada Stage.
Terdapat dua jenis teks yang akan kita gunakan iaitu Static Text dan Dynamic Text. Kita gunakan Static Text untuk meletakkan tajuk dan lain-lain teks yang kekal pada kotak yang berada pada Stage tadi seperti berikut.
Pastikan pada Properties, ditulis seperti berikut.
Penggunaan Dynamic Text pula adalah untuk menunjukkan teks yang boleh berubah berdasarkan kod ActionScript yang mewakilinya. Ini sangat sesuai untuk menunjukkan waktu jam, minit dan saat yang sentiasa berubah mengikut waktu semasa. Selain itu, tarikh juga sangat sesuai menggunakan Dynamic Text.
Gunakan Text Tool yang sama, tapi kali ini ubah pada Properties sebagai Dynamic Text dan susun teks-teks dynamic berkenaan seperti berikut.
Namakan setiap teks berkenaan mengikut susunan pada Stage berkenaan didalam Properties seperti nama-nama berikut iaitu jam_txt, minit_txt, saat_txt dan ampm_txt. Jangan lupa letakkan juga tarikh_txt pada Dynamic Text yang berada pada kotak TARIKH HARI INI. Sebagai contoh, pada Dynamic Text pertama, kita telah namakan jam_txt dalam Properties seperti ilustrasi dibawah.
3. Memasukkan Kod ActionScript 3.0
Jam digital ini tidak boleh bergerak tanpa engine yang menjalankannya. Disinilah pentingnya ActionScript untuk menentukan waktu dan tarikh semasa yang terdapat dalam komputer anda. Sekarang, pada layer Skrip, pada frame pertama dalam Timeline, klik kanan-mouse, dan pilihlah Actions.
Sebuah tetingkap Action-Frame akan keluar, dan anda boleh masukkan kod seperti berikut.
4. Menguji Aplikasi
Apabila selesai memasukkan kod, tutup tetingkap Actions-Frame berkenaan. Uji aplikasi ini dengan menekan butang Ctrl+Enter serentak. Ini akan menyebabkan Flash membina fail SWF dan terus memainkan Movie clip anda. Hasilnya mungkin kelihatan seperti berikut.
Nampaknya anda telah berjaya menghasilkan jam digital beserta tarikh yang ringkas. Gunakan imaginasi anda untuk menambahkan beberapa fungsi lain berkaitan. Sampai disini sahaja tutorial kali ini dan diharap anda mendapat manfaat untuk menghasilkan jam digital flash anda yang pertama. Selamat maju jaya!
