[Tutorial] Adobe Flash CS3: Rekabentuk Jam Digital

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!

Read More......

[Tutorial] Adobe Flash CS3: Kawalan Dalam Permainan 2D (Bahagian 2)

1. Pengenalan

Sebelum ini, dalam Bahagian 1 telah dijelaskan bagaimana membina kawalan menggunakan kekunci anak panah terhadap pergerakan sesuatu objek dalam persekitaran 2-dimensi. Kali ini, kita cuba pula menggunakan kawalan tetikus (mouse). Lazimnya penggunaan tetikus untuk mengawal sesuatu objek kerap digunakan dalam permainan puzzle dan sebagainya. Ia boleh digunakan untuk memberikan wajah baru pada cursor semasa dalam permainan atau menggerakkan arah objek itu sendiri.

2. Membina Movie clip Objek

Dalam contoh ini, kita boleh gunakan aset yang sama dalam Bahagian 1 iaitu penggunaan kapal terbang biru sebagai objek untuk dikawal. Jadikan objek ini Movie clip terlebih dahulu dengan klik menu Modify, dan pilih Convert to Symbol…(F8). Namakan Movie clip ini jetHero dan klik butang OK. Jika dilihat pada Library akan wujud Movie clip baru bernama jetHero.

Pada Stage, pastikan dalam ruangan Properties anda namakan Instance Name sebagai jetHero juga seperti dalam ilustrasi berikutnya.

Berikutnya, tambah satu layer pada tetingkap Timeline dan namakan Skrip. Namakan juga layer pertama tadi dimana Movie clip kita berada sebagai Hero (atau mana-mana nama yang anda sukai).

3. Membina Enjin Kawalan Tetikus Dengan AS3.0

Seterusnya, kita akan memasukkan kod-kod ActionScript 3.0 ke dalam aplikasi ini yang seumpama enjin yang akan menggerakkan Movie clip jetHero berkenaan. Pada layer Skrip yang telah kita tambah tadi, pada frame pertama, klik kanan-mouse dan pilih Actions. Sebuah tetingkap Action-Frame akan dipaparkan, dan tulislah kod seperti berikut.

Baris 1 akan menyebabkan cursor sedia ada disembunyikan namun pergerakan dan aktiviti cursor tetap wujud. Baris 4 hingga 21 merupakan fungsi yang menggerakkan kapal terbang biru seiring dengan pergerakan cursor oleh pengguna. Perhatikan penggunaan mouseX dan mouseY untuk mengesan lokasi cursor semasa dalam sistem koordinat.

4. Menguji Movie

Setelah selesai memasukkan kod ActionScript 3.0, kita bolehlah menguji Movie dengan menekan kekunci Ctrl+Enter serentak atau pergi ke menu Control dan pilih Test Movie. Apabila movie dimainkan, mungkin hasilnya seperti berikut.

Hasilnya, sebuah kapal terbang yang bergerak mengikut kedudukan tetikus. Anda boleh ubahsuai objek berkenaan dengan menggantikannya dengan gambar anakpanah yang menarik untuk memberi wajah baru cursor Flash anda. Gunakan kreativiti anda untuk menggunakan pergerakan dengan tetikus ini dalam laman web Flash lain selain dari kegunaan untuk permainan.

Read More......

[Tutorial] Adobe Flash CS3: Kawalan Dalam Permainan 2D (Bahagian 1) 1. Pengenalan

1. Pengenalan

Setiap permainan komputer perlukan pemain untuk mengawalnya. Kali ini mari kita kaji asas kawalan dalam persekitaran 2-dimensi dalam Flash. Tidak dapat dinafikan terdapat berbagai-bagai jenis permainan dengan pelbagai jenis kawalan sama ada menggunakan papan kekunci (keyboard) mahupun tetikus (mouse). Biasanya, pemain boleh mengawal sesuatu objek dalam permainan contohnya permainan tembak-menembak memerlukan seseorang mengawal kapal angkasa untuk mencapai sesuatu objektif atau misi. Dalam proses ini juga pemain akan dicabar banyak jenis musuh dan juga halangan-halangan lain.

Dalam persekitaran 2-dimensi, terdapat 360 arah (satu bulatan sama dengan 360 darjah) yang boleh diguna untuk mengarah sesuatu objek. Biasanya pemain boleh mengawal 4, 8 atau lebih arah misalnya kapal terbang yang dikawal dari perspektif atas boleh mengarah ke atas, bawah, kiri atau kanan.

2. Sistem Koordinat Cartesian

Saya percaya anda tentu pernah belajar sistem koordinat Cartesian dalam matapelajaran matematik semasa di zaman persekolahan. Sistem yang sama akan digunapakai pada sesebuah Stage dalam Flash itu sendiri. jika anda membuka aplikasi Adobe Flash dan menetapkan saiz sesebuah Stage, maka anda sebenarnya menetapkan paksi-x dan paksi-y dalam sistem koordinat berkenaan. Sebagai mengingatkan semula pelajaran matematik anda, paksi-x mewakili garisan melintang (horizontal), manakala paksi-y mewakili garisan menegak (vertical).

Dalam Flash, ada sedikit perbezaan. Sebagai contoh, katakan kita setkan saiz dokumen 300 pixel x 300 pixel, kedudukan koordinat penjuru setiap sisi adalah seperti dalam ilustrasi berikut.

Sekiranya objek anda berada pada kedudukan paksi-x=0 dan paksi-y=0, maka objek berkenaan akan berada pada kedudukan penjuru kiri atas Stage berkenaan. Oleh itu, dalam Flash atau secara spesifiknya AS3.0, anda boleh menggerakkan objek berkenaan:

• ke kiri dengan menolak nilai pada paksi-x
• ke kanan dengan menambah nilai pada paksi-x
• ke atas dengan menolak nilai pada paksi-y
• ke bawah dengan menambah nilai pada paksi-y

3.Membina Movie clip Objek

Sebagai menguji pergerakan asas dalam persekitaran 2D, sekarang kita akan cuba hasilkan satu program ringkas iaitu sebuah objek dan kita cuba gerakkan dengan kekunci anakpanah pada papan kekunci anda. Anda boleh gunakan apa sahaja objek ringkas, dalam kes ini saya akan gunakan imej kapal terbang biru yang bersaiz 50 pixel x 50 pixel seperti berikut.

Selanjutnya, kita perlu jadikan objek ini Movie clip terlebih dahulu dengan klik menu Modify, dan pilih Convert to Symbol…(F8). Namakan Movie clip ini jetHero dan klik butang OK. Jika dilihat pada Library akan wujud Movie clip baru bernama jetHero.

Pada Stage, pastikan dalam ruangan Properties anda namakan Instance Name sebagai jetHero juga seperti dalam ilustrasi berikutnya.

Berikutnya, tambah satu layer pada tetingkap Timeline dan namakan Skrip. Namakan juga layer pertama tadi dimana Movie clip kita berada sebagai Hero (atau mana-mana nama yang anda sukai).

4. Membina Enjin Kawalan Pergerakan 2D Dengan AS3.0

Seterusnya, kita akan memasukkan kod-kod ActionScript 3.0 ke dalam aplikasi ini yang seumpama enjin yang akan menggerakkan Movie clip jetHero berkenaan. Pada layer Skrip yang telah kita tambah tadi, pada frame pertama, klik kanan-mouse dan pilih Actions. Sebuah tetingkap Action-Frame akan dipaparkan, dan tulislah kod seperti berikut.

Dari baris kod 1 hingga 4, kita akan menetapkan pembolehubah (variable) jenis Boolean untuk pergerakan ke bawah, atas, kanan dan kiri. Pembolehubah Boolean hanya memiliki 2 keputusan iaitu true atau false sahaja.  Baris kod 5 pula, kita menetapkan pembolehubah lajuHero untuk mengawal kelajuan jetHero nanti. Kelajuan yang telah disetkan dalam kod ini ialah 5.

Baris kod 7 akan menjalankan fungsi (function) gerakHero apabila aplikasi memasuki frame. Baris kod 10 hingga 21 ialah ketetapan paksi-x dan paksi-y sama ada bertambah atau berkurang dengan menggunakan pembolehubah lajuHero apabila arah jetHero diubah.

Perhatikan juga dari baris kod 23 hingga 35 yang menghadkan kedudukan jetHero apabila  ia bergerak sampai ke penjuru paling atas, paling bawah, paling kiri dan paling kanan Stage.

Baris kod 37 mengarahkan listener supaya sebarang kejadian pemain menekan kekunci pada papan kekunci akan mengaktifkan fungsi tekanButang. Perhatikan dalam baris kod 40, kekunci anak panah ke bawah menggunakan keyCode 37. manakala kekunci huruf S menggunakan keyCode 65.

Ini bermakna sebarang perbuatan menekan kekunci anak panah bawah atau huruf S akan menyebabkan listener ini diaktifkan, seterusnya mengubah nilai Boolean pada pembolehubah arah_Bawah kepada true. Begitu juga halnya lain-lain kekunci yang telah disetkan. Secara umumnya keyCode yang kita gunakan:

• keyCode 37 = kekunci anak panah bawah
• keyCode 38 = kekunci anak panah atas
• keyCode 39 = kekunci anak panah kanan
• keyCode 40 = kekunci anak panah kiri

• keyCode 65 = kekunci huruf S
• keyCode 87 = kekunci huruf W
• keyCode 68 = kekunci huruf D
• keyCode 83 = kekunci huruf A

Ini bermakna pemain boleh menggunakan kekunci anak panah bawah, atas, kanan dan kiri untuk mengawal jetHero. Selain itu, pemain juga boleh menggunakan kekunci huruf S (ke bawah), huruf W (ke atas), huruf D (ke kanan) dan huruf A (ke kiri).

Baris kod 54 mengarahkan listener supaya sebarang kejadian pemain melepaskan kekunci pada papan kekunci akan mengaktifkan fungsi lepasButang. Sepertimana fungsi tekanButang, fungsi lepasButang ini akan mengaktifkan Booelan untuk setiap pembolehubah yang dikesan kepada false. Sebagai contoh, apabila pemain melepaskan kekunci anak panah bawah, maka fungsi ini teraktif dan menyebabkan pembolehubah dinyahaktifkan. Ini secara langsung akan menyebabkan pergerakan jetHero berhenti.

5. Menguji Movie

Setelah selesai memasukkan kod ActionScript 3.0, kita bolehlah menguji Movie dengan menekan kekunci Ctrl+Enter serentak atau pergi ke menu Control dan pilih Test Movie. Apabila movie dimainkan, mungkin hasilnya seperti berikut.

Gunakan kekunci yang telah kita setkan sebelum ini dan anda akhirnya boleh mengawal pergerakan jetHero berkenaan dengan mudahnya dalam persekitaran 2-dimensi. Jika anda membuat ujian lebih lanjut, jetHero boleh dikawal dalam 8 arah yang berasingan. Jadi, inilah antara konsep asas yang telah menjadi nadi untuk kebanyakan kawalan dalam permainan komputer.

Read More......

[Tutorial] Adobe Flash CS3: Rekabentuk Jam Analog

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:

1. BARIS 1: Memanggil fungsi bernama gerakJam.
2. BARIS 2: -
3. BARIS 3: Fungsi yang dinamakan gerakJam.
4. BARIS 4: Membuka gelungan fungsi gerakJam.
5. BARIS 5: Pembolehubah tarikh. Tarikh disamakan dengan tarikh semasa.
6. BARIS 6: Pembolehubah jam untuk menyimpan waktu dalam bentuk jam.
7. BARIS 7: Pembolehubah minit untuk menyimpan waktu dalam bentuk minit.
8. BARIS 8: Pembolehubah saat untuk menyimpan waktu dalam bentuk saat.
9. BARIS 9: Pembolehubah milisaat untuk menyimpan waktu dalam bentuk milisaat.
10. BARIS 10: -
11. BARIS 11: Memutar movieclip jarum_saat mengikut formula.
12. BARIS 12: Memutar movieclip jarum_minit mengikut formula.
13. BARIS 13: Memutar movieclip jarum_jam mengikut formula.
14. 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!!!

Read More......