13/09/2009 19:41 GMT+7

Flash CS4: Tạo ảnh động theo phương pháp Shape Tween (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 - 5. Tạo motion tween cho chim bay.

5.1. Bấm chọn và kéo symbol chim xuống góc dưới bên trái:

5aD2dN2y.jpgPhóng to

5.2. Bấm phím phải chuột và chọn Create Motion Tween từ menu ngữ cảnh:

2UHpPWPA.jpgPhóng to

Trong khu vực frame của Timeline, Flash đã tự động bổ sung thêm số frame thành 24 frame (mặc định cho motion tween hoàn thành trong một giây - theo mặc định Flash CS4 thiết lập tốc độ 24 fps). Đồng thời Playhead được di chuyển đến frame số 24. Bên cạnh đó bạn còn thấy các frame từ 1 - 24 đã được đổi sang màu xanh nhạt đặc trưng của motion tween của Flash CS4.

PcGF3LQO.jpgPhóng to

5.3. Bấm chọn và kéo symbol chim lên góc trên bên phải:

WgyryLKk.jpgPhóng to

Khi nhả chuột ra, Flash tự động tạo thêm một đường thẳng nối từ góc dưới bên trái lên góc trên bên phải với các dấu chấm ở giữa, mỗi dấu chấm là một frame của motion tween. Ngoài ra Flash cũng thêm một key frame vào timeline, hiển thị bằng một hình thoi màu đen.

I3e5BBSG.jpgPhóng to

Với chỉ một giây cho motion tween, bạn không thể nhìn kịp hiệu ứng chim vỗ cánh. Bạn sẽ cho bổ sung frame cho motion tween hoạt động 4 giây, tức 96 frame.

5.4. Đưa chuột vào keyframe 24 cho đến khi chuột biến thành mũi tên hai chiều:

yYmk9FAh.jpgPhóng to

5.5. Nắm giữ chuột và kéo sang phải cho đến frame 96 thì nhả chuột ra, hình thoi thể hiện keyframe đã được di chuyển từ frame 24 sang frame 96.

ARn8qAgU.jpgPhó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 bay từ góc dưới bên trái sang góc trên bên phải.

6. Thêm một con chim vào Stage

6.1. Bấm vào nút New Layer để thêm một layer vào Timeline:

LOqRDsYQ.jpgPhóng to

6.2. Đưa chuột bấm chọn Library panel kế bên Property Inspector.

9N5LcBYA.jpgPhóng to

6.3. Bấm chuột vào biểu tượng symbol của chim và kéo sang góc dưới bên trái, cao hơn vị trí chim cũ một chút. Nhả chuột ra bạn thu được một con chim ở vị trí mới:

OCJsGCxJ.jpgPhóng to

7. Copy và paste motion tween

7.1. Bấm chuột vào một frame bất kỳ trong vùng motion tween của layer 1, bấm phím phải chuột và chọn Copy Motion từ menu ngữ cảnh:

9WaKAxPl.jpgPhóng to

7.2. Bấm chuột vào một frame bất kỳ trong vùng frame của layer 2, bấm phím phải chuột và chọn Paste Motion từ menu ngữ cảnh:

FWNSTcAu.jpgPhóng to

Flash tạo một motion tween cho Layer 2 hoàn toàn giống với motion tween của Layer 1.

Ct6qkom6.jpgPhó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 hai con chim đang vỗ cánh bay từ góc dưới bên trái sang góc trên bên phải.

8. Thêm hình bầu trời vào làm background

8.1. Bấm vào nút New Layer để thêm một layer vào Timeline:

ILTQOHS3.jpgPhóng to

8.2. Chọn File Import Import to Stage… từ menu:

60UHv7ub.jpgPhóng to

8.3. Trong hộp thoại Import, trỏ đến file cloud.jpg và bấm nút Open: (file cloud.jpg được đính kèm theo bài, bạn có thể chọn một file khác có kích cỡ 550x400 pixel để sử dụng)

TIFkutxG.jpgPhóng to

8.4. File cloud.jpg được import vào layer 3 và che mất các layer chứa chim. Dùng chuột kéo chuyển layer 3 xuống phía dưới, khi kéo bạn thấy một đường thẳng có hình tròn nhỏ bên trái xuất hiện kèm theo. Khi thấy đường thẳng này đã đến dưới cùng thì nhả chuột ra:

JFKGEdY6.jpgPhóng to

9. Xem thử animation lúc đang biên soạn

Để xem thử kết quả lúc đang biên soạn, bạn nhấn phím ENTER. Tuy nhiên bạn chỉ thấy chim di chuyển chớ không thấy chim vỗ cánh. Để thấy chim vừa di chuyển vừa vỗ cánh bạn phải xuất thành flash movie.

10. Xuất file thành flash movie

Để xuất file thành flash movie, bạn chọn Control Test Movie từ menu:

Flash sẽ xuất thành file 003_shape_tween.swf:

cupIEob7.jpgPhóng to

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

Line Tool là công cụ để vẽ đường thẳng. Sau khi chọn Line Tool, chuột sẽ chuyển sang hình dấu +. Để vẽ bạn bấm chuột vào vị trí đầu, kéo chuột đến vị trí cuối và nhả chuột ra để thu được một đường thẳng.

Nếu giữ phím Shift trong khi vẽ bạn sẽ thu được một đường thẳng tạo với đường nằm ngang một góc là bội số của 45o.

ZEUQLYeV.jpgPhóng to
Property Inspector sẽ tự động cập nhật để cung cấp các thông tin liên quan đến Line Tool như sau
EiHtgUcU.jpg Ngay dưới Property Inspector là biểu tượng một đường thẳng kèm dòng chữ cho biết bạn đang chọn Line Tool
6QXrEdDN.jpg

Ngay dưới phần Fill and Stroke là phần chọn màu cho viền (Stroke-bên trái) và ruột (Fill-bên phải). Do Line Tool chỉ vẽ đường viền nên bạn không thể đổi màu Fill trong trường hợp này.

Bạn chọn màu từ bảng màu khi bấm vào ô màu đen kế bên cây bút chì:

wGdYw1dY.jpgPhóng to
bFgBAcl5.jpg Kế đến là chọn độ lớn của đường viền. Bạn có thể nắm kéo thanh trượt nằm ngay bên phải chữ Stroke hoặc gỏ số trực tiếp vào ô bên phải. Khi bạn kéo thanh trượt, ô bên phải sẽ cập nhật giá trị tùy theo vị trí thanh trượt.
PEH1omET.jpg

Phần tiếp theo là chọn kiểu dáng cho nét vẽ. Nếu bạn bấm vào hình tam giác đen kế bên cây bút chì, bạn có thể chọn một trong các kiểu nét vẽ sau đây:

UtBKLkjU.jpgPhóng to

Nếu bạn bấm vào cây bút chì, bạn có thể tùy biến thêm các thông số phụ cho nét vẽ trong hộp thoại sau đây:

qnjoRXb7.jpgPhóng to

Bạn có thể thử nghiệm để tìm cho mình một kiểu dáng nét vẽ ưng ý. Tuy nhiên cần lưu ý một điều là kiểu dáng phức tạp sẽ làm tăng kích thước cuối cùng của tác phẩm.

y0asPihS.jpgPhóng to
z6UEobHk.jpg

Phần Scale giúp hiển thị nét vẽ khi được phóng to hoặc thu nhỏ. Nếu bấm vào hình tam giác đen, bạn sẽ có các tùy chọn sau đây:

O3FaOntK.jpgPhóng to

Normal: Thay đổi theo giá trị scale.

Horizontal: Chỉ scale theo chiều ngang.

Vertical: Chỉ scale theo chiều dọc.

None: Không thay đổi theo giá trị scale.

Nếu chọn ô Hinting, Flash sẽ tự điều chỉnh để làm tròn giá trị stroke, tránh xuất hiện những nét nhòe trên đường thẳng nằm ngang hoặc thẳng đứng.

WGh9nGvu.jpgPhóng to
d366eumR.jpg

Tùy chọn Cap giúp bạn thể hiện kiểu dáng đầu mút của đường thẳng. Nếu bấm vào hình tam giác đen, bạn sẽ có các tùy chọn sau đây:

GlwK2XOr.jpgPhóng to
1Y0R2lwn.jpgPhóng to

CeFYL54k.jpg

Join giúp bạn thể hiện kiểu dáng chỗ giao nhau của hai đường thẳng. Bạn sẽ thu được các chọn lựa sau đây khi bấm vào hình tam giác đen:

AhwJ6bDO.jpgPhóng to

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

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* 1.2.E: Tạo ảnh động theo phương pháp Shape Tween (tiếp theo)

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

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

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

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