BÀI 4 Tạo họa hình cơ bản
1 like2,623 views
Làm việc với frame, keyframe và Timeline Các kỹ thuật tạo chuyển động: Motion Tween Shape tween Chuyển động Tween cổ điển Chỉnh sửa chuyển động với bảng Motion Editor Motion Guide layer Tùy chỉnh hoạt cảnh với Onion Skin Làm việc với frame, keyframe và Timeline Các kỹ thuật tạo chuyển động: Motion Tween Shape tween Chuyển động Tween cổ điển Chỉnh sửa chuyển động với bảng Motion Editor Motion Guide layer Tùy chỉnh hoạt cảnh với Onion Skin
More Related Content
What's hot (18)
Similar to BÀI 4 Tạo họa hình cơ bản (20)
![Huong dan sd power point[bookbooming.com]](https://cdn.slidesharecdn.com/ss_thumbnails/huongdansdpowerpointbookbooming-com-120921150233-phpapp02-thumbnail.jpg?width=560&fit=bounds)
More from MasterCode.vn (20)
BÀI 4 Tạo họa hình cơ bản
- 1. BÀI 4 TẠO HỌA HÌNH CƠ BẢN
- 2. NHẮC LẠI BÀI TRƯỚC Sử dụng symbol (biểu tượng) và Library Làm việc với những công cụ nâng cao trong Flash CS4: Spray Brush Mask Công cụ Deco Công cụ IK Sử dụng symbol (biểu tượng) và Library Làm việc với những công cụ nâng cao trong Flash CS4: Spray Brush Mask Công cụ Deco Công cụ IK ݺߣ 4 - Tạo hoạt hình cơ bản 2
- 3. MỤC TIÊU BÀI HỌC Làm việc với frame, keyframe và Timeline Các kỹ thuật tạo chuyển động: Motion Tween Shape tween Chuyển động Tween cổ điển Chỉnh sửa chuyển động với bảng Motion Editor Motion Guide layer Tùy chỉnh hoạt cảnh với Onion Skin Làm việc với frame, keyframe và Timeline Các kỹ thuật tạo chuyển động: Motion Tween Shape tween Chuyển động Tween cổ điển Chỉnh sửa chuyển động với bảng Motion Editor Motion Guide layer Tùy chỉnh hoạt cảnh với Onion Skin ݺߣ 4 - Tạo hoạt hình cơ bản 3
- 4. LÀM VIỆC VỚI FRAME, KEYFRAME VÀ TIMELINE
- 5. FRAME, KEYFRAME VÀ TIMELINE Bảng Timeline bao gồm 3 phần chính: Layer Frame keyframe ݺߣ 4 - Tạo hoạt hình cơ bản 5
- 6. FRAME, KEYFRAME VÀ TIMELINE Layer: Cho phép xếp chồng và tổ chức hình vẽ Cho phép điều khiển các phần tử trong dự án Flash cung cấp các layer đặc biệt: layer tweening (layer tạo hoạt hình tự động), layer mask (lớp mặt nạ), IK (Inverse Kinematics) Frame: Là nơi biểu diễn thời gian, dựa vào tỷ lệ khung hình/ giây Được hiển thị bởi các ô nhỏ đi ngang qua layer Tỷ lệ khung hình/ giây mặc định 24fps (frame per second) Layer: Cho phép xếp chồng và tổ chức hình vẽ Cho phép điều khiển các phần tử trong dự án Flash cung cấp các layer đặc biệt: layer tweening (layer tạo hoạt hình tự động), layer mask (lớp mặt nạ), IK (Inverse Kinematics) Frame: Là nơi biểu diễn thời gian, dựa vào tỷ lệ khung hình/ giây Được hiển thị bởi các ô nhỏ đi ngang qua layer Tỷ lệ khung hình/ giây mặc định 24fps (frame per second) ݺߣ 4 - Tạo hoạt hình cơ bản 6
- 7. FRAME, KEYFRAME VÀ TIMELINE Key frame: Là nơi đặt đối tượng hoặc thời điểm bắt đầu/ kết thúc một hành động trên Timeline Một keyframe có thể kéo dài tùy thuộc vào thời gian muốn nội dung của keyframe đó được hiển thị Theo mặc định, mỗi layer mới trong Timeline chứa một keyframe tại frame 1 Key frame: Là nơi đặt đối tượng hoặc thời điểm bắt đầu/ kết thúc một hành động trên Timeline Một keyframe có thể kéo dài tùy thuộc vào thời gian muốn nội dung của keyframe đó được hiển thị Theo mặc định, mỗi layer mới trong Timeline chứa một keyframe tại frame 1 ݺߣ 4 - Tạo hoạt hình cơ bản 7
- 8. FRAME, KEYFRAME VÀ TIMELINE Chọn frame thứ 15 trên Timeline Nhấn chuột phải (Windows) chọn Insert Keyframe Hoặc lựa chọn keyframe thứ 15, nhấn F7 ݺߣ 4 - Tạo hoạt hình cơ bản 8
- 9. KỸ THUẬT TẠO CHUYỂN ĐỘN
- 10. MOTION TWEEN Cơ chế tạo chuyển động trong Flash: khai báo vị trí bắt đầu và kết thúc của đối tượng trên Stage 3 kiểu chuyển động trong Flash: Motion tween Shape tween Classic tween Cơ chế tạo chuyển động trong Flash: khai báo vị trí bắt đầu và kết thúc của đối tượng trên Stage 3 kiểu chuyển động trong Flash: Motion tween Shape tween Classic tween ݺߣ 4 - Tạo hoạt hình cơ bản 10
- 11. MOTION TWEEN Motion tween -Là chuyển động trên một symbol instance -Bao gồm: thay đổi về vị trí, kích thước, hiệu ứng màu, hiệu ứng lọc -Để tạo Motion Tween: -Nhấn chuột phải (Windows) lên một keyframe chứa symbol instance -Chọn menu Create Motion Tween ݺߣ 4 - Tạo hoạt hình cơ bản 11
- 12. MOTION TWEEN Thực hiện với file fl0602.fla Tạo motion tween cho layer Airplane Một chuyển động với 24 frame được tạo ra trong layer này Thực hiện với file fl0602.fla Tạo motion tween cho layer Airplane Một chuyển động với 24 frame được tạo ra trong layer này ݺߣ 4 - Tạo hoạt hình cơ bản 12
- 13. MOTION TWEEN Di chuyển hình vẽ máy bay tới vị trí chính giữa tại frame 15 trên Timeline Nhấn và kéo playhead tới frame 15 Trên Stage: kéo hình máy bay đến vị trí chính giữa 1 đường thẳng xuất hiện trên Stage biểu thị cho quỹ đạo chuyển động của hình vẽ chiếc máy bay-đường thẳng này được gọi motion path Di chuyển hình vẽ máy bay tới vị trí chính giữa tại frame 15 trên Timeline Nhấn và kéo playhead tới frame 15 Trên Stage: kéo hình máy bay đến vị trí chính giữa 1 đường thẳng xuất hiện trên Stage biểu thị cho quỹ đạo chuyển động của hình vẽ chiếc máy bay-đường thẳng này được gọi motion path ݺߣ 4 - Tạo hoạt hình cơ bản 13
- 14. MOTION TWEEN ݺߣ 4 - Tạo hoạt hình cơ bản 14
- 15. MOTION TWEEN Tiếp theo: di chuyển vị trí máy bay từ điểm giữa tới điểm cuối cùng Trên Timeline: nhấn và kéo frame cuối tới frame 30 mở rộng thời gian chuyển động Tiếp theo: di chuyển vị trí máy bay từ điểm giữa tới điểm cuối cùng Trên Timeline: nhấn và kéo frame cuối tới frame 30 mở rộng thời gian chuyển động ݺߣ 4 - Tạo hoạt hình cơ bản 15
- 16. MOTION TWEEN Nhấn chọn frame 30 Trên Stage: kéo hình vẽ máy bay tới điểm cuối Nhấn Enter (Windows) để xem kết quả ngay trên Stage Nhấn Ctrl + Enter (Windows) để xem kết quả trên cửa sổ riêng (Control > Test Movie) Nhấn chọn frame 30 Trên Stage: kéo hình vẽ máy bay tới điểm cuối Nhấn Enter (Windows) để xem kết quả ngay trên Stage Nhấn Ctrl + Enter (Windows) để xem kết quả trên cửa sổ riêng (Control > Test Movie) ݺߣ 4 - Tạo hoạt hình cơ bản 16
- 17. MOTION TWEEN Quy tắc tạo Motion tween -Độ dài của một tween span theo mặc định bằng tỷ lệ khung hình/ giây -Các thành phần (bitmap, văn bản, hình vẽ …) phải được chuyển đổi thành dạng symbol -Chỉ có symbol hoặc hình vẽ mới có thể tạo được chuyển động đồng thời -Các tween span có thể chứa những sự thay đổi: về vị trí, kích thước, hiệu ứng màu, hiệu ứng lọc -Độ dài của một tween span theo mặc định bằng tỷ lệ khung hình/ giây -Các thành phần (bitmap, văn bản, hình vẽ …) phải được chuyển đổi thành dạng symbol -Chỉ có symbol hoặc hình vẽ mới có thể tạo được chuyển động đồng thời -Các tween span có thể chứa những sự thay đổi: về vị trí, kích thước, hiệu ứng màu, hiệu ứng lọc ݺߣ 4 - Tạo hoạt hình cơ bản 17
- 18. MOTION TWEEN Để tạo chuyển động cho nhiều hình vẽ: đặt từng hình vẽ lên từng layer khác nhau Mỗi thành phần khi được tạo chuyển động sẽ cần có: Tween span Layer tween Để tạo chuyển động cho nhiều hình vẽ: đặt từng hình vẽ lên từng layer khác nhau Mỗi thành phần khi được tạo chuyển động sẽ cần có: Tween span Layer tween ݺߣ 4 - Tạo hoạt hình cơ bản 18
- 19. SHAPE TWEEN Là kỹ thuật của vẽ hình Không làm việc với những symbol instance Yêu cầu phải tạo ra 2 keyframe để chứa nội dung bắt đầu và nội dung kết thúc Không có motion path chuyển động tịnh tiến Không sử dụng được bảng Motion Editor để chỉnh sửa Đặt từng thành phần khởi tạo lên từng layer khác nhau, và tương đồng nhau Là kỹ thuật của vẽ hình Không làm việc với những symbol instance Yêu cầu phải tạo ra 2 keyframe để chứa nội dung bắt đầu và nội dung kết thúc Không có motion path chuyển động tịnh tiến Không sử dụng được bảng Motion Editor để chỉnh sửa Đặt từng thành phần khởi tạo lên từng layer khác nhau, và tương đồng nhau ݺߣ 4 - Tạo hoạt hình cơ bản 19
- 20. SHAPE TWEEN Tạo layer mới có tên Shape Morph trên bảng Timeline Kéo playhead về frame 1 Kéo symbol Moon & Bird trong bảng Library ra ngoài Stage Chuyển đổi symbol thành artwork: Modify > Break Apart Tại frame 1: Nhấn chuột phải chọn Create Shape Tween Nhấn Enter để xem chuyển động Tạo layer mới có tên Shape Morph trên bảng Timeline Kéo playhead về frame 1 Kéo symbol Moon & Bird trong bảng Library ra ngoài Stage Chuyển đổi symbol thành artwork: Modify > Break Apart Tại frame 1: Nhấn chuột phải chọn Create Shape Tween Nhấn Enter để xem chuyển động ݺߣ 4 - Tạo hoạt hình cơ bản 20
- 21. SHAPE TWEEN ݺߣ 4 - Tạo hoạt hình cơ bản 21
- 22. TWEEN CỔ ĐIỂN (CLASSIC TWEEN) Chỉ sử dụng được với symbol instance Là chuyển động xuất hiện từ những phiên bản trước của Flash (Flash MX, Flash 8, Flash CS3) Ở cả 2 keyframe (bắt đầu, kết thúc): sử dụng cùng 1 symbol instance Chỉ có một đối tượng có thể tạo chuyển động tự động tại thời điểm xác định trên layer Thêm được hiệu ứng ( kích thước, chuyển động, màu sắc, độ trong suốt, …) cho chuyển động cổ điển Chỉ sử dụng được với symbol instance Là chuyển động xuất hiện từ những phiên bản trước của Flash (Flash MX, Flash 8, Flash CS3) Ở cả 2 keyframe (bắt đầu, kết thúc): sử dụng cùng 1 symbol instance Chỉ có một đối tượng có thể tạo chuyển động tự động tại thời điểm xác định trên layer Thêm được hiệu ứng ( kích thước, chuyển động, màu sắc, độ trong suốt, …) cho chuyển động cổ điển ݺߣ 4 - Tạo hoạt hình cơ bản 22
- 23. TWEEN CỔ ĐIỂN (CLASSIC TWEEN) Tạo thêm layer Classic Tween trong Timeline Kéo symbol Cloud từ bảng Library ra Stage ݺߣ 4 - Tạo hoạt hình cơ bản 23
- 24. TWEEN CỔ ĐIỂN (CLASSIC TWEEN) Chọn frame 30 trên Timeline, nhấn F6 Tại frame 30: kéo vị trí đám mây về bên trái ݺߣ 4 - Tạo hoạt hình cơ bản 24
- 25. TWEEN CỔ ĐIỂN (CLASSIC TWEEN) Tạo Motion Guide: mục đích để tạo ra đường căn cho chuyển động Tạo thêm layer Motion Guide trong bảng Timeline Chọn công cụ Pencil ( ) và vẽ trong chế độ Object Drawing ݺߣ 4 - Tạo hoạt hình cơ bản 25
- 26. TWEEN CỔ ĐIỂN (CLASSIC TWEEN) Tiến hành chuyển đổi layer vừa tạo thành layer Guide Nhấn chuột phải (Windows) chọn Guide ݺߣ 4 - Tạo hoạt hình cơ bản 26
- 27. CHỈNH SỬA CHUYỂN ĐỘN
- 28. CHỈNH SỬA CHUYỂN ĐỘN 2 cách chỉnh sửa chuyển động trong Flash: Chỉnh sửa ngay trên Motion Path Sử dụng bảng Motion Editor Tạo chuyển động: di chuyển trên Timeline ݺߣ 4 - Tạo hoạt hình cơ bản 28 -Xem hoạt hình: Enter -Di chuyển qua từng frame: sử dụng dấu (,) và dấu (.) -Di chuyển theo các hướng với tốc độ bất kỳ: nhấn kéo playhead -Tua lại vị trí ban đầu: Control > Rewind hoặc Shift + ,
- 29. CHỈNH SỬA TRÊN MOTION PATH Nhấn vào layer Shadow trên Timeline Xuất hiện motion path của layer này trên Stage Sử dụng công cụ Selection để chọn path và thay đổi ݺߣ 4 - Tạo hoạt hình cơ bản 29
- 30. CHỈNH SỬA TRÊN MOTION PATH ݺߣ 4 - Tạo hoạt hình cơ bản 30
- 31. CHỈNH SỬA TRÊN MOTION PATH ݺߣ 4 - Tạo hoạt hình cơ bản 31
- 32. MOTION EDITOR Window > Motion Editor Hiển thị tất cả các thuộc tính của tween span dưới dạng đồ thị Để sử dụng bảng Motion Editor trước hết phải chọn đối tượng được tạo chuyển động trên Stage Window > Motion Editor Hiển thị tất cả các thuộc tính của tween span dưới dạng đồ thị Để sử dụng bảng Motion Editor trước hết phải chọn đối tượng được tạo chuyển động trên Stage ݺߣ 4 - Tạo hoạt hình cơ bản 32
- 33. MOTION EDITOR Nhấn chọn hình bóng đổ trên Stage các thuộc tính tương ứng sẽ xuất hiện trên bảng Motion Editor Mỗi thuộc tính sẽ được trình bày trên 1 dòng trong bảng Mỗi thuộc tính x, y, Alpha: xuất hiện những đường thẳng chạy ngang biểu thị giá trị của từng thuộc tính tại từng thời điểm Nhấn chọn hình bóng đổ trên Stage các thuộc tính tương ứng sẽ xuất hiện trên bảng Motion Editor Mỗi thuộc tính sẽ được trình bày trên 1 dòng trong bảng Mỗi thuộc tính x, y, Alpha: xuất hiện những đường thẳng chạy ngang biểu thị giá trị của từng thuộc tính tại từng thời điểm ݺߣ 4 - Tạo hoạt hình cơ bản 33
- 34. MOTION EDITOR Tìm đến mục Alpha/Alpha amout trong Color Effect Chú ý thấy: đường thẳng hiển thị từ 100% giảm xuống 50% tại frame 19 sau đó được giữ nguyên tới frame 30 hiển thị độ giảm thuộc tính Alpha (độ trong suốt) của đối tượng Tại frame 30: Nhấn chuột phải chọn Add Keyframe Nhập giá trị 100% cho điểm mới tạo Tìm đến mục Alpha/Alpha amout trong Color Effect Chú ý thấy: đường thẳng hiển thị từ 100% giảm xuống 50% tại frame 19 sau đó được giữ nguyên tới frame 30 hiển thị độ giảm thuộc tính Alpha (độ trong suốt) của đối tượng Tại frame 30: Nhấn chuột phải chọn Add Keyframe Nhập giá trị 100% cho điểm mới tạo ݺߣ 4 - Tạo hoạt hình cơ bản 34
- 35. MOTION EDITOR ݺߣ 4 - Tạo hoạt hình cơ bản 35 Nhấn chuột phải (Windows) vào một điểm bất kỳ dọc theo đường thẳng để thêm một keyframe, sau đó sử dụng điểm đó để thay đổi giá trị của thuộc tính
- 36. MOTION EDITOR Hiển thị độ tăng giảm thuộc tính Alpha ݺߣ 4 - Tạo hoạt hình cơ bản 36
- 37. MOTION EDITOR Tại vùng Transformation: Skew X: xoay đối tượng theo trục X Skew Y: xoay đối tượng theo trục Y Scale X: thay đổi kích thước trên trục X Scale Y: thay đổi kích thước trên trục Y Tại vị trí kết thúc của Scale X nhấn chuột phải chọn Add Keyframe Nhấn và kéo keyframe mới tạo đến giá trị 60% Lặp lại các bước trên cho Scale Y Nhấn Ctrl + Enter để test movie Tại vùng Transformation: Skew X: xoay đối tượng theo trục X Skew Y: xoay đối tượng theo trục Y Scale X: thay đổi kích thước trên trục X Scale Y: thay đổi kích thước trên trục Y Tại vị trí kết thúc của Scale X nhấn chuột phải chọn Add Keyframe Nhấn và kéo keyframe mới tạo đến giá trị 60% Lặp lại các bước trên cho Scale Y Nhấn Ctrl + Enter để test movie ݺߣ 4 - Tạo hoạt hình cơ bản 37
- 38. TÙY CHỈNH CHUYỂN ĐỘN VỚI ONION SKIN
- 39. ONION SKIN Cho phép xem tất cả frame của chuyển động đồng thời trên Stage Có thể áp dụng cho 1 layer hoặc nhiều layer Lựa chọn icon ( ) phía dưới thanh Timeline Xuất hiện 2 dấu ngoặc hiển thị phạm vi vùng áp dụng Onion Skin Cho phép xem tất cả frame của chuyển động đồng thời trên Stage Có thể áp dụng cho 1 layer hoặc nhiều layer Lựa chọn icon ( ) phía dưới thanh Timeline Xuất hiện 2 dấu ngoặc hiển thị phạm vi vùng áp dụng Onion Skin ݺߣ 4 - Tạo hoạt hình cơ bản 39
- 40. ONION SKIN Áp dụng Onion Skin cho toàn bộ frame trên Timeline (frame 1 frame 30) ݺߣ 4 - Tạo hoạt hình cơ bản 40
- 41. TỔNG KẾT Chú ý 3 kiểu chuyển động trong Flash: Motion tween Shape tween Chuyển động cổ điển (tween cổ điển): thường xuyên được sử dụng Có thể sử dụng bảng Motion Editor để chỉnh sửa cho chuyển động, tạo thêm được những chuyển động cho dự án Chú ý 3 kiểu chuyển động trong Flash: Motion tween Shape tween Chuyển động cổ điển (tween cổ điển): thường xuyên được sử dụng Có thể sử dụng bảng Motion Editor để chỉnh sửa cho chuyển động, tạo thêm được những chuyển động cho dự án ݺߣ 4 - Tạo hoạt hình cơ bản 41