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