GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 9 CÁCH TẠO RA CÁC ẢNH CHUYỂN ĐỘNG ANIMATION TỔNG QUAN VỀ CÁCH TẠO RA CÁC ANIMATION Bạn tạo ra các Animation bằng cách thay đổi nội dung của frame liên tiếp nhau. Bạn có thể tạo đối tượng di chuyển ngang qua vùng Stage, thay đổi kích thước, hướng xoay, màu sắc, hình dạng và cách làm cho đối tượng vào hay ra mờ dần (Fade In hay Fade Out). Những thay đổi này có thể xảy ra độc lập nhau hoặc kết hợp với những sự thay đổi khác. Ví dụ, bạn có thể tạo cho đối tượng xoay và khi nó di chuyển vào ngang qua vùng Stage mờ dần. Có hai cách để tạo ra một đối tượng Animation chuyển động liên tiếp trong Flash: chuyển động Animation theo frame-by-frame và Tweened Animation. Trong cách chuyển động Animation theo frame-by-frame, bạn phải tạo ra ảnh trong mỗi frame. Trong cách chuyển động theo Tweened Animation, bạn có thể tạo ra frame bắt đầu và frame kết thúc và cho phép Flash tạo ra nhiều frame trong khoảng giữa frame đầu và frame cuối này. Flash thay đổi kích thước, hướng xoay, màu sắc hoặc các thuộc tính khác ngang nhau giữa frame đầu và frame cuối để tạo ra ảnh thay đổi chuyển động về hình dáng. Cách chuyển động theo Tweened Animation là một cách có hiệu quả để tạo ra ảnh chuyển động và thay đổi liên tục trong khi đó kích thước file rất nhỏ. Trong cách chuyển động Tweened Animation này, Flash chỉ lưu lại các giá trò thay đổi giữa các frame. Trong cách chuyển động Animation theo frame-by-frame, Flash lưu lại các giá trò cho mỗi frame kết thúc. Để biết thêm cách hướng dẫn tạo ra ảnh chuyển động Animation này, bạn hãy tham khảo thêm tài liệu “ GIÁO TRÌNH THIẾT KẾ WEB : PHẦN THỰC HÀNH - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH” cùng tác giả . Chú ý : Ngoài ra bạn cũng có thể tạo ảnh chuyển động Animation bằng cách dùng Set Property action. Bạn có thể xem mục ActionScript Help để biết thêm chi tiết. CÁCH TẠO RA CÁC KEYFRAME Một keyframe là một frame mà nơi đó bạn thay đổi quá trình chuyển động Animation. Khi bạn tạo ra ảnh chuyển động Animation theo cách frame-by-frame, mỗi frame là một keyframe. Trong keyframe chuyển động theo cách Tweened Animation, bạn phải xác đònh tại những điểm quan trọng trong quá trình chuyển động và cho phép Flash tạo ra nội dung giữa các frame. Flash hiển thò các frame bổ sung của chế độ Tweened Animation như các màu xanh nhạt, xanh đậm có mũi tên vẽ giữa các keyframe. Flash sẽ vẽ lại hình dáng của đối tượng trong mỗi keyframe. Bạn chỉ nên tạo ra các keyframe tại những điểm đó trong ảnh thay đổi. Các Keyframe được xác đònh trong thanh thước Timeline : một keyframe có một vòng tròn đặt trên đó cho biết keyframe đó đang chứa dữ liệu và một keyframe trống thể hiện một đường thẳng đứng trước một frame. Các frame thêm vào sau đó trên cùng một layer sẽ có cùng một dữ liệu như keyframe. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 191 Giáo trình phân tích khả năng ứng dụng ngun lý chuyển động trên thanh thước timeline GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 9 Keyframe có chứa dữ liệu Keyframe trống Cách tạo ra một keyframe, bạn có thể chọn một trong những bước sau đây: • Chọn một frame trong thanh thước Timeline và chọn trên trình đơn Insert > Keyframe . • Nhấp phải chuột (trong Windows) hoặc nhấp Control (trong Macintosh) tại một frame trong thanh thước Timeline và chọn lệnh Insert Keyframe có trong trình đơn. CÁC BIỂU TƯNG CHUYỂN ĐỘNG ANIMATION TRÊN THANH THƯỚC TIMELINE Flash phân biệt chế độ chuyển động Tweened Animation với chế độ chuyển động frame-by-frame trong thanh thước Timeline như sau: Các keyframe chuyển động theo chế độ Tweening là Motion được xác đònh bằng dấu chấm đen và các frame Tween ở giữa liên tục và hai đầu có mũi tên màu đen cùng với nền Background có màu xanh nhạt. Các Keyframe chuyển động theo chế độ Tweening là Shape được xác đònh bằng dấu chấm đen và các frame Tween ở giữa liên tục và hai đầu có mũi tên màu đen cùng với nền Background có màu xanh lá cây. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 192 . GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 9 Một đường gạch cho biết các keyframe cuối cùng đang bò thiếu. Một keyframe đơn độc được xác đònh bằng một dấu chấm đen. Các frame có màu xám sáng sau một keyframe có chứa cùng dữ liệu và có một đường màu đen, một hình chữ nhật nhỏ rỗng ở frame cuối cùng. Một chữ a nhỏ chỉ ra rằng frame đó đã được gán một Action (hành động) trong bảng Actions. Một lá cờ màu đỏ cho biết frame đó có lời chú thích và frame đó có tên. CÁC LAYER TRONG ANIMATION Mỗi Scene trong Flash movie có thể gồm có nhiều Layer. Khi bạn tạo ảnh chuyển động, bạn dùng các Layer để sắp xếp các thành phần của một trình tự chuyển động và tách biệt các đối tượng chuyển động vì vậy chúng không xoá, kết nối hoặc phân rã lẫn nhau. Nếu bạn làm Flash chuyển động nhiều nhóm hoặc các Symbol cùng lúc, mỗi đối tượng phải ở trên từng Layer độc lập. Đặc biệt, Layer Background là một ảnh tónh, các Layer bổ sung chỉ chứa một đối tượng chuyển động độc lập với nhau. Các Layer xuất hiện thành hàng trong thanh thước Timeline Khi một đoạn phim có nhiều Layer, Track và hiệu chỉnh các đối tượng trong một hay nhiều Layer trở nên rất khó khăn. Công việc này trở nên dễ dàng nếu bạn làm việc với trên một dữ liệu trong từng Layer tại lúc nào đó. TỐC ĐỘ FRAME Một tốc độ frame quá chậm có thể làm cho ảnh chuyển động không liên tục. Đối với tốc độ frame quá nhanh có thể làm mờ chi tiết chuyển động. Một tốc độ frame 12 frame trên một giây (fps) thường cho kết quả tốt nhất khi xuất đoạn phim trên trang Web. Đoạn phim QuickTime và AVI movies có một tốc độ chung là 12 fps trong khi đó tốc độ ảnh chuyển động chuẩn là 24 fps. Độ chuyển động phức tạpï và tốc độ của máy tính đều ảnh hưởng đến tốc độ phát lại của đoạn phim. Kiểm tra đoạn phim chuyển động của bạn trên nhiều máy khác nhau để xác đònh tốc độ tối ưu cho các frame. Vì bạn chỉ xác đònh một tốc độ frame cho toàn đoạn phim Flash Movie, đó là một cách thiết lập tỉ lệ tốt nhất trước khi bạn bắt đầu tạo ra ảnh chuyển động. MỞ RỘNG ẢNH Khi bạn tạo ra một ảnh nền Background chuyển động, điều đó rất cần thiết cho việc tạo ra một ảnh tónh trong nhiều frame. Việc thêm vào các frame mới (không phải là keyframe) vào một Layer sẽ làm tăng kích thước dữ liệu của frame cuối trong tất cả các frame mới. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 193 . GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 9 Mở rộng ảnh trong nhiều frame: 1. Tạo một ảnh trong keyframe đầu tiên của đoạn phim. 2. Chọn một frame bên phải, tại vò trí frame cuối mà bạn muốn thêm vào. 3. Chọn trình đơn Insert > Frame . Dùng một Shortcut để mở rộng ảnh: 4. Tạo một ảnh trong keyframe đầu tiên. 5. Nhấn phím Alt và nhấp chuột vào keyframe sang phải. Điều này sẽ tạo ra một vùng mở rộng mới mà không cần một keyframe mới tại điểm cuối. TỔNG QUAN VỀ CHẾ ĐỘ CHUYỂN ĐỘNG TWEENED ANIMATION Flash có thể tạo ra 2 loại chuyển động của Tweened Animation. Chế độ Motion Tweening , bạn phải xác đònh các thuộc tính như vò trí, kích thước và hướng xoay cho một Instance, Group hoặc khối ký tự tại một điểm và sau đó bạn thay đổi các thuộc tính này tại một điểm khác. Chế độ Shape Tweening , bạn phải vẽ đối tượng tại một điểm và sau đó bạn thay đổi hình dạng hoặc vẽ một đối tượng khác tại một điểm khác. Flash sẽ thêm vào các giá trò hoặc hình dạng cho các frame giữa, tạo ra chuyển động. TẠO CHUYỂN ĐỘNG (TWEEN) CHO CÁC INSTANCE, NHÓM (GROUP) VÀ KÝ TỰ (TYPE) Để làm thay đổi các thuộc tính của các Instance, nhóm và ký tự, bạn sử dụng chế độ chuyển động Motion Tweening. Flash có thể thay đổi vò trí, kích thước, hướng xoay và kéo xiên các Instance, nhóm hoặc ký tự. Ngoài ra, Flash có thể thay đổi màu của Instance và ký tự, tạo ra sự chuyển đổi màu từ từ hoặc tạo ra một Instance ở chế độ vào hoặc ra mờ dần. Để thay đổi màu của các nhóm hoặc ký tự, bạn phải tạo cho chúng trở thành các Symbol. Bạn có thể xem mục “Cách tạo ra các Symbol” để biết thêm chi tiết. Nếu bạn thay đổi số frame giữa hai keyframe hoặc di chuyển nhóm hoặc Symbol trong keyframe, Flash sẽ tự động tween các frame này một lần nữa. Bạn có thể tạo ra chế độ chuyển động Motion Tweening dùng một trong hai cách sau: Cách Thứ Nhất : Tạo ra keyframe đầu và keyframe kết thúc cho quá trình chuyển động và dùng tùy chọn Motion trong mục Tweening từ bảng Frame Properties. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 194 . GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 9 Cách Thứ Hai : Tạo ra keyframe chuyển động đầu tiên và sau đó chọn trên trình đơn Insert > Create Motion Tween và di chuyển đối tượng đến vò trí mới trong vùng. Flash sẽ tự động tạo ra keyframe kết thúc. Khi thay đổi vò trí, bạn có thể tạo cho đối tượng di chuyển dọc theo một đường dẫn phi tuyến (Nonlinear Path). Ảnh ví dụ con ong tại frame thứ hai, ba và thứ tư là kết quả chuyển động từ keyframe đầu đến keyframe cuối cùng Tạo một ảnh chuyển động Motion Tween dùng tùy chọn Motion trong mục Tweening: 1. Nhấp chuột vào tên của Layer để kích hoạt nó trở thành Layer hiện hành và sau đó chọn một Keyframe trống trong Layer nơi bạn muốn tạo vùng chuyển động bắt đầu. 2. Tạo một Instance, nhóm hay một khối ký tự trong vùng Stage hoặc kéo một Instance của một Symbol trong cửa sổ thư viện Library. Để chuyển động đối tượng đã vẽ, bạn phải chuyển đổi đối tượng đó trở thành một Symbol. 3. Tạo keyframe thứ hai (keyframe kết thúc), nơi bạn muốn vùng chuyển động kết thúc bằng cách dùng chuột nhấp vào xác đònh vò trí frame cuối cùng. Sau đó bạn nhấp phải chuột chọn lệnh Insert Blank Keyframe có trong trình đơn để thêm vào các keyframe trống cho đoạn phim. Xác đònh vò trí frame cuối Chọn lệnh Insert Blank Keyframe TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 195 . GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 9 Sau khi chọn lệnh Insert Blank Keyframe 4. Sau đó bạn nhấp chuột vào keyframe thứ nhất. Tại đây bạn có thể thực hiện một trong những bước sau để thay đổi Instance, Group hoặc khối ký tự tại frame cuối cùng: Di chuyển đối tượng đến vò trí mới. Thay đổi kích thước, hướng xoay hoặc kéo xiên đối tượng. Thay đổi màu sắc của đối tượng (chỉ có Instance hoặc khối ký tự). Để thay đổi màu sắc của các thành phần khác ngoài Instance hoặc khối ký tự, bạn phải dùng chế độ chuyển động Shape Tweening. 5. Chọn trình đơn Window > Panels > Frame để xuất hiện bảng Frame. 6. Đối với mục Tweening, chọn Motion. Sau khi bạn chọn lệnh Motion trong mục Tweening, trên thanh thước Timeline xuất hiện các đường gạch trên keyframe 7. Nếu bạn muốn thay đổi kích thước của đối tượng như trong bước 4, bạn hãy chọn lệnh Scale trong trình đơn Modify > Transform để thay đổi kích thước của đối tượng đã chọn. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 196 . GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 9 8. Nhấp chuột vào kéo các phím mũi tên kế tiếp chọn giá trò trong mục Easing hoặc nhập vào giá trò để hiệu chỉnh tỉ lệ thay đổi giữa các frame chuyển động như: Khi bắt đầu chuyển động tốc độ chầm chậm sau đó tăng tốc hướng về phía kết thúc chuyển động, kéo con trượt lên hoặc nhập vào giá trò từ -1 đến -100. Khi bắt đầu, chuyển động có tốc độ rất nhanh sau đó giảm tốc chuyển động hướng về điểm kết thúc chuyển động, kéo con trượt xuống hoặc nhập vào giá trò dương từ 1 đến 100. Theo mặc đònh, tốc độ thay đổi giữa các frame liên tục. Mục Easing tạo ra hình dạng đối tượng xuất hiện nhỏ dần hoặc lớn dần bằng cách hiệu chỉnh tốc độ thay đổi của chúng. 9. Để xoay các đối tượng được chọn trong khi chuyển động, bạn có thể chọn một tùy chọn trong trình đơn Rotate: Chọn None (chế độ thiết lập mặc đònh) không ứng dụng chế độ xoay cho đối tượng. Chọn Auto xoay đối tượng chuyển động ít nhất một lần theo hướng xác đònh. Trong mục Rotate chọn Clockwise (CW) hay Counterclockwise (CCW) để xoay đối tượng theo hướng được xác đònh và sau đó nhập vào góc độ xoay. Chú ý : Hướng xoay này thêm vào bất kỳ hướng xoay nào bạn ứng dụng vào frame cuối cùng trong bước 4. 10. Nếu bạn đang dùng một đường dẫn chuyển động (Motion Path), chọn mục Orient to Path để đònh hướng đường biên chuyển động vào đường Motion Path. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 197 . GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 9 11. Chọn mục Synchronization để đảm bảo Instance diễn hoạt lặp đi lặp lại đúng trong đoạn phim. Dùng lệnh Synchronize nếu số frame quá trình chuyển động bên trong Symbol thậm chí không nhiều hơn số frame mà Instance Graphic giữ trong đoạn phim. 12. Nếu bạn đang dùng một đường Motion Path, chọn Snap để gắn các thành phần chuyển động vào đường Motion Path theo điểm khai báo (Registration Point). 13. Cuối cùng nhấp chuột vào keyframe cuối cùng vào kéo đối tượng đến vò trí xác đònh điểm dừng chuyển động để tạo ra đường Motion Tween. Bạn có thể xem ví dụ như hình bên dưới. 14. Đối tượng đã tạo xong và bạn có thể nhấn phím Enter để diễn hoạt đoạn phim vừa tạo. Lúc này bạn sẽ thấy ký tự “Flash” sẽ chuyển động từ trái sang phải. Đ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 198 . . trong trình đơn. CÁC BIỂU TƯNG CHUYỂN ĐỘNG ANIMATION TRÊN THANH THƯỚC TIMELINE Flash phân biệt chế độ chuyển động Tweened Animation với chế độ chuyển động frame-by-frame trong thanh thước Timeline. trên cùng một layer sẽ có cùng một dữ liệu như keyframe. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 191 Giáo trình phân tích khả năng ứng dụng ngun lý chuyển động trên thanh. frame trong thanh thước Timeline và chọn trên trình đơn Insert > Keyframe . • Nhấp phải chuột (trong Windows) hoặc nhấp Control (trong Macintosh) tại một frame trong thanh thước Timeline