15TAO XE TAI CHUYEN DONG

<span class='text_page_counter'>(1)</span>GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. TẠ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ần bài tập thiết kế những mẫu ảnh nhỏ để hỗ trợ cho trang Web của bạ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ạn cuố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ở file mới và đặt tên là “Xe Tai”. Kích thước file bạn có thể chọn tùy thích. 2. Choïn treân trình ñôn Insert > New Symbol vaø nhaäp vaøo muïc Name laø Banh Xe vaø mục Behavior là Graphic. Sau đó chọn OK.. 3. Taïi Layer 1 maëc ñònh baïn ñaët teân laïi laø Banh Xe. Sau đó dùng công cụ Oval Tool trong hộp công cụ vaø veõ voøng troøn vaø gaén theâm caùc raêng phuï xung quanh baùnh xe nhö hình beân caïnh. Chú ý : Vòng tròn trên bánh xe có ba lớp màu khác nhau. Bạn có thể vẽ ba vòng tròn khác nhau sau đó ghép chồng vào nhau. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 321. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(2)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 4. 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. Choïn treân trình ñôn Insert > New Symbol vaø nhaäp vaøo muïc Name laø Graphic Banh 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 vuøng laøm vieäc.. 7. Bảo đảm rằng đối tượng bánh xe đang được chọn, nhấp chuột tại keyframe thứ 20 trên thanh thước. Sau đó nhấn phím F6 để tạo chuyển động cho bánh xe.. 8. Chọn trở lại keyframe thứ nhất trên Layer Banh Xe và nhấp phải chuột chọn lệnh Create Motion Tween trong trình ñôn Context. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 322. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(3)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. Chọ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.. Caùc keyframe treâ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 xe nữa nhưng đặt tên cho. bánh xe này là Graphic Banh Xe Nguoc, tạo bánh xe xoay ngược chiều kim đồng hồ.. 12. 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. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 323. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(4)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 13. 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 Layer1. 14. Chọn trên trình đơn Insert > Layer để tạo mới tiếp cho Layer2. Bạn cũng kéo bánh xe xoay tại cửa sổ thư viện như đã nói trong bước 12 ở trên vào trong Layer2 này và sắp đặt trong vùng làm việc sao cho hai bánh xe này có khoảng cách cố định.. 15. Tạo mới tiếp một Layer thứ 3 và dùng công cụ Rectangle Tool trong hộp công cụ, sau đó vẽ trên Layer này một thanh vuông ngang nối liền bánh xe trước và bánh xe sau nhö hình sau.. 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.. 17. 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 vaøo keyframe cuoái cuøng treân Layer2 vaø Layer3. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 324. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(5)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. Nhấp chuột di chuyển ba đối tượng chọn này và di chuyển trên một đường thẳng hướng sang phải một khoảng cách ngắ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, muïc Behavior choïn laø 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 vào trong Symbol Hai Banh Xe Dung Yen naøy. Luùc naøy bạn sẽ có được 2 bánh xe đứng yên.. 21. Chọn tiếp trình đơn Insert > New Symbol nữa và chọn các mục trong hộp thoại Symbol Properties nhö sau:. 22. Nhấp chuột tại Layer1 và đặt tên lại là Layer ThungXe. Sau đó chọn công cụ Rectangle Tool vaø coâng cuï Line Tool trong hoäp coâng cuï beân traùi giao dieän vaø veõ vaø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 treân thaân xe nhö hình sau. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 325. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(6)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 23. 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ö vieän vaøo trong vuøng laøm vieäc hieän haønh taïi Layer1. Ñaët teân laïi cho Layer1 naøy laø Layer Thung Xe.. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 326. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(7)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 25. Chọn trình đơn Insert > Layer và đặt tên cho Layer mới này là Layer Hang. Sau đó baïn duøng coâng cuï Pencil Tool trong hoäp coâng cuï beân traùi giao dieän veõ treân Layer naøy đối tượng như hình bên dưới và đừng quên tô màu vàng nhạt cho đố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 sau củ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. Choïn Insert > New Symbol vaø ñaët teân taïi muïc Name laø Xe Do Hang vaø choïn Behavior laø Graphic.. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 327. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(8)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 28. 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 naøy vaø choïn treâ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 laøm vieä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 naøy.. Đối tượng hàng được sắp xếp nằm trên đối tượng thùng xe TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 328. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(9)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 30. 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 đường thẳ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 phím F6 để tạo đường chuyển động.. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 329. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(10)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 32. Nhấp phải chuột tại keyframe thứ nhất trên Layer Cua Do và chọn lệnh Create Motion Tween trong trình đơn Context để tạo chuyển động cho Layer này.. 33. Nhấp chuột vào keyframe thứ 30 lần lượt trên Layer Hang và Layer Thung Xe, sau đó 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à chọn lệnh Create Motion 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à di chuyển đối tượng 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. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 330. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(11)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 36. 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.. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 331. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(12)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 39. 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 450. Đối tượng đường thẳng sau khi xoay một góc 450. 40. Lặp lại bước 39 cho keyframe thứ 10 trên Layer Cua Do naøy. Baïn haõy xoay moät goùc 750 tiếp theo đường thẳng, lúc này đường thẳng có thể bị lệch góc với cạnh của thùng xe do đó bạn coù theå di chuyeån sao cho chuùng coá ñònh. Cạnh của đường thẳng lệch góc với cánh cuûa thuøng phía sau xe. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 332. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(13)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 41. Bạn làm tiếp tương tự tại keyframe thứ 15 nhưng bạn hãy xoay đường thẳng hơi dốc 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 thẳng hướng 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. Tại keyframe cuối cùng đường thẳng trở lại vị trí đứng thẳng, sát vào thành sau của xe.. Đường thẳng tại keyframe 23 và 25 TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 333. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(14)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. Đườ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.. Coâng cuï 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 duøng coâng cuï Pencil Tool vaø veõ theâm vaøo trong vuøng troáng coøn laïi cho kín, phuû 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.. Keyframe trước khi tô màu phủ kín vùng TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 334. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(15)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 46. 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 maøu Fill Color taïo ra cho moät soá keyframe xuaát hieän trong giao dieä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.

<span class='text_page_counter'>(16)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 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. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 336. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(17)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 47. 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 vùng làm việc chính bằng caùch nhaáp chuoät vaøo vuøng Scene taïi goùc traùi treân trong vuøng Layer.. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 337. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(18)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 49. Nhaáp chuoät taïi Layer1 vaø ñaët teân laïi laø Layer Xe. Nhaáp chuoät choïn muïc Thung Xe Day Hang trên cửa số thư viện và kéo đối tượng này vào trong 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 Duong Ray và Layer Banh Xe. Nhấp chuột vào keyframe thứ nhất tại Layer Duong Ray. 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ục Solid 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 là 3.. 52. Bây giờ bạn bắt đầu vẽ vào trong vùng làm việc tại Layer Duong Ray.. 53. Nhấp chuột tiếp tại Layer Banh Xe và kéo mục Hai Banh Xe Xoay từ 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.. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 338. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(19)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 54. 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 vaø Layer Xe. 55. Nhấp chuột tại keyframe thứ nhất trên Layer Banh Xe và nhấp phải chuột chọn lệnh 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 và di chuyển đối tượng chiếc xe đến vị trí mới.. Đối tượng xe trước khi di chuyển. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 339. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(20)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. Đố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 vào vùng làm việc thay 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éo từ cửa sổ thư viện vào sao cho có cùng kích thước với đối tượng thù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 một cái nữa để có được hai caùi baùnh xe. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 340. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(21)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 60. Nhaáp chuoät taïi keyframe thứ 41 trên Layer Duong Ray vaø nhaán phím F6.. Các đối tượng tại keyframe thứ 41. 61. Nhaáp chuoät taïi keyframe thứ 71 lần lượt trên tất caû caùc Layer vaø nhaá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á đối tượ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. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 341. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(22)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 63. Choïn treân trình ñôn Insert > New Symbol vaø ñaët teân trong muïc Name laø Banh Xe Tro 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. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 342. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(23)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 65. 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ục Hai 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 Banh Xe và Layer Xe và nhấn phím F6 tiếp tục tạo các chuyển động cho các Layer này.. Các keyframe vừa được tạo bằng cách nhấn phím F6 TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 343. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(24)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 68. Nhấp chuột tại keyframe thứ 71 trên Layer Xe và nhấp phải chuột chọn lệnh Creat 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 và di chuyển thùng 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 hai bánh xe đi theo. thùng xe, hướng hai bánh xe hướng về điểm xuất phát đầu tiê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 keyframe đó 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 sang phải rồi sang trái. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 344. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(25)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. 72. 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. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 345. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(26)</span> GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BAØI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH. CHÖÔNG 15. Sau khi để hàng chạy trở về vị trí xuất phát ban đầu. Các bạn đã hoàn thành xong bài tập. Chúc các bạn thành công !. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA. 346. BIÊN SOẠN : KS PHẠM QUANG HUY.

<span class='text_page_counter'>(27)</span>