TS.HOÀNG VÂN ANH HƯỚNG DẪN VÀ THIẾT KẾ WEBSITE BẰNG MACROMEDIA FLASH NHÀ XUẤT GIÁO DỤC - 2009 Phân thứ nhdl" TtllẾT Kế Cơ BẲN Mở đầu $ TỔNG CPURN vé FWSH VA ỨNG DỤNG TRONG THlếr Kế MULTIM€Dlfl CHO ujeesire Trong chưong tìm hiểu về: Tọỉ SQO phỏỉ sử dụng Flash? Đặt câu hỏi không hiểu rõ tính ứng dụng chương trình, bạn khó khai thác sử dụng mục đích để tạo sản phẩm ưng ý Vậy Flash có ưu điểm gì? ■ Các lợi thể đồ hoạ Vector (độ nét chất lượng hình ảnh) ■ Các khả thiết kế đồ hoạ Animation thiết kế Web ■ Các tiện ích cùa việc tạo dòng (Sừeaming - kỳ thuật truyền tải liệu đầy đủ liên tục Các trình duyệt Web hiển thị liệu hình ảnh trước toàn tập tin Flash tải về), ưu lợi ích kỹ thuật trình bày đầy đủ thiết kế Khả lập trình tương tác tTong trang Web Multimedia gì? Multimedia hay gọi đa phương tiện: môi trường sử dụng nhiều loại phưong tiện để truyền đạt thông điệp, ý tưởng thông qua âm thanh, hình ảnh, tương tác Vậy vai ừò ý nghĩa Multimedia môi trường Internet liên quan với phần mềm thiết kế Flash nào? Chúng ta cổ thể hình dung qua đồ tíiỊ đây: Các file có âm vâ hình ảnh thiết kế xuất từ Flash Các trình duyệt Web hiển thị nội dung hình ảnh file Flash Multimedia Các úng dụng CỦQ Flash thiết ké Đa phuong tiện ■ Thiết kế logo (Hình ảnh minh hoạ) ■ Thiết kế banner ■ Thiết kế ảnh ■ Thiết kế Animation Sound ■ Thiết kế tưong tác Chương I HƯỚNG dAn Sử dụng công cụ tro ng f WSH Trong chương tim hiểu về: ■ Cài đặt khởi động chương trình • Cách sử dụng menu lệnh ■ Cách sử dụng bảng công cụ Tool Box ■ Cách sử dụng bảng tham số thuộc tính đối tượng cửa sổ Panel 1.1 Vôu cồu cđu hình hệ thống để càỉ đột đìọụ chuong trình Cấu hình phần cúng cao tốt vi ỉdii bạn thiết kế file với dung lượng lớn làm bạn giảm bớt thời gian chờ đợi test load file Hệ điều hành Windows (tốt Windows XP) Ngoài bạn cài đặt thêm chương trình bổ trợ cho việc play xuất file có đuôi MOV chương trình Quicktime Khởi động chạy chưoTig trình Muốn chạy chưoTig trình Flash trước tiên bạn phải cài đặt chương trình sẵn máy tính Sau cài đặt, biểu tượng chương trình ứiường nằm hình Desktop xuất frong tìianh menu Start nên bạn cần click chuột để khởi động chương trinh (hình 1.1.) Hình 1.1 1.2 Làm quen VỚI glQO diện vò vùng làm vỉệc (Uưork fìrea) ứiuong trình UJ Mờ file cố sẵn Hình 1.2 Sau khởi động, giao diện chương trình Flash xuất hình minh hoạ 1.2 với cửa sổ Start up liệt kê chức sử dụng ban đầu tạo file Flash hay mở file Flash thiết kế máy tính hay tạo file Flash dựa mẫu có sẵn thư viện chương trình Khi lần đầu iàm quen với chương trình, ta nên thử tạo file dựa theo gợi ý thư viện Template giúp người thiết kế dễ hình dung file Flash mẫu thiết kế bố trí Sau đó, ta nhấn tổ họp phún Ctrl + Enter để Preview (xem kết nội dung file) Để thực thao tác trên, làm theo bước sau: Bước ỉ: Clìek chuột vào mục bảng Create from Template Ví dụ: Photo SlideShows (hình 1.3) Hình 1.3 Bước 2: Xuất cửa sổ New from Template (hình 1.3) Trong cửa sổ này, mục Templates liệt kê tất mẫu tìiiết kế sẵn có mục ehọn Trong bảng thư viện chương trình có mẫu tên Modem Photo SlideShow mục Preview cho phép bạn xem trước hình ảnh kích cỡ mẫu chọn Nếu đồng ý với mẫu lựa chọn bạn click vào nút OK nhấn phím Enter để kết thúc lệnh Bưởc 3: Cửa sổ thiết kế File mở hình minh hoạ với hình thiết kế vô số bảng thuộc tính (hình 1.4) HƯỚNG o Ẳn VÀTHIẾrKẾ A Hình 1.4 Nếu người bắt đầu học Flash vùng công cụ, thuộc tính thiết kế đổi với bạn hoàn toàn mẻ Nhưng ta nhấn nút Play để chạy file Flash xem thử hiệu ứng chức cỏ cách để thực sau: ■ Ẩn tổ họp phím Ctrl + Enter ■ Vào menu Control chọn lệnh Test Movie (hình 1.5) Ị l, imands Window Help Play Rewind Go To End Step Forward One Frame Step Backward One Frame t e s t H o v ie Debug Movie Test Scene Enter Ctrl+Alt+R , Qrl+Enter Ctrl+Shift+Enter ctrl+Alt 4-Enter Delete ASO Files Delete ASO Files and Test Movie Loop Playback Play Ail Scenes Enable Simple Frame Actions Enable Simple Buttons V Enable Live Preview Mute'Sounds Ctrl+Alt+F Ctr!-f Alt+B Ctrl+Alt+M Hinh 1.5 Ket hình lên cửa sổ Preview file Flash Template mở (hình 1.6) I »? ]- Cửa sổ Preview Hình 1.6 10 HƯỚNG DẨN VẢTHIỀtKẾ Lun ý ta tạo nhiều cửa sổ Preview cho nhiều file mở lúc (hình 1.7) TữT kC«fat r).i|» « rr'U M « h n l-l « I» J ; ti) •« «í ^ a o • Ị> My Company 2003 A iìiìu a I Report - l*Xiinuning the pasi yvar OÍ safcis al myCompan^^ iinc^ II ị ►tóium ► P*op*rí)«j liou f> ttvM iurt Hình 1.7 Giao diện chương trình click vào chức Create New -> Flash Document lên sau (hình 1.8): Thanh menu f :7 H t> ỉđ í Mt» im«! Ho«v Tut C Thanh thước điều khiển Timeline » « SÉ » « < « « « « « » ( « * $ ! ? , Hộp công cụ vẽ Toolbox Thanh thước kẻ Ruler Các bảng điều khiển thư viện, đối tượng, hiệu ứng thuộc tính Khung thiết kế Vùng làm việc lưới (Grid) tiO Bảng thuộc tính Gác đổi tượng Hình 1.8 thiết kế 11 1.3 Cách sử dụng menu lộnh Việc sử dụng menu lệnh frong Flash hoàn toàn không phức tạp ý tìiì nhận thấy tập hợp quản lý theo tìmg chức riêng biệt: Menu File (hình 1.9): chuyên quản lý tạo, mở, đóng, xuất file tài liệu Flash © - f y h t i ^ d -1 M acro n rW id ia # lasiS B a F ile E d it V ie w In se rt M o d ify T ext C om m ands C tr lH - O O pen O pen R ecent ne C lo s e C trl+ W C l o s e AH C trl+ A lt+ W Save C trl+ S s i S ave an d C om pact S a v e A s C trl+ S h ift-I-S S a v e a s T e m p l a t e S a v e AW fisr ị Im p o rt E x p o rt P u b lis h S e t t i n g s C trl+ S N ft-h F P u b lis h P r e v ie w P u b lis h S N ft+ F i2 P a g e S e tc ^ ^ P r in t C trl+ P S e n d E x it O p W C trl+ Q I p l Hình 1.9 • New: Tạo file Flash mói ■ Open: Mờ file Flash tíii liệu gốc tất file mà chương trinh hồ trợ ■ Open Recent: Mở file Flash thiểt kế gần ■ Open As Library: Dùng tập tin đẵ có làm thư viện mẫu cho file thiết kế ■ 12 Close: Đóng cửa sổ file Flash thiết kế + Di chuyển chuột đến frame số 10, chèn Blank Keyframe vào thiết kế giao diện cho khung hình Có ứìể tạo thêm khung hình liệu phần Truyện tiểu thuyết - trinh thám nhiều m ột ữang h it £4t Vtow Insert Hodfy t«)« Comrvtnh Col H i^ ToeK Hk □ *i *v Sanmw}?!' • Vvỉ»»ftn 1«)^: fluiili M;UI ¡«MiOti VNO H in h 5.86 + Bây g iờ đến công việc gắn mã script vào nút bấm điều khiển khung hình Bạn đặt chuột vào frame layer 1, click phải stopO; vào khung hinh T iếp theo, trỏ chuột vào nút bấm truyện thiếu nhi gắn đoạn mã script sau vào: chuột chèn mã action on (release) { gotoA ndPlay(5); stopO; } Những đoạn mã giải thích ý nghĩa nên bạn quên tìm đọc lại Tiếp đến ta chuyển qua chọn viết mã script :ho nút bẩm Truyện tiểu thuyết - trinh thám với đoạn m ã sau: on(release) { gotoAndPlay(lO); stopộ; } 171 Dữ liệu cho T ru yện tiểu thuyết —T rinh thám nằm khung số 10 nên ta báo hiệu cho player biết di chuyển đến khung hình dừng lại đây, khung hình số có liệu Truyện thiếu nhi, phải điều khiển với khung hình sổ 6? c ầ n nhớ khung hình số cỏ liên quan đến khung hình sổ liên kết từ khung hình sang N ên để liên kết tò khung hình số sang sổ cần trỏ chuột đến frame sổ đồng thời trỏ vào nút bấm X E M T IẾ P khung hình gắn đoạn m ã Script sau vào: on(release) { nextPrameộ; stopO; } đoạn mã thực lệnh next/rameộ tương tự ỉệnh gotoAndP!ay(6); N ghĩa cho phép di chuyến thêm khung hình từ khung hình hiển thị N ếu có thêm khung hình từ frame số 7, 8, ta làm theo phương pháp để khung hình liên kết với Nhưng cần lưu ý, nút bấm X E M T IẾ P có nút nên viết actionscript cho frame phải trò chuột chọn frame trước để ừánh nhầm lẫn Cuối nút bấm M A IN M EN U , đoạn mã gắn vào nút bấm thực chức điều khiển piayer từ scene tru yen di chuyển scene main dừng lại frame sổ + T h iết kế scen e SachN N : K ích hoạt scene sa ch N N tưong tự với scene trên, chia loại sách thành loại sách ngôn ngữ khác : A nh, Pháp, Trung Quốc có ửiể cho tất vào scene tách thành frame liên kết với dãy chữ sổ trang cuối hình Đ e minh hoạ cho scene ta có hình 5.87 Thiết kế scene cuối file scene sach C N Di chuyển đến scene sach C N , phần thiết kế sách chia thành hai phần: Sách hỹ thuật Sách văn học xã hội Trong sách kỹ thuật lại chia thành ba loại Sách Tin học, Sách Điện - Điện tử Sách Cơ khí Ta cần phải giải vấn đề, tạo giao diện cho scene với hai nút bấm Sách kỹ thuật Sách văn học- xã hội kéo thả vào m ột layer 172 iêng biệt Di chuyển đến frame số 30 chèn Keyfram e để tạo hình cho lai nút (hình 5.88) :AJ :Ị:1 t: tim e f e ie ;ị| ^ trưyen M ChN N » dỉ O í s io 3S M wrn-Mmm11 ể t »chCN ; tP A C ) tâ r ỉ '1 ■ Sv.,;ni.J I iill:i I k n x ì Ói>tl iiulTkli ISvni MDti' lu \i» r m NaI* lí.Mh í«.ò< • N \t> I>1' IMP liwbiK: ' SI> f l i t h « i ; '1 » * • V M > •JWJ1»* \"A!»í>’.=1IIt -1 UM h < «• kb» I M« I ÌM r w ’ -m ! • « l%4K h«i» k f >IH>^ «hi I# * ' a I> H ìn h 5.8 + Trỏ chuột tiếp đến frame số 10 chèn Blank Keyframe vào Trong frame ta sễ tạo liệu Sách văn học xã hội (hình 5.90) "côm m ini'' '¿ ¿ ¿ Ì '’’ w in d » *Meíp ' f Ĩ ’ fd t“ ' VMM 'mÌHn '' »¿dfy’ *w kk B^ / -Ị.^ *»âO 's § p u>uw»rí ‘ I ts ữ ứ t JỊ^t.wen ĩmk» Ố A ^ ị ’ " ' IS ỈS K K |ỉí& MChC» ỉ • o o□ ĩ :L , £ : " A J J* ứ \MIN %tl vw Q c«kn /m e IKK l» jr i iô ; í » (jfn (Im ( SMp cai '■ ' r ^ ĩ s ^ H í í i ĩ ĩ t ẻ i ' i ã i Á s i m i ‘k iiã ẩ ĩể iã i Vỉ;ứ;iw.5séw[...]... A ctio n S c r^ 2.0 Ck%SM% Compfer Oo'tictivts ằ085 f?ằ C o raU nl M - \ - Script Ass*st 1 Deprec^lcd Options Q 6 ^ (11 T yp^i * Cofrorằrrfs @ I r v ô Current Selection - !*j ^ Layer t ; Frame 1 Scene 1 i' Properties [y V L*yô r 1 : J js ii ^to acfciwi selected 51 Pariwti^efs Hỡnh 1. 19 Hỡnh 1. 20 1 -ir-xrorvi. H ^ ARgn & info 8e Transrorm !=v ttSl Align V Align; != S tM 0 iJa fla Distribute;... File Edit I I Tools j> I0 ^ / P i A View Insert Modify t^xt Commands "' Pont ' Untitled-2* 1 ^ * Control Style Tiroeiine èp sS èè! Letter Spacing h 9 1n0 15 , 12 14 C? Layer 1 o V'ớ^indow ' 8 18 Check spiing 24 Spelling Setup 36 48 (fy # ' 72 ử -fi-o 96 12 0 View Q, Hỡnh 1. 14 7 Menu Command (hinh 1. 15): Ket ni cỏc file JavaScript (c phn m rng jsfl) v chy chng trỡnh Ngoi ra nú cũn cho phộp... lx u Jia ,x a J? a View o Q, B Colors ! Hỡnh 1. 12 5 Menu Modify (hỡnh 1. 13); cho phộp chnh sa thay i cỏc thuc tớnh v hiu ng ca cỏc i tng M aciomedia Flash Basic 0 [Untitted'2*] Fie Edt 1 Tools View Insert |1| TllllillWlp^ Ii Timeline IP \ o y' ộ 1 20 Bitmap Symbol Shape Combine Objects tji? Êj i 2S i 7 ằ 1 Timeline Timeline Effects ằ '7 V r i i1 Convert to Symbol F8 Break Apart Ctrl+B !B... No Commands Found / p A G ? Layer 1 o õ ớ D: % ớ-} 1 12.0 f)S Hỡnh 1. 15 Javascript Manage Saved Commands: Qun lý cỏc lnh ó c gi t file 19 Get More Commands: M nhp mt JavaScript vo file Flash ang m Run Command: Chy lnh t file Javascript c gi vo 8 Menu Control (hỡnh 1. 16): iu khin cỏc thao tc liờn quan n vic chy v iu khin cc Player chy preview cỏc file flash File E dt View Insert Modify Timeiine... Break Apart Ctrl+B !B % / p ự A Document Untitled-2-' Transform Arrange Align ; I 12 .0 fips O.Os > View Group 0 Q 1 Cobrs 1 /H i1 ộ m 1 10 !ằ r' /- Ctrl+G Hỡnh 1. 13 Document: Chnh sa, thit lp tiờu , kớch thc, mu nn, tc chuyn ng cựa cỏc frame v n v hin ih cho thanh thc Timeline 3 HễNGDN VATHIẩTK , A 17 Convert to Symbol: Chuyn i thuc tớnh mt i tng thnh cỏc i tng Symbol khỏc Break Apart;... size; J= ii>i> ^ 4 n Space: 1 m 01 i s = g d t f! Library Urititled-I 4 HNG DN V THIT K A To stage: Hỡnh 1. 21 25 _ ^ / / Panel Color Mixer (hỡnh .22): Thiờt lp cỏc chờ mu v mu trn ^ C o lo r SSv Color Mixer f B l l l S S H I f i i l ^ Ufi S I Type: Solid r i yv rv đ Z) SPiFill color 1 R: 204 G: 51 B: D Alphas iV ;>/ 10 0% v - #CC3300 I S Hỡnh 1. 22 Panel library (hỡnh 1. 23): Cho phộp qun iý cỏc... hin mt s hnh ng c gỏn cho nỳt Mute Sound: Tt ton b õm thanh 9 Menu Windows (hỡnh 1. 17): kim tra cỏc ch hin hay n cỏc bng thuc tớnh Cỏc bng ny cho phộp s dng nhiu tham s hn iu khin hay thay i thuc tớnh ca cỏc i tng Q Macromedia Flash Batic 8 - Pile et View In s e rt M odtfy Text Commaods Control Toos m' ^ p ựA O Tim etne layer1 Scene1 ^ mu 1 5 * o * Q Coiors ym n H dp Duplicate Window @ ôB:.r... Ct.t+I â Caseô!â rfe aigjuwmag'Sô;'ô >Adtt0ftK ằ 'prap*ôớw pirw it^ ItJiJ Hỡnh 1. 18 Panel Action (hỡnh 1. 19): Cho phộp vit v gn cỏc on mó Script vo cỏc i tng trong bn thit k Panel Movie Explorer (hỡnh 1. 20): Qun lý n hin cỏc i tng dng Text, Symbol, Action Script, Frame v Layer Panel Align & Info & Transform (hỡnh 1. 21) : Qun lý canh l v dch chuyn v trớ ca cỏc i tng 24 V Actions -< F r a m e ... èè! Letter Spacing h 1n0 15 , 12 14 C? Layer o V'ớ^indow ' 18 Check spiing 24 Spelling Setup 36 48 (fy # ' 72 -fi-o 96 12 0 View Q, Hỡnh 1. 14 Menu Command (hinh 1. 15): Ket ni cỏc file... trinh (hỡnh 1. 1.) Hỡnh 1. 1 1. 2 Lm quen VI glQO din vũ vựng lm vc (Uork fỡrea) iuong trỡnh UJ M file c sn Hỡnh 1. 2 Sau khi ng, giao din ca chng trỡnh Flash s xut hin nh hỡnh minh ho 1. 2 vi ca s... Q, B Colors ! Hỡnh 1. 12 Menu Modify (hỡnh 1. 13); cho phộp chnh sa thay i cỏc thuc tớnh v hiu ng ca cỏc i tng M aciomedia Flash Basic [Untitted'2*] Fie Edt Tools View Insert |1| TllllillWlp^ Ii