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 . . . 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. 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. 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