Tài liệu Hướng dẫn và thiết kế website bằng macromedia flash

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 này chúng ta sẽ tìm hiểu về: Tọỉ SQO phỏỉ sử dụng Flash? Đặt ra câu hỏi này vì nếu không hiểu rõ tính năng và ứng dụng của một chương trình, bạn sẽ rất khó có thể khai thác và sử dụng nó đúng mục đích để tạo ra các sản phẩm ưng ý. Vậy Flash có những ưu điểm gì? ■ Các lợi thể về đồ hoạ Vector (độ nét và chất lượng hình ảnh). ■ Các khả năng trong thiết kế đồ hoạ Animation trong thiết kế Web. ■ Các tiện ích cùa việc tạo dòng (Sừeaming - là kỳ thuật truyền tải dữ liệu đầy đủ và liên tục. Các trình duyệt Web sẽ hiển thị dữ liệu hình ảnh trước khi toàn bộ tập tin Flash được tải về), ưu thế và lợi ích của kỹ thuật này sẽ được trình bày đầy đủ trong các bài thiết kế. Khả năng lập trình và tương tác tTong các trang Web. Multimedia là gì? Multimedia hay còn gọi là đa phương tiện: là môi trường sử dụng nhiều loại phưong tiện để truyền đạt một thông điệp, một ý tưởng... thông qua âm thanh, hình ảnh, sự tương tác... Vậy vai ừò và ý nghĩa của Multimedia trên môi trường Internet và sự liên quan của nó với phần mềm thiết kế Flash như thế nào? Chúng ta cổ thể hình dung qua đồ tíiỊ dưới đây: Các file có âm thanh vâ hình ảnh được thiết kế và xuất ra từ Flash Các trình duyệt Web hiển thị nội dung và hình ảnh các file Flash Multimedia Các úng dụng CỦQ Flash trong thiết ké Đa phuong tiện ■ Thiết kế logo (Hình ảnh minh hoạ). ■ Thiết kế banner. ■ Thiết kế ảnh nền. ■ Thiết kế Animation và 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 này chúng ta sẽ tim hiểu về: ■ Cài đặt và khởi động chương trình. • Cách sử dụng các menu lệnh. ■ Cách sử dụng bảng công cụ Tool Box. ■ Cách sử dụng các bảng tham số thuộc tính đối tượng và các cửa sổ Panel. 1.1. Vôu cồu cđu hình hệ thống để càỉ đột và đìọụ chuong trình Cấu hình phần cúng càng cao càng tốt vi ỉdii bạn thiết kế một file với dung lượng lớn nó sẽ làm bạn giảm bớt thời gian chờ đợi test và load file. Hệ điều hành Windows (tốt nhất là Windows XP). Ngoài ra bạn cài đặt thêm chương trình bổ trợ cho việc play và xuất file có đuôi .MOV như chương trình Quicktime. Khởi động và chạy chưoTig trình. Muốn chạy được chưoTig trình Flash thì trước tiên bạn phải cài đặt chương trình sẵn trên máy tính. Sau khi được cài đặt, biểu tượng của chương trình ứiường nằm trên màn hình Desktop và xuất hiện frong tìianh menu Start nên bạn chỉ 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) trong ứiuong trình UJ Mờ 1 file cố sẵn Hình 1.2 Sau khi khởi động, giao diện của chương trình Flash sẽ xuất hiện như hình minh hoạ 1.2 với cửa sổ Start up liệt kê các chức năng sử dụng ban đầu như tạo mới một file Flash hay mở một file Flash đã được thiết kế trên máy tính hay tạo một file Flash dựa trên mẫu có sẵn của 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 mới một file dựa theo gợi ý của thư viện Template bởi vì nó sẽ giúp người thiết kế dễ hình dung ra một file Flash mẫu được thiết kế và bố trí thế nào. Sau đó, ta có thể nhấn tổ họp 2 phún Ctrl + Enter để Preview (xem kết quả nội dung file). Để thực hiện được thao tác trên, làm theo các bước sau: Bước ỉ: Clìek chuột vào một trong các mục của bảng Create from Template. Ví dụ: Photo SlideShows (hình 1.3). 8 Hình 1.3 Bước 2: Xuất hiện cửa sổ mới New from Template (hình 1.3). Trong cửa sổ này, tại mục Templates sẽ liệt kê tất cả các mẫu tìiiết kế sẵn có trong mục được ehọn. Trong bảng này thư viện chương trình chỉ có một mẫu duy nhất tên là Modem Photo SlideShow và trong mục Preview cho phép bạn xem trước hình ảnh và kích cỡ của mẫu đang chọn. Nếu đồng ý với mẫu lựa chọn này bạn click vào nút OK hoặc nhấn phím Enter để kết thúc lệnh. Bưởc 3: Cửa sổ thiết kế của File mở ra như hình minh hoạ với một màn hình thiết kế và vô số các bảng thuộc tính (hình 1.4). __ 2. HƯỚNG o Ẳn VÀTHIẾrKẾ..A Hình 1.4 9 Nếu là người mới bắt đầu học Flash thì từng vùng công cụ, thuộc tính và thiết kế đổi với bạn là hoàn toàn mới mẻ. Nhưng ta có thể nhấn nút Play để chạy file Flash xem thử hiệu ứng cũng như chức năng của nó là gì. cỏ những cách để thực hiện như sau: ■ Ẩn tổ họp phím Ctrl + Enter hoặc ■ 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 quả màn hình sẽ hiện lên cửa sổ Preview file Flash Template đang được mở (hình 1.6). I........ »?. ....... ..........]- Cửa sổ Preview Hình 1.6 10 2. HƯỚNG DẨN VẢTHIỀtKẾ...8 Lun ý ta có thể tạo ra nhiều cửa sổ Preview cho nhiều file đang mở trong cùng một 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 của chương trình khi click vào chức năng Create New -> Flash Document sẽ hiện lên như 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, các hiệu ứng và thuộc tính Khung thiết kế chính 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 các menu lộnh Việc sử dụng các menu lệnh frong Flash hoàn toàn không phức tạp nếu chú ý tìiì sẽ nhận thấy nó được tập hợp và quản lý theo tìmg chức năng riêng biệt: 1. Menu File (hình 1.9): chuyên về quản lý tạo, mở, đóng, xuất các file tài liệu của 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 1 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 1 2 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 một file Flash mói. ■ Open: Mờ một file Flash tíii liệu gốc hoặc tất cả các file mà chương trinh này hồ trợ. ■ Open Recent: Mở các file Flash được thiểt kế gần đây nhất. ■ Open As Library: Dùng một tập tin đẵ có làm thư viện mẫu cho file đang thiết kế. ■ 12 Close: Đóng cửa sổ file Flash đang thiết kế. ■ Close AH: Đóng tất cả các cửa sổ các file đang thiết kế. ■ Saves: Lưu file Flash đang thiết kế. ■ Save As: Cho phép lưu mới một file tài liệu gốc Flash. ■ Save As Template ... : Luti file Flash thành một template lưu ữong thư viện mẫu của chưcmg trình. ■ Flash. Revert: Quay lại bản được lưu cuối cung của file tài liệu gốc ■ Import: Nhập các tập tin dạng âm thanh, bitmap, phim .Mov và những tập tin khác. ■ jpg-)• Export; Xuất các file phim (.swf, .mov...), các file ảnh (.gif, Publish Setting: Thiết lập các thuộc tính cho các file được xuất ra. • Publish Preview; Xem trước các tập tin trước khi xuất ra. Muốn xem danh sách các tập tin trước khi xuất ra cần phải thiết lập trước ữong Publish Setting. ■ Publish: Xuất các file được kiểm chọn trong Publish Setting.Lưu ý là tất cả các file ĩiày mặc định đều nằm chung trong thư mục lưufile tài liệu gốc Flash. • Page Setup: Thiết lập các tùy chọn cho việc in ấn. • Print: In nội dung file đang được mở. ■ Send; Gán file đang mở vào một bức thư điện tử. • Exit: Thoát khỏi cửa sổ chương trình Flash. 2. Menu Edit (hình 1.10): chuyên về quản lý soạn ứiảo, chỉnh sửa, tìm kiếm... các đối tượng trong của sổ thiết kế. Ngoài ra nó còn chứa các công cụ cho phép thiết lập lại các phím và lệnh điều khiển trong chương trình. • Undo: Hủy bỏ một iệnh hay chuỗi thao tác vừa thực hiện. ■ Redo: Thực hiện lại một lệnh hay nhiều lệnh vừa bị hủy bỏ. ■ Cut: Cắt nội dung đang chọn và chuyển nó vào bộ nhớ clipboard. ■ Copy: Sao chép nội dung đang chọn và chuyển nó vào bộ nhớ clipboard. 13 ■ Paste: Dán nội dung hiện thời của clipboard vào vùng cửa sổ thiết kế đang mở. ■ Paste in Place : Sao chép nội dung hiện thời của clipboard vào đúng vị ữí cũ của đối tượng được chọn. ■ Paste Special: Dán nội dung từ các chương trình khác. ■ Clear: Xoá các mục được chọn trên khung làm việc. ■ Duplicate: Tạo ra một bàn sao của đối tưọng đang được chọn trên cửa sổ thiết kế. ■ Select All: Chọn tất cả các đối tượng đang nằm trong cửa sồ thiết kế. ■ Deselect All: Bỏ chọn tất cả các đổi tượng đang được chọn. ■ Find and Replace: Tìm kiếm và thay thế các đối tượng trong cửa sổ thiết kế. ■ Find Next: Tiếp tục tìm kiếm với đối tượng đang được chọn. ■ Timeline: Sao chép, cắt dán, xoá, di chuyển các frame đang được chọn lựa. ■ Edit Symbol: Sửa symbol đang được chọn trong một khung làm việc mới. ■ Edit Selected: Sửa đối tượng đang được chọn trong một khung làm việc mới. ■ Edit in Place: Sửa Symbol đang được chọn trong cửa sổ của Scene đang chứa nó. • Edit AU: Làm cho tất cả các đối tượng hiện tại đều có thể chinh sửa được. ■ Preference: Thiết lập lại các chế độ về hiển thị thiết kế, màu sắc, định dạng trong chương trình. • Customize Tools Panel: Thiết iập các công cụ thiết kế trong Toolbox. ■ Font Mapping: Thiết lập các đường dẫn tới Font chữ đang hiển thị bị lỗi. ■ Keyboard Shortcuts: Thiết lập các phím tắt giúp người thiết kế sử dựng chưcmg trình nhanh hơn. 14 ắííicror^ÌHÍ» FtasW Bíisic 8 - |\intitíeđ'1 *3 p Éciỉt Vì&ỷt Eci\t Vteyv File in In s e rt M odify Text Undo Select None R ep eat Select None C tri-f-2 Paste in C en ter ctrl-f*v Commands Cơh Ctrl-+-Y £3 Ố o Paste S p ec ia l... «>■ m Find and R eplace Find N ext V i ị C t r l+ F F3 Tim eline Cc c t r l- i-u P re fe re n c e s ... Custom ize Tools Panel, i . Font H a p p in g .., K eyboard S h o rtcu ts... Op in: Hình 1.10 3. Menu View (hinh 1.11): chuyên về quản lý các cửa sổ hiển thị, độ Zoom. Ngoài ra nó còn cho phép hiển thị các chế độ hỗ trợ thiết kế như thanh thước kẻ (Ruler), lưôi (Grid), các đường Guide... giúp cho người thiết kế có thể căn chỉnh dễ dàng các đối tượng trong bản thiết kế. Macromedia Fla sh Basic 8 [Untitied4^ File Edit View Zoom In 2oom Out Magnificatlcn h m ỵ p 0 Text Commands Control Window Help ctrl+« Ctrl4- Work Area ^Rulers Grid Guides Snapping □ (ậ ' 25 ...... ^ ự scene X Prevtew MoHe A A o Modify Qoio Took H Insert 'i Ctrl+Shift-l'W Ctrl+AltfShift+R ■ ►^ ►' {•] i Hide Edges I2.afps .... I1PỌ, 0.0s .< m. View a Colors y z 8: . '^ J E _ H in h 1 .lt 15 ■ Go to: Di chuyển đến các khung (frame) và cảnh (Scene) của file đang được mở. ■ Zoom In: Phóng to kích thước hiển thị cửa sổ file Flash đang được mở. ■ Zoom Out: Thu nhò kích thước hiển thị cửa sổ file Flash đang được mở. ■ Magnification: Thiết lập các tìiy chọn kích thước cửa sổ file Flash đang được mở. ■ Preview Mode: Chọn các vùng hiển ứiỊ thiết kế khác nhau với các đổi tượng. ■ Work Area: Hiển thị hoặc ẩn vùng làm việc. ■ Rulers: Hiển thị hoặc ẩn thanh thước ■ Grid; Hiển thị hoặc ẩn các ô lưới. kẻ ngang và dọc. ■ Snap: Bật hoặc tắt các chế độ bám dính. Snap là tínhnăng bám vào các ô lưới hoặc các đối tượng khi đang vẽ hoặc di chuyển. ■ Hide Edges: Ẩn lưới lựa chọn ữong khi đối tượng vẫn đang được chọn. ■ Show Shape Hints: Chỉ ra noi mà các giải thích hình dạng được đặt trên đối tượng. 4. Menu Insert (hình 1.12): cho phép chèn các đối tượng và các hiệu ứng thiết kế như: Symbols, thanh thước Timeline quản lý các lóp (Layer), các chuyển động (animation) cùa các đổi tượrtg. Ngoài ra còn chèn thêm các cảnh (Scene) khác nhau vào một file thiết kế. ■ New Symbol: Chèn các Symbol mới vào file Flash đang thiết kế. ■ Timeline: Chèn thêm các lóp (Layer) hoặc khung hình (Frame) vào file Flash đang tìiiết kế. ■ Timeline Effect: Chèn các hiệu ứng đặc biệt về chuyển động gán vào các đối tượng trong cửa sổ file thiết kế. ■ 16 Scene; Chèn thêm nhiều khung cảnh vào file đang thiết kế. Macromedia Flash Bask 0 - [Untitled-1 File Edit View Insert Modify Text New Symbol,.. T ools Commands Control Ctrl+f=8 Timeline ĩim eỉine Effects 13 ^ / p Scene ur J rr A o □ ế ^ iS> ¿7 tP-i'i-O Jlx ^ il£ 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 chỉnh sửa thay đổi các thuộc tính và hiệu ứng của các đối tượng. Ỡ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 % / 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: Chỉnh sửa, thiết lập tiêu đề, kích thước, màu nền, tổc độ chuyền động cùa các frame và đơn vị hiển ihị cho thanh thước Timeline. 3 HưÔNGDÀN VATHIÈTKỀ , A 17 ■ Convert to Symbol: Chuyển đổi thuộc tính một đổi tượng thành các đổi tượng Symbol khác. ■ Break Apart; Ghuyển đổi một đối tưọTig từ Symbol, Group, biừnap thành cáe đối tượng ảnh dạng vector. ■ Bitmap: Chuyển đồi và tách các đổi tượng ảnh bitmap thành các đối tựợng ảnh riêng biệt. ■ Symbol; Chỉnh sửa các đối tưọng Symbol (Movie, Burton, Bitmap) ■ Shape: Chỉnh sửa các đối tượng ảnh dạng vector. ■ Combine Objects: Các chế độ chọn lựa iiên kết các đối tượng trong cửa sổ thiết kế. ■ Timelữie: Chỉnh sữa và ứiay đổi lại các Frame, Key Frame và cảc lóp. ■ Timeline Effect: Chỉnh sủa và thay đổi lại các hiệu ứng gán cho các đổi tượng ảnh. ■ TransfoiTn; Chinh sửa vỊ trí, hỉnli dạng, kích thước các đối tượng thiết kế. ■ Arrange: Sắp xếp lại các vị ữí và thứ tự của các đối tượng ảhh trên cùng một lớp (I.ayer). ■ Align: Gióng và căn chỉnh vị trí các đối tượng với nhau trên cửa sổthiếtkế. ■ Group: Nhỏm các đổi lượng đang được chọn iại thành một nhóm. ■ Ungroup: Hủy bỏ nhóm đang đưgc lựa chọn. 6. Menu Text (hình 1.14): quản lý các công việc liên quan đến đối tượng đạng chữ: Chinh sửa, căn chỉnh, định dạng các thuộc tính của các hàng, đoạn chữ. .. ■ Font: Chọn kiểu font chừ thiết kế. ■ Size: Kích cỡ font chữ. ■ Style: Hình dạng chữ. ■ Align: Canh chỉnh vị trí của một dòng hay một đoạn chữ. ■ Letter Spacing: Khoảng cách giữa các chữ trong một câu, một dòng hay mộl đoạn. 18 3. HƯỚNGOẨMVÀTHIẾTKÈ 8 ■ Scroilable; Tạo cáe text box cuốn. ■ Check Spelling: Kiểm tra lỗi chính tả trong soạn thảo Text. ■ Spelling Setup; Lựa chọn kiểu ngôn ngữ và các thiết lập kiểm tra các lỗi trong soạn thảo Text. m M ac ro n fó d ia F im IVB a s k 0 - [Ü n title d - 2*] I 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 spẹiỉing... 24 Spelling Setup... 36 48 (fy # Í' 72 ö -fi-o 96 120 View ■ừ Q, Hình 1.14 7. Menu Command (hinh 1.15): Ket nối các file JavaScript (cỏ phần mở rộng .jsfl) và chạy chương trình. Ngoài ra nó còn cho phép lưu lại và quản lý các lệnh vừa thực hiện. # MicTome^la Fla^ B^^ File Edit View Insert Modify Text ■ ^' , '' Goiitmpids ^ Window Help ^ Manage Saved Commands,...• J ^ Control Get More Commands..,- I Run Command. .. No Commands Found / p ế A Ỡ □ G ? Layer 1 o â í Đ D: % í-} 1 12.0 fị)S Hình 1.15 ■ Javascript. Manage Saved Commands: Quản lý các lệnh đã được gọi từ file 19 ■ Get More Commands: MỞ để nhập một JavaScript vào file Flash đang mở. ■ Run Command: Chạy lệnh từ file Javascript được gọi vào. 8. Menu Control (hình 1.16): điều khiển các thao tảc liên quan đến việc chạy và điều khiển cảc Player để chạy preview các file flash. File E dt View Insert Modify Timeiine 0 - 3 / Text ^ CcMĩimẳíìds "cS^roi Window H ^p , Scene 1 • â n ĩ p ỐA o ạ Test Movie C trl+Enter Diebug Movie C trl+ Shift+ E nter Test Scene C trt+ A lt+E nter D elete ASO Pites (?> fS> J* a f? Q. Colors tPACl / Delete ASO Files a n d Test Movie .....................-■ l o o p Playback Play < - Xem thêm -