Đây là phần mở đầu cơ bản mà các bạn khi thiết kế hoạt hình trên Flash cần phải quen thuộc. Trong bài tập này các bạn sẽ tạo một vòng tròn có màu di chuyển từ trái sang phải. Các bước được tiến hành như sau: 1. Khởi động chương trình Flash, nhấp chuột vào Start Programs Macromedia Flash 5 Flash 5.
GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH Hướng dẫn sử dụng công cụ arrow tool phương pháp làm key frame để tạo chuyển động scene CHƯƠNG 14 TWEEN HÌNH CHUYỂN ĐỘNG Trong tập bạn hướng dẫn cách tạo đối tượng chuyển động cách Tween hình Đây phần mở đầu mà bạn thiết kế hoạt hình Flash cần phải quen thuộc Trong tập bạn tạo vòng tròn có màu di chuyển từ trái sang phải Các bước tiến hành sau: Khởi động chương trình Flash, nhấp chuột vaøo Start > Programs > Macromedia Flash > Flash Cửa sổ làm việc xuất mở file có tên Movie1 Con trượt thước Timeline keyframe thứ Layer1 Giao diện vùng làm việc Flash TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 298 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 14 Chọn trình đơn File > Save hay Save As Sau nhấp chuột vào mục File name hộp thoại Save As đặt tên cho file “Tween -1” Sau nhập xong nhấp chuột vào nút Save Bây bạn nhấp chuột vào công cụ Oval Tool từ bảng công cụ nhấn phím O bàn phím để kích hoạt công cụ vẽ Sau nhấp chuột vào cửa sổ hình làm việc kéo chuột bạn tạo vòng tròn vừa ý Con trỏ chuột biến đổi thành hình tròn chữ thập Bạn chọn màu để tô màu muốn đổi màu cho vòng tròn nhấp chuột vào hộp màu Fill Color chọn màu tô màu cho đối tượng Giả sử chọn màu xanh (Blue) có bảng màu TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 299 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 14 Nhấp chuột chọn công cụ Arrow Tool hộp công cụ hay nhấn phím V bàn phím Sau bạn nhấp đúp chuột vào đối tượng vòng tròn để chọn đường viền vòng tròn Lúc Timeline khung keyframe, vạch màu đỏ tượng trưng cho vị trí đầu phát keyframe thứ Bạn nhấp chuột vào keyframe thứ Layer1 Chọn trình đơn Insert > Create Motion Tween Đối tượng xuất đường khung màu xanh nhạt bao quanh đối tượng với dấu cộng vòng tròn Ở cửa sổ keyframe, bạn nhấp chuột keyframe mong muốn di chuyển vòng tròn đến vị trí (ở nhấp chuột keyframe 30) Khi nhấp chuột vào keyframe vừa chọn vệt màu đen xuất bên thước Timeline TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 300 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 14 Chú ý : Bạn phải nhấp chuột tương ứng với Layer hành chọn Bạn không nên nhấp chuột lên phía xuống phía 10 Bây bạn chọn trình đơn Insert > Keyframe nhấn phím F6 để tạo đường chuyển động cho đối tượng Sau Layer1 hành có đường mũi tên từ keyframe thứ hướng đến keyframe 30 xuất Chú ý : Để di chuyển vòng tròn chạy theo phương nằm ngang (hay phương khác xác hơn) bạn nên cho xuất ô lưới hình làm việc cách chọn trình đơn View > Grid > Show Grid hay nhấn phím Ctrl + phím dấu nháy đơn (‘) TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 301 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 14 11 Bây bạn nhấp chuột vào keyframe cuối thước Timeline Sau kéo vòng tròn đến vị trí nơi mà bạn muốn đối tượng dừng chuyển động Chú ý : Nếu bạn muốn vị trí nằm ngang thẳng hàng so với điểm ban đầu, bạn nhớ nhấn thêm phím Shift di chuyển vòng tròn Vòng tròn vị trí đầu (bên trái) vị trí cuối chuyển động 12 Cuối bạn nhấn phím Enter bàn phím hay nhấn nút Play công cụ Controller để xem kết vừa thực Nếu vòng tròn diễn hoạt từ điểm đầu đến điểm cuối bạn thành công Đoạn phim diễn hoạt keyframe thứ 20 13 Chọn trình đơn File > Save để lưu file lại TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 302 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 14 TẠO HAI VÒNG TRÒN CHUYỂN ĐỘNG NGƯC CHIỀU NHAU Bài tập tương tự tập tạo hai vòng tròn chạy ngược chiều Trong tập ta tạo vòng tròn màu xanh chạy từ trái sang phải, bạn tiếp tục làm theo bước sau để tạo vòng tròn màu đỏ chạy ngược lại từ phải sang trái Mở lại file vừa lưu với tên file Tween-1 vừa thực hành Tạo thêm Layer cách chọn trình đơn Insert > Layer hay nhấp chuột vào nút dấu cộng bên tên Layer thước Timeline Layer2 xuất vùng bôi đen cho biết hành bạn làm việc Layer2 Nhấp chuột vào keyframe thứ Layer2 Bạn chọn công cụ Oval Tool hộp công cụ Sau nhấn giữ phím Shift vẽ vòng tròn màu đỏ góc phải vùng làm việc Các bước tiến hành tạo chuyển động cho vòng tròn đỏ từ phải sang trái tương tự tập Nhấp chuột vào keyframe thứ Layer2 chọn trình đơn Insert > Create Motion Tween TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 303 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 14 Nhấp chuột vào keyframe thứ Layer2 Nhấp chuột vào keyframe cuối Layer2 (keyframe 30) Sau nhấp chuột vào vòng tròn màu đỏ kéo sang trái Cuối bạn nhấn phím Enter hay chọn trình đơn Control > Play hay chọn Control > Test Movie để diễn hoạt đoạn phim Flash Player Đoạn phim diễn hoạt TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 304 BIÊN SOAÏN : KS PHAÏM QUANG HUY ... Insert > Keyframe nhấn phím F6 để tạo đường chuyển động cho đối tượng Sau Layer1 hành có đường mũi tên từ keyframe thứ hướng đến keyframe 30 xuất Chú ý : Để di chuyển vòng tròn chạy theo phương. .. với dấu cộng vòng tròn Ở cửa sổ keyframe, bạn nhấp chuột keyframe mong muốn di chuyển vòng tròn đến vị trí (ở nhấp chuột keyframe 30) Khi nhấp chuột vào keyframe vừa chọn vệt màu đen xuất bên... bạn làm việc Layer2 Nhấp chuột vào keyframe thứ Layer2 Bạn chọn công cụ Oval Tool hộp công cụ Sau nhấn giữ phím Shift vẽ vòng tròn màu đỏ góc phải vùng làm việc Các bước tiến hành tạo chuyển động