GIAÙO TRÌNH THIEÁT KEÁ WEB PHAÀN BAØI TAÄP TÖÏ HOÏC MACROMEDIA FLASH BAÈNG HÌNH AÛNH CHÖÔNG 15 TAÏO XE TAÛI CHUYEÅN ÑOÄNG Trong phaàn baøi taäp tieáp theo naøy laø moät trong nhöõng phaàn baøi taäp th[.]
Trang 1TẠO XE TẢI CHUYỂN ĐỘNG
Trong phần bài tập tiếp theo này là một trong những phầnbài tập thiết kế những mẫu ảnh nhỏ để hỗ trợ cho trang Web củabạn thêm phần sinh động Trong phần này bạn sẽ tạo ra một chiếc
xe tải chở cát chuyển động và đổ cát vào một vùng nào đó
Trong phần thực hành này bạn phải dùng ba giai đoạn ghépảnh để tạo thành một đối tượng chuyển động hoàn chỉnh Giaiđoạn đầu tiên là bạn tạo ra chiếc xe tải chuyển động, kế tiếp tạo
ra chiếc xe tải đứng yên thực hiện công việc đổ hàng và giai đoạncuối cùng là sau khi đổ hàng thì chạy trở lại vị trí xuất phát lúc banđầu
Cách thực hiện từng giai đoạn như sau:
1 Bảo đảm rằng bạn đang ở chương trình Flash 5.0 Sau đó mở
“Xe Tai” Kích thước file bạn có thể chọn tùy thích
2 Chọn trên trình đơn Insert > New Symbol và nhập vào mục
mục Behavior là Graphic Sau đó chọn OK
3 Tại Layer 1 mặc định bạn đặt tên lại
là Banh Xe
Sau đó dùng công cụ Oval Tool trong
hộp công cụ
và vẽ vòng tròn và gắn thêm
các răng phụ xung
quanh bánh xe như hình bên cạnh
Trang 2Chú ý : Vòng tròn trên bánh xe có ba lớp
Bạn có thể vẽ ba vòng tròn khác nhau sau
nhau
Trang 34 Dùng công cụ Arrow Tool để chọn tất cả các đối tượng trên bánh xe và chọn tiếp trên
trình đơn Modify > Group (hay nhấn phím Ctrl + G) để nhóm các đối tượng trên
bánh xe hợp nhất thành một
5 Chọn trên trình đơn Insert > New Symbol và nhập vào mục
Xe và mục Behavior là Graphic Sau đó chọn OK
6 Chọn trên trình đơn Window > Library để mở cửa sổ thư viện xuất hiện Sau đó nhấp
chuột vào mục tên Banh Xe và kéo biểu tượng bánh xe hiển thị tại cửa sổ vào trong
vùng làm việc
7 Bảo đảm rằng đối tượng bánh xe đang được chọn, nhấp
trên thanh thước Sau đó nhấn phím F6 để tạo chuyển độngcho bánh xe
Trang 48 Chọn trở lại keyframe thứ nhất trên Layer Banh Xe và nhấp
Create Motion Tween trong trình đơn Context
Trang 5Chọn lệnh Create Motion Tween cho đối tượng
9 Sau đó bạn chia chuỗi frame này thành 4 keyframe khác nhau như sau: Nhấp chuột tại
keyframe thứ 5 và nhấn phím F6 Vẫn để chuột chọn
keyframe thứ 5 này và chọn
công cụ Arrow Tool và chọn tại vùng công cụ bổ sung công cụ Rotate và xoay đối
tượng bánh xe một góc 900 theo chiều kim đồng hồ
10 Tiếp đến bạn lặp lại bước 9 ở trên cho keyframe thứ 10, 15 và 20 Sau khi tạo chuyển
động cho keyframe trên Layer1 này, bạn có thể xem chúng diễn hoạt bằng cách nhấn
phím Enter
Các keyframe trên Layer Banh Xe
11 Lặp lại từ bước 5 cho đến bước 10 để tạo ra thêm một bánh
bánh xe này là Graphic Banh Xe Nguoc, tạo bánh xe xoay ngượcchiều kim đồng hồ
Trang 612 Bây giờ bạn tạo mới một Symbol nữa bằng cách chọn trên trình đơn Insert > New
Symbol và đặt tên cho mục Name trong hộp thoại Symbol
Properties là Hai Banh Xe
Xoay, mục Behavior chọn là Graphic Sau đó chọn OK
Trang 713 Bảo đảm rằng cửa sổ thư viện vẫn còn xuất hiện trong vùng làm việc Chọn mục
Graphic Banh Xe và kéo biểu tượng bánh xe xoay vào trong vùng làm việc tại
16 Nhấp chuột tại keyframe thứ 30 trên Layer3 (Layer có thanh
ngang) và nhấn phím F6
Sau đó trở lại keyframe thứ nhất trên Layer này và nhấp phải chuột chọn lệnh Create
Motion Tween có trong trình đơn Context xuất hiện sau đó tại thanh thước Timeline
Trang 817 Bạn cũng lập lại bước 16 cho Layer1 và Layer2 Sau đó nhấp chuột tại keyframe cuối
cùng (keyframe thứ 30) trên Layer1 và nhấn giữ phím Shift trong khi đó nhấp chuột
vào keyframe cuối cùng trên Layer2 và Layer3
Trang 9Nhấp chuột di chuyển ba đối tượng chọn này và di chuyểntrên một đường thẳng hướng sang phải một khoảng cáchngắn nào đó tùy thích
18 Nhấn phím Enter sau khi hoàn tất công việc tạo chuyển động cho các đối tượng trong
Graphic Symbol này để xem chúng diễn hoạt Sau đó bạn có thể chỉnh sửa lại chúng
Thế là bạn vừa tạo xong 2 bánh xe chuyển động
19 Bạn chọn trên trình đơn Insert > New Symbol để tạo ra đối tượng là 2 bánh xe đứng
yên Trong mục Name tại hộp thoại Symbol Properties nhập vào là Hai Banh Xe
Dung Yen, mục Behavior chọn là Graphic
20 Sau đó bạn kéo hai bánh xe
trong mục Hai
Banh Xe Xoay tại cửa sổ thư viện
21 Chọn tiếp trình đơn Insert > New Symbol nữa và chọn các
Symbol Properties như sau:
Trang 1022 Nhấp chuột tại Layer1 và đặt tên lại là Layer ThungXe Sau đó chọn công cụ
Rectangle Tool và công cụ Line Tool trong hộp công cụ bên trái giao diện và vẽ vào
trong vùng làm việc khung xe tải và dùng công cụ Text Tool nhập ký tự vào và đặt
trên thân xe như hình sau
Trang 1123 Sau đó bạn chọn tiếp trên trình đơn Insert > New Symbol và chọn như sau:
24 Bây giờ bạn kéo biểu tượng chiếc xe tải, có tên là Thung Xe,xuất hiện trong cửa sổ
thư viện vào trong vùng làm việc hiện hành tại Layer1 Đặt
tên lại cho Layer1 này là
Layer Thung Xe
Trang 1325 Chọn trình đơn Insert > Layer và đặt tên cho Layer mới này là Layer Hang Sau đó
bạn dùng công cụ Pencil Tool trong hộp công cụ bên trái giao diện vẽ trên Layer này
đối tượng như hình bên dưới và đừng quên tô màu vàng nhạtcho đối tượng vừa tạo
26 Tiếp đến bạn hãy nhấn Ctrl + G để nhóm đối tượng vừa vẽ trong bước 25 ở trên Bây
giờ bạn di chuyển đối tượng này đến vị trí ngay phía thùng saucủa xe Bạn nhớ kéo
Layer Hang xuống phía trước Layer Thung Xe để Layer Hang xuất hiện phía sau
Layer Thung Xe
27 Chọn Insert > New Symbol và đặt tên tại mục Name là Xe
Behavior là Graphic
Trang 1528 Sau đó bạn kéo mục Thung Xe Day
Hang xuất
hiện tại cửa sổ thư viện vào trong
vùng làm việc
hiện hành Nhấp chuột chọn đối
tượng thùng xe
này và chọn trên trình đơn Modify
> Break
Apart để tách biệt hai đối tượng
hàng nằm bên
trên thùng xe và đối tượng khung
xe mà bạn
vừa kéo từ trong cửa sổ thư viện
vào trong vùng
làm việc
Đối tượng trước và sau khi chọn lệnh Break Apart
29 Bây giờ bạn nhấp chuột vào đối tượng hàng nằm bên trên thùng xe và nhấn phím Ctrl
+ X để cắt đối tượng này Sau đó bạn tạo mới một Layer nữa và đặt tên là Layer
Hang Bây giờ bạn nhấn phím Ctrl + V để dán đối tượng vừa cắt vào trong Layer
Hang này
Trang 16Đối tượng hàng được sắp xếp nằm trên đối tượng thùng xe
Trang 1730 Chọn trên trình đơn Insert > Layer để tạo mới một Layer nữa và đặt tên là Cua Do
Dùng công cụ Line Tool trong hộp công cụ và vẽ một đườngthẳng đứng vào trong
vùng giao diện và đặt đối tượng này ngay phía sau thùng xe
Di chuyển đường thẳng đứng vào phía sau thùng xe
31 Nhấp chuột tại keyframe thứ 30 trên Layer Cua Do và nhấn
chuyển động
Trang 1932 Nhấp phải chuột tại keyframe thứ nhất trên Layer Cua Do
Motion Tween trong trình đơn Context để tạo chuyển động choLayer này
33 Nhấp chuột vào keyframe thứ 30 lần lượt trên Layer Hang và
nhấn phím F6 cho Layer Hang rồi đến Layer Thung Xe
34 Nhấp chuột trở lại keyframe thứ nhất trên Layer Hang và
Tween trong trình đơn Context
35 Nhấp chuột tại ví trí keyframe cuối cùng trên Layer Hang và
hàng trên thùng xe xuống phía dưới
Nhấp chuột vào keyframe cuối cùng trên Layer Hang để tạo chuyển động kết thúc
Trang 2136 Lúc này bạn nhấp chuột vào Layer Hang này và kéo xuống
dưới Layer Thung Xe để
cho đống hàng trên mui xe xuất hiện ra phía sau thùng xe Có
như thế bạn mới có thể
thấy được đống hàng phía sau thùng xe chuyển động mà
không có bất kỳ những thay
đổi trên Layer Hang này
37 Bây giờ bạn tạo mới thêm một Layer nữa và đặt tên cho nó
là Layer Do Hang Nhấp
chuột tại keyframe thứ 5 trên Layer Do Hang này và nhấp phải
chuột chọn lệnh Insert
Keyframe
38 Lúc này bạn sẽ thấy một keyframe thứ 5 trống xuất hiện trên Layer
Do Hang
Trang 2339 Nhấp chuột vào keyframe thứ 5 trên Layer Cua Do
và nhấn phím F6
Nhấp chuột chọn keyframe thứ 5 này Sau đó chọn
công cụ Arrow Tool
và chọn công cụ bổ sung là Rotate, xoay đối tượng
đường thẳng gắn vào
phía sau xe đã nói trong bước 30 một góc 450
Đối tượng đường thẳng trước khi dùng công cụ Rotate để xoay một góc 45 0
Đối tượng đường thẳng sau khi xoay một góc 45 0
40 Lặp lại bước 39 cho
keyframe thứ 10 trên
Layer Cua Do này Bạn
hãy xoay một góc 750
tiếp theo đường
Trang 24Cạnh của đường thẳng lệch góc với cánh
của thùng phía sau xe
Trang 2541 Bạn làm tiếp tương tự tại keyframe thứ 15 nhưng bạn hãy xoay
xuống đối với thùng xe như hình sau
Các đối tượng sau khi dùng các phím mũi tên hiệu chỉnh xong
42 Nhấp chuột vào keyframe thứ 20 trên Layer Cua Do và xoay
ngược lên trên
43 Lặp lại các bước trên cho đến vị trí keyframe cuối cùng
đường thẳng trở lại vị trí đứng thẳng, sát vào thành saucủa xe
Đường thẳng tại keyframe 23 và 25
Trang 27Đường thẳng tại keyframe 27 và 30
44 Nhấp chuột trở lại keyframe thứ 5 trống trong Layer Do Hang vàchọn công cụ Pencil
Tool trong hộp công cụ Sau đó vẽ thêm vào phía sau xe trong vùng làm việc như hình
bên dưới và tô màu cùng màu với màu trong đống hàng bên trên
Công cụ Pencil Tool
45 Nhấp chuột tại keyframe thứ 6 trên Layer Do Hang và nhấn phím F6 Tại đây bạn
dùng công cụ Pencil Tool và vẽ thêm vào trong vùng trống còn lại cho kín, phủ kín
vùng trống và tô màu cho đến khi vùng màu bạn tô chạm vào thanh đứng
Trang 28Keyframe trước khi tô màu phủ kín vùng
Trang 2946 Nhấn phím F6 đối với keyframe tiếp theo và tô cùng màu trên vùng tiếp theo
Bạn cứ lập lại bước trên như thế cho đến keyframe thứ 19
(keyframe mà thanh cửa thẳng trong Layer Cua Do xoay ngược
trở lên) thì không thực hiện việc chọn nhấn phím F6 nữa
Sau đây là một số ảnh minh hoạ tiêu biểu mà bạn dùng
công cụ Pencil Tool và hộp màu Fill Color tạo ra cho một số
keyframe xuất hiện trong giao diện
Đối tượng tại keyframe thứ 5
Đối tượng tại keyframe thứ 8
TỦ SÁCH STK - THẾ GIỚI ĐỒ HỌA 335 BIÊN SOẠN : KS PHẠM QUANG HUY
Trang 30GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP - TỰ HỌC MACROMEDIA FLASH BẰNG HÌNH ẢNH CHƯƠNG 15
Đối tượng tại keyframe thứ 13
Đối tượng tại keyframe thứ 14
Đối tượng tại keyframe thứ 18
Trang 3147 Lúc này bạn kết thúc vùng vẽ mà bạn thực hiện theo thao tác frame by frame và nhấp
chuột tại keyframe cuối cùng (keyframe thứ 30 trên Layer Do Hang) và nhấn phím
F6
Đối tượng tại keyframe thứ 19
Đối tượng tại keyframe thứ 30
48 Sau đó bạn lưu tất các các thuộc tính đã tạo ra và trở lại
cách nhấp chuột vào vùng Scene tại góc trái trên trongvùng Layer
Trang 3349 Nhấp chuột tại Layer1 và đặt tên lại là Layer Xe Nhấp
Day Hang trên cửa số thư viện và kéo đối tượng này vàotrong vùng làm việc
50 Tạo mới 2 Layer tiếp theo và đặt tên cho từng Layer là Layer
Banh Xe Nhấp chuột vào keyframe thứ nhất tại Layer DuongRay
51 Chọn công cụ Line Tool, sau đó chọn trên trình đơn Window > Panels > Stroke
Bảng Stroke xuất hiện Nhấp chuột trên trình đơn dọc trong mụcSolid và chọn đường
nét đứt khúc như hình bên dưới Chọn mục giá trị bên dưới
Trang 34từ trong cửa sổ thư
viện vào trong vùng làm việc Bạn có thể hiệu chỉnh kích thước của hai bánh xe này
lại cho phù hợp với chiếc xe bằng công cụ Arrow Tool, chọn Scale
Trang 3554 Bây giờ bạn sẽ tạo chuyển động cho các đối tượng Nhấp chuột tại keyframe thứ 40
tại Layer Duong Ray và nhấn phím F6 Sau đó bạn làm tương tự cho Layer Banh Xe
và Layer Xe
55 Nhấp chuột tại keyframe thứ nhất trên Layer Banh Xe và nhấp
Create Motion Tween trong trình đơn Context
56 Bây giờ bạn nhấp chuột tại keyframe thứ 40 trên Layer Xe
chiếc xe đến vị trí mới
Đối tượng xe trước khi di chuyển
Trang 37Đối tượng xe sau khi di chuyển
57 Nhấp chuột tại keyframe thứ 41 và nhấn phím F6 trên Layer Xe
58 Sau đó chọn mục Xe Do Hang trong cửa sổ thư viện và kéo
thế vị trí chiếc xe chở hàng tại keyframe thứ 41 này
Đối tượng chiếc xe tại keyframe thứ 41
Chú ý : Bạn có thể thay đổi kích thước của thùng xe bạn vừa kéotừ cửa sổ thư viện vào sao cho có cùng kích thước với đối tượngthùng xe ban đầu
59 Nhấp chuột tại keyframe thứ 41 trên Layer Banh Xe và nhấn phím F6 Sau đó kéo
mục Hai Banh Xe Dung Yen vào trong vùng làm việc và thay đổi kích thước cho phù
hợp với hai bánh xe lúc đầu Xoá hai bánh xe chuyển động ban đầu tại keyframe thứ
41 này thay thế bằng bánh xe đứng yên Sao chép thêm
Trang 38một cái nữa để có được hai
cái bánh xe
Trang 3960 Nhấp chuột tại keyframe
thứ 41 trên Layer Duong
Ray và nhấn phím F6
Các đối tượng tại keyframe thứ 41
61 Nhấp chuột tại keyframe
thứ 71 lần lượt trên tất
cả các Layer và nhấn
phím F6
Các đối tượng tại keyframe thứ 71
62 Bây giờ bạn nhấp chuột tại keyframe thứ 71 và nhấn phím F6 trên Layer Xe và mục
Thung Xe trên cửa sổ thư viện vào vùng làm việc và xoá đốitượng xe tải có hàng hoá
bên trên thay thế bằng xe tải không có hàng hoá Bạn có thể thay đổi kích thước cho
đối tượng trước và sau có cùng kích thước
Trang 4163 Chọn trên trình đơn Insert > New Symbol và đặt tên trong mục
Ve, mục Behavior chọn Graphic Sau đó chọn OK
64 Cách làm cũng thực hiện tương tự như bạn làm cho hai bánh
xe xoay theo cùng chiều
kim đồng hồ Nhưng ở đây chỉ có khác một chút là bánh
xe chạy từ bên phải chạy
sang
Vị trí ban đầu (ảnh bên trái) và vị trí kết thúc
Trang 4365 Bây giờ bạn nhấp chuột trở lại vùng làm việc chính Sau đó bạn nhấp chuột vào
keyframe thứ 71 trên Layer Banh Xe và nhấn phím F6 Kéo mụcHai Banh Xe Tro
Ve 2 lần vào thay thế cho hai bánh xe đứng yên như đã nói trong các bước trên
Hai bánh xe mới vừa thay vào bằng bánh xe chuyển động trong Layer 71
66 Nhấp chuột tại keyframe thứ 71 trên Layer Duong Ray
Các đối tượng tại keyframe thứ 71
67 Nhấp chuột vào keyframe thứ 110 trên Layer Duong Ray, Layer
Xe và nhấn phím F6 tiếp tục tạo các chuyển động cho cácLayer này
Trang 44Các keyframe vừa được tạo bằng cách nhấn phím F6
Trang 4568 Nhấp chuột tại keyframe thứ 71 trên Layer Xe và nhấp phải
Motion Tween trong trình đơn Context
69 Cuối cùng bạn nhấp chuột tại keyframe thứ 110 trên Layer Xe
đến vị trí như bạn đã đặt thùng xe trong keyframe đầu tiên
Các đối tượng tại keyframe cuối cùng (keyframe thứ 110)
70 Nhấp chuột tại keyframe thứ 110 tại Layer Banh Xe và di chuyển
thùng xe, hướng hai bánh xe hướng về điểm xuất phát đầutiên
71 Nhấn phím Ctrl + Enter để xem chúng diễn hoạt trong Flash Player Trong khi xem
chúng diễn hoạt không như mong muốn, có điều bất thường xảy ra Bạn có thể trở lại
Flash và xem từng vị trí nào đó không như mong muốn bạn có thể nhấn phím F6 tại
Trang 46keyframe đó và dùng các phím mũi tên để di chuyển chúng đến vị trí mong muốn
Chú ý : Trong khi đối tượng thùng xe di chuyển đến đâu thì các bánh
xe luôn luôn di chuyển theo đến đó kể cả lúc chúng di chuyển sangphải rồi sang trái
Trang 4772 Sau đó bạn có thể trang trí thêm các đối tượng phụ tùy thích
Đối tuợng chuyển động trong Flash Player
Như vậy trong phần bài thực hành ở trên, các bạn vừa thực
hiện công việc ghép từng đoạn phim ngắn lại với nhau tạo thành
một đoạn phim lớn trên cùng một giao diện Mà các đối tượng trong
các đoạn phim ngắn chỉ có một Flash đã hỗ trợ các chức năng
chuyển động, từ đó bạn có thể thêm vào các đoạn chuyển cảnh
cho các đoạn phim ngắn trước khi được kết hợp lại tạo thành một đoạn
phim lớn hoàn chỉnh
Trong phần thực hành ở trên, là ví dụ cho các bạn thấy chức
năng tạo ghép đối tượng, từng đoạn phim ngắn mà ở trong bài thực
hành này là trong từng Behavior ở chế độ Symbol là Graphic, sau đó
bạn dùng các Symbol Graphic này lại tạo thành một Symbol Graphic
khác và cứ thể tiếp tục Các Symbol Graphic cứ chất chồng lên
nhau và cuối cùng chúng ta dùng từng đoạn Symbol Graphic riêng
biệt để tạo thành một đoạn phim hoàn chỉnh
Đối tượng xe tải chuyển động đến một điểm nào đó rồi dừng lại thực hiện chức năng đổ hàng