Butiran Kerja Web Design

1) Buka perisian Adobe Flash CS6. Paparan di bawah akan muncul.

2) Bagi memulakan langkah kerja awal, pilih arahan Create New > Flash Document .

Width: 800 px
Height: 600 xp

3) Seterusnya, gunakan arahan View > Grid > Show Grid untuk memaparkan grid di dalam
stage.
4) Perhatikan terdapat kotak-kotak kecil pada stage. Ini adalah bertujuan untuk
memudahkan lagi proses membina imej.

1|WEB DESIGN

5) Saya menggunakan 9 layer bagi Scene 1. Rujuk gambarajah dibawah.

6) Seterusnya saya menggunakan Oval Tool dan Rectangle Tool untuk membuat layout
design untuk background.
7) Penggunaan warna pada fill colour dengan warna yang sesuai untuk menjadikan warna
layout design lebih menarik.

8) Saya memasukkan gambar pada stage dengan mengikut arahan File > Import > Import
to Library... bagi layer Background

2|WEB DESIGN

9) Seterusnya memasukkan teks pada layer Layout dan logo pada layer Logo.

10) Kemudian masukkan script di bawah pada layer AC Stop dan Fullscreen AC. Tekan F9
atau cari butang
Layer AC Stop

Layer Fullscreen AC

11) Untuk membuat butang Masuk saya memilih arahan Select Button > Right Click >
Convert to Symbol > Insert Keyframe dan ubah warna atau saiz button bagi kelihatan
menarik pada Up, Over, Down.

3|WEB DESIGN

12) Langkah seterusnya, membuat butang Next Scene, Exit dan Fullscreen. Perhatikan
langkah ke-11 bagi membuat butang. Seterusnya memasukkan script dibawah pada
butang tersebut.

BUTANG NEXT SCENE

BUTANG EXIT

BUTANG FULLSCREEN

4|WEB DESIGN

13) Seterusnya, membuat cursor mengikut arahan Select Button > Right Click > Convert to
Symbol(Movie Clip) > Masukkan gambar cursor pada Insert Keyframe. Lihat dibawah.

ACTIONSCRIPT CURSOR

14) Untuk memasukkan scene baru saya mengikut arahan Insert > Scene.
15) Pada Scene 2 ini saya menggunakan 6 layer.

5|WEB DESIGN

16) Seterusnya, pada Scene 3 saya menggunakan 5 layer.

17) Sebelum memulakan langkah seterusnya, saya terlebih dahulu membuat dua (2) layer
iaitu layer AC dan Input.

18) Langkah seterusnya saya memilih timeline sampai nombor empat (4) dan menggunakan
Insert Blank Keyframe.

19) Kemudian masukkan script di bawah pada layer ActionScript. Tekan F9 atau cari
butang

6|WEB DESIGN

20) Seterusnya tekan butang Text Tool dan pilih Input Text > Anti-alias: Use device fonts >
Behavior: Password.

21) Seterusnya, saya membuat Input Text dan butang submit pada layer Input, timeline
nombor 1 dan melabelkan sebagai password bagi Input text dan submit_btn bagi
butang submit.
22) Pemilihan butang mengikut arahan Windows > Common Libraries > Buttons.

7|WEB DESIGN

23) Tekan butang Text Tools dan tulis pada timeline tiga (3) dan empat (4) mengikut krativiti
sendiri.
Timeline (3)

Timeline (4)

24) Akhir sekali, untuk penjadikan lebih menarik saya membuat penambahan pada stage
seperti butang Fullscreen, butang Exit, gambar pada background dan lain-lain.
25) Seterusnya, pada Stage 4 saya membuat 16 layer.

26) Sebagai langkah permulaan saya memasukkan gambar pada layer Background.

8|WEB DESIGN

27) Seterusnya, saya membuat layout design transparent pada layer Background2 dengan
menggunakan arahan Ractangle Tool > Select Rectangle > Right Click > Convert to
Symbol(Graphic) > Properties > Colour Effect (Style: Alpha).

28) Kemudian saya membuat gambar slide pada halaman utama dengan mengunakan
arahan import gambar vector (gmbr.ai) > Select Vector > Right Click > Convert to
Symbol(Movie Clip).

29) Saya menggunakan 2 layer iaitu layer Picture dan Next Slide.

30) Seterusnya saya memasukkan gambar pada layer picture dan layout design pada layer
Next Slide dengan mengikut arahan Insert Blank Keyframe > File > Import > Import to
Library.

9|WEB DESIGN

31) Seterusnya saya membuat butang Bar Menu dengan mengikut arahan pada langkah
ke-11.

32) Bagi membuat butang Bar Menu, saya menggunakan gambar jenis vector. Untuk
menjadikan butang menu berfungsi saya saya memasukan ActionScript berdasarkan
gambar dibawah.

33) Langkah seterusnya saya membuat URL Social Button dengan mengikut arahan File >
Import > Import to Library. Select Vector > Right Click > Convert to Symbol(Button).
Seterusnya saya memasukkan ActionScript berikut.

ACTIONSCRIPT

34) Untuk kembali semula dari Scene 4 ke Scene 1 saya menggunakan butang Log Out
dengan menggunakan ActionScript dibawah.

ACTIONSCRIPT

10 | W E B D E S I G N

35) Untuk membuat stage mengikut tajuk butang menu apabila di tekan. Saya
menggunakan arahan Insert Blank Keyframe pada timeline ke 10 bagi butang Service &
Facilities, timeline ke 15 bagi butang Find Us dan butang menu seterusnya.

36) Bagi menjadikan stage kelihatan menarik saya membuat layout design jenis UI Modern.

37) Seterusnya saya membuat Jam Digital.

11 | W E B D E S I G N

38) Bagi membuat jam digital saya memilih Insert New Symbol atau gunakan shortcut
Ctrl+F8, seperti pada gambar di bawah ini.

39) Pada textbox Name tuliskan "movie_jam", Type: Movie Clip lalu klik OK, seperti gambar
di bawah ini.

40) Akan muncul tampilan seperti gambar di bawah ini.

41) Saya membuat 2 layer iaitu layer ActionScript dan Text.

12 | W E B D E S I G N

42) Seterusnya masukkan source code seperti di bawah ini pada layer ActionScript.

43) Buat dua (2) text pada stage dengan menggunakan text tool pada layer Text.

TEXT 1
TEXT 2

44) Atur parameter text yang telah kita buat sebelumnya seperti di bawah ini.

TEXT 1

13 | W E B D E S I G N

TEXT 2

45) Buat 1 layer di timeline dengan garis lurus berbentuk vertical. Kemuadian convert
menjadi movie clipt dengan klik (F8). Kemudian edit (klik 2 kali). Sekarang buat buat 4
layer dengan nama : Kandungan, Scroll, Mask, Background.

46) Buat dan masukkan kandungan yang anda inginkan dalam stage pada layer
Kandungan. Contohnya ada dua (2) jenis kandungan yaitu teks (static) dan gambar.
Pastikan kandungan yang anda masukkan tersebut melebihi kawasan stage kerja flash
sehingga memerlukan teknik scrolling untuk menampilkan semua kandungan.

47) Select semua gambar dan text tersebut dan Right Click > Convert to Symbol(Movie
Clip). Kemudian pastikan <Instance Name> Movie Clip tersebut adalah txt.

48) Buat 2 kotak panjang dan pendek menggunakan Rectangle Tool.

14 | W E B D E S I G N

49) Select kotak pendek dan panjang pada layer Scroll yang baru anda buat dan Right Click
> Convert to Symbol(Movie Clip). Kemudian pastikan <Instance Name> kotak pendek
tersebut adalah scrollbar dan <Instance Name> kotak panjang tersebut adalah
scrollbarBG
KOTAK PENDEK

KOTAK PANJANG

50) Kemudian pada layer Scroll tersebut masukkan source code seperti berikut.

15 | W E B D E S I G N

16 | W E B D E S I G N

51) Pada layer Mask buat persegi yang lebih besar, tingginya sama dengan tinggi garis
scroll. Sedangkan kandungannya adalah semua data yang ingin di bentuk dalam scroll
seperti gambar atau teks. Seperti pada gambar di bawah ini.

52) Covert semua object yang telah di buat menjadi Movie Clip (F8).
53) Setelah semua selesai. Klik layer Mask kemudian ubah <Instance Name> menjadi
Mask.

54) Setelah itu susun objek menjadi seperti ini. Object mask tertumpu pada kandungan
(warna merah). Scroll tertumpu pada kotak garis berwarna hitam. Lihat gambar pada
langkah 51.
55) Kembali ke timeline. tukar format layer Mask menjadi Mask. Dengan cara klik kanan
pada layer Mask kemudian pilih Mask.

56) Langkah terakhir anda boleh melakukan Publish Preview (F12).

17 | W E B D E S I G N