MUL216 slide 2

M ỤC TIÊUThành thạo diễn hoạt Create Classic Tween Các thuộc tính của chuyển động Ứng dụng thiết kế banner 2... C REATE C LASSIC T WEENDiễn hoạt Classic tween Là chuyển động được tạo

BÀI 2: D IỄN HOẠT C REATE C LASSIC T WEEN

ADOBE ANIMATE

M ỤC TIÊU

Thành thạo diễn hoạt Create Classic Tween

Các thuộc tính của chuyển động

Ứng dụng thiết kế banner

2

C REATE C LASSIC T WEEN

Diễn hoạt Classic tween

Là chuyển động được tạo nên bởi sự khác nhau

về trạng thái, tính chất đối tượng đầu và đối

tượng cuối của đoạn chuyển động và các đối

tượng trung gian Animate CC sẽ tự sinh ra

những khung hình phù hợp

C REATE C LASSIC T WEEN

 Thao tác:

 Tại frame1 -> vẽ một đối tượng hình tròn

 Tại frame2 -> nhấn F6 copy keyframe

Chọn lại frame1 -> click phải Create Classic Tween

 Tại keyframe đầu thay đổi trạng thái, tính chất của đối tượng tại key frame này

C REATE C LASSIC T WEEN

 Trạng thái, tính chất của đối tượng:

 Để xuất hiện trạng thái, tính chất của đối tượng ta phải chọn

Keyframe -> chọn đối tượng

 -> xuất hiện hộp thoại Style

 Brightness: độ sáng tối đối tượng

 Tint: Nhuộm màu cho đối tượng

 Alpha: độ trong suốt

 Advance: kết hợp màu và alpha

C REATE C LASSIC T WEEN

 Thuộc tính đối tượng:

 Để xuất hiện thuộc của đối tượng ta phải chọn Keyframe đầu -> xuất hiện hộp thoại rotate

C REATE C LASSIC T WEEN

 Thuộc tính đối tượng:

 Thanh trượt Ease:

 CCw: ngược chiều kim đồng hồ

 Rotation count: số vòng xoay

C REATE C LASSIC T WEEN

 Thuộc tính đối tượng:

 Snap: bắt dính theo Path

 Color along path: thay đổi màu theo Path

 Orient to path: Đối tượng uyển chuyển theo hướng

path

 Scale along path: thay đổi tỉ lệ theo đường path

C REATE C LASSIC T WEEN

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

 Lệnh Modify -> Timeline -> distribute to layer (Ctrl + Shift + D): phân bố các đối tượng ra nhiều layer khác Trước khi thực hiện chuyển động đối với chữ phải

biến thành symbol (thường diễn hoạt cho chữ)

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

 Chọn New File -> HTML5 Canvas, kích thước 400 x 400px

 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) đánh lại text trong anmate để đảm bảo chất lượng text

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

Chọn layer food tại frame số 15 nhấn F6 (copy

keyframe) -> chọn keyframe số 1 -> phải chuột create classic tween -> chọn key số 1 chọn đối

tượng sang bảng Properties giảm alpha = 0

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

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

Tại layer “4 Healthy” -> kéo di chuyển key về số

16 tại key số 30 tại diễn hoạt classic tween và

cho alpha từ 0-100 tương tự

Tương tự cho layer “juice recipes” diễn hoạt mờ đến rõ cho thời gian tiếp theo

Layer “To Recharge Your Body” diễn hoạt classic tween vào thời gian -> chọn key 55 kéo sang vị trí trái, alpha =0 -> key 75 vị trí giữa alpha 100

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

Tại layer “4 Healthy” -> kéo di chuyển key về số

16 tại key số 30 tại diễn hoạt classic tween và

cho alpha từ 0-100 tương tự

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

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

Layer “To Recharge Your Body” xuất hiện mờ rõ

từ phải sang trái

Layer “health” tại frame 105 nhấn F6 khoảng thời gian cách nhau 10-20 frame tiếp theo -> diễn

hoạt classic tween chọn frame mờ - rõ -> tạo ra hiệu ứng nhưng bãi mẫu

Hoàn thành cho đến hết banner

CHọn tất cả các layer tại frame 300 -> nhấn

F5 -> tạo thời gian tồn tại

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

CHọn tất cả các layer tại frame 300 -> nhấn

F5 -> tạo thời gian tồn tại

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

 Chọn New File -> HTML5 Canvas, kích thước 300 x 650px

 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) đánh lại text trong anmate để đảm bảo chất lượng text

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

Diễn hoạt classic tween mờ rõ từ frame 1 -> 15

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

Tương tự layer Present, disco, party diễn hoạt

cách từ mờ sang rõ cách nhau 15 frame

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

Thực hiện hiệu ứng ẩn hiện cho layer disco, party -> tạo frame 160, 170, …220 nhấn F6 nhân bản đối tượng Tại key 170, 190, 210 giảm alpha =0

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

Thực hiện hiệu ứng mask cho layer line: tạo layer mask, tại frame 160 -> F7 dùng brush vẽ cọ tròn liên tiếp thao tác kết hợp với F6 vẽ theo xuất

hiện của hình chữ nhật

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

Click phải trên layer mask -> Mask

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

 Tương tự làm hiệu ứng mờ rõ cho layer 08 JUNE 2019 : 9PM - 03AM

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

 Tạo thời gian tồn tại cho các layer -> F5 tại frame 330

BÀI 2: Ứ NG DỤNG D IỄN HOẠT

C REATE C LASSIC T WEEN

ADOBE ANIMATE

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

Dùng các kĩ thuật đã học:

Frame by frame

Create classic tween

Import file từ các phần mềm Ai, Photoshop để

hoàn thành banner

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

Hoàn thành 3 banner sau:

30

FPT POLYTECHNIC