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 p3 doc

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


Trước khi hiệu chỉnh hướng xoay cho mũi tên trong Layer1

Sau khi hiệu chỉnh hướng xoay cho mũi tên trong Layer1

12. Trên từng keyframe bạn phải xác đònh từng điểm chạy và chọn lệnh Rotate trong
trình đơn
Modify > Transform
sau đó xoay mũi tên sao cho nó nằm ngay trên đường
quỹ đạo bạn cứ tiếp tục thực hiện cho đến keyframe cuối cùng vò trí mũi tên nằm
ngay vò trí xuất phát đầu tiên.

Xoay mũi tên sao cho nó nằm gom trên đường quỹ đạo

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

Chú ý :
Khi đối tượng đến các chỗ cong bạn phải dùng công cụ xoay Rotate này lần nữa để
hiệu chỉnh cho mũi tên nằm trên đường quỹ đạo như hình trang trước
13. Bạn có thể chia các keyframe không đều nhau tùy thuộc vào đường đi đến chỗ khúc
cong của quỹ đạo mà chia cho phù hợp với đối tượng.

14. Bạn thực hiện tương tự từ bước 11 cho đến bước 13 cho mũi tên trong Layer2. Sau đó
bạn sẽ có kết quả như hình bên dưới.

Keyframe cuối cùng đối tượng dừng lại tại ví trí bắt đầu

15. Cuối cùng trước khi diễn hoạt chuyển động
bạn muốn làm ẩn đường Motion Guide
trong vùng Stage, bạn hãy nhấp chuột vào
cột bên dưới con mắt trong Layer Motion
Guide.

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

Để diễn hoạt chuyển động, bạn hãy nhấn phím
Ctrl + Enter
để diễn hoạt ảnh trong
môi trường Debug.

Hai đối tượng đang chuyển động trong Flash Player

Kết nối các Layer vào một Layer Motion Guide, bạn có thể thực hiện một trong những cách
sau:
 Kéo Layer đang tồn tại bên dưới Layer Motion Guide. Bây giờ Layer này sẽ thục
vào trong bên dưới Layer Motion Guide. Tất cả các đối tượng trong Layer này sẽ
tự động bắt dính vào đường Motion Path.

 Tạo một Layer mới bên dưới Layer Motion Guide. Các đối tượng bạn chuyển
động trong Layer này sẽ tự động chuyển động dọc theo đường Motion Path.
 Chọn một Layer bên dưới Layer Motion Guide. Chọn trên trình đơn
Modify >
Layer

và chọn mục Guided trong hộp thoại Layer Properties.

 Nhấn phím Alt và nhấp chuột (trong Windows) hoặc nhấn phím Option và nhấp
chuột (trong Macintosh) vào Layer muốn liên kết với Layer Motion Guide.

Tháo bỏ các liên kết Layer từ một Layer Motion Guide:
 Chọn Layer bạn muốn bỏ liên kết.
 Sau đó bạn có thể thực hiện một trong những thao tác sau:
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
209
.
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

 Kéo Layer bên dưới Layer Motion Guide.
 Chọn trên trình đơn
Modify > Layer
và chọn Normal trong mục chọn Type trong
hộp thoại Layer Properties.

• Nhấn phím Alt và nhấp chuột (trong Windows) hoặc nhấn phím Option và nhấp
chuột (trong Macintosh) vào Layer muốn bỏ liên kết với Layer Motion Guide.
CHUYỂN ĐỘNG BIẾN DẠNG CHẾ ĐỘ TWEENING SHAPE
Với chế độ chuyển động Tweening Shape, bạn có thể tạo ra một hiệu ứng tương tự như
hiệu ứng Morphing (viết tắt của từ Metamorphosing), một kỹ thuật tạo các hiệu ứng đặc biệt
trong kỹ xảo hoạt hình, tạo cho một ảnh xuất hiện thay đổi liên tục thành một ảnh khác (biến
hình). Ngoài ra Flash cũng làm chuyển động vò trí, kích thước và màu sắc của đối tượng.
Kỹ xảo hoạt hình hay được sử dụng hơn gọi là tweening (viết tắt của chữ in-betweening),
tạo cho máy tính có khả năng tính toán và vẽ các khung hình trung gian giữa các khung hình
chính do các hoạ só vẽ bằng tay. Morphing chính là quá trình tweening vào một đối tượng khác.

Khi bạn nhấp chuột vào nút Play, ảnh con Gà sẽ chuyển động biến dạng từ từ thành con Be
â
Khi bạn Tweening một đối tượng tại một lúc nào đó thường tạo ra kết quả tốt nhất. Nếu
bạn muốn Tweening nhiều đối tương cùng lúc, tất cả các đối tượng này phải ở trên cùng một
Layer.
Flash không thể Tweening các đối tượng như Group, Symbols, ký tự hoặc ảnh Bitmap.
Bạn phải sử dụng trình đơn
Modify > Break Apart
để gán chế độ Tweening Shape vào những
đối tượng này.
Để điều khiển các đối tượng không chắc có thực và nhiều thay đổi phức tạp, bạn hãy
dùng chế độ Shape Hints, điều khiển từng phần trong ảnh gốc di chuyển thành đối tượng mới.
Bạn có thể xem mục “Cách dùng Shape Hints (các hình gợi ý)” trong phần sau để biết thêm chi
tiết.
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
210
.
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 Tween một đối tượng:
1. Nhấp chuột vào tên của một Layer để kích hoạt Layer này hoạt động và chọn
một keyframe trống nơi bạn muốn vùng chuyển động bắt đầu.

2. Tạo ảnh đối tượng cho frame đầu tiên. Bạn có thể dùng bất kỳ công cụ vẽ nào để
tạo một đối tượng. Ví dụ, để đơn giản nhất bạn có thể vẽ hình tròn.
3. Tiếp đến bạn hãy tạo keyframe thứ hai có số frame mong muốn sau frame thứ
nhất.

4. Tạo ảnh trong frame cuối cùng trong quá trình chuyển động. (Bạn có thể làm

chuyển động hình dạng, kích thước, màu sắc và vò trí của đối tượng trong bước 2).
Tại frame này bạn có thể dùng công cụ bút chì Pencil Tool và vẽ vào chữ ”Flash
5” chẳng hạn.

5. Sau đó bạn nhấp chuột trở về frame thứ nhất và chọn trên trình đơn
Window >
Panels > Frame
.
6. Trong mục Tweening, chọn Shape.
7. Nhấp chuột và kéo mũi tên kế bên mục Easing hoặc nhập giá trò vào trong ô để
hiệu chỉnh tốc độ thay đổi giữa các frame chuyển động:
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
211
.
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

 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. Chọn một tùy chọn trong mục Blend:
 Mục chọn với
Distributive
tạo ảnh
chuyển động mà trong đó các đối tượng

trung gian nhẳn hơn và không đều nhau.
 Mục chọn
Angular
tạo ảnh chuyển động
mà vẫn giữ lại các biên rõ ràng và các
đường thẳng trong đối tượng trung gian.


Sau khi chọn xong tất cả các mục có trong bảng Frame, các frame của bạn trên thanh
thước Timeline có hình giống như hình bên dưới



Đối tượng được diễn hoạt bây giờ hình tròn biến thành chữ Flash5

Chú ý :
Mục chọn với Angular chỉ thích hợp với các biên sắc nét và các đường thẳng. Nếu đối
tượng của bạn không có các biên, Flash hoàn trở lại mục chọn Tween Shape là Distributive.
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
212
.
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 DÙNG SHAPE HINT (CÁC HÌNH GI Ý)

Để điều khiển các đối tượng không chắc có thực và nhiều thay đổi phức tạp, bạn hãy sử
dụng Shape Hint. Chế độ Shape Hint này xác đònh các điểm tương ứng trong ảnh đầu và ảnh
cuối. Ví dụ như nếu bạn đang chuyển động một bản vẽ khuôn mặt khi nó thay đổi nét mặt, bạn
có thể dùng một ảnh gợi ý để đánh dấu vào mỗi con mắt. Sau đó, thay vì nét mặt trở thành một
ảnh lộn xộn vô đònh trong khi ảnh vẫn thay đổi chuyển động, mỗi con mắt vẫn còn thay đổi, bạn

có thể nhận biết được những độc lập nhau trong suốt quá trình chuyển động.

Các hình giống nhau chuyển động có và không có các hình gợi ý riêng biệt
 Shape Hint có chứa các chữ cái từ (a đến z) để xác đònh các điểm tương xứng tại đối
tượng bắt đầu và đối tượng kết thúc. Bạn có thể dùng đến 26 Shape Hint.
 Các Shape Hint nằm trong keyframe đầu tiên đều có màu vàng và màu xanh trong
keyframe cuối. Các Shape Hint là màu đỏ nếu nó không nằm trên đường cong.

Các Shape Hint có các ký tự a, b, c, d, e nằm trên đường cong có màu vàng trong khi đó Shape Hint ký tự f không
nằm trong đường cong nên có màu đỏ
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
213
.
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ó được kết qủa tốt nhất khi các đối tượng chuyển động, bạn có thể làm theo những
cách chỉ dẫn sau đây:
 Đối với các đối tượng chuyển động phức tạp, bạn hãy tạo ra các đối tượng trung gian
và làm chuyển động chúng thay vì bạn chỉ xác đònh một đối tượng bắt đầu và đối
tượng kết thúc.
 Bạn phải chắc chắn rằng các Shape Hint đều hợp lý. Ví dụ, nếu bạn đang dùng ba
đối tượng Shape Hint cho một hình tam giác, ba tam giác này phải ở trong cùng một
loại trong tam giác gốc ban đầu và tam giác được thay đổi. Loại trật tự này không thể
là các chữ cái abc trong keyframe đầu và abc trong keyframe thứ hai được.
 Các Shape Hint cho kết quả tốt nhất nếu bạn đặt chúng vào theo hướng ngược chiều
kim đồng hồ đầu góc trái trên của đối tượng.

Cách dùng các Shape Hint:
1. Chọn keyframe đầu tiên trong tiến trình tạo chuyển động Shape Tweening.

2. Chọn trên trình đơn
Modify > Transform > Add Shape Hint
. Ảnh ở chế độ chọn
Shape Hint đầu tiên xuất hiện vòng tròn màu đỏ có chứa ký tự nằm trên đối tượng.

3. Di chuyển ảnh gợi ý
Shape Hint
đến điểm bạn muốn đánh dấu.

4. Chọn keyframe cuối cùng trong chế độ chuyển động. Ảnh ở chế độ Shape Hint cuối
cùng xuất hiện tại nơi nào đó trong đối tượng với ký tự “a” có vòng tròn màu xanh
lá cây.
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY
214
.