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

TTO - Tiếp tục bài học Flash CS4 với phần thực hành tạo bướm bay lượn.
6. Cho bướm bay lượn.
6.1 Bấm chọn con bướm trên stage:

6.2 Bạn thu nhỏ kích thước bướm lại bằng cách gỏ số 70 trực tiếp vào ô W trên Property Inspector.
Lưu ý: bạn phải chọn giữ nguyên tỉ lệ bằng cách bấm chọn móc xích bên trái ô W:

6.3 Kéo bướm xuống góc dưới bên trái, ngoài stage:

6.4 Bấm phím phải chuột vào keyframe 1 trên Timeline cho xuất hiện menu ngữ cảnh và chọn Create Motion Tween:

Flash tạo Motion Tween mặc định một giây và di chuyển playhead đến frame 24:

6.5 Bạn kéo bướm lên góc trên bên phải như hình minh họa:

6.6 Flash bổ sung keyframe tại frame 24. Bạn sẽ điều chỉnh cho thời gian kéo dài 3 giây. Đưa chuột vào keyframe 24. Khi chuột chuyển thành mũi tên hai chiều, kéo keyframe sang phải đến frame 72:

Bạn thu được vị trí mới của keyframe:

6.7 Motion path hiện đang là đường thẳng. Bạn sẽ chuyển Motion path thành đường cong. Rê chuột vào Motion path đến khi phía dưới chuột xuất hiện đường cong:

6.8 Đẩy chuột lên để uống cong motion path:

6.9 Chọn frame 55 trên Timeline:

6.10 Bạn kéo bướm đến vị trí mới như hình minh họa:

Motion path chuyển thành đường cong uốn lượn:

6.11 Lúc này nếu bạn xem thử thì thấy bướm chỉ di chuyển chớ không lượn theo đường cong. Bạn chọn motion tween:

6.12 Bấm chọn vào ô Orient to path ở Property Inspector:

Timeline được cập nhật với các keyframe trên motion tween:

6.13 Lúc này nếu bạn xem thử thì thấy bướm lượn theo đường cong nhưng chưa hoàn chỉnh. Bạn sẽ xoay bướm theo hướng motion path. Chọn keyframe 1 trên timeline:

6.14 Chọn Free Transform Tool từ thanh công cụ:

6.15 Đưa chuột xoay bướm theo hướng motion path:

Lúc này nếu bạn xem thử thì thấy bướm lượn theo đường cong hoàn chỉnh.
6.16 Bạn sẽ cho bướm dừng 2 giây và sau đó bay ra khỏi stage. Chọn frame 120:

6.17 Bấm phím tắt F5 để bổ sung frame:

Lúc này nếu bạn xem thử thì thấy bướm lượn theo đường cong hoàn chỉnh và dừng lại 2 giây. Tiếp theo bạn sẽ cho bướm bay ra khỏi Stage.
6.18 Chọn Edit > Copy từ menu (Hoặc phím tắt Ctrl+C) để copy vị trí hiện hữu của bướm:

6.19 Chọn frame 121 trên Timeline:

6.20 Chọn Insert > Timeline > Blank Keyframe (Hoặc phím tắt F7)để thêm frame trắng tại frame 121:

6.21 Chọn Edit> Paste in Place (Hoặc phím tắt Ctrl+Shift+V) để dán bướm ra đúng vị trí lúc nãy:

6.23 Bấm phím phải chuột vào bướm cho xuất hiện menu ngữ cảnh và chọn Create Motin Tween:

6.24 Lần này bạn sẽ cho bướm bay nhanh ra ngoài. Chọn frame 170 trên timeline:

6.25 Bấm phím tắt F6 để thêm keyframe:

6.26 Chuyển playhead đến frame 170:

6.27 Kéo bướm sang trái:

Bạn sẽ nắn sửa cho bướm bay ra khỏi stage theo đường cong.
6.28 Chọn Selection Tool:

6.29 Rê chuột vào motion path cho đến khi dưới chuột xuất hiện đường cong:

6.30 Kéo chuột xuống dưới để uốn cong motion path:

6.31 Để bướm lượn theo đường cong, bạn chọn motion tween trên timeline:

6.32 Và chọn ô Orient to path trên Property Inspector:

Timeline được cập nhật với các keyframe trên motion tween:

Chạy thử bạn thấy bướm bay lượn, dừng lại và bay đi nhưng chưa vỗ cánh. Tiếp theo bạn sẽ cho bướm vỗ cánh.
7. Bổ sung bướm vỗ cánh.
7.1. Chọn library:

7.2 Bấm đúp vào canh buom mc để mở timeline của movie clip này:

7.3 Flash đưa bạn vào timeline của canh buom mc. Lúc này cánh bướm đang được chọn (xuất hiện các hạt li ti vì nội dung bên trong canh buom mc vẫn là shape).  :

7.4 Bạn bấm phím tắt F8 để chuyển cánh bướm này sang symbol tức là tạo symbol lồng trong symbol. Ở hộp thoại Convert to Symbol, bạn gỏ canh buom graphic vào ô Name, chọn Type là Graphic, Registration ở giữa và bấm OK:

7.5 Bạn sẽ tạo 2 classic tween liên tục, trong đó keyframe giữa có nội dung cánh bướm thu hẹp lại, tạo được hiệu ứng bướm vỗ cánh. Muốn cho cánh bướm thu hẹp lại một cách hợp lý, bạn phải chuyển trọng tâm cánh bướm về một bên. Chọn Free Transform Tool từ thanh công cụ:

7.6 Rê chuột vào tâm xoay (trọng tâm) cho đến khi bên phải chuột xuất hiện vòng tròn nhỏ:

7.7 Kéo chuột để chuyển trọng tâm sang mép phải:

7.8 Lúc này bạn vẫn đang ở Timeline của movie clip canh buom mc. Chọn frame 5 của Layer 1 trên timeline:

7.9 Bấm phím tắt F6 để bổ sung thêm keyframe:

7.10 Chọn frame 3 của Layer 1 trên timeline:

7.11 Bấm phím tắt F6 để bổ sung thêm keyframe:

7.12 Chọn mép trái cánh bướm trên Stage:

7.13 Kéo sang phải một đoạn để thu hẹp cánh bướm:

7.14 Bấm phím phải chuột vào keyframe 3 cho xuất hiện menu ngữ cảnh và chọn Create Classic Tween:

7.15 Bấm phím phải chuột vào keyframe 1 cho xuất hiện menu ngữ cảnh và chọn Create Classic Tween:

Bạn thu được 2 Classic Tween liên tục.
7.16 Bấm chuột vào Scene 1 để trở ra timeline chính:

Chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả. Bạn thu được bướm bay lượn và vỗ cánh.
Bài tập gợi ý:
* Bổ sung hình nền bông hoa khu vực bướm đậu.
* Dùng Free Transform Tool để thay đổi độ lớn của bướm khi bướm đã bay xa.
(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)
* Bài 19: Tạo bướm bay lượn (Bài thực hành - Phần 2)
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: