CtrlZ
Would you like to react to this message? Create an account in a few clicks or log in to continue.
CtrlZ

CtrlZ
 
RegisterRegister  HomeHome  Latest imagesLatest images  SearchSearch  Log inLog in  


Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape TweenView previous topic View next topic Go down

Copy đường link dưới đây gửi đến nick yahoo bạn bè!

Mon Nov 08, 2010 9:23 am
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween Bgavatar_06
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween Bgavatar_01Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween Bgavatar_02_newsFlash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween Bgavatar_03
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween Bgavatar_04_newavatarFlash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween Bgavatar_06_news
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween Bgavatar_07Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween Bgavatar_08_newsFlash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween Bgavatar_09
[Sáng Tạo] -

Points : 0
Join date : 1970-01-01


Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween Vide

PostSubject: Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween

Nguồn :https://ctrlz.123.st/t41-flash-cs4-bai-4-tao-anh-ong-theo-phuong-phap-shape-tween

Tiêu Đề : Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween

Trong bài này, bạn sẽ thực hành tạo ảnh động (animation) theo phương pháp shape tween kết hợp với import file để tạo đàn chim bay qua bầu trờ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 3. (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 003_shape_tween.fla (Phải chuột "Save File as" để tải file)
4. Sử dụng Line Tool để vẽ một đường thẳng
4.1. Bấm chọn Line Tool trên thanh công cụ bên phải:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.2. Lúc này chuột biến thành dấu +. Đưa chuột vào góc trên bên phải, giữ phím Shift và kéo chuột sang phải một đoạn khoảng 1cm (xem thêm phần Tìm hiểu về Line Tool ở cuối bài).
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.3. Nhả chuột ra, thu được một đường thẳng nằm ngang màu đen như sau:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.4. Bấm chọn Selection Tool trên thanh công cụ bên phải:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.5. Bấm chọn đường thẳng vừa vẽ, đường thẳng biến thành đường có chấm li ti:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.6. Chọn Modify > Convert to Symbol từ menu (Hoặc bấm phím tắt F8) để chuyển đường thẳng sang symbol:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
Hộp thoại Convert to Symbol xuất hiện. Tên mặc định cho symbol là Symbol 1:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.7 Bạn sửa tên là chim, chọn Type mặc định là Movie Clip và bấm OK để đóng hộp thoại lại:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
Đường thẳng đã được chuyển sang symbol như hình sau:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.8 Bấm đúp vào symbol để mở Timeline của symbol ra, Display Bar thay đổi để thể hiện bạn đang ở Timeline của symbol chim:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.9 Lúc này đường thẳng đang được chọn. Bấm chuột vào vùng màu xám để bỏ chọn:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.10 Rê chuột vào giữa đường thẳng đến khi phía dưới chuột xuất hiện một đường cong:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.11 Bấm chuột và đẩy lên cho đường thẳng biến thành đường cong:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
Nhả chuột ra, bạn thu được đường cong:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.12 Rê chuột vào giữa đường cong này đến khi phía dưới chuột xuất hiện một đường cong:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.13 Giữ phím Alt và kéo chuột xuống phía dưới:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
Nhả chuột ra, bạn thu được hình dáng một con chim đang vỗ cánh:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.14 Bạn sẽ tạo 2 shape tween liên tục để cho chim vỗ cánh. Bấm chọn frame 12 trên timeline và bấm F6 để chèn thêm keyframe:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
Bấm chọn frame 24 trên timeline và bấm F6 để chèn thêm keyframe:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.15 Bấm chọn keyframe 12 trên timeline:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
Lúc này trên Stage, chim đang được chọn, bạn bấm chuột ra vùng xám để bỏ chọn.
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.16 Rê chuột vào mép trái của cánh chim cho đến khi phía dưới chuột xuất hiện góc vuông
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.17 Bấm giữ chuột và kéo xuống một đoạn, nhả chuột ra thu được cánh chim hạ xuống:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.18 Thực hiện tương tự cho cánh chim bên phải:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.19 Chọn keyframe 12, bấm phím phải chuột và chọn Create Shape Tween từ menu ngữ cảnh:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.20 Chọn keyframe 1, bấm phím phải chuột và chọn Create Shape Tween từ menu ngữ cảnh:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
Kết quả thu được hai shape tween kề nhau với màu xanh lá cây đặc trưng cho shape tween như sau:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
4.21 Bấm chuột vào Scene 1 để thoát khỏi Timeline của symbol chim và quay ra Timeline chính:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
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.
Bạn sẽ sử dụng motion tween để cho chim bay từ góc dưới bên trái sang góc trên bên phải.


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:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
5.2. Bấm phím phải chuột và chọn Create Motion Tween từ menu ngữ cảnh:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
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.
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
5.3. Bấm chọn và kéo symbol chim lên góc trên bên phải:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
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.
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
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:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
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.
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
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:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
6.2. Đưa chuột bấm chọn Library panel kế bên Property Inspector.
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
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:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
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:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
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:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
Flash tạo một motion tween cho Layer 2 hoàn toàn giống với motion tween của Layer 1.
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
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:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
8.2. Chọn File > Import > Import to Stage… từ menu:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
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)
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
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:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
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:
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
GV TRƯƠNG VĂN NĂNG
Công ty TNHH Khải Thiên (KTC Co., Ltd)
-------------------------------------------------------------------------------------------
Phần lý thuyết bổ sung cho bài thực hành
Tìm hiểu về Line Tool
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.
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
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
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageViewNgay 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
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
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ì:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td>Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView</td></tr></table>
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageViewKế đế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.
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView
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:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td>Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView</td></tr></table>
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:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td>Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView</td></tr></table>
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.
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="5" width="40"><tr><td>Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView</td></tr><tr><td>Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView</td></tr></table>
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:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td>Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView</td></tr></table>
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.
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="4" width="40"><tr><td>Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView</td></tr><tr><td>Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView</td></tr></table>
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:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td>Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView</td></tr></table>
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="4" width="40"><tr><td>Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView</td></tr><tr><td>
Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView</td></tr></table>

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:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td>Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween ImageView</td></tr></table>







Flash CS4 - Bài 4: Tạo ảnh động theo phương pháp Shape Tween

View previous topic View next topic Back to top
Page 1 of 1
* Viết tiếng Việt có dấu, là tôn trọng người đọc.
* Chia sẻ bài sưu tầm có ghi rõ nguồn, là tôn trọng người viết.
* Thực hiện những điều trên, là tôn trọng chính mình.
-Nếu chèn smilies có vấn đề thì bấm A/a trên phải khung viết bài
Permissions in this forum:You cannot reply to topics in this forum
CtrlZ :: Đồ Họa :: Flash :: Căn Bản-
pingText link: Xem Phim Nhanh


Ctrlz.123.st | KINGDOM OF DREAMS
Copyright S4U - All rights reserved
Copyright 2010
Powered by vBulletin Version 4.0.7 licensed
Xem tốt nhất với độ phân giải 1024x768 và trình duyệt Firefox
Free forum | ©phpBB | Free forum support | Report an abuse | Forumotion.com