Shape Tween giúp bạn biến đổi đối tượng từ dạng này sang dạng khác. Trong một số trường hợp, sự biến đổi này diễn ra không suôn sẻ như ý định, bạn sử dụng Shape Hint để hướng dẫn sự biến đổi theo ý mình.

Thực hành Shape Tween và Shape Hint

Trong bài này bạn sử dụng Shape Tween để chuyển hình chữ nhật thành hình ngôi sao, sau đó dùng Shape Hint để hướng dẫn sự biến đổi đều và đẹp mắt. Các bước thực hành như sau:
1. Chuyển về vùng làm việc mặc định.
Bạn bấm chọn vùng Essentials để chọn lại vùng làm việc mặc định của Flash, tiếp đến bấm chọn Reset Essentials đểkhôi phụcvùng làm việc mặc định này và bắt đầu vào bài thực hành 10.(Xem bài thực hành 1 về vùng làm việc)
2. Tạo mới một flash document. (Xem bài thực hành 1 về tạo một flash document).
3. Lưu một flash document. (Xem bài thực hành 1 về lưu một flash document).
Chọn folder FLASH CS4 ONLINE, sau đó lưu file này lại với tên 010_shape_hint.fla (Lưu phải mẫu tham khảo bằng cách phải chuột vào liên kết và chọn "Save target as")
4. Sử dụng Rectangle Tool để vẽ hình chữ nhật.
4.1 Bấm chọn vào Rectangle Tool trên thanh công cụ bên phải:
<>
4.2 Bấm chuột vào ô Stroke color để chọn màu viền cho hình chữ nhật:
<>
4.3 Bảng màu hiện ra, bạn bấm chọn vào ô bên phải có dấu chéo màu đỏ. Ô này dùng để thiết lập giá trị không màu cho đường viền, tức đối tượng được vẽ sẽ không có viền:
<>
4.4 Bấm chuột vào ô Fill color để chọn màu ruột cho hình chữ nhật:
4.5 Bảng màu hiện ra, bạn bấm chọn vào ô màu đỏ để chọn màu ruột của hình chữ nhật:
<>
4.6 Đưa chuột vào khoảng giữa Stage, bấm chuột vào góc trên bên trái và kéo sang góc dưới bên phải như hình minh họa:
<>
4.7 Bạn thu được một hình chữ nhật màu đỏ như sau:
<>
4.8 Bấm chọn vào Selection Tool trên thanh công cụ bên phải:
<>
4.9 Bấm chọn vào hình chữ nhật vừa vẽ.Khi đã được chọn, hình chữ nhật chuyển sang dạng hạt li ti, đồng thời phía dưới chuột xuất hiện mũi tên bốn chiều:
<>
4.10 Để canh giữa hình chữ nhật trên Stage, trước hết chọn Edit>Cut từ menu:
Kế đến chọn Edit>Paste in Center từ menu:
<>
Bạn thu được hình chữ nhật được canh giữa Stage như sau:
5. Sử dụng PolyStar Tool để vẽ hình ngôi sao.
5.1 Bấm vào frame 24 của Layer 1 ở Timeline:
<>
5.2 Chọn Insert > Timeline > Blank Keyframe từ menu (hoặc bấm phím tắt F7) để thêm keyframe trắng vào Stage:
<>
5.3 Bạn thu được một keyframe trắng tại frame 24:
<>
Đồng thời trên Stage hình chữ nhật cũng không còn.
<>
Bạn sẽ sử dụng PolyStar Tool để vẽ một ngôi sao vào Stage.
5.4 Bấm chọn vào Rectangle Tool trên thanh công cụ bên phải và giữ chuột vài giây cho menu phụ hiện ra. Bấm chọn PolyStar Tool (xem thêm phần Tìm hiểu về PolyStar Tool ở cuối bài):
<>
5.5 Bấm chuột vào ô Fill color để chọn màu ruột cho PolyStar Tool:
<>
5.6 Bảng màu hiện ra, bạn bấm chọn vào ô màu xanh để chọn màu ruột cho PolyStar Tool:
<>
5.7 Bấm vào nút Options… của PolyStar Tool:
<>
Hộp thoại Tool Settings xuất hiện:
<>
5.8 Ở mục Style, bạn bấm cho menu xổ xuống và chọn star:
<>
5.9 Bấm nút OK để đóng hộp thoại lại:
<>
5.10 Giữ phím Shift, đưa chuột vào Stage và kéo một đoạn từ dưới lên trên như hình minh họa:
<>
5.11 Bạn thu được hình ngôi sao màu xanh như sau:
<>
5.12 Bấm chọn vào Selection Tool trên thanh công cụ bên phải:
<>
5.13 Bấm chọn vào ngôi sao vừa vẽ.Khi đã được chọn, ngôi sao chuyển sang dạng hạt li ti, đồng thời phía dưới chuột xuất hiện mũi tên bốn chiều

<>
5.14 Để canh giữa ngôi sao trên Stage, trước hết chọn Edit>Cut từ menu:
<>
Kế đến chọn Edit>Paste in Center từ menu:

<>
Bạn thu được ngôi sao được canh giữa Stage như sau:


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:
<>
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:
<>
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:
<>
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):
<>
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 đỏ:
<>
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:
<>
Kết quả thu được Shape Hint chuyển lên góc trên bên trái:
<>
6.5 Bấm chọn keyframe số 24 trên Timeline:
<>
Trên Stage bạn thấy Shape Hint chữ a được khoanh tròn màu đỏ nằm giữa ngôi sao:
<>
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:
<>
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.
<>
6.7 Bạn chọn lại keyframe 1 trên Timeline:
<>
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:
<>
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:
<>
6.9 Bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Add Hint:
<>
6.10 Flash bổ sung một Shape Hint mới với chữ b được khoanh tròn màu đỏ:
<>
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:
<>
Shape Hint b được chuyển lên góc trên bên phải:
<>
6.12 Bấm chọn keyframe số 24 trên Timeline:
<>
Trên Stage bạn thấy Shape Hint chữ b được khoanh tròn màu đỏ nằm giữa ngôi sao:
<>
6.13 Bạn nắm kéo Shape Hint b thả vào góc ngôi sao bên phải:
<>
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.
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.
<>
7. Xuất file thành flash movie.
Bạn chọn Control > Test Movie từ menu, Flash sẽ xuất thành file 010_shape_hint.swf:
<>
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:
<>
Shape Hint ở keyframe cuối:
<>
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:
<>
Shape Hint ở keyframe cuối:
<>
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).