Embed Size (px)
DESCRIPTION
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
Citation preview
BÀI 4TẠO HỌA HÌNH CƠ BẢN
NHẮC LẠI BÀI TRƯỚC
Sử dụng symbol (biểu tượng) và LibraryLàm việc với những công cụ nâng cao trong FlashCS4:
Spray BrushMaskCông cụ DecoCông cụ IK
Sử dụng symbol (biểu tượng) và LibraryLàm việc với những công cụ nâng cao trong FlashCS4:
Spray BrushMaskCông cụ DecoCông cụ IK
Slide 4 - Tạo hoạt hình cơ bản 2
MỤC TIÊU BÀI HỌC
Làm việc với frame, keyframe và TimelineCác kỹ thuật tạo chuyển động:
Motion TweenShape tweenChuyển động Tween cổ điển
Chỉnh sửa chuyển động với bảng Motion EditorMotion Guide layerTùy chỉnh hoạt cảnh với Onion Skin
Làm việc với frame, keyframe và TimelineCác kỹ thuật tạo chuyển động:
Motion TweenShape tweenChuyển động Tween cổ điển
Chỉnh sửa chuyển động với bảng Motion EditorMotion Guide layerTùy chỉnh hoạt cảnh với Onion Skin
Slide 4 - Tạo hoạt hình cơ bản 3
LÀM VIỆC VỚI FRAME, KEYFRAME VÀ TIMELINE
FRAME, KEYFRAME VÀ TIMELINE
Bảng Timeline bao gồm 3 phần chính:LayerFramekeyframe
Slide 4 - Tạo hoạt hình cơ bản 5
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ự ánFlash 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ặtnạ), 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 layerTỷ lệ khung hình/ giây mặc định 24fps (frame persecond)
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ự ánFlash 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ặtnạ), 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 layerTỷ lệ khung hình/ giây mặc định 24fps (frame persecond)
Slide 4 - Tạo hoạt hình cơ bản 6
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úcmột hành động trên TimelineMột keyframe có thể kéo dài tùy thuộc vào thời gianmuốn nội dung của keyframe đó được hiển thịTheo mặc định, mỗi layer mới trong Timeline chứamộ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úcmột hành động trên TimelineMột keyframe có thể kéo dài tùy thuộc vào thời gianmuốn nội dung của keyframe đó được hiển thịTheo mặc định, mỗi layer mới trong Timeline chứamột keyframe tại frame 1
Slide 4 - Tạo hoạt hình cơ bản 7
FRAME, KEYFRAME VÀ TIMELINE
Chọn frame thứ 15 trên TimelineNhấn chuột phải (Windows) chọn Insert KeyframeHoặc lựa chọn keyframe thứ 15, nhấn F7
Slide 4 - Tạo hoạt hình cơ bản 8
KỸ THUẬT TẠO CHUYỂN ĐỘNG
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 Stage3 kiểu chuyển động trong Flash:
Motion tweenShape tweenClassic 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 Stage3 kiểu chuyển động trong Flash:
Motion tweenShape tweenClassic tween
Slide 4 - Tạo hoạt hình cơ bản 10
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
MOTION TWEEN
Thực hiện với file fl0602.flaTạo motion tween cho layer Airplane
Một chuyển động với 24 frame được tạo ra tronglayer này
Thực hiện với file fl0602.flaTạo motion tween cho layer Airplane
Một chuyển động với 24 frame được tạo ra tronglayer này
Slide 4 - Tạo hoạt hình cơ bản 12
MOTION TWEEN
Di chuyển hình vẽ máy bay tới vị trí chính giữa tạiframe 15 trên TimelineNhấn và kéo playhead tới frame 15Trên Stage: kéo hình máy bay đến vị trí chính giữa1 đườ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-đườngthẳ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ạiframe 15 trên TimelineNhấn và kéo playhead tới frame 15Trên Stage: kéo hình máy bay đến vị trí chính giữa1 đườ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-đườngthẳng này được gọi motion path
Slide 4 - Tạo hoạt hình cơ bản 13
MOTION TWEEN
Slide 4 - Tạo hoạt hình cơ bản 14
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ùngTrê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ùngTrê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
MOTION TWEEN
Nhấn chọn frame 30Trên Stage: kéo hình vẽ máy bay tới điểm cuốiNhấn Enter (Windows) để xem kết quả ngay trênStageNhấn Ctrl + Enter (Windows) để xem kết quả trêncửa sổ riêng (Control > Test Movie)
Nhấn chọn frame 30Trên Stage: kéo hình vẽ máy bay tới điểm cuốiNhấn Enter (Windows) để xem kết quả ngay trênStageNhấn Ctrl + Enter (Windows) để xem kết quả trêncửa sổ riêng (Control > Test Movie)
Slide 4 - Tạo hoạt hình cơ bản 16
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ạngsymbol-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ạngsymbol-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
MOTION TWEEN
Để tạo chuyển động cho nhiều hình vẽ: đặt từnghình vẽ lên từng layer khác nhauMỗi thành phần khi được tạo chuyển động sẽ cầncó:
Tween spanLayer tween
Để tạo chuyển động cho nhiều hình vẽ: đặt từnghình vẽ lên từng layer khác nhauMỗi thành phần khi được tạo chuyển động sẽ cầncó:
Tween spanLayer tween
Slide 4 - Tạo hoạt hình cơ bản 18
SHAPE TWEEN
Là kỹ thuật của vẽ hìnhKhông làm việc với những symbol instanceYêu cầu phải tạo ra 2 keyframe để chứa nội dungbắt đầu và nội dung kết thúcKhông có motion path chuyển động tịnh tiếnKhông sử dụng được bảng Motion Editor để chỉnhsửaĐặt từng thành phần khởi tạo lên từng layer khácnhau, và tương đồng nhau
Là kỹ thuật của vẽ hìnhKhông làm việc với những symbol instanceYêu cầu phải tạo ra 2 keyframe để chứa nội dungbắt đầu và nội dung kết thúcKhông có motion path chuyển động tịnh tiếnKhông sử dụng được bảng Motion Editor để chỉnhsửaĐặt từng thành phần khởi tạo lên từng layer khácnhau, và tương đồng nhau
Slide 4 - Tạo hoạt hình cơ bản 19
SHAPE TWEEN
Tạo layer mới có tên Shape Morph trên bảngTimelineKéo playhead về frame 1Kéo symbol Moon & Bird trong bảng Library ra ngoàiStageChuyển đổi symbol thành artwork: Modify > BreakApartTại frame 1: Nhấn chuột phải chọn Create ShapeTweenNhấn Enter để xem chuyển động
Tạo layer mới có tên Shape Morph trên bảngTimelineKéo playhead về frame 1Kéo symbol Moon & Bird trong bảng Library ra ngoàiStageChuyển đổi symbol thành artwork: Modify > BreakApartTại frame 1: Nhấn chuột phải chọn Create ShapeTweenNhấn Enter để xem chuyển động
Slide 4 - Tạo hoạt hình cơ bản 20
SHAPE TWEEN
Slide 4 - Tạo hoạt hình cơ bản 21
TWEEN CỔ ĐIỂN (CLASSIC TWEEN)
Chỉ sử dụng được với symbol instanceLà chuyển động xuất hiện từ những phiên bản trướccủa Flash (Flash MX, Flash 8, Flash CS3)Ở cả 2 keyframe (bắt đầu, kết thúc): sử dụng cùng1 symbol instanceChỉ 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 layerThê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 instanceLà chuyển động xuất hiện từ những phiên bản trướccủa Flash (Flash MX, Flash 8, Flash CS3)Ở cả 2 keyframe (bắt đầu, kết thúc): sử dụng cùng1 symbol instanceChỉ 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 layerThê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
TWEEN CỔ ĐIỂN (CLASSIC TWEEN)
Tạo thêm layer Classic Tween trong TimelineKéo symbol Cloud từ bảng Library ra Stage
Slide 4 - Tạo hoạt hình cơ bản 23
TWEEN CỔ ĐIỂN (CLASSIC TWEEN)
Chọn frame 30 trên Timeline, nhấn F6Tạ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
TWEEN CỔ ĐIỂN (CLASSIC TWEEN)
Tạo Motion Guide: mục đích để tạo ra đường căncho chuyển độngTạo thêm layer Motion Guide trong bảng TimelineChọn công cụ Pencil ( ) và vẽ trong chế độ ObjectDrawing
Slide 4 - Tạo hoạt hình cơ bản 25
TWEEN CỔ ĐIỂN (CLASSIC TWEEN)
Tiến hành chuyển đổi layer vừa tạo thành layerGuideNhấn chuột phải (Windows) chọn Guide
Slide 4 - Tạo hoạt hình cơ bản 26
CHỈNH SỬA CHUYỂN ĐỘNG
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 PathSử 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 + ,
CHỈNH SỬA TRÊN MOTION PATH
Nhấn vào layer Shadow trên TimelineXuất hiện motion path của layer này trên StageSử dụng công cụ Selection để chọn path và thay đổi
Slide 4 - Tạo hoạt hình cơ bản 29
CHỈNH SỬA TRÊN MOTION PATH
Slide 4 - Tạo hoạt hình cơ bản 30
CHỈNH SỬA TRÊN MOTION PATH
Slide 4 - Tạo hoạt hình cơ bản 31
MOTION EDITOR
Window > Motion EditorHiển thị tất cả các thuộc tính của tween span dướidạ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 EditorHiển thị tất cả các thuộc tính của tween span dướidạ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
MOTION EDITOR
Nhấn chọn hình bóng đổ trên Stage các thuộctính tương ứng sẽ xuất hiện trên bảng Motion EditorMỗi thuộc tính sẽ được trình bày trên 1 dòng trongbảngMỗi thuộc tính x, y, Alpha: xuất hiện những đườngthẳng chạy ngang biểu thị giá trị của từng thuộctính tại từng thời điểm
Nhấn chọn hình bóng đổ trên Stage các thuộctính tương ứng sẽ xuất hiện trên bảng Motion EditorMỗi thuộc tính sẽ được trình bày trên 1 dòng trongbảngMỗi thuộc tính x, y, Alpha: xuất hiện những đườngthẳng chạy ngang biểu thị giá trị của từng thuộctính tại từng thời điểm
Slide 4 - Tạo hoạt hình cơ bản 33
MOTION EDITOR
Tìm đến mục Alpha/Alpha amout trong Color EffectChú ý thấy: đường thẳng hiển thị từ 100% giảmxuống 50% tại frame 19 sau đó được giữ nguyên tớiframe 30 hiển thị độ giảm thuộc tính Alpha (độtrong suốt) của đối tượngTại frame 30:
Nhấn chuột phải chọn Add KeyframeNhập giá trị 100% cho điểm mới tạo
Tìm đến mục Alpha/Alpha amout trong Color EffectChú ý thấy: đường thẳng hiển thị từ 100% giảmxuống 50% tại frame 19 sau đó được giữ nguyên tớiframe 30 hiển thị độ giảm thuộc tính Alpha (độtrong suốt) của đối tượngTại frame 30:
Nhấn chuột phải chọn Add KeyframeNhập giá trị 100% cho điểm mới tạo
Slide 4 - Tạo hoạt hình cơ bản 34
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 đườngthẳng để thêm một keyframe, sau đó sử dụng điểm đó để thay
đổi giá trị của thuộc tính
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
MOTION EDITOR
Tại vùng Transformation:Skew X: xoay đối tượng theo trục XSkew Y: xoay đối tượng theo trục YScale X: thay đổi kích thước trên trục XScale 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ọnAdd KeyframeNhấ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 YNhấn Ctrl + Enter để test movie
Tại vùng Transformation:Skew X: xoay đối tượng theo trục XSkew Y: xoay đối tượng theo trục YScale X: thay đổi kích thước trên trục XScale 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ọnAdd KeyframeNhấ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 YNhấn Ctrl + Enter để test movie
Slide 4 - Tạo hoạt hình cơ bản 37
TÙY CHỈNH CHUYỂN ĐỘNG VỚI ONIONSKIN
ONION SKIN
Cho phép xem tất cả frame của chuyển động đồngthời trên StageCó thể áp dụng cho 1 layer hoặc nhiều layerLựa chọn icon ( ) phía dưới thanh TimelineXuất hiện 2 dấu ngoặc hiển thị phạm vi vùng ápdụng Onion Skin
Cho phép xem tất cả frame của chuyển động đồngthời trên StageCó thể áp dụng cho 1 layer hoặc nhiều layerLựa chọn icon ( ) phía dưới thanh TimelineXuất hiện 2 dấu ngoặc hiển thị phạm vi vùng ápdụng Onion Skin
Slide 4 - Tạo hoạt hình cơ bản 39
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
TỔNG KẾT
Chú ý 3 kiểu chuyển động trong Flash:Motion tweenShape tweenChuyể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 chochuyển động, tạo thêm được những chuyển độngcho dự án
Chú ý 3 kiểu chuyển động trong Flash:Motion tweenShape tweenChuyể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 chochuyển động, tạo thêm được những chuyển độngcho dự án
Slide 4 - Tạo hoạt hình cơ bản 41
