MUL216 slide 1

ADOBE ANIMATE BÀI 1: TỔNG QUAN ANIMATE CC MỤC TIÊU Giới thiệu Adobe Animate CC Sử dụng số công cụ vẽ Thao tác đối tượng Hồn thành số hình vẽ NỘI DUNG Giới thiệu: Animate CC phần mềm dùng thay cho Adobe Flash Công cụ Animate CC giúp tạo nội dung động theo chuẩn HTML5 để phù hợp với web đại chạy tốt thiết bị di động NỘI DUNG Những sản phẩm thực với cơng cụ Adobe Animate CC 2017 • Banner quảng cáo • Phim hoạt hình ngắn • Teaser game GIỚI THIỆU GIAO DIỆN Khởi động vào Start -> program -> Adobe Master CS6 -> Adobe Animate CC 2017 THAO TÁC FILE  Một số thao tác với Flie: • Flie -> Save As -> fla tiến hành nhấn tổ hợp phím Ctrl + Enter xuất file swf, html js • Xuất định dạng khác • File -> Publish Settings -> Xuất bảng lệnh Publish Settings > chọn định dạng phù hợp -> Publish -> OK THAO TÁC FILE Bảng lệnh settings HIỆU CHỈNH FILE  Một số chỉnh sửa đối tượng:  Xác lập thông số file: Vào Modify -> Document (Ctrl + J) nhấn vào biểu tượng -> xuất bảng lệnh Document Settings HIỆU CHỈNH FILE Một số thuộc tính bảng lệnh Document Settings  units: đơn vị  W – H : độ rông chiều cao  Stage color: màu  Anchor: tâm  24 fps: Số frame/s PHÍM TẮT Một số phím tắt thơng dụng: Một số phím tắt gần tương tự phần mềm Photoshop Vẽ hình trịn, hình vng, di chuyển thẳng hàng giữ phím Shift Vẽ hình trịn, hình vng từ tâm giữ tổ hợp phím Alt + Shift Biến đổi đối tượng to nhỏ giữ phím Q 10 ADOBE ANIMATE BÀI 1: TỔNG QUAN ANIMATE CC SLIDE Làm việc với bảng TimeLine Thao tác Layer Diễn hoạt Frame by Frame Tạo banner với diễn hoạt đơn giản 15 BẢNG TIMELINE Bảng Timeline (Bảng tiến trình chính): Giới thiệu: Là nơi lưu trữ chuyển động Animate CC với phương ngang xem trục thời gian, nơi lưu trữ thời gian tồn đối tựơng đơn vị tính frame Trong Flash đối tượng thể 24 frame tồn với thời gian tương ứng giây 16 BẢNG LAYER Cách sử dụng Layer: Nhấn Double Click đổi tên layer Sắp xếp layer: Drag chuột kéo đền vị trị cần xếp Tạo layer Delete Layer: Chọn layer bỏ vào thùng rác.(ấn Shilf chọn nhiều layer)  Tạo thư mục chứa nhiều layer  Xem màu viền layer  Khóa layer  Ẩn layer     17 BẢNG TIMELINE Thao tác với bảng Timeline: Làm việc Frame: Frame nơi lưu trữ thời gian tồn đối tượng Ký hiệu : Nhấn F5 tạo thời gian tồn (Click phải chuột nơi muốn chèn chọn Insert Frame) Xóa thời gian tồn nhấn tổ hợp phím Shift + F5 (Click phải chuột đoạn Frame muốn xóa Remove Frames) 18 BẢNG TIMELINE  Làm việc với KeyFrame:  Là nơi chứa đối tượng Thay đổi đối tượng keyframe đối tượng keyframe khác không thay đổi  Ký hiệu : Nhấn F6 thêm keyframe (copy frame) (Click phải chuột nơi muốn chèn chọn Insert Keyframe)  Xóa keyframe nhấn tổ hợp phím Shift + F6 (Chọn key frame click phải chuột chọn Clear keyframe)  Ký hiệu : Nhấn F7 chèn KeyFrame rõng (keyframe không chứa đối tượng)  Xóa keyframe rõng: nhấn tổ hợp phím Shift + F5 19 BẢNG TIMELINE  Làm việc với KeyFrame:  Là nơi chứa đối tượng Thay đổi đối tượng keyframe đối tượng keyframe khác khơng thay đổi  Ký hiệu : Nhấn F6 thêm keyframe (copy frame) (Click phải chuột nơi muốn chèn chọn Insert Keyframe)  Xóa keyframe nhấn tổ hợp phím Shift + F6 (Chọn key frame click phải chuột chọn Clear keyframe)  Ký hiệu : Nhấn F7 chèn KeyFrame rõng (keyframe không chứa đối tượng)  Xóa keyframe rõng: nhấn tổ hợp phím Shift + F5 20 BẢNG TIMELINE Một số thao tác: Di chuyển keyframe: Khi chọn xong keyframe click drag chuột di chuyển đến vị trí khác Copy keyframe: Chọn KeyFrame phải chuột chọn lệnh Copy frame Paste keyframe: Chọn vị trí cần paste phải chuột chọn lệnh paste frame (Chọn key frame cần copy giữ Alt kéo key frame đến vị trí cần paste) 21 FRAME BY FRAME Diễn hoạt Frame by Frame: Là phương thức chuyển động, trình chuyển động tạo nên khác biệt tính chất trạng thái đối tượng khung hình xếp theo trình tự 22 FRAME BY FRAME Ví dụ: Diễn họat chữ POLYTECHNIC B1: đánh chữ POLYTECHNIC B2: vào Modify -> Break Apart (Ctrl + B) tách ký tự B3: nhấn F6 (lớn 11 lần) copy keyframe B4: chọn Frame xóa kí tự cịn lại P B5: chọn Frame xóa kí tự cọn lại PO tương tự hoàn thành chữ KF1: P KF2: PO KF3: POL KF4: POLY KF5: POLYT KF6: POLYTE … 23 FRAME BY FRAME Ghi thao tác làm bài:  Nghịch đảo đọan chuyển động: Chọn hết đoạn chuyển động -> Click phải chuột vào vùng frame vừa chọn -> Reverse frame  Biến đổi khối chuyển động(di chuyển): 24 FRAME BY FRAME Chọn tùy chọn Onion Skin Quét chọn khối chuyển động Bật tùy Edit Multiple frame Edit -> Select All (Ctrl + A) Di chuyển khối đến vị trí  Hình ảnh bitmap import vào flash muốn tẩy xóa phải vào menu Modify -> Break Apart (Ctrl + B) 25 HƯỚNG DẪN THỰC HÀNH  Các đối tượng nằm layer riêng  Dùng kỹ thuật Frame by Frame hoàn thành tập sau đây:  Chọn New File -> HTML5 Canvas, kích thước 300 x 300px  Nhấn Ctrl + R chọn file Bai02.psd chọn layer cần thiết đưa vào Animate (chỉ lấy hình khơng lấy Text) 26 HƯỚNG DẪN THỰC HÀNH  Chọn layer cô gái -> chọn keyframe kéo sang vị trí 10 (frame số 10 gái xuất hiện)  Tại vị trí 20 xuất women  Tại vị trí 30 xuất vintage  Tại vị trí 40 xuất Sale  Tương tự cách 10-15 frame cho xuất thành phần lại (thời gian xuất đối tượng tùy chỉnh)  Dùng chuột chọn hết tất layer frame số 200 nhấn F5 tạo thời gian tồn cho đối tượng 27 FPT POLYTECHNIC 28 ... Ctrl + Shift + V 13 ADOBE ANIMATE BÀI 1: TỔNG QUAN ANIMATE CC SLIDE Làm việc với bảng TimeLine Thao tác Layer Diễn hoạt Frame by Frame Tạo banner với diễn hoạt đơn giản 15 BẢNG TIMELINE Bảng... chọn keyframe kéo sang vị trí 10 (frame số 10 gái xuất hiện)  Tại vị trí 20 xuất women  Tại vị trí 30 xuất vintage  Tại vị trí 40 xuất Sale  Tương tự cách 10 -15 frame cho xuất thành phần lại... FRAME BY FRAME Ví dụ: Diễn họat chữ POLYTECHNIC B1: đánh chữ POLYTECHNIC B2: vào Modify -> Break Apart (Ctrl + B) tách ký tự B3: nhấn F6 (lớn 11 lần) copy keyframe B4: chọn Frame xóa kí tự cịn