Bài giảng lập trình web bài 5 tạo họa hình nâng cao

BÀI 5
TẠO HỌA HÌNH NÂNG CAO – TÙY BIẾN LUỒNG CÔNG
VIỆC – LÀM VIỆC VỚI FILE NHẬP TRONG FLASH


NHẮC LẠI BÀI TRƯỚ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 Tween
Motion Guide layer
Tùy chỉnh hoạt cảnh với Onion Skin

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

2


MỤC TIÊU BÀI HỌC
Cách làm việc với những kỹ thuật chuyển động nâng
cao:
Sao chép (Copy), dán (Paste) và lưu chuyển động
(Save)
Áp dụng kỹ thuật Easing Behavior nâng cao
Chuyển động mặt nạ
Tạo chuyển động với IK Poses
Tuần tự của chuyển động

Render và chuyển động trong 3D

Làm việc với các bảng liên quan:
Tùy biến preferences
Bảng Align, Properties

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

3


MỤC TIÊU BÀI HỌC
Làm việc với những file được nhập vào trong Flash:
Các định dạng có thể nhập vào trong Flash
Cách làm việc với từng định dạng

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

4


KỸ THUẬT TẠO CHUYỂN ĐỘNG NÂNG CAO


SAO CHÉP, DÁN VÀ LƯU CHUYỂN ĐỘNG
Sao chép chuyển động của một đối tượng và gán
cho đối tượng khác
Ưu điểm:

Giảm thiểu thời gian làm việc
Áp dụng với những đối tượng có chuyển động giống
nhau

Sử dụng lệnh:
Copy Motion: chụp lại toàn bộ thuộc tính (hiệu ứng, vị
trí, bộ lọc) của một tween
Paste Motion: dán thuộc tính của tween

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

6


SAO CHÉP, DÁN VÀ LƯU CHUYỂN ĐỘNG
Ví dụ minh họa: sử dụng file fl0701_start.fla
1. chọn layer Jam trong folder Tag Phrases để tạo
Motion Tween, tới frame 40

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

7


SAO CHÉP, DÁN VÀ LƯU CHUYỂN ĐỘNG
2. Tại frame 1:
Nhấn nút Add Filter tại vùng Filters trong bảng
Properties

Nhập 15 tại trường Blur X
Chọn High tại menu Quality
Nhập giá trị 0 trong trường Alpha tại tùy chọn Color
Effect

3. Tại frame 15:
Chọn dòng chữ Jam
Thiết lập Alpha: 100%

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

8


SAO CHÉP, DÁN VÀ LƯU CHUYỂN ĐỘNG
4. Tại frame 40:
Chọn lại dòng chữ Jam
Thiết lập Blur X, Blur Y về 0
Blur X, Blur Y: chỉnh độ mờ (blur) theo trục x, y

5. Nhấn Enter để xem thử chuyển động
6. Sao chép chuyển động vừa tạo cho dòng chữ
Dance
7. Trong layer Jam, nhấn 1 lần để chọn toàn bộ
tween span

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

9


SAO CHÉP, DÁN VÀ LƯU CHUYỂN ĐỘNG
8. Chuột phải chọn Copy Motion

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

10


SAO CHÉP, DÁN VÀ LƯU CHUYỂN ĐỘNG
9. Trên layer Dance:
Chọn frame 1
Chuột phải chọn Paste Motion

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

11


SAO CHÉP, DÁN VÀ LƯU CHUYỂN ĐỘNG
Tính năng Motion preset: sử
dụng để lưu chuyển động
Ví dụ minh họa:
1. Window > Motion Preset
Default Presets: chuyển động
mặc định flash cung cấp

Custom Presets: chuyển động
được tạo và lưu

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

12


SAO CHÉP, DÁN VÀ LƯU CHUYỂN ĐỘNG
2. Chọn toàn bộ tween span trong layer Skip
3. Dưới cùng bảng Motion Preset, nhấn nút New
Preset
4. Nhập Fade and Focus vào trường Name
5. Trong layer 65 Trillion chọn keyframe 1
6. Trong bảng Motion Preset, chọn Fade and Focus
7. Nhấn Apply
8. Kết quả: chuyển động của preset Fade and Focus
được áp dụng cho layer 65 Trillion

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

13


SAO CHÉP, DÁN VÀ LƯU CHUYỂN ĐỘNG

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

14


KỸ THUẬT EASING BEHAVIOR
Ví dụ minh họa:
1. Chọn keyframe 1 của layer Bounce để tạo motion
tween
2. Kéo tween span tới keyframe 40
3. Nhấn chuột phải chọn Insert Keyframe > Position
4. Nhấn chọn keyframe 1 để kéo chữ Bounce lên
phía trên
5. Tiếp tục thêm đặc tính easing cho chuyển động
này

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

15


KỸ THUẬT EASING BEHAVIOR

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

16


KỸ THUẬT EASING BEHAVIOR

6. Tại bảng Motion Editor:
Tại vùng Eases: nhấn nút Add Eases ( )
Chọn đặc tính Bounce In

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

17


KỸ THUẬT EASING BEHAVIOR
7. Gán thuộc tính (chuyển động, bộ lọc, hiệu ứng
màu) cho eases
8. Tại vùng Basic motion chọn Bounce In trong hộp
thoại

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

18


CHUYỂN ĐỘNG MẶT NẠ
Áp dụng chuyển động cho mặt nạ (mask)
Ví dụ minh họa:
1. Tạo layer mới Screen Mask bên trên layer Skypod
2. Kéo symbol Screen Mask Movieclip ra ngoài Stage

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

19


CHUYỂN ĐỘNG MẶT NẠ
3. Tạo motion tween cho layer Skypod, tới frame 40
4. Chọn frame 40:
Trong bảng Properties: chỉnh X: 650 và Y: 200

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

20


CHUYỂN ĐỘNG MẶT NẠ
5. Sao chép chuyển động của layer Skypod cho
layer Screen Mask

6. Chuyển đổi layer Screen Mask thành mặt nạ

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

21


CHUYỂN ĐỘNG MẶT NẠ
7. Kéo layer Screen Mask lên trên layer Screen
Simulation

8. Chuột phải chọn Mask

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

22


CHUYỂN ĐỘNG VỚI IK POSES
Sử dụng công cụ Bone & Bind để tạo ra chuyển
động dạng IK
Ví dụ minh họa
1. Mở khóa và hiển thị layer Dancer
2. Chọn keyframe 1 để hiển thị

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

23


CHUYỂN ĐỘNG VỚI IK POSES
3. Chọn frame 10
4. Chuột phải chọn Insert Pose

5. Sử dụng Selection, chọn 1 phần bất kỳ của hình
vẽ, kéo để tạo chuyển động bất kỳ
Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

24


CHUYỂN ĐỘNG VỚI IK POSES
6. Chọn frame 20, chọn Insert Pose

7. Sử dụng công cụ Seletion để tạo chuyển động cho
1 phần bất kỳ của hình vẽ

Slide 5 - Tạo hoạt hình nâng cao - Tùy biến luồng công việc - Làm việc với file nhập
trong Flash

25