T H Ế C lé l B C H C A HƯỚNG D Ẫ N SỪ DỤNG FLASH5.II BIÊN SOẠN ; PHẠM QUANG HUY HĨ CHÍ HỊA PHẠM QUANG HIỂN Tháng 7-2001 G IÁO TRÌNH TH IẾT K Ế W EB : PHÁN LÝ TH U YẾT - T ự HỌC MACROMEDIA FLA SH 5.0 BẰNG HÌNH Ả^H GIỚI THIỆU MACROMEDIA FLASH ■ Tủ s c h T h ế g iớ i đổ h ọ a -S T K c h ú c m n g c c b n đ ế n v i c h n g trin h F íash 0, m ột chLơng trìn h m i đ ẩ y q u y ề n n ă n g c ủ a c ô n g ty M a c ro m e d ia g iú p c ỏ n g ty n g y c n g n ổ i tiế n g trở th àn h m ò t tro n g n h ữ n g h ả n g đ ầ u tro n g lã n h vự c đồ h ọ a M u ltim e d ia M a c ro m e d ia F la sh m ặ c d ầu v ẫ n hực h iệ n (th iế t kế ) d ợ c c c tra n g w e b n h c c tru n g tâ m g iả n g d y đố h ọ a g iớ i th iệ u n hư ng sức rrạ n h c ủ a n ó k h ô n g p h ả i đ ó m ả ch ứ c n ă n g ch ính c ủ a F!ash : F iash có th ể th ự c h iệ n đ ợ c c c đ o n p h im h o t hình v i kế t q u ả tậ p tin lưu có kích íh : n h ỏ th ô n g q u a c c c ô n g cụ vẽ v e c to r So v i c c c h n g trình làm p him v h o i hình k h c có lẽ Flash c h n g trình tố t n h ấ t đ ể tạ o n h ữ n g đ ối tư ợ n g k h ô n g phụ th u ộ c v o đ ộ p h â n g iả i, đ iể u n y có rg h ĩa m ộ t đ ối tư ợ n g đổ h ọ a v e c to r v i kích th c n h ỏ v ẫ n giữ đ ợ c m ộ t kích íh c tậ p tin n g a y kM p h ó n g lớ n lên m k h ô n g m g iả m c h ấ t lư ợ n g hình ả n h c ủ a F lash có n h iề u c ô n g cụ h iệ u ứng c h o p h é p b n tạ o m ộ t đ o n p h im v i c c th n h phần m e d ia (p h n g tiệ n ) n h hình ả n h , â m th a n h v v v i kích th c n hỏ Fỉash c h o p h é p n gư ời thlét kê tạ o n h iế u b ả n c o p y c ủ a đ ố i tư ợ n g đ ể d ù n g b ấ t nơi n o m k h ô n g p h ả i tạ o lạ i, d iề u n y xey th n g x u y ê n th iế t kế tra n g w e b Ví dụ như, n ế u b n m u ố n sử d ụ n g m ộ t hình ả n h h a y âm th a m có kích th c K x u ấ t h iệ n tro n g lần th a y vi k ế t q u ả ; X = 0 K F ia sh c h ỉ d ù n g m ệt file gốc mà sử dụng thêm copy lại để tham chiếu tới Do đó, tập tin lưu có kích th c n h ỏ hon 00 K N g o i m ộ t ưu đ iể m nữ a c ủ a Fíash có th ể đưa n h iề u c h u ẩ n k h c m a u , đ â y c ũ n g ià rà o c h ắ n trư c đ â y p h t triể n w e b k ế t q u ả th iế t k ế c ầ n tư n g th ích v i n h ữ n g trình d u y ệ t k h c n u M ộ t tra n g w e b rấ t b ắ t m ắ t b n th iế t kế n h ng d ù n g m ộ t trìn h d u y ệ t w e b tên trình đdn Quy ưóc đến palette nói đén : tên palette name : tên palette Quy ước đến palette menu nói đến ; tên palette > tên trình đơn palette > tên trình đơn HỖ TRỢ BẠN ĐỌC Tủ s c h THẾ GIỚI ĐỐ HỌA-STK hỗ trợ kỹ th u ậ t c h o b n đ ọ c c c sá c h Tủ s c h ấn h n h C ó rấ t n h iể u c c h liê n hệ v i d ịc h vụ hỗ trỢ kỹ th u ậ t đ ể h ỏ i v ề c i đ ậ t p h ấ n m ề m , c ấ u h in h h o ặ c n h ữ n g c h ứ c n ă n g C ó th ể liê n hệ q u a W e b , E -m a il, đ iệ n th o i h o ă c fax Tủ s c h T H Ể G IÓ I Đ ổ H Ọ A -S T K h iệ n k h ỏ n g th u p hí đ ố i v i hỗ trỢ kỹ th u ậ t c h o c c sá c h in R iê n g p h i tổ n đ iệ n th o i, te m n g i sử dụng phải trả Bạn tìm thấy câu trả lời cho hầu hết câu hỏi liên quan đến Flash bạn tro n g cu ố n s c h n y N ế u b n c ầ n trỢ g iú p nữa, bạn cố th ể liên lạ c đ ế n hỗ trỢ kỹ th u ậ t c ủ a Tủ sách đâu theo cách sau: Hỗ trỢ qua điện thoại : Ngoại trử ngày lễ, hỗ trọ qua điện thoại thú hai - thứ sáu, từ 8:00 g iờ s n g đ ế n :3 g iờ c h iề u G ọ i số (0 8 3 h ay 4 ) Khi g ọ i vui lò n g b ê n c n h m y tính mà bạn cần giúp đỡ Hỗ trợ qua Fax : Cuay sô' (088334168) để gởi fax Để có nhiều thơng tin sản phẩm Tủ sách THẾ GIỚI ĐÓ HỌA-STK, liên hệ chúng tơi qua địa sẳ: KỸ Sư : PHẠM QUANG HUY - 890 ĐIỆN BIÊN PHỦ - QUẬN 10 TEL :0903728344 - 088334168 Fax : 088334168 GIÁO TRÌNH TH IẾT K Ẻ 'W E B : PHẤN LÝ THUYẺT - Tự HỌC MACROMEDIA FLA S H 5.0 BANG HÌNH À m MỤC LỤC GÍỚI THIỆU MACROMEDIA FLASH MỤC LỤC Chướng : TổNG QUAN VỂ FLASH 5 Chương : TổNG QUAN VỂ CÁC CÓNG cụ VẼ 56 Chướng : BÀI TẬP 76 Chương : TổNG QUAN VỂ CHÊ ĐỘ MÀU VẼ 01 Chưđng : LÀM VIỆC VỚI CÁC Đốl TƯỢNG Chương : CÁCH DÙNG ẢNH NHẬP VÀO •19 36 Chương : CÁCH DÙNG LAYER 152 Chương : CÁCH DÙNG CÁC SYMBOL VÀ INSTANCE 165 Chương : CÁCH TẠO RA CÁC ẢNH CHUYỂN đ ộ n g ANIMATION 191 Chương 10 ; CÁCH DÙNG KÝ Tự NHẬP TRONG FLASH 224 Chương 11 : TẠO RA CÁC ĐOẠN PHIM TƯƠNG TÁC 240 Chương 12 : CÁCH TẠO CÁC ĐOẠN PHIM c ó THỂ IN RA 274 Chương 13 : THỀM ÂM THANH VÀO CHO ĐOẠN PHIM 285 PHẦN BÀI TẬP 298 G IÁO TRÌN H T H IẾ T K Ế W E B : PHẨN LÝ TH U YẾT ■ T ự HỌC MACROMEDIA FL A S H 5.0 BẰ N G HINH ÀNH Chưởng TỔNG QUAN VỀ FLASH VÙNG LÀM VIỆC TRONG FLASH Khi bạn làm việc ! ’lash, bạn có ihể lạo đoạn phim cách vc ảnh hay nhập vào ảnh vẽ, xê'p nổ irong mộl Slagc, làm chuyển động ảnh vđi thước thời gian Tim eline Bạn lạo vùng chuyển cảnh đoạn phim cách dùng Action (hành vi) để tạo đoạn phim trả lời lại kiện theo nhiều cách đặc biệt K hi đoạn phim đưỢc tạo xong, bạn xuâ't Ihành đoạn phim l'lash Player xem chúng Flash PlaycT, trình chiếu đoạn phim irong chương trình 1'lash Player độc lập vđi R ash Bạn xcm đoạn phim tạo Plash theo cách sau đây: Trong Irình duyệt Internet Netscape Navigaior, Microsoft Internet Explorer Các trình duyệt dùng vđi Flash Player ✓ Vđi điều khiển l'lash ActiveX Microsoft o n ic c , Microsofl Internet Explorer đen với Windows môi Irường máy chủ A clivcX khác Trong [•lash Playcr, mộl trình ứng dụng độc lập Như chương Irình chiếu phim độc lập, nic đoạn phim đưỢc phái mà khổng cần phần mềm l ’lash PlaycT ÁNH TRONG FLASH Mash cung câp nhiều phương pháp dể tạo ảnh g(íc xiiâl ảnh gơc sang nhiều chương Irình ứng dụng khác Bạn cổ ihế tạo nhiều đôi iượng cách dùng công cụ vẽ tô, xác định thuộc lính đơì iượng tồn lại lỉạn cổ thể xem mục Tổng quan cách vẽ làm việc vđi cách chọn màu Ngoài bạn cổ ihc đưa vào ảnh đổ họa Bitmap hay ảnh Vcc-tớ lừ chương trình ứng dụng khác thay đổi ảnh nhập vào irong Mash ẢNH ĐỔ HỌA VỚI ĐỊNH DẠNG VECTOR VÀ BITMAP Máy lính hiển thị ảnh vđi định dạng Vcclor hay Bitmap Nếu hiểu rõ hai khác hai cách định dạng giúp bạn làm việc hiệu qủa Flash cho phép bạn lạo làm ảnh chuyển động vđi định dạng Veclor Ngoài FIash cho phép bạn mở thao tác ảnh vđi định dạng Vector Bitmap lạo trình ứng dụng khác Ảnh vđi định dạng Vector Vẽ ảnh Vector cách sử dụng công cụ vẽ đường thẳng đường cong bao gồm Ihuộc tính màu vị trí gọi Vector Ví d ụ , ảnh c h iố c đưỢc vẽ hình trang bên đưỢc thực h iệ n đ iể m mà đường thẳng ngang qua, lạo hình dạng viền ngồi chiêc Màu chiêc đưỢc xác định bỏi màu đường viền màu vùng chọn bao quanh đường viền G IÁO TRÌNH TH IẾT K Ế W EB : PHẨN LÝ T H U Y ẾT - T ự HỌC MACROMEDIA FLA SH 5.0 BẰNG HÌNH ÀlH Khi bạn chỉnh sửa ảnh Vector này, bạn thay đổi thuộc tính đường thẳng đường cong tạo nên hình dạng Bạn di chuyển, thay đổi kích thước, thu phóng, thay đổi màu ảnh vector mà khơng thay đổi đặc tính bên ngồi Ánh Vector có độ phân giải màu độc lập, điều có nghĩa chúng cỏ thể hiển thị với nhiều thiết bị xuâ't khác cho độ phân giải khác mà thay đổi bâ"t kỳ đặc tính Ảnh với định dạng Bitmap Ảnh Bitmap sử dụng châm màu xếp đặt mảng lưới gọi pixel Chẳng hạn ảnh vẽ lại vị trí đặc biệt gợi pixel (điểm ảnh) pixel có giá trị màu vùng lưới, tạo ảnh thể qua pixel khác ỉà thể khảm Khi bạn hiệu chỉnh ảnh Bitmap, có nghĩa bạn thay đổi thuộc tính pixel không ảnh vector thay đổi thuộc tính đường thẳng đường cong Ảnh Bitmap có độ phân giải phụ thuộc liệu tạo ảnh vẽ đưực xếp vào lưới có kích thước đặc biệt Việc hiệu chỉnh ảnh Bitmap làm thay đổi chất lượng ảnh ,uất Đặc biệt thay đổi kích thước ảnh Bitmap làm cho g()c biên ảnh trôn; râ't thô điểm pixel ảnh phâii bố lại vùng lưới Khi ảnh Bitmap xì hiết bị có độ phân giải thấp độ phân giải ảnh, điều làm cho chất lượng ảnh xuá trở nên nhạt màu Chú ý ; B ạn đưa vào mộl t'ilc âm thanh, bụn b iếl rõ ràng hdn l ong mục “ Tổng quan cách thêm âm vào Flash" ẢNH CHUYỂN ĐỘNG (ANIMATION) TRONG FLASH Khi sử dụng Flash, bạn tạo đối tượng chuyển động, làm cho chúng ibrary Bạn có Ihc xem kỹ phần mục “Cách dùng Movic Explorer” G IÁ O T R ÌN H T H IẾT K Ế W EB : PHẨN LÝ T H U Y Ế T - T ự H Ọ C M A CR O M ED IA FLA S H 5.0 BẰN G HÌNH ÀNH C h ú ý : Nhân phím Caps Lock bạn làm việc để chuyển đổi trỏ Chọn xong nhấp chuột vào nút O K V Ẽ Đ Ư Ờ N G THẲN G B Ằ N G C Ô N G cụ PEN H)c vẽ đoạn thẳng công cụ Pen, bạn tạo điểm neo, điểm đường thẳng xác định chiều dài đoạn thẳng riêng biệt C ách v ẽ cấ c đường thẳng cổ n g cụ P c n : l Chọn cổng cụ Pen Chọn thuộc tính nél vẽ tổ màu cho đường Ihẳng cần vẽ Đặt irỏ vào vùng Stage nđi bạn muôn bắt đầu vẽ đường thẳng, nhâp chuột vào để xác định mấu neo cho trỏ Nhâp chuột lần cho đoạn thẳng đầu liên đường thẳng kếl thúc Nhân phím Shifi để cơ' định góc vẽ 45° Tiếp tục nhâ'p chuột để tạo đoạn thẳng bổ sung khác Để kc'i thúc đường vẽ, bạn thực thao tác sau đây: 'r Kết thiíc đường mở, nhấp đúp chuột vào vị trí điểm cl cùng, sau nhâp chiiội vào công cụ Pen hộp công cụ nhân phím Ctrl nhấp chuột (trong Wĩndows) nhân phím Command (trong Macintosh) nhấp nơi đâu vùng Stage 61 G IÁO TRÌNH T H IẾT K Ế W EB : PHẨN LÝ T H U Y Ế T - T ự H Ọ C M ACROM EDIA F L ASH 5.0 BĂNG HÌNH ẢNH s a s a s s a a a a s a ^ = I ' " V i' II_ I " v = sss= s= ^ , ,m - - ' i ' mmii" '■■■ '— I' ' K c l thiíc mộl đường, đặt cơng C ỊI Fcn vị trí trỏ đầu lién điểm vừa võ MỘI dâu Iròn rỗng nhỏ x\ kố bcn đầu ngòi viêt vẽ Sau nhấp chiiộl kco để kếi ihúc đường vẽ F)ể kê’l Ihúc nél vẽ, bạn có ihể chon irén irình đơn Ed it > D csclect A ll hoăc chon mộl công CỊt khác hộp công cụ VẼ ĐƯỜNG CONG BẰNG CƠNG c ụ PEN Bạn có ihể lạo đường cong cách kéo công cụ Fcn ihco hướng bạn miuín dường cong lạo điểm mâu neo dầu liên, sau kéo cơng cụ Fcn ihco hưđng đcíi lập để lạo điểm mâu nco ihứ hai Khi bạn dùng công cụ Pcn đế lạo đường cong, điểm mâu nco đoạn đường cong xuâl handle liếp luyến, (ỉó c liêp luyến chiều dài handlc licp luycn xác định độ cao, góc tiếp luyến chiều sâu lõm vào đường cong Việc di chuyển handlc tiếp tuyến -sẽ làm Ihay đổi hình dạng điíờng cong f Cách vẽ đưiinỵ co iiíị : Chọn công cụ Pcn hộp công cu K)ặl cóng cụ Fcn vào vìing Stagc n(ti bạn mn đường cong bắt đầu Sau giữ niíl c h ii ộ i Đ iểm mâ\i nco xuất đầu múl cỉia ngòi viếl thay đổi dầu mũi lên > X-' Kéo theo hưđng bạn miuín đoạn đường cong đưỢc vẽ Khi bạn keo, handlc liếp luyến xuấl đường cong Nhâp phím Shifl lri)ng kéo để có dường cong góc 45° X ủ Nhả nút chuộl Độ dài hệ số gôc handlc tiêp tuyến xác định hình dáng đoạn đường tong Sau bạn cổ ihể di chuyển handlc licp luyến để hiệu chỉnh đường cong 62 G IÁ O TRlNH T H IẾ T K Ế W E B ; PHẨN LÝ T H U Y Ế T - T ự H Ọ C M ACRO M ED IA FLA SH 5.0 BÀN G h ỉn h Ả nh Đặt irỏ nơi bạn miuYn vị irí đường cong kc"l ihúc nhấn giữ niU chuội kéo sang hướng đơi diện để kết ihúc đoạn vừa vẽ Nhấp phím Shiĩt Irong kđo • N '• V , Vẽ đoạn đường cong k ế tiếp, đặl trỏ vào vùng bạn muôn đoạn liêp ihco kếl thúc kéo chuột khỏi đường cong H IỆU CHỈNH C Á C MẤU N EO T R Ê N ĐƯ Ờ N G V Ẽ Khi bạn vẽ đường cong cổng cụ Pen, bạn lạo điếm cong (Curved Poinl), gồm có điểm mâu nco irong mộl đường cong liên lục Khi bạn võ đường ihẳng nơì tiốp đến mội đoạn đường cong, bạn lạo điểm gổc (Corncr Hoinl), điểm mâu neo irong mộl đường thẳng hoăc lại vùng liêp nố"! đường thẳng đường cong Theo mặc định, điểm đường cong đưỢc chọn xuất lổ tròn rỗng điểm gôc đưỢc chọn xuâl lỗ vuông rỗng Biến đổi đoạn mộl đường thẳng lừ đoạn thẳng thành đoạn đường cong ngưỢc lạ i, bạn chuyển đổi điểm g(K' sang điểm cong (Curvcd Poini) ngược lại Ngoài ra, bạn di chuyển, thém xố điểm mâu neo đường vẽ Bạn di chuyển điểm mâu neo cách dùng công cụ Subselection để hiệu chỉnh độ dài, góc cùa đoạn ihẳng hệ sơ'góc đoạn đường cong Bạn nhích đicm mâu neo đưỢc chọn để thay đổi chúi đường vẽ 63 GIÁO TRlNH T H IẾT K Ế W EB : PHẨN LÝ T H U Y ẾT ■ T ự HỌ C M ACROM EDIA FLA SH 5.0 B Ằ N G HINH Ả n h Việc xoá điểm mâu neo khổng cần thiết đường cong nhằm để lỗi ưii hoá đường cong làm giảm kích Ihưđc file > Cách di chuyển điểm mấu n eo : Dùng công cụ Subselection kéo > Cách di chuyển hay nhiều điểm mấu n eo : Chọn nhiều điểm cơng cụ Subselection dùng phím mũi tên để di chuyển điểm chọn > Cách chuyển đổi điểm mấu neo, bạn thực hai bước sau : ♦ Chuyển đổi mộl điểm gôc sang điểm cong, dùng công cụ Subselcction chọn điểm sau nhân phím Alt kéo điểm đổ (trong Windows) nhân phím Option kéo (trong M acintosh) ♦ Chuyển đổi điểm cong sang điểm góc, dùng cơng cụ Pen nhâp chuột điểm Cách thêm vào đ iểm : Nhâp cổng cụ Pen vào đoạn thẳng Cách xoá điểm, bạn thực thao tấc sau: ♦ Xố điểm gốc, dùng cơng cụ Pen nhâp chuột vào điểm cần xoá lần ♦ Xố điểm cong, dùng cơng Pen nhấp chuột vào điểm cần xoá hai lần (Nhấp chuột lần để chuyển đổi điểm cong sang điểm gôc mội lần để xố điểm gơc đó.) ♦ Dùng cơng cụ Subselection chọn điểm cần xố, sau nhân phím IDeletc HIỆU CHỈNH CẤC ĐOẠN Bạn có ứĩể hiệu chỉnh đoạn ứiẳng để thay đổi góc chiều dài đoạn Uĩẳng hiệu chỉnh đoạn cong nhằm thay đổi hệ sơ" góc hưđng cong Khi bạn di chuyển handle tiếp tuyến điểm cong, đường cong hai phía điểm bị thay đổi Và đố bạn di chuyển điểm gơc, có đường cong phía điểm bị ứiay đổi 64 GIÁO TRÌNH T H IẾ T K Ê W E B : PHẨN LÝ T H U Y Ế T - T ự HỌC M ACROM EDIA FLA SH 5.0 BẰ N G HINH ÀNH H iệu chinh đoạn tha/iỊỊ: Chọn công cụ Suhsclcelion chọn mộl đường thẳng IDùng công cụ Siibsclcclion để kéo điểm irong đoạn ihẳng sang vị Irí ^ H i ệ u c h í n h m ộ t đ o n đ n g COHỊỊ : Chọn c ô n g cụ Subseleclion kéo đoạn cong Chú ý : C c điểm ihường bị chc dâ\i bạn dùng công cụ Subsclcclion nhâp chuột vào đường thẳng dó Đc xcm điểm sau hiệu chỉnh, ban dùng cơng cụ Subscicction cơng cụ Hen nhâp vào đoạn Ihẳng Ngồi ra, bạn dùng cơng cụ Subselection để thêm c c dicm vào đường ihẳng r- Hiệu chỉnh n h iề u điểm n h iề u handle tiếp tuyến đường cong: Chọn công cụ Siibselcclion chọn đoạn đường cong Lúc handlc liếp luyến xuất irớn đường cong đỗ Thực mộl ihao tác sau: ♦ Hiệu chỉnh vị irí mâ\i neo Irong đường cong dó kéo điểm đổ Hiệu chỉnh hình dạng đường cong ircn hai mạt míHi nco đó, sau đổ kđo điểm lìuặu kđí.) haiidlc liớ”p luyến Trong kéo nhđ nhâVi phím Shiít đc có" định góc 45” V Ẽ BẰNG CƠ N G CỤ BRUSH Cơng cụ lìm sh tạo néi vẽ gicíng cọ gkíng Ihể bạn sơn Nó cho phép bạn tạo hiệu ứng đặc biệt, hiệu ứng lạo chữ đẹp Trong hầu hết ưường hỢp, bảng d',ọn dỗ sử dụng, bạn có nhiều cách hiệu chỉnh độ rộng chọn nél vẽ cọ vẽ cách nhâp chuộl vào chọn búl vẽ Slylus Bạn có ihể dùng ảnh Bilmap nhập vào bạn dùng cơng cụ lìrush để vẽ Chọn bút vẽ với nét cọ vẽ lớn 'r- Vẽ công cụ B rush: Chọn công cụ Brush Chọn màu cho cọ vẽ Bạn cổ thể xcm muc “Aac định thuộc tính cho nét cọ vẽ màu vẽ” 65 GIÁO TRlNH T H IỂ T K Ế W E B : PHẨN LÝ T H U Y Ế T - T ự H Ọ C M A CR O M ED IA FLA S H 5.0 BẰN G HÌNH ÀNH Nhâp ■ chuột chọn chê' độ bảng bổ sung chọn mội chế độ vẽ: C h ế độ vẽ Paint Normal vẽ đường thẳng phủ đầy màu mộl Laycr C h ế độ vẽ Paint Kills lô màu vùng trông, đường thẳng không bị thay đổi C h ế độ vẽ Paint lỉehin d lổ chỗ Irông vùng Stage Laye r, đường thẳng không thay đổi màu C h ế độ Paỉn t Selection áp đặt vùng màu mđi vào vùng chọn bạn chọn màu ữptions ' 'S ;0 Paint Normal Paint Fills Painí Behind ;© Paint Selecdon :© Paint Inside vùng bổ sung màu F ill bảng (Tùy chọn giông việc chọn mộl vùng màu tô áp đậl màu mđi) C h ế độ vẽ Paint Insidc vẽ tô màu bên vùng chọn, chúng không cho phép bạn tô màu bên đường đưỢc chọn Nếu bạn bắt đầu vẽ irong vùng trông, việc tô màu không ảnh hưởng đến vùng màu tổ tồn lại Ảf'h gốc vđi chế độ Paint Normal, Paint Behind, Paint Selection, Paint Fills Paint Inside Chọn kích Ihưđc cọ vẽ, hình dáng cọ màu cọ vẽ bảng bổ sung công cụ Brush Nếu bảng công cụ bổ sung đưỢc gắn vào máy tính bạn, bạn cổ thể chọn vùng công cụ bổ sung Pressure để thay đổi độ rộng nét cọ vẽ cách thay đổi bút cọ vẽ Stylus Kéo chuột vùng Stage Trong kóo chuột vào vùng Stage, bạn nhân phím Shifl để cơ' định nét cọ vẽ theo hưđng đường thẳng đường ngang Bảng công cụ vẽ bổ sung bảng công cụ 66 G IÁ O TRÌNH T H IẾ T K Ế W E B : PHẨN LÝ T H U Y Ế T - T ự H Ọ C M ACRO M ED IA FLA SH 5.0 BẰ N G HINH Ả n h PH Ụ C HỔI HÌNH DẠ N G ĐƯỜNG T H Ẳ N G v đ n g V IỂN n g o i lìạn có thc Ihay đổi hình dạng đường Ihẳng đường viền ngồi đưỢc lạo cơng cụ Pencil, lỉriish, I.in c , Ova! Rcctanglc cách chọn công cụ Arrow vào kéo vào đỏi iượng cách i ưii đường cong Ngồi bạn cổ ihể dùng công cụ Siibsclcclion để hiển ihị lâ't điểm đường ihẳng đường viền ihay đổi đưOlng thẳng đường viền cách hiệu chỉnh điểm Bạn có ihể cho hiển ihị điểm mấu nco ircn đường thẳng đường viền đưỢc lạo cơng cụ Pcncil, lìrush, ỉ>inc, Oval Rcclanglc ♦ Chọn công cụ Subselcction ♦ Nhâp chuộl vào đường thẳng đường viền ngồi Dùng cơng cụ Subselection tạo vùng chọn sau nhấp chuột vào đường thẳng đường vién n g o i để thay đổi hình dạng TH A Y ĐỔI HÌNH D Ạ N G DÙN G C Ô N G cụ ARROVV ' Đc ihay đổi hình dạng đường Ihẳng đường viền ngồi, bạn có Ihc dùng cổng cụ Arrow kéo vào bâ\ kỳ điểm cổ đường ihẳng Lúc trỏ thay đểi để kiểu hình dáng đ(M iượng bị thay đổi l'lash hiệu chỉnh đường cong đoạn thẳng làm cho phù hỢp với vị Irí mđi điểm di chuyển Nốu điểm đưỢc định vị lại điểm CIIỖÌ, bạn làm cho đường ihẳng dài hoặn ngán Nốu điểm đưỢc định vị lại điểm gcYc, đoạn thẳng giữ góc chúng ihay đổi dài hđn ngắn Khi mộl góc vng xuâl k ế bên irỏ, bạn ihay đổi điểm cì Trong đường cong x\ k ế bên irỏ, bạn có ihể hiệu chỉnh cho đường thẳng đường cong dó cong hđn Nếu bạn gặp rắc rơì việc ihay đổi hình dạng đường thẳng phức lạp, bạn có ihể làm nhẵn để loại bỏ mộl sơ'chi lạo lại cho hình dáng dễ nhìn Việc làm lăng độ phóng đại giúp cho việc thay đổi hình dạng đơíi tưỢng dễ dàng xác hớn 67 GIÁO TRlNH T H IẾ T K Ể W E B ; PHẨN LÝ T H U Y Ế T - T ự HỌ C M ACRO M ED IA FLA S H 5.0 BAN G HÌNH ÀNH 'r Thay đổi hình dạng đường ílỉẳiiỊỊ đườnỊỊ viền nỊỊồi dÙHỊỊ CƠHỊỊ cụ A rrow : Chọn cơng cụ Arrovv Chọn hai ihao lác sau: ♦ Kéo điểm Irên đoan Ih ẳn g dể định dạng lại hình d ♦ Kéo chuộl vào đường ihẳng nhíín phím Ctrl (trong \Vindows) phím Oplion (irong Macintosh) để lạo mộl điểm gô"c mđi LÀM THẲNG VÀ NHẴN THẲNG đường lìạn có ihể thay đổi hình dáng đường Ihẳng dường viền cách làm thẳng nhẵn chúng Chú ý : Hiệu chỉnh góc độ làm nhẵn thẳng tự động cách chọn chế độ Ihiếl lập vẽ có Irình đ(ln K d it > P rcfercn ce s ■•Dfâwing S e ttin g s ' £ o n n e c t lines [Notrnal ' S rnooỉh curves: iNnnơl R e c o a n íz e lines: ỊNorm al R e co g n ize sh ã p e s: INorrnaỉ Click c c u a c y : ỈN oím al V iệc làm Ihẳng đường Ihẳng đường cong lạo thay đổi nhỏ bạn vẽ Nó khơng cổ c dụng đối vđ i đoạn thảnịỊ, Ngoài ra, bạn cổ thể dùng kỹ thuật làm thẳng để lạo hình dạng nhạn d a n g khác I*’!a.sh Nốii bạn vẽ hình ô-van, hình chữ nhậl hình lam giác vđi lùy chọn Rccognize Shapcs lắ l đi, bạn có ihể dùng lùy chọn Slraighlening để làm cho hình dạnh hồn hảo (lìạ n xcm mitc “Cách chọn c h ế độ thiết lập ve" đc bicì thêm chi tic\ mục tùy chọn Rccogni/,c Shapes trình đơn E d it > P re ícrcn ce s) Các hình dạng khơng đưỢc nhận dạng mà chúng chạm bạn vẽ, chúng tự nô'i kếl đến thành phần khác kế nổ Recognize shapes: Click âccuracy: C h ế độ nhận n g hinh d n g c h u y ể n dạng hình trẽ n sang n g hình b ê n d ới Normal Off strict Norrnal 11 olerant 68 G IÁO TRỈNH T H IẾ T K Ể W E B : PHẨN LÝ T H U Y Ể T - T ự H Ọ C M ACRO M ED IA FL A S H 5.0 B Ằ N G HÌNH ÀNH Việc làm nhẵn làm mềm cạnh cong làm giảm độ nây chế độ rung irong lâ\ hưđng ơ-van đường cong Ngồi ra, làm giảm sổ' lượng đoạn cong Tuy nhiên việc làm nhẵn cân đơl khổng có lác động đến đoạn ihẳng Đặc biệt, điều T ấ i có ích bạn gặp rắc rơ'i vđi việc làm thay đổi hình dạng sô" đoạn thẳng cong ngắn Chọn tâ't đoạn làm nhẵn đoạn tạo ramột đường cong nhẹ nhàng dễ dàng thay đổi hình dạng í.ặp lại ứng dụng làm nhẩn làm cho đoạn nhẩn Ihẳng phụ Ihuộc vào đoạn cong đoạn thẳng gôc ban đầu O ip ỊỊo n s I m ì í i nhẩn độ cong đường viền đưỢc chọn đường cong: Chọn công cụ Arrow nhâp chuột vào vùng công cụ bổ sung Smooth vùng tùy chọn Options hộp cơng ( cụ chọn trình đơn M odify > Smooth Smoolh vj u m Tạo thay đổi thẳng nhỏ viền đưỢc chọn đường cong: Q p tio n s Chọn cổng cụ Arrow nhâp chuột vào vùng công cụ bổ sung Straighten vùng tùy chọn Options hộp công cụ chọn trình đơn M odify > Straighten Straighten Dùng c h ế độ nhận dạng Chọn công cụ A rro w nhấp chuột vào vùng cổng cụ bổ sung Slraighten chọn irong Irình đơn M od ify > Straighten TỐI ƯU HOÁ CÁC ĐƯỜNG CONG Cách khác để làm nhẩn đường cong tô'i ưu hoá chúng Điều làm cài tiến đường cong đường viền cách làm giảm số lượng đường cong dùng để xác định thành phần Ngồi ra, việc tơì ưu hố làm giảm kích thưđc đoạn phim I-lash xuât file Flash Player Vđi công cụ bổ sung Smooth hay Straighten lệnh có trình đơn, bạn áp dụng chế độ tơì ưu hố thành phần nhiều lần Cách tối ưu hoá các đường cong Chọn thành phần vẽ để tơ'i ưu hố chúng chọn trình đơn M odify > O ptim ixe Trong hộp thoại Optimize Curves, kéo trượt Smoothing để xác định góc độ làm nhẵn Kết xác phụ thuộc vào độ cong đưỢc chọn Nói chung việc tổ'i ưii hố tạo sổ' đường cong hơn, góc độ giơng đường vién gơc 69 G IÁO TRÌNH T H IẾ T K Ế W E B : PHẨN LÝ T H U Y ẾT - T ự H Ọ C M ACRO M ED IA PLA SH 5.0 B Ằ N G HỈNH ẢNH ũphmize Cuives OK ầmoothing- í N one Optỉons: o ^ Maximum Cancel Ị J s e multiple p a s s e s (slower) S h o w to ta ls m e s sa g e Help Thiết lập tùy chọn bổ sung ♦ Chọn mục Use M ulliplc'Passes (Slowcr) lặp lại q trình làm nhẵn khơng ch ế độ tổ”i ưii hố Điều giô ng việc chọn chế độ đôi ưu hoá lặp lại nhiều lần ircn ihành phần chon ♦ Chọn mục Show Totals Messagc để hiển Ihị hộp thoại thay đổi mức tơl ưu hố chê' độ làm nhẩn đưỢc chọn [piash The original shapes had 98 curves 'Ằ The oplímized shape has 90 curves This is a QZ reduclion í' OK 11 Sau nhấp O K CƠNG CỤ XỐ Xố cơng cụ Fừaser loại bỏ tâ't các màu đường ncl vẽ Bạn cổ ihể xoá cách nhanh chóng thứ có vùng Siagc, xoá đoạn vién ndt vẽ , vùng màu dùng chuột kéo lách biệt Bạn tơì u hố cơng cụ Erascr để có xố nct vẽ, vùng màu vùng màu độc lập Cơng cụ Eraser cổ thể chọn hình vuổng hình cầu, có năm kích thưđc khác nhau, Để xố tất thứ có vùng Stage mộl cách nhanh chóng tiến hành cách nhấp đúp chuột vào cơng cụ xố > Xoấ đoạn nét vẽ vùng màu Chọn công cụ Eraser sau đổ nhâp chuột vào vùng Oỹiìons cơng cụ bổ sung chọn Paucet Nhấp chuột vào đoạn nét vẽ vùng màu mà bạn muôn xố • ì ' ỉl Paucet ^ ì: > Xố cách kéo chuột Nhâ'p chuột chọn cơng cụ Eraser Nhấp chuột chọn Eraser Modc vùng công cụ bổ sung chọn chế độ xố sau: 70 G IÁO TRÌNH T H IẾ T K Ế W E B : PHẦN LÝ T H U Y Ế T - T ự HỌC M ACROM EDIA FLA SH 5.0 BẰNG HINH ÀNH Options ♦ C h ế dộ K se Norm al xoả đường viền nél vẽ irên mộl I.aycr ♦ C h ế độ Era.sc Fill.s xoá màu lô; đường nét vẽ không bị ảnh hưởng ♦ Chố độ E s c Lin e s xố đường nél vẽ, màu lơ khơng bị ảnh hưỏng ♦ Chê' độ E s e Selccted FilLs xơá vùng màu hành, không làm ảnh hưỏng đên : |K S w ^® l 1ĩrase nils E r a s e L in e s E r a s e S e l e c t e d Fills 'ũ E r a s e In sỉd e màu chọn đường nét vẽ (Chọn vùng màu bạn xố trưđc dìing cơng cụ lừascr chế độ này.) ♦ Chê" độ E s c Insidc xoá vùng màu mà bạn bắt đầu xoá đường nét vẽ Nếu bạn bắl đầu xố điểm Irơ^ng, khơng xố đưỢc Các đường ncl vẽ không hị ảnh hưỏng irong chế độ xoá Nhâ^p chuộl vào vùng cổng cụ bổ sung chọn công cụ Ivrascr Shapc Sau chọn mộl loại cơng cụ xố có Irong bảng Bảo đảm chế độ 1’aucel chưa chọn Kéo chuộl vào irong vùng Slagc THAY ĐỔI HÌNH DẠNG CỦA Đ ố l TƯỢNG Bạn cổ ihể làm ihay đổi hình dạng đơì iượng cách biến đổi đường thẳng sang vàing màu lơ, mỏ rộng hình dạng đổì tưỢng đưỢc lơ màu, làm mềm gổc đưỢc lô màu cách ihay đổi dạng đường cong f)ặc lính Lin e s to F ills Ihay đổi đường ihẳng sang vùng màu, cho phép bạn ló màu đường ihẳng màu Crradicnts xố mộl phần đường Ihẳng Các đặc tính Expand Shape Sotìcn lỉdgcs cho phép bạn mỏ rộng đó'i iượng đưỢc tơ màu làm mờ góc Lệnh Kxpand Shapc Sot‘ten Kdges làm việc uYl Ircn đ(Yi tưỢng nhỏ khổng có nhiều chi úếi nhỏ Áp đặl lệnh Soften Ịídges đcíi iưựng nhiều chi tic‘t làm tăng kích ihưđc íilc 1'lash Player Biến đổi đường thẳng thành màu tô: a Chọn mộl nhiều đường ihẳng b Chọn Irong trình dơn M odiíy > Shape > Convert Lin e s to Kills Các đường Ihẳng đưỢc chọn bị thay đổi thành dạng đưỢc lô màu Việc chuyển đổi đường thẳng Ihành màu lơ làm kích ihưđc filc Iđn nổcó thể làm lăng lơc độ vẽ cho đ(Yi tưỢng chuyển động 71 GIÁO TRlNH TH IẾT K ẩ W EB : PHẨN LÝ TH UYẾT • T ự HỌC MACROMEDIA FLASH 5.0 BẰNG h INH ả n h / Mở rộng hình dạng đối tượttg tơ màu Chọn đô'i tưỢng đưỢc lỏ màu Lệnh hoạt động tô'l nhâl đối tưỢng đưỢc tơ mộl màu khơng có đường vicn Chọn Irình đơn Modify > Shape > p^xpand F ill ỉmooth Stiaighten lìptimize CUl«AII'»'Shiít+C Shaee ^1 í Transỉorm >i ỊQonvert Linet to Filis Expand Fĩll SoỊlen Fill Edges II Trong hộp thoại Expand F ill, nhập vào mộl giá Irị pixel mục Distance chọn mục Expand Inset tùy chọn Dừeclion Mục Expand mở rộng kích thưđc đơì tưỢng mục Inset làm nhỏ kích thưđc đơì tưỢng Expand Fĩll OK Èisỉance: Ị4 Dịection; Expand Cancel o Inset tielp Cách làm mềm góc đơi tượìig Chọn đối iượng đă dưỢc ló mau l.Ọnh hoại động Ió'i nhấi irớn đối tưỢng đưỢc tơ màu khơng có đường vién Chọn trình đơn M odify > Shape > Soften F ill Edges Thiết lập lùy chọn sau đây: ♦ Mục Distance độ rộng điểm p ixcl Irong góc mổm S ỉen Edges Distance: OK 4px VWkN*«SV!»V Ni«T>ber of sleps: Díection: ; Expand Inset o Cancel Help Number of Steps điều khiển sô' đường cong đưỢc sử dụng cho hiệu ứng góc mềm Tạo thêm nhiều bưđc mục làm cho hiệu ứng nhẵn làm cho kích thưđc file Iđn Các mục Exp and Inset điều khiển hình dạng đơl tưỢng Iđn lên nhỏ lại để làm mềm góc 72 G IAO t r ìn h t h iế t k ể W E B : PHẨN LÝ T H U Y Ế T - T ự HỌ C M ACRO M ED IA FLA SH 5.0 BẰNQ HINH ÀNH CHẾ Đ ộ BẮT DÍNH ( SNAP ) Để xếp thành phần có vùng Stage tự động bắt dính vào nhau, bạn dùng chế độ Snap (bắt dính) C h ế độ Snap mở vùng cơng cụ bổ sung bạn chọn công cụ Aưow, chọn lệnh Snap to Objects trình đơn View O p U ọ n s fy L vÍK ' ^5 Snap to Obịecỉs io ịiÌỊ X e iỉ ^ Corrtrol f i ] Wínd I*rcfcrcnce.s nhííp chiiộl vào lab l'^diling liên mục Dravving Scllings, bạn có ihể chọn mộl lùv chọn sau: r^DíaiAMng Settings-—CcriTiect lines Recognize Ịines: Normal Must be close p-T: ị^ ■: ^ Cân be distânt oieranr Ị ịNmâl : ▼1 ỊNormal ìà Mục chọn Conncct Lin e s xác định đường vẽ kếl Ihiíc mộl đoạn ihẳng tồn trưđc bắt dính vào điểm gần nhấl mộl đoạn thẳng khác Các liìy chọn sẩn có Must B e Closc, Normal Can lỉe Distant Ngoài chế độ ihiêì lập điều khiển nhận bicl đường Ihẳng ngang dọc Irong l'lash giúp bạn võ đường Ihẳng ngang dọc mộl cách xác Khi bạn chọn lùy chọn Snap to ()bjccl.s, chốđộ ihiếl lập điều khiển đ(íi iượng gần đưỢc bắl dính vào Mục chọn Smooth C u rv cs xác dịiili dụ Iiliẵii áp đặl vàv) đường tt>ng vẽ bhnịỊ cổng cụ Pcncil bạn ihiêì lập chê"độ vẽ vStraighten Smooth (Các dường cong nhẫn dễ ihay đổi hình dáng dơi iượng Irong đổ đường cong ihô kệt lởm chởm làm cho đường vẽ giông đường vẽ ban đầu) Các tùy chọn OIT, Rough, Normal Smooih Chú ý : Bạn cổ ihc làm nhăn đoạn cong dùng irình đớn Modify > Smooth Modify > Optimize Mục chọn Rccogni/c Lin e s xác định đoạn thẳng gần thẳng ciùng công cụ vẽ Pcncil trưđc l'lash nhận dạng làm nổ thẳng hoàn loàn Các mục chọn OIT, v S lrict, Normaỉ Toleranl Nêu bạn lắt mục Rccogni/,c Lines Irong v c , sau bạn có ihể làm ihẳng đường thẳng cách chọn mội nhiều đoạn thẳng chọn Irình đdn Modity > S tra ish tcn Recognize jines: Normâl Off ecognise :ognize shapes: ỊStrict I Click ạccuracy: Ịĩoịeranl: ^ ^ Mục chọn RccoíỊnize Shapcs điều khiển xác việc nhận dạng vẽ lại dạng hình học mà bạn vẽ đường tròn, hinh ơ-van, hình vng, hình cliữ nhật hình cung 90“ 180” mơl cách xác C ác lùy chọn OIT, 74 GIÁO TRlNH T H IẾ T K Ế W E B : PHẨN LÝ T H U Y Ế T • T ự H Ọ C M ACRO M ED IA PLASH 5.0 BẰ N G h ìn h ả n h Strict, Normal Tolcranl Néu bạn tắt mục Recognize Shapes vẽ bạn làm thẳng c c đường thẳng sau cách chọn nhiều hình, (chẳng hạn c c đoạn thẳng đưỢc nôTi lại vđ i nhau) chọn ưình đđn M odify > Straighten Nhâp chuột vào mục chọn A ccu racy xác định kiểu trỏ ưưđc Flash nhận dạng chúng Các tùy chọn Strict, Normal, Tolerant 75 ... Scenel ■ÊJ ' ’ ’ ’ 'lõ ' ' 'i «â □ Ịm Modểfy ImA B a m se> a n m 20 ' 25 ' ' ’ ' 30 ' ' 3fl ' ' Ò ' ' 45 ‘ 50 ' ' '55 65 ' 70 60 : ^ aỊ '-À t(j A «;] >« Ỉ4 NUM Vùng Stage nơi mà bạn tạo frame... [55 0 px Match: ! Prbiter HẹigM ị X |4Ũ0px Ị Ị CcMTtents Cancel Ị SaveDeíauR Xác định kích thưđc Stage pixel, nhập vào giá trị cho mục Width Hcight Kích thưđc đoạn phim theo mặc định 55 0 X 400 ... C H C A HƯỚNG D Ẫ N SỪ DỤNG FLASH5 .II BIÊN SOẠN ; PHẠM QUANG HUY HĨ CHÍ HỊA PHẠM QUANG HIỂN Tháng 7- 200 1 G IÁO TRÌNH TH IẾT K Ế W EB : PHÁN LÝ TH U YẾT - T ự HỌC MACROMEDIA FLA SH 5. 0 BẰNG HÌNH