08/12/2009 15:39 GMT+7

Flash CS4 - Bài 10: Sử dụng Shape Hint (tiếp theo)

GV TRƯƠNG VĂN NĂNGCông ty TNHH Khải Thiên (KTC Co., Ltd)
GV TRƯƠNG VĂN NĂNGCông ty TNHH Khải Thiên (KTC Co., Ltd)

TTO - Tạo Shape Tween chuyển hình chữ nhật thành ngôi sao.

6.1 Bấm chọn vào keyframe 1 trên Layer 1 của Timeline:

livhxxEx.jpgPhóng to

6.2 Bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Create Shape Tween:

9cImw1lc.jpgPhóng to

Trên Timeline xuất hiện một mũi tên màu xanh lá cây hướng từ frame 2 đến frame 23, màu đặc trưng của Shape Tween:

zG2DUEEv.jpgPhóng to

Bạn có thể xem thử kết quả hình chữ nhật chuyển sang hình ngôi sao bằng cách chọn Control Test Movie từ menu (hoặc phím tắt Ctrl+Enter). Tuy nhiên sự chuyển đổi không đều và không đẹp mắt. Bạn sử dụng Shape Hint để tinh chỉnh như sau (xem thêm phần Tìm hiểu về Shape Hint ở cuối bài).

6.3 Chọn Modify Shape Add Shape Hint từ menu (hoặc phím tắt Ctrl+Shift+H):

5v9dQZtW.jpgPhóng to

Giữa hình chữ nhật xuất hiện một Shape Hint ký hiệu là chữ a được khoanh tròn màu đỏ:

cpHW5oA7.jpgPhóng to

6.4 Bạn lấy chuột kéo và thả chữ a này lên góc trên bên trái của hình chữ nhật như hình minh họa:

RebmK4kE.jpgPhóng to

Kết quả thu được Shape Hint chuyển lên góc trên bên trái:

lrWuAgfa.jpgPhóng to

6.5 Bấm chọn keyframe số 24 trên Timeline:

XybTsHIq.jpgPhóng to

Trên Stage bạn thấy Shape Hint chữ a được khoanh tròn màu đỏ nằm giữa ngôi sao:

JjkmHZQI.jpgPhóng to

6.6 Bạn dùng chuột kéo Shape Hint a thả vào góc ngôi sao bên trái:

LqmGYJgs.jpgPhóng to

Bạn thu được Shape Hint chữ a được khoanh tròn màu xanh, chứng tỏ thao tác của bạn đã được Flash chấp nhận.

IPQJNyK3.jpgPhóng to

6.7 Bạn chọn lại keyframe 1 trên Timeline:

QEOvidJA.jpgPhóng to

Shape Hint chữ a màu đỏ ban đầu giờ đây đã chuyển sang màu vàng, chứng tỏ thao tác của bạn đã được Flash chấp nhận:

Rv0uHrnJ.jpgPhóng to

6.8 Rê chuột vào Shape Hint chữ a đến khi phía dưới chuột xuất hiện dấu cộng:

Sei4T8XS.jpgPhóng to

6.9 Bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Add Hint:

M9tdnVN5.jpgPhóng to

6.10 Flash bổ sung một Shape Hint mới với chữ b được khoanh tròn màu đỏ:

D8JKTHYD.jpgPhóng to

6.11 Bạn nắm kéo Shape Hint b và thả lên góc trên bên phải hình chữ nhật:

wBs2qNc8.jpgPhóng to

Shape Hint b được chuyển lên góc trên bên phải:

tlvV4EAx.jpgPhóng to

6.12 Bấm chọn keyframe số 24 trên Timeline:

NfWUhMZD.jpgPhóng to

Trên Stage bạn thấy Shape Hint chữ b được khoanh tròn màu đỏ nằm giữa ngôi sao:

7pcWO1ar.jpgPhóng to

6.13 Bạn nắm kéo Shape Hint b thả vào góc ngôi sao bên phải:

i4sKJKII.jpgPhóng to

6.14 Bạn thu được Shape Hint chữ b được khoanh tròn màu xanh, chứng tỏ thao tác của bạn đã được Flash chấp nhận.

DZhwDA6l.jpgPhóng to

Lúc này, nếu bạn chọn lại keyframe 1, bạn sẽ thấy Shape Hint b cũng đã đổi sang màu vàng.

CiDQwyXJ.jpgPhóng to

7. Xuất file thành flash movie.<?xml:namespace prefix = o />

Bạn chọn Control Test Movie từ menu, Flash sẽ xuất thành file 010_shape_hint.swf:

DAzcGYvr.jpgPhóng to

Bạn thu được kết quả hình chữ nhật chuyển sang ngôi sao năm cánh đều và đẹp. Đồng thời màu cũng chuyển tiếp liên tục từ đỏ sang xanh.

Một số bài tập gợi ý:

Sử dụng Shape Tween và Shape Hint để chuyển hình chữ nhật thành hình tam giác. Xem gợi ý hai Shape Hint ở hình minh họa sau đây (so sánh kết quả với bài mẫu 010_shape_hint2.fla)

Shape Hint ở keyframe đầu:

8QC9tbqE.jpgPhóng to

Shape Hint ở keyframe cuối:

2C8K4HOK.jpgPhóng to

Sử dụng Shape Tween và Shape Hint để chuyển số 1 thành số 2. Xem gợi ý hai Shape Hint ở hình minh họa sau đây. (Lưu ý: Bạn dùng Text Tool, font chữ Arial, Bold, size 100. Sau khi gỏ vào số 1 hoặc số 2, bạn dùng lệnh Modify Break Apart từ menu (hoặc phím tắt Ctrl+B) để chuyển chữ sang Shape) (so sánh kết quả với bài mẫu 010_shape_hint3.fla):

Shape Hint ở keyframe đầu:

uu82ERb2.jpgPhóng to

Shape Hint ở keyframe cuối:

aQlCXLH9.jpgPhóng to

Thực hành lại bài chuyển hình chữ nhật thành hình ngôi sao, sau đó thêm một Shape Tween chuyển ngôi sao trở về hình chữ nhật trên cùng một layer. Ở bài này, bạn chọn keyframe đầu của Shape Tween thứ hai để thêm Shape Hint, sau đó di chuyển các Shape Hint đến các vị trí tương ứng giống phần đầu. Bạn copy hình chữ nhật ở keyframe đầu và dán vào keyframe cuối để tạo sự chuyển tiếp không bị đột biến. (so sánh kết quả với bài mẫu 010_shape_hint4.fla).

(còn tiếp)

-------------------------------------------------------------------------------------

KIẾN THỨC ADOBE FLASH CS4 CĂN BẢN
* Bài 1: Giới thiệu chương trình Flash và các điểm mới của Flash CS4 Professional* Bài 1: Giới thiệu giao diện chương trình * Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame* Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame(tiếp theo)* Bài 3: Tạo ảnh động theo phương pháp Motion Tween* Bài 4: Tạo ảnh động theo phương pháp Shape Tween* Bài 4: Tạo ảnh động theo phương pháp Shape Tween (tiếp theo)* Bài 5: Sử dụng Motion Presets để tạo ảnh động* Bài 5: Sử dụng Motion Presets để tạo ảnh động(tiếp theo)* Bài 6: Điều chỉnh Motion Path* Bài 7 Tối ưu hóa cách quản lý các Layer* Bài 7: Tối ưu hóa cách quản lý các Layer(tiếp theo)* Bài 7: Tạo bản preview cho custom presets* Bài 8: Tạo hiệu ứng lấp lánh cho chữ* Bài 8: Tạo hiệu ứng lấp lánh cho chữ (tiếp theo)* Bài 8: Tìm hiểu về Rectangle Tool, tọa độ và kích thước* Bài 9: Tạo trò chơi bóng bàn đơn giản* Bài 9: Tạo trò chơi bóng bàn đơn giản(tiếp theo)* Bài 9: Tìm hiểu về Oval Tool(tiếp theo)* Bài 10: Sử dụng Shape Hint* Bài 10: Sử dụng Shape Hint (tiếp theo)
NHIPSONGSO.TUOITRE.COM.VN :: KIẾN THỨC CÔNG NGHỆ
GV TRƯƠNG VĂN NĂNGCông ty TNHH Khải Thiên (KTC Co., Ltd)
Trở thành người đầu tiên tặng sao cho bài viết 0 0 0
Bình luận (0)
thông tin tài khoản
Được quan tâm nhất Mới nhất Tặng sao cho thành viên

    Tuổi Trẻ Online Newsletters

    Đăng ký ngay để nhận gói tin tức mới

    Tuổi Trẻ Online sẽ gởi đến bạn những tin tức nổi bật nhất