Website Using Flash

Pembangunan Multimedia DIT 2424 Pembangunan Multimedia DIT 2424 Disediakan Oleh : Cik Julianah Binti Suparman Latihan Makmal 2 Langkah 1 Klik Start > All Program > Adobe Flash > paparan seperti di bawah akan muncul > save it as “index”. Pilih modify / properties ubah saiz stage 766 x 600px dengan framerate 30fps dan tukar warna stage/background ke light grey (#eeeeee). Kemudian Create 10 layers serta namakan seperti rajah di bawah.

Pada layer //label, pergi ke frame 1 dan namakan frame tersebut “home”. Untuk namakan frame tersebut pergi ke bahagian bawah skrin, anda akan jumpa properties, di mana anda boleh namakan frame tersebut. Sila lihat gambarajah di bawah jika anda tidak faham. Masih pada layer //label, pergi ke frame 7 dan masukkan blank keyframe (F7). Namakan frame ini “about”. Kemudian create “service” pada frame 12 dan “testi” pada frame 22 dan “contact” pada frame ke 27 dan akhir sekali “FAQs” pada frame

33. Sila rujuk gambarajah.(semua nama label bergantung kepada menu/page yang anda tentukan)

Untuk namaka n frame

Langkah 2 Pada layer //script masukkan blank keyframe (F7) pada frame 1, 6, 7, 11, 12, 16, 17, 21, 22, 26, 27 dan 32. Kemudian pada setiap blank keyframe tadi masukkan action/coding stop(); (lihat gambarajah jika anda tidak faham). Hasilnya akan jadi seperti rajah di bawah.

(F9) untuk view windows actions. (untuk keluarkan ruangan coding)

Langkah 3 Pergi ke layer Banner dan masukkan banner anda pada layer tersebut. Lihat rajah dibawah.

Langkah 4 Setelah semua button/navigasi siap direka, susun button tersebut pada layer button mengikut keutamaan maklumat yang hendak disampaikan kepada pengguna seperti yang ditunjuk pada rajah dibawah.

Langkah 5

Masukkan hit Button pada layer hitButton. Tindihkan atas button yang telah anda susun tadi. Rujuk rajah dibawah untuk lebih faham.

Langkah 6 Klik hit button di stage dan kemudian tekan F9 untuk keluarkan window action. Masukkan coding pada hit button “about us” seperti di bawah.

on(rollOver) { tellTarget("aboutUs") { gotoAndPlay("2"); }

Nama movie clip. Nama label dlm movie clip button.

} on(rollOut) { tellTarget("aboutUs") { gotoAndPlay("3"); }

Nama movie clip. Nama label dlm movie clip button.

} on(release) { gotoAndPlay("about"); }

Nama label di scene.

Langkah 7 Untuk keluarkan windows penghantaran email secara terus kepada pelanggan (spt di bawah) masukkan coding seperti berikut:-

on(rollOver) { tellTarget("FAQ_mc") { gotoAndPlay("2"); } } on(rollOut) { tellTarget("FAQ_mc") { gotoAndPlay("3"); } } on (release) { getURL("mailto:[email protected]"); }

Masukkan coding ini pada ikon FAQs

Langkah 8

Untuk menghasilkan caption seperti rajah di atas sila ikut arahan yang disediakan. 1. Tambah satu layer di bawah layer hitButton dan namakan caption.rujuk gambar.

2. Buat satu kotak kecil di bawah ikon home dan convert kan kotak tersebut kepada movie clip. Namakan movie clip tersebut sebagai caption.

3. Setelah convert kotak tersebut kepada movie clip, pergi ke bahagian properties namakan instance sebagai caption.lihat rajah.

4. Double klik pada kotak td untuk pergi ke movie clip stage. Masukkan layer baru atas layer bGround dan namakan teks. Pilih ikon teks pada bahagian tools, dan buatkan satu ruang untuk teks. Hasilnya akan jadi seperti di bawah.

5. (masih pada layer teks) Kemudian pergi ke bahagian properties, text type anda tukar kepada Dynamic Text dan di bahagian Var,type words

6. Kemudian kembali pada scene 1, klik pada kotak caption di stage dan masukkan coding seperti berikut. Lihat rajah.

Klik di sini.

onClipEvent (enterFrame) { if (_root.x==1) { this._alpha = 50; } else { this._alpha = 0; } }

7. Klik pada hitButton home, dan tambah coding seperti di bawah:on(rollOver) { tellTarget("home_bttn") { gotoAndPlay("2"); } } on(rollOut) { tellTarget("home_bttn") { gotoAndPlay("3"); } } on (rollOver) { _root.x = 1; _root.caption.words = "Home"; } on (rollOut) { _root.x = 0; _root.caption.words = " "; }

on(release) {

Tambah coding ini pada hit button “home”. Lihat rajah untuk lebih jelas.

gotoAndPlay("member"); }

8. Pada layer //script masukkan coding berikut:startDrag(_root.caption, true);

Langkah 9 Untuk buat link di dalam flash. Sila ikut langkah di bawah. 1. Buat satu kotak untuk kawasan content atau maklumat pada layer content. Rujuk gambar.

Buat satu kawasan untuk content atau maklumat yang akan diletakkan.

2. Pergi ke layer content, tekan Ctrl+F8  Pilih Movie clip  namakan targetArea  Ok. Lihat rajah. Biarkan movie clip tersebut kosong.

3. Kemudian di scene 1, pergi ke layer content masukkan blank keyframe selari dengan layer //label.

targetArea hanya bulat kecil sahaja.

4. Lihat pada library, drag / tarik movie clip targetArea tadi ke stage (masih pada layer content, frame 1). Lihat rajah di atas. 5. Lihat pada properties, namakan targetArea tadi di instance name. rujuk gambar.

6. Sebelum masukkan coding untuk link ke page lain, pastikan page tersebut telah siap dibuat (page tersebut dibuat berlainan fail dan hendaklah disimpan dalam satu folder) dan telah di publish dalam format .swf seperti rajah di bawah.

Rajah di atas menunjukkan folder dan fail-fail setiap page disimpan di dalam satu folder

7. Langkah seterusnya masukkan coding pada layer //script seperti seperti berikut:-

loadMovie("home.swf","content_home");

Nama fail di dalam folder

Nama instance nama (nama movie clip)