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ề cách tạo graphic movie chuyển động bằng key sence trong đồ họa . . 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 26. Nhấn phím Enter để xem đoạn phim diễn hoạt. Khi đó bạn sẽ thấy kết quả của bạn đang thực hiện, đoạn thẳng sẽ chuyển động sang phải rồi sang trái. 27. Tạo mới một symbol movie clip có tên Movie Action trong hộp thoại Symbol Properties. 28. Kéo đoạn phim có tên Line Movement từ cửa sổ thư viện vào trong vùng làm việc. 29. Nhấp chọn trên trình đơn Window > Panels > Instance, nhập vào mục Name trong bảng Instance là line trong khi đoạn Line Movement phim đang chọn. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 225 . . 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 30. Tạo mới Layer2, dùng công cụ Rectangle Tool vẽ vào vùng làm việc hình chữ nhật không có màu viền hoặc màu viền đen, màu tô là màu trắng (#FFFFFF). Sau đó nhóm đối tượng hình chữ nhật này bằng cách chọn trên trình đơn Modify > Group. Hãy di chuyển góc trái trên của hình chữ nhật nằm sát vào điểm khai báo của đoạn phim. 31. Nhấp chuột vào frame thứ 8 và nhấn phím F5 để thêm vào frame trống trên Layer1. 32. Nhấn phím F5 tại frame thứ 2 của Layer2, nhấp chọn frame này và xoá dữ liệu trong frame để trở thành frame rỗng hoàn toàn. 33. Nhấn phím F6 tại frame 7 và frame 8, nhấp chọn vào khoảng keyframe thứ nhất trên Layer2. Keyframe 7 và 8 trống trên thanh thước Timeline 34. Chọn trên trình đơn Window > Actions và nhập vào các dòng lệnh sau trong bảng Frame Actions ở chế độ Expert Mode. Bạn có thể xem lại các bài trước đó để biết cách chọn vào chế độ Expert Mode. escada = 1; THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 226 . . 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 line = 52; setProperty ("line", _visible, false); 35. Nhấp chuột vào khoảng keyframe trống từ frame 2 đến frame 6, nhập tiếp vào các lệnh sau: duplicateMovieClip ("line", "line" add escada, escada); setProperty ("line" add escada, _y, escada*5); setProperty ("line" add escada, _x, (line-escada)*6); setProperty ("line" add escada, _xscale, escada*5); 36. Nhấp chọn tiếp vào keyframe 7 và nhập tiếp vào các dòng lệnh trong bảng Frame Actions là: if (Number(escada)<Number(line)) { escada = Number(escada)+1; gotoAndPlay (2); } THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 227 . . . 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ề cách tạo graphic movie chuyển động bằng key sence. 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. 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