Giáo trình hướng dẫn tạo ra các biểu tượng chuyển động Tween animation trên thanh thước timeline p1 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



CÁCH TẠO RA CÁC ẢNH
CHUYỂN ĐỘNG ANIMATION

TỔNG QUAN VỀ CÁCH TẠO RA CÁC ANIMATION
Bạn tạo ra các Animation bằng cách thay đổi nội dung của frame liên tiếp nhau. Bạn có
thể tạo đối tượng di chuyển ngang qua vùng Stage, thay đổi kích thước, hướng xoay, màu sắc,
hình dạng và cách làm cho đối tượng vào hay ra mờ dần (Fade In hay Fade Out). Những thay
đổi này có thể xảy ra độc lập nhau hoặc kết hợp với những sự thay đổi khác. Ví dụ, bạn có thể
tạo cho đối tượng xoay và khi nó di chuyển vào ngang qua vùng Stage mờ dần.
Có hai cách để tạo ra một đối tượng Animation chuyển động liên tiếp trong Flash:
chuyển động Animation theo frame-by-frame và Tweened Animation. Trong cách chuyển động
Animation theo frame-by-frame, bạn phải tạo ra ảnh trong mỗi frame. Trong cách chuyển động
theo Tweened Animation, bạn có thể tạo ra frame bắt đầu và frame kết thúc và cho phép Flash
tạo ra nhiều frame trong khoảng giữa frame đầu và frame cuối này. Flash thay đổi kích thước,
hướng xoay, màu sắc hoặc các thuộc tính khác ngang nhau giữa frame đầu và frame cuối để tạo
ra ảnh thay đổi chuyển động về hình dáng.
Cách chuyển động theo Tweened Animation là một cách có hiệu quả để tạo ra ảnh
chuyển động và thay đổi liên tục trong khi đó kích thước file rất nhỏ. Trong cách chuyển động
Tweened Animation này, Flash chỉ lưu lại các giá trò thay đổi giữa các frame. Trong cách
chuyển động Animation theo frame-by-frame, Flash lưu lại các giá trò cho mỗi frame kết thúc.
Để biết thêm cách hướng dẫn tạo ra ảnh chuyển động Animation này, bạn hãy tham
khảo thêm tài liệu “
GIÁO TRÌNH THIẾT KẾ WEB : PHẦN THỰC HÀNH - TỰ HỌC MACROMEDIA FLASH 5.0
BẰNG HÌNH ẢNH”
cùng tác giả
.

Chú ý :
Ngoài ra bạn cũng có thể tạo ảnh chuyển động Animation bằng cách dùng Set Property
action. Bạn có thể xem mục ActionScript Help để biết thêm chi tiết.
CÁCH TẠO RA CÁC KEYFRAME
Một keyframe là một frame mà nơi đó bạn thay đổi quá trình chuyển động Animation.
Khi bạn tạo ra ảnh chuyển động Animation theo cách frame-by-frame, mỗi frame là một
keyframe. Trong keyframe chuyển động theo cách Tweened Animation, bạn phải xác đònh tại
những điểm quan trọng trong quá trình chuyển động và cho phép Flash tạo ra nội dung giữa các
frame. Flash hiển thò các frame bổ sung của chế độ Tweened Animation như các màu xanh
nhạt, xanh đậm có mũi tên vẽ giữa các keyframe. Flash sẽ vẽ lại hình dáng của đối tượng trong
mỗi keyframe. Bạn chỉ nên tạo ra các keyframe tại những điểm đó trong ảnh thay đổi.
Các Keyframe được xác đònh trong thanh thước Timeline : một keyframe có một vòng
tròn đặt trên đó cho biết keyframe đó đang chứa dữ liệu và một keyframe trống thể hiện một
đường thẳng đứng trước một frame. Các frame thêm vào sau đó trên cùng một layer sẽ có cùng
một dữ liệu như keyframe.
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
191
Giáo trình hướng dẫn tạo ra các biểu tượng chuyển
động Tween animation trên thanh thước timeline
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


Keyframe có chứa dữ liệu


Keyframe trống


Cách tạo ra một keyframe, bạn có thể chọn một trong những bước sau đây:
• Chọn một frame trong thanh thước Timeline và chọn trên trình đơn

Insert >
Keyframe
.
• Nhấp phải chuột (trong Windows) hoặc nhấp Control (trong Macintosh) tại một
frame trong thanh thước Timeline và chọn lệnh Insert Keyframe có trong trình
đơn.

CÁC BIỂU TƯNG CHUYỂN ĐỘNG ANIMATION TRÊN THANH THƯỚC TIMELINE
Flash phân biệt chế độ chuyển động Tweened Animation với chế độ chuyển động
frame-by-frame trong thanh thước Timeline như sau:
 Các keyframe chuyển động theo chế độ Tweening là Motion được xác đònh bằng
dấu chấm đen và các frame Tween ở giữa liên tục và hai đầu có mũi tên màu đen
cùng với nền Background có màu xanh nhạt.

 Các Keyframe chuyển động theo chế độ Tweening là Shape được xác đònh bằng
dấu chấm đen và các frame Tween ở giữa liên tục và hai đầu có mũi tên màu đen
cùng với nền Background có màu xanh lá cây.
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
192
.
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

 Một đường gạch cho biết các keyframe cuối cùng đang bò thiếu.

 Một keyframe đơn độc được xác đònh bằng một dấu chấm đen. Các frame có màu
xám sáng sau một keyframe có chứa cùng dữ liệu và có một đường màu đen, một
hình chữ nhật nhỏ rỗng ở frame cuối cùng.
 Một chữ a nhỏ chỉ ra rằng frame đó đã được gán một Action (hành động) trong
bảng Actions.

 Một lá cờ màu đỏ cho biết frame đó có lời chú thích và frame đó có tên.

CÁC LAYER TRONG ANIMATION
Mỗi Scene trong Flash movie có thể gồm có nhiều Layer. Khi bạn tạo ảnh chuyển động,
bạn dùng các Layer để sắp xếp các thành phần của một trình tự chuyển động và tách biệt các
đối tượng chuyển động vì vậy chúng không xoá, kết nối hoặc phân rã lẫn nhau. Nếu bạn làm
Flash chuyển động nhiều nhóm hoặc các Symbol cùng lúc, mỗi đối tượng phải ở trên từng
Layer độc lập. Đặc biệt, Layer Background là một ảnh tónh, các Layer bổ sung chỉ chứa một đối
tượng chuyển động độc lập với nhau.

Các Layer xuất hiện thành hàng trong thanh thước Timeline
Khi một đoạn phim có nhiều Layer, Track và hiệu chỉnh các đối tượng trong một hay
nhiều Layer trở nên rất khó khăn. Công việc này trở nên dễ dàng nếu bạn làm việc với trên
một dữ liệu trong từng Layer tại lúc nào đó.
TỐC ĐỘ FRAME
Một tốc độ frame quá chậm có thể làm cho ảnh chuyển động không liên tục. Đối với tốc
độ frame quá nhanh có thể làm mờ chi tiết chuyển động. Một tốc độ frame 12 frame trên một
giây (fps) thường cho kết quả tốt nhất khi xuất đoạn phim trên trang Web. Đoạn phim
QuickTime và AVI movies có một tốc độ chung là 12 fps trong khi đó tốc độ ảnh chuyển động
chuẩn là 24 fps. Độ chuyển động phức tạpï và tốc độ của máy tính đều ảnh hưởng đến tốc độ
phát lại của đoạn phim. Kiểm tra đoạn phim chuyển động của bạn trên nhiều máy khác nhau để
xác đònh tốc độ tối ưu cho các frame.
Vì bạn chỉ xác đònh một tốc độ frame cho toàn đoạn phim Flash Movie, đó là một cách
thiết lập tỉ lệ tốt nhất trước khi bạn bắt đầu tạo ra ảnh chuyển động.
MỞ RỘNG ẢNH
Khi bạn tạo ra một ảnh nền Background chuyển động, điều đó rất cần thiết cho việc tạo
ra một ảnh tónh trong nhiều frame. Việc thêm vào các frame mới (không phải là keyframe) vào
một Layer sẽ làm tăng kích thước dữ liệu của frame cuối trong tất cả các frame mới.
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
193

.
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

 Mở rộng ảnh trong nhiều frame:
1. Tạo một ảnh trong keyframe đầu tiên của đoạn
phim.
2. Chọn một frame bên phải, tại vò trí frame cuối mà
bạn muốn thêm vào.
3. Chọn trình đơn
Insert > Frame
.

 Dùng một Shortcut để mở rộng ảnh:
4. Tạo một ảnh trong keyframe đầu tiên.
5. Nhấn phím Alt và nhấp chuột vào keyframe sang phải. Điều này sẽ tạo ra một
vùng mở rộng mới mà không cần một keyframe mới tại điểm cuối.
TỔNG QUAN VỀ CHẾ ĐỘ CHUYỂN ĐỘNG TWEENED ANIMATION
Flash có thể tạo ra 2 loại chuyển động của Tweened Animation.
 Chế độ
Motion Tweening
, bạn phải xác đònh các thuộc tính như vò trí, kích thước
và hướng xoay cho một Instance, Group hoặc khối ký tự tại một điểm và sau đó
bạn thay đổi các thuộc tính này tại một điểm khác.
 Chế độ
Shape Tweening
, bạn phải vẽ đối tượng tại một điểm và sau đó bạn thay
đổi hình dạng hoặc vẽ một đối tượng khác tại một điểm khác. Flash sẽ thêm vào
các giá trò hoặc hình dạng cho các frame giữa, tạo ra chuyển động.
TẠO CHUYỂN ĐỘNG (TWEEN) CHO CÁC INSTANCE, NHÓM (GROUP) VÀ KÝ TỰ
(TYPE)

Để làm thay đổi các thuộc tính của các Instance, nhóm và ký tự, bạn sử dụng chế độ
chuyển động Motion Tweening. Flash có thể thay đổi vò trí, kích thước, hướng xoay và kéo xiên
các Instance, nhóm hoặc ký tự. Ngoài ra, Flash có thể thay đổi màu của Instance và ký tự, tạo
ra sự chuyển đổi màu từ từ hoặc tạo ra một Instance ở chế độ vào hoặc ra mờ dần.
Để thay đổi màu của các nhóm hoặc ký tự, bạn phải tạo cho chúng trở thành các
Symbol. Bạn có thể xem mục “Cách tạo ra các Symbol” để biết thêm chi tiết.
Nếu bạn thay đổi số frame giữa hai keyframe hoặc di chuyển nhóm hoặc Symbol trong
keyframe, Flash sẽ tự động tween các frame này một lần nữa.

Bạn có thể tạo ra chế độ chuyển động Motion Tweening dùng một trong hai cách sau:
 Cách Thứ Nhất : Tạo ra keyframe đầu và
keyframe kết thúc cho quá trình chuyển
động và dùng tùy chọn Motion trong mục
Tweening từ bảng Frame Properties.

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
194
.
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

 Cách Thứ Hai : Tạo ra keyframe chuyển động đầu tiên và sau đó chọn trên trình
đơn
Insert > Create Motion Tween
và di chuyển đối tượng đến vò trí mới trong
vùng. Flash sẽ tự động tạo ra keyframe kết thúc.
Khi thay đổi vò trí, bạn có thể tạo cho đối tượng di chuyển dọc theo một đường dẫn phi
tuyến (Nonlinear Path).

Ảnh ví dụ con ong tại frame thứ hai, ba và thứ tư là kết quả chuyển động từ keyframe đầu
đến keyframe cuối cùng


Tạo một ảnh chuyển động Motion Tween dùng tùy chọn Motion trong mục Tweening:
1. Nhấp chuột vào tên của Layer để kích hoạt nó trở thành Layer hiện hành và sau đó
chọn một Keyframe trống trong Layer nơi bạn muốn tạo vùng chuyển động bắt đầu.

2. Tạo một Instance, nhóm hay một khối ký tự trong vùng Stage hoặc kéo một Instance
của một Symbol trong cửa sổ thư viện Library. Để chuyển động đối tượng đã vẽ, bạn
phải chuyển đổi đối tượng đó trở thành một Symbol.
3. Tạo keyframe thứ hai (keyframe kết thúc), nơi bạn muốn vùng chuyển động kết thúc
bằng cách dùng chuột nhấp vào xác đònh vò trí frame cuối cùng. Sau đó bạn nhấp
phải chuột chọn lệnh Insert Blank Keyframe có trong trình đơn để thêm vào các
keyframe trống cho đoạn phim.


Xác đònh vò trí
frame cuối
Chọn lệnh Insert Blank Keyframe

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
195
.
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


Sau khi chọn lệnh Insert Blank Keyframe
4. Sau đó bạn nhấp chuột vào keyframe thứ nhất. Tại đây bạn có thể thực hiện một
trong những bước sau để thay đổi Instance, Group hoặc khối ký tự tại frame cuối
cùng:
 Di chuyển đối tượng đến vò trí mới.
 Thay đổi kích thước, hướng xoay hoặc kéo xiên đối tượng.

 Thay đổi màu sắc của đối tượng (chỉ có Instance hoặc khối ký tự).
 Để thay đổi màu sắc của các thành phần khác ngoài Instance hoặc khối ký tự,
bạn phải dùng chế độ chuyển động Shape Tweening.
5. Chọn trình đơn
Window > Panels > Frame
để xuất hiện bảng Frame.
6. Đối với mục Tweening, chọn Motion.

Sau khi bạn chọn lệnh Motion
trong mục Tweening, trên thanh
thước Timeline xuất hiện các
đường gạch trên keyframe

7. Nếu bạn muốn thay đổi kích thước của đối tượng như trong bước 4, bạn hãy chọn
lệnh Scale trong trình đơn
Modify > Transform
để thay đổi kích thước của đối tượng
đã chọn.

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
196
.
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. Nhấp chuột vào kéo các phím mũi tên kế tiếp chọn giá trò trong mục Easing hoặc
nhập vào giá trò để hiệu chỉnh tỉ lệ thay đổi giữa các frame chuyển động như:

 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 có 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.
9. Để xoay các đối tượng được chọn trong khi chuyển động, bạn có thể chọn một tùy
chọn trong trình đơn Rotate:
 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.
 Trong mục Rotate 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ú ý
:
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.
10. Nếu bạn đang dùng một đường dẫn 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.

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
197
.
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

11. 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.
12. 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).
13. Cuối cùng nhấp chuột vào keyframe cuối cùng vào kéo đối tượng đến vò trí xác đònh
điểm dừng chuyển động để tạo ra đường Motion Tween. Bạn có thể xem ví dụ như
hình bên dưới.


14. Đối tượng đã tạo xong và bạn có thể nhấn phím Enter để diễn hoạt đoạn phim vừa
tạo. Lúc này bạn sẽ thấy ký tự “Flash” sẽ chuyển động từ trái sang phải.

Đoạn phim đang diễn hoạt
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
198
.