Giáo trình thiết kế web - Tween hình chuyển động

GIÁO TRÌNH THIẾT KẾ WEB : PHAN BÀI TẬP - Tự HỌC MACROMEDIA FLASH 5.0 BANG HÌNH ẢNH CHƯƠNG 14 TWEEN HÌNH CHUYEN đ ộ n g Trong bài tập này các bạn sẽ được hướng dẫn cách tạo một đối tượng chuyển động bằng cách Tween hình. Đây là phần mở đầu cơ bản mà các bạn khi thiết kế hoạt hình trên Flash cần phải quen thuộc. Trong bài tập này các bạn sẽ tạo một vòng tròn có màu di chuyển từ trái sang phải. Các bước được tiến hành như sau: 1. Khởi động chương trình Flash, nhấp chuột vào Start > Programs > Macromedia Flash 5 > Flash 5. ỊH Ị M icrosoft Excel í ã l M ic iosoft PoweiPoint In ternet E xplo ie i k ^ M ic iosoft Outlook S Microsoft Wold k Ç jl O utlook Express > I js j Snaglt32 l à Macromedia Flash 4 l à NPT *s W eb Books f*â M aciom edia Flash 5 OiCAD Design D esktop ► s j Flash Licen^ LpH Just C lick 'n 'See 2.51 ► Flash Readme m Xara 3D3 LJ Players . p i A d a p te c E asy CD C ie a to r 4 ► ^ S ta n d a lo n e P laye i 2. Cửa sổ làm việc xuất hiện và mở file mới có tên là Movie 1. Con trượt trên thanh thước Timeline đang ở keyframe thứ nhất trên Layer 1. TỦ SÁCH STK - THẾ GIỚI Đồ HỌA 298 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHAN BẢI TẬP - Tự HỌC MACROMEDIA FLASH 5.0 BANG HĨNH ẢNH CHƯƠNG 14 3. Chọn trên trình đơn File > Save hay Save As. Sau đó nhấp chuột vào mục File name trong hộp thoại Save As và đặt tên cho file mới là “Tween -1 Sau khi nhập xong nhấp chuột vào nút Save. Save As s ave in: I Ô MyDocuments ? | x "3 M Ml SI S ul I C o ie l U ser F iles I My Pictures * I My Webs V o n g T io n Dcii Mau b| vong Iron-1 >File name: [Tween -l| Save Save as type: I Flash Movie c.fla] Cancel 4. Bây giờ bạn hãy nhấp chuột vào công cụ Oval Tool từ bảng công cụ hoặc nhấn phím o trên bàn phím để kích hoạt công cụ vẽ này. Sau đó nhấp chuột vào cửa sổ màn hình làm việc và kéo chuột cho đến khi bạn tạo vòng tròn vừa ý. Con trỏ chuột sẽ biến đổi thành hình tròn và chữ thập. View Colors / í íò Fill Color Options 5. Bạn có thể chọn màu để tô màu hoặc muốn đổi màu cho vòng tròn thì nhấp chuột vào hộp màu Fill Color chọn một màu và tô màu cho đối tượng. Giả sử ở đây chúng ta chọn màu xanh (Blue) có trong bảng màu. ■ f l <*• ■ * TỦ SÁCH STK - THẾ GIỚI Đồ HỌA 299 BIÊN SOẠN: KS PHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN BẢI TẬP - T ự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h ả n h __________CHƯƠNG 14 6. Nhấp chuột chọn công cụ Arrow Tool trong hộp công cụ hay nhấn phím V trên bàn phím. Sau đố bạn nhấp đúp chuột vào đối tượng vòng tròn để chọn cả đường viền vòng tròn. 7. Lúc này trên Timeline ở khung keyframe, vạch màu đỏ tượng tnửig cho vị trí đầu đang phát ở tại keyframe thứ nhất. Bạn hãy nhấp chuột vào keyframe thứ nhất ưên Layerl này. Ể Scene 1 ị j l il^ l C-]|| 1 I <2-0Fps 8. Chọn trên trình đơn Insert > Create Motion Tween. Đếỉ tượng xuất hiện đường khung màu xanh nhạt bao quanh đối tượng cùng với dấu cộng chính giữa vòng tròn. J \ Inserl Modify Text Control Win Convert to Symbol... FB Hew Symbol... Dtrl+F8 Layer Motion Guide Frame F5 Remove Frames Shift+F5 Keyframe F6 Blank Keyframe F7 Clear Keyframe Shift+FG L J 9. Ở cửa sổ keyframe, bạn nhấp chuột tại keyframe mình mong muến di chuyển vòng tròn đến vị trí mới (ở đây chúng tôi nhấp chuột tại keyframe 30). Khi nhấp chuột vào keyframe vừa chọn một vệt màu đen xuất hiện ngay bên dưới thanh thước Timeline. TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 300 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN BẢI TẬP - T ự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h ả n h __________CHƯƠNG 14 i l Scene1 a i Q □ I 5 lí 15 2C 25 35 / Ị 35 ; ' ' 1<vN [ © i P m ♦ 1 'é | :o | *1 [-]| 1 12.0 fps Ms < Chứ Ý : Bạn phải nhấp chuột tương ứng với Layer hiện hành đang được chọn. Bạn không nên nhấp chuột lên phía trên hoặc xuếng phía dưới. 10. Bâỵ giờ bạn chọn trên trình đơn Insert > Keyframe hoặc nhấn phím F6 để tạo đường chuyển động cho đối tượng, Sau đó trên Layerl hiện hành cố đường mũi tên từ keyframe thứ nhất hướng đến keyframe 30 xuất hiện. '■ỊỀị Scene 1 ạ* a □ I I I i I I 1 ” I f 1 1 1 1 1 I 1 1 1 1 1 1 ỉ 1 1 1 1 1 Ị— 1 5 10 15 20 25 3(L/0L %'s*- ® iP m m IHSI !¥l lõỉll 30 ||13J0IP'S|| 2.1* < r ' I L J Chủ Ý : Để di chuyển vòng tròn chạy theo phương nằm ngang (hay một phương nào khác chính xác hơn) bạn nên cho xuất hiện các ô lưới trên màn hình làm việc bằng cách chọn trên trình đơn View > Grid > Show Grid hay nhấn phím Ctrl + phím dấu nháy đơìn (0. Outlines Clil+Alt+Shifl+O Fast Ctrl+Alt+Shift+F Antialias Ctil+Alt+Shift+A • Antialias Jexl Ctil+Alt+Shift+T v* Timejine Ctrl+Alt+T ^ Work Area Clrl+Shift+W 30 1 12.3 Ip? 2,4* <1 1 A-\ Rulers Ctrl+Alt+Shift+R iHEC " / Guides ► Snag la Grid C trl+ S h ift+ ^r Edit Grid... Ctrl+Alt+G v Snap to Objects Ctrl+Shift+Z 1 TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 301 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN BẢI TẬP - T ự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h ả n h __________CHƯƠNG 14 11. Bây giờ bạn hãy nhấp chuột vào keyframe cuối cùng trên thanh thước Timeline. Sau đố kéo YÒng tròn đến vị trí mới nơi mà bạn muến đếi tượng dừng chuyển động. Chú Ỷ : Nếu bạn muốn vị trí mới nằm ngang cùng thẳng hàng so với đỉểm ban đầu, bạn nhớ nhấn thêm phím Shift trong khỉ di chuyển vòng tròn. 1 s ' " X/ ị í í * \ / Vòng tròn ở vị trí đầu (bên trái) và vị trí cuối chuyển động 12. Cuối cùng bạn nhấn phím Enter ồ bàn phím hay nhấn nứt Play trên thanh công cụ Controller để xem kết quả vừa thực hiện. Nếu vòng tròn diễn hoạt từ điểm đầu đến điểm cuối là bạn đã thành công. y # [ ầ & í i ° r » p * 5 * < 0 B 3 c ■ m 44 ►► i l a S c e n e 1 m a □ V ' ' V ' ' l í ' ' 1 1 5 ' ' ' } Ũ ¿ ĩ 30 35 I I 1 l i 1 1 ! 1 1 1 140 45 50 1 I I 1" " ! ITMB 1 * :------- — * 0 w m ( I ' ì s Ị - b l % | H l l 20 112.fi Ips I 1 .6 . < 1 _ | ■ : i" 0 Đoạn phim đang diễn hoạt tại keyframe thứ 20 13. Chọn trên trình đơn File > Save để lưu file này lại. TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 302 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN BẢI TẬP - T ự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h ả n h __________CHƯƠNG 14 TẠO HAI VÒNG TRÒN CHUYEN đ ộ n g NGƯỢC CHIỀU NHAU Bài tập này cũng tương tự như bài tập 1 nhưng ở đây tạo hai vòng tròn chạy ngược chiều nhau. Trong bài tập 1 ta đã tạo YÒng tròn màu xanh chạy từ trái sang phải, bây giờ các bạn tiếp tục làm theo các bước sau để tạo vòng tròn màu đỏ chạy ngược lại từ phải sang trái. — 1, Mở lại file vừa lưu với tên file là Tween-1 trong bài vừa mới thực hành ở trên. 2. Tạo mới thêm một Laỵer nữa bằng cách chọn trên trình đơn Insert > Layer hay I I nhấp chuột vào nút dấu cộng bên dưới tên Layer trong thanh thước Timeline . In^erl Modify Text Control Win« Convert to Symbol... F8 New Symbol... Ctrl+F8 1 1 1 Layei k 1 Motion Guide : 1 Frame F5 R em ove F lam es Shifl+FS Keyframe FG f'"i Scene 1 m ü u l 1 ' ' V IQ 15 ' ' 20 I E H i H i i n [ 0 W » | H | | H | | 1 1113.0 fps I Insert Layer 3. Layer2 xuất hiện vùng bôi đen cho biết nó đang hiện hành và bây giờ bạn sẽ làm việc trên Layer2 này. Nhấp chuột vào keyframe thứ nhất ừên Layer2. r^i Scene 1 m 3 □ ĨỊ 5...........10 ' 15 " ' ' '20 25 " 30 3E w Layer 2 f * * I II Đ Layer 1 * ■* D , ft------------------------------------------------------------» • © w Ỡ '[•]|| 1 12.0 fps 0.0s 4 I I 4. Bạn vẫn chọn công cụ Oval Tool trong hộp công cụ. Sau đố nhấn giữ phím Shift trong khỉ vẽ 1 vòng tròn màu đỏ tại gốc phải dưới vùng làm việc. 5. Các bước tiến hành tạo chuyển động cho vòng tròn đỗ từ phải sang trái tương tự như bài tập ở trên. Nhấp chuột vào keyframe thứ nhất trên Layer2 và chọn trên trình đơn Insert > Create Motion Tween. TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 303 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN BẢI TẬP - T ự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h ả n h __________CHƯƠNG 14 Scene! Ị □ il 5 10 ' 15 ' 20 25 3Ci ' ' 3? p Layer 2 ệ * * ■ II '! 0 Ĩ3 Layer 1 * * m k ______________- ....- ______________ . © w © ! ị tll [■:. ’ ị 12-Olps O.ÍIS < Ị Nhấp chuột vào keyframe thứ nhất trên Layer2 6. Nhấp chuột vào keyframe cuối cùng trên Layer2 (keyframe 30). Sau đó nhấp chuột vào vòng tròn màu đỏ và kéo sang trái. Scenel 7 ] l%Ịtol ỊH Ịh II 30 inĩõìpĩ] 7. Cuối cùng bạn nhấn phím Enter hay chọn trên trình đơn Control > Play hay chọn Control > Test Movie để diễn hoạt đoạn phim trong Hash Player. • â □ 1 5 s 15 I' 20 25 30 35 40 45 50 55 - Lu - .-S., . ........ I - .!. : '____ ỉ____í-------- L____ Í— Ấ L 1 ' í '____ ỉ J maltfcij Ì5ĨI [M]|li||l2.QfpT|[ Us m TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA Đoạn phim đang diễn hoạt 304 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN BẰI TẬP - T ự HỌC MACROMEDIA FLASH 5.0BẰNG HÌNH ẢNH__________CHƯƠNG 14 Giả sử đoạn phim bạn vừa thực hiện đã đúng như ý đồ thiết kế, các bước còn lại bạn sẽ xuất đoạn phim dưới các định dạng file (format) mong muấn. Các bước được tiến hành như sau: 8. Vào trình đơn File > Export Movie hay dùng phím tắt Ctrl + Alt + Shift + s để mở hộp thoại Export Movie. Chọn định dạng file cần lưu tại mục Save as type. Export Movie Save in: I t f j My Documents u Ej Ml ỚJ IMjU I Coiel User Files I My Pictures 2 ] My Webs Vong Tron Doi Mau File name: Save asjÿpe: Flash Player [K.swf) Générai Of Template j.sw t) FutureSplash Placer (*.spl) Windows AVI (x.avi) QuickTime (x.mov] Animated GIF [K.giP] WAV Audio p. wav] EMF Sequence [K e rriíỊ WMF Sequence [t!.wrrif| EPS 3.0 Sequence [*.eps) Save Cancel 9. Chỉ đường dẫn thư mục chứa file ở mục Save in (ở đây ta chọn thư mục My Documents). 10. Nhập tên file vào trong mục File name. 11. Theo mặc định Hash lưu file mới vừa tạo dưới định dạng .swf. Nếu bạn muấn lưu file dưới định dạng khác nhấp vào mũi tên hướng xuống trong mục Save as type để chọn định dạng thích hợp. File name: Save Save as .type: Flash Player (x swf) Cancel Flash Player [*.swf] Generator Template FulureSplash Flayer |K.splJ Windows AVI (K.avi) QuickTime [". movl Animated GIF WAV Audio (K wav] EMF Sequence f.emf) WM F s e quen c e [x wmf] EPS 3,0 Sequence (*.eps) M L'di A A«— A UR 12. Một danh sách định dạng file hiển thị cho bạn chọn. Ở đây giả sử chứng ta chọn đỉnh dạng gif động (Animated GIF) để đưa vào ưong trang Web hoặc trong Frontpage. Trd về cửa sổ Export Movie nhập tên file (ở đây đặt tên Tween-2). TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 305 BIÊN SOẠN : KSPHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHAN BẢI TẬP - Tự HỌC MACROMEDIA FLASH 5.0 BANG HĨNH ẢNH CHƯƠNG 14 Expoit Movie Save in: H Ui'3d2:-:1 (C:) \2 l* \ "3 juJ Ml ũi BmI _J S f □ SFla*h5H __ i T ia n s la to i __l unzipped I Virus _J Wewb4 L_] Windows □ W inebd0.400 C llX a ia £iT bailap f jf capnhat File name: Save a s type 13. Cửa sổ Export GIF xuất hiện. Chọn giá trị mặc định tại mục Width (chiều rộng), Height (chiều cao) trong mục Dimensions có giá trị đúng với giá tri chọn ban đầu trong Modify > Movie. Export GIF Width Height pixelsIns X 1400 dpiIz?__! M atch Screen 1 1 Standard colors y 1 m I In te rlace I ? Smocrth f ~ Tiansparent r~ Dither solid colors Animation: ỊÕ repetitions [0 to repeat iorever) Help 14. Bạn có thể nhấp nhận các giá tậ mặc định trong mục chọn Dimensions, nhấp chuột vào nút OK để tiến hành xuất đoạn phim. Hãy vào cửa sổ Explorer hay Norton để coi kích thước của file xuất ra. Các bạn có nhận xét gì về kích thước này không - chúng rất nhỏ so với các chương trình làm hoạt hình khác? SUNFL0W R Ệp| lam lo MAKE dictionary ipil T oan lu äf T ween.2 < Ü W ebsite MỨ\jmõsTnr u W ebsite HDSD Flash4 11KB JPEG Image 3 /1 4 /0 0 7:53 AM 163KB M i c i o s o H w . . . 4 /4 /0 1 8:IB AM 64 KB Miciosoft w .. . 5 /4 /0 1 9:27 AM 23 KB Miciosoft w... 4 /2 7 /01 5:15 PM 77 KB GIF Image 6 /8 /0 1 3:16 PM 30 KB Flash Movie 5 /2 3 /01 9:53 PM 9KB Flash Playei... 5 /2 3 /01 9:51 PM TỦ SẤCH STK - THẾ GIỚI Đồ HỌA 306 BIÊN SOẠN: KS PHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN BẢI TẬP - T ự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h ả n h __________CHƯƠNG 14 THựC HIỆN ĐOẠN PHIM BIẾN HÌNH TỪ• m 9 HÌNH TRÒN BIẾN DẠNG THÀNH CÁI Nơ Khởi động Flash 5, mở một tập tin mới Tạo các đường lưới cho màn hình làm việc, bằng cách chọn View > Grid > Show Grid. Khi bạn nhấp chuột chọn lệnh Show Grid xem như chứng ta chấp nhận giá trị mặc định của đường lưới, cửa sổ làm việc lúc này giống như hình bên dưới. Chủ V : Nếu các bạn muốn chỉnh sửa đường lưới, chứng ta chọn View > Grid > Edit Grid. View jn s e it M odify Text Çonhcil W indow Help ỄQtO > ^ E Zcjuin [n Z o o m O ut Qil+= Cltl-r- Magnification » Outlines C tit*A I8 + G h ifl< 0 D 15 20 2B 30 F ^ l Agtidias * A n tid lia s T e s t C lii» A ls+ S h iit< F C bttAN +Shift-fcA C tif+ A h + S h ift*T ✓ T im e tinp C nf+A lî+T * Work Aiea CtrkShift+W j - ] | | 1 12.0fps M s R ulers / \ n ilU A JÊ +Ç hîfN R ^ Snap ta OỊbịects Ctií+Shift+/ Show Gild Clrlf■ Swae to Grid Clrl+£hift+‘ Edit Grid... Clri+Ait+G 4. Cửa sổ Grid xuất hiện, lúc này các bạn cố thể hiệu chỉnh màu cho đường lưới ở mục Color và độ dài rộng của mỗi ô luới (ở đây độ dài rộng của mỗi ô lưới là 15). Color: Show Grid r Snap to Grid . JTHps X fîspï Snap accuracy; ị Normal — 3 ụ Cancel Save Default 5. Chọn công cụ Oval Tool (T) trong hộp công cụ để vẽ hình tròn tại keyframe 1 trên Layerl. TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 307 BIÊN SOẠN: KSPHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHAN BẢI TẬP - Tự HỌC MACROMEDIA FLASH 5.0 BANG HĨNH ẢNH CHƯƠNG 14 Tools * * / p i A : ^ D ý H Oval Tool (0)1 $ a 9 # [ ầ & ° o * S ì * s * < ĩ iể k S c e n e 1 m a □ 1 10 15 @ S I m + 1 -é |% * | i- j | 1 Chọn công cụ Oval Tool trong hộp công cụ 6. Nhấp chuột vào keyframe thứ 3 và nhấn phím F6. Tại keyframe này bạn chọn công cụ Arrow Tool để hiệu chỉnh hình tròn giống như hình trên. Khi đưa công cụ Arrow Tool đến đối tượng, hình vòng cung xuất hiện sau mũi tên, bạn có thể kéo vòng tròn để chỉnh sửa. Vòng tròn ban đầu tại keyframe thứ 1 Nhấp chuột vào keyframe thứ 3 Dùng công cụ Arrow Tool để hiệu chỉnh hình tròn thành hình Oval 7. Bạn lặp lại bước 6 cho các keyframe tiếp theo, bạn chèn các keyframe trong các keyframe kế tiếp trước khi kéo chỉnh hình tròn giống như các hình dưới đây. Ảnh tại keyframe 5 Ảnh tại keyframe 11 TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA Ảnh tại keyframe 13 308 BIÊN SOẠN: KS PHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN BẢI TẬP - T ự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h ả n h __________CHƯƠNG 14 8. Bạn dùng công cụ Oval Tool và vẽ thêm hình tròn nhỏ để làm nhụy của cái nơ. Ảnh tại keyframe 15 Ảnh tại keyframe 17 Ảnh tại keyframe 19 Ảnh tại keyframe 21 Ảnh tại keyframe 23 Ảnh tại keyữame 25 9. Lúc này khung keyframe của bạn trong Layerl giếng như hình dưới đây: Scene 1 1 5 ỉ ............... I II0 15 20 30»_________.__ ♦ ũ * ũ » D * ũ * ũ * D * ũ * D » D * 0 » qI»D' JJ j i l i l Ẽj|Ị~ã~||m fps|| ỉ t e ịu II I 10. Bạn hãy nhấp chuột vào nút Play trến điều khiển Controller hoặc nhấn phím Enter để xem đoạn phim vừa tạo. Đoạn phim sẽ diễn hoạt từ hình tròn biến thành cái nơ. Vậy là bạn đã thành công. Hình bên đoạn phim đang diễn hoạt m 1*1*1 Biiic-ĩii 201112.0 Fps 1 i-65~im TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 309 BIÊN SOẠN: KSPHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHAN BẢI TẬP - Tự HỌC MACROMEDIA FLASH 5.0 BANG HĨNH ẢNH CHƯƠNG 14 THựC HIỆN ĐOẠN PHIM • • • DÙNG BÚT VIẾT CHỮ DIRECTOR Trong bài tập này chúng ta sẽ tạo một đoạn phim có nội dung là một cây viết dịch chuyển từ trái sang phải giống như một người đang viết chữ. Chữ ở đây là từ Dữector trông rất hay : Modify Control Libiaiies Instance C tiM Flame . cni+F Layer.. Scene Để bắt đầu tạo một đoạn phim như trên. Bước đầu tiên trong việc tạo phim là cần phải thiết lập các tham số (thuộc tính) chọn kích cỡ và phông nền cho đoạn phim . 1. Chọn trên trình đơn Modify > Movie hoặc nhấn phím tổ hợp Ctrl + M. 2. Trong hộp thoại Movie Properties (thiết lập các thuộc tính cho đoạn phim), chọn kích thước đoạn phim trong mục Dimensions, nhập giá tộ vào trong hộp Width và Height. Kích cỡ phim chọn trong đoạn phim này là 600 - 200 pixel. 3. Chọn màu trắng cho phông nền. Nhấp chuột vào hộp màu trong mục Background Colors. Nhấp chuột vào nút OK để xác định các thuộc tính. Movie Properties fpsFrame Rate: 112 Width Height Dimensions: Ịẽõõpỹ X 1200 OK Cancel Match: Piinter Background Color: J Ruler Units: [pixels px Contents J Save Default Help TỦ SẤCH STK - THẾ GIỚI Đồ HỌA 310 BIÊN SOẠN: KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHAN BẢI TẬP - Tự HỌC MACROMEDIA FLASH 5.0 BANG HĨNH ẢNH CHƯƠNG 14 4. Để thuận tiện cho việc quản lý (Layer), ta nên đặt tên cho lớp. Nhấp đúp chuột vào tên Layerl và đặt tên lại thành Layer Giao. ^ Scene 1 a t a □ Ểì Scene 1 * a □ 1 5 10 15 =------------------------- Ul_aụer Giacl A m j r Z © © Ểâ + I l * l * l Kl 1 5. Nhap chuột chọn công cụ Text Tool trong hộp công cụ bên trái toong giao diện và xác định các thuộc tính font chữ bằng cách chọn trên trình đơn Modify > Font nhấp chuột vào biểu tượng chữ A tại góc phải dưới trong vùng làm việc. / p i At* A \ o nv / é ext Tool [TỊ a < 3 ij 51 lùi ầ NUM 6. Trong hộp thoại Font (thuộc tính font) chọn kiểu font chữ từ trong mục Font. Ở đây, chúng ta chọn font VNI- Lydi. Sau đó chọn kích cỡ chữ là70 từ mục At. C h a ia c le r S3 1 Character! J_ Paiag[(;^TeKtOp| C?)□ Font: [Times — — b -ill A I |12 - j I»u di [Ĩ25_lFont tn Ịõ — 3 ỉ7. K«Ĩ1 1 AỘ |Wofma! El UBL:| Character I / A Ch-ar-acterỊ 7 ] r ' -r í ' T ũ p ị C?) Font: 1 VNM.il« A a iỊtõT H í b I ml A v ír- ^ F7 Kern A ộ 1 Normal T 1 URL: 1 ________________________ 1 Chứ ý : Muốn ký tự được mịn sau khi tô màu ta chia một kí tự có khoảng cách vào khoảng 20 keyframe và cũng tùy vào kí tự dài hay ngắn màbạn chọn số keyframe thích hợp. 7. Tiếp theo, bạn nhấp chuột vào hộp màu Fill Color và chọn màu tô cho ký tự là màu xanh dương. Đặt con trỏ vào vùng làm việc và nhập vào chữ “DIRECTOR”. Di chuyển chữ vào giữa trang. Dùng công cụ Arrow nhấp chọn chữ. r & m | I [rĩ-;:: ::FF ■ m i s e z o K TỦ SÁCH STK - THẾ GIỚI Đồ HỌA 311 BIÊN SOẠN: KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHAN BÀI TẬP - Tự HỌC MACROMEDIA FLASH 5.0 BANG HÌNH ẢNH___________CHƯƠNG 14 8. Chọn tiếp trên trình đơn Modify > Break Apart hoặc nhấn phím tổ hợp Ctrl + B để tách mối liên kết các ký tự này. 9. Bây giờ bạn sẽ dùng màu tô cho ký tự. Dùng công cụ Brush, nhấp chuột chọn tiếp công cụ Brush Mode trong hộp công cụ. Nhấp chuột vào vùng công cụ 10. Chọn công cụ Paint Inside trong mục tùy chọn Options tại mục Brush Mode. Sau đó chọn màu đỏ trong hộp màu Fill Color. r5 ■ ■ M I #FFQ Q I■ 11. Nhấp chuột tiếp vào mục Brush Size để chọn cọ tô màu cho phù hợp. Để dễ dàng tô màu cho chữ ta nhấp chọn công cụ Zoom Tool để phóng to kích thước ký tự. View , M J I + — gg^ Z o o m Tool [M .Z)| Brush Size ‘ — J S l [ § J ____ % M i> \ ____________ W k S 12. Sau khi thực hiện xong các thao tác trên, ta tiến hành tô màu cho chữ. Bạn bắt đầu tô tại keyframe thứ 3 trên Layerl. Hai keyframe đầu tiên không có gì thay đổi, bạn nhấn phím F6 để tạo ra keyframe thứ 2. Chủ ý : Bạn phải tô màu cho ký tự từ trong ra ngoài và tô từng đoạn ngắn trên mỗi kí tự. TỦ SÁCH STK - THẾ GIỚI Đồ HỌA 312 BIÊN SOẠN: KS PHẠM QUANG HUY GIẮO TRÌNH THIẾT KẾ WEB : PHAN BÀI TẬP - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h ẲNH ch ư ơn g 14 13. Khi bạn tô được đoạn nào, hãy dùng công cụ Arrow Tool nhấp chuột chọn đoạn đố. Sau đố vào trình đơn Modify > Group hoặc nhấn tổ hợp phím Ctrl + G để nhóm từng đoạn Nhóm vùng tô sau khi chọn 14. Khỉ bạn thực hiện việc tô từng đoạn, sau đố chọn và nhốm đoạn tô màu này như thế nhằm cồ lập từng đoạn màu tô. Bạn tiếp tục thực hiện các bước như trên cho đến khi vùng màu cho chữ “DIRECTOR ” kết thúc. Chứ v: Trong khi tô màu cho từng đoạn và nhốm các đoạn này trên mỗi ký tự. Các đoạn này phải nằm trên từng frame riêng biệt. Bạn cố thể nhấn phím F6 hoặc chọn trên trình đơn Insert > Keyframe để tạo theo cách frame-by-frame. Bạn hãy chú ý thật kỹ vào công cụ hộp màu Fill Color sau mỗi bước nhấn phím F6 tạo keyframe mới, công cụ này sẽ chuyển sang màu xanh. Do đố bạn phải chọn lại màu đỏ để tô các ký tự cố cùng màu. TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 313 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN BẢI TẬP - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h ản h__________ CHƯƠNG 14 5l □ ị '1 ' 5 ...............10 ' 1 ' 15 1 " 20 ' 1 1 25 " ' 3d n ãlHBHBIIBEIinaBBEIIiaiBEISiaai! 15. Lúc bây giờ các ký tự trên chữ “Dừector” cổ màu đỏ và được hình thành bởi nhiều đoạn màu tô. Tô màu ưên ký tự E tại keyframe thứ 52 Chứ Ỷ: Một lần nữa khi bạn tô màu cho mỗi đoạn trên một ký tự, bạn phải tô màu từ trong ra ngoài. Cách thực hiện như thế màu tô mới cố thể nằm gọn vào trên từng đoạn. Khi bạn tô màu kết thúc một đoạn ký tự nào đố, bạn phải để một keyframe tiếp theo sau nố không được tô. Ví dụ như khỉ bạn tô màu xong vừng ký tự D, sau đố đến ký tự I. Trước khi bắt đầu tô màu ký tự I, bạn phải để keyframe này không được tô màu gì hết. Sau đố mối bắt đầu thực hiện tiếp YỈệc tô màu cho ký tự I. Nếu bạn tô màu mà thấy rằng lớp màu vừa tô nằm bên dưới đoạn cần tô hay nằm bên dưới lớp ký tự thì bạn phải tiến hành tô lại thao tác vừa thực hiện. a □ Tô màu ttên ký tợ T tại keyframe thứ 52 TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 314 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN BẢI TẬP - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h ản h__________ CHƯƠNG 14 « a n m ã □ s Chuổỉ ký tự sau khi việc tô màu kết thức 16. Bây giờ bạn sẽ chèn biểu tượng cây viết vào vùng làm việc hiện hành bằng cách chọn trên trình đơn Help > Samples > Writing Pen trong Flash 4 hoặc bạn cố thể vẽ một cây bút rất đcta giản. 17. Nếu bạn có Flash 4, hãy kích hoạt file này và chọn cây viết mẫu Writing Pen bằng cách vào trình đơn Window > Library (hoặc nhấn tổ hợp phím Ctrl + L) cửa sổ nhỏ Librarỵ xuất hiện. Tại mục Name, nhấp phải chuột vào chọn mục Pen, xuất hiện biểu tượng cây viết trong vùng xem truổc tại cửa sổ thư viện. 18. Chọn trên trình đơn Insert > Layer để tạo một Layer mới và đặt tên cho Layer này là Layer Cay Viet. Sau đó kéo biểu tượng cây viết vào ưong vùng làm việc tại file đang thực hiện đoạn phim. Bây giờ bạn sẽ thấy cây viết xuất hiện trong vùng làm việc với kích thước quá lớn so với vùng làm việc. TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 315 BIÊN SOẠN: KSPHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHAN BẢI TẬP - Tự HỌC MACROMEDIA FLASH 5.0 BANG HĨNH ẢNH CHƯƠNG 14 W R S e Z O K Đối tượng cây viết xuất hiện trong vùng làm việc 19. Đảm bảo rằng đối tượng cây viết đang được chọn. Bây giờ bạn sẽ bắt đầu hiệu chỉnh cây viết cho phù hợp với kích thước vùng làm việc. Chọn công cụ Arrow Tool trên hộp công cụ và nhấp chuột vào chọn công cụ Scale trong vùng công cụ bổ sung bên dưới tại mục Options. 20. Sau đó bạn kéo các handle điều khiển tại các góc đối tượng đang được chọn để có được kích thước đối tượng thích hợp. Cây viết sau khi được thay đối kích thưđc TỦ SÁCH STK - THẾ GIỚI Đồ HỌA 316 BIÊN SOẠN: KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHAN BẢI TẬP - Tự HỌC MACROMEDIA FLASH 5.0 BANG HĨNH ẢNH CHƯƠNG 14 21. Di chuyển biểu tượng cây viết sao cho ngòi viết nằm chính xác tại điểm bắt đầu của chuỗi ký tự tại keyframe thứ nhất trên Layer Cay Viet. Sau đó nhấn phím F6 để tạo ra keyframe thứ 2. Chủ ý : Bạn có thể dùng công cụ Arrow Tool, chọn công cụ Rotate trong mục chọn Options bên dưới bảng công cụ. Sau đó bạn có thể xoay cây viết này theo vị trí mong muốn. Hơn thế nữa bạn muốn tạo cho cây viết chuyển động uyển chuyển khi diễn hoạt chúng trong Flash Player. 22. Di chuyển cây viết đến vị trí bắt đầu vùng màu tô trên ký tự tại keyframe thứ 2 trên Layer Cay Viet. 23. Bây giờ bạn nhấn phím F6 tiếp tục để tạo mới keyframe thứ 3. Di chuyển ngòi viết đến vị trí kết thúc vùng màu tô thứ nhất trên ký tự đầu tiên của chữ “DIRECTOR”. Sau đó nhấn phím F6 tiếp tục để tạo ra keyframe thứ 4. Bạn cũng di chuyển ngòi viết đến vị trí kết thúc đoạn tô màu thứ 2. Trong khi đó bạn có thể xoay cây viết theo hướng thích hợp mong muốn. TỦ SÁCH STK - THẾ GIỚI Đồ HỌA 317 BIÊN SOẠN: KS PHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN BẢI TẬP - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h ả n h __________ CHƯƠNG 14 Ngòi viết tại vị trí kết thúc đoạn tô màu thứ nhất (ảnh trái) trong keyframe thứ 3 và đoạn tô màu thứ hai tại keyửame thứ 4 (ảnh phải) 24. Bạn lặp lại bước 23 ở trên cho các keyframe tiếp theo cho đến hết chuỗi ký tự. Chủ Ỷ : Trong quá trình tạo các hành động cho đấi tượng, bạn nên chứ ý đến việc chính sửa gốc độ củã ngòi viết sao cho phù hợp với từng nét chữ trên vùng màu tô khỉ chung thể hiện trên đoạn phim. Ĩ)JK e i TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 318 BIÊN SOẠN: KSPHẠM QUANG HUY