MUL216 slide 1

Click phải chuột nơi muốn chèn chọn Insert Frame..  Xóa thời gian tồn tại 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

BÀI 1: TỔNG QUAN ANIMATE CC

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ờ sẽ

giúp tạo ra những nội dung động theo

chuẩn HTML5 để phù hợp với web hiện đại và có thể chạy tốt ngay cả trên thiết bị di động

GIỚI THIỆU GIAO DIỆN

 Khởi động vào Start -> program -> Adobe

Master CS6 -> Adobe Animate CC 2017

5

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

THAO TÁC FILE

7

 Bảng lệnh settings

HIỆU CHỈNH FILE

 Một số thuộc tính trong bảng lệnh Document

Settings

 units: đơn vị

 W – H : độ rông và chiều cao

 Stage color: màu nền

 Anchor: tâm

 24 fps: Số frame/s

9

 Di chuyển vùng làm việc giữ phím Space

 Ẩn hiện thước giữ tổ hợp phím Ctrl + Shift + Atl + R

11

THAO TÁC

 Thao tác trên đối tượng:

 Một số chú ý khi thao tác với đối tượng

Nếu đối tượng có màu trùng (không viền) -> đối

tượng được hàn lại với nhau

Nếu đối tượng có màu khác nhau -> đối tượng nằm trên cắt đối tượng nằm dưới

12

THAO TÁC

 Modify -> Group (Ctrl + G): nhóm các đối tượng

 Chuyển Text thành đối tượng Shape: Modify ->

BÀI 1: TỔNG QUAN ANIMATE CC

SLIDE 1

 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

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 sắp xếp

 Tạo mới 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 hiện layer

17

 Ký hiệu : Nhấn F5 tạo thời gian tồn tại (Click

phải chuột nơi muốn chèn chọn Insert Frame)

 Xóa thời gian tồn tại 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 tại

keyframe này thì đối tượng tại 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 tại

keyframe này thì đối tượng tại 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

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 và

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 cơ bản nhất trong mọi chuyển động, quá trình của chuyển động được tạo nên bởi sự khác biệt về tính chất trạng thái của các

đối tượng tại mỗi khung hình được sắp xếp theo một trình tự

22

B3: nhấn F6 (lớn hơn 11 lần) copy keyframe

B4: chọn Frame 1 xóa các kí tự còn lại P

B5: chọn Frame 2 xóa các kí tự cọn lại PO tương tự cho đến hoàn thành chữ

FRAME BY FRAME

 Ghi chú thao tác làm bài:

 Nghịch đảo một đọ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 một 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í mới

 Hình ảnh bitmap khi được import vào flash muốn tẩy

xóa được phải vào menu Modify -> Break Apart (Ctrl + B)

25

HƯỚNG DẪN THỰC HÀNH

 Các đối tượng sẽ nằm trên từng layer riêng

 Dùng kỹ thuật Frame by Frame hoàn thành bài 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 các 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 cô gái mới xuất hiện)

 Tại vị trí 20 xuất hiện women

 Tại vị trí 30 xuất hiện vintage

 Tại vị trí 40 xuất hiện Sale

 Tương tự cách 10-15 frame cho xuất hiện các thành

phần còn lại (thời gian xuất hiện các đối tượng tùy

chỉnh)

 Dùng chuột chọn hết tất cả các layer tại frame số 200

nhấn F5 tạo thời gian tồn tại cho đối tượng

27

FPT POLYTECHNIC