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

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
Slide 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
Slide 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
Slide 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)
Slide 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
Slide 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
Slide 4 - Tạo hoạt hình cơ bản 8

9. KỸ THUẬT TẠO CHUYỂN ĐỘNG

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
Slide 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
Slide 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
Slide 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
Slide 4 - Tạo hoạt hình cơ bản 13

14. MOTION TWEEN
Slide 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
Slide 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)
Slide 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
Slide 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
Slide 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
Slide 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
Slide 4 - Tạo hoạt hình cơ bản 20

21. SHAPE TWEEN
Slide 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
Slide 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
Slide 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
Slide 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
Slide 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
Slide 4 - Tạo hoạt hình cơ bản 26

27. CHỈNH SỬA CHUYỂN ĐỘNG

28. CHỈNH SỬA CHUYỂN ĐỘNG
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
Slide 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
Slide 4 - Tạo hoạt hình cơ bản 29

30. CHỈNH SỬA TRÊN MOTION PATH
Slide 4 - Tạo hoạt hình cơ bản 30

31. CHỈNH SỬA TRÊN MOTION PATH
Slide 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
Slide 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
Slide 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
Slide 4 - Tạo hoạt hình cơ bản 34

35. MOTION EDITOR
Slide 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
Slide 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
Slide 4 - Tạo hoạt hình cơ bản 37

38. TÙY CHỈNH CHUYỂN ĐỘNG 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
Slide 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)
Slide 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
Slide 4 - Tạo hoạt hình cơ bản 41