@!f! never die !n !T: xampp server

Showing posts with label xampp server. Show all posts

[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!

[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.

[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

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

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.

[Tutorial] JOOMLA EXTENSIONS - Components

Components biasanya dilinkkan dengan Menu dan ia lebih kompleks dari plugin & modules. Kadang2 di dalam Components terkandung Module dan Plugin. Contoh components seperti Forum, Foto Gallery dsbnya.

Menggunakan Component Terpilih

Component yang dipilih ialah PhocaGallery (Galeri Foto)- [ Laman Web ]
1. Download PhocaGallery- [Download]

2. Simpan fail di Desktop.

3. Klik Extension > Install/Uninstall

4. Pilih fail phocagallery dan klik Upload & Install.

5. Setelah berjaya install, dalam skrin phocagallery klik butang Install.

6. Klik Category > New

7. Masukkan maklumat seperti rajah di bawah;

1) Title: Komputer
2) Klik Folder untuk membuat folder 'komputer'. Semua gambar komputer akan diletakkan di sini.

8. Buat satu folder

1) Taip komputer dan klik Create folder.

9. Dalam skrin phocagallery, klik Image

1) Masukkan Title dan pilih category
2) Klik Image

Klik folder komputer dan upload gambar2 komputer ke dalam folder komputer.

10. Klik gambar dan Save. Ulang proses untuk setiap gambar.

Menghubungkan Menu Galeri Foto Dengan PhocaGallery

1. Dalam Admin Control Panel, klik Menus > Menu Utama
2. Klik sub-menu Foto Galleri.

3. Akhir sekali klik Save.
4. Preview laman web dan cuba klik menu Foto Galeri.

[Tutorial] JOOMLA EXTENSIONS - Modules

Modules biasanya diletakkan di posisi kanan, kiri, atas atau bawah laman web. Sebagai contoh modul jam diletakkan di sebelah kanan laman web.

1. Download module jam- [Download]
2. Simpan di Desktop.
3. Login ke Control Panel.
4. Extension > Install & Uninstall
5. Klik Browse dan cari fail jam
6. Klik Upload & Install

Mengaktifkan Module Jam

1. Klik Extension > Module Manager
2. Klik World Time Clock
3. Buat beberapa setting.

1) Tukar tajuk yang sesuai
2) Enable: Yes
3) Position: Right

4) Tukar warna jika perlu
5) Pilih Regional
6) Save atau Reply

4. Simpan dan preview.

[Tutorial] JOOMLA EXTENSIONS

Apa itu Joomla Extension?

Untuk lebih jelas lagi apa itu Extensions, buka laman web rasmi Joomla.
http://extensions.joomla.org/

Simbol 'C' menunjukkan Components.
Simbol 'M' menunjukkan Modules.
Simbol 'P' menunjukkan Plugin/Mambots.
Simbol 'L' menunjukkan Language.

Jadi, extensions dalam Joomla terbahagi kepada 4 iaitu;
1. Components
2. Modules
3. Plugins/Mambots
4. Languages

Dengan extensions ini anda boleh menambah beberapa tambahan yang diperlukan dan sesuai dengan laman web supaya laman web lebih menarik, informatif dan profesional.

Menggunakan Extensions Terpilih: PLUGIN
Plugin biasanya digunakan untuk menambah sesuatu elemen seperti video, foto dsb terus ke dalam artikel. Contohnya plugin AllVideo. Dengan AllVideo anda boleh menambah klip video YouTube terus ke dalam artikel.

1. Buka laman web http://www.joomlaworks.gr/
2. Download AllVideo plugin: Download
3. Simpan fail download di Desktop.

Memasang Plugin

1. Login ke Control Panel.
2. Klik Extensions > Install/Uninstall
3. Klik Browse & cari fail plugin.
4. Klik Upload & Install.
5. Klik AllVideo Documentation untuk melihat cara menggunakan plugin ini.

Mengaktifkan Plugin.

1. Klik Extensions > Plugin Manager
2. Klik AllVideo > Enable > Save.

Menambah AllVideo Plugin ke Dalam Artikel Komputer

Katalah anda ingin menambah klik video IBM Blue Gene, World's Fastest Supercomputer;
.http://www.youtube.com/watch?v=qm_CN1-c1r4

1. Copy klip ID qm_CN1-c1r4
2. Edit artikel Pengenalan Komputer (menu Content > Article Manager)
3. Klik Pengenalan Komputer untuk edit.
4. Tambah tag {youtube}ID{/youtube} iaitu {youtube}qm_CN1-c1r4{/youtube}

5. Simpan dan preview.

[Tutorial] MENAMBAH ISI KANDUNGAN (Teks, Gambar dll)

Menambah isi kandungan berkenaan dengan komputer yang dilinkkan dengan menu Komputer. Anda perlu membuat satu lagi Section dan Category UMUM dan link ke menu Komputer. Login ke Control Panel.

1. Klik Content > Section Manager
2. New > Title: taip Umum
3. Save

1. Klik Content > Category Manager
2. New > Title: taip Umum
3. Pilih Section: Umum
4. Save.

Membuat Artikel
1. Klik Content > Article Manager.
2. Pilih Section: Umum & Category: Umum
3. Klik New

4. Simpan artikel: Klik Save

Link menu Komputer ke artikel Pengenalan Komputer

1. Dalam Control Panel, klik Menu > Menu Utama
2. Klik Komputer > Parameters (Basic) > Section > Umum
3. Save dan preview laman web.

Menambah Imej/Gambar Ke Dalam Artikel

Untuk menambah imej ke dalam artikel, anda perlu upload gambar2 komputer yang berkaitan ke dalam satu folder imej.

1. Dalam Control Panel klik Global Configuration > System
2. Media Setting: Path to Image Folder: images/stories
3. Tukar ke images sahaja
4. Jadi, Media Setting: Path to Image Folder: images
5. Save dan Refresh.

Membuat Folder dan Upload Gambar
1. Dalam Control Panel, klik Media Manager atau Site > Media Manager
2. Buat satu folder komputer & klik Create folder.
3. Kemudian klik folder komputer dan Start Upload fail2 komputer ke dalam folder komputer.

Memasukkan Imej/Gambar Komputer ke Dalam Artikel.

1. Dalam Control Panel, Klik Content > Article Manager dan klik Pengenalan Komputer.

2. Browse ke bawah sekali dan klik butang Image.
3. Klik folder komputer dan pilih gambar.
4. Klik butang Insert (sebelah atas)
5. Susun kedudukan imej/gambar mengikut kesesuaian.
6. Klik Save dan Preview.