Thứ Bảy, 8 tháng 2, 2014

sh CS4 - Bài thực hành 19: tạo bướm bay lượn (Phần 1)
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):

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

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:

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:

Flash bổ sung Layer 2 vào Timeline:

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+=):

Bạn thu được ảnh bướm to hơn do stage đã được phó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)

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:

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:

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:

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

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

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

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

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

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

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

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:

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:

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

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:

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

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:

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

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:

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

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

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:

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

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

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:

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

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

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:

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:

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:

Flash bổ sung Layer 3 vào Timeline:

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

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

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:

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

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

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:

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:

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

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:

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

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:

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

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

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

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:

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:

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

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

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:

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

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

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

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

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:

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

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

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

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

(còn tiếp)
GV TRƯƠNG VĂN NĂNG
Công ty TNHH Khải Thiên (KTC Co., Ltd)
---------------------------------------------------------------------------------------
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 1Giới thiệu giao diện chương trình 
Bài 2: Tạo ảnh động theo phương pháp Frame-By-FrameBà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 EaseBài 12Tì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Ệ
Chia sẻ:
/Images/bookmark/facebook_48.png /Images/bookmark/yahoo.jpg /Images/bookmark/twitter_48.png /Images/bookmark/google_48.png /Images/bookmark/myspace_48.png
TTO - Sony chính thức giới thiệu thế hệ video game console mới, Playstation 4 ngày 16-11. Nhiều...
Facebook Camera: anh em sinh đôi Instagram
TTO - Sau khi quyết định mua ứng dụng chia sẻ ảnh Instagram với giá tỉ đô, Facebook bất...
Máy tính đa năng đế xoay chiều
TTO - Dòng máy tính để bàn tất cả-trong-một (all-in-one) vừa có thêm một đại diện mới, Lenovo...
Android App: Nhắn tin SMS miễn phí từ Yahoo Hub
TTO - Yahoo vừa phát hành ứng dụng Yahoo Hub, dành cho người dùng smartphone...

Không có nhận xét nào: