Giáo trình hướng dẫn cách tạo các loại chuyển động từ frame Animation phần 2 potx

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 9


Tạo một Motion Tween dùng lệnh Create Motion Tween:
1. Chọn một keyframe trống và vẽ đối tượng
trong vùng Stage hoặc kéo một Instance của
một Symbol trong cửa sổ Library. Nếu vẽ một
Instance thì sau khi vẽ phải chọn tất cả đối
tượng đó.


2. Chọn trình đơn
Insert > Create Motion Tween
.
Nếu bạn vẽ một đối tượng trong bước một, Flash sẽ tự động chuyển đổi đối tượng
thành một Symbol và gán nó với tên là Tween1. Nếu bạn vẽ nhiều đối tượng, các
đối tượng thêm vào có các tên là Tween2, Tween3 và v.v. Bây giờ bạn sẽ thấy xuất
hiện dấu cộng trên đối tượng. Đó là điểm khai báo cho Motion Tween.

Đối tượng trước và sau khi chọn lệnh Create Motion Tween
3. Nhấp chuột vào số frame mà bạn muốn vùng chuyển động kết thúc và chọn trên
trình đơn
Insert > Frame
. Sau đó nhấp chuột phải chọn lệnh
Insert Keyframe
có
trong trình đơn xổ xuống. Lúc này bạn sẽ thấy đường Motion Tween xuất hiện.

Chọn lệnh Insert Keyframe trong trình đơn sẽ thấy xuất hiện đường Motion Tween
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
199

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 9

4. Di chuyển đối tượng Instance hoặc khối ký tự trong vùng Stage đến vò trí frame cuối
cùng mong muốn. Hiệu chỉnh kích thước của các đối tượng nếu bạn muốn chúng
chuyển động thay đổi kích thước của nó. Hiệu chỉnh hướng xoay nếu bạn muốn nó
chuyển động xoay. Bỏ chọn đối tượng khi bạn đã hiệu chỉnh xong.

5. Nhấp chuột vào keyframe cuối của quá trình chuyển động Motion Tween và chọn
trên trình đơn
Window> Panels > Frame
. Chế độ Motion Tweening sẽ được chọn
một cách tự động trong bảng Frame.
6. Nếu bạn muốn thay đổi kích thước của đối tượng giống như trong bước 4, bạn hãy
chọn lệnh
Scale
trong trình đơn
Modify > Transform
.
7. Nhấp chuột và kéo vào mũi tên để chọn giá trò bên cạnh mục Easing hoặc nhập giá
trò vào để thay đổi tốc độ chuyển động giữa các frame.
 Khi bắt đầu chuyển động tốc độ chầm chậm sau đó tăng tốc hướng về phía
kết thúc chuyển động, kéo con trượt lên hoặc nhập vào giá trò từ -1 đến -
100.
 Khi bắt đầu chuyển động tốc độ rất nhanh sau đó giảm tốc chuyển động
hướng về điểm kết thúc chuyển động, kéo con trượt xuống hoặc nhập vào
giá trò dương từ 1 đến 100.
 Theo mặc đònh, tốc độ thay đổi giữa các frame liên tục. Mục Easing tạo ra
hình dạng đối tượng xuất hiện nhỏ dần hoặc lớn dần bằng cách hiệu chỉnh
tốc độ thay đổi của chúng.
8. Để xoay các đối tượng trong lúc chuyển động, bạn có thể chọn một trong các chế độ

chọn có trong trình đơn Rotate như sau:
 Chọn
None
(chế độ thiết lập mặc đònh) không ứng dụng chế độ xoay cho
đối tượng.
 Chọn
Auto
xoay đối tượng chuyển động ít nhất một lần theo hướng xác
đònh.
 Chọn
Clockwise
(CW) hay
Counterclockwise
(CCW) xoay đối tượng
theo hướng được xác đònh và sau đó nhập vào góc độ xoay.
Chú y
ù :
Hướng xoay này thêm vào bất kỳ hướng xoay nào bạn ứng dụng vào frame cuối cùng
trong bước 4.
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
200
GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 9

9. Nếu bạn đang dùng một đường chuyển
động (Motion Path), chọn mục
Orient to
Path
để đònh hướng đường biên chuyển
động vào đường
Motion Path

.

10. Chọn mục
Synchronization
để đảm bảo Instance diễn hoạt lặp đi lặp lại đúng trong
đoạn phim. Dùng lệnh Synchronize nếu số frame quá trình chuyển động bên trong
Symbol thậm chí không nhiều hơn số frame mà Instance Graphic giữ trong đoạn
phim.
11. Nếu bạn đang dùng một đường Motion Path, chọn Snap để gắn các thành phần
chuyển động vào đường Motion Path theo điểm khai báo (Registration Point).

Đoạn phim đang cho chuyển động
CHUYỂN ĐỘNG (TWENNING MOTION) DỌC THEO ĐƯỜNG DẪN
Các Motion Guide Layer (Layer hướng dẫn chuyển động) cho phép bạn vẽ các đường
dẫn trong đó các Instance, group hoặc khối ký tự có thể chuyển động dọc theo các Motion
Guide Layer. Bạn có thể kết nối nhiều Layer vào một Motion Guide Layer cho nhiều đối tượng
theo cùng một đường dẫn. Một layer bình thường được kết nối đến một Motion Guide Layer sẽ
trở thành một Guided Layer.

Ảnh trong ví dụ này, là hai đối tượng trên 2 Layer độc lập được gắn trên cùng một Motion Path

Tạo ra một đường Motion Path cho một ảnh chuyển động Tweened Animation:
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
201
GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 9

1. Tạo một đường chuyển động Motion-Tweened Animation như đã mô tả trong
phần “Tạo chuyển động các Instance, Group và Ký tự ” để biết thêm chi tiết.
Nếu bạn chọn mục kiểm Orient to Path, đường cơ bản của đối tượng chuyển động
sẽ hướng vào đường chuyển động Motion Path. Nếu bạn chọn mục Snap, điểm

khai báo của đối tượng chuyển động sẽ bắt dính vào đường Motion Path.
2. Sau đó bạn thực hiện một trong những thao tác sau:
 Chọn Layer có chứa đối tượng chuyển động và chọn trên trình đơn
Insert
> Motion Guide
.
 Nhấp phải chuột (trong Windows) hoặc nhấp phím Control (trong
Macintosh) vào Layer có chứa ảnh chuyển động và chọn lệnh Add Motion
Guide trong trình đơn dọc.


Flash tạo ra một Layer mới bên trên Layer được chọn với biểu tượng Motion
Guide bên trái của tên Layer.
3. Dùng công cụ Pen, Pencil, Line, Circle, Rectangle hoặc Brush để vẽ đường dẫn
mong muốn.

4. Lúc này tâm của đối tượng sẽ bắt dính vào điểm đầu tiên của đường Guide trong
frame thứ nhất và điểm kết thúc đường Guide trong frame cuối cùng.
Chú ý:
Kéo Symbol bằng cách kéo điểm khai báo trên đối tượng để có được kết quả bắt dính
vào đường Guide tốt nhất.
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
202
GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 9

5. Bạn có thể dấu Layer Motion Guide và đường chuyển động để chỉ cho xuất hiện
các đối tượng chuyển động trong khi bạn làm việc. Bạn hãy nhấp chuột vào cột
biểu tượng con mắt Eye trong Layer Motion Guide.

Nhấp chuột vào cột con mắt để dấu Layer Motion Guide

Đối tượng là Group hoặc Symbol có thể chuyển động theo một đường dẫn khi bạn diễn hoạt chúng
Bài tập ví dụ mẫu sau cũng cố cho phần tạo chuyển động cho các instance - group - type
và mục chuyển động theo đường dẫn Motion Path
:
Bây giờ bạn có thể làm một ví dụ nhỏ với
ảnh là mũi tên bay xung quanh qũy đạo như sau:

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
203
GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 9

1. Trước hết bạn hãy mở file Flash mới. Sau đó cho hiển thò lưới để vẽ hình như bên
dưới tại keyframe thứ nhất trong Layer 1.

2. Sau đó chọn công cụ Arrow để chọn mũi tên này và chọn trên trình đơn
Modify >
Group
để nhóm tất cả các thành phần rời tạo thành hình mũi tên lại với nhau.

3. Bây giờ bạn sẽ thấy xung quanh mũi tên có bao bọc đường viền màu xanh nhạt. Nhớ
tắt lưới đi. Sau đó chọn trên trình đơn
Modify > Frame
để hiển thò bảng Frame. Tại
đây trong mục Tweening chọn Motion, mục Easing chọn là 0, mục Rotate chọn
None và đánh dấu vào các tùy chọn có trong mục Options như Orient to path,
Synchronize và Snap.

4. Sau đó bạn tạo thêm một Layer mới tên là Layer2. Sau chép ảnh mũi tên này và
dán vào Layer2 để có thêm một mũi tên nữa trong Layer2. lúc này hai mũi tên này

độc lập với nhau. Bạn có thể đổi màu cho mũi tên trên Layer 2 này để phân biệt
Layer1 và Layer2.
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
204
GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 9


5. Bây giờ bạn lặp lại bước 3 cho mũi tên
trong Layer2 này. Sau đó nhấp chuột vào
keyframe thứ nhất trên Layer1. Sau đó
xác đònh số vò trí keyframe cuối cùng.
Trong ví dụ chọn keyframe cuối cùng là
35.

6. Bây giờ bạn sẽ thấy đường Motion Tween xuất hiện trong thanh thước Timeline
trong Layer1 và lặp lại bước chọn số keyframe cuối cùng như bước 5 cho Layer2.

7. Bây giờ bạn nhấp chuột vào Layer2 và nhấp phải chuột chọn lệnh Add Motion
Guide để tạo Layer Motion Guide.

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
205
GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 9

8. Tiếp đến bạn nhấp chuột vào keyframe đầu tiên trong Layer Guide và dùng công cụ
Pencil Tool hoặc công cụ Circle Tool để vẽ đường quỹ đạo.


9. Nhấp chuột vào keyframe cuối cùng trong Layer1 và kéo mũi tên trên Layer này để
xác đònh điểm ngừng chuyển động và để tạo ra đường Motion Tween. Bạn cũng làm

tương tự như vậy cho mũi tên trong Layer2.

Đường chuyển động Motion Tween
10. Sau đó bạn chọn keyframe thứ nhất trong Layer1 và nhấp phải chuột chọn lệnh
Create Motion Tween trong trình đơn dọc để tạo điểm khai báo chuyển động cho
mũi tên trong Layer1. Còn lại Layer2, bạn lặp lại bước 10 này tương tự cho Layer2.

11. Vì bạn muốn hai mũi tên trong Layer1 và Layer2 cùng chạy trên một qũy đạo theo
hai hướng ngược nhau. Do đó bây giờ bạn nhấp chuột vào Layer1 và chọn lệnh
Rotate trong trình đơn
Modify > Transform
để hiệu chỉnh hướng đi của mũi tên
trong Layer1 này nằm trên đường quỹ đạo.
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
206