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

BÀI 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 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 - 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 Flash MỤC TIÊU BÀI HỌC Cách làm việc với kỹ thuật chuyển động nâng cao: Sao chép (Copy), dán (Paste) 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ự chuyển động Render chuyển động 3D Làm việc với bảng liên quan: Tùy biến preferences Bảng Align, Properties Slide - 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 Flash MỤC TIÊU BÀI HỌC Làm việc với file nhập vào Flash: Các định dạng nhập vào Flash Cách làm việc với định dạng Slide - 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 Flash 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 đối tượng 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 đối tượng có chuyển động giống Sử dụng lệnh: Copy Motion: chụp lại toàn thuộc tính (hiệu ứng, vị trí, lọc) tween Paste Motion: dán thuộc tính tween Slide - 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 Flash SAO CHÉP, DÁN VÀ LƯU CHUYỂN ĐỘNG Ví dụ minh họa: sử dụng file fl0701_start.fla chọn layer Jam folder Tag Phrases để tạo Motion Tween, tới frame 40 Slide - 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 Flash SAO CHÉP, DÁN VÀ LƯU CHUYỂN ĐỘNG Tại frame 1: Nhấn nút Add Filter vùng Filters bảng Properties Nhập 15 trường Blur X Chọn High menu Quality Nhập giá trị trường Alpha tùy chọn Color Effect Tại frame 15: Chọn dòng chữ Jam Thiết lập Alpha: 100% Slide - 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 Flash SAO CHÉP, DÁN VÀ LƯU CHUYỂN ĐỘNG Tại frame 40: Chọn lại dòng chữ Jam Thiết lập Blur X, Blur Y Blur X, Blur Y: chỉnh độ mờ (blur) theo trục x, y Nhấn Enter để xem thử chuyển động Sao chép chuyển động vừa tạo cho dòng chữ Dance Trong layer Jam, nhấn lần để chọn toàn tween span Slide - 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 Flash SAO CHÉP, DÁN VÀ LƯU CHUYỂN ĐỘNG Chuột phải chọn Copy Motion Slide - 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 Flash 10 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 - 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 Flash 49 GRIDS (KHUNG LƯỚI) Độ nhạy -View > Grid > Show Grid: hiển thị khung lưới  chỉnh hình vẽ Stage xác -View > Grid > Edit Grid: thay đổi hiển thị cho khung lưới (màu sắc, độ rộng ô) Slide - 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 Flash 50 NHẬP FILE LÀM VIỆC TRONG FLASH ĐỊNH DẠNG FILE NHẬP Flash đọc & nhập vào 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 - 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 Flash 52 ĐỊNH DẠNG FILE NHẬP Khi cài thêm plug-in QuickTime Player, Flash đọc thêm định dạng file sau: Mac Paint (.pntg) PICT (.pct) QuickTime Image (.qtif) Silicon Graphics Image (.sgi) TARGA (.tga) TIFF (.tif) Slide - 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 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 file fla -Import Video: mở Import Video wizard để hướng dẫn bước cần thiết nhập file video vào Flash Slide - 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 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 xuất bảng Library Vùng xem thử trước hình ảnh Vùng quản lý hình ảnh Slide - 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 Flash 55 CHỈNH SỬA HÌNH ẢNH ĐƯỢC NHẬP Nhấn chuột phải vào hình ảnh hiển thị bảng Library Chọn Edit with… Nếu cài đặt Photoshop mặc định Edit with Photoshop Slide - 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 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 - 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 Flash 57 CẬP NHẬT FILE NHẬP Nhấn nút Properties bảng Library Slide - 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 Flash 58 NHẬP FILE PHOTOSHOP Tùy chọn -Import this image layer as: xác định layer nhập vào dạng ảnh bitmap hay dạng layer style chỉnh sửa -Create movie clip for this layer: tạo symbol Movie Clip từ ảnh bitmap nhập vào Library -Publish settings: thiết lập kiểu nén với ảnh bitmap xuất Slide - 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 Flash 59 NHẬP FILE PHOTOSHOP Slide - 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 Flash 60 NHẬP FILE ILLUSTRATOR Import to Stage để nhập file fl0904.ai vào Flash Slide - 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 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 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ẻ nhập vào Flash -Import unused symbols: nhập đối tượng không sử dụng từ bảng Symbol Illustrator vào Flash Slide - 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 Flash 62 TỔNG KẾT Nắm vững trình tự chuyển động file Flash: Việc đặt vật thể layer riêng biệt giúp ích cho việc đặt thời gian chuyển động Cách tạo chuyển động với layer mask áp dụng phổ biến với dự án thực tế Nắm cách làm việc với bảng có liên quan: Align, Transform, … Chú ý tùy chọn nhập file ai, psd vào Flash Slide - 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 Flash 63 [...]... 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... 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. .. 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... 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... 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... Kéo tween span của các layer Jam, Dancer, Skip và Bounce tới frame 1 65 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 1 65 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... 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... 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... 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... 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 giữa Căn trái Căn phải Căn chỉnh ngay trên 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 35 BẢNG TRANSFORM Window>Transform: ... easing cho chuyển động Slide - 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 Flash 15 KỸ THUẬT EASING BEHAVIOR Slide - Tạo hoạt hình nâng cao - Tùy biến luồng công việc... span Slide - 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 Flash SAO CHÉP, DÁN VÀ LƯU CHUYỂN ĐỘNG Chuột phải chọn Copy Motion Slide - Tạo hoạt hình nâng cao - Tùy biến... để tạo chuyển động cho phần hình vẽ Slide - 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 Flash 25 CHUYỂN ĐỘNG VỚI IK POSES Lặp lại bước frame 30,40 Enter Slide - Tạo