Upload
amirul-zarhan
View
236
Download
0
Embed Size (px)
Citation preview
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
8/19/2019 Butiran Kerja Web Design
2/17
2 | W E B D E S I G N
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
8/19/2019 Butiran Kerja Web Design
3/17
3 | W E B D E S I G N
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
8/19/2019 Butiran Kerja Web Design
4/17
4 | W E B D E S I G N
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
8/19/2019 Butiran Kerja Web Design
5/17
5 | W E B D E S I G N
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
8/19/2019 Butiran Kerja Web Design
6/17
6 | W E B D E S I G N
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
8/19/2019 Butiran Kerja Web Design
7/17
7 | W E B D E S I G N
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/19/2019 Butiran Kerja Web Design
8/17
8 | W E B D E S I G N
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)
8/19/2019 Butiran Kerja Web Design
9/17
9 | W E B D E S I G N
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.
8/19/2019 Butiran Kerja Web Design
10/17
10 | W E B D E S I G N
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
8/19/2019 Butiran Kerja Web Design
11/17
11 | 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.
8/19/2019 Butiran Kerja Web Design
12/17
12 | 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 .
8/19/2019 Butiran Kerja Web Design
13/17
13 | 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 .
44) Atur parameter text yang telah kita buat sebelumnya seperti di bawah ini.
TEXT 1 TEXT 2
TEXT 1
TEXT 2
8/19/2019 Butiran Kerja Web Design
14/17
14 | W E B D E S I G N
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 .
8/19/2019 Butiran Kerja Web Design
15/17
15 | 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 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
8/19/2019 Butiran Kerja Web Design
16/17
16 | W E B D E S I G N
8/19/2019 Butiran Kerja Web Design
17/17
17 | 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 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).