GIAO TRINH THIET KE WEB : PHAN BAI TAP - TU HOC MACROMEDIA FLASH 5.0 BANG HINH ANH TAO CÁC ĐỐI TƯỢNG CƠ BAN TRONG FLASH Để lầm quen với các đội tượng trong Flash, rong bài tập này các b
Trang 1THE GIGI ĐÔ HỌA PHAM UANG HUY - PHẠM QUANG ¡3E ẤP, Ï Ì!) [liên s0ạn]
TU HOC 'HASÏI:
Copyright ©1993-2000, Macromedia, Inc All rights reserved
Macromedia, the Macromedia Jogo, and Flazh are trademarks or registered trademarks of Macromedia, Inc
NHA XUAT BAN THONG KE
Trang 2THE 6161 DO HOA
BÀI TẬP
THỰC HÀNH
FLASH 5.0
BIEN SOAN : PHAM QUANG HIEN
PHAM QUANG HUY
Trang 3GIÁO TRÌNH THIẾT KẾ WEB : PHẦN THỰC HÀNH - TỰ HỌC MACROMEDIA FLASH 5.0 BANG HiNH ANH
GIGI THIEU
Tú sách STK chúc mừng các bạn đến với Thế giới đồ họa qua chương trình Flash 5.0, một trong những chương trình mới và đầy quyền năng không thể thiếu được đối với các nhà thiết kế web chuyên nghiệp của công ty Macromedia Tập tin thiết kế khi lưu sẽ có kích thước
nhỏ, do ảnh Flash vẽ dựa trên ảnh vector Ngoài ra một ưu điểm nữa của Flash là : Nó có thể
đưa ra nhiều tiêu chuẩn khác nhau, đây cũng là rào chắn trước đây khi phát triển Web, do kết quả thiết kế cần tương thích với những trình duyệt khác nhau Với các modun của Flash
(đôi khi còn gọi là các plug-in) các bạn sẽ có khá năng tạo trang Web phù hợp cho mọi trình
duyệt Flash còn cho phép các bạn tạo ra khả năng tương tác giữa người dùng và môi trương
bên ngoài được kiểm soát, bạn có thể tạo ra các nút điều khiển cho một kịch bản Web
Một số chức năng của Flash làm tăng thêm sức mạnh cho chương trình như khả năng
thích hợp và tương tác dễ dàng với HTML, JavaScript và VBScrip! Việc lập trình Script với Flash cho phép bạn đáp ứng đầy đủ các yêu cầu từ trình duyệt hay các phần tử HTML trên mạng Các tap tin Multimedia được Flash nén và tải xuống rãt nhanh và bất kỳ nội dung nào
được tạo ra từ Flash đều có thể xuất dưới dạng Multimedia dùng trên web
Để cung cấp thêm tài liệu học tập cho các thầy cô, sình viên và tất cả bạn đọc quan
tâm đến các chương trình thiết kế web với sự trợ giúp của của máy tính, Tủ sách STK hân
hạnh giới thiệu đến bạn đọc quyển sách “BÀI TẬP THỰC HÀNH FLASH 5.0 " đây là cuốn
sách được trình bày rất trực quan thông qua các hướng dẫn từng bước, bằng cách cắt hình ảnh trực tiếp từ màn hình máy tính, nên người sử dụng rất dễ thực hành và ứng dụng trong thực tiễn Với các bạn muốn đi sâu vào lãnh vực thiết kế Web và làm ảnh động phục vụ cho
giảng dạy các bạn có thể tham khảo thêm các tài liệu sau, xuất bản trong qúy 2 năm 2002
« GIAO TRINH THIẾT KẾ WEB TỰ HOC MACROMEDIA FLASH 5.0 BẰNG HINH ANH-PHAN CO BAN
* GIAO TRÌNH THIẾT KE WEB TY HQC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH-PHẦN NÂNG CAO
* THIET KE MO HINH DONG PHUC VU GIANG DAY VA QUANG CAO VGI MACROMEDIA FLASH 5
= CAC CONG CU HO TRO THIET KE WEB
HỖ TRỢ BẠN ĐỌC : Nếu bạn cần trợ giúp hơn nữa, bạn có thể liên lạc đến hỗ trợ kỹ
thuật của Tủ sách ở bất cứ nơi đâu theo các cách sau :
Hỗ trợ qua điện thoại : Gọi số (088334168 hay 0903728344) Khi gọi vui lòng ở bên cạnh máy tính mà bạn cần giúp đỡ (Xin đừng hỏi qua đường nhắn tìn)
Hỗ trợ qua đĩa CD-ROM : Tất cả sách do tủ sách STK ấn hành từ năm 2002 trở đi đều kém theo dia CD-ROM tự học với nhiều hình ảnh minh họa cùng các phim minh họa rất sinh
động Các bạn có thể gửi bưu phiếu 20.000 đồng sẽ nhận được đĩa qua đường bưu điện Nếu các
bạn đặt sách qua đường bưu điện với địa chỉ cho ở dưới theo giá bìa, th sich STK sẽ gửi lặng đĩa
CD-ROM này mà các bạn không phải tốn thêm bất kỳ chi phí nào nhân địp kỷ niệm l năm
thành lập tủ sách
KY SU : PHAM QUANG HUY
890 DIEN BIEN PHU - QUAN 10
TEL : 0903728344 — 088334168 Fax : 088334168
Với đĩa CD-ROM thực hiện đầu tiên này với thời gian và kinh phí hạn hẹp chắc còn rất
nhiều thiếu sót về mỹ thuật và kỹ thuật Rất mong sự đóng góp của các bạn để đĩa ngày càng
hoàn thiện hơn
Trang 4GIAO TRINH THIET KE WEB : PHAN THUC HANH - TU HOC MACROMEDIA FLASH 5.0 BANG HiNH ANH
MUC LUC
GIO! THIEU MACROMEDIA FLASH 5
GIỚI THIỆU TỦ SÁCH STK
MỤC LỤC
BÀI TẬP 1 : TẠO CÁC ĐỐI TƯỢNG CƠ BẢN TRONG FLASH 5
BÀI TẬP 2 : TẠO CÁC NÚT ĐIỀU KHIỂN
BÀI TẬP 3: LÀM QUEN VỚI MASK LAYER
BÀI TẬP 4 : THỰC HÀNH VỚI GUIDE LAYER
BÀI TẬP 5 : TẠO ĐỒNG HỒ CHUYỂN ĐỘNG
BÀI TẬP 6 : TẠO RA CHỮ VIẾT
BÀI TẬP 7 : TẠO MENU POP-UP
BÀI TẬP 8 : TẠO BỘ DỤNG CỤ TRONG
BÀI TẬP 9 : TẠO KÝ TỰ ĐỔI MÀU
BÀI TẬP 10 : CHIẾU PHIM
BÀI TẬP 11 : THIẾT KẾ TRANG WEB
Trang 5GIAO TRINH THIET KE WEB : PHAN BAI TAP - TU HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
TAO CÁC ĐỐI TƯỢNG CƠ BAN TRONG FLASH
Để lầm quen với các đội tượng trong Flash, rong bài tập này các bạn sẽ đùng các công
cụ cơ bản nhất trong Flash để tạo ra các đối tưởng hình học như hình tròn, hình vuông, hình tam giác, văn bản v.v mà trong đó các đổi tượng này phái chuyển động
2 Chọn trên trình dơn Modify > PP z⁄ ga a
Movie dé chon kích thước cho | oe _ —
doạn phim Các mục trong - Heme Hate l4 - tử ob là hộp thoại Movie Properties S nh) Height Careel,
400 ps ¬ ; - ÂIInnierrginifls [550 i tế
chọn các giá trị như trong hình °
ben Mateh Printer | Conteris
3 Sau dé yong man hình làm việc của Flash, |
bạn chọn trên trình den View > Rulers hay | Grd 5 b
nhập chọn trên bàn phím tế hợp phím Ctrl + Guides se =n,
Alt + Shift + R dé mé hai thanh thước xuất 1” Snapto Objects — Ctrl+Shift+/
hiện trong giao diện
4 Vì trong bài tập này, chúng tà chỉ làm việc — | ý Timelne Eÿtrl2Alt+T
với các đối tượng cơ bản thôi do đó bạn có | Cui+5hifttw
thể giới hạn vùng làm việc lại để thuận tiện | v Rulers — EHI+AltxShifttR
làm việc hơn ị Grid `
Guides }
Bạn hãy chọn trên trình đơn View > Work
Area để tắt chế độ Work Area đi
¥ Snap to Objects Curls+Shift+/
[.ưu ý : Khi ban khởi động Flash theo mặc đỉnh chế đô Work Area luôn luôn xuất hiện
E
Trang 6
GIAO TRINH THIET KE WEB : PHAN BAI TAP - TY HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
5 Ban phai dam bdo ring giao dién cua ban +5 +Á| a
bay wid dang 5 ché dé Zoom là 100%, ye & : 4 ray | pee
sj [sir
Để biết được diều này, bạn có thể nhìn tại
góc trái dưới trong giao điện, chỉ số Zooðm có
phải là 100% hay không Nếu chỉ số nhỏ hơn ~A 4 |
6 Sau đó bạn chọn tiếp trên trình đơn View > Grid > Show Grid dể hiển thị khung lưới
trong p1ao diện,
⁄ fRulers CH}+Alt+Shift+R |
Guides » Snap to Grid ‘Ctrl+Shifte'
| Edit Grid CtrleAlteG
| ¥ Snap to Objects Chl+Shift+? T
7 Trước khi bắt đầu vẽ đối tượng, bạn cần phải xác định vị trí vẽ cho đối tượng Bạn chọn
trên trình đơn View > Guides > Edit Guides để hiệu chính màu cho đường Guide
⁄ Rulers Ctrl+Alt+S hilt+R
Grid }
S a Ctrl+Shift+/ Lock Guides Ctrl+Alte:
ý Jnap t0 LD|ecls man ⁄ Snap tơ ñuides Ctri+5hift+;
Show Shape Hints Ctrl+Alt+H Edit Guides , Ctrl+Alt+Shift+G
8 Đường Guide là đường bạn tạo ra để biết được chính xác vị trí đặt của đối tượng Theo
mặc định các đường Guide này có màu xanh lá cây (Green) vì vậy mắt nhìn có thế khó thấy Do đó khi bạn chọn lệnh Edit Guidc là để chọn mẫu khác cho màu của các đường Guide
Trong hộp thoại Guides, bạn nhấp chuột vào hộp mầu Color và chọn một màu xunh
đương (Blue) tại dòng Š cột 3 từ trái sang hoặc chọn số tiàu Hex là #0000CC Sau đó nhấp chuột chọn nút ÓK
Colar La OK
[Vv Show Guides Cancel -
IV Snap to Guides T_ Lock Guides Clear All
| Snap accuracy: [Normal ~] Save Default |
9, Dùng con trổ kéo từ trên thành thước nằm ngàng và kéo hướng xuống dưới đáy giao dién
Snap accwacy:
để tạo đường Guide ngàng (Hình số 1) Kéo sao cho đường GQuide ngàng này đến bằng
mức vạch 50 trên thanh thước ngàng (Hình số 2)
6
Trang 7GIAO TRINH THIET KE WEB : PHAN BÀI TẬP - TY HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
I0 Sau đó kéo con trổ từ thanh thước dọc bên trái sang phải (Hình số 1) đạt đến giá trị 50
trên vạch thanh thước ngàng dừng lại (Hình số 2)
11 Bay giờ bạn bắt đầu vẽ đối tượng trong vùng lưới Chọn
công cụ Oval Tool trong hộp công cụ bên trái g1ao diện
12 Ban dat con trỏ sao cho nó vuông góc với hai đường Guide vừa tạo và bắt đầu nhấp
chuột kéo xuống dưới sang phải
Trong khi nhấp chuột kéo chuột kéo sang phải bạn nên nhấn giữ thêm phím Shift để tạo một hình tròn hoàn hảo như ví dụ bên dưới
Nhấp chuột vào giao điềm cua 2 dudng Guide va ay
kéo xuống sang phải Ả
SỊ
a
Trang 8
GIAO TRINH THIET KE WEB : PHAN BAI TAP - TU HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
^5 A TA afte > ~ xxx
m.n [200 20 13 Bây giờ đối tượng của bạn sẽ giống
như hình bên cạnh sau khi nhả chuột
ra Sau đó nhấp chuột chọn lại công
cu Arrow Tool trong hộp công cụ bên
14 Bây giờ bạn dùng công cụ Arrow và nhấp chuột vào vùng bên trong đường tròn lớn vừa
tạo Sau đó nhấn phím Dclete Lúc này bạn sẽ thấy một vòng tròn rồng
15 Sau đó bạn kéo thêm 2 đường Guide âm m.<ẽxẽxa w.: nữa Cách làm tương tự như bạn đãlàm [73
cho 2 đường Guide trước đó, sao cho 3
hai đường nay chia đường tròn thành 4 i
si ] l.,
ot A4
bộ
=
Trang 9
GIAO TRINH THIET KE WEB : PHAN BAI TAP — TY HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
16 Nhấp chuột vào dấu cộng bên dưới Layer trong thanh thước Timeline để tạo thêm một
17 Sau đó các bạn dùng công cụ Oval Tool Fl 59 MP0 180 L200 PO 1309,
để vẽ thêm một vòng tròn nhỏ nữa | =
Thao tác tương tự như cách tạo ra vòng |:
tròn lớn đã mô tả ở trên Sau đó nhấp |P:
chuột vào vòng tròn nhỏ và di chuyển |:
› 2 a S
nó vào trong góc phân tư thứ nhãt trên |= Re
cong, nhu hinh bén |
Layer nữa, có tên là Layer2 Bạn cũng có thể chọn trên trình đơn Insert > Layer để tạo
mới một Layer Nhấp chuột vào Keyframe thứ nhất của Layer2 này để chọn
Bảo đấm rằng vòng tròn nhỏ đang được chọn, có tô viền chấm chấm Sau đó bạn chon
trên trình đơn View > Copy để sao chép vòng tròn nhỏ này
Do bạn muốn tạo ra 4 vòng tròn nằm trên 4 góc phần tư của đường tròn lớn Do đó bạn tạo thêm 3 Layer nữa Sau khi bạn tạo ra được Layer thứ 3, bạn nhấp chuột vào keyframe thứ nhất trên Layer3 va chọn trên trình đơn View > Paste để dán vòng tròn bạn vừa sao chép trên bước vừa thực hiện vào trong keyframe thứ nhất của Layer3 Sau
đó bạn di chuyển vòng tròn nhỏ này vào bên trong góc phần tư thứ hai như hình bên
Trang 10GIÁO TRÌNH THIẾT KE WEB : PHAN BAI TAP - TU HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
20 Cách tạo mới cho 2 Layer con lại thực hiện tương tự như đã làm ở trên va di chuyển những vòng tròn nhỏ sao cho chúng cân xứng trền vòng tròn, tương tự như hình bên dưới Lúc này trong bang Layer, bạn sẽ có 5 Laycr tương ứng cho 5 vòng tròn, Bốn vòng tròn
nhỏ xuất hiện tại 4 góc của vòng tròn lớn
Chú ý : Các vòng tròn nhỏ chỉ nằm trên Layer2, Layer3, Layer4 và Layer5 Do đó khi bạn thao tác trên các vòng tròn này sẽ không làm ảnh hưởng đến vòng tròn lớn nằm trong Layerl
cu Paint Bucket Tool vào trong vòng tròn này Lúc này vòng tròn sẽ có màu do màu
ban chon ban dau
Trang 11GIAO TRINH THIET KE WEB : PHAN BAI TAP — TU HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
22 Sau đó bạn nhấp chuột vào hộp mau Fill Color để chọn một mầu tô khác cho yong tron
nhỏ thứ hai, Có thể bạn chọn màu bất kỹ nhưng đừng chọn màu giếng như mầu đã tô cho vòng tròn thứ nhất Sau dó nhấp chuột chọn vòng tròn thứ hai và tô màu cho vòng tròn
này Cách thực hiện tượng tự như bạn đã làm vừa rồi cho vòng tròn thứ nhất
23 Sau đó bạn chọn màu khác nữa để tô cho vòng tròn nhỏ thứ ba và thứ tư Cách làm tương
tự như bạn đã thực hiện cho vòng tròn thứ nhất và thứ hai Bây giờ bạn đã tô xong 4 màu khác nhau cho 4 vòng tròn nhỏ
4 đối tượng có 4 màu tô khác nhau
24 Bạn nhấp chuột chọn keyframe thứ nhất của Laycr5
Trang 12GIAO TRINH THIET KE WEB : PHAN BAI TAP ~ TY HOC MACROMEDIA FLASH 5.6 BANG HINH ANH
Timeline
26 Lúc này bạn sẽ thấy một dãy keytrame xuất hiện nhưng tại kcyframe cuối cùng
(keyframe thứ 30) có một keyframe giống như kcyframe thứ nhất
Be # ||+] mÌo| ey 2] oo [coins | aes ep]
Nhấp chuột vào keyframe thứ 30
Trang 13GIAO TRINH THIET KE WEB
LA Laver 3 + + Bil Oe!
LW Layer 2 > ¢ Hil tải
Thêm Keylrame cho Layer1
28 Bây giờ tạo đường chuyển động cho Layer2 băng cách
nhấp chuột trở lại
thứ của Layer2 để chọn
keylrame nhat
no,
29 Sau dé nhap phai chudt vén trinh dun Context, chon lénh Create Motion Tween dé làm
xuất hiện đường chuyền đồng của các Frame
œ ñ LÌN| 5 Độ 8B cả 5 âu (
LP Layer 5 + ° Olle Le
LØ Lauzr 4 ® ®= LIỊI: ile
Li? Layer 3 °° Bile le} :
Trang 14
GIÁO TRÌNH THIẾT KẾ 'VEB : PHẦN BÀI TẬP - TY HOC MACROMEDIA FLASH 5.0 BANG HiNH ANH
30 Nhấp chuột vào keyframe cuối cùng trên Layer2 và nhấp phải chuột chọn tiếp lệnh Create Motion Tween cho keyframe nay
Đối tượng trên Layer2 sau khi chọn lệnh Create Motion Tween cho keyframe cuối cùng
31 Thực hiện việc tạo đường chuyển động tương tự như đã làm trên Layer2 cho Layer3, Layer4 và Layer5 Lúc này bạn sẽ có một dãy chuyển động như hình bên dưới
Trang 15GIÁO TRINH THIET KE WEB : PHAN BÀI TẬP - TU’ HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
Layer2 sau khi nhan phim F6 tai frame thu 10
33 Bạn chọn tiếp tại keyframe số 20 trên Layer2 và nhấn phím F6 để chèn vào một keyframe tại frame thứ 2Ô này
Layer2 sau khi nhấn phím F6 tai frame thud 20
34, Bay giờ mục đích của bạn là tạo cho vòng tròn biến đổi màu từ màu này chuyển đổi
sang màu khác Bạn hãy nhấp chuột tại keyframe thứ 10 trong Layer2 để chọn nó Sau
đó chọn trên trình đơn Windows > Pane]s > Effects để xuất hiện bang Effect Tai day bạn nhấp chuột vào trình đơn dọc trong bang và chọn muc Tint
35 Tại đây, bạn nhấp chuột vào hộp màu Tìnt Color để chọn mầu cho đôi tượng Khi chọn
màu bạn nên chọn một màu khác với màu đối tượng ban đầu Do bạn muốn tạo ra hiệu
ứng đổi màu
15
Trang 16GIAO TRINH THIET KE WEB : PHAN BAI TAP — TU HOC MACROMEDIA FLASH 5.0 BANG HiINH ANH
38 Bạn hãy nhấp chuột vào keyframe thứ 1§ trên Layer3 sau đó nhận phím E6 để chèn them keyframe vio
39, Van chon tai keyframe thi 15 trén Layer3 nay, nhap |
chudt chon cong cu Arrow Tool trén thanh céng cu va | fl |
chọn công cụ Seale trong hép cdny cu bo sung Options oS l od |
Trang 17GIÁO TRINH THIET KE WEB : PHAN BAI TAP —- TU HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
Đối tượng trong Layer3 trước và sau khi kéo các handle
41 Đối với Layer5 còn lại bạn cũng làm tương tư như các thao tác mà bạn đã làm cho Layetr3 Với mong muốn là bạn sẽ tạo cho Layer3 và Layer5 phóng to thu nhỏ đốt tượng khi chúng diễn hoạt trong Flash Player
Đôi tượng trong Layer5 trước và sau khi kéo cac handle
42 Bây giờ bạn có thể thử xem đoạn phim của bạn vừa tạo diễn hoạt như thế nào bằng cách chọn trên trình đơn Control > Test Movies
17
Trang 18GIÁO TRÌNH THIET KE WEB : PHAN BAI TAP - TY HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
43 Lúc này bạn sẽ thấy 2 vòng tròn nằm ngang sẽ phóng to thu nhỏ, trong khi đó hai vòng
tròn nhỏ thẳng đứng sẽ biến đổi màu liên tục
44, Nhap chuét vao nut Close trong Flash Player để trở lạt môi
ee
45 Do vùng chính giữa tâm của vòng tròn lớn còn trống, bạn có thể tạo thêm đối tượng tại
tâm của vòng tròn lớn này Bây giờ bạn chọn trên trinh don Insert > Layer dé thém vi.o một Layer nữa có tên Layer6 Tại keyframe thứ nhất của Layer6, bạn hãy chọn công cụ
Line Tool để vẽ một tam giác như hình bền cạnh
R
46 Sau đó nhấp chuột trở lại chọn công cụ Arrow Toot và nhấp chuột tiếp vào trong
keyframe thứ nhất trên Layer6 để chọn toàn bộ hình tam giác vừa vẽ và di chuyển tam
Trang 19GIÁO TRÌNH THIẾT KẾ WEB : PHAN BAI TAP - TU HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
47 Bao dam ring ban đang chọn keyframe thứ nhất của Layer6, sau đó bạn nhấp phải chuột
chọn lệnh Create Motion Tween trong trình đơn Context cho keyframe thứ nhất này
|
(Layer 5 a f_y,Cieate Motion Tween
UW Layer 4 , 3 Insert Frame
OP Layer 3 - - Remove Frames °
Nhấp chuột vào keyframe cuối cùng trên Layer6
aao 18g 1n B5 cạn 2g 2 ag 40 4880
ee
Layer 5 o + Bll w có Create Motion Tween
LP Layer 4 « ¢ Olle —@ —>® —> 4 Insert Frame
CP Layer 3 ‹ -Ổ Hie — — ({ Remove Frames
L2 Laye 2 — ml Insert Keyframe
[Ð @ l|!] || Mi vị) 30 |120%ps | 245 = Insest Blank Keyfiame
Chọn lệnh Insert Keyframe trong trình đơn Context
19
Trang 20GIAO TRINH THIET KE WEB : PHAN BAI TAP - TY HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
Chuỗi †rame trên Layer6 sau khi thực hiện các lệnh để tạo đường chuyển đông
49 Bạn hãy nhấp chuột trở lại keyframe thứ nhất trên Layer6 và chọn trên trình đơn
Windows > Panels > Frame để xuất hiện bảng Frame
50 Trong bảng Frame, nhấp chuột vào trình đơn Tweening chọn là Motion Sau đó bạn chọn
mục Easing là 29, mục Rotate la CW — 2 times và nhấp chuột chọn các mục khác còn lại như hình bên dưới
Tweening Tweening:| Motion =} “ Scale
Easing 129 vị Dut
In ‘ a| >|
Shape —— hỳ Rotate: [ow ze times
Options: [VF ‘Orient to path
51 Chọn trên trình đơn Control > Test Movie để xem trước đoạn phim diễn hoạt trong
Flash Player Bạn có thể thấy những thay đối khi bạn nhìn đối tượng tam giác xoay xung
52 Bây giờ bạn hãy trở lại vùng làm viée Flash, bdo dim rằng ban dang 6 keyframe thứ
nhất trong Laycr6 Bạn dùng công cụ Arrow Tool và nhấp đúp chuột vào đối tượng tam
giác này Sau đó dùng công cụ tô màu Fill Color dé t6 m6t mau cho tam giác này Lưu ý rằng màu tê cho tam giác này đã được chọn rồi có một mầu khác
20
Trang 21GIAO TRINH THIET KE WEB : PHAN BAI TAP — TU HOC MACROMEDIA FLASH 5.0 BANG HiINH ANH
53 Sau dé nhap chudt vao ving Scene [ tại gốc trái trên, phía trên bảng Layer dé trở lại
trang thái vùng giao diện ban dau trong Flash Bạn có thể chon Control > Test Movie
để xem lại đoạn phim vừa tạo xong
trấi giao diện để nhập ký tự vào trong lớp
Layer? Tiếp đến bạn nhấp chuột vào trong
vùng giao điện và nhập vào dòng ký tự “Tam
Giác Xoay` như hình bên dưới
Trang 22GIAO TRINH THIET KE WEB : PHAN BAI TAP - TU HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
57 Tại mục chọn kích thước cho ký tự, bạn chọn bằng cách nhập vào giá trị kích thước cho
ký tự là 32 hoặc nhấp chuột vào con trượt để xác định giá trị này Bạn cũng có thể nhấp
chuột vào hộp màu bên phai trong bang Character dé chon mau cho ky ty
58 Bạn nhấp chuột vào công cu Arrow Tool để chọn nó và bạn sẽ thấy ký tự xuất hiện trong
giao diện như sau:
Trang 23GIAO TRINH THIET KE WEB : PHAN BAI TAP - TU HOC MACROMEDIA FLASH 5.0 BANG HiNH ANH
Ky tu sau khi nhập xuất hiện trong giao diện
59 Nhấp chuột vào kcyframe thứ nhất trên thanh thước Tìmeline trong Layer7 Sau đó nhấp
phải chuột và chọn lệnh Create Motion Tween trong trinh dun Context
60 Bây giờ bạn nhấp chuột vào keyframe cuối cùng trên Layer7 và nhấp phải chuột chọn
lệnh tạt Insert Keytrame co trong trinh don doe Context
50 20a, (280, 300 1553, Insert Blank Keyframe
61 Sau đó nhấp chuột vào keyframe thi I5 trên thanh thước Timeline trong Layer7 và nhấn
phím F6 để chèn vào keyframe trên Laycr này
Trang 24GIÁO TRINH THIET KE WEB : PHAN BAI TAP — TU HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
82 Bây giờ bạn đang ở trên keyframe thi’ 15 trong Layer7,
nhấp chuột vào chuỗi ký tự và di chuyển (dùng các phím mũi tên trên bàn phím) nĩ đến tâm của hai đường vuơng —=
gĩc do 2 đường Guide tạo nên trong phần thực biện đầu JB
tiền suo cho điểm khai báo (hình dấu cộng ) của ký tự trùng [mi
tại tâm của hai đường vuơng gĩc
Sik oom Tòi (M, Z]
63 Để thấy rõ khi nào thì điểm khai báo trùng với tâm của
đường Guide, bạn cĩ thế dùng cơng cụ Zoom Tool trong
đc Là L4 TL go 4 c4 11) L1) 4 C13 104 | 13 11 L3 11 LiL | INTEWNTNI0i0in00ï0 01006 eee
dS lS lHúm m lap lan Hán lan GÀ TT L4 12 11 d6 1 11 1v (4 (221 11 14 14 | 11 1/4 1| 13 4 0120| 01014 2127 14 11 11 21 1 1 17 12 1
Trang 25GIAO TRINH THIET KE WEB : PHAN BAI TAP - TY HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
64 Bảo đảm rằng vùng ký tự được chọn,
sau d6 ban chon cong cu Arrow Tool va
nhấp chuột chọn công cụ bổ sung là
hép céng cu Arrow Tool, Lic nay ban Arrow Tool (V9
sẽ kéo các handle tạ] các góc nhỏ lại | A |
Kéo handle tại môt góc để thu nhỏ đổi tượng
Tại keyframe thứ nhất, nhấp chuột chọn trên trình
đơn Windows > Panels > Frame, sau đó thiết lập
các thuộc tính trọng bảng Frame cho đối tượng như
mục Tweening chọn Mouon Easing chọn giá trị là
10, mue Rotate chon lệnh CW có trong trình đơn
dọc và nhập giá trị Ï vào hộp times Các giá trị khác
còn lại chọn hết như trong hình mỉnh họa bên cạnh
Nhấp chuột tiếp tai keyframe thứ 1§5 trên Layer7,
bạn cũng chọn các thuộc tính tại bảng Frame như
hình bên cho kcytrame này,
Easing: | 10 vị Mut
Fiotate-] cw x | fi times
Cenons: | Onent to path
a Synchronize ica Snap
Rotate [cw] [fz umes
Options: [4 Orient te path l2 Synchronize fv Snap
Trang 26
GIAO TRINH THIET KE WEB : PHAN BAI TAP - TY HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
67.Sau đó bạn nhấp chuột chọn trên trình don Effect BỊ
Windows > Panels > Effects, cing tai keyframe thar |Ữfhs†[firs†BEsedfiese)®|›|
15 trén Layer? nay Trong bang Effect , chon muc pring _ kxJ Jt00z =|
Tint va trong hép Tint Color chon mét mau mdi cho =
đối tượng Mục đích là bạn muốn tạo đối tượng
chuyển động xoay kết hợp với hiện tượng biến đổi
màu trên đối tượng
Các đối tượng đang diễn hoạt tại keyframe thử 18 trong Flash
69 Để test lại đoạn phim, bạn có thể chọn trên trình đơn Control > Test Movie để xem trước đoạn phim của bạn diễn hoạt trong giao diện Flash Player
Đối tượng đang diễn hoại tại giao diện Flash Player
Bạn đã vừa làm quen với các công cụ cơ bản để tạo chuyển động, biến đổi hình dáng trên đối tượng trong Flash Để biết thêm chỉ tiết đối với từng công cụ, bạn có thể xem phần lý thuyết Ở phần bài tập, người viết chỉ trình bày ngắn gọn cách chọn và cách dùng cho từng công
26
Trang 27GIÁO TRÌNH THIET KE WEB : PHAN BAI TAP - TY HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
cụ trên từng đối tượng Mà cụ thể trong phần bài tập này là cách chọn các công cu Arrow, Oval, Line, Paint Bucket, Text và Zoom (Zoom +) và các bảng Frame, Character Các đối tượng là
được chọn để diễn hoạt là hình tròn, hình tam giác, ký tự
Mỗi một bài tập có tác dụng khác nhau, trong bài tập ở trên bạn có thể làm một bài tập nhỏ tương tự như có thể tạo ra tín hiệu đèn giao thông, gồm có đèn đỏ, đèn vàng và đèn xanh
Các đối tượng là hình tròn và chuyển đổi màu trên đối tượng Sau đó sắp xếp các frame sao cho hợp lý Ví dụ, lúc đầu là tín hiệu đèn đỏ sau đó một vài giây đến tính hiệu đèn vàng và cuối
cùng là tín hiệu đèn xanh và vòng lặp trở lại là đèn do
2 Dan Vang -Ổ - Ei
LØ Dan Xanh ‹Ổ -Ò C2 Khung , ỒỎ N
Ee at |i) al) el
4 Layer vừa tạo xong
2 Sau đó bạn nhấp chuột vào keyframe thứ
nhất trên Layer Khung và chọn công cụ Line
Tool trong hộp công cụ để vẽ khung hình hộp
bao quanh các bóng đèn Bạn luôn cho hiển
thị khung lưới bằng cách nhấn phim Ctrl va
phím +
27
Trang 28GIAO TRINH THIET KE WEB : PHAN BAI TAP - TU HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
3 Trước khi vẽ bạn hay xác định mầu tổ để tô cho đối tượng bằng cách nhấp chuột vào công cụ FIl Color trong hộp công cụ và chọn mầu tô là mầu xám đứng hàng thứ
nhất trong cột thứ hai từ dưới bảng màu đếm lên,
Colors
Chon mét mau tô cho
4 âm đối tượng
5 Trong khi đối tượng vừa tạo xong đang được
chọn, bạn hãy nhấp chuột trên mình đơn
Edit > Copy Sau đó nhấp chuột vào
Keyframe thứ nhất trên Layer Den Vung và
chọn lệnh Edit > Paste để dán đối tượng
này vào trong lớp Laycr Den Vang, Sau đó
bạn sử dụng các phím mũi tên trên bàn
phím để di chuyển đối tượng này vào vị trí
Trang 29GIAO TRINH THIET KE WEB : PHAN BAI TAP - TU HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
6 Tiếp đến nhấp chuột vào keylrame thứ nhất
trén Layer Den Do va chon lénh Edit >
Paste để dán đối tượng này vào trong lớp
lLavcr này Sau đó bạn cũng dùng các phím
mũi tên trên bàn phím để di chuyển dối
tượng vào vị trí thích hợp trong khung Bay
7, Tiếp đến nhấp chuột vào keyirame thứ 60 trên Layer Den Do và nhấn phím F6 để
tạo ra các keyframe bổ sung trén Layer nay
LỰ Ben Vang + *® Oil, [am
L2 Dan Xanh + + ile
_
Lÿ Khung - - Bi
8Ø ft ||!| mÌb] Sw) calf eo [reams Fess ([ —| _ +
Cac keyframe được thêm vào trong Layer Đen Do
8 Ban dp dung tiGp tue bude 7 cho Layer Den Vang Den Xanh va Layer Khung Ltic nay bạn đã có một chuoi keyframe duvge bố sung vào trén cde Layer
R # ||!| ta) GS) Aa] Ly] eo ftzotps | sas 4
Về cơ bản các keyfrarne đã được bổ sung vào trong các Layer
9 Sau đó bạn nhấp chuột vào keyframe thứ 20 trên Layer Den Do và nhấn phím F6 để chèn thêm một keyframe vào rame này Trong Layer Decn Vang, bạn cũng nhấn phím E6 tượng tự tại keylrame thứ 20 và keylrume thứ 35
29
Trang 30GIÁO TRINH THIET KE WEB : PHAN BAI TAP - TU HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
(cách thực hiện tương tự như bước 3) và
chọn màu xunh đứng hàng thứ hai trong
cột thứ l4 từ trát sung của bảng hộp
chọn màu như hình bên cạnh
12 Sau đó bạn trở lại keyframe thứ nhất Z#=m:.::s< t2
irén Layer Den Do va chon cong cu Fill
Color Chon màu đỏ tạj cột thứ nhất
hàng thứ 7 từ trái sang trong bảng hộp
màu Đối với keyframe cuối cùng
(keytrume 60) trong Layer Den Do ban
chon mau đỏ tượng tự cho keyframe
cuối cùng này
13 Bạn trở lại keylrame thứ 20 trên Layer ị “[arerroo @
Den Vang và chon cong cu Fill Color
Chon mau vàng tại cột thứ hai hàng thứ
7 trong bảng hộp màu
14 Bước cuối cùng bạn chọn trên trình đơn Control > Test Movie để diễn hoạt và
kiểm tra đoạn phim trong môi trường Flash Player Bây giờ bạn sẽ thấy được kết quả của đoạn phim bạn vừa tạo tại dây
30
Trang 31GIÁO TRÌNH THIẾT KE WEB : PHAN BAI TAP - TU HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
1
TAO CAC NUT DIEU KHIỂN
Trong phần thực hành nay, ban sẽ tạo một số nút điều khiển các chế độ diễn hoạt của
đoạn phím
Cách thực hiện nÌư sat:
file nay la Nut Dieu Khien
Khởi động chương trình Flash 5.0 Chọn trên trình đơn File > New và đặt tên mới cho
Chọn trên trình đơn New > Symbol, trong hép thoai Symbo] Properties nhip vio muc
Name 14 Nut Dil va trong muc Behavior chọn là Buiton Sau đó nhấp chuột vào nút
3 Nhấp đúp chuột vào vùng tên
Layer và đặt tên cho Layer này là
Layer Vien Ngoai
4 Dung cong cue Oval Tool trong
hộp công cụ và vẽ vào trong vùng
lam viéc tai tab Up nut tron nhd
cố màu tô là màu den
5 Nhấp chuột tiếp vao tab Over và
nhấn phím F6 Sau đó chọn một
màu tô khác để tô cho đối tượng
6 Nhấp chuột tiếp vào tab Down va
nhấp phím F9 Vẫn không thay
đổi màu tô trong bước 6 này
C) Nưi Di †
& O| Per Ovet|Down Hit
a ae esl ota ig al) / +® *
& Scene1 ặị Nư Di1
Trang 32
GIAO TRINH THIET KE WEB : PHAN BÀI TẬP - TU HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
7 Nhấp chuột vào dấu cộng (+) tại góc trái dưới trong vùng tên Layer và tạo mới thêm
Layer Sau đó đặt lại tên cho LaycT nay la Layer Nut Tron
4 Ê\ []|[ + [ossTBew] mí || | Scene! Gy NutDit
Sle 08 Lm:
EE' Layer Nut Tron |
ị L2 Layei Vien Ngoại: , - M
inset Lave — we a |i ele) sal
8 Nhấp chuột trở lại tab Úp trong Layer Vien Ngoại, nhấn phím Cưl+ C Sau đó nhấp
chuột trở lại tab Up trong Layer Nut Tron va nhấn phím Ctrl+V để dán đối tượng vừa sao chép vào
BF Layer Nut Tron
Y Layer »Ien Hqpa
L2 LayerNutTron / + + #
LƠ Layai Vien Ngoại + /ñ IM
mm
Be ø ||} | seals) oe] cf 2
Trang 33GIAO TRINH THIET KE WEB : PHAN BAI TAP - TU HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
Ci Layer Vien Ngoai “AM leil
một layer nữa và đặt tên là Layer Chu Sau đó nhấp chuột vào tab Up, chọn công cụ
TexI Tooi và nhập ký tự số I vào, Ký tự này có màu 1ô cùng với màu của tab Over trong Layer Vien Ngoại,
P| fA " | Up [Over Dowr Hit
dat
CP Layer Nut Tron se 4 la e » |
|_|
W Layer Vien Ngoài * * Hi yl ele
Be fi || it) ol) wị bt fied
| 90, 60, 40, |20, |D., 12818 |ÊD, |
E: = MH
I4 Nhấp chuột tiếp vào tab Over trên Layer Chu, trước đó bạn hãy xoá các frame trống
đi và nhấn phím F6 Sau đó thay đổi màu chữ trên ký tự này thành màu giống như
màu bạn thực hiện trong tab Úp trên Layer Vien Ngoài,
Trang 34GIAO TRINH THIET KE WEB : PHAN BAI TAP - TU HOC MACROMEDIA FLASH 5.0 BẰNG HINH ANH
15 Nhấp chuột tiếp vào tab Down và nhấn phím F6 Bạn hãy chọn một màu tô giống như
màu tô tại tab Up cia Layer này,
UP Layer Nut Tron + ¢ Mile e ¿ Static
LỞ Layer Vien Ngoai * « Hl | e >
L2 Layer Nut Tran ae | ele |
Te | aurr Viên Mnnai + + Mk ie lt
Trang 35
GIAO TRÌNH THIẾT KẾ WEB : PHAN BAI TAP - TY HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
17 Nhấp chuột tiếp vào tab Over trén Layer Chu Ngoai và nhấn phím F F6 Chọn một màu
tô có cùng màu với màu trong tab Up của Layer Vien Ngoài
18 Cuối cùng bạn nhấp chuột tiếp vào tab Down và nhấn phím F6 Sao đó bạn đóng nút
này lại Bây giờ bạn hãy chọn trên trình đơn Window > Library
19, Nhấp chuột vào mục Nut Di ] trong cửa số thư viện và nhấp phải chuột chọn lệnh
Duplicate cé trong trinh don Context
ete Nut Dieu TƯ]
Dne tem in ibrar: Options
20 Sau đó hộp thoại Symbol Properties xuất hiện Bạn nhập vào mục Name là Nut Di 2
sau đó chọn OK Nhấp đúp chuột vào cửa sổ hiển thị của mục Nut Di 2 trong thư viện
mem - Nut Dieu Khi
Trang 36GIAO TRINH THIET KE WEB : PHAN BAI TAP — TU HOC MACROMEDIA FLASH 5.0 BANG HiNH ANH
21 Nhấp chuột vào Eayer Chu và chon | Scenet Gq NutDi2
tab Up, sau đó hiệu chỉnh ký tự số Ì [_ @ 3 HI[ETesaieimi
ì ý 2
thành ký tự sô 2 [ÐLayaChuNgaa 3 + EM
OD Layer Nut Tron
JO Layer Vien Ngoai
22 Bạn thực hiện tung tu bude 21 cho tab Over va Down trong Layer Chu nay Do Layer
Chu Ngoài bị tất (có dấu X ngày tại cột con mắt trong vùng tên Layer) nên đối tượng trong Layer này bạn không thể thấy được
WD Layer Nut Tron StaicL ® LA Layer Nut Tron * > Bile lela |
CD Layer Vien Ngoai L2 LayzrVienHgai + * Mil a | ow | 4
23.Cuối cùng bạn nhấp chuột vào & [I|[ET6seipswn mị ]
Layer Chu Ngoai tai tab Up, sau dé | | «la
hãy xoá dữ liệu chứa trong tab này |[Ø Laye Chú - - Ball 4s |
đi (0 Laver Nut Tran Ò ¢ Hl sé | a | eo 4
(D Layer Vien Ngoal ‹ ¢ Bile lele
Trang 37GIAO TRINH THIET KE WEB : PHAN BAI TAP — TU HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
24 Lap lai tiy bude 19 cho đến bước 22 tương tự cho biểu tượng Nut Di 3
(D LayerChuNgoat + +
Lo? Layer Nut Tron elas | LØ La¿#er Nut Tròn |
LØ Laper Vien Ngoai W LayerVienNgos + + fW
25 Bây giờ bạn sẽ tiếp tục tạo ra các nút Play và nút Stop Nhấp chuột vào mục Nut Di 3
trong cửa số thư viện và nhấp phải chuột chọn lệnh Duplicate có trong trình đơn
Context va dat tén cho nut mdi nay la Nut Play (cách làm tượng tự như trong bước 19),
Trang 38GIAO TRINH THIET KE WEB : PHAN BAI TAP - TY HOC MACROMEDIA FLASH 5.0 BANG HINH ANH
26 Nhấp chuột vào Laycr Chu và đối tên lại thành Layer Play Sau đó nhấp chuột vào
tab Ứp và dùng công cụ Line Too] vẽ hình tam giác vào trong tab này Sau đó nhấp
chuét vao tab Over va tab Down xGa chung di
Bây giờ bạn hãy nhấp chuột trở lại vào tab Over và nhấn phím Fé, tô mầu cho hình
tam piác là mầu giống như trong tab Up ctia Layer Vien Ngoat
a Rt oO [UBT Sver[Dowd Hit | LẠ ä L1 Up [over Cour Hit |
Lử Layer Chu Ngoai + Ò M ele OD Layer Chu Ngoài : + N 6 | ° |
OP Layer Nut Tran * + Bi sl eleile | LP Layer Nut Tron - + NÍ.l¿l.l« ]
L8 Laver Vien Ngoat * * Biile e | L2 Layer Vien Ngoai > * Biel ele |
sỹ - ma lÏ aiel sị c[lÍ m8 @ (la) ele! | ll
CO Layer Chu Ngoai
OP Layer Nut Tron
LP Layer Vier Ngoai
28 Vi trong tab Up cia Layer Chu Ngoai rang, do vậy bây giờ bạn sẽ không tạo đối
tượng trên tab Up này Bạn chỉ tạo đối tượng trong tab Over và tab Down cho nút
Play Sau đó hiệu chính lớp ký tự trong 2 tab này thành ký tự Play như hình sau Bạn hãy tô màu cho ký tự này một màu đậm
38
Trang 39GIAO TRINH THIET KE WEB : PHAN BAI TAP — TU HOC MACROMEDIA FLASH 5.0 BANG HiNH ANH
LP Layer Play + * PFIÍ| s4 I tatic
L2 Layer Nut Tron * © Bl ei él e «|
|2 Layer Vien Nacai + « B | ° 4
I9 a [halal al cal 2 [iets | 03
NJ ken spi peers mae ->
Đối tượng tại tan Over trong Layer Chu Ngoai
LY Laver Flay * ® LIỊ| s | « | $ {Static
CP Laver Nut Tron +, * MỊ| |.Ìà « ]
® Laver Vien Ngoai _* * &
Be & 1 wlohe Fame Co
Đối tượng tại tab Down trong Layer Chu Ngöàai
29 Bạn thực hiện tiếp theo cho nút Stop, cách thực hiện tượng tự như cách lầm trong nút
Play Các bạn có thể tự làm lấy
Chúng tôi không lặp lại các bước thực hiện cho nút Stop này Chỉ có điều chúng tôi cần lưu ý là đối tượng trên nút Stop trọng Layer Chu không phải là hình tam giác mà là hình vuông
Bất đầu từ cách thực hiện nút Play trở đi, bạn không cần phải tạo đối tượng trong tab Up
ctia Layer Chu Ngoai Tab Up này không cần dùng đến nó, nó có thể chiếm nhiều chỗ trên
vùng làm việc của bạn
Trang 40GIAO TRINH THIET KE WEB : PHAN BAI TAP - TU HOC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH
œ® & 1 Peed ove oon mí
LA Laver Chu Ngoar : ¢ Bh ls ‘
F Layer Pla 3 ® ®
CP Layer Nut Tron a | ai-elé
C2 Layer Wien Ngoai +o Mil el el
Be @ |i) wo) | col) 1 [20s [ 56
TBD ales ND ral Qeanisb AQ a2 ans cL Essa lB Bsa BO eu IED l 2G al 88,
LỠ Lauet Fla; $e *° LIÍ| s |] rs
2 Layer Mut Tron g9 a oe ~ 2Ø Layer Vien Ngoat ‘+ Miele
‹ J
mH a |e] ala! al crf [eo [ae
[ ]30 j20, io JO 1G 20, 30 ao Iso Jeo roa
111111811 111111E11114111131 0i11|49111111E12741191lg1LIẪ1 tái EỊvc v111i1p6t11 s1