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

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 CHUYỂN ĐỘNG VỚI IK POSES 8. Lặp lại các bước trên tại frame 30,40 9. Enter 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 26 TUẦN TỰ CỦA CHUYỂN ĐỘNG Sức mạnh thực sự của Timeline nằm ở khả năng sắp xếp tuần tự hoạt hình, hình vẽ, và âm thanh dọc theo Timeline và tạo ra các hoạt cảnh phức tạp Ví dụ minh họa 1. layer Dancer: chọn toàn bộ tween span 2. Kéo tới vị trí frame 15 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 27 TUẦN TỰ CỦA CHUYỂN ĐỘNG 3. Lặp lại các bước với layer Skip, Bounce và 65 Trillion với các frame tương ứng 30, 45 và 120 4. Thay đổi vị trí của layer Screen Mask, Screen Simulation và SkyPod để những layer này bắt đầu ở frame 80 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 28 TUẦN TỰ CỦA CHUYỂN ĐỘNG 5. Layer Screen Simulation chưa có tween span, để di chuyển layer này: nhấn vào keyframe đầu tiên, sau đó giữ phím Shift và nhấn vào frame cuối cùng 6. Dịch layer Logo tới vị trí bắt đầu tại frame 125 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 29 TUẦN TỰ CỦA CHUYỂN ĐỘNG 7. layer 65 Trillion: kéo tween span tới frame 165 8. Kéo tween span của các layer Jam, Dancer, Skip và Bounce tới frame 165 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 30 TUẦN TỰ CỦA CHUYỂN ĐỘNG 9. Chọn frame 165 trong thư mục layer Background Stuff, nhấn F5  mở rộng tween span cho toàn bộ layer bên trong 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 31 RENDER, CHUYỂN ĐỘNG TRONG 3D Công cụ 3D Rotation: Xoay đối tượng theo chiều x, y, z Chuyển đối tượng 2D thành 3D Phép xoay 3D có thể tạo được chuyển động motion tween Công cụ 3D Translation: Trượt symbol Movie Clip theo 1 trục  thay đổi khoảng cách & độ sâu giữa đối tượng và đối tượ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 32 RENDER, CHUYỂN ĐỘNG TRONG 3D Thủ thuật làm việc với bảng Motion Editor Chỉnh sửa đồ thị: -Thêm keyframe: giữ Ctrl + nhấn chuột vào đồ thị -Xóa keyframe: giữ Ctrl + nhấn chuột vào keyframe có sẵn -Thay đổi vị trí: nhấn và kéo keyframe sang bên trái/ sang phải -Thay đổi giá trị: nhấn và kéo keyframe lên trên/ xuống dưới Thay đổi hiển thị: -Thay đổi hiển thị của đồ thị và frame: sử dụng 3 thanh trượt điều khiển Graph Size, Expanded Graph Size, and Viewable Frames 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 33 LÀM VIỆC VỚI CÁC BẢNG LIÊN QUAN BẢNG ALIGN Window > Align: sử dụng để căn chỉnh các đối tượng trên Stage Căn trái Căn giữa Căn phả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 35 Căn chỉnh ngay trên stage BẢNG TRANSFORM Window>Transform: Kéo bảng Transform gắn vào bảng Align 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 36 Vùng điều chỉnh xoay cho vật thể 3D THIẾT LẬP PREFERENCES Edit > Preferences Tùy chỉnh khi mở chương trình Flash Điều chỉnh số lần Undo Menu chứa những items để điều chỉnh 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 37 PHÍM TẮT Edit > Keyboard Shortcuts 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 38 PHÍM TẮT Tìm tới lệnh Modify Nhấn vào dấu (+)  mở rộng tùy chọn Chú ý thấy: tổ hợp Ctrl + B (Windows) được gán cho lệnh Modify > Break Apart 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 39 PHÍM TẮT Tùy biến phím tắt: 1. Tạo bản sao của tập phím tắt hiện tại & sao lưu lại 2. Nhấn nút Duplicate ( ) ở bên phải vùng Current set 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 40 PHÍM TẮT 3. Tiến hành đổi phím tắt cho lệnh Modify > Break Apart 1. Nhấn chọn lệnh cần thay đổi phím tắt 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 41 2. Nhập phím tắt thay đổi 3. Nhấn OK RULERS (THƯỚC CĂN) Hiển thị thước căn: View > Rulers (Ctrl + Alt + Shift + R) Đơn vị đo: px (pixel) 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 42 Chọn Modify > Document để thay đổi lại đơn vị đo của thước căn RULERS (THƯỚC CĂN) Đặt con trỏ vào vị trí trên cùng của thước căn nằm ngang trên Stage, sau đó nhấn và kéo chuột xuống dướ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 43 LAYER GUIDE Cho phép căn chỉnh các đối tượng trên một layer thông thường theo vị trí của các đối tượng trong layer guide Các đối tượng trong layer guide hoạt động giống như điểm tham chiếu cho các đối tượng trên layer thông thường Không được xuất bản trong đoạn phim sau cùng; các đối tượng trên layer guide chỉ được hiển thị trong môi trường làm việc 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 44 LAYER GUIDE Ví dụ minh họa: 1. Đổi tên layer 1 thành background & tạo thêm layer Text bên trên layer 1 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 45 LAYER GUIDE 2. Cắt logo 08 trên stage sang layer Text 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 46 LAYER GUIDE 3. Nhấn chuột phải vào layer background và chọn Guide 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 47 Biểu tượng của layer chuyển thành biểu tượng ( ) LAYER GUIDE Độ nhạy - Điều chỉnh khoảng cách bắt điểm khi di chuyển hình vẽ lại gần đường căn: View > Snapping > Edit Snapping 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 48 GROUP (NHÓM VẬT THỂ) Giữ Shift + chọn nhiều vật thể Modify > Group: nhóm & Modify > Ungroup: tách nhóm 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 49 GRIDS (KHUNG LƯỚI) Độ nhạy -View > Grid > Show Grid: hiển thị khung lưới căn chỉnh hình vẽ trên Stage chính xác hơn -View > Grid > Edit Grid: thay đổi hiển thị cho khung lưới (màu sắc, độ rộ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 50 NHẬP FILE LÀM VIỆC TRONG FLASH ĐỊNH DẠNG FILE NHẬP Flash có thể đọc & nhập vào các kiểu file sau: Adobe Illustrator (.ai) AutoCAD (.dxf) Bitmap (.bmp) Enhanced Windows Metafile (.emf) FreeHand (.fh, .ft) GIF and animated GIF (.gif) JPEG (.jpg) PNG (.png) Flash Player (.swf) Windows Metafile (.wmf) 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 52 ĐỊNH DẠNG FILE NHẬP Khi cài thêm plug-in QuickTime Player, thì Flash sẽ đọc được thêm các định dạng file sau: Mac Paint (.pntg) PICT (.pct) QuickTime Image (.qtif) Silicon Graphics Image (.sgi) TARGA (.tga) TIFF (.tif) 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 53 ĐỊNH DẠNG FILE NHẬP Tùy chọn nhập vào -Import to Stage: đặt file nhập vào Stage -Import to Library: đặt file nhập vào Library -Open External Library: cho phép mở thư viện của bất kì file .fla nào -Import Video: mở Import Video wizard để hướng dẫn các bước cần thiết khi nhập file video vào Flash 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 54 NHẬP ẢNH TĨNH Sử dụng lệnh Import to Stage để nhập ảnh bitmap Đồng thời hình ảnh sẽ được xuất hiện trong bảng Library Vùng xem thử trước hình ảnh 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 55 Vùng quản lý hình ảnh CHỈNH SỬA HÌNH ẢNH ĐƯỢC NHẬP Nhấn chuột phải vào hình ảnh được hiển thị trong bảng Library Chọn Edit with… Nếu như đã cài đặt Photoshop thì mặc định sẽ là Edit with Photoshop 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 56 CHỈNH SỬA HÌNH ẢNH ĐƯỢC NHẬP Tự động chuyển sang chương trình Photoshop để chỉnh sửa 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 57 CẬP NHẬT FILE NHẬP Nhấn nút Properties dưới bảng Library 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 58 NHẬP FILE PHOTOSHOP Tùy chọn -Import this image layer as: xác định layer được nhập vào dưới dạng ảnh bitmap hay dưới dạng layer style có thể chỉnh sửa được -Create movie clip for this layer: tạo symbol Movie Clip từ ảnh bitmap và nhập vào trong Library -Publish settings: thiết lập kiểu nén với từng ảnh bitmap được xuất 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 59 NHẬP FILE PHOTOSHOP 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 60 NHẬP FILE ILLUSTRATOR Import to Stage để nhập file fl0904.ai vào Flash 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 61 NHẬP FILE ILLUSTRATOR Tùy chọn -Import as bitmap: chuyển đổi artwork dạng vector từ Illustrator thành ảnh bimap khi nhập vào Flash -Import as a single bitmap image: chuyển đổi layer dạng vector từ Illustrator thành ảnh bitmap riêng lẻ khi nhập vào Flash -Import unused symbols: nhập các đối tượng không được sử dụng từ bảng Symbol trong Illustrator vào Flash 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 62 TỔNG KẾT Nắm vững được trình tự chuyển động trong file Flash: Việc đặt các vật thể trên từng layer riêng biệt sẽ giúp ích cho việc đặt thời gian chuyển động Cách tạo chuyển động với layer mask được áp dụng rất phổ biến với những dự án thực tế Nắm được cách làm việc với những bảng có liên quan: Align, Transform, … Chú ý các tùy chọn khi nhập file .ai, .psd vào Flash 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 63