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 BUỒNG NỔ ĐỘNG CƠ CHUYỂN ĐỘNG Trong phần bài thực hành này bạn sẽ tạo ra dùng một file ảnh nhập vào được vẽ từ các chương trình vẽ như Corel Draw hoặc Adobe Illustrator hoặc vẽ trực tiếp trong Flash một số ảnh biểu hiện từng giai đoạn chuyển động buồng đốt trong của của động cơ ô tô. Có nhiều cách để vẽ như có thể dùng Corel Draw hoặc Adobe Illustrator, sau đó bạn sẽ dùng Flash để ghép nối và kết hợp để tạo chuyển động cho các đối tượng đó. Bài thực hành này rất dễ thực hiện, sau khi bạn vẽ xong các đối tượng từ chương trình bên ngoài. Chú ý : Nếu vẽ trên Corel Draw, hãy xuất file vừa vẽ trong Corel (chọn trên trình đơn File > Export) với đònh dạng .ai (đònh dạng của Adobe Illustrator 7.0 ). Đối với Adobe Illustrator 7.0 trở lên chọn trên trình đơn File > Save As với version 7.0. Chỉ có đònh dạng này mới có thể import (nhập) vào Flash, các đối tượng đã vẽ trở thành từng đối tượng độc lập. Khi đó bạn chỉ việc bỏ nhóm thì các đối tượng đó sẽ giống như bạn vẽ chúng trực tiếp trong Flash vậy. Giả sử bạn có 4 giai đoạn của động cơ đốt trong đã vẽ xong như sau và nhờ Flash làm chuyển động các giai đoạn này. Bạn hãy làm theo các bước hướng dẫn sau đây sau khi vẽ xong các đối tượng và xuất thành file với đònh dạng .ai từ trong Corel Draw : Tạo file mới hoàn toàn trong Flash bằng cách chọn trên trình đơn File > New. Nhấp chuột vào trình đơn Insert > New Symbol sau đó chọn các thuộc tính trong hộp thoại Symbol Properties như sau : Ghi chú : Do chỉ có 4 ảnh vẽ tại 4 giai đoạn của động cơ thôi, nếu khi diễn hoạt trong Flash theo chế độ frame by frame thì chúng chuyển động rất nhanh. Vì vậy chúng ta sẽ hiệu chỉnh lại làm cho các ảnh này chuyển động tương đối chậm. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 18 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ọn trên trình đơn File > Import để nhập file đã vẽ xong trong chương trình khác để nhập vào trong Flash. Chọn file cần nhập vào sau đó nhấp chuột vào nút Open trong hộp thoại Import. Nhấp chuột vào nút Yes nếu bạn thấy hiển thò bảng thông báo sau. Khi đó đối tượng cần import xuất hiện trong vùng làm việc tại keyframe thứ nhất. Di chuyển đối tượng sao cho điểm khai báo nằm giữa đối tượng, bạn có thể dùng các đường guideline để xác đònh vò trí của đối tượng. Chú ý : Nếu không dùng các đường guideline để canh lề cho đối tượng này thì các đối tượng sau sẽ không biết vò trí. Từ đó có thể làm cho các đối tượng chênh lệch, chúng chuyển động không đúng vò trí. Nhấp phải chuột vào keyframe thứ nhất và chọn lệnh Create Motion Tween để tạo chuyển động. Nhấp chuột vào frame thứ 10 và nhấn phím F6 để tạo frame chuyển động. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 19 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 Nhấp chuột trên trình đơn Insert > Layer để tạo mới Layer có tên là Layer2. Nhấp chuột tiếp vào frame rỗng cuối cùng của Layer2 và nhấn phim F5 để thêm một frame rỗng. Khi đó chuỗi frame sẽ giống như hình bên dưới. Nhấn chuột vào frame 11 đang rỗng và nhấn phím F6 để chèn vào keyframe. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 20 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 Nhấp chuột vào keyframe 11 này và chọn tiếp trên trình đơn File > Insert, tìm file ảnh kế tiếp và nhập vào. Cách nhập giống như bạn đã thực hiện cho file ảnh trước đó. Sau đó di chuyển đối tượng này vào đúng vò trí đối tượng trong Layer1 trước đó nhờ các đường guideline. Đường Guideline Nhấp phải chuột vào keyframe thứ nhất và chọn lệnh Create Motion Tween, sau đó nhấp chuột vào frame 20 và nhấn phím F6. Bây giờ bạn có thể thực hiện tiếp tục các bước trên để đưa vào hai ảnh nữa và tạo các thuộc tính như bạn đã làm từ trước đến giờ. Khi kết thúc tại một số bước bạn sẽ có số frame như sau : THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 21 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 Nhấp chuột vào vùng Scene1 để trở về giao diện chính. Kéo đối tượng Movie Clip có tên DONG CO vừa vẽ đang xuất hiện trong cửa sổ thư viện (nhấn phím tổ hợp Ctrl + L để xuất hiện thư viện) vào trong vùng làm việc. Sau đó bạn có thể dùng công cụ Text Tool để nhập vào chuỗi ký tự. Chú ý : Tất cả các symbol và ảnh (nếu bạn nhập vào) vừa tạo đều xuất hiện trong thư viện Library. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 22 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ọn trên trình đơn Control > Test Movie để xem đoạn phim diễn hoạt. Đoạn phim đang diễn hoạt trong chế độ Flash Palyer THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 23 . Corel (chọn trên trình đơn File > Export) với đònh dạng .ai (đònh dạng của Adobe Illustrator 7.0 ). Đối với Adobe Illustrator 7.0 trở lên chọn trên trình đơn File > Save As với version 7.0 bằng cách chọn trên trình đơn File > New. Nhấp chuột vào trình đơn Insert > New Symbol sau đó chọn các thuộc tính trong hộp thoại Symbol Properties như sau : Ghi chú : Do chỉ có 4 ảnh. chỉnh lại làm cho các ảnh này chuyển động tương đối chậm. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 18 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN