Giáo trình hướng dẫn tìm hiểu và sử dụng công cụ thuộc tính Rounded Rectangle Radius trong thiết kế Flash phần 1 pdf

THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY


TẠO ĐÈN CHIẾU CHUYỂN ĐỘNG
Trong phần thực hành này bạn sẽ tạo ra một đoạn phim movie clip có đối tượng là một
đường thẳng chuyển động (giống như đường chuyển động của con rắn khi nó bò), nhưng không
phải giống hoàn toàn như thế. Sau đó bạn viết một số lệnh cho đoạn phim đó và tạo thêm hai
ngọn ánh sáng phụ để minh họa cho đoạn phim trên. Các bạn có thể lấy ý tưởng của bài tập này
để tạo một số đoạn phim quảng cáo cho riêng mình.

Các bước tiến hành thực hiện như sau:
1. Kích hoạt chương trình Flash.
2. Tạo một đối tượng symbol graphic có tên Flare trong hộp thoại Symbol Properties.

3. Sau đó dùng công cụ Rectangle Tool và chọn thuộc tính Rounded Rectangle Radius là
50 trong hộp thoại Rectangle Settings.
THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0
218
Giáo trình hướng dẫn tìm hiểu và sử dụng
cơng cụ thuộc tính Rounded Rectangle
Radius trong thiết kế Flash
.
THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY


4. Vẽ vào vùng làm việc đối tượng như hình số (1). Chọn đối tượng hình số (2), xoá vùng
chọn để tạo như hình số (3).



Xoá vùng chọn để đối tượng

giống như hình
3
2
1
5. Nhấp chuột vào mép góc phải trên của hình số (4) và kéo lên trên, sau đó kéo tiếp mép
bên trái để tạo giống như hình số (5). Di chuyển góc nhọn của đối tượng tiến đến sát vào
điểm khai báo (dấu +) trong hình số (6).



4
6
5
6. Nhấp chuột bỏ màu viền của đối tượng, chọn trên trình đơn Modify > Movie, chọn mục
Background màu đen.
7. Chọn màu tô cho đối tượng mà làm trắng, chọn tiếp chế độ pha màu trong bảng Fill là
màu Linear Gradient. Con trượt màu 1 và 5 có màu đen, con trượt màu 2 và 3 có giá trò
màu hexa là #F0F0F0. Cuối cùng chọn màu cho con trượt số 4 là màu trắng.
Cách pha trộn màu gradient bạn có thể xem lại các bài thực hành trước đó.
THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0
219
.
.
THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY


Chú ý : Bạn cũng có thể nhập vào
một ảnh nguồn ánh sáng giống như
hình bên dưới. Liên hệ với tủ sách
để có đóa CD ROM về các phần

ảnh minh họa này.
8. Tạo mới symbol movie clip có tên Flare Movie, kéo biểu
tượng ảnh graphic có tên Flare vào vùng làm việc. Đặt điểm
khai báo của đối tượng trùng với điểm khai báo của đoạn
phim.


1 2 3 4 5
9. Nhấp phải chuột vào keyframe thứ nhất và chọn lệnh Create Motion Tween.

10. Nhấn phím F6 tại frame thứ 7, nhấp chuột trở lại keyframe thứ nhất và xoay đối tượng
một góc 30
0
hoặc 45
0
sang trái bằng công cụ Rotate. Dùng công cụ Scale kéo nhỏ kích
thước đối tượng.


Đối tượng
sau khi thu
nhỏ
11. Nhấn phím F6 tạo frame 15 và xoay đối
tượng một góc 45
0
sang phải. Kéo dài ra
đối tượng một chút bằng công cụ Scale.

Keyframe 15 trên thanh thước Timeline
THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0

220
.
.
THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY


12. Nhấn phím F6 tại frame 20 và làm cho
đối tượng trở lại vò trí của keyframe 15.
Nghóa là thực hiện ngược lại các thao
tác mà bạn đã thực hiện cho keyframe
15.

13. Nhấp chuột tiếp vào frame 25, nhấn phím F6. Xoay đối tượng hướng sang trái một góc
45
0
, kéo nhỏ chiều dài đối tượng giống như bạn đã thực hiện tại keyframe 1. Nhấn phím
F6 tại frame 30 để tạo chuỗi frame cho đối tượng chuyển động dài hơn.

14. Nhấp chuột tiếp vào
trình đơn Insert > New
Symbol, tạo mới một
movie clip có trên Line
Movement.

15. Dùng công cụ Line Tool có màu viền xanh Blue, vẽ một đường thẳng dài nằm ngang.
Điểm bắt đầu của đường thẳng là vò trí dấu khái báo.

16. Nhấp phải chuột tại keyframe thứ nhất, chọn lệnh Create Motion Tween và nhấp chuột
vào frame 50. Bây giờ bạn hãy di chuyển điểm khai báo của đoạn thẳng chuyển động về
vò trí đầu tiên bên trái của đoạn thẳng bằng cách nhấp chuột vào trình đơn Modify >

Transform > Edit Center.
THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0
221
.
.
THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY


Điểm khai báo của đoạn phim sau khi chọn lệnh Create Motion Tween


Điểm khai báo đang ở chế độ hiệu chỉnh

Di chuyển điểm khai báo đến vò trí đầu bên trái của đường thẳng
17. Nhấn phím F6, bạn hãy nhấp chuột trở lại keyframe thứ nhất và dùng công cụ Scale kéo
đường thẳng nhỏ lại càng nhỏ càng tốt. Lúc này bạn sẽ thấy đường thẳng sẽ nhỏ lại
hướng theo điểm khai báo nằm bên trái của đoạn thẳng.

18. Bạn nhấn phím Enter để xem đoạn thẳng chuyển động. Nhấp chuột vào frame 49 và
nhấn phím F6, xoá keyframe 50 để cho đối tượng chuyển động đến vò trí mới không chạy
lùi về vò trí đầu.

THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0
222
.
.
THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY

19. Kéo keyframe sang frame 50, chọn trên trình đơn Window > Panels > Effect, chọn hiệu
ứng trong bảng Effect là Tint. Chọn màu đỏ sậm trong bảng màu Tint để thay đổi màu

trên đối tượng.

20. Nhấn F6 vào frame 100, bảo đảm rằng bạn đang chọn keyframe 100 này. Kéo điểm khai
báo sang vò trí đầu bên phải của đoạn thẳng. Sau đó dùng công cụ Scale kéo nhỏ đoạn
thẳng hướng sang phải.


21. Nhấn phím F6 tại frame 99, xoá keyframe 100, kéo keyframe 99 sang vò trí frame 100.
Nhấn phím Enter để xem đoạn phim diễn hoạt, lúc này đoạn phim sẽ chạy từ trái sang
phải nhỏ dần tại keyframe 50 cho đến keyframe 100.
THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0
223
.
.
THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY

22. Nhấp chuột vào keyframe 100, chọn trong bảng Frame chế độ None tại mục Tweening.
Nhấn phím F6 tại frame 150, chọn lại keyframe 100 và chọn màu viền cho đối tượng
trong bảng Effect là màu xanh Blue trong hộp màu Tint.

23. Nhấp phải chuột vào keyframe 100 và chọn lệnh Create Motion Tween. Nhấp chuột
vào keyframe 150, di chuyển điểm khai báo sang vò trí đầu mút bên phải của đoạn thẳng
bằng lệnh Edit Center (xem lại bước 16). Kéo dài kích thước đối tượng bằng công cụ
Scale sang trái một đoạn bằng đoạn trước đó bạn đã thu nhỏ lại trong keyframe 50.


24. Di chuyển điểm khai báo sang vò trí đầu mút bên trái của đối tượng cũng tại keyframe
100 này. Nhấn phím F6 tại frame 149 và xoá keyframe 150, kéo keyframe 149 sang
frame 150.

Kéo điểm khai báo của đoạn thẳng sang bên trái

25. Nhấn phím F6 vào frame 200, dùng công cụ Scale kéo kích thước của đối tượng nhỏ lại
từng phải sang trong khi điểm khai báo vẫn ở vò trí đầu mút bên trái của đoạn thẳng.
THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0
224
.
.
THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY


 Để thực hiện bước kế tiếp, bạn hãy tạo mới Layer Ky tu Animation và kéo đoạn phim
Movie Clip Logo-Vong trong cửa sổ thư viện vào trong Layer này.

 Bây giờ bạn hãy dùng công cụ Rotate và Scale của công cụ Arrow Tool để biến đối sao
cho lớp ký tự trong Layer ky tu là bóng đổ của Layer này.
Chú y
ù : Do ký tự trước đó bạn đã thay đổi nhiều lần do vậy sẽ khó có thể sắp xếp được sao cho
lớp Layer bên dưới là bóng đổ của lớp Layer trên. Vì vậy có một cách khác nhanh hơn nữa là bạn
hãy sao chép đối tượng trong frame đầu tiên của Layer ky tu và dán vào frame rỗng trong Layer
ky tu Animation. Sau đó bạn hãy xác đònh các giá trò trong bảng Effect trở lại giá trò ban đầu để
ký tự hiển thò trở lại.

Di chuyển đối tượng vừa mới sao chép để chúng nằm chồng lên nhau
THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0
56
.
.
THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY

Xác đònh các giá trò trong bảng Effect để đối tượng trở về thuộc tính ban đầu
 Bây giờ bạn hãy nhấp chuột vào frame cuối cùng của Layer ky tu Animation và nhấn
phím F6.

 Nhấp phải chuột tại keyframe thứ nhất và chọn lệnh Create Motion Tween để tạo
đường chuyển động.


 Nhấp chuột tại frame 15 và nhấn phím F6, kéo Movie Clip Logo-Vong trong cửa sổ thư
viện vào trong keyframe 15 của Layer Ky tu Animation và xoá lớp ký tự trước đó để
bây giờ chỉ còn lớp ký tự mới kéo vào.
THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0
57
.
.
THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY



 Bạn hãy nhấn phím Enter để xem trước chuyển động của chuỗi ký tự này. Lúc này bạn
sẽ thấy chuỗi ký tự lật ngang sau đó lật đứng lên.
 Nhấp chuột trở lại keyframe thứ nhất và chọn trên trình đơn Window > Actions, nhấp
đúp chuột vào lệnh Stop trong danh sách lệnh Basic Action của bảng Frame Actions.

 Nhấp chuột tiếp vào trình đơn Window > Panels > Frame, nhập giá trò 1 vào trong vùng
Label của bảng frame này. Có nghóa là bạn gán nhãn có tên là 1 tại keyframe thứ nhất
này. Lúc đó bạn sẽ thấy cờ màu đỏ xuất hiện tại keyframe bên cạnh số 1.

THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0
58
.
.