Ebook hướng dẫn và thiết kế website bằng macromedia flash phần 2 TS hoàng vân anh

Chương HUỚNG dAn Vlếr cAc Mfi «aiO N bAn Trong phần thực công việc sau: Các khái niệm ngôn ngữ lập trình AS Sử dụng bảng Action Panel việc viết AS Sử dụng bảng Movie Explorer hỗ trợ việc lập trình Viết actions cho Frame, Symbol nào? Các tập ví dụ Các nội dung trước giới thiệu cách viết Actionscript thể Chương hướng dẫn bạn hai cách viết Script đoTi giản mà hiệu cách viết gắn Script với đối tượng symbol khung thiết kế cách thứ hai gắn Script điều khiển frame thước thời gian Timeline Đó sở để bạn nắm kiến tìiức để làm tập phía sau Nhưng trước bắt tay vào làm tập ví dụ ta cần làm quen sổ khái niệm đối tượng Action Script 4.1 Các khái niệm ngôn ngữ lộp trình fìS Actions: dãy lệnh nằm ừong file SWF Mỗi file SWF chứa từ đến nhiều lệnh tùy tìieo chức ứng dụng xây dựng Nhiệm vụ điều khiển frame (khung hình), label (nhãn), đối tượng chạy Boolean: biến gán kiểu Boolean bao gồm hai giá frị ứiam số True (đúng), False (sai) Classes : lớp mà người lập trình AS tự định nghĩa Nó kiểu định nghĩa riêng dành cho lớp đối tượng Đê định nghĩa class (lóp), sử dụng từ khoá class tạo file AS 63 Events', actions (hành động) hay gọi kiện xảy file SWF chạy Expressions: chứa toán tử toán hạng Ví dụ phép toán X + X toán hạng phép tính + toán tử Function (các hàm) : Mỗi hàm bao gồm khối mã lệnh sử dụng lại Các hàm gán với tham số đỏ trả kết giá trị Identifers: tên gọi sử dụng để biến (variable), thuộc tính (properties), đối tượng (object), hàm (function), cách thức (method) Ký tự tên gọi phải chữ cái, dấu gạch (_), hay dấu dollar ($) Instances: đối tượng phụ thuộc vào lớp Mỗi đổi tượng loại lớp chứa tất thuộc tính phương thức hoạt động lớp Instance names- Là tên gọi Symbol file FLA (hay file SWF) Các tên người thiết kế đặí cho đoạn phim (movie) nút (button) Properties Panel Và tên chúng sử dụng ữong đoạn mã Script Mồi đối tưọng gọi instance sinh tò đối tượng symbol gốc Mỗi đối tượng gốc có nhiều instance instance nằm file FLA chúng có tên Và không đặt trùng tên với đối tượng khác Keywords: Là từ khoá có ý nghĩa đặc ưưng riêng khác Ví dụ từ khoá Var cho phép định nghĩa biến Methods: Là hàm kết hợp với lớp Khi sử dụng chúng, người sử dụng việc truyền tham sổ vào Objects: đối tưọng xây dựng để thực công việc trình lập trình Properties- Các thuộc tính đối tưọng Variables: Các biến sử dụng để lưu trữ liệu 4.2 Sử dụng bỏng Rction Ponel việc viết RS Bảng Action bảng cho phép người thiết kế viết sửa mã Script để gán vào đối tượng hay frame Bảng 64 chia thành ba khu vực khác nhau: Action Toolbox, Script Pane Script Navigator Trong bảng Action Panel có thêm số nút chức gợi ý, tìm kiếm, thay thế, hiển thị số hàng đoạn script giúp bạn tận dụng hỗ trợ để viết đoạn Script nhanh hiệu Để hiển thị bảng Action Panel (hinh 4.1), vào menu Windows Development Panels —Action nhấn phím F9 Script pane: khu vực để viết đoạn mã chương trình Có hai cách để viết mãchưomg trinh: HƯỜNG DÁN VA TH ^TK I-.A 65 ■ Cách : Sử dụng chuột trái kéo thả gắp lệnh từ khu vực Action Toolbox vào khu vực Script Pane (hình 4.2) ActionScrÌpt 1.0 & 2.0 w gotoAndPlay ; Global Functions [¡0 Timelỉne Control (ẵ) gotoAndPlây goloAndStcfflu |s° to the specified ^rame and pìaj^ @ nextScene @ play i s 121 Current Selection B ^ Layer i ỉ France Scene ịjj Layer : Frame Hình 4.2 • Cách : Viết lệnh trực tiếp vào vùng Script Pane lưu ý với cách viết Mặc dù câu lệnh script không phức tạp khó nhớ phạm lỗi nhỏ nhầm lẫn chữ in hoa chữ in thường câu lệnh khiến cho ừình duyệt không dịch Idiông thể thực II ▼ Acliofis - PrlHmé AcUonScripỉ 1.0 8« 2.0 I ỡ obal Functions f|D Timeilnt Control @) goloAndPlay gotoAnđPlay S] of (S gotoAr»dPiây( frame )j gotoAndSlop @ nextFrame nextScene @ pliy íS.PiaỵẸĩ,#™,bi ị '-1 ^ I ■ „ Current Seledỉon Lay«r ! Frame Scène n ỉf| Layer l ! Frimft Hình 4.3 Cách viết Script 66 HƯỚNG OẲH WÀ ỉỵiỆ T KÊ.„e Có đặc điểm chưong trinh hỗ trợ việc lập trình bàng cách gợi ý tham số câu lệnh bạn gõ lệnh Ví dụ hình 4.3, với câu lệnh cho phép khung hình hiển thị chuyển đến khung hình người lập trình tự thiết !ập câu lệnh này: gotoÁndPlayO chướng trình gợi ý tham số sổ frame số thứ tự frame nằm Scene Nhưng bạn viết nhầm câu lệnh dòng gợi ý không lên # ; ; i dí %; Ĩ:Ị' 12.0 fps ^0.0s : S ẽ “ &2.0 ctions : irl Ẽ 8^ ■ \scrip u G o to Ấ ĩìđ P l a y Gontrd sAndPUy ãAndStop tPramé Scene SelecUon Xjwr„t.a H/n/j 4.4 Cách viết Script sai Điều ứtực khỏ khăn làm quen với ngôn ngữ AS, nhiên hoàn toàn cỏ thể khắc phục khó khăn ta kiên trì luyện tập viết lệnh với bảng Action Toolbox trước Sau thời gian bạn sễ có kinh nghiệm nắm quy tắc viết lệnh Action toolbox: Bảng náy chứa toàn lệnh phép viết ưong Flash Có thể coi giống từ điển lệnh Action toolbox quản lý theo hình thư mục Có nhiều hạng mục khác phân chia theo tửng chức riêng (hình 4.5) Trong mục bao gồm nhiều lệnh câc lệnh cho phép bạn có ứiể kéo ứiả vào vủng Script Pane 67 ® ± 7 ĨĨJ ị V ị '1 (p3 Global Functions / ( p j Timeline Control @ goỉoAnđPlay — @ goioAndsiop @1 nexlFrame  Các hạng mục lệnh phân chia theo chức riêng biệt 12.0fps Õ3Ĩ iic tlo r is - P rỡ íiíc ■AdlonScript 1.0 6« 2.0 t ệ : D □: % [•; ĩ @ nexỉScene @ play I - ^— i li g o to A n d P la y ( Ị fu n c tio n s that control movie playbackj (2) prevFr^me / @ prevScene @ stop @ stopAllSounds Browser/Hetwork ^ Printing Fundions ^ Miscellaneous Functions ^11 MathemaUcâl Functions 1,1,.M I - ^^¿SmiCSiUn Current Seledion Layer ! Frame [a tayerl Ig U yer 1: Hinh 4.5 Code Hints: dòng chữ nằm bảng màu vàng kèm theo thao tác vối lệnh bàng lệnh tham số kèm đổi tượng ta gõ vào câu lệnh hay tên đối tượng Nó dòng chữ gợi ý cách viết sử dụng Gác tham số cho lệnh thao tác Tuy nhiên chương ữình không dòng Code Hints thiết lập theo cách sau đây: ■ Chọn menu Edit - Preferences ■ Click vào Actionscript Tab sau chọn chế độ enable (bật) hay disable (tắt) chức hiển thị Code Hints Hình 4.6 khoanh vùng có lựa chọn Code Hints 68 Preferences Category ActtonScript General ActionScrlpt Auto Format Clipboard Drawing Text Warnings Editing: 0Au¿acúattiUndentation 'ab size: Code hints seconds Font: Courier New iv j| iO □ Use dynamic for^ mapping Open/Import; UTF-8 Encoding vj Save/Export: UTF-8 Encoding ^ Reload modified Flies: Prompt Syntax colors: Code coloring Foreground; H Background: Keywords: H Comments; ^ Hình 4.6 Sử dụng chức đem lại nhiều lợi ích Nó giúp bạn lập ừình nhanh hiệu ỂỊuả Sau minh hoạ cho ữợ giúp Code Hints (hình 4.7, 4.8) V ▼ Actimis - Frame V ActionScripl 1.0 & 2.0 (|lj TimeBne Contrd gotoAndPliy goloAndStop ^ n«xtFr»m« ^ nexiScene @ pUy prevFrdme prevScene ^ slop ^ stopAllSounds ^ Browser/Hetwork fscommand @ geỉURL ỉoâdMovie ^ íoadMovieNum — IgetURK url, window, method); V _— L v e r ! Fram e líl t-ayer I : UyiV'i'i Hình 4,7 69 tio fis - F r a iw p :cript 1.0 & 2.0 Timeline Control gotoAndPlay @ press @ @ @ @ @ @ gotoAndStop nexlFrame (ẵ) nextScene @ piay @ prevFrame release reledseOutside roliOver roHOut dragOver @ dragOut @ keypress " (2) prevScène @ stop k L @ slopAllSounds Browser/Network @ fiscommand @ getURL @ loadMovíe (S) loadMòvieNum W ▼ - - Hình 4,8 Script Navigator: Trong bảng Action Panel, sử dụng để ửiể mối liên kết đổi tượng ữong file Flash đoạn mã Script gắn kèm (hình 4.9) Nếu ữình kiểm tra hay muốn sủa lại đổi tượng đoạn Script, ta click chuột vào tên tiêu đề đối tượng 10 15 so 20 ss ịềSíaaiỊ ũ D ta: i-ì í 124) (ps O.OÍ layer >:''1 -> Frama -> progressBar Hình 4.11 Neu muốn truy cập để sửa đoạn mã bạn cần ứiao tác click đúp phím trái chuột Bảng Action Panel tự động đoạn code cho phép thay đổi, thêm, xoá đoạn mã dễ dàng •8: > ^I 80 '~ỏnCUpívẽnV Tìõãăr ”«' to t« l • ^ lie CTOkrt onCl»pEv«nt (ent«rFĩ«ine) i lo«dcoc «eti)y e« » L o o cl c> (|; » e r c e n c • i n t ( iữ(Mỉ«d i t o t « l • 10 } ; texr “ ' ♦ percent ♦ cout tfũc.k»AfidlPỉay(2) ; 5»! íỉ- SHÍ I ợ o to Ằ u d S to p (p e e c e n c ỉ •• I f (lo a d e d — e o td i) ) é ^ irv«ĩeC Mỡvteí Hình 4.12 + 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[...]... v^tớk-nm^ AcKonScri^ t.o & 2. 0 Vl*w o Q [Q OớôjKècdor; (MCô,) * S50 Frame) rMe: ) butôằmb tpằ |> RUbtumU: ptoybackAi ^H tetA ie ! ôô>*ô ô*rớ ' Sóằ; I S50 X ^ ttoỏit ; Betkyooirf; ô>ô=8 * ActớonScrtpt; Fianwratô: 12 2... vit Script cho hai i tng m yn t hiu qu cao khi bn mun lm Project hoc eỏc bi tp ln v Website, ! cỏc i tng sau õy: Vit Script cho Frame Frame cú ngha l khung hỡnh Trờn thanh thc thi gian Timeline cú cha mt dóy cỏc khung hỡnh cú ỏnh s th t Khi cỏc on Movie Glip (hay cn gi nụm na l cỏc on phim) chuyn ng, ngi ta s dựng thanh thc ny biu t trng thỏi thi gian v tc chuyn ng cựa on phim ú Thng khi vit script ... FOCUS Website bỏn sỏch online Bi thc hnh Hng dn thit k Website trung tõm ngoi ng FOCUS Quay tr v phn mm Flash v thit k mt Website bng phn mm Jiy nh th no? Ta s ly mt vớ d im Project l thit k Website. .. 1.0 & 2. 0 Timeline Control gotoAndPlay @ press @ @ @ @ @ @ gotoAndStop nexlFrame () nextScene @ piay @ prevFrame release reledseOutside roliOver roHOut dragOver @ dragOut @ keypress " (2) ... gotoAndPlayO; 1 12 Chng òAi THC hAnh thit K uueesiTe TRONG fWSH '1'rong chng ny chỳng ta s tin hnh thit k hai mu Website, mi bi thc hnh, bn s lm quen vi cỏch t chc, phõn b v liờn kt d liu khỏc Website