05/07/2010 10:40 GMT+7

Flash CS4 - Bài thực hành 19: tạo bướm bay lượn (Phần 1)

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 - Trong bài này, bạn sẽ tạo một con bướm bay lượn quanh stage, dừng lại một lúc rồi bay đ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 19. (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 019_buom_bay.fla

4. Import hình bướm.

4.1. Chọn File Import Import to Stage… từ menu (Hoặc bấm phím tắt Ctrl+R):

1bYn0FcI.jpgPhóng to

4.2 Trong hộp thoại Import, trỏ đến file buom.jpg và bấm nút Open: (file buom.jpg được đính kèm theo bài để sử dụng):

cHpYINUH.jpgPhóng to

Bạn thu được bức ảnh bướm nằm giữa màn hình, lúc này ảnh đang được chọn với khung màu xanh bao quanh:

lwsBqzKQ.jpgPhóng to

5. Dùng Pen Tool để vẽ bướm theo hình mẫu.

5.1 Bấm phím phải chuột vào Layer 1 trên Timeline cho xuất hiện menu ngữ cảnh và chọn Insert Layer:

fkZswJfk.jpgPhóng to

Flash bổ sung Layer 2 vào Timeline:

5kfFNieg.jpgPhóng to

5.2 Bạn sẽ đồ lại ảnh bướm bằng công cụ Pen Tool. Để dễ theo dõi, bạn cho phóng to ảnh bướm. Chọn View Zoom In từ menu (Hoặc phím tắt Ctrl+=):

fMpeCKOX.jpgPhóng to

Bạn thu được ảnh bướm to hơn do stage đã được phóng to:

k5pjKYQx.jpgPhóng to

5.3 Chọn Pen Tool từ thanh công cụ bên phải:(Xem thêm phần Tìm hiểu về Pen Tool ở cuối bài)

Z9IHVX0X.jpgPhóng to

5.4 Bạn đưa chuột vào Stage, chuột chuyển thành hình ngòi bút mực kèm dấu x bên phải. Bạn sẽ vẽ cánh bướm bằng các đường thẳng nhờ vào công cụ Pen Tool, sau đó dùng Selection Tool để nắn cong các đường thẳng thành cánh bướm. Bạn vẽ điểm đầu tiên của đường thẳng tại giao điểm phần trên của cánh bướm bên trái và thân bướm như hình minh họa:

ut533JCX.jpgPhóng to

5.5 Bấm chuột vào điểm thứ hai ở mép trên bên trái như hình minh họa:

tRX8wmVg.jpgPhóng to

5.6 Flash tạo một đường thẳng nối hai điểm vừa vẽ. Bạn bấm chuột vào điểm thứ ba như hình minh họa:

1otObOgR.jpgPhóng to

5.7 Flash vẽ tiếp đường thứ hai. Bạn bấm chuột vào điểm thứ tư:

47NjqIP5.jpgPhóng to

5.8 Tiếp đến điểm thứ năm:

98r6rKYx.jpgPhóng to

5.9 Sang điểm thứ sáu:

Iv6kL9Eh.jpgPhóng to

5.10 Đến điểm thứ bảy:

B2CnXPD5.jpgPhóng to

5.11 Bạn sẽ kết thúc nét vẽ bằng cách quay lại điểm đầu tiên. Khi rê chuột trở lại điểm đầu tiên, bạn thấy kế bên chuột xuất hiện một vòng tròn nhỏ báo hiệu kết thúc nét vẽ. Bạn bấm chuột để kết thúc nét vẽ:

0jQClblo.jpgPhóng to

Bạn thu được một hình đa giác khép kín:

Ma5dAyFK.jpgPhóng to

5.12 Tiếp theo, bạn sẽ nắn sửa các đường thẳng vừa vẽ cho phù hợp với cánh bướm. Chọn Selection Tool từ thanh công cụ:

alR7EI0j.jpgPhóng to

5.13 Rê chuột vào đường thẳng ở mép trên cánh bướm. Khi phía dưới chuột xuất hiện đường cong, bạn đẩy chuột lên trên một đoạn để đường thẳng chuyển thành đường cong theo cánh bướm:

IZ6xBn22.jpgPhóng to

5.14 Bạn thực hiện tiếp tục cho các đường thẳng còn lại để thu được đường cong bao quanh cánh bướm. Riêng đường thẳng dọc thân bướm có thể để nguyên không cần nắn sửa:

76V41AlV.jpgPhóng to

5.15 Tiếp theo, bạn sẽ tô màu ruột cho cánh bướm. Chọn Eyedropper Tool từ thanh công cụ:

ffBPFF3N.jpgPhóng to

5.16 Đưa chuột vào vùng có cánh bướm màu vàng, chuột chuyển thành ống hút màu kèm theo cây cọ bên dưới. Bấm chuột vào cánh bướm để hút màu vàng này:

qZdC5ksT.jpgPhóng to

5.17 Màu fill được cập nhật ở Property Inspector:

ZNkcXsaZ.jpgPhóng to

5.18 Đồng thời chuột chuyển thành thùng nước sơn. Bạn đưa chuột bấm vào vùng cánh bướm để tô màu ruột cho cánh bướm:

7YIgxjkO.jpgPhóng to

Bạn thu được cánh bướm màu vàng:

CjSIgceH.jpgPhóng to

5.19 Bạn sẽ chuyển cánh bướm vừa vẽ thành movie clip symbol. Bấm chọn keyframe 1 của Layer 2 trên Timeline:

Ua5QSBNG.jpgPhóng to

5.20 Nội dung của keyframe 1 (cánh bướm) được chọn:

wgoCk8ki.jpgPhóng to

5.21 Chọn Modify Convert to Symbol… từ menu (Hoặc phím tắt F8):

aNHu6iDU.jpgPhóng to

5.22 Ở hộp thoại Convert to Symbol, bạn điền canh buom mc vào ô Name, chọn Type là Movie Clip, Registration ở giữa, xong bấm OK:

gSCmWwOS.jpgPhóng to

5.23 Bạn sẽ copy cánh bướm sang phải. Chọn Edit Copy từ menu (Hoặc phím tắt Ctrl+C):

cwoth2NV.jpgPhóng to

5.24 Chọn Edit Paste in Place (Hoặc phím tắt Ctrl+Shift+V):

DKqC8yEu.jpgPhóng to

5.25 Bạn thu được cánh bướm thứ hai nằm trùng cánh thứ nhất. Bạn sẽ lật ngang cánh bướm cho đối xứng và di chuyển sang phải.Chọn Modify Transform Flip Horizontal từ menu:

tNVBqKfM.jpgPhóng to

Bạn thu được hai cánh bướm đối xứng nằm chồng lên nhau:

QOPNifEb.jpgPhóng to

5.26 Bạn dùng phím mũi tên di chuyển cánh bướm sang phải (Giữ phím Shift để di chuyển mỗi lần 10 pixel):

i4pKzahx.jpgPhóng to

5.27 Bước tiếp theo bạn sẽ vẽ thân bướm. Để việc vẽ được thuận tiện, bạn sẽ tắt Layer 2 đi. Bạn bấm chuột vào chấm màu đen phía dưới hình con mắt của Layer 2 trên Timeline:

CKpBGz9A.jpgPhóng to

Bạn thu được một dấu chéo màu đỏ phía dưới hình con mắt của Layer 2, đồng thời hai cánh bướm tạm thời bị tắt đi:

6kWrxZk7.jpgPhóng to

5.28 Layer 1 chứa hình bướm để tham khảo. Bạn sẽ bổ sung layer mới và vẽ thân bướm trên layer mới này. Bấm phím phải chuột vào Layer 2 cho xuất hiện menu ngữ cảnh và chọn Insert Layer:

54w3HkPM.jpgPhóng to

Flash bổ sung Layer 3 vào Timeline:

kB7Pchph.jpgPhóng to

5.29 Chọn Pen Tool từ thanh công cụ:

pdwFJCfj.jpgPhóng to

5.30 Bạn vẽ điểm đầu tiên từ đỉnh đầu bướm như hình minh họa:

IZnTf02L.jpgPhóng to

5.31 Bạn vẽ tiếp các điểm còn lại tại các vị trí và kết thúc ở điểm đầu tiên như hình minh họa:

NwfgBmJ8.jpgPhóng to

Bạn thu được hình đa giác khép kín:

5eQT9BD1.jpgPhóng to

5.32 Bạn sẽ nắn sửa hình đa giác cho cong tròn theo thân bướm. Chọn Selection tool từ thanh công cụ:

LObBkusP.jpgPhóng to

5.33 Rê chuột vào một đường thẳng. Khi phía dưới chuột xuất hiện đường cong, bạn đẩy chuột sang trái để nắn sửa:

fh0FZajx.jpgPhóng to

5.34 Bạn tiếp tục nắn sửa cho các đường còn lại và thu được đường viền thân bướm:

4XjsFWSl.jpgPhóng to

5.35 Tiếp theo bạn sẽ tô màu cho thân bướm. Chọn Eyedropper Tool từ thanh công cụ:

j8No61az.jpgPhóng to

5.36 Đưa chuột vào thân bướm, chuột chuyển thành ống hút màu với cây cọ bên phải, bấm chuột để lấy màu thân bướm:

gC78Ghsn.jpgPhóng to

Màu fill được cập nhật ở Property Inspector:

efYirs6D.jpgPhóng to

5.37 Đưa chuột vào lại thân bướm, chuột chuyển thành thùng nước sơn. Bấm vào thân bướm để tô màu thân:

wmrNy7rd.jpgPhóng to

Bạn thu được màu thân bướm:

TRsSxynS.jpgPhóng to

5.38 Để vẽ tiếp râu bướm, bạn chọn Line tool từ thanh công cụ:

GgqjLWLv.jpgPhóng to

5.39 Bạn vẽ hai đường thẳng từ đầu bướm ra ngoài như hình minh họa:

2wJo7oqS.jpgPhóng to

5.40 Tiếp theo bạn dùng Selection Tool để nắn sửa thành hai đường cong làm râu bướm:

CBZyKWNR.jpgPhóng to

5.41 Bạn sẽ chuyển thân và râu bướm thành symbol. Bấm chọn keyframe 1 của Layer 3 trên Timeline:

Lb92Y2NM.jpgPhóng to

Thân và râu bướm được chọn:

I1y0NH71.jpgPhóng to

5.42 Chọn Modify Convert to Symbol… từ menu (Hoặc phím tắt F8):

bXR62TqD.jpgPhóng to

5.43 Ở hộp thoại Convert to Symbol bạn gỏ than buom vào ô Name, chọn Type là Movie Clip, Registration ở giữa và bấm OK:

V6mBdeOJ.jpgPhóng to

5.44 Bạn mở Layer 2 và tắt Layer 1 từ Timeline:

rZIe8zlN.jpgPhóng to

Bạn nhìn thấy hình cánh bướm và thân bướm vừa vẽ được trên Stage:

E0bheV3P.jpgPhóng to

5.45 Bạn kéo thành hình chữ nhật để quét chọn toàn bộ:

vo8lDsBt.jpgPhóng to

5.46 Bạn sẽ chuyển toàn bộ thành symbol. Chọn Modify Convert to Symbol từ menu (Hoặc phím tắt F8):

lSrZUyy0.jpgPhóng to

5.47 Ở hộp thoại Convert to Symbol, bạn gỏ buom vào ô Name, chọn Type là Movie Clip, Registration ở giữa và bấm OK:

RXq6LyrB.jpgPhóng to

5.48 Bạn thu được movie clip symbol buom ở Layer 3:

8fhf1Kbv.jpgPhóng to

5.49 Bạn xóa Layer 1 và Layer 2, giữ lại Layer 3:

se6k52HY.jpgPhóng to

5.50 Chọn View Zoom Out từ menu (Hoặc phím tắt Ctrl+-):

xDfI3Ix3.jpgPhóng to

Stage được thu nhỏ lại như cũ với con bướm đang ở giữa:

mi6D6Bxu.jpgPhóng to

(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) * Bài 10:Tìm hiểu về PolyStar Tool* Bài 11: Classic Tween và trò chơi bập bênh đơn giản* Bài 11: Classic Tween và trò chơi bập bênh đơn giản (tiếp theo)* Bài 11: Phần lý thuyết bổ sung cho bài thực hành: Tìm hiểu về Grid* Bài 12: Thay đổi tốc độ hoạt động với tùy chọn Ease* Bài 12: Tìm hiểu về Ease(Phần lý thuyết bổ sung cho bài thực hành)* Bài 13: Sử dụng Classic motion guide* Bài 13: Tìm hiểu về Tweening(Phần lý thuyết bổ sung cho bài thực hành)* Bài 14: Sử dụng Color effect* Bài 14: Sử dụng Color effect(tiếp theo)* Bài 14: Tìm hiểu về Color Effect(Phần lý thuyết bổ sung cho bài thực hành)* Bài 16: Áp dụng color effect để tạo slideshow* Bài 16: Áp dụng color effect để tạo slideshow(Phần 2)* Bài 16: Áp dụng color effect để tạo slideshow(Phần 3)* Bài 16: Áp dụng color effect để tạo slideshow(Phần 4)* Bài 16: Tìm hiểu về Preloader(Phần 5)* Bài 17: Sử dụng Motion presets tạo slideshow(Phần 1)* Bài 17: Sử dụng Motion presets tạo slideshow (Phần 2)* Bài 17: Sử dụng Motion presets tạo slideshow (Phần lý thuyết bổ sung cho thực hành)* Bài 19: Tạo bướm bay lượn (Bài thực hành - Phần 1)

nhipsongso.TuoiTre.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