Hướng dẫn học Flash trong 24 giờ

150 trang yendo 7620

Download

Bạn đang xem 20 trang mẫu của tài liệu "Hướng dẫn học Flash trong 24 giờ", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

huong_dan_hoc_flash_trong_24_gio.pdf

Nội dung text: Hướng dẫn học Flash trong 24 giờ

z  Hướng dẫn học Flash Trong 24 giờ
Giờ thứ 01: Làm quen với AS, Your First Look at AS AS là một ngôn ngữ lập trình được xây dựng trong Flash. AS giống như các ngôn ngữ khác như Javascript, C++ v.v. nhưng bạn không cần biết các ngôn ngữ khác để học AS (nếu có thì càng dễ hơn). Bắt đâu học AS, thì chúng ta coi thử AS là gì, làm được những gì và có quan hẹ gì với các chức năng khác của Flash. Trong bài này, bạn sẽ tìm hiểu coi AS ra đời như thế nào, xem cách viết AS làm sao, tìm hiểu AS làm được những gì và sau sau cùng là xác định được nơi lưu trữ AS ở trong Flash. Để đi sát nghĩa và tiện cho sau này, mình sẽ không dịch một số từ ngữ ra tiếng việt như script, movieclip v.v. Script là gì? AS là ngôn ngữ lập trình, với các lệnh sai khiến Flash movie làm việc theo đúng những gì mình viết (chỉ có mình viết sai chứ computer không làm sai ). Phần nhiều thì AS chỉ làm việc trong môi trường của Flash, tuy nhiên AS cũng có thể gửi lệnh cho browser, hệ điều hành v.v. Script có thể ngắn gọn vài chữ hay cũng có thể dài cả trăm trang. Script có thể được việt gộp lại một chổ hay cũng có thể viết rãi rác khắp nơi trong movie. Xuất xứ của AS AS rât giống ngôn ngữ C++, Java, javascript .v.v và được dựa trên tiêu chuẩn do ECMA (European Computer Manufactuers Association) lập ra gọi là ECMAScript. Nhiều người hiểu lầm rằng AS dựa trên Javascript, nhưng thực chất cả 2 đều dựa trên ECMAScript. Lúc đầu viết script trong Flash rất đơn giản và cho tới Flash 4 mới đuợc phát triển nhưng cũng vẫn còn "thô sơ" với những vòng lặp và các điều kiện "if else". Cho tới Flash 5 thì dân Flash mới có thể lập trình và gắn liền script với các yếu tố trong movie. . Sang tới Flash MX thì AS đã trở thành ngôn ngữ lập trình toàn diện với hơn 300 câu lệnh, hàm .v.v Nhận biêt AS AS đơn giản là những câu lệnh được viết bằng tiếng Anh (vì lẽ này mà mình sẽ không dịch các tư tiếng Anh liên quan đến AS, và một phần thì mình không giỏi thuật ngữ computer hay tiếng việt cho lắm) và các phép tính và dấu câu. Ví dụ sau: ActionScript on (press) { gotoAndPlay ("my frame"); }
Bạn có thể giải nghĩa đoạn mã trên bằng cách tìm hiểu các từ chính trong đó. Chữ "press" gới ý răng người dùng đang kích chuột vào một cái gì đó, (và trong trường hợp này là cái nút) Chữ kế tiếp "gotoAndPlay" do 4 chữ "go to and play" gộp lại, gợi ý rằng AS ra lệnh cho Flash tớimột điểm nào đó trong movie và bắt đầu chơi từ điểm đó. AS có thể làm những gì? Flash movie gồm có các scence (cảnh), và mổi cảnh sẽ có 1 timeline (thời giản biểu???) và timeline sẽ có các frame (khung) bắt đầu từ số 1. Thông thường thì Flash sẽ chơi từ frame 1 cho tới frame cuối của scence với tốc độ cố định và dừng lại hay lặp lại từ đầu tuy theo người làm Flash. Mục đích chính của AS là thay đổi thứ tự trong cách chơi của Flash. AS có thể dùng ở bất frame nào, hay chạy ngườc trở lại frame trước hay nhảy vài frame rồi chơi tiếp. Nhưng đó không chỉ là những gì AS có thể làm được. AS có thể biến film hoạt hình của Flash thành một chương trình ứng dụng có sự tương tác của người dùng. Dưới đây là những cơ bản mà AS có thể làm: • Hoạt hình: Bạn không cần AS để làm hoạt hình, nhưng với AS thì bạn có thể tạo những hoạt hình phức tạp hơn. Ví dụ, trái banh có thể tưng xung quanh mành hình mà không bao giờ ngừng, và tuân theo các định luật vật lý như lực hút, lực ma sát, lực phản v.v Nếu không có AS thì bản cần phải dùng cả hàng ngàn frame để làm, còn với AS thì chỉ 1 frame cũng đủ • Navigation (hông biết dịchlàm sao cho hay ): thay vì movie chỉ chơi từng frame 1 theo thứ tự thì bạn có thể dừng movie ỏ bất cứ frame nào, và cho phép người dùng có thể chơi ở bất cứ frame nào .v.v • Thu nhập thông tin từ người dùng (user input): bạn có thể dùng AS để hỏi người dùng 1 cầu hỏi, rồi dùng thông tìn đó trong movie hay có thể gửi cho server hay làm những gì bạn muốn. • Thu nhập thông tìn từ các nguồn khác: AS có thể tương tác với server và lấy các thông tin từ server hay text file • Tính toán: AS có thể làm bất cứ phép tính nào mà toán học cho phép • Thay đổi hình ảnh trong movie: AS có thể thay đổi kích thước, màu sắc, vị trí của bất cứ movie clip (MC) nào trong movie flash của bạn. Bạn có thể tạo thêm phiên bản hay xoá bới phiên bản của MC với AS • Phân tích môi trường của máy tính: Với AS bạn có thể lấy giờ từ hệ điều hành hay địa chỉ đang chơi movie Flash đó. • Điểu khiển âm thanh trong flash movie: AS là cách tốt nhất để điều khiển âm thanh trong Flash,AS có chơi chậm, chơi nhanh, ngừng, quay vòng .v.v bât kỳ âm thanh nào trong Flash. Phát triển các khả năng của AS Điều quan trọng nhất mà AS có thể làm cho bạn là những gì chưa ai nghĩ tới Với AS và trí tưởng tượng và óc sáng tạo của bạn thì không có gì là không thể xảy ra với AS được. Mục đích của các sách, và của VNFX là hướng dẫn bạn hiểu biết về Flash để từ đó
bạn có thể tự dùng nó để làm ra những sản phẩm tuyệt vời mà không ai có. Viết AS ở đâu Câu hỏi đầu tiên những ai tìm hiểu AS thường hỏi là "Viết AS vào đâu?". Flash có một môi trường làm multimedia khá phức tạp. Nếu bạn đã dùng Flash rồi hay đã đọc qua các hướng dẫn đi kèm với Flash, thì bạn đã biết các yếu tớ cơ bản như timeline, key frame v.v. nêu bạn chưa biết thì mình khuyên bạn nên tìm hiểu trước rồi tiêp tục ở đây. Ơ trong mục Flash Tổng Quá, VNFX có post link để download 3 cái CD hướng dẫn cơ bản cho người chưa bao giờ dùng Flash. Viết AS ở time line AS có thể viết vào key frame ở bất cứ timeline nào. Để làm như vậy, bạn chọn key frame ở trong timeline trước rồi bạn mở Action Panel ra (có thể nhấn F9) để viêt hay xem AS đã được viết ở đó. Mình khuyên bạn nên dùng Action Panel dưới dạng Expert hơn là Normal, vì như vậy bạn sẽ học được nhiều và lẹ hơn. Khi viết AS vào key frame như vậy thì AS ở key frame đó sẽ hoạt động khi mà Flash chơi tới key frame đó. Ví dụ như lệnh AS stop() được đặt ở key frame 5 thì Flash chơi tới key frame 5 thì sẽ dừng lại cho tới khi có lệnh khác. cách viết này gọi là viết vào time line Một trong những lý do viết script vào time line là khi bạn muốn dùng function (hàm), vì function cho phép chúng ta tái sử dụng đoạn mã đó từ nhiều nơi, nhiều level khác. Viêt AS ở nút Các phần tử của Flash movie được gọi là symbol (biểu tượng). thường thì symbol là các hình ảnh. Và có 3 loại symbol: button (nút), graphich (hình ảnh), movie clips(đoạn phim). 3 loại trên thì AS không thể viết liền với graphic, còn button và movie clip thì OK. Nút sẽ không có tác dụng gì cả nếu như không kèm AS lên trên nó. Muốn kèm AS vào nút thì chọn nút trên stage (sân khấu: diện tích của flash movie), rồi sau đó mở Action panel và viết vào đó như ta viết vào key frame. AS viết trên nút chỉ hoạt động khi chuột hoặc bàn phím tác động lên nút mà thôi Viết AS ở MC MC khác với graphic ở chổ MC được đặt tên khi mang vào stage, MC thường là hình ành động, và có thể có AS kèm theo MC. Để viết AS vào MC thì cũng tương tự như ta làm với nút. AS kèm theo MC có thể điểu khiển MC đó hay là các MC trong cùng một timeline hay các timeline ở ngoài movie Bài tập
1. Tạo một movie mới 2. tạo 3 key frames 3. Dung Flash vẽ mỗi hình khác nhau cho mỗi frame 4. Chạy thử movie (nhấn Control + enter) 5. Sau đó trở lại timeline, viết vào keyframe 2 đoạn mã : "stop();" 6. Cho chạy thử movie lần nữa 7. Và kỳ này bạn chỉ thấy Flash chơi tới frame thứ 2 thì ngừng, và bạn đã thành công trong việc viết AS : Giờ thứ 02: Sử dụng Action panel, Using the Script Editing Window Nếu dân đồ hoạ coi Timeline là nhà thì dân lập trình với AS coi Action Panel là nơi cư ngụ của mình, tại đó dân AS có thể thay đổi, viết tất cả các lệnh. Vì vậy rất quan trọng là bạn có thể sự dụng quen thuộc Action Panel Flash MX sử dụng các panel để giúp bạn có thể lấy các thông tin về movie bạn đang làm một cách dễ dàng. Khi bạn cài đặt và chay Flash lần đầu tiên, Flash sẽ hỏi bạn muốn sử dụng Flash như thế nào và Flash sẽ xếp đặt các panel cho hợp lý. Bạn cũng có thể thay đổi cách xếp đặt theo ý của bạn. Nói chung bạn nên xếp đặt các panel của bạn làm sao cho thuận tiện cho bạn nhất, và cái này cũng cần có kinh nghiệm đó Mình dùng dual monitor, mình close hết các panel chỉ giữ lại 2 cái chính trên màn hình, mình kéo cái action panel và property panel qua một bên monitor, còn cái bên kia để cho cái stage, nếu cần mở panel nào thì mình dùng phím tắt để mở. Sử dụng Action panel có 2 cách: bình thường (normal) và chuyên dụng (expert). Khi mới chạy máy lần đầu thì Action panel được set dưới dạng bình thường. Ở dạng bình thường thì bạn không có thể đánh trực tiếp các câu lệnh, mà phải chọn từ các menu bên tay trái của panel. Với setup như vậy thì bạn không bao giờ phạm phải lỗi khi viết AS cả. Mình sẽ bỏ phần hướng dẫn dùng normal vì mình thấy dùng normal mode sẽ không bao giờ tiến được, dùng expert mode lúc đầu hơi mệt nhưng bảo đảm là các bạn sẽ học được mau và nhớ lâu hơn Sử dụng Action panel với expert mode thì bạn có nhiều tự do hơn, nhưng tự do đồng nghĩa với trách nhiệm nên bạn phải cẩn thật khi viết code. Từ normal mode chuyển sang expert mode thì nhấn phím tắt CONTROL + SHIFT + E, chuyển ngược lại thì dùng CONTROL + SHIFT + N (nhớ kích chuột vào action panel trước khi dùng phím tắt). Bạn có thể đổi từ Normal mode sang expert mode bất cứ lúc nào, nhưng đổi ngược lại thì chỉ được khi mà code của bạn không có lỗi. Action panel có popup menu (mũi tên chỉ xuống dưới, nằm ở góc phải của action panel) và trong đó có nhiều lệnh rất tốt cho bạn khi bạn dùng Action panel, nhất là đối với Expert mode. Bạn có thể tìm và thay thế bất cứ câu nào, chữ nào trong script của bạn. Phím tắt cho tìm kiếm là Control + F và cho thay thế là Control + H, nhấn F3 thì Flash sẽ tiếp tục tìm chữ, câu bạn muốn tìm.
Một lệnh nữa là "Goto Line" giúp bạn tìm được câu bạn muốn tìm. Lệnh "Check Syntax" sẽ rà soát script của bạn và tìm những lỗi cú pháp. Lúc mới tập viết AS, thì dùng nên thường xuyên dùng Chech Syntax để check lổi trong sctipt. Lệnh tiếp theo là "Auto Format" và "Auto Format Options" giúp cho bạn trình bày script của bạn cho dễ đọc hơn. Bạn có thể thay đổi màu sắc, font chữ v.v. cho script của bạn để cho bạn dễ đọc code hơn bằng cách vào Edit > Preferences > ActionScript Editor. Các phần còn lại của pop-up window cho phép bạn được xuất hay nhập AS dưới dạng text file và in script ra giấy. Tuy gọi là expert mode nhưng thực ra dùng còn dễ hơn là normal mode. Bởi vì dưới expert mode thi Action panel chẳng khác gì chương trình "note pad" hay "text pad". Bạn chỉ việc viết những gì bạn muốn vào đó. Khi dùng dưới expert mode, bạn vẫn có thể tham khảo các câu lệnh, các cú pháp của AS ở cái khung bên trái của Action Panel. Và nếu bạn tôn thủ một số quy tắt thì bạn sẽ sử được chức năng "Code Hint" của Action Panel, chức năng này tạo nên nhưng khung nhỏ nhỏ trong đó có những câu lệnh của AS đúng hợp quy cho bạn lựa chọn. Để trở thành một "cao thủ" về AS thì bạn không thể nào không nắm vững về Action panel được. Sau đây là bài thực hành nho nhỏ, giúp bạn làm quen với Action panel dưới expert mode 1. Tạo một movie mới 2. Chọn key frame đầu tiên (frame số 1) của layer 1 (mình không dịch chữ layer = lớp vì dễ trùng với class= lớp) 3. Mở Action panel (có thể dùng phím tắt hay vào trong phần Window > Action panel 4. Chuyển sang expert mode (dùng phím tắt hày vào trong pop-up menu của Action panel để đổi) 5. Vào chổ để viết AS 6. Viết đoạn code sau: ActionScript trace ("I am expert"); Khi bạn thử movie thì dòng chữ "I am expert" sẽ được hiện ra trong Output panel, và mình sẽ đề cập đến lệnh trace() vào những giờ tới
Giờ thứ 03: Học cách lập trình, Learning to program Lập trình có thể coi là khoa học và nghệ thuật. Vì vậy lập trình viên giỏi cần có 2 điều kiện kiến thức về ngôn ngữ mà họ dùng và tính sáng tạo, ít khi nào có trường hợp chỉ có 1 cách lập trình cho một đề án lắm. Trong quá trình viết AS, bạn sẽ tạo ra cho riêng mình một phong thái viết code khá đặc trưng. Có thể mới đầu bạn sẽ dùng phong cách viết code trong những bài viết này, rồi sau đó bạn sẽ từ từ chuyển sang phong cách của riêng bạn Thường thì khái niệm về các ngôn ngữ lập trình đều giống nhau, và trong bài này sẽ bàn về những khái niệm lập trình và làm sao áp dụng nó trong Flash Cách suy nghĩ của computer Thật ra computer dốt lắm chẳng biết suy nghĩ đâu, chỉ biết làm việc theo mệnh lệnh một cách không suy nghĩ. Vì vậy computer không bao giờ lỗi mà lỗi ở người viết lệnh sai khiến nó. Còn AS chỉ là một chuổi lệnh, chỉ thị cho computer, hay đúng ra là Flash phải làm những gì trong môi trường runtime (runtime environment). Khi viết AS thì bạn nên tự coi mình "ngu" như computer, và đọc lại những dòng lệnh AS và nghĩ tới kết quả của việc thi hành lệnh đó. Khi tự đặt mình vào vị trí của computer, bạn sẽ đoán được script của bạn sẽ làm những gì trong môi trường runtime, và bạn có thể thấy ra những lỗi mà bạn vô ý mắc phải. Khi mà bạn trở thành diễn viên tuyệt vời trong vai computer thì bạn cũng trở thành một lập trình viên tài ba. Lệnh, hàm, và phép tính Lệnh (command) là yếu tố căn bản của AS để chỉ thị Flash làm một hành động cụ thể. Lệnh được thi hành tuyệt đối trong các trường hợp khả thi. Ví dụ nếu như ta viết gotoAndPlay(5) để cho Flash tới frame 5 và chơi, nhưng nếu trong movie không có frame 5 thì lệnh không thể làm được. Hàm (function, mình sẽ dùng từ function nhiều hơn là hàm) là phần tính toán các phép tính và cho ra (return) một kết quả. Ví dụ hàm random() sẽ cho ra một con số ngẫu nhiên nào đó, hay hàm sqrt() sẽ cho ra giá trị bình phương của 1 số mà hàm nhận được truyền cho. Lệnh và hàm đều có thể được truyền cho 1 hay nhiều thông số (parameter, mình sẽ dùng từ parameter thay vì thông số), và những thông số đó giúp cho hàm và lệnh được cụ thể hơn. Ví dụ gotoAndPlay(5) thì 5 là thông số, nếu như không có thông số này thì lệnh "gotoAndPlay" sẽ không biết rõ phải nói Flash đi đâu. cũng như hàm sqrt() cũng cần có thông số để cho ra giá trị bình phương của số ấy. Sự khác biệt giữa hàm và lệnh chính là các phép tính. Phép tính thường là những dấu +, -, *, / hay là phép so sánh . Hàm có phép tính, lệnh thì không
Biến số Biến số (parameter) cần thiết trong mọi ngôn ngữ lập trình vì nó lưu trử thông tin về một cái gì đó trong chương trình. Biến số gồm có 2 phần: tên và giá trị. Đôi khi bạn chỉ cần lưu trử thông tin trong biến số một thời gian ngắn, ví dụ bạn muốn Flash thi hành 1 số lệnh 10 lần thì bạn cần đếm số lần mà Flash đã thi hành lệnh để có thể ra lệnh cho Flash ngưng ngay sau khi thi hành xong lệnh lần thứ 10. Nhưng cũng có lúc bạn cần phải lưu lại thông tin trong một thời gian dài hay trong suốt quá trình thời gian Flash chơi. Tên của biến số thường là một nhóm từ, hay cũng có thể chỉ đơn giản là 1 từ, hay 1 chữ cái. Thông thường tên của biến số nên rõ ràng dễ hiểu và nói lên được tính chất của thông tin mà biến số đang lưu trử. Ví dụ nếu bạn muốn lưu trử tên của người dùng trong biến số thì bạn nên đặt tên biến số đó là userName (mình nghĩ đặt tên tiếng Anh dễ hiểu hơn, vì tiếng việt không dấu cũng dễ bị hiểu lầm), bạn có thể đặt tên biền số đó là "n" nhưng quá ngắn, người đọc script của bạn sẽ khó hiểu, nếu đặt là name thì dễ trùng với các biến số hay từ khoá khác (_name là một đặc tính của đối tượng MovieClip) Khi viết AS, bạn cần lưu ý viết làm sao cho dể hiểu và dễ đọc. Và các lập trình viên quy ước tên biến số theo quy tắc sau: tên biến số luôn viết thường chữ đầu tiên, và viết hoa chữ cái đầu tiên cho các chữ kế tiếp, ví dụ userName, userLastName, userMotherMaidenName v.v. Lưu ý rằng chỉ các chữ cái và số mới được dùng để đặt tên cho biến số, và luôn bắt đâu tên bằng chữ cái. Có nhiều loại biến số để lưu trử nhiều loại thông tin, và ngay mỗi loại thông tin cũng có thể có nhiều loại khác nhau nữa. Như số (number) là một loại giá trị của biến số, và dưới nó còn có các loại khác như số nguyên (integer), số không nguyên (floating, double). Bạn cũng có thể dùng biến số để chứa các chuỗi (chuỗi gọi tắt cho chuỗi chữ cái), chuỗi có thể chỉ có 1 chữ cái, nhiều chữ cái hay là không có gì hết, tất cả các chuỗi sau đây đều hợp lệ: "ablsdfjksl", "a", " ", "". Khi viết một chuỗi thì cần dùng dấu ngoặc kép ("") để bắt đầu và kết thúc chuỗi. Trong các ngôn ngữ lập trình khác như Java, C++, hay ngay cả ActionScript 2.0 trong Flash MX 2004 thì bạn phải xac định trước loại thông tin nào bạn sẽ lưu trong biến số. Nhưng với ActionScript 1 (trong FlashMX) thì bạn không cần làm việc này. Ví dụ biến số userName lúc đầu chứa 1 chuỗi, nhưng sau đó lại chứa 1 số nguyên thì cũng vẫn hợp lệ. Ngoài chuỗi và số, còn có nhiều loại khác nữa nhưng chúng ta sẽ đề cập tới vào những bài sau. Điều kiện Trong những trường hợp chúng ta không biết nên ra lệnh cho Flash phải làm gì cho thích hợp với từng tình huống thì ta có thể dùng "điều kiện" để ra lệnh cho Flash.
Ví dụ nếu như bạn ra lệnh cho Flash không cho người dùng coi một đoạn phim trong Flash nếu như user dưới 18 tuổi, nếu user trên 18 tuổi thì hãy chơi đoạn phim ấy. Trước tiên, Flash sẽ so sánh số tuổi của user với số 18, nếu như số tuổi của user thoả mãn điều kiện chúng ta đặt ra thì Flash sẽ có 1 giá trị true từ phép so sánh trên, và ngược lại sẽ là false Điều kiện sẽ luôn luôn là đúng (true) hay sai (false). Một giá trị chỉ có đúng hay sai thì được gọi là boolean. Sau khi thực hiện phép so sánh và có được kết quả từ phép so sánh trên, Flash sẽ chọn một trong 2 giải pháp do chúng ta đưa ra cho từng trường hợp. Đôi khi chúng ta cần có nhiều điều kiện hơn chỉ là đơn giản "true" hay "false", ví dụ như bạn muốn Flash chơi đoạn phim A cho ngừơi trên 18 tuổi, dưới 18 nhưng trên 13 thì chơi đoạn phim B, và những ai dưới 13 thì chơi đoạn phim C. Vòng lặp Con người làm ra computer vì lười không muốn làm nhiều, mà bán cái cho computer. Nhất là phải làm đi làm lại 1 việc nào đó thì càng nhàm chán. Vì vậy vòng lặp (loop) là một yếu tố quan trọng trong các ngôn ngữ lập trình. AS cũng vậy, bạn có thể dùng vòng lặp trong script. Trong vòng lặp, "điều kiện" rất quan trọng. Mọi vòng lặp cần có điểm bắt đầu và điểm dừng và một điều kiện để báo hiệu điểm dừng của vòng lặp. Ví dụ như bạn muốn cho vòng lặp chạy 10 lần thì sẽ có 1 biến số dùng để đếm vòng lặp, bắt đầu từ 0, Mỗi vòng lặp chạy thì biến số này sẽ tăng thêm 1. Khi tới 9 thì vòng lặp sẽ dừng lại. Sau đây minh hoạ của vòng lặp này: 1. Một số lệnh trứơc vòng lặp 2. Bắt đầu vòng lặp, set biến số counter = 0 3. Làm một số lệnh trong vòng lặp 4. Tăng biến số counter +=1 5. Nếu biến số counter nhỏ hơn 9, trở lại bước thứ 3 6. Ra khỏi vòng lặp, và tiếp tục chương trình. Ở đây chúng ta bắt dầu biến số counter = 0 vì quy ước thông thường các ngôn ngữ lập trình đều bắt đầu vòng lặp ở 0. Một điểm đáng lưu ý của vòng lặp là điều kiện đước xét trước khi thực hiện các lệnh trong vòng lặp. Trong vài trường hợp, điều kiện sẽ được xét sau khi thực hiện các lệnh trong vòng lặp. Chúng ta cũng có thể ngưng vòng lặp trước điểm dừng của nó, và điều này sẽ được đề cập tới vào bài kế tiếp Làm những điều không tưởng Lệnh, hàm, phép tính, biến số, thông số, điều kiện, vòng lặp là những phần căn bản trong ngôn ngữ lặp trình, và cái này thì ai cũng biết nhưng làm sao phối hợp lại thành một chương trình hoàn hảo mới là cái khó. Chương trình đơn giản chỉ là một tập hợp lệnh cho computer để giải quyết 1 vấn đề nào đó. Vì vậy trước khi viết 1 chương trình chúng ta cần phải xác định "vấn đề" cần phải giải quyết. Ví dụ thực tế ở ngoài đời, mẹ bạn nhờ bạn ra chợ mua gà. Nhưng chỉ
đơn giản nói ra chợ mua gà thì chưa đủ vì biết mua gà sống hay gà làm rồi. nếu mua gà sống thì mua loại nào v.v. Đó là chưa nói tới mua gà ở chở nào, giá cả ra sao v.v. Nếu như bạn mẹ nói rõ là ra chợ bến thành, mua 1 con gà mái dầu, nặng khoảng 2 kg, với giá khoảng 10000 thì thật là dễ dàng cho bạn phải không? Biết được vấn đề mua gà rồi thì tìm cách mua gà. Bạn phải "lên kế hoạch", nên nhờ bạn chở hay đi taxi ra chợ bến thành. Nếu đi taxi đi hãng nào, tìm số phone để gọi, v.v. còn nhờ bạn chở đi thì nhờ tên nào. Rồi nên mặc quần áo nào đi chợ. Ra đến chợ thì phải mặc cả làm sao, trả tiền mặt hay ghi sổ nợ. Bạn thấy không, từ một chuyện mua gà đơn giản vậy mà có thể tốn cả ngày trời để lên chương trình Viết AS, bạn cần phải lưu ý tới tất cả mọi việc dù nhỏ cách mấy để cho Flash có thể làm đúng theo như ý bạn trong mọi tình huống. Các chương trình có bug không phải vì người viết dỡ mà vì chưa nghĩ tới hết mọi tình huống thôi. Tóm lại, điều quan trọng trong lập trình là khả nẳng phân tích một vấn đề chính thành nhiều vấn đề nhỏ cho tới khi không còn nhỏ hơn nữa, và sau đó xây dựng chương trình từ giải quyếy các vấn đế nhỏ lên dần cho tới vấn đề chính. Viết mã hoàn chỉnh Bọ (bug) đơn giản là lỗi của chương trình mà bạn tạo ra. Bug có thể chỉ là những lỗi cú pháp đơn giản, hay là những lỗi phức tạp do cách bạn giải quyết vấn đề trong môi trường runtime. Để tránh có bug trong script của bạn thì bạn nên tốn nhiều thì giờ vào giai đoạn phân tích, thiết kế chương trình cho script của bạn. Kiểm tra các đoạn code nhiều lần, và đóng vai "computer" cho thật giống, đừng suy nghĩ, mà thi hành các lệnh trong script của bạn. Viết từng đoạn code nhỏ rồi ráp lại với nhau (vì vậy mà lập trình theo hướng đối tượng được sử dụng nhiều nhất) Nếu script của bạn có bug thì đừng thế mà nản lòng, vì không có chương trình nào do con người làm ra mà không có bug cả. Vì vậy bạn đừng cố gắng viêt code sao cho tuyệt hảo không có lỗi. Nếu có bug thì bạn diệt bug thôi Bạn có thể chuẩn bị "chiến đấu" với bug bằng cách viết code sao cho dễ hiểu và dễ đọc, viết nhiều chú thích cho các đoạn mã. Đôi khi diệt bug (debug) rất đơn giản nhưng có khi cũng rất kho mà biết bug ở đâu để diệt. Flash có kèm theo vài công cụ giúp bạn debug dễ dàng hơn, chúng ta sẽ nói tới các công cụ này trong bài tới. Giờ thứ 04: Viêt code trong Flash, Writing code in Flash Khi bạn viết script, bạn sẽ dùng tất cả những từ khóa, và ký hiệu v.v. Vậy trước tiên chúng ta sẽ phân tích một đoạn script sau đây. Đoạn script này gắn vào 1 button. ActionScript on (press) { var myVariable = 7; var myOtherVariable = "Macromedia";
for (var i=0; i<10; i++) { trace(i); if (myVariable + 3 == 5) { trace(myOtherVariable); } } } Dòng đầu tiên xác định những đoạn code sau đó được kích hoạt khi mà user nhấn vào nút. hàm on(press) chỉ có thể sự dụng trong vào trong nút mà thôi. Ngoài ra bạn có thể dùng on(release) nếu như bạn muốn kích hoạt đoạn mã trên sau khi user nhấn nút, và buông tay. Dấu ngoặc móc {} ờ đầu và cuối đoạn code, gói đoạn code đó vào làm một, và đều được kích hoạt khi nhấn nút. Các bạn lưu ý thấy đoạn code được viết vào trong để cho dễ nhận thấy cả đoạn code này phụ thuộc vào on(press). Các bạn nên viết lùi vào trong cho những đoạn code phụ thuộc vào 1 lệnh hay hàm nào đó. Dòng thứ hai lập ra biến số (mình sẽ viết tắt là var nhe) tên myVariable, và đặt giá trị bằng 7 cho nó. tương tự hàng kế tiếp lập ra var tên là myOtherVariable và cho giá trị của nó là "Macrmedia". Cả 2 câu này được kết thúc bằng dấu chấm phẩy ; Dòng thứ 4 chính là vòng lặp (mình sẽ gọi là loop cho tiện nhe) for (sẽ nhắc tới các loại loop ở phía dưới) và các điều kiện của loop này. Nó sẽ lặp 10 lần với điều kiện bắt đầu là i=0 và nó sẽ tăng thêm 1 cho mỗi lần lặp cho tới khi nó lên tới 9. Tương tự như on(press), for loop cũng có đoạn code cho riêng nó, và đựơc bọc quanh bằng { } và đoạn code trong đó chỉ kích hoạt khi mà các điều kiện của for loop được thỏa mãn. Dòng thứ 5 là lệnh trace(), lệnh này chỉ viết thông tin ra ở output window trong lúc bạn làm việc với Flash, user sẽ không thấy được. Kế tiếp là điều kiện, if là từ khoá trong Flash, và nó sẽ kiểm tra kết quả của phép so sánh myVariable + 3 ==5. Nếu mà kết quả là đúng thì nó sẽ kích hoạt lệnh trace ở trong, và sẽ viết ra output window giá trị của myOtherVariable Vậy là bạn đã thấy một đoạn script hoàn chỉnh bằng AS rồi. Tiếp theo chúng ta sẽ nói đến vài phần khác của AS. Output window Ở trên chúng ta có nhắc tới output window, mà không nói rõ là gì. Output window là một window trong software Flash, và chỉ xuất hiện khi mà bạn chảy thử movie. Nếu Flash compile movie cho bạn và phát hiện ra lỗi thì Flash sẽ viết ra các output window này. Trong khi chạy thử movie, thì lệnh trace() mới có thể viết các thông tin ra output window. Output window rất quan trọng trong việt "diệt bọ", dùng nó chung với trace bạn có thể quan sát các thông số, biến số, các đối tượng, thuộc tính đối tượng .v.v Trong lúc học AS, bạn có thể viết một đọan script ngắn không làm gì cả những chỉ để viết thông tin ra output window, như đoạn code trên.
Thực hành: viết thông tin ra output windown Cách tốt nhất để hiểu rõ chức năng của output window là sử dụng nó. Bây giờ mình sẽ viết một đoạn code ngắn gửi thôi tin ra output window nhe. 1. Tạo một file mới 2. Chọn frame đầu tiên của movie, mở Action panel. Chỉnh kích thước cho action panel đủ lớn để viết, và nhớ dùng expert mode 3. Kích chuột vào phần viết script và viết câu sau: trace("hello world"); 4. Chạy thử movie (Control + Enter) 5. Bạn thấy gì ở output window? (Nếu output window của bạn chưa mở thì hãy nhấn F2) Giống như action panel, output window có 1 cái pop-up menu nho nhỏ ở trên góc phải. Bạn có thể dùng nó đễ copy, xoá hay save nội dung của output window hay có thể tìm kiếm chữ, v.v. Ngoài ra, pop-up menu này có phần cho bạn chỉnh chế độ "diệt bọ", bạn có thể chọn không cần output window in ra các lỗi (none), hay chỉ in lỗi (error), hay chỉ in cảnh báo (error) và cuối cùng là in ra chi tiết các lỗi hay cảnh báo (verbose) Biến số cục bộ và toàn bộ Ở trong giờ thứ 3, chúng ta có nhắc đến variable (biến số) dùng đễ lưu trữ thông tin. Và sử dụng variable trong AS rất dễ dàng. Bạn chỉ cần ấn định giá trị cho variable. Ví dụ: myVariable = 7. Chúng ta tạo variable có tên là myVariable và ấn định 7 là giá trị cho nó. (bạn có thể đặt tên cho variable là bất cứ gì bạn muôn) Bây giờ bạn có thể thử viết đoạn code sau: ActionScript var1= 7; var2= "hello world"; trace ("var1: " + var1+ " /var2: " + var2); Khi bạn chạy thử movie thì output window sẽ có hàng chữ sau: var1: 7 /var2: hello world Vì số 7 và "hello world" được chứa trong var1 và var2 sẽ được in ra. Variable có 2 loại, local và global. Global variable (biến số toàn bộ) thì bạn có thể truy cập giá trị của nó ở bất cứ nơi nào trong movie. Tạo global variable không đòi hỏi một bạn phải làm một cái gì đặc biệt cả, bạn có thể dùng nó như cách trên, và Flash tự động biến nó thành global variable. Flash movie dùng hệ thống level, và timeline của movie chính là root leve (gốc), còn các movie clip cũng chính là một Flash movie nhỏ ở trong Flash movie lớn. Các hình ảnh, script ở trong một movie clip là 1 level thấp hơn root level.
Local variable (biến số cục bộ), khác với global variable, local variable chỉ có trể truy cập trong cùng một đoạn code, hay trong cùng một timeline. Khi dùng local variable thì khi ra khỏi timeline hay đoạn code đó thì Flash sẽ xoá local variable ra khỏi bộ nhớ. Muốn tạo local variable thì dùng từ khoá var trước tên của local variable, ví dụ: var myLocal = "This is local"; Bạn chỉ cần dùng từ khoá var 1 lần thôi, những lần dùng sau đó thì chỉ cần dùng tên của local variable thôi. Ví dụ đoạn code: ActionScript var myLocal = 9; myLocal = 11; trace(myLocal); Phép so sánh và các phép tính So sánh 2 giá trị trong AS rất đơn giản, dùng các ký hiệu toán học như , = Khi ấn định giá trị thì dùng dấu =, và để cho khác biệt thì khi so sánh dùng ==. Đoạn code sau xét coi giá trị của a có bằng 7 không, và in kết quả ra output window. Và khi test đoạn code sau, bạn sẽ thấy true ở output window ActionScript var a = 7; trace(a == 7); Nếu bạn dùng lộn = với == thì sẽ bị lỗi ở runtime chứ Flash sẽ không có thể tìm được lỗi này cho bạn. Bạn có thể dùng == để so sánh 2 chuỗi mẫu tự: ActionScript var myString = "Hello World."; trace(myString == "Hello World."); trace(myString == "hello world."); Khi bạn test đoạn code trên thì bạn sẽ có được "true" và "false" ở output window, vì lần so sánh thứ nhất thì bằng nhau, nhưng lần thứ hai thì không vì chữ H và h khác nhau. Nếu bạn muốn thử coi 2 giá trị có khác nhau không thì dùng ky hiệu != ActionScript var a = 7; trace(a != 9); trace(a != 7); Hàm trace đầu tiên sẽ cho ra "true" vì 7 khác 9, và cái thứ hai thì sẽ cho ra "false"
Nếu bạn muốn thử giá trị coi lớn hơn hay nhỏ hơn thì dùng > và 6); trace(a = và = 5); trace(a >= 7); Đoạn code trên sẽ cho ra 3 kết quả "true" cả. Bạn có thể thay đổi giá trị của variable với các phép tính đơn giản như cộng (+), trừ (- ), nhân (*), chia (/). Ví dụ muốn thêm 4 vào giá trị của a thì viết a = a + 4. AS cũng có cách viết tắt như Java, C++ cho vì dụ này, a += 4 Nếu bạn muốn thêm 1 vào a thì bạn có thể viết như 2 cách trên a = a +1 và a += 1 và còn cách thứ 3 a++ . Dấu ++ chỉ làm tăng thêm 1 cho giá trị đó thôi. Có 2 cách dùng ++, 1 là để sau variable như cách trên, và 1 cách thì để trước variable. Bây giở thư đoạn code sau: ActionScript var a = 7; trace(a++); trace(a); Ở output window bạn sẽ thấy 7 rồi mới tới 8. Ở dòng thứ 2, hàm trace sẽ cho ra giá trị của a trước rồi mới tăng giá trị của a lên thêm 1. Bây giờ xem ví dụ khác: ActionScript var a = 7; trace(++a); trace(a); Ở output window bạn sẽ thấy 8 và 8. Ở dòng thứ 2 của ví dụ này, hàm trace sẽ tăng giá trị của a trước rồi mới cho ra giá trị của a. Tương tự như ++, AS cũng có cách viết tắt cho giãm giá trị của variable là dấu -, -=, =- và . Phép tính nhân và chia thì chỉ có *, *=, /, /= thôi. Điệu kiện Trong AS và các ngôn ngữ khác, if else chính là các từ khoá của điếu kiện. Tiếng
việt có nghĩa là "nếu nếu không". Từ khoá if dùng kết quả của sự so sánh nào đó để đi tới quyết định kích hoạt một đoạn code. Đoạn code sau sẽ so sánh giá trị của variable a với 7, nếu đúng thì Flash sẽ chơi ở frame 10 ActionScript if (a == 7) { gotoAndPlay(10); } Từ khoá if luôn bắt đầu cho 1 điều kiện và tiếp theo sẽ là sự so sánh. Luôn đặt code so sánh ở giữa ngoặc đơn (). Tất cả các code được kích hoạt nều điều kiện được thoả mãn sẽ để trong đâu ngoặc móc {}. Từ khoá else bổ sung cho if trong trường hợp bạn muốn thực hiện một đoạn code nếu điều kiện của if không được thỏa mãn. Ví dụ: ActionScript if (a == 7) { gotoAndPlay(10); } else { gotoAndPlay(15); } Nếu trường hợp cần thỏa mãn nhiều điều kiện thì có thể dùng cú pháp if else if else. Bạn có thể có bao nhiều cái else if cũng được. Nãy giờ ta chi nói tới điều kiện dựa trên 1 sự so sánh, những AS cũng cho phép dùng so sánh đa hợp (compound comparision). Trong điều kiện của Flash ta có thể dùng nhiều so sánh đễ đi tới một kết quả chính xác hơn. Ví dụ nếu như a lớn 10 và a phải nhỏ hơn 15 thì ra lệnh cho Flash chơi ở frame 10. ActionScript if ((a > 10) and (a 10) or (a < 15)) { gotoAndPlay(10); } Vòng lặp Cú pháp của vòng lặp (loop) thì hơi rắc rối hơn so với cú pháp của điều kiên if. nhưng
nó tương tự như C, C++, Java. Gồm có 3 loại vòng lặp chính là for loop, while loop và do-while loop for loop được coi là vòng lặp chính với từ khoá for và cú pháp của nó nhìn như sau: ActionScript for(var i=0;i 0) { // code thực hiện trong while loop } Đơn giản hơn for loop, while loop tương tự như điều kiện if đơn giản, thực hiện các code trong vòng lặp nếu điều kiện của while loop được thoã mãn, vì vậy bạn dễ dàng rồi vào trường hợp vòng lặp vô hạn, và dẫn đến tình trạng treo máy. Trong đoạn code trên, bạn phải làm thế nào để cho co 1 lúc a sẽ nhỏ hay bằng 0 để cho vòng lặp ngừng lại. Giống như while loop, do-while loop có cú pháp nhìn như sau: ActionScript
do { // code thực hiện trong do-while loop } while (a > 0); Chỉ khác với while loop là do-while loop thực hiện code trong vòng lặp trước rồi mới kiểm tra điều kiện. (while loop kiểm tra điều kiện rồi mới chạy code trong vòng lặp) Muốn phá ra khỏi quá trình tự hành của 3 loại loop trên thì dùng lệnh break và continue. Lệnh break sẽ phá ra khỏi loop hoàn toàn trong khi lệnh continue thì chỉ phá ra khỏi vòng lặp hiện tại và bắt đầu vòng lặp mới. Tạo ra một ví dụ cụ thể rất phức tạp, nên chúng ta tạm khoan bàn tới 2 lệnh này cho tới các bài sau. Hàm Cho tới bây giờ các script của chúng ta đều được viết vào frame đầu tiên của moive, cách này chỉ tốt cho nhưng chương trình đơn giản, nhưng nếu mà chương trình trở nên phức tạp thì đây không phải là cách. Hàm (function) sẽ cho phép chúng ta cấu tạo và quản lý code dễ dàng hơn trong các chương trình phức tạp. Dưới đây là một function đơn giản: ActionScript function myFunction(num) { var newNum = num + 3; return newNum; } Fuction bắt đầu bằng từ khoá function, tên của function có thể là bất cứ chữ gì như cách bạn đặt tên cho variable, nhưng lưu ý cách đặt tên cho fuction làm sao để người ta đọc tên có thể biết được chức năng của function. Theo sau tên của function sẽ là thông số (parameter, cho ngằn mình sẽ gọi thông số là param trong các bài viết này) được để trong ngoặc đơn (). Function có thể co 1 hay nhiều param hay không cần param cũng được. Param chẳng qua chỉ la variable được dùng trong function, nhưng variable này được truyền tự ngoài vào khi function được gọi. Đoạn code được function thực hiện sẽ nằm giữa ngoặc móc {}. Bây giớ chúng ta phân tích đoạn code trên. Khi function myFunction được gọi, thì param num được truyền vào, sau đó function myFunction tạo ra một local variable tên là newNum, và ấn định giá trị của newNum bằng giá trị của param num cộng với 3. Sau đó myFunction dùng lệnh return để ấn định giá trị của newNum là kết quả của myFunction. Lệnh return là lệnh đặc biệt chỉ được dùng ở trong function mà thôi. Lệnh này sẽ kết thúc function. Để sử dùng function này, dùng nó như một lệnh hay hàm của AS, giống như là trace() vậy đó. Đây là ví dụ: var a= myFunction(7);. Trước tiên tạo một local var rồi sau ấn định giá trị của local var này bằng kết quả của myFunction với param là 7, và cuối cùng thi local var này sẽ bằng 10. Một trong ưu điểm của function là bạn có thể tái sự dụng. Dưới đây là hàng code dùng chung 1 fuction và cho 3 kết quả khác nhau ActionScript
trace(myFunction(7)); trace(myFunction(13)); trace(myFunction(2)); Khi chạy đoạn code này thì output windown sẽ là 10, 16 và 5. Ví có thể tái sử dụng nên chúng ta chỉ cần thay đổi code ở trong myFunction thì tất cả các kết qủa có được từ gọi function này cũng thay đổi theo luôn. Dot Syntax Một điều bạn sẽ thấy rất nhiều trong quá trình học AS là dot syntax (hỗng biết dịch sao bây giờ) Dot syntax là phương pháp được dùng trong lập trình theo hướng đối tượng (oob: object oriented programming). Đây là một ví dụ của dot syntax. Nếu bạn muốn lấy căn bình phương của một số, và trong Flash đã có sẵn function để làm chuyện này rồi, và hàm này thuộc về đối tượng toán, tên là Math. Vậy muốn gọi function này thì trước tiên bạn phải gọi tên đối tượng mà fucntion này trực thuộc, đó là Math, theo sau đó là dấu chấm (dot), và rồi tới tên của function đó là sqrt. Cách viết như sau: ActionScript var a = Math.sqrt(4); Một cách dùng dot syntax khác là để truy cập đặc tính hay variable của một đối tượng, như là movie clip. ActionScript var a = myClip._x; var a = myClip.myVariable; Chúng ta sẽ đề cập đến đối tượng Math và MovieClip trong các bài tới, còn bây giờ thì quan trọng là bạn nắm được khái niệm về dot syntax. Chú giải Một trong đức tính cần có của lập trình viên là viết code làm sao cho dễ đọc và dễ hiễu. Nhưng nhiều khi dù khi viết có cố gắng cách mấy thì những đoạn code đó vẫn khó hiễu cho người xem, vì vậy mới cần những lời chú giải. Muốn chú giải trong AS thì chỉ cần dùng ký hiệu// trước câu chú giải đó. Nếu chú giải nhiều hơn vài dòng thì có thể dùng kiểu sau/* chú giải */. ActionScript /* chú giải: cộng 2 cho a cộng 2 cho b */ a += 2; // add 2 a
// add 2 to b b += 2; Debugging Thường thì thời gian diệt bọ tốn gần 1/3 thời gian phát triển chương trình. Nếu bạn nắm vững được "nghê thuật" diệt bọ thì bạn sẽ rút ngắn được rất nhiều thời gian. Có 3 cách diệt bọ hữu hiện là: phân tích, viết message ra output window và dùng AS debugger. Với các loại bọ đơn giản thì phân tích các đoạn code sẽ giúp bạn bắt trúng con bọ cần diệt. Dùng output window để theo dõi các đối tượng, vòng lặp, điều kiện, và nhờ vào đó bạn có thể biết được chổ nào trong code có vấn đề, cuối cùng là dùng AS debugger có sẳn trong Flash. Debugger window cho phép bạn có thể coi hết tất cả moi thành phần trong movie của bạn, cho phép bạn dùng AS bất chứ khi nào và chổ nào bạn muốn. Tham khảo thêm phần trợ giúp của Flash để biết cách dùng debugger. Giờ thứ 05: Điều khiển luồng movie, Control the flow of the movie Sử dụng AScript là cách điều khiển movie đơn gỉản nhất, nhung lại hiệu quả nhất. Chương này bạn sẽ học cách : • làm sao để dừng Movie trên frame • Sao để nhảy từ frame này đến frame kia • tạo nút cho phép điều khiển movie • tạo một slide show đơn giản • tạo một biểu diễn đầy đủ Dừng movie Đây là câu lệnh stop: ActionScript stop(); Khi bạn dùng câu lệnh này , movie chỉ tạm dừng ở frame mà bạn đặt câu lệnh. Các animation bên trong movieClip và các file đồ họa vẫn tiếp tục chạy trên frame đó. Nhưng animation của time line sẽ bị dừng. Để cho animation của timeline tiếp tục chạy, ta sử dụng một lênh đơn giản đó là lệnh play ta sẽ bàn đến nó sau. Ví dụ Tại frame 1, bạn hãy thả một text box và viết vào đó Chữ A Tại frame 2, bạn hãy thả một text box và viết vào đó Chữ B Tại frame 3, bạn hãy thả một text box và viết vào đó Chữ C Bây giờ bạn hay đặt câu lệnh stop(); vào Frame 2, bạn se thấy chữ A xuất hiện rất
nhanh rồi đến chữ B, nhưng chữ C sẽ ko thấy xuất hiện,, Đơn giản vì câu lệnh stop() đã dừng animation của timeline tại Frame 2. Nhảy từ frame này đến frame kia Một câu lệnh cơ bản của AS là câu lệnh gotoAndPlay. Câu lệnh này giúp bạn có thể nhảy từ frame này đến frame mà bạn muốn. Bạn có thể sư dụng số thứ tự của frame hay là tên của frame ActionScript gotoAndPlay(7); gotoAndPlay(20); gotoAndPlay("my frame label") bạn có thể sử dụng nhiều movies , hay còn gọi là cảnh(scene) . Nếu Câu lệnh gotoAndPlay chỉ có một tham số, thì tham số đó là frame. Nhưng nếu có 2 tham số,thì tham số đầu tiền là tên của scene, còn tham ssố thứ 2 là số thứ tự của frame hay tên frame. ActionScript gotoAndPlay("My Scene","My Frame"); Khi bạn dùng gotoandPlay,movies sẽ nhảy đến frame mà bạn gọi , và tiếp tục chạy, nhưng nếu bạn muốn nó nhảy đến frame và dừng lại, bạn co thể sử dụng gotoAndStop . Câu lệnh này dùng y hệt như gotoAndPlay, với lựa chọn 1 tham số hay 2 tham số. Ngoài ra có thêm 2 câu lệnh cũng họat động giống gotoAndStop , đó là nextFrame and prevFrame Để hiểu rõ hơn về các câu lệnh này, ta sẽ đi tiếp phần sau Tạo nút (button) Nút là một trong 3 biểu tượng (symbol) chính trong Flash, 2 cái kia là movie cilps và hình Tạo một button Có nhiều cách để tạo nút. Một trong nhưng cách đó là chọn Insert, New Symbol từ Menu. Một hộp thoại sẽ hiện lên và hỏi bạn đặt tên và lựa chọn biểu tượng của bạn là loại Movie clip, button, hay đồ họa. Bạn hãy chọn Button. Bây giờ trong cửa sổ chính của Flash sẽ thay đổi, timeline của button sẽ thay thế timeline của movie chính. Có 4 frames trong timeLine của button. Chúng có tên là Up, Over, Down, HIt. CHúng thể hiện 3 trạng thái của button, và vùng họat động của button.
Nếu bạn đặt một đồ họa, chẳng hạn là một vòng tròn, trong frame đầu tiên(UP) và ko có gì trong 3 frame sau, trạng thái Over và Down của button sẽ giống như trạng thái của Up. VÙng hoạt động của button cũng tương tự như vậy. Mặt khác , bạn có thể tạo các hiệu ứng khác nhau cho button của bạn. VÍ dụ nếu bạn đổi mầu của vòng tròn là màu xanh ở Frame OVER,có nghĩa là khi bạn đưa chuột qua button, button sẽ chuyển sang màu xanh. Khi bạn tạo xong 1 button, bạn trở lai movie timeline chính. Và button của bạn đã sẵn sàng trong thư viện của FLash. Bạn chỉ viêc bấm F11, tìm button của bạn và kéo thả nó vào nơi nào bạn cần trên cửa sổ thiết kế. Tạo script cho button Để đặt script cho button, đầu tiên hãy chọm một button. Sau đó vào cửa sổ Action bằng cách bấm chuột phải lên button và chọn Action từ menu xuất hiện. Hãy Chắc chắn rằng cửa sổ Action đã được đặt ở chế đọ Expert. Bạn có thể kiểm tra băng một popup menu ở góc trên cùng bên phải của cửa sổ. Đây là một đoạn mã thông thường cho button. Bạn có thể đặt nó trong cửa sổ mã và sau đó kiểm tra movie xem nó họat động thế nào. ActionScript on (release) { trace("You clicked the button!") } on : là một keyword, được gọi ra để xử lí một sự kiện Release : Là một sự kiện, khi người sử dụng click vào button và nhả chuột ra. Đoạn mã trace sẽ được thực thi. Ngoài ra Release có thể thay thế bằng sự kiện PRESS, sự kiện này chỉ khác Release ở chỗ khi người sử dụng bấm vào button, đoạn mã trace sẽ đươc thực thi mà ko cần phải thả chuột ra. Trace : là in ra màn hình dòng chữ YOU CLICKED THE BUTTON. Thực Hành: Tạo một Slide Show đơn giản Có lẽ ko phải diễn tả nhiều về Slide Show, các bạn hãy tưởng tượng giông Power Point Khi chúng ta bấm chuột, các slide sẽ chuyển sang slide khác. 1. Mở Flash, chọn New 2. Trong Layer 1, từ Frame 1 đến Frame 4, bạn hãy đăt các biểu tượng hay hình ảnh, text khác nhau để phân biệt được các frame 3. Sau đó bạn tạo một layer mới, hãy đặt một button lên layer này.Tiếp theo bạn chọn
Frame 4 của layer 2, và bấm F6. Điều này đảm bảo cho button của bạn sẽ xuất hiện trong tất cả các Frame của Layer 1. Bây giờ copy đoạn mã sau vào button của bạn, chú ý nhớ là copy vào action của button, chứ ko phải vào bất kì frame nào ActionScript on (release) { nextFrame(); } Cuối cùng chọn Frame 1 Layer 1 action và chèn đoạn code sau ActionScript stop(); Hãy chạy thử slide show của bạn = cách bấm Ctrl Enter. 5) Xây dựng một presentation đơn giản: Presentation này sử dụng nguyên tắc giông hệt như ví dụ Slide show ở trên, các bạn hay down load file FLA để xem easy Giờ thứ 06: Điều khiển movie clip, Controlling Movie Clips 6th Hour Điều khiển movie clip Bạn sẽ học 1- ra lệnh cho movie clip 2-Tạo playback cho animation 3-TÌm hiểu đích(target) của movie clip 4-Tập viết code cho movie clip 5-Tạo movie clip có thể chạy lùi lại. 1) Ra lệnh cho movie clip : Một movie chính có thể rất đơn giản. NÓ chỉ cần 1 frame và một movie clip. Nhưng bản thân movie clip lại có thể là một animation dài. Việc này dễ dàng thực hiện mà ko cần Actioncript. Để điều khiển được movie, bạn phải đặt tên cho movie clip. Chú ý rằng một movies clip có 2 tên, một tên sử dụng cho timeline . Một tên sử dụng cho actioncript. 2 tên này có thể đặt trùng tên nhau hoặc khác tên nhau. Làm sao để đặt tên cho movie clip : Chọn insert > New Symbol (hoặc bấm Ctrl F8), đặt tên cho movies clip (nhớ lựa chọn option movies clip, chứ ko phải là button hay graphic) Tên này được sử dụng cho timeline. vd: gear animation Thả movie gear animation vào cửa sổ thiết kế PHía dưới cửa sổ properties, ban sẽ
thấy box instance name Đặt tên cho movie tên này được sử dụng cho Action script , vd : gears và như vậy, khi bạn lập trình , tên sử dụng là gears , chứ ko phải gear animation. bạn có thể sử dụng dấu chấm để đưa ra các lênh cho movie của bạn. ví dụ ActionScript gears.stop(); gears.gotoAndStop(5); Nhớ rằng movie clip luôn có level. Nếu đoạn mã được đặt trên chính movieclip, bạn ko cần sử dụng tên movies, chỉ cần gotoAndStop();. Nếu bạn đặt cả tên movie vào, Flash sẽ tìm movie của bạn từ timeline chính Tức là sẽ phải qua 2 level. > chậm hơn chút. 2)Animation Playback Controller Hãy down load source code từ trên phần download và xem. Về cơ bản, chúng ta làm các việc sau: - Tạo một Movie ,đặt tên là gear animation - Đặt instance name là gear(hướng dẫn ở trên) - Frame đầu tiên của time line chính, chèn code ActionScript gears.stop(); -Tạo các button Advance, Previous, Play, Stop, and Rewind -Code cho các button lần lượt là Advance ActionScript on (release) { gears.nextFrame(); } Previous ActionScript on (release) { gears.prevFrame(); } Play ActionScript on (release) { gears.play(); } Stop ActionScript on (release) {
gears.stop(); } Rewind ActionScript on (release) { gears.gotoAndStop (1); } 3) Target một movie Level cơ bản đầu tiên của Flash là time line chính(Level 0). Nếu bạn muốn ra lệnh cho time line này, bạn dùng code sau _root.gotoAndStop(); thậm chí nếu bạn đặt code ở time line chính, bạn ko cần _root. Chỉ cần gotoAndStop(); Giả sử nếu bạn có một movie trên time line, tức là bạn có một level sâu hơn(level 1). Nếu bạn từ time line chính, muốn goi movie gears , bạn phải dùng câu lệnh gears.gotoAndStop(7); _root["gears"].gotoAndStop(7); this["gears"].gotoAndStop(7); Cả 3 cách trên đều giống nhau Tuy nhiên this có nghĩa là level hiện hành. VÍ dụ trên, level hiện hành của this là level 0. Nhưng nếu code đặt trong movie, level hiện hành sẽ là level 1. Bạn phải chú ý. Giả sử bạn có một movie khác bên trong movie, tức là bạn có level 2. Nếu bạn muốn từ level 1 gọi đến level 2, bạn phải dùng _parent. Parent dùng giống như root, nhưng khác ở chỗ, nó được gọi từ level ở trên. Còn root được gọi từ level 0 (tức là level gốc). Thuận lợi từ việc sử dụng root, this là bạn có thể gán biến cho movie clips ActionScript var whichClipToUse = "gears"; this[whichClipToUse].stop(); Thuận lợi của vịệc sử dụng this nhiều hơn root ở chỗ , ko phải lúc nào mọi thứ cũng xảy ra ở time line chính, đôi khi ta chỉ muốn nó xảy ra ở một level nhất định. Bởi vậy this là cách tốt nhất để goi level của một movie. Tuy nhiên trong những trương hợp đơn giản, hay nhất là cứ đặt tên cho movies. 4) Mã cho movie clip
Chúng ta đã bàn về button ở trên, vậy về cơ bản movie clip script cũng giống button, đó là ActionScript onClipEvent (load) { trace("This clip has been loaded."); } onClipEvent : key word gọi sự kiện (giống on của button) load : sự kiện này xảy ra khi movie clip xuất hiện lần đầu tiên trên màn hình . NÓ chỉ xảy ra một lần. Nhớ rằng ngay cả khi time line chính bị đừng, movie clip nằm trên time line vẫn tiếp tục chạy. Sự kiên enterFrame xảy ra liên tục bên trong movie clip mỗi khi đến một frame mới. Sự kiện này sẽ thực thi đoạn mã một cách liên tục cho đến khi nó bị kết thúc. ActionScript onClipEvent (enterFrame) { trace("This clip has entered a new frame."); } bây giờ hãy copy 2 đoạn code trên vào của sổ action của timeline chính và run bạn sẽ thấy ActionScript This clip has been loaded This clip has entered a new frame This clip has entered a new frame This clip has entered a new frame This clip has entered a new frame dòng chữ sẽ tiếp tục hiện ra cho đến khi bạn tắt movie. Giờ thứ 07: dịch chuyển và thay đổi movie, Moving and Changing Movie Clips Một movie clip (MC) bao giờ cũng có các thuộc tính, cho phép bạn xác định vị trí, phóng to thu nhỏ, quay, thậm chí làm nó biến mất. Chương này các bạn sẽ biết cách: -thay đổi vị trí của mc -xác đinh vị trí chuột -làm sao để quay một mc -làm sao để phóng to mc -làm sao để movie invisible
1) Vị trí của MC: Mọi thứ trong Flash đều có vị trí. VỊ trí này được đo bằng PIXEL. Góc trên cùng bên trái của màn hình là vị trí (0,0) .Nó là vị trí giao của hàng ngang và cột dọc. Nếu bạn sử dụng một movie mặc định, thì góc dưới bên phải sẽ là 550,400. Có nghia là 550 pixel từ bên trái sang và 400 pixel từ bên trên xuống. nhìn hình sau để rõ hơn. 2) Vị trí của Mouse: Cũng như movie, mouse cũng có thể xác đinh được tọa độ CHú ý thuật ngữ mouse ở đây là nói đến con trỏ (cursor), chứ không phải con chuột bạn đang cầm trên tay ^^
Có hai thuộc tính cơ bản của con trỏ , đó là _xmouse và _ymouse. Vậy _xmouse và _ymouse là thuộc tính của chính đối tượng mà chúng được gán. Nếu bạn sử dụng trên time line chính, thì chúng là thuộc tính của time line. Nếu bạn sử dụng chúng trên movie clip, thì nó là thuộc tính của movie clip. Nếu xmous y mouse là thuộc tính của time line chính, nó sẽ mặc định là góc trái trên cùng. Nếu xmouse ymouse là thuộcc tính của 1 movie clip, nó sẽ mặc định ở trung tâm của MC. Hầu hết các trường hợp thuộc tính liên quan đến movie chính, bạn nên dùng cách _root._xmouse và _root._ymouse Đây là một đoạn code ví du CODE onClipEvent (enterFrame) { trace(_root._xmouse); trace(_root._ymouse); trace(""); } Khi bạn chạy movie, bạn sẽ thấy các cặp số được in ra, đó chính là tọa độ x,y mouse .Hãy dịch chuyển mouse lên góc trái trên, bạn sẽ thấy ở đó vị trí mouse là 0.0. hoặc góc phải dưới, tọa độ là 550 400. Chú ý: khi bạn đưa chuột ra ngoài Flash window, tọa độ chuôt xmouse y mouse không thay đổi. Nếu bạn di chuyển chuột thật nhanh từ trung tâm của cửa sổ ra ngoài cửa sổ, các giá trị cũ vẫn ở đó cho đến khi bạn quay trở lại cửa sổ. VÌ vậy, bạn phải luôn lên kế hoạc cẩn thẩn trước khi dùng xmouse, y mouse 3) Làm movie quay Một thuộc tính khac đó là thuộc tính _rotation Thuộc tính rotation chấp nhận giá trị là góc độ. Một vòng tròn chia ra 360 độ, miền giá trị cả thuộc tính rotation là -180 và 180. Bạn có thể sử dụng giá trị integer hoạc floating point. Giá trị của _rotation luôn luôn ở trong vòng -180 và 180, ví dụ 179, hoặc -179. Nhưng nếu bạn đặt nó là 181, nó sẽ hiểu thành góc độ -179. vậy để quay một movie, đơn giản là đặt giá trị cho nó, bạn cũng có thể sử dụng các biểu toán ++, += để thay đổi giá trị . Hãy xem ví dụ sau CODE myClip._rotation = 90; myClip._rotation++; _root["myClip"]._rotation = 45; this._rotation += 0.5;
4) Co giãn đàn hồi một MC: Bạn có thể làm co giãn, thay đổi chiều dài chiều rộng của movie clip Scale thuộc tính THuộc tính để làm việc này là _xscale cho chiều ngang và _yscale cho chiều dọc. Các giá trị được gán cho x,y scale là phần trăm. Có nghĩa giá trị 100 là 100 phần trăm , đây là thuộc tính mặc đinh cho một movie clip gốc. Bạn có thể sử dụng các số nhỏ hơn như 50 để làm movie co lại. Hoặc có thể sử dụng số to hơn, 200 để giãn movie ra. Thậm có thể dùng các giá trị âm để lật movie. ví dụ 07mousesclae.fla chứa một đoạn mã mà chúgn ta sẽ gặp rất nhiều sau này. Nó kiểm tra tọa độ của mouse,. Sau đó xác đinh từ mouse đến trung tâm movie xa bao nhiêu. Rồi nó sử dụng khoảng cách ,cả chiều cao chiều rộng để tính phần trăm tỉ lệ cho movie clip. CODE onClipEvent (load) { // get the original width and height of the mc origWidth = this._width; origHeight = this._height; } onClipEvent (enterFrame) { // get the distance from the center of the mc to the mouse dx = _root._xmouse-this._x; dy = _root._ymouse-this._y; // calculate the percentage of scale sx = 100*dx/(origWidth/2); sy = 100*dy/(origHeight/2); // set the scale of the mc this._xscale = sx; this._yscale = sy; } Chú ý ở đây ta sử dụng 2 thuộc tính mới, _width và _height trả về chiều cao và chiều rộng của movie clip bằng Pixel. CHúng được lưu giú trong onClipEvent (load) vì để khi ta cần lấy lại giá trị gốc của movie. Thuộc tính _width, _height Sự khác nhau giữa scale và width,height í scale sử dụng giá trị phần trăm. Còn width height sử dụng pixel . Movie có thể có giá trị sau: width 75, height 45, nhưng scale cho cả xscale and yscale là 100 phần trăm. Dưới đây là một ví dụ sử dụng width height thấy thế cho xscale, yscale. CODE
onClipEvent (enterFrame) { // get the distance from the center of the mc to the mouse dx = _root._xmouse-this._x; dy = _root._ymouse-this._y; // set the scale of the mc this._width = dx*2; this._height = dy*2; } bạn có thể thấy code này ngắn gọn hơn ơ trên. bởi vì nó ko sử dụng sự kiên onClipEvent(load) bởi gái trị chiều dài chiều cao của movie gốc ko cần lưu trữ.Đây là một ví dụ cho thấy sử dụng width và height tiện hơn dụng xscale ,y scale. 5) Visibility Một thuộc tính khác của MC là thuộc tính _visible , giá trị của thuộc tính này là giá trị boolean true , false. CODE myClip._visible = false; hãy xem ví dụ 07visible.fla để rõ hơn. Giả sử ta không muốn movie biến mất hẳn, mà chỉ bị mờ đi, ta sử dụng thuộc tính _alpha . Thuộc tính có giá trị từ 0 đến 100 CODE myClip._alpha = 50; Thuộc tính alpha là kênh màu thứ 4, tên là alpha channel . 3 kênh đầu tiên là red ,green, blue đủ để tạo ra 7 màu cầu vồng. Khi bạn nghe đến đồ họa 32 bit, có nghĩa là nó đủ 4 kênh màu Còn 24 bit có nghĩa chỉ cỏ 3 kênh đầu tiên. Nếu giá trị của _visible là 0 thì movie là trong suốt hoàn tòan và có thể nhìn thấy tất cả mọi thứ phía sau movie. Nhìn hình sau để xem cùng 1 movieclip nhưng với 3 giá trị alpha khác nhau, 10, 50 và 100 (từ trái sang) Giờ thứ 08: chọn, kéo thả movie clip, Moving and Changing Movie Clips 1. Selection
Bạn đã biết cách học sao để tạo một button và cho phép người sử dụng click vào làm sự kiện hoạt động. Tuy nhiên ở đây ta sẽ học cách click vào để chọn lựa một đối tượng trên màn hình. Tạo một chọn lựa, có nghĩa là user click vào item , nhưng không có gì xảy ra. Như vậy, người dùng có thể lựa chọn và thay đổi lựa chọn. Chúng ta sẽ sử dụng lụa chọn như bước đầu tiên để học kéo thả movie. Button ở bên trong một Movie method. Một movie không thể phản ứng với mouse click. Không thể sử dụng các sự kiện như on (release) hay (Press). vì vậy ta phải tìm cách đánh lừa nó. Đó là sử dụng một button bên trong movie. Button có thể xử lý được mouse click, và miễn là nó có độ lớn đủ để bao trùm một movie. Hãy xem ví dụ 08buttoninmc.fla . Ta chỉ nhìn thấy một movie clip trên màn hình.nhưng thực chất bên trong của movie clip là một button. Để tạo ra khả năng select, ta phải tạo nhiều frame.Frame đầu tiên chứa một button tên là offbutton. Button này có mã là CODE on (release) { this.gotoAndStop(2); } bằng this, button sẽ gọi đến movie clip mà nó nằm trên đấy. Frame thứ 2 chứa nút tương tự nhu frame 1 , tên là onbutton, nút này có mầu hơi sáng hơn để người dùng nhận ra khi nó được chọn. CODE on (release) { this.gotoAndStop(1); } cuối cùng đặt vào frame 1 CODE stop(); Bây giờ hãy chạy để xem. Phương thức hitTest Có cách khác để làm movie có thể sử lý mouse click mà không cần button, đó là sử dụng sự kiện onClipEvent(mouseDown) hoặc là onClipEvent(mouseUp)ví dụ CODE onClipEvent (mouseUp) { this.gotoAndStop(2); } Hãy chạy ví dụ 08twomcs1.fla để xem.Bạn sẽ thấy tại sao onClipEvent(mouseUp) khác với on (Release) . Nếu bạn click vào movie, cả hai đều phản ứng.Bởi vì tất cả movie clip nhận sự kiện mouse up được gửi đến cho chúng.
Quyết đinh movie nào được click. Có một cách để click vào movie mình muốn. Đó là sử dụng vị trí chuột để xác định. Sửa đoạn mã thành như sau CODE onClipEvent (mouseUp) { if (this.hitTest(_root._xmouse, _root._ymouse)) { this.gotoAndStop(2); } } vậy bằng cách ràng buộc movie clip với mouse location , ta có thể click movie ta muốn. VIết mã cho selection: Chúng ta phải cho phép User click lên movies nhiều lần và thay đổi trạng thái của MC từ bật sang tắt, hay tắt sang bật. Đoạn mã sau có thể xác định movie đang ở trạng thái nào và gửi nó đến frame khác. VIệc này thực hiện bằng thuộc tính _currentFrame . Thuộc tính này sẽ đọc giá trị 1 khỉ nó ở frame thứ nhất, giá trị 2 khi nó ở frame thứ 2. CODE onClipEvent (mouseUp) { if (this.hitTest(_root._xmouse, _root._ymouse)) { if (this._currentFrame == 1) { this.gotoAndStop(2); } else { this.gotoAndStop(1); } } } Bây giờ bạn đã thấy các cách để tạo sự chọn lựa movie. Cách thư nhất tiện lợi nếu bạn muốn dùng cả các trang thái khác như Over,up , down Cách thứ hai thì không cần nhiều biểu tượng trong thư viện. Enjoy 2) Kéo một movie clip Bây giờ ta sẽ học kéo một movie. Có 2 cách để kéo movie, cách thứ nhất là sử dụng lệnh . Cách này rất dễ sử dụng nhưng nó không cho bạn nhiều lựa chọn trong việc sửa đổi và giám sát movie. Cách Drag cơ bản: 2 câu lệnh drag co bản là :startDrag và stopDrag. bạn dùng startDrag khi bạn muốn movie của bạn đi theo chuột, còn stopDrag khi bạn muốn movie của bạn không theo chuột nữa. Đây là đoạn code cơ bản : CODE onClipEvent (mouseDown) { if (this.hitTest(_root._xmouse, _root._ymouse)) {
this.startDrag(); } } onClipEvent (mouseUp) { if (this.hitTest(_root._xmouse, _root._ymouse)) { this.stopDrag(); } } Sự kiện onClipEvent nhìn tương tự như ta đã làm ở trên. Chúng sử dụng hitTest để nhận biết movie nào đang được click. Và sau đó câu lệnh startDrag và stopDrag được sử dụng. Khi chuột được bấm xuống, câu lệnh startDrag thực thi. Và ngược lại, khi chuột thả ra, stopDrag thực thi. Hãy xem movie, bạn sẽ thấy với các câu lệnh drag, bạn có thể kéo các movie một cách độc lập. Nhưng chú ý rằng bạn không thể kéo 2 movie cùng một lúc. Chỉ một movie được kéo tại một thời điểm. Vì vậy bạn nên cần cách drag phức tạp và linh động hơn để làm ứng dụng hay game. Note: startDrag có 5 thám số. Tham số thứ nhất là giá trị True(hoặc False) để quyết định việc trung tâm của movie clip có khóa với vị trí chuột hay không. Các tham số còn lại là left, top, right, bottom. Nếu bạn đặt chúng, movie của bạn chỉ có thể được kéo theo các ràng buộc đó. Kéo nâng cao Bây giờ ta học cách kéo movie mà ko dùng câu lệnh startDrag và stopDrag. Vậy làm thế nào?? Bạn cần có 4 phần mã sau trong movie của bạn: Thứ nhất là sự kiện onClipEvent(load), sự kiện này sẽ đặt cho biến global tên là dragging giá trị false. Khi biến này true, tức là báo hiệu rằng movie có thể được kéo. Thứ hai, ngưòi dùng click vào một movie. Có nghĩa là dragging = true . Thứ ba, quá trình kéo sẽ tiếp tục diễn ra bởi sự kiện onClipEvent(enterFrame). Sự kiện này chỉ đơn giản gán _x và _y (thuộc tính của movie clip) cho _root._xmouse và _root._ymouse(thuộc tính của con trỏ ). Thứ 4, nếu ngưòi dùng thả chuột , thì biến dragging được gán false. Sau đây là đoạn code đầy đủ CODE onClipEvent (load) { // start out not dragging dragging = false; }
onClipEvent (mouseDown) { if (this.hitTest(_root._xmouse, _root._ymouse)) { // follow the mouse from now on dragging = true; } } onClipEvent (enterFrame) { if (dragging) { // set to location of the mouse this._x = _root._xmouse; this._y = _root._ymouse; } } onClipEvent (mouseUp) { if (this.hitTest(_root._xmouse, _root._ymouse)) { // don't follow the mouse any longer dragging = false; } } Trong ví dụ 08complexdrag.fla chứa 2 MC. Kiểm tra movie, nhưng chỉ sử dụng MC bên trái. Đây là MC làm theo đoạn code trên. Chú ý xem trung tâm movie đựơc khóa với vị trí chuột như thế nào. Nó làm movie nhảy ngay lập tức nếu bạn click vào nó. Thông thường, khi bạn muốn kéo MC đó lên màn hình, bạn không muốn nó nhảy tới để làm khớp vị trí chuột với trung tâm của MC. Hãy kéo file xung quanh màn hình.Bạn sẽ thấy khi bạn click chuột vào bất kì điểm nào trên movie, movie sẽ lập tức làm khớp vị trí click chuột với trung tâm movie. Điều này cũng tương tự với câu lệnh startDrag . Để tránh điều này, chúng ta chỉ cần thêm một đoạn code nhỏ. Khi ngưòi sử dụng bấm chuột, chúng ta sẽ lấy offset, đây là khoảng cách từ chuột cho đến trung tâm của movie. Sau đó, thay thế bằng việc gán vị trí chuột đến trung tâm movie, ta se thêm vào offset để cho MC luôn luôn xuất hiện offset bởi cùng một giá trị khi người dùng kéo. Tưởng tượng , ví dụ ngưòi dùng click vào một điểm cách trung tâm movie 5 pixel. Sau đó ta luôn muốn khoảng cách 5 pixel đó được duy trì. Điều này làm cho người dùng có thể click vào bất cứ điểm nào để kéo movie. Đây là code cho movie 2(bên phải) CODE onClipEvent (load) { // start out not dragging
dragging = false; } onClipEvent (mouseDown) { if (this.hitTest(_root._xmouse, _root._ymouse)) { // follow the mouse from now on dragging = true; // get the mouse offset xOffset = this._x - _root._xmouse; yOffset = this._y - _root._ymouse; } } onClipEvent (enterFrame) { if (dragging) { // set to location of the mouse this._x = _root._xmouse + xOffset; this._y = _root._ymouse + yOffset; } } onClipEvent (mouseUp) { if (this.hitTest(_root._xmouse, _root._ymouse)) { // don't follow the mouse any longer dragging = false; } } Hãy xem movie để thấy khác biệt giữa 2 đoạn code. 3) Kéo và thả Bây giờ ta đã biết kéo movie, vậy ta sẽ thả nó ở đâu.? Vấn đề là bạn muốn theo dõi hành động của người sử dụng và xác đinh người sử dung đặt movie ở đâu. Basic Drop Zone Chức năng hitTest có thể được sử dụng để xác định khi MC bị đè lên nhau. Trong đoạn mã sau, chúgn ta sử dụng lệnh startDrag để đoạn mã kéo thả đơn giản đi, nhờ đó ta có thể tập trung vào các chức năng mới. Trong đoạn mã sau, chức năng hitTest được sử dụng để so sánh MC được kéo với một movie khác tên là dragZone ở trên một lêvl(root level) CODE onClipEvent (mouseDown) { if (this.hitTest(_root._xmouse, _root._ymouse)) {
this.startDrag(); } } onClipEvent (mouseUp) { if (this.hitTest(_root._xmouse, _root._ymouse)) { this.stopDrag(); // see if this mc is inside the dropZone mc if (this.hitTest(_parent.dropZone)) { trace("Dropped in zone"); } else { trace("Dropped outside zone"); } } } Chú ý hitTest không được sử dụng như các bài trước, chúng ta thay thế vị trí _x và _y bởi một movie khác. Loại hitTest này so sánh vị trí và vùng được bao phủ của 2 movie clip. Trong trường hợp này, nó được so sánh với _parent.dropZone. Nếu có 2 movie đè lên nhau, hitTest trả giá trị True. Để xác đinh xem MC nào đang tồn tại, hình chữ nhật của cả 2 movie đều được sử dụng. Điều này có nghĩa là khi bạn sử dụng 2 hình tròng, như trong ví dụ, bản thân chính các vòng tròn đó không được chạm vào miễn là các hình chứ nhật của 2 movie được dùng. Hãy xem hình minh họa. Tất cả các movie Dragme đều nằm đè trên DropZone. Có 2 cách sử dụng hitTest. Thứ nhất là sử dụng tọa độ x,y. Chúng ta có thể sử dụng movie clip như vị trí x,y, rồi sau đó sử dụng dropzone như một movie clip thứ nhất. CODE if (_parent.dropZone.hitTest(this._x,this._y)) { Với đoạn code này, thay thế ví dụ trên, movie clip sẽ nằm ở bên trong hình chữ nhật của vùng dropzone. Chúng ta có thể thêm một bước nữa với hittest. Bằng cách thêm tham số thứ 3 cho hitTest, chúng ta có thể dùng hitTest để xem hình dạng chính xác của movie clip và xác đinh vị trí x,y. Biến thứ 3 này cần gán true nếu bạn muốn hành vi này. Nếu nó false, nó se hành động giống như chức năng hitTest bình thường. Đây là đoạn code CODE if (_parent.dropZone.hitTest(this._x,this._y,true)) {
Bây giờ movie kéo thả của ta họat động tốt hơn. Nếu bạn sử dụng ví dụ 08drop.fla, movie bên phải sẽ sử dụng đoạn mã gôc, và nó nằm đè ở trên hình chữ nhật của dropzone. Các movie khác sử dụng đoạn code phức tạp hitTest và chúng có trung tâm nàm bên trong hình dạng gốc của dropzone. Giờ thứ 09: Lấy thông tin từ người dùng, Getting input from the user Cho tới bây giờ, qua 8 giờ làm quen với AS, tất cả các tác động của bạn lên trên flash đều được làm qua chuột. Nhưng ngoài chuột, bạn có thể dùng bàn phím để nạp thông tin vào Flash. Làm sao để phát hiện khi người dùng bấm phím Có 3 cách để phát hiện khi một phím tên bàn phím bị nhấn. 1 là dùng nút, 2 là dùng đối tượng Key, và 3 là dùng "listener" (chỉ có ở Flash MX và MX 2004) 1. Phát hiện qua nút: Bạn có thể dùng nút để phát hiện khi người dùng sử dụng bàn phím. Bạn chi cần dùng lệnh xử lý sự kiện on cho đoạn code của nút . Ví dụ đoạn code sau sẽ kích hoạt khi mà người dùng nhấn phím "a". ActionScript on (keyPress "a"){ trace ("Key 'a' pressed"); } Trong movie mẫu 09keybutton.fla có một nút đơn giản nằm trên màn hình và vài ví dụ trong đó. Nếu bạn cho chạy thử movie và nhấn phím "a" thì Output window sẽ có viết ra dòng chữ "Key 'a' pressed.". Xử lý dữ kiện on(keyPress) nhớ là phải phân biệt dạng chữ (case-sensitive) nên nếu bạn chỉ code cho nó nhận phím "a" thì nó sẽ không thể nhận được phím "A". May mà chúng ta có thể dùng bao nhiều bộ xứ lý dữ kiện cũng được. Nếu bạn muốn xữ lý các phím khác, như các phím mũi tên, enter, thanh dài (space bar) thì bạn phải dùng các code dành riêng cho chúng. Vì dụ bạn muốn xữ lý phím mũi tên trái (left arrow key) thì dùng đoạn code sau: ActionScript on (keyPress " ") { trace("Left pressed."); } Và sau đây là các code dành cho các phím đặc biệt: • • • •
• • • • • • • • • • • Bạn có thể hợp nhiều dữ kiện lại chung với nhau. Ví dụ bạn có một nút và nút đó có phím tắt là "b". Vậy khi bạn nhấn nút đó hay là nhấn phím "b" thì code của nút đó sẽ được kích hoạt. ActionScript on (keyPress "b", release) { trace("'b' pressed or button clicked."); } Các ví dụ trên đều có trong movie mẫu 09keybutton.fla 2. Phát hiện qua Đối tượng phím (key object) Mặc dù nút rất hữu ích trong việc phát hiện khi người dùng nhấn phím, nhưng nút lại không thể phát hiện được trường hợp khi người dùng nhấn phím và không nhất tay. Ví dụ nếu bạn làm một game bằng Flash, và trong đó người chơi cho thể làm cho các nhân vật trong game di chuyển liên tục nếu như họ nhấn phím mũi tên và không nhât tay lên. Cho những trường hợp như vậy, bạn phải dùng đối tượng Key. Đối tượng Key là tập hợp của một số hàm (function) và hằng số (constant) được xây dựng sẳn trong Flash. Bạn có thể dùng các hàm và hằng số này để biêt được các phím đang bị nhấn hay không. Ví dụ, nếu muốn kiểm tra coi phím mũi tên trái có bị đang nhấn hay không thì dùng đoạn code sau: ActionScript if (Key.isDown(Key.LEFT)) { trace("The left arrow is down"); } Hàm Key.isDown sẽ cho ra kết quả đúng hay sai phụ thuộc vào thông số có phải là phím đang bị nhấn hay không. Hằng số Key.LEFT tượng trưng cho phím mũi tên trái. vậy khi mũi tên trái bị nhấn thì output window sẽ cho ra hàng chữ "The left arrow is down". Dưới đây là các hằng số tương tự như Key.LEFT đề cập ở trên • Key.BACKSPACE • Key.ENTER • Key.PGDN
• Key.CAPSLOCK • Key.ESCAPE • Key.RIGHT • Key.CONTROL • Key.HOME K • ey.SHIFT • Key.DELETEKEY • Key.INSERT • Key.SPACE • Key.DOWN • Key.LEFT • Key.TAB • Key.END • Key.PGUP • Key.UP Nếu bạn muốn kiểm tra xem nếu những phím bình thường đang bị nhấn thì bạn phải dùng Key.getCode để lấy mã số của phím đó để dùng trong hàm Key.isDown. Đây là code mẫu khi bạn muốn kiểm tra phím "a" ActionScript if (Key.isDown(Key.getCode("a")) { trace("The left arrow is down"); } Cho 2 ví dụ trên, bạn có thể coi source Fla 09keyobject.fla 3. Key Listener Key listener được dùng để quan sát bàn phím và thông báo cho Flash khi phím được nhấn. Ở cách thứ 2 chúng ta dùng đối tượng Key để kiểm tra coi phím có bị nhấn hay không, nhưng nó không thể biết chính xác lúc nào thì phím bị nhấn. Nếu mà người dùng nhấn phím quá nhanh, trước khi onClipEvent(enterFrame) kịp kích hoạt đối tượng key để kiểm tra thì Flash sẽ không bao giờ biết được người dùng đã nhấn phím. Một bất tiện nữa khi dùng cách thứ 2 là nếu bạn muốn người dùng nhấn phím nhiều lần thì đối tượng Key sẽ không phân biệt được đó là 1 lần nhấn dài hay là nhiều cái nhấn thật nhanh. Ví vậy ở Flash MX, MM cho chúng ta thêm một lựa chọn nữa là Key listeners. bạn có thể dùng "listener" (có thể hiểu nó như một quan sát viên) để theo dõi sự kiện của bàn phím và thông báo cho Flash ngay khi phím được nhấn. Listener có 2 phần. Phần đầu là phần tạo listener. Bạn phải ra lệnh cho listener này chú ý vào sự kiện của bàn phím. Đây là code cho tạo listener ActionScript Key.addListener(_root);
Lệnh Key.addlistner tạo listener cho đối tượng trong thông số là _root. Và đối tượng này sẽ được thông báo về sự kiện của bàn phím. Trong đoạn code trên, _root là đối tượng được thông báo về sự kiện của bàn phím. Nhưng khi nhận được thông báo thì _root phải làm gì? Vì vậy chúng ta cần phải viết code xử lý sự kiện cho _root. Ví dụ đoạn code sau sẽ được thực hiện khi _root nhận được thông báo về sự kiện bàn phím. ActionScript _root.onKeyUp = function() { trace(Key.getAscii()); } Khi người dùng nhấn phím, rồi nhất tay lên thì sẽ tạo ra sự kiện onKeyUP, và sự kiện này được thông báo tới _root (bạn có thể thay thế _root bắng bất kỳ đối tượng nào) và sau đó thì hàm Key.getAscii() sẽ cho ra kết quả là mã số ASCII tương ứng với phím vừa được nhấn, ví dụ A = 65, B = 66 .v.v Bạn có thể xem cái fla mẫu 09keylistener.fla, trogn đó có đoạn code trên (lưu ý là trong fla này sẽ không có gì hết ngoài đoạn code AS ở frame đầu tiên) Nếu bạn muốn biết phím được nhất là gì thay vì ASCII code thì bạn có thể dùng String.fromCharCode() đễ cho ra kết quả bạn muốn tìm. Thay dòng trace(Key.getAscii()); băng trace(String.fromCharCode(Key.getAscii())); Thật ra ngoài 3 cách trên, còn một cách nữa là dùng bộ xử lý sự kiện onClipEven của movie clip để theo dỏi sự kiện keyDown, keyUp, nhưng cách này không còn được dùng trong Flash MX nữa, vì vậy bạn chỉ có thể cách này trong các Flash trước MX thôi. Bài Tập: Dùng phím để di chuyển movie clip 1. Tạo một file Flash mới 2. Tạo một movie clip đơn giản 3. Gắn đoạn code này vào movie clip đó ActionScript onClipEvent(enterFrame) { if (Key.isDown(Key.LEFT)) this._x -= 5; if (Key.isDown(Key.RIGHT)) this._x += 5; if (Key.isDown(Key.UP)) this._y -= 5; if (Key.isDown(Key.DOWN)) this._y += 5; }[/b] Đoạn code trên kiểm tra 4 phím mũi tên và di chuyển movie clip theo hướng của mũi tên. Bạn hãy thử movie coi sao 4. Thay đổi đoạn code trên cho hoàn chỉnh hơn: tạo 2 biến [b]x, y[/b] có giá trị tương đương với vị trí ban đầu của movie clip, và lập giá trị cho biến [b]speed[/b] bắng 5. Mổi frame của movie, mình sẽ kiểm tra 4 phím mũi tên và điều chỉnh giá trị của 2
biến [b]x,y[/b] chứ không điều chỉnh vị trí của movie clip, sau đó phối hợp với biến [b]speed[/b] để tìm vị trí mới cho movie clip, rồi mới di chuyện movie clip tới đó: [code]onClipEvent(load) { x = this._x; y = this._y; speed = 5; } onClipEvent(enterFrame) { if (Key.isDown(Key.LEFT)) { x -= speed; } if (Key.isDown(Key.RIGHT)) { x += speed; } if (Key.isDown(Key.UP)) { y -= speed; } if (Key.isDown(Key.DOWN)) { y += speed; } this._x = x; this._y = y; } Đoạn code trên có 2 lơi điểm. Thứ nhất, chúng ta tìm vị trí mới của movie clip trước khi chúng ta di chuyển movie clip tới đó, và như vậy chúng ta có thể kiểm tra vị trí mới có hợp lý không (áo dụng rât nhiều trong game), và thứ hai là rất tiện cho chúng ta thay đổi tốc độ di chuyển của movie clip, chỉ cần thay đổi giá trị của biến speed Nhập văn bản Trong Flash, người dùng có thể nhẫp văn bản vào các khung, và bạn có thể dùng AS để lấy những văn bản đó. Để cho người dùng có thể nhập văn bản, bạn phải tạo khung input text và tạo cho 1 varible để tương ứng với gía trị trong khung input text đó. (nếu bạn nào chưa biết tạo input text thì có thể download 3 cái CD hướng dẫn ơ bên box tài liệu để tham khảo thêm) Các chức năng và thao tác làm việc với chuỗi ký tự (string Chúng ta có rất nhềiu thao tác với chuỗi ký tự: 1. Ghép 2 chuỗi lại với nhau: dùng ký hiệu +. Ví dụ bạn có variable tên là myVariable có giá trị là "Hello", và muốn ghép chữ "world" vào sau đó thì dùng như sau: myVariable = myVariable + "world" và kết quả có được sẽ là "Hello world". Bạn cũng có thể ghép nhiều hơn 2 chuỗi lại với nhau bằng cách trên. 2. Substrings. Substring là một chuổi ký tự nhỏ trong 1 chuổi ký tự khác. Ví dụ "ell"
là substring của "hello world" hay là "hello" hay là "elle" hay "hell". Bạn có thể lấy bất cứ substring nào của 1 string với cú pháp sau: String.substring(start, end));. String là đối tượng chuỗi mà bạn muốn trích ra một phần, start là số thứ tự của ký tự bắt đầu cho chuổi bạn muốn lây, và end là số thự tự bắt đâu cho phần bạn không muốn lấy. Lưu ý rắng ký tự đầu tiê sẽ có số thự tự là 0. Ví dụ với đoạn code sau, output window sẽ cho ra hàng chữ "lo W" ActionScript var myString = "Hello World."; trace(myString.substring(3,7)); Ngoài ra còn 1 cách nữa dùng tương tự như cách trên nhưng chỉ khác về thông số và có cú pháp như sau: String.substr(start, length);. thông số 1 cho số thứ tự của chữ cái đầu tiên và thứ hai cho chiều dài của chuỗi. Đoạn code sau cũng sẽ có kết quả tượng tự như ở cách 1 ActionScript var myString = "Hello World."; trace(myString.charAt(6)); Các hàm của đối tượng String Sau đây là một số hàm tiêu biểu của đối tượng String. 1. indexOf: dùng để tìm số thứ tự của một ký tự hay một chuỗi nhỏ trong đối tượng String. Nếu hàm indexOf tìm không thấy ký tự hay chuỗi nhỏ thì sẽ cho ra kết quả -1. Đây là cú pháp:myString.indexOf(substring,start)); substring là ký tự hay chuỗi mình muốn tìm, start là số thự tự mình bắt đầu tìm trong đối tượng String. Ví dụ: ActionScript var myString = "Hello World."; //output: 6 trace(myString.indexOf("W",0)); //output: 2 trace(myString.indexOf("llo",0)); 2. lastIndexOf: tương tự như indexOf nhưng chúng ta tìm ký tự cuối cùng đi ngược lên tớiký tự đầu tiên. ActionScript var myString = "Hello World."; //output: 2 trace(myString.indexOf("l",0)); //output: 9 trace(myString.lastIndexOf("l"));
3. toUpperCase/toLowerCase: dùng để đổi chuỗi từ viềt thường sang viết hoa và ngược lại ActionScript var myString = "Hello World."; //output: HELLO WORLD trace(myString.toUpperCase()); //output: hello world trace(myString.toLowerCase()); 4. length: là đặc tính của Sring dùng để tính chiều dài của chuỗi. ActionScript var myString = "Hello World."; //output: 12 trace(myString.length); Bài tập: 1. mở file 09form-noscripts.fla 2. kiểm tra tên của variable của mỗi input text field qua property panel 3. Thêm đoạn mã sau vào nút CLEAR ActionScript on (release) { clearForm(); } 4. thêm đoạn mã sau vào nút SUBMIT ActionScript on (release) { submitForm(); } 5. Thêm đoạn code sau vào frame đầu tiên của movie ActionScript function clearForm() { firstName = ""; middleInitial = ""; lastName = ""; address = ""; city = ""; state = ""; zip = ""; phone = ""; comments = "";
} function submitForm() { if (middleInitial.length == 1) { trace("Name: "+firstName+" "+middleInitial+". "+lastName); } else { trace("Name: "+firstName+" "+lastName); } } Rồi bạn test movie. Giờ thứ 10: Tạo Và Điểu Khiển Văn Bản, Creating and Controlling Text Dynamic Text Bạn cũng có thể hiển thị văn bản bằng dynamic text field. Khác với Input field mà bạn làm quen trong giờ số 9, dynamic text field chỉ cho phép AS thay đổi nội dung văn bản chứ không phải là người dùng. Vì nội dung, hình thức của văn bản có thể thay đổi bất cứ lúc nào nên mới gọi là dynamic text Trước tiên bạn tạo dynamic text bẳng dụng cụ text trên thanh toolbar, nhưng thay vì chọn "Input Text" ở trong property panel, bạn chọn "Dynamic Text" Bước kế tiếp là nối nội dung của văn bản trong dynamic text field với một variable bằng cách viết tên của variable đó vào trong khung Var ở trong propery panel. Ví dụ như bạn đặt variable myText vào trong khung Var thì khi bạn thay đổi giá trị của myText thì văn bản trong dynamic text field cũng thay đổi giống như giá trị của biến myText. Ngoài ra bạn còn có thể thay đổi một số lựa chọn cho dynamic text field như "Single", "Multiline", or "Multiline No Wrap" để xử lý trường hợp nội dung của văn bản quá dài và cònn nhiều lựa chọn khác nữa. (Nếu bạn chưa nắm vững phần này thì có thể tham khảo thêm về sử dụng Flash trong CD được post box tài liệu) Định dạng văn bản theo HTML (HTML format) Để định dạng văn bản kiểu HTML, bản phải cho phép dynamic text field chấp nhận định dạng HTML (click vào HTML icon ở trên property panel) và sau đó bạn có thể dùng thẻ HTML để định dạng văn bản của bạn. Ví dụ đoạn code này sẽ tạo văn bản sau: CODE myText = "This text is bold . "; myText += "This text is italic . "; myText += "This text is underlined . "; myText += "This text is red . "; myText += "This text is Arial Black . ";
myText += "This text is large . "; myText += "This text is . "; QUOTE This text is bold . This text is italic . This text is underlined . This text is red . This text is Arial Black . This text is large . This text is linked. Siêu liên kết (hyper link) trên có tác dụng giống như trong HTML như khác 1 điều là không có gạch dưới Sau đây là những thẻ HTML có thể dùng trong Flash MX • : viết đậm • : viết nghiêng • : gạch dưới • : kiểu chữ • : cỡ chữ • : màu chữ • : link • : Đọan văn • : Xuống hàng Đối Tượng TextFormat Còn một cách khác để định dạng cho văn bản là dùng đối tượng TextFormat. Để làm được điều này, bạn cần phải tạo ra 1 biến từ đối tượng TextFormat. Sau đó bạn có thể định giá trị cho các thuộc tính của nó. Ví dụ bạn muốn kiểu chữ Arial Black, cỡ 26, và màu đỏ thì dùng đọan code sau: CODE myFormat = new TextFormat(); myFormat.font = "Arial Black"; myFormat.size = 36; myFormat.color = 0xFF0000; textInstance.setTextFormat(myFormat); Bạn có thể dùng đối tượng TextFormat như là stylesheet trong các file HTML, một khi bạn tạo nó ra thì bạn có thể dùng nó ở bất cứ chổ nào trong movie Bạn có thể coi các đọan code trên trong file mẫu: 10formattext.fla Variable ở ngoài Flash Bạn có thể lấy biến từ ngoài trang HTML vào trong Flash để thay đổi nội dung của Flash hay dùng vào bất cứ chuyện gì. Ví dụ bạn phải làm 30 cái banner bằng Flash cho 30 trang web, thì bạn có thể chỉ làm 1 cái banner thôi, nhưng thay đỗi nội dung
tuỳ theo từng trang web. Muốn nhập văn bản hay giá trị của biến nào từ HTML, bạn chỉ cần thêm vài chữ vào sau cái tên của movie trong phần và trong HTML Đoạn mã HTML sau đây nhập giá trị của biến txtName vào trong Flash HTML và trong thẻ thì bạn thêm phần variable và giá trị vào sau tên file HTML src="10banner.swf?txtName=Dominico Savio!"> Khi movie load thì nó sẽ tự tạo variable "txtname" và đặt giá trị cho biến này bằng "Dominico Savio". Bạn có thể xem trang 10banner.html, 10banner.fla trong cái source file để xem chi tiết hơn. Bạn có thể làm nhiều giá trị một lúc cũng bằng cách này 10banner.swf?txtName=Dominico Savio!&gender=male" Ngoài lấy biến từ HTML, bạn còn có thể lấy biến từ các text file. Cách này thích hợp khi bạn có nhiều biến để nhập vào Flash, hay giá trị của các biến quá dài để gắn vào thẻ HTML. Bạn chỉ cần dùng lệnh loadVariables() để làm được điều này. Ví dụ: CODE loadVariables("10external.txt", _root); Bạn có thể coi thêm về cách dùng loadVariables() ở bên box ActionScript [Bài Tập Một ví dụ đơn giản áp dụng các điều mà bạn vừa học trong bài này là làm một cái "news ticker" như dưới đây: Dòng chữ sẽ chạy từ bên phải qua bên trái cho suốt bản tin. Bạn có thể tham khảo source fla: 10ticker.fla và test nó để có khái niệm thêm về "news ticker" 1. Tạo movie mới 2. Tạo dynamic text field, với độ cao chỉ vừa 1 hàng, và dài bằng chiều ngang của stage, để cho dễ nhận, bạn có thể viết vài chư trong đó, như là "text goes here" 3. Tạo variable cho text field này là text 4. Chọn font, nên dùng kiểu chữ tương tự như Courier New, sao cho bề ngang của mỗi chư bằng nhau 5. Con text field rồi nhấn F8 để đổi thành Movie Clip, và đặt cho nó 1 cái tên như thế nào tuỳ bạn 6. Sau đó thì gắn đoạn script sau vào movie CODE onClipEvent(load) { // đặt bản tin tickerText = "News Alert: "; tickerText += "Stock prices shoot up sharply with good earnings reports. "; tickerText += "The first manned flight to Mars prepares to leave Earth orbit. "; tickerText += "Your favorite sports team wins championship. "; tickerText += "Scientists find cure for major diseases. ";
firstChar = 0; // bắt đầu ở chữ cái đầu tiên lineLength = 50; // số chữ cái tối đa trên news ticker // thêm các khoảng trống vào trước dòng tin for(var i=0;i tickerText.length) { firstChar = 0; } } Trước tiên bạn tạo ra biến tickerText để chứa bản văn news ticker, biến firstChar để chứa giá trị của chữ cái đầu tiên sẽ thấy trong news ticker, và lineLenght là số chữ cái có thể xuất hiện một lúc trên news ticker. Và tất cả các đểu được cho vào trong bộ sử lý dữ kiện onLoad Trong onEnterFrame, Flash sẽ lấy 50 chữ cái đầu tiên bỏ vào biến text (ở trong dynamic text field) để cho nó hiển thị lên màn hình. Sau đó di chuyển sang chữ cái thứ 2 bằng câu firstChar++;, và sau cùng là kiểm tra, nếu bản tin đã được phát hết thì phát lại từ đầu. 6. Bạn có thể thay đổi giá trị của lineLenght và giá trị của bản văn trong tickerText để hiểu hơn về 2 biến này 7. Bây giờ bạn hãy thữ dùng loadVariable() để nhập bản tin từ text file vào coi có được không. Nếu không thì hãy trở lại đây hỏi mình nhe Happy flashing Giờ thứ 11: Làm việc với các con số, Chương này rất hay và bổ ích! Chúng ta đã nghiên cứu về text và strings trong các chương trước. Bây giờ chúng ta sẽ nghiên cứu về những con số. Bạn sẽ phải đụng độ với những con số trong Action Script trong nhiều trường hợp, vì vậy bạn cần phải hiểu làm sao để sử dụng chúng. Những phép toán (operator) và những hàm (function) về số Những phép toán đơn giản Chúng ta cũng đã học qua các phép toán đơn giản rồi. Bây giờ hãy xem lại nhé. Dấu + và dấu - sẽ thực hiện phép toán cộng và trừ, dấu * thực hiện phép nhân, dấu / thực hiện phép chia. Ngoài ra, bạn cũng có thể sử dụng những phép toán như +=, -=, *=, /= để làm đơn giản cho code của bạn. Lấy ví dụ hai câu lệnh dưới đây sẽ thực hiện cùng một công
việc là cộng thêm 7 và biến a CODE a = a + 7; a += 7; Những phép so sánh Những phép toán so sánh như == để so sánh hai số xem có bằng nhau không, > (lớn hơn), = (lớn hơn hoặc bằng). Trong Action Script chúng ta có thể so sánh một số nguyên với một số thực. Ví dụ như 7.2 sẽ lớn hơn 7. Math.abs Đối tượng Math chứa một tập hợp các hàm xử lý các con số. Hàm Math.abs sẽ trả về giá trị tuyệt đối của một số. Bạn hãy thử đoạn code này xem kết quả thế nào nhé: CODE trace(Math.abs(-7)); Math.round Nếu bạn có một số thực, nhưng bạn lại muốn hiển thị cho người dùng xem dưới dạng số nguyên thay vì phải cho họ xem các con số phần thập phân, bạn hãy sử dụng hàm Math.round. Thử nhé: CODE trace(Math.round(7.2)); Math.ceil, Math.floor Hai hàm khác dùng để làm tròn số thực thành số nguyên là Math.ceil và Math.floor. Hàm Math.ceil sẽ làm tròn số lên và Math.floor sẽ làm tròn số xuống. Thử nhé: CODE trace(Math.ceil(7.2)); trace(Math.floor(8.3)); Math.min, Math.max Các bạn có thể sử dụng hai hàm này để tìm số lớn hơn và số nhỏ hơn trong hai số. Ví dụ hàm Math.min(4, 5); sẽ trả về 4, Min.math(4, 5); sẽ trả về 5 Math.pow Đây là hàm để lấy lũy thừa, cũng đơn giản thôi, tham số thứ nhất là cơ số, tham số thứ hai là lũy thừa. Ví dụ bạn muốn lấy 4 luỹ thừa 3 thì viết thế này
CODE Math.pow(4, 3); Math.sqrtĐây là hàm để tính căn, nhưng mà mình xin nói trứơc luôn là ngoài hàm Math.sqrt, bạn còn có thể sử dụng hàm Math.pow với lũy thừa nhỏ hơn 1 để tính căn. Ví dụ muốn lấy căn 2 của 4 thì có thể sử dụng CODE Math.pow(4, .5); hoặc Math.sqrt(4); Cả hai cách trên đều ra cùng một kết quả là 2. Hàm số lượng giác Những hàm của object class mà các bạn được biết ở trên có vẻ như rất dễ học. Nhưng còn những hàm về lượng giác như sin, cosin thì “khó nuốt” hơn nhiều. Mặc dù bạn có thể bỏ qua những hàm này nhưng những hàm lượng giác này rất hữu ích và hay trong việc tạo những ứng dụng trong Flash. Vậy chúng ta hãy cùng tìm hiểu cách nó làm việc nhé! Hàm sin và cosin sử dụng qua Math.sin và Math.cosin, biểu diễn mối quan hệ giữa đường thẳng với đường cong của một đường tròn. Hình dưới đây biểu diễn một vòng tròn với một số điểm được đánh dấu bằng các chữ. Hãy tưởng tượng tâm của vòng tròn ở toạ độ 0,0; bán kính của đường tròn bằng 1. Vì thế, điểm trên cùng sẽ có toạ độ 0,1 và điểm tận cùng bên phải sẽ có toạ độ 1,0 Bây giờ bạn hãy tưởng tượng vòng tròn trên là một đường thẳng. Bắt đầu từ điểm “a”
có toạ độ 1,0 đến điểm 0,-1 qua -1,0 rồi qua 0,1 và cuối cùng trở về 1,0. Trong Flash, và cũng như trong các ngôn ngữ lập trình khác, chúng ta định vị một vật bất kỳ bằng toạ độ x, y của chúng. Vì thế, việc chuyển một điểm trên đường thẳng thành một điểm có toạ độ x, y trên đường tròn rất hữu dụng. Đó là những gì mà hàm sin và cosin thực hiện. Ví dụ như chúng ta đặt điểm “a” là điểm bắt đầu của đường thẳng của đường tròn, bạn có sử dụng hàm sin và cosin của 0 để tính toạ độ x, y của điểm “a” trên đường tròn. Tất nhiên, Math.cos(0) sẽ trả về giá trị 1, Math.sin(0) sẽ trả về giá trị 0. Kết quả sẽ trả về toạ độ của điểm “a” 1,0 Vậy điểm “c” sẽ nằm ở đâu trên đường tròn? Nếu duỗi đường tròn ra sẽ có độ dài bằng 6.28 lần bán kính, do bán kính bằng 1 nên độ dài sẽ bằng 6.28. Đây là xuất xứ của hằng số pi. Pi bằng 3.14, bằng một nửa độ dài của đường tròn. Độ dài của đường tròn là 6.28 thì một phần tư độ dài đường tròn là 1.57. Điểm đó tương ứng với điểm “c”. Hàm Math.cos(1.57) sẽ trả về một giá trị rất nhỏ, gần bằng 0. Hàm Math.sin(1.57) sẽ trả về giá trị gần bằng -1. Chỉ gần bằng chứ không bằng vì hằng số pi không chính xác bằng 3.14, chỉ là gần bằng thôi. Bạn có thể sử dụng cách này để chuyển các điểm trên đường tròn thành điểm có toạ độ x,y Vậy thì nó có ích như thế nào? Giả sử như bạn muốn tạo một movieclip bay quanh màn hình trong một vòng tròn. Làm sao để làm được điều đó? Nếu làm bằng frame có thể phải tốn hàng trăm frame . Hoặc cách khác là có thể dùng hàm Math.cos và Math.sin để tính chuyển sang toạ độ x,y quanh vòng tròn. Trong đoạn code dưới đây, khi cộng thêm n, movie clip sẽ chuyển động dọc theo đường tròn. Hàm Math.cos sẽ tính ra giá trị x và hàm Math.sin sẽ tính ra giá trị y, chúng sẽ được nhân thêm với giá trị của radius để tăng kích thước của đường tròn. Giá trị của centerX và centerY sẽ được cộng thêm cho các toạ độ x, y, vì thế tâm đường tròn bây giờ không còn ở 0,0 nữa mà sẽ ở vị trí 150,150 CODE onClipEvent(load) { n = 0; radius = 100; centerX = 150; centerY = 150; } onClipEvent(enterFrame) { n += .1; this._x = Math.cos(n) * radius + centerX; this._y = Math.sin(n) * radius + centerY; } Chữ (string) và số (number) Có rất nhiều cách để chuyển đổi từ chuỗi sang số và ngược lại. Ví dụ như trường hợp người dùng nhập một số vào text field, bạn sẽ nhận giá trị đó và cộng thêm một. Hãy xem đoạn code sau đây, num là một biến giá trị text field CODE
b = num + 1; Nếu num = 42, vậy thì b sẽ là 43, đúng không? Xin trả lời là sai, kết quả b là 421, đơn giản bởi vì num là một chuỗi (string) chứ không phải là một số, vì thế khi chúng ta thực hiện phép cộng num với 1 có nghĩa là cộng ký tự “1” vào chuỗi num đang có giá trị “42”. Để làm cho Flash hiểu num là một số, bạn có thể sử dụng một trong hai hàm sau đây để chuyển một chuỗi thành số. Hàm parseInt chuyển một chuỗi thành kiểu số nguyên, hàm parseFloat chuyển một chuỗi thành kiểu số thực. Ví dụ hàm parseInt(“42”) sẽ trả về giá trị là 42, nếu chúng ta sử dụng parseInt(“42.9”) thì cũng sẽ nhận được giá trị là 42 bởi vì hàm parseInt không làm tròn số, nó chỉ lấy phần nguyên mà thôi. Còn nếu sử dụng hàm parseFloat(“42.9”) bạn sẽ nhận được giá trị là 42.9, muốn làm tròn các bạn có thể sử dụng hàm Math.round(parseFloat(“42.9”)). Hàm parseFloat cũng sẽ trả về một một số nguyên nếu tham số truyền vào là một chuỗi số nguyên. Ví dụ parseFloat(“42”) sẽ cho ta số 42. Trừ trường hợp bạn muốn trả về một giá trị số nguyên, còn không bạn nên sử dụng hàm parseFloat. Một nét rất đặc biệt và rất hay của hàm parseInt là có thể chuyển một chuỗi thành một số nhưng thành nhiều dạng hệ số khác nhau. Hãy xem một ví dụ cho dễ hiểu: CODE parseInt(“FF”, 16); Hàm này sẽ trả về giá trị là 255, ý nghĩa của nó là chuyển chuỗi chứa số FF là một số hexa hệ số 16 thành một số hệ nguyên hệ số 10. Ngược lại, để chuyển từ một số sang một chuỗi, hãy sử dụng hàm toString. Hàm này sẽ hoạt động khác với hàm parse, bởi vì nó hoạt động bên trong mỗi biến, gọi hàm này sau dấu chấm (.). Xem ví dụ nhé: CODE a = 135; trace(a.toString() + 1); Kết quả sẽ là 1351. Chúng ta cũng có thể sử dụng hàm toString để chuyển một số thành một chuỗi chứa số dưới một hệ số khác. Ví dụ a.toString(16) sẽ trả về kết quả là chuỗi “ff” Số ngẫu nhiên Tạo số ngẫu nhiên là một phần quan trọng trong công việc thiết kế game và một số hoạt hình. Bởi vì nếu không có sô ngẫu nhiên thì những đoạn phim của bạn sẽ chạy giống nhau, không còn gì thú vị nữa! Để tạo số ngẫu nhiên, bạn có thể sử dụng hàm Math.random(). Hàm này sẽ trả về một giá trị từ 0.0 đến 1.0 nhưng thường thì không trả về giá trị bằng 1.0 Hãy xem ví dụ dưới đây, bạn sẽ nhận được con số ngẫu nhiên trong cửa sổ OutPut CODE
trace(Math.random()); Kết quả trả về đại loại giống như 0.023268056102097, nhưng mỗi lần lại khác nhau. Một ví dụ khác là bạn cần tạo một số ngẫu nhiên từ 1 đến 10, việc này rất đơn giản, chỉ cần nhân thêm số ngẫu nhiên cho 10. Đoạn code sau sẽ cho ta con số ngẫu nhiên từ 0.0 đến 10.0 CODE trace(Math.random() * 10); Nhưng cái chúng ta cần là con số ngẫu nhiên từ 1.0 đến 10.0 chứ không phải từ 0.0 đến 10.0, vì thế, hãy cộng thêm 1 CODE trace(Math.random() * 10 + 1); Bây giờ thì kết quả trả về là 1.0 đến 11.0 nhưng sẽ không có kết quả 11.0. Hãy sử dụng hàm Math.floor để làm tròn xuống. CODE trace(Math.floor(Math.random() * 10 + 1)); Thật ra thì con số ngẫu nhiên trong máy tính cũng chưa thật sự ngẫu nhiên. Bởi vì nó không thật sự thay đổi trong bộ vi xử lý. Thay vào đó sẽ có một con số chuẩn, một con số nào đó không biết trước được như là giờ hoặc phút của hệ thống, con số này sẽ được đưa và một biểu thức rất phức tạp, rất rất phức tạp mà chúng ta không thể đoán được. Kết quả trả về cho chúng ta kết quả dường như là ngẫu nhiên. Kết quả này sẽ được đưa và một hàm tính một lần nữa là lưu lại thành con số chuẩn để tính ngẫu nhiên cho lần tiếp theo. Hãy nghĩ về điều này, số ngẫu nhiên trong đời sống thật sự cũng không thật sự ngẫu nhiên. Nếu chúng ta giữ một mặt của con xúc xắc, thẩy đúng theo một hướng thật chính xác, chúng ta sẽ có cùng một kết quả Được rồi, bây giờ hãy thử tạo một số ngẫu nhiên từ 3 đến 7. Làm thế nào đây? Ah, có một thủ thuật cho bạn đây: CODE trace(Math.floor(Math.random() * 5 + 3); Trong phạm vi từ 3 đến 7 sẽ có tất cả là 5 số nguyên 3, 4, 5, 6, và 7. Thế còn trong phạm vi từ 50 đến 100 thì sao CODE trace(Math.floor(Math.random() * 51 + 50);
Là số 51 bởi vì trong phạm vi từ 50 đến 100 có 51 số, còn nếu từ 51 đến 100 sẽ là CODE trace(Math.floor(Math.random() * 50 + 50); Một cách để thử xem phạm vi của bạn có đúng như ý của mình không, đó là hãy thử với số nhỏ nhất và số lớn nhất thay cho Math.random(). Giá trị nhỏ nhất của hàm Math.random() là 0, hãy thử với số 0 nhé CODE trace(0 * 51 + 50); Giá trị lớn nhất của Math.random() sẽ không chính xác bằng 1.0 mà sẽ là gần bằng, vậy chúng ta hãy thử với giá trị là 0.9999 CODE trace(.9999 * 51 + 50); Hãy thử xem có đúng không nhé! Dưới đây là một ví dụ nữa rất thú vị, movie clip của bạn sẽ nhảy đến những vị trí bất kỳ CODE onClipEvent(enterFrame) { this._x = Math.random()*550; this._y = Math.random()*400; } Luyện tập: Tạo một chương trình máy tính đơn giản Hãy bắt tay vào việc thiết kế một chương trình máy tính đơn giản nhé. - Mở một movie mới trong Flash. Movie của chúng ta sẽ giống như hình dưới đây Chúng ta sẽ có 10 nút để nhập 10 số từ 0 đến 9, các nút các phép toán, phím =, dấu chấm thập phân, phím C để xóa màn hình. Một text field đặt ở trên để hiển thị những số người dùng bấm, text field này sẽ liên kết với biến display. - Trong mỗi movie clip của mỗi nút bấm, chèn đoạn code sau CODE on (release) { _parent.keyPressed(this._name); }
Khi một nút bất kỳ được nhấn thì hàm keyPressed sẽ được gọi ở level ngoài mà ở đây sẽ là level root. Hàm này sẽ truyền tên của movie clip. - Quay trở lại level root, mỗi movie clip phải có một tên riêng, không được trùng. Đặt tên của movie clip theo số của nó, ví dụ nút số 5 sẽ có tên là 5, dấu chấm thập phân có tên là “.”. Dấu cộng, dấu trừ, dấu nhân, dấu chia, dấu bằng, nút C lần lượt đặt tên là plus, minus, multiply, divide, equals, clear. - Ok, bây giờ bắt đầu viết code nhé! Code này sẽ nằm ở ngoài movie frame CODE // trước tiên, xoá màn hình cũ clearAll(); function clearAll() { display = "0"; // giá trị mặc định là 0 memory = 0; // bộ nhớ operation = "none"; // chưa có phép toán nào cả newNum = true; // đánh dấu khi nào đã nhập xong một số } Biến display là một chuỗi (string), sẽ liên kết với text field hiển thị nội dung người dùng bấm. Nó sẽ bắt đầu với giá trị bằng 0, có nghĩa là khi người dùng mới bật máy lên thì sẽ mặc định là số 0 Biến memory lưu lại con số trước đó để thực hiện phép tính. Điều này rất cần thiết, ví dụ bạn bấm số 5, +, 7 thì số 5 nhập vào, khi bạn bấm dấu cộng, màn hình sẽ được xóa và số 5 được lưu vào memory, số 7 được nhập tiếp và sẽ thực hiện phép tính 5 và 7. Phép toán người dùng chọn cũng cần được lưu vào bộ nhớ. Khi người dùng đã nhấn 5, +, 7 rồi, sau đó bấm dấu = hoặc một phép toán khác thì chương trình sẽ gọi lại phép toán cũ đã đựơc lưu trong biến operation để thực hiện phép toán trước của 5 với 7. Biến newNum như là một biến cờ hiệu để báo cho chương trình biết khi nào sẽ kết thúc một phép toán. Ví dụ khi người dùng bấm 5, +, 7 rồi sau đó bấm một phép toán khác thì kết quả sẽ được lưu lại để tính toán tiếp, lúc này phép toán chưa kết thúc, newNum = false. Còn nếu người dùng bấm dấu = thì màn hình sẽ hiện ra kết quả và kết thúc luôn phép toán để chuyển sang phép toán mới, newNum = true. - Phần tiếp theo là hàm keyPressed để xử lý khi mỗi nút được nhấn. Hàm keyPressed sẽ sử dụng cấu trúc switch thay cho cấu trúc if, then, else. Cả hai cách đều hoạt động tương tự nhưng cách viết hơi khác, bạn hãy xem nhé: CODE // hàm này được gọi bởi nút nhấn function keyPressed(keyName) { // do something different for different keys switch (keyName) { case "clear" : // khi nhấn nút C clearAll(); break; case "plus" : // các phép toán cộng, trừ, nhân, chia operate(keyName);
break; case "minus" : operate(keyName); break; case "multiply" : operate(keyName); break; case "divide" : operate(keyName); break; case "equals" : operate(keyName); break; default : // các số if (newNum) { // hiển thị số mới trên màn hình display = keyName; newNum = false; if (display == "0") newNum = true; // số không bắt đầu với số 0 } else { display += keyName; // nối thêm số vào màn hình } break; } } Khi người dùng nhấn nút C thì hàm clearAll() sẽ được gọi, tương tự khi người dùng nhấn các phép toán thì hàm operate sẽ đựơc gọi - Hàm operate sẽ thực hiện tính toán. Nó sẽ tìm ra phép toán ở giữa con số trướcđó và con số hiện thời, sử dụng hàm parseFloat để chuyển chuỗi thành số.Operation có giá trị bằng none khi nhập một số mới sau khi thực hiện xong phép toán và màn hình được xóa. CODE // thực hiện phép toán trước function operate(keyName) { switch (operation) { case "none" : // số đầu tiên memory = parseFloat(display); // lưu lại số trước break; case "plus" : // thực hiện phép toán memory += parseFloat(display); break; case "minus" : memory -= parseFloat(display); break; case "multiply" : memory *= parseFloat(display);
break; case "divide" : memory /= parseFloat(display); break; } // equals operation is like a clear, but results are displayed if (keyName == "equals") { operation = "none"; } else { operation = keyName; // remember this operation for next time } display = memory.toString(); // display result newNum = true; // prepare for next number } Luyện tập: Làm những hành tinh bay quanh quỹ đạo Trong ví dụ về lượng giác trong phần trước, bạn đã biết cách làm một movie clip quanh quay một vòng tròn. Bây giờ hãy áp dụng những kiến thức đó để làm một movie 4 hành tinh xoay quang mặt trời, hành tinh thứ 3 sẽ có một vệ tinh. - Tạo một movie mới trong Flash Tạo 6 movie clip là các vòng tròn, đặt tên lần lượt là sun, mercury, venus, earth, mars, and moon, và đặt instance name của chúng giống vậy luôn. Hãy làm cho kích thước của chúng ta khác nhau một chút nhé! - Đặt movie clip sun (mặt trời) vào giữa màn hình. Các hành tinh khác sẽ quay quanh mặt trời. Vị trí của các movie clip các hành tinh khác không quan trọng, vì chúng ta sẽ điều khiển vị trí của chúng bằng Action Script - Đặt đoạn code sau vào movie clip mercurcy: CODE onClipEvent(load) { speed = .4; radius = 40; orbit = 0; } onClipEvent(enterFrame) { orbit += speed; this._x = Math.cos(orbit) * radius + _root.sun._x; this._y = Math.sin(orbit) * radius + _root.sun._y; } Trong event load sẽ thiết lập tốc độ quay của hành tinh, khoảng cách giữa hành tinh với mặt trời. Biến speed điều khiển tốc độ quay của hành tinh, có nghĩa là số vòng quay trong một frame. Nếu speed = 6.28 thì hành tinh sẽ quay được một vòng trong
đúng một frame, và nếu speed = .4 như trong đoạn code sau thì hành tinh sẽ quay một vòng quỹ đạo mất 15.7 frame (6.28/.4). Trong mỗi lần event enterFrame xảy ra thì orbit (quỹ đạo) sẽ được cộng thêm với speed hiện thời, và hành tinh di chuyển đến vị trí mới. Toạ độ x, y của các hành tinh sẽ được hiệu chỉnh theo vị trí của mặt trời, vì vậy tâm quỹ đạo của các hành tinh chính là mặt trời. - Chạy thử movie. Lúc này, các hành tinh vẫn đứng yên, chỉ có mercurcy là di chuyển. Nếu quỹ đạo bị nghiêng thì bạn phải xem lại xem mặt trời có nằm đúng ở giữa quỹ đạo hay không. - Đặt đoạn code tương tự vào các movie clip venus, earth, and mars movie clips, nhưng mà bạn hãy thay đổi giá trị của hai biến speed và radius để làm cho hành tinh xa hoặc gần mặt trời hơn. Gợi ý cho các bạn nhé, speed của các hành tinh mercury, venus, earth, and mars là .4, .2, .1, và .05, radius cho các hành tinh là 40, 90, 150, và 210. - Chạy thử lại movie. Bây giờ thì cả bốn hành tinh đã chuyển động, chỉ còn moon là chưa chuyển động vì chưa được viết code điều khiển. - Bây giờ hãy viết code cho moon, moon sẽ có speed nhanh hơn và radius nhỏ hơn, và moon sẽ quay quanh earth thay vì quay quanh sun CODE onClipEvent(load) { speed = .5; radius = 15; orbit = 0; } onClipEvent(enterFrame) { orbit += speed; this._x = Math.cos(orbit) * radius + _root.earth._x; this._y = Math.sin(orbit) * radius + _root.earth._y; } - Bây giờ hãy chạy thử movie của bạn một lần nữa. Bây giờ tất cả các hành tinh đều đã quay rồi, nhưng còn một vấn đề. Earth không chính xác nằm giữa quỹ đạo của moon, vì sao thế? Bởi vì moon sẽ quay trước earth, vì moon nằm ở một layer trên layer của earth. Chúng ta cần phải làm cho earth quay trước rồi mới đến moon. Để làm như vậy, chọn movie clip moon, rồi chọn Modify -> Arrange -> Send to Back. Luyện tập: Làm tuyết rơi Đây là một ví dụ rất hữu ích cho việc tạo số ngẫu nhiên. Bạn có thể không cần phải dùng Action Script nhưng lúc đó bạn phải làm hàng trăm movie clip bông tuyết, mỗi cái chuyển động theo một đường. Bằng cách sử dụng Action Script và số ngẫu nhiên, bạn có thể làm cho các bông tuyết rơi với tốc độ và hướng rơi ngẫu nhiên. Bắt tay vào làm nhé! - Tạo một movie mới trong Flash - Tạo một movie clip mới, đặt tên là Snowflake và đặt tên instance của nó là snowflake - Đặt đoạn code sau vào movie clip Snowflake. Đoạn code này sẽ khởi tạo những giá