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