Bài giảng Tin học cơ sở: Bài 2

Ạ Ả

Ạ

BÀI 2: T O HO T NH TRONG FLASH

KHOA CÔNG NGH THÔNG TIN

Ạ Ọ

ƯỜ

Ệ Ộ NG Đ I H C BÁCH KHOA HÀ N I

Bài giảng tin học cơ sở

ộ

N i dung

ớ

ạ ả

ệ

1. Gi

ề i thi u v ho t nh

ườ

ế

ờ

2. Timeline (đ

ả ng th i gian/b ng ti n trình)

ớ

3. L p (Layer)

4. Khung hình (Frame)

ể

ế

ổ

ộ

5. Bi n đ i chuy n đ ng

ế

ạ

ổ 6. Bi n đ i hình d ng

2

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ộ

N i dung

ớ

ạ ả

ệ

1. Gi

ề i thi u v ho t nh

ườ

ế

ờ

2. Timeline (đ

ả ng th i gian/b ng ti n trình)

ớ

3. L p (Layer)

4. Khung hình (Frame)

ể

ế

ổ

ộ

5. Bi n đ i chuy n đ ng

ế

ạ

ổ 6. Bi n đ i hình d ng

3

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ớ

ạ ả

ệ

1. Gi

ề i thi u v ho t nh

ấ

ể

ị

ề

 Là quá trình các đ i ố ượ ệ ng xu t hi n, di t ộ ể ộ chuy n theo m t chuy n đ ng nh p nhàng và đ u đ nặ ự

ả

ỗ

ả

 Th c ra là chu i các nh tĩnh ỗ trong đó m i hình nh (khung ổ ộ ỉ hình frame) ch thay đ i m t ướ ả ớ chút so v i hình nh tr c đó, ể ệ ỉ ượ ả c th hi n m i hình nh ch đ ắ ờ ộ trong m t kho ng th i gian ng n

4

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ớ

ạ ả

ệ

ề

1. Gi

i thi u v ho t nh (2)

 Khung hình (Frame)

 Biểu diễn một lần thể hiện của phim Flash ở mỗi thời

điểm cụ thể trong suốt quá trình phát lại

 Sau khi dịch và chạy, chương trình được thực hiện từ

khung hình đầu đến khung hình cuối

ộ

 T c đ khung hình

ố  Số lượng các hình ảnh riêng biệt (khung hình) xuất

hiện trong một giây.

 Càng cao thì càng có nhiều khung hình trong một đơn vị thời gian phát lại  tăng kích thước tệp tin

 Flash mặc định và thường dùng là 12 fps

5

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ớ

ạ ả

ệ

ề

1. Gi

i thi u v ho t nh (3)

ạ ả

 Flash đ n gi n hóa ho t nh ả

 Chỉ cần tạo ra hình ảnh bắt đầu và hình ảnh kết thúc

 Flash tự tạo mọi thứ nằm giữa hai hình ảnh này để

tạo ra hoạt ảnh  Biến đổi (Transformation)

ế

ạ

 Flash có 2 lo i bi n đ i ổ

 Biến đổi chuyển động (Motion Transformation)

 Biến đổi hình dạng (Shape Transformation)

6

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ớ

ạ ả

ệ

ề

1. Gi

i thi u v ho t nh (4)

ổ

ế

ể

Bi n đ i chuy n đ ng

ộ  Thay đổi vị trí, kích thước, màu sắc

 Xoay, xô nghiêng đối tượng

7

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ớ

ạ ả

ề

ệ

1. Gi

i thi u v ho t nh (5)

ạ

 Bi n đ i hình d ng ổ

ế  Thay đổi hình dạng của đối tượng. Ví dụ chuyển từ

hình tròn thành hình vuông

 Có thể thay đổi màu sắc, vị trí của đối tượng

8

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ộ

N i dung

ớ

ạ ả

ệ

1. Gi

ề i thi u v ho t nh

ườ

ế

ờ

2. Timeline (đ

ả ng th i gian/b ng ti n trình)

ớ

3. L p (Layer)

4. Khung hình (Frame)

ể

ế

ổ

ộ

5. Bi n đ i chuy n đ ng

ế

ạ

ổ 6. Bi n đ i hình d ng

9

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ườ

ế

ờ

2. Timeline (đ

ả ng th i gian/b ng ti n trình)

ạ ả

ễ

ơ

Là n i các ho t nh di n ra

Menu của timeline

Khung hình đang được chọn

Khung hình

Số khung hình

Tên lớp

Thời gian phát lại

Tốc độ khung hình

Tên thư mục

Số khung hình hiện tại

10

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

2. Timeline (2)

ứ

 Ch a các ch đ th hi n trên vùng thi ế ộ ể ệ

ế ế t k

Sửa đổi nhiều khung nhìn

Căn giữa khung nhìn

Chế độ thể hiện Onion Skin

Chế độ thể hiện đường nét Onion Skin

11

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

2. Timeline (3)

 Center Frame

 Căn giữa timeline sao cho khung nhìn được chọn ở chính giữa (?)

 Onion Skin

 Cho phép xem nhiều khung nhìn

một lúc

 Hiển thị các khung hình trước và

sau khung hình hiện tại dưới dạng bóng mờ  Onion Skin Outlines

 Giống Onion Frame nhưng chỉ theo dạng đường nét/khung (outline)

 Edit Multiple Frames

 Cho phép sửa nhiều khung nhìn

trong Onion Skin

12

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

2. Timeline (4)

ứ

ớ

 Ch a các nút đ qu n lý layer (l p), frame (khung

ả ể ư ụ

hình), folder (th m c)

13

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ộ

N i dung

ớ

ạ ả

ệ

1. Gi

ề i thi u v ho t nh

ườ

ế

ờ

2. Timeline (đ

ả ng th i gian/b ng ti n trình)

ớ

3. L p (Layer)

4. Khung hình (Frame)

ể

ế

ộ

ổ

5. Bi n đ i chuy n đ ng

ế

ạ

ổ 6. Bi n đ i hình d ng

14

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

3. Layer (l p)ớ

 Layer (l p)ớ

 Chứa các đối tượng  Độc lập với nhau  Có thể có nhiều lớp

Layer được chọn

• Nên đặt tên lớp theo tính gợi nhớ nào đó hoặc theo ý nghĩa

của các đối tượng thuộc về lớp

ọ

 Ch n 1 layer:

 Các đối tượng của layer được chọn theo trong vùng

thiết kế

 Timeline tương ứng của layer (dùng để điều khiển và kiểm soát các đối tượng thuộc lớp đó) cũng hiển thị bên cạnh

15

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ớ ớ

3.1. Các thao tác v i l p

ạ

ớ

 T o m i layer , xóa  Khóa layer:

 n layer:

 Nhấn vào cột bên cạnh layer muốn khóa  Không tác động được các đối tượng trong lớp bị khóa Ẩ  Nhấn vào cột bên cạnh layer muốn ẩn (sau khi ẩn thì bên

cạnh layer là )

 Ẩn/hiện lớp trong giai đoạn thiết kế để dễ quan sát và thao tác

với các lớp khác chứ không có tác dụng khi chạy

Các layer

16

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ứ ớ

ổ

3.2. T ch c l p

ề ớ

ấ

ể ồ ng trình có th g m r t nhi u l p

M t ch ộ ươ Khó quản lý

Dùng thư mục để tổ chức và quản lý lớp

Gom các lớp có đặc điểm chung (về chức

ể ạ

ặ

ớ

năng,…) vào thành một thư mục Có th t o m i ho c xóa th m c ư ụ

17

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ộ

N i dung

ớ

ạ ả

ệ

1. Gi

ề i thi u v ho t nh

ườ

ế

ờ

2. Timeline (đ

ả ng th i gian/b ng ti n trình)

ớ

3. L p (Layer)

4. Khung hình (Frame)

ể

ế

ộ

ổ

5. Bi n đ i chuy n đ ng

ế

ạ

ổ 6. Bi n đ i hình d ng

18

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

4. Frame (khung hình)

 Bi u di n m t l n th hi n c a phim

ủ ụ ể

ể

ố

ể ệ ễ ở ỗ m i th i đi m c th trong su t

ộ ầ ể ờ Flash iạ quá trình phát l

ứ ắ

ạ

ọ

 Tùy theo ch c năng mà Frame có hình d ng, màu s c và tên g i khác nhau

19

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ạ 4.1. Phân lo i khung hình

 KeyFrame

 Biểu thị sự thay đổi trên lớp đó  Chọn menu Insert  Timeline  KeyFrame hoặc F6

 Blank KeyFrame

 Là một KeyFrame trắng, chưa có gì  Chọn menu Insert  Timeline  Blank KeyFrame

hoặc F7

 Frame

 Có thể chứa dữ liệu nhưng không có sự thay đổi so

với khung hình trước

 Frame luôn luôn phải đi sau KeyFrame  Chọn menu Insert  Timeline  Frame hoặc F5

20

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ạ

4.1. Phân lo i khung hình (2)

ứ

ữ

ặ

ộ

 Flash đ t m t ch cái a trong KeyFrame có ch a các

ệ

câu l nh ActionScript

ấ

 KeyFrame luôn có m t ch m tròn trong nó. ộ  Là rỗng nếu đây là một Blank KeyFrame

 Được tô nếu chứa một số nội dung nào đó

ế

 Khung nhìn 1 luôn là KeyFrame  N u thêm các đ i ố

ng vào các khung hình phía sau mà tr

c đó không ố

ướ ẽ ặ

ượ t ạ t o ra KeyFrame cho chúng thì Flash s đ t các đ i ượ t

ng này vào khung hình 1

21

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ớ

4.2. Các thao tác v i khung hình

ạ

ặ ạ

ớ

 T o m i m t Frame (F5) ho c t o m i m t KeyFrame ế ừ

ộ ộ

ớ

ộ ớ ề ạ frame phía tr

ộ ư ướ c nh ng:

(F6) đ u t o ra m t khung hình m i có n i dung k th a ừ t  Frame: Khi thêm vào nó thì frame phía trước cũng có  KeyFrame: Khi thêm vào nó thì frame phía trước không có

ỏ

ượ

ỏ ả

ế

ọ

 Xóa b các khung hình đ

c ch n ra kh i b ng ti n

trình:  Nhấn chuột phải  Remove Frames  Shift + F5 ổ ể

 Chuy n đ i KeyFrame thành Frame  Nhấn chuột phải  Clear KeyFrame  Shift + F6

22

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ộ

N i dung

ớ

ạ ả

ệ

1. Gi

ề i thi u v ho t nh

ườ

ế

ờ

2. Timeline (đ

ả ng th i gian/b ng ti n trình)

ớ

3. L p (Layer)

4. Khung hình (Frame)

ể

ế

ổ

ộ

5. Bi n đ i chuy n đ ng

ế

ạ

ổ 6. Bi n đ i hình d ng

23

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ể

ế

ộ

ổ

5. Bi n đ i chuy n đ ng

ỉ ượ

ố ượ

ụ

ạ

ớ

Ch đ

c áp d ng v i các d ng đ i t

ng

 Các đối tượng được gom nhóm

 Thể hiện của biểu tượng (Symbol Instance)

(học sau)

24

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ể

ế

ẳ

ộ

ổ

5.1. Bi n đ i chuy n đ ng th ng

ướ

ố ượ

ế

ổ ng cho bi n đ i

ố ượ

ế

ầ

ổ

B c 1: V /chèn đ i t ẽ B c 2: Gom nhóm các đ i t

ng c n bi n đ i

ướ ế

ầ

(n u c n)

ướ

ế

ẩ

ướ

ụ

ể

ế

ổ

ộ

B c 3: Chu n b Timeline cho bi n đ i ổ ị B c 4: Áp d ng bi n đ i chuy n đ ng

25

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ướ

ể

ế

ẳ

ộ

ổ

5.1. Bi n đ i chuy n đ ng th ng – B c 1

ể ẽ ố ượ

ể

 Có th v đ i t

ụ ằ ng chuy n đ ng b ng các công c ụ ủ

ộ trong thanh công c c a Flash

ố ượ

ể

ừ ư ệ

ặ ừ

 Có th chèn (import) đ i t

ng t

th vi n ho c t

bên

ngoài vào vùng thi

t kế ế

 VD:

 Vẽ hình người bao gồm một hình

elip và một số đoạn thẳng

 Đây là các đối tượng riêng rẽ

26

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ướ

ể

ế

ẳ

ổ

ộ

5.1. Bi n đ i chuy n đ ng th ng – B c 2

ố ượ

ế

ầ

ổ ng c n bi n đ i

Gom nhóm các đ i t VD:

 Chọn tất các đối tượng vừa vẽ có giữ phím Shift hoặc

gõ Ctrl+A để chọn tất cả

 Chọn menu Modify  Group hoặc Ctrl+G  Lúc này các đối tượng riêng lẻ trở thành

một đối tượng nhóm thống nhất

 Kéo đối tượng nhóm này lên góc trên cùng bên trái và giảm kích thước đối tượng sử dụng công cụ Free Transform hoặc Transform Panel

(Chú ý giữ Shift nếu muốn giữ ràng buộc giữa

chiều cao và chiều rộng)

27

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ướ

ể

ế

ẳ

ộ

ổ

5.1. Bi n đ i chuy n đ ng th ng – B c 3

ế

ẩ

ị

 Chu n b Timeline cho bi n đ i ổ

 Xác định thời gian của hoạt hình: • Xác định nơi đặt KeyFrame thứ 2

• VD: Đặt KeyFrame ở khung hình 36 cho một hoạt ảnh bắt

đầu ở đầu của phim và kéo dài trong 3s

 Nhấn chọn khung hình mà bạn chọn là KeyFrame kết thúc, chọn menu Insert  KeyFrame hoặc F6 để tạo 1 KeyFrame

 Với KeyFrame kết thúc đang được chọn, di chuyển đối tượng đến vị trí mà nó cần đến khi kết thúc.

28

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ướ

ể

ế

ẳ

ổ

ộ 5.1. Bi n đ i chuy n đ ng th ng – B c 3 (2)

Ví dụ

 Chọn đến khung hình 36

 Nhấn F6  Một KeyFrame được tạo ra

29

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ướ

ể

ế

ẳ

ổ

ộ 5.1. Bi n đ i chuy n đ ng th ng – B c 4 (2)

ụ ế

 Ví d (ti p)

 Tại frame 36

(KeyFrame kết thúc)

• Chọn đối tượng

hình người

• Kéo xuống phía dưới cùng, bên phải

30

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ướ

ể

ế

ẳ

ộ

ổ

5.1. Bi n đ i chuy n đ ng th ng – B c 4

ụ

ể

ế

ổ

ộ

B c 4: Áp d ng bi n đ i chuy n đ ng

ướ  Nhấn vào timeline tại các khung nhìn nằm

trong khoảng giữa của KeyFrame bắt đầu và kết thúc

 Nhấn chuột phải chọn Create Motion Tween hoặc Chọn menu Insert  Create Motion Tween

 Chọn lệnh Control  Test Movie hoặc Ctrl + Enter để xem kết quả hoặc xem trong chế độ Onion Skin

31

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ướ

ể

ế

ẳ

ổ

ộ 5.1. Bi n đ i chuy n đ ng th ng – B c 4 (3)

 Ví dụ

 Chọn Frame thứ 18

 Nhấn chuột phải chọn Create Motion Tween

32

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ướ

ể

ế

ẳ

ổ

ộ 5.1. Bi n đ i chuy n đ ng th ng – B c 4 (4)

ụ ế

Ví d (ti p)

 Nhấn Ctrl + Enter để kiểm tra kết quả

33

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

Quay – Rotate khi Create Motion Tween

ữ

ọ

 Khi Create Motion Tween (ho c ch n khung hình gi a ặ ở ả ạ đã t o Motion Tween), m b ng Properties, ch n Rotate:

• None: Không quay

• Auto: Tự động quay theo KeyFrame đầu và cuối

• CW (Clockwise): Quay theo chiều kim đồng hồ

• CCW (Counter Clockwise): Quay ngược chiều kim đồng hồ

34

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ụ

Ví d Rotate CW – 1 times

35

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ụ

Ví d Rotate CCW – 2 times

36

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ử ụ

S d ng Easing

ệ

ấ

ố

 Thay đ i đ dài th i gian các khung hình xu t hi n (t c đ ộ

ờ ổ ộ ổ thay đ i khung hình)

ả

ọ

 Ch n Ease trong b ng Properties

 Không đổi: 0

 Chậm rồi tăng dần về cuối: -100  -1

 Nhanh rồi chậm dần về cuối: 1 100

37

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ụ

ề

ầ

Ví d Ease = 80 – Nhanh d n đ u

38

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ụ

ề

ầ

ậ

Ví d Ease = 80 – Ch m d n đ u

39

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ỹ ạ

ế

ể

ộ

ổ

5.2. Bi n đ i chuy n đ ng theo qu đ o

ướ

ể ạ

ế

ổ

c đ t o bi n đ i

ệ ẳ

ể

B c 1: Th c hi n các b ự ộ chuy n đ ng th ng

ớ

ẫ

ướ

ỹ ạ

ạ ớ

ướ

ườ

ẫ

ng d n

ố ượ

ỹ ạ

ướ

ớ

ng v i qu đ o

ố ượ

ỉ

ướ

t l p và ch nh đ i t

ng h

ng theo

B c 3: T o l p ch a qu đ o (l p d n) ứ B c 2: V qu đ o/đ ẽ ỹ ạ B c 4: G n đ i t ắ B c 5: Thi ướ ỹ ạ

ế ậ ạ

ử

qu đ o và ch y th

40

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ỹ ạ

ướ

ể

ế

ổ

ộ

5.2. Bi n đ i chuy n đ ng theo qu đ o – B c 1

ướ

ể

ổ

ự ẳ

ừ

ẳ

ộ ư ế ộ i chuy n đ ng th ng t

ố c hình ng

góc

ườ ả ướ

 Th c hi n các b ệ ượ ể th ng đ thu đ ố trái trên cùng xu ng góc ph i d

c gi ng nh bi n đ i chuy n đ ng ể i cùng

41

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ỹ ạ

ướ

ể

ế

ộ

ổ

5.2. Bi n đ i chuy n đ ng theo qu đ o – B c 2

ạ ớ

ặ

ộ

ệ

 L p d n (Guide Layer) là m t lo i l p đ c bi

ỹ ứ t, ch a qu

ẫ ườ

ẫ

ớ ạ đ o/đ

ng d n

ộ ớ

ừ

ế

ể

ẫ

ổ

ộ

ệ

 C n t o m t l p d n cho t ng bi n đ i chuy n đ ng riêng bi ầ ạ  Cách t oạ

 Chọn lớp chứa các đối tượng cần chuyển động theo quỹ đạo

 Nhấn vào biểu tượng (Add Motion Guide) hoặc chọn menu

Insert  Motion Guide

 Đặt tên cho lớp dẫn nếu muốn

42

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ỹ ạ

ướ

ể

ế

ổ

ộ

5.2. Bi n đ i chuy n đ ng theo qu đ o – B c 3

ườ

ụ ạ

ẫ

 V qu đ o/đ

ấ ứ ộ ng d n b ng b t c m t công c t o

ẽ ườ

ằ ng v nào (Line, Oval, Pen, Pencil, Retangle,

ỹ ạ ẽ đ Brush…)

 Ví d : V đ

ụ ẽ ườ ử ậ b c thang s ụ ụ d ng công c Line

43

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ỹ ạ

ướ

ể

ế

ộ

ổ

5.2. Bi n đ i chuy n đ ng theo qu đ o – B c 4

ố ượ

ườ

ẫ

ớ

ng v i qu đ o/đ

ng d n

G n đ i t ắ ỹ ạ  Frame đầu: Gắn tâm đối tượng vào đầu quỹ

đạo/đường dẫn

 Frame cuối: Gắn tâm đối tượng vào cuối quỹ

đạo/đường dẫn

44

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ỹ ạ

ướ

ể

ế

ộ

ổ

5.2. Bi n đ i chuy n đ ng theo qu đ o – B c 4 (2)

 Ví dụ

 Frame 1: Kéo hình người sao cho tâm của của nó

trùng với điểm đầu của đường bậc thang

 Frame 36: Kéo hình người sao cho tâm của của nó

trùng với điểm cuối của đường bậc thang

45

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ử

Ch y thạ

 Hình người không hướng theo quỹ đạo

46

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ỹ ạ

ướ

ể

ế

ộ

ổ

5.2. Bi n đ i chuy n đ ng theo qu đ o – B c 5

ể

ọ

ướ

ườ

ẫ

 Ch n ô Orient to Path đ hình h

ng theo đ

ng d n

ố ế

ầ

ử ướ

ầ ườ

 Ch nh s a Frame đ u tiên và Frame cu i n u c n đ ể ẫ ng d n

ỉ hình h

ng theo đ

47

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ỹ ạ

ướ

ể

ế

ổ

ộ

5.2. Bi n đ i chuy n đ ng theo qu đ o – B c 5 (2)

ể

ế

ấ

ả

Nh n Ctrl + Enter đ xem k t qu

48

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ộ

N i dung

ớ

ạ ả

ệ

1. Gi

ề i thi u v ho t nh

ườ

ế

ờ

2. Timeline (đ

ả ng th i gian/b ng ti n trình)

ớ

3. L p (Layer)

4. Khung hình (Frame)

ể

ế

ổ

ộ

5. Bi n đ i chuy n đ ng

ế

ạ

ổ 6. Bi n đ i hình d ng

49

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ế

ạ

ổ 6. Bi n đ i hình d ng

ộ ố ạ

ố ượ

i h n cho m t s d ng đ i t

ng, không

B gi ị ớ ạ ụ ể th áp d ng cho:  Các đối tượng được gom nhóm

 Thể hiện của biểu tượng (symbol instance)

 Khối văn bản hoặc một hình ảnh bitmap

ể

ố ượ

ng không đ

c phép, ta

ể

Đ áp d ng cho đ i t ụ ọ

ố ượ

ạ

ượ  Break Apart đ ể ơ ng này thành các d ng đ n

có th ch n menu Modify phân tách đ i t gi nả

50

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ế

ạ

ổ

ướ

6. Bi n đ i hình d ng – Các b

c

ướ

ố ượ

ế

ướ

ế

ẩ

ướ

ụ

ế

ạ

ổ

B c 1: V /chèn đ i t ẽ ổ ng cho bi n đ i B c 2: Chu n b Timeline cho bi n đ i ổ ị B c 3: Áp d ng bi n đ i bi n d ng

51

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ướ

ế

ạ

ổ

6. Bi n đ i hình d ng – B c 1

ế

 B c 1: V /chèn đ i t ẽ

ổ ng cho bi n đ i

ướ ố ượ  Có thể vẽ bằng các công cụ trong Toolbar

 Có thể chèn (import) đối tượng từ thư viện hoặc từ

bên ngoài vào vùng thiết kế

 Phân tách đối tượng phức tạp nếu cần (chọn menu

Modify  Break Apart)

 Ví dụ:

• Vẽ đã giác đều 5 cạnh (Polystar)

• Chọn menu Modify  Break Apart

52

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ướ

ế

ạ

ổ

6. Bi n đ i hình d ng – B c 2

ế

ẩ

ị

 Chu n b Timeline cho bi n đ i ổ

 Xác định thời gian của hoạt hình  Chọn khung hình mà bạn chọn là KeyFrame kết thúc  Chọn menu Insert  Blank KeyFrame hoặc F7 để đặt

1 Blank KeyFrame vào khung hình được chọn

 Với Blank KeyFrame kết thúc đang được chọn, tạo ra đối tượng khác cần biến thành (thường có hình dạng khác với đối tượng ban đầu)

 Ví dụ

• Chọn frame 48, nhấn F7 • Tại frame 48, tạo một văn bản là chữ BK

– Font: 80, màu đỏ, đậm và kiểu chữ là Lucida Calligraphy • Nhấn Ctrl + B 2 lần để tách văn bản thành các phần rời nhau

53

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ướ

ế

ạ

ổ

6. Bi n đ i hình d ng – B c 3

ổ

ụ

ế

 Áp d ng bi n đ i bi n d ng ế

ạ  Nhấn vào timeline tại các khung nhìn nằm trong khoảng giữa của KeyFrame bắt đầu và kết thúc

• Ví dụ: Chọn frame 24

 Vào bảng Properties, chọn Shape từ hộp danh sách

Tween

 Chọn lệnh Control  Test Movie hoặc Ctrl + Enter để

xem kết quả hoặc xem trong chế độ Onion Skin

54

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ướ

ế

ổ

ạ 6. Bi n đ i hình d ng – B c 3 (2)

Ví dụ

 Nhấn Ctrl + Enter xem kết quả

55

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

ể

ả

ệ

Thông tin gi ng viên đ liên h

ọ

ị

ệ

ạ

H và tên: Nguy n Th Thu Trang ễ Đi n tho i: Email: trangnttfit@mail.hut.edu.vn ho c ặ

trangntt.it@gmail.com

ị

ỉ

ộ

ệ

ườ ạ ồ ệ

ố

Đ a ch : B môn Công ngh ph n m m, P.327 ề ạ ọ ng Đ i h c ộ t, Hà N i.

ầ C1, Khoa Công ngh thông tin, tr ộ Bách Khoa Hà N i, s 1 Đ i C Vi

56

ơ ở ọ ệ ả ườ ạ ọ Bài gi ng Tin h c c s Khoa Công ngh thông tin Tr ộ ng Đ i h c Bách Khoa Hà N i

Bài giảng Tin học cơ sở: Bài 2 - ĐH Bách Khoa