09/09/2009 09:29 GMT+7

Flash CS4: Tạo ảnh động theo phương pháp Shape Tween

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

TTO - Trong bài này, bạn sẽ thực hành tạo ảnh động (animation) theo phương pháp shape tween kết hợp với import file để tạo đàn chim bay qua bầu trời. 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ục vùng làm việc mặc định này và bắt đầu vào bài thực hành 3. (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 003_shape_tween.fla(Phải chuột "Save File as" để tải file)

4. Sử dụng Line Tool để vẽ một đường thẳng

4.1. Bấm chọn Line Tool trên thanh công cụ bên phải:

Phóng to

4.2. Lúc này chuột biến thành dấu +. Đưa chuột vào góc trên bên phải, giữ phím Shift và kéo chuột sang phải một đoạn khoảng 1cm (xem thêm phần Tìm hiểu về Line Tool ở cuối bài).

Phóng to

4.3. Nhả chuột ra, thu được một đường thẳng nằm ngang màu đen như sau:

Phóng to

4.4. Bấm chọn Selection Tool trên thanh công cụ bên phải:

Phóng to

4.5. Bấm chọn đường thẳng vừa vẽ, đường thẳng biến thành đường có chấm li ti:

Phóng to

4.6. Chọn Modify Convert to Symbol từ menu (Hoặc bấm phím tắt F8) để chuyển đường thẳng sang symbol:

Phóng to

Hộp thoại Convert to Symbol xuất hiện. Tên mặc định cho symbol là Symbol 1:

Phóng to

4.7 Bạn sửa tên là chim, chọn Type mặc định là Movie Clip và bấm OK để đóng hộp thoại lại:

Phóng to

Đường thẳng đã được chuyển sang symbol như hình sau:

Phóng to

4.8 Bấm đúp vào symbol để mở Timeline của symbol ra, Display Bar thay đổi để thể hiện bạn đang ở Timeline của symbol chim:

Phóng to

4.9 Lúc này đường thẳng đang được chọn. Bấm chuột vào vùng màu xám để bỏ chọn:

Phóng to

4.10 Rê chuột vào giữa đường thẳng đến khi phía dưới chuột xuất hiện một đường cong:

Phóng to

4.11 Bấm chuột và đẩy lên cho đường thẳng biến thành đường cong:

Phóng to

Nhả chuột ra, bạn thu được đường cong:

Phóng to

4.12 Rê chuột vào giữa đường cong này đến khi phía dưới chuột xuất hiện một đường cong:

Phóng to

4.13 Giữ phím Alt và kéo chuột xuống phía dưới:

Phóng to

Nhả chuột ra, bạn thu được hình dáng một con chim đang vỗ cánh:

Phóng to

4.14 Bạn sẽ tạo 2 shape tween liên tục để cho chim vỗ cánh. Bấm chọn frame 12 trên timeline và bấm F6 để chèn thêm keyframe:

Phóng to

Bấm chọn frame 24 trên timeline và bấm F6 để chèn thêm keyframe:

Phóng to

4.15 Bấm chọn keyframe 12 trên timeline:

Phóng to

Lúc này trên Stage, chim đang được chọn, bạn bấm chuột ra vùng xám để bỏ chọn.

Phóng to

4.16 Rê chuột vào mép trái của cánh chim cho đến khi phía dưới chuột xuất hiện góc vuông

Phóng to

4.17 Bấm giữ chuột và kéo xuống một đoạn, nhả chuột ra thu được cánh chim hạ xuống:

Phóng to

4.18 Thực hiện tương tự cho cánh chim bên phải:

Phóng to

4.19 Chọn keyframe 12, bấm phím phải chuột và chọn Create Shape Tween từ menu ngữ cảnh:

Phóng to

4.20 Chọn keyframe 1, bấm phím phải chuột và chọn Create Shape Tween từ menu ngữ cảnh:

Phóng to

Kết quả thu được hai shape tween kề nhau với màu xanh lá cây đặc trưng cho shape tween như sau:

Phóng to

4.21 Bấm chuột vào Scene 1 để thoát khỏi Timeline của symbol chim và quay ra Timeline chính:

Phóng to

Lúc này nếu bạn chọn Control Test Movie từ menu thì Flash xuất ra flash movie với một con chim đang vỗ cánh.

Bạn sẽ sử dụng motion tween để cho chim bay từ góc dưới bên trái sang góc trên bên phải.

(còn tiếp)

KIẾN THỨC ADOBE FLASH CS4 CĂN BẢN

Bài 1(Phần 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 (Phần 2): Giới thiệu giao diện chương trình * 1.2.A: Tạo ảnh động theo phương pháp Frame-By-Frame* 1.2.B: Tạo ảnh động theo phương pháp Frame-By-Frame(tiếp theo)* 1.2.C: Tạo ảnh động theo phương pháp Motion Tween* 1.2.D: Tạo ảnh động theo phương pháp Shape Tween

Bài 1 (Phần 3): Giới thiệu các công cụ vẽ

Bài 2 (Phần 1): Cách tạo animation trong Flash

Bài 3 (Phần 1): Cách tạo symbol trong FlashBài 3 (Phần 2): Cách sử dụng hình ảnh bitmap trong Flash

Bài 4 (Phần 1):Cách tạo mask trong Flash

Bài 5 (Phần 1):Cách xử lý âm thanhBài 5 (Phần 2):Cách xử lý video

Bài 6 (Phần 1): Cách viết Actionscript 3.0 trong Flash Bài 6 (Phần 2): Cách sử dụng các component trong Flash Bài 6 (Phần 3): Cách tạo preloader trong Flash Bài 6 (Phần 4): Cách tạo banner trong Flash Bài 6 (Phần 5): Cách tạo một website hoàn chỉnh bằng Flash Bài 6 (Phần 6): Cách viết game cho flash bằng Actionscript 3.0

http://nhipsongso.tuoitre.com.vn

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

KIẾN THỨC là chuyên mục mới của chuyên trang Nhịp Sống Số cung cấp những kiến thức chuyên biệt về các lĩnh vực CNTT như đồ họa, lập trình, mạng, mã nguồn mở... theo định kỳ hằng tuần từ căn bản đến nâng cao. Các bài viết hướng dẫn được chọn lọc và xử lý từ các trung tâm đào tạo CNTT uy tín hiện nay.

Rất mong nhận được sự góp ý của bạn đọc để chuyên mục ngày càng phát triển với nội dung phong phú hơn. Thư từ phản hồi có thể gửi về email: nss@tuoitre.com.vn.

Lưu ý các email phản hồi thắc mắc về bài hướng dẫn cần ghi rõ tiêu đề gửi đến chuyên mục KIẾN THỨC - NHỊP SỐNG SỐ và kèm theo liên kết bài hướng dẫn bên trong nội dung email.