MUL216 slide 3

MỤC TIÊU Diễn hoạt Create Motion Tween theo đường dẫn  Diễn hoạt shape tool  Tạo banner với diễn hoạt Motion tween kết hợp các diễn hoạt đã học 2... MOTION TWEEN Diễn hoạt Create

BÀI 3: D IỄN HOẠT CREATE MOTION TWEEN ,

SHADE , GUIDE

ADOBE ANIMATE

MỤC TIÊU

 Diễn hoạt Create Motion Tween (theo đường

dẫn)

 Diễn hoạt shape tool

 Tạo banner với diễn hoạt Motion tween kết hợp các diễn hoạt đã học

2

MOTION TWEEN

 Diễn hoạt Create Motion tween:

Giới thiệu: Là chuyển động sẽ đưa một đối tượng

chạy theo 1 đường dẫn

 Thao tác:

 * Cách 1: (Không nhấn F6)

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

Click phải chuột -> create motion tween -> Chọn

keyframe cuối cùng di chuyển đối tượng sang vị trí

mới -> xuất hiện 1 đường path (nét đứt)

Chọn đường path -> dùng công cụ di chuyển -> rê chuột vào đường path để tạo đường cong theo ý

muốn

MOTION TWEEN

 Nhấn F6 copy thêm keyframe tại vi trí muốn chèn di

chuyển đối tượng và hiệu chỉnh đường path theo ý

muốn

 Muốn xóa diễn hoạt vừa tạo -> click phải chuột vào

chuyển động remove tween

MOTION TWEEN

 Muốn diễn hoạt các thuộc tính position, scale, tranform -> click vào đoạn diễn hoạt -> xuất hiện bảng hộp thoại

MOTION TWEEN

 Thực hiện diễn hoạt chậm dần đều, nhanh dần đều … -> click vào thuộc tính Add Ease

 Cách 2: (nhấn F6)

Tạo layer1 -> vẽ đối tượng -> tạo diễn hoạt create

classic tween

Chọn layer1 -> Click phải Add classic motion guide

Chọn layer guide -> vẽ đường path theo ý muốn

Chọn layer1 -> chọn keyframe đầu -> di chuyển đối tượng bắt dính đầu đường path -> chọn keyframe

cuối -> di chuyển đối tượng bắt dính cuối đường

path

 Cách 2: (nhấn F6)

Layer ảnh hưởng guide sẽ nằm ở cấp trong layer

guide

MOTION TWEEN

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

Muốn áp dụng một số thuộc tính từ bảng lệnh Filter Áp dụng diễn hoạt create Motion tween -> chọn đối tượng xuất hiện một số thuộc tính mờ, bóng đổ, phát sáng ,

chạm nổi…

MOTION TWEEN

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

Tất cả trạng thái, tính chất, thuộc tính của đối tượng

giống hoàn toàn như diễn hoạt create classic tween Có một thuộc tính tương đối quan trọng là Orient to path cho phép đối tượng xoay theo đường path

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

 Bài 01

 Áp dụng diễn hoạt creat motion tween thực hiện banner

 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

 Tại layer “Photo 01” -> click phải chọn create motion

tween -> tại key 15 nhấn F6 và chọn frame 15 chọn đối tượng alpha 0 -100 cho frame 15

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

 Tương tự diễn hoạt create motion tween thực hiện cho photo 02, 03, 04 cách nhau 15 frame

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

 Diễn hoạt layer “MID SEASON SALE ” create motion

tween thực hiện mờ rõ từ frame 65-80

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

 Xuất hiện sao đó là các layer 50%, OFF, Shop now từ

frame 90 – 120 (chọn Ease để diễn hoạt mượt hơn)

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

 Layer line: tại frame 145 -> F7 vẽ line hình chữ nhật

Nhấn F5 tại frame 185 cho thời gian tồn tại

 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

 Copy 2 layer line + mask sang vị trí mới: quét chọn 2

layer -> giữ Alt drag chuột lên 2 layer trên tại vị trí 185

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

 Di chuyển cả 2 đoạn frame sang vị trí mới

 Bật tùy chọn onion skin và Edit multiple frame -> chọn thêm tùy chọn maker range all chọn tất cả các frame -> Ctrl A -> di chuyển sang vị tri mới (khóa tất cả layer khác chỉ mở layer thao tác)

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

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

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

 Bài 02

 Áp dụng diễn hoạt creat motion tween thực hiện banner

 Chọn New File -> HTML5 Canvas, kích thước 960 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)

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

 Chọn layer “mat” -> F5 tồn tại frame 350

 Chọn layer “hoa” -> tạo hiệu ứng nhỏ - to - xoay

 Tạo layer “viền” theo hình cô gái -> chuyển viền thành Fill -> convert line to fill

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

 Tạo layer “as” -> dùng công cụ hình chữ nhật -> tô màu chuyển sắc -> hiệu chỉnh chuyển sắc tạo ánh sáng như hình vẽ

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

 Diễn hoạt ánh ánh sáng di chuyển lên xuống

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

 Tạo mask cho layer “vien” -> tạo ra hiệu ứng ánh sáng

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

 Tạo hiệu ứng cho “spa”: tại frame số 15 nhấn F7 -> đánh text spa

 Tạo layer mask nằm trên layer “spa” -> diễn hoạt motion tween -> tâm nằm ở dưới giữa đối tượng (tương tự cho layer health)

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

 Tạo hiệu ứng hoa rơi: chọn hoa -> nhấn F8 -> Movie Clip (hoa01_mc) -> diễn hoạt motion tween đến frame 260 -> cho chạy theo đường cong tùy ý

 Tạo thêm movie clip (hoagr_mc) -> nhân bản nhiều hoa trong mc này

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

 Kéo hoagr_mc ra scene với thời gian xuất hiện khác nhau sẽ tạo hiệu ứng hoa rơi như banner

BÀI 2: DIỄN HOẠT SHAPE TWEEN

ADOBE ANIMATE

SHAPE TWEEN

 Diễn hoạt shape tween:

 Là diễn hoạt tạo các bước trung gian cho đối tượng

chuyển động từ đối tượng nào sang đối tượng khác,

màu này chuyển thành màu khác

SHAPE TWEEN

 Diễn hoạt shape tween:

 Thao tác tại frame 1 vẽ hình tron -> frame 30 nhấn F7 vẽ hình vuông

 Chọn frame 1 -> click phải -> create shape tween

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

 Ứng dụng các diễn hoạt đã học hoàn thành các banner sau

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

 Ứng dụng các diễn hoạt đã học hoàn thành các banner sau

34

FPT POLYTECHNIC