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 Trước khi hiệu chỉnh hướng xoay cho mũi tên trong Layer1 Sau khi hiệu chỉnh hướng xoay cho mũi tên trong Layer1 12. Trên từng keyframe bạn phải xác đònh từng điểm chạy và chọn lệnh Rotate trong trình đơn Modify > Transform sau đó xoay mũi tên sao cho nó nằm ngay trên đường quỹ đạo bạn cứ tiếp tục thực hiện cho đến keyframe cuối cùng vò trí mũi tên nằm ngay vò trí xuất phát đầu tiên. Xoay mũi tên sao cho nó nằm gom trên đường quỹ đạo TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 207 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 Chú ý : Khi đối tượng đến các chỗ cong bạn phải dùng công cụ xoay Rotate này lần nữa để hiệu chỉnh cho mũi tên nằm trên đường quỹ đạo như hình trang trước 13. Bạn có thể chia các keyframe không đều nhau tùy thuộc vào đường đi đến chỗ khúc cong của quỹ đạo mà chia cho phù hợp với đối tượng. 14. Bạn thực hiện tương tự từ bước 11 cho đến bước 13 cho mũi tên trong Layer2. Sau đó bạn sẽ có kết quả như hình bên dưới. Keyframe cuối cùng đối tượng dừng lại tại ví trí bắt đầu 15. Cuối cùng trước khi diễn hoạt chuyển động bạn muốn làm ẩn đường Motion Guide trong vùng Stage, bạn hãy nhấp chuột vào cột bên dưới con mắt trong Layer Motion Guide. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 208 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 Để diễn hoạt chuyển động, bạn hãy nhấn phím Ctrl + Enter để diễn hoạt ảnh trong môi trường Debug. Hai đối tượng đang chuyển động trong Flash Player Kết nối các Layer vào một Layer Motion Guide, bạn có thể thực hiện một trong những cách sau: Kéo Layer đang tồn tại bên dưới Layer Motion Guide. Bây giờ Layer này sẽ thục vào trong bên dưới Layer Motion Guide. Tất cả các đối tượng trong Layer này sẽ tự động bắt dính vào đường Motion Path. Tạo một Layer mới bên dưới Layer Motion Guide. Các đối tượng bạn chuyển động trong Layer này sẽ tự động chuyển động dọc theo đường Motion Path. Chọn một Layer bên dưới Layer Motion Guide. Chọn trên trình đơn Modify > Layer và chọn mục Guided trong hộp thoại Layer Properties. Nhấn phím Alt và nhấp chuột (trong Windows) hoặc nhấn phím Option và nhấp chuột (trong Macintosh) vào Layer muốn liên kết với Layer Motion Guide. Tháo bỏ các liên kết Layer từ một Layer Motion Guide: Chọn Layer bạn muốn bỏ liên kết. Sau đó bạn có thể thực hiện một trong những thao tác sau: TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 209 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 Kéo Layer bên dưới Layer Motion Guide. Chọn trên trình đơn Modify > Layer và chọn Normal trong mục chọn Type trong hộp thoại Layer Properties. • Nhấn phím Alt và nhấp chuột (trong Windows) hoặc nhấn phím Option và nhấp chuột (trong Macintosh) vào Layer muốn bỏ liên kết với Layer Motion Guide. CHUYỂN ĐỘNG BIẾN DẠNG CHẾ ĐỘ TWEENING SHAPE Với chế độ chuyển động Tweening Shape, bạn có thể tạo ra một hiệu ứng tương tự như hiệu ứng Morphing (viết tắt của từ Metamorphosing), một kỹ thuật tạo các hiệu ứng đặc biệt trong kỹ xảo hoạt hình, tạo cho một ảnh xuất hiện thay đổi liên tục thành một ảnh khác (biến hình). Ngoài ra Flash cũng làm chuyển động vò trí, kích thước và màu sắc của đối tượng. Kỹ xảo hoạt hình hay được sử dụng hơn gọi là tweening (viết tắt của chữ in-betweening), tạo cho máy tính có khả năng tính toán và vẽ các khung hình trung gian giữa các khung hình chính do các hoạ só vẽ bằng tay. Morphing chính là quá trình tweening vào một đối tượng khác. Khi bạn nhấp chuột vào nút Play, ảnh con Gà sẽ chuyển động biến dạng từ từ thành con Be â Khi bạn Tweening một đối tượng tại một lúc nào đó thường tạo ra kết quả tốt nhất. Nếu bạn muốn Tweening nhiều đối tương cùng lúc, tất cả các đối tượng này phải ở trên cùng một Layer. Flash không thể Tweening các đối tượng như Group, Symbols, ký tự hoặc ảnh Bitmap. Bạn phải sử dụng trình đơn Modify > Break Apart để gán chế độ Tweening Shape vào những đối tượng này. Để điều khiển các đối tượng không chắc có thực và nhiều thay đổi phức tạp, bạn hãy dùng chế độ Shape Hints, điều khiển từng phần trong ảnh gốc di chuyển thành đối tượng mới. Bạn có thể xem mục “Cách dùng Shape Hints (các hình gợi ý)” trong phần sau để biết thêm chi tiết. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 210 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 Tween một đối tượng: 1. Nhấp chuột vào tên của một Layer để kích hoạt Layer này hoạt động và chọn một keyframe trống nơi bạn muốn vùng chuyển động bắt đầu. 2. Tạo ảnh đối tượng cho frame đầu tiên. Bạn có thể dùng bất kỳ công cụ vẽ nào để tạo một đối tượng. Ví dụ, để đơn giản nhất bạn có thể vẽ hình tròn. 3. Tiếp đến bạn hãy tạo keyframe thứ hai có số frame mong muốn sau frame thứ nhất. 4. Tạo ảnh trong frame cuối cùng trong quá trình chuyển động. (Bạn có thể làm chuyển động hình dạng, kích thước, màu sắc và vò trí của đối tượng trong bước 2). Tại frame này bạn có thể dùng công cụ bút chì Pencil Tool và vẽ vào chữ ”Flash 5” chẳng hạn. 5. Sau đó bạn nhấp chuột trở về frame thứ nhất và chọn trên trình đơn Window > Panels > Frame . 6. Trong mục Tweening, chọn Shape. 7. Nhấp chuột và kéo mũi tên kế bên mục Easing hoặc nhập giá trò vào trong ô để hiệu chỉnh tốc độ thay đổi giữa các frame chuyển động: TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 211 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 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 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. 8. Chọn một tùy chọn trong mục Blend: Mục chọn với Distributive tạo ảnh chuyển động mà trong đó các đối tượng trung gian nhẳn hơn và không đều nhau. Mục chọn Angular tạo ảnh chuyển động mà vẫn giữ lại các biên rõ ràng và các đường thẳng trong đối tượng trung gian. Sau khi chọn xong tất cả các mục có trong bảng Frame, các frame của bạn trên thanh thước Timeline có hình giống như hình bên dưới Đối tượng được diễn hoạt bây giờ hình tròn biến thành chữ Flash5 Chú ý : Mục chọn với Angular chỉ thích hợp với các biên sắc nét và các đường thẳng. Nếu đối tượng của bạn không có các biên, Flash hoàn trở lại mục chọn Tween Shape là Distributive. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 212 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 DÙNG SHAPE HINT (CÁC HÌNH GI Ý) Để điều khiển các đối tượng không chắc có thực và nhiều thay đổi phức tạp, bạn hãy sử dụng Shape Hint. Chế độ Shape Hint này xác đònh các điểm tương ứng trong ảnh đầu và ảnh cuối. Ví dụ như nếu bạn đang chuyển động một bản vẽ khuôn mặt khi nó thay đổi nét mặt, bạn có thể dùng một ảnh gợi ý để đánh dấu vào mỗi con mắt. Sau đó, thay vì nét mặt trở thành một ảnh lộn xộn vô đònh trong khi ảnh vẫn thay đổi chuyển động, mỗi con mắt vẫn còn thay đổi, bạn có thể nhận biết được những độc lập nhau trong suốt quá trình chuyển động. Các hình giống nhau chuyển động có và không có các hình gợi ý riêng biệt Shape Hint có chứa các chữ cái từ (a đến z) để xác đònh các điểm tương xứng tại đối tượng bắt đầu và đối tượng kết thúc. Bạn có thể dùng đến 26 Shape Hint. Các Shape Hint nằm trong keyframe đầu tiên đều có màu vàng và màu xanh trong keyframe cuối. Các Shape Hint là màu đỏ nếu nó không nằm trên đường cong. Các Shape Hint có các ký tự a, b, c, d, e nằm trên đường cong có màu vàng trong khi đó Shape Hint ký tự f không nằm trong đường cong nên có màu đỏ TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 213 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ó được kết qủa tốt nhất khi các đối tượng chuyển động, bạn có thể làm theo những cách chỉ dẫn sau đây: Đối với các đối tượng chuyển động phức tạp, bạn hãy tạo ra các đối tượng trung gian và làm chuyển động chúng thay vì bạn chỉ xác đònh một đối tượng bắt đầu và đối tượng kết thúc. Bạn phải chắc chắn rằng các Shape Hint đều hợp lý. Ví dụ, nếu bạn đang dùng ba đối tượng Shape Hint cho một hình tam giác, ba tam giác này phải ở trong cùng một loại trong tam giác gốc ban đầu và tam giác được thay đổi. Loại trật tự này không thể là các chữ cái abc trong keyframe đầu và abc trong keyframe thứ hai được. Các Shape Hint cho kết quả tốt nhất nếu bạn đặt chúng vào theo hướng ngược chiều kim đồng hồ đầu góc trái trên của đối tượng. Cách dùng các Shape Hint: 1. Chọn keyframe đầu tiên trong tiến trình tạo chuyển động Shape Tweening. 2. Chọn trên trình đơn Modify > Transform > Add Shape Hint . Ảnh ở chế độ chọn Shape Hint đầu tiên xuất hiện vòng tròn màu đỏ có chứa ký tự nằm trên đối tượng. 3. Di chuyển ảnh gợi ý Shape Hint đến điểm bạn muốn đánh dấu. 4. Chọn keyframe cuối cùng trong chế độ chuyển động. Ảnh ở chế độ Shape Hint cuối cùng xuất hiện tại nơi nào đó trong đối tượng với ký tự “a” có vòng tròn màu xanh lá cây. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 214 . sau frame thứ nhất. 4. Tạo ảnh trong frame cuối cùng trong quá trình chuyển động. (Bạn có thể làm chuyển động hình dạng, kích thước, màu sắc và vò trí của đối tượng trong bước 2). Tại frame. theo hướng ngược chiều kim đồng hồ đầu góc trái trên của đối tượng. Cách dùng các Shape Hint: 1. Chọn keyframe đầu tiên trong tiến trình tạo chuyển động Shape Tweening. 2. Chọn trên trình. Distributive tạo ảnh chuyển động mà trong đó các đối tượng trung gian nhẳn hơn và không đều nhau. Mục chọn Angular tạo ảnh chuyển động mà vẫn giữ lại các biên rõ ràng và các đường thẳng trong