29/11/2009 22:14 GMT+7

Học Adobe Flash CS4 cơ bản - (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 motion tween cho cây vợt bên trái.

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

vJCL0NTg.jpgPhóng to

6.2 Flash thêm một layer mới với tên mặc định Layer 3. Bấm đúp vào Layer 3 để đổi tên thành Left paddle:

j7fGkTkV.jpgPhóng to

6.3 Đưa chuột sang thanh công cụ. Bấm chuột vào Oval Tool và giữ chuột vài giây cho menu phụ hiện ra. Bấm chọn Rectangle Tool:

kIqK8Tyf.jpgPhóng to

6.4 Bấm chuột vào ô Fill color để chọn màu ruột cho hình chữ nhật:

dEHfgW27.jpgPhóng to

6.5 Bảng màu hiện ra. Bạn chọn mẫu màu xanh:

eREk2htd.jpgPhóng to

Bạn thu được kết quả như sau (màu viền vẫn là không màu):

OYPCM8H4.jpgPhóng to

6.6 Đưa chuột vào Stage, bấm chuột vào góc trên vị trí xuất phát của quả bóng, kéo ngược sang trái một đoạn rồi nhả chuột ra để thu được một hình chữ nhật, như hình minh họa dưới đây:

43rIoMea.jpgPhóng to

6.7 Bấm chọn Selection Tool trên thanh công cụ:

2ysHcTgC.jpgPhóng to

6.8 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:

gOHeyPgD.jpgPhóng to

6.9 Bạn chọn ModifyConvert to Symbol…từ menu (hoặc bấm phím tắt F8) để chuyển hình chữ nhật thành symbol:

imIKRcOG.jpgPhóng to

6.10 Hộp thoại Convert to Symbol xuất hiện. Bạn gõ vào tên paddle ở ô Name, chọn Type là Movie Clip và bấm OK để đóng hộp thoại lại. hình chữ nhật được chuyển thành Movie Clip.

Y5tpXnwj.jpgPhóng to

6.11 Bấm phím phải chuột vào hình chữ nhật cho xuất hiện menu ngữ cảnh và chọn Create Motion Tween. Flash tạo motion tween cho hình chữ nhật trên layer Left paddle với 60 frame:

ANxOOuWz.jpgPhóng to

6.12 Rê chuột đến frame 60 trên Timeline và bấm chuột để chuyển Playhead đến frame 60:

EL98PNRa.jpgPhóng to

6.13 Frame 60 vẫn chưa phải là keyframe. Bạn bấm mũi tên Up, hình chữ nhật di chuyển lên trên 1 pixel, kế đến bạn bấm mũi tên Down, hình chữ nhật di chuyển xuống dưới 1 pixel, Flash tự động bổ sung keyframe tại frame 60, đồng thời vị trí hình chữ nhật vẫn không thay đổi do đã được bù trừ:

RHXMXytR.jpgPhóng to

6.14 Rê chuột đến frame 30 trên Timeline và bấm chuột để chuyển Playhead đến frame 30:

3pfoQOPz.jpgPhóng to

6.15 Giữ phím Shift và kéo hình chữ nhật đến vị trí số 2, nơi có quả bóng nằm sẵn (phím Shift giúp bạn di chuyển theo đường thẳng đứng, không bị lệch sang phải hoặc trái):

U78VgVeO.jpgPhóng to

Vậy là bạn đã hoàn thành motion tween cho cây vợt bên trái (tức hình chữ nhật).

7. Tạo motion tween cho cây vợt bên phải.

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

e4WjwGpZ.jpgPhóng to

7.2 Flash thêm một layer mới với tên mặc định Layer 4. Bấm đúp vào Layer 4 để đổi tên thành Right paddle:

JO9xF8tP.jpgPhóng to

7.3 Bấm chọn thẻ Library để mở Libray Panel:

AwoXr4zT.jpgPhóng to

7.4 Từ Library Panel, bạn kéo Movie Clip paddle vào Stage, thả vào vị trí 1 của cây vợt phải như hình minh họa:

lEEfw7Kw.jpgPhóng to

7.5 Bấm phím phải chuột vào cây vợt bên phải (tức hình chữ nhật) cho xuất hiện menu ngữ cảnh và chọn Create Motion Tween.

1APlEj9K.jpgPhóng to

7.6 Rê chuột đến frame 60 trên Timeline và bấm chuột để chuyển Playhead đến frame 60:

l3np1IEQ.jpgPhóng to

7.7 Frame 60 vẫn chưa phải là keyframe. Bạn bấm mũi tên Up, hình chữ nhật di chuyển lên trên 1 pixel, kế đến bạn bấm mũi tên Down, hình chữ nhật di chuyển xuống dưới 1 pixel, Flash tự động bổ sung keyframe tại frame 60, đồng thời vị trí hình chữ nhật vẫn không thay đổi do đã được bù trừ:

HhZGXVDS.jpgPhóng to

7.8 Rê chuột đến frame 15 trên Timeline và bấm chuột để chuyển Playhead đến frame 15:

GAVPYp6Q.jpgPhóng to

7.9 Giữ phím Shift và kéo cây vợt đến nơi quả bóng đang nằm ở vị trí số 2:

PmJeZAsV.jpgPhóng to

7.10 Rê chuột đến frame 30 trên Timeline và bấm chuột để chuyển Playhead đến frame 30:

F3Wxg8JC.jpgPhóng to

7.11 Giữ phím Shift và kéo cây vợt đến vị trí số 3 như hình minh họa:

PyXaSQMT.jpgPhóng to

7.12 Rê chuột đến frame 45 trên Timeline và bấm chuột để chuyển Playhead đến frame 45:

JSCD1CVP.jpgPhóng to

7.13 Giữ phím Shift và kéo cây vợt đến nơi có quả bóng ở vị trí số 4 như hình minh họa:

xisxF9lQ.jpgPhóng to

Vậy là bạn đã hoàn thành motion tween cho cây vợt bên phải.

8. Chuyển layer Guide thành Guide Layer.

Layer Guide đã hoàn thành nhiệm vụ. Bạn có thể xóa layer này đi. Tuy nhiên bạn có thể giữ lại để tham khảo bằng cách chuyển nó sang Guide Layer:

8.1 Bấm phím phải chuột vào layer Guide cho xuất hiện menu ngữ cảnh và chọn Guide:

qX9bPdGX.jpgPhóng to

Flash đổi biểu tượng của layer Guide thành cây búa. Bằng cách này, nội dung của layer Guide sẽ không được xuất ra theo Flash Movie, không làm tăng kích thước tác phẩm của bạn.

zaExeXae.jpgPhóng to

8.2 Chọn Control Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả:

Flash sẽ xuất thành file 009_pingpong.swf như sau:

osd0VfeO.jpgPhóng to

9. Di chuyển motion path

Nếu bạn thực hiện các thao tác đúng như hướng dẫn, khi Test Movie bạn sẽ thấy vợt trái chưa chạm vào quả bóng. Bạn sẽ di chuyển motion path của vợt trái cho vợt chạm vào quả bóng (bạn có thể lấy file mẫu đính kèm để thực hành bước này)

9.1. Rê chuột đến frame 30 trên Timeline và bấm chuột để chuyển Playhead đến frame 30:

539sa6BV.jpgPhóng to

Bạn nhìn thấy vợt trái cách quả bóng một đoạn:

blUy7A04.jpgPhóng to

9.2 Bấm chọn vào vợt trái cho xuất hiện motion path:

TYAakNK9.jpgPhóng to

9.3 Bấm đúp vào motion path:

VseRaYlO.jpgPhóng to

9.4 Bạn kiểm tra trên Property Inspector phải có biểu tượng Motion Tween để chắc rằng bạn đã chọn motion path, không phải đối tượng nào khác:

PXsdBjXm.jpgPhóng to

9.5 Dùng phím mũi tên sang phải (Right) trên bàn phím để di chuyển vợt sang phải đến khi vợt chạm vào quả bóng. Mỗi lần bạn bấm phím Right, đối tượng di chuyển 1 pixel, nếu bạn giữ phím Shift kèm theo thì đối tượng di chuyển 10 pixel.

op6u9Ide.jpgPhóng to

Bạn có thể thực hiện cách tương tự để áp dụng cho cây vợt bên phải.

Bài tập gợi ý:

Làm lại bài trên với hình hướng dẫn thay đổi như minh họa dưới đây. Lần này cả hai vợt đều di chuyển với các vị trí keyframe được đánh dấu trên hình minh họa. Bạn có thể tải hình minh họa guide2.jpg và file kết quả mẫu 009_pingpong2.fla để tham khảo.

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

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

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)* 1.2.F: Sử dụng Motion Presets để tạo ảnh động* 1.2.G: Sử dụng Motion Presets để tạo ảnh động(tiếp theo)* 1.2.H: Điều chỉnh Motion Path* 1.2.I: Tối ưu hóa cách quản lý các Layer* 1.2.K: Tối ưu hóa cách quản lý các Layer(tiếp theo)* 1.2.L: Tạo bản preview cho custom presets* 1.2.M: Tạo hiệu ứng lấp lánh cho chữ* 1.2.N: Tạo hiệu ứng lấp lánh cho chữ (tiếp theo)* 1.2.O: Tìm hiểu về Rectangle Tool, tọa độ và kích thước* 1.2.P: Tạo trò chơi bóng bàn đơn giản* 1.2.P: Tạo trò chơi bóng bàn đơn giản (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