butiran kerja web design

8/19/2019 Butiran Kerja Web Design

1/17

1 | W E B D E S I G N

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 .

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.

Width: 800 px

Height: 600 xp


2/17


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


3/17


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

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.

Layer AC Stop Layer Fullscreen AC


4/17


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 EXIT

BUTANG FULLSCREEN

BUTANG NEXT SCENE


5/17


13) Seterusnya, membuat cursor mengikut arahan Select Button > Right Click > Convert to

Symbol…(Movie Clip) > Masukkan gambar cursor pada Insert Keyframe. Lihat dibawah.

14) Untuk memasukkan scene baru saya mengikut arahan Insert > Scene.

15) Pada Scene 2 ini saya menggunakan 6 layer .

ACTIONSCRIPT CURSOR


6/17


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


7/17


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.


8/17


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

sendiri.

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 .

Timeline (3) Timeline (4)


9/17


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.


10/17


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.

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

ACTIONSCRIPT

ACTIONSCRIPT


11/17


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.


12/17


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 .


13/17


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 .

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

TEXT 1 TEXT 2

TEXT 1

TEXT 2


14/17


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 Movie Clip tersebut adalah “txt” .

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


15/17


49) Select kotak pendek dan panjang pada layer Scroll yang baru anda buat dan Right Click

> Convert to Symbol…( Movie Clip). Kemudian pastikan kotak pendek

tersebut adalah “ scrollbar ” dan kotak panjang tersebut adalah

“ scrollbarBG”

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

KOTAK PENDEK KOTAK PANJANG


16/17



17/17


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

butiran kerja web design

Documents