›
›

24 Giờ học Flash (Phần 3)

pdf 30 trang phuongnguyen 2370
Download
Bạn đang xem 20 trang mẫu của tài liệu "24 Giờ học Flash (Phần 3)", để 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:

  • pdf24_gio_hoc_flash_phan_3.pdf

Nội dung text: 24 Giờ học Flash (Phần 3)

  1. tạo mảng: CODE myArray = [36,23,63,71,25]; Mảng myArray có chứa 5 phần tử là số nguyên. Muốn lấy giá trị của một phần tử trong mảng thì sử dụng như sau: CODE trace(myArray[0]); Phần tử đầu tiên trong mảng luôn luôn được đánh số 0. Vì vậy, như ví dụ trên có 5 phần tử thì phần tử thứ 0 chứa giá trị 36 và phần tử thứ 4 mang giá trị 25. Một cách khác để tạo mảng là sử dụng new Array() CODE myArray = new Array(); Muốn thêm một phần tử vào cuối mảng, sử dụng câu lệnh push. Ví dụ dưới đây sẽ tạo ra một mảng giống mảng ở ví dụ trên: CODE myArray = new Array(); myArray.push(36); myArray.push(23); myArray.push(63); myArray.push(71); myArray.push(25); Những thao tác trên mảng Để kiểm tra xem mảng có bao nhiêu phần tử thì bạn có thể sử dụng thuộc tính length CODE myArray = [36,23,63,71,25]; trace(myArray.length);
  2. Còn nếu muốn lấy phần tử cuối cùng của mảng và bỏ phần tử này ra khỏi mảng thì sử dụng câu lệnh pop CODE myArray = [36,23,63,71,25]; trace(myArray); a = myArray.pop(); trace(a); trace(myArray); Đoạn code ví dụ trên sẽ trace 5 phần tử của mảng myArray. Sau đó, lấy phần tử cuối cùng của mảng tức là 25 đưa vào biến a, đồng thời bỏ phần tử 25 ra khỏi mảng. Cuối cùng trace các phần tử của mảng myArray, lúc này chỉ còn 4 phần tử. Sử dụng kết hợp push và pop để tạo một hệ thống vào sau ra trước (last in first out), thường gọi là stack. Hãy tưởng tượng đến một chồng sách, chúng ta để cuốn sách đầu tiên xuống, rồi chồng lên cuốn sách thứ 2, cuốn thứ 3, cuốn thứ 4 Khi muốn lấy sách ra thì phải lấy cuốn trên cùng trước, tức là chồng lên cuối cùng. Ngược lại với pop là shift. Nó sẽ bỏ ra phần tử đầu tiên trong mảng. Đoạn code dưới đây sẽ làm giống như đoạn trên nhưng sẽ không bỏ phần tử 25 mà sẽ bỏ phần tử 36: CODE myArray = [36,23,63,71,25]; trace(myArray); a = myArray.shift(); trace(a); trace(myArray); Ngược lại với shift là unshift. Nó sẽ chèn thêm một phần tử vào đầu mảng. Nếu bạn muốn lấy ra chỉ một phần của mảng thì có thể sử dụng hàm slice. Đối số truyền vào sẽ là vị trí đầu tiên và vị trí cuối cùng của phần cần lấy ra trong mảng. CODE myArray = [36,23,63,71,25] trace(myArray.slice(1,3)); Đoạn code trên sẽ trả về 23, 63 vì nó không kể phần tử thứ 3. Nếu không có đối số thứ 2 thì nó sẽ lấy đến cuối mảng. Một hàm khác nữa là hàm splice. Hàm này sẽ thay thế một số phần tử trong mảng bằng những phần tử khác. Sử dụng hàm này, đối số đầu tiên là vị trí của phần tử trong
  3. mảng, đối số thứ hai là số phần tử muốn xóa kể từ phần tử trong đối số đầu tiên. Truyền đối số thứ 2 là số 0 nếu không muốn xóa phần tử nào cả. Những phần tử tiếp theo là danh sách những phần tử muốn chèn vào mảng. Nói vậy cũng hơi khó hiểu nhỉ, vậy hãy xét ví dụ này nhé. Ví dụ này sẽ xóa phần tử 23 và 63 và chèn vào phần tử 17. CODE myArray = [36,23,63,71,25]; myArray.splice(1,2,17); trace(myArray); Sắp xếp trong mảng Chúng ta có thể sắp xếp một mảng bằng câu lệnh sort. Ví dụ dưới đây sẽ cho ta một mảng được sắp xếp theo thứ tự số: CODE myArray = [36,23,63,71,25]; myArray.sort(); trace(myArray); Còn ví dụ này sẽ sắp xếp theo thứ tự chữ: CODE myArray = ["Gary","Will","Jay","Brian"]; myArray.sort(); trace(myArray); Câu lệnh reverse để đảo vị trí sắp xếp của mảng. Ví dụ: CODE myArray = ["Gary","Will","Jay","Brian"]; myArray.reverse(); trace(myArray); Muốn sắp xếp mảng theo vị trí giảm dần thì sử dụng sort rồi sử dụng reverse. Sử dụng câu lệnh concat để nối hai mảng lại với nhau. Nó sẽ không làm thay đổi các mảng cũ, mà nó sẽ tạo ra một mảng mới.
  4. CODE myArray = [36,23,63,71,25] otherArray = [58,97,16]; newArray = myArray.concat(otherArray); trace(newArray); Chuyển đổi giữa chuỗi và mảng Chúng ta có thể sử dụng câu lệnh join để đổi từ một mảng thành chuỗi. Câu lệnh này cần một đối số duy nhất là ký tự ngăn cách giữa các phần tử của mảng trong chuỗi. Nếu bạn không truyền tham số này vào thì ký tự mặc định là dấu phẩy. Ví dụ dưới đây trả về 36:23:63:71:25. CODE myArray = [36,23,63,71,25] myString = myArray.join(":"); trace(myString); Câu lệnh join ít được sử dụng vì nó không cần thiết lắm, nhưng hàm split lại rất hữu dụng. Nó sẽ chuyển đổi từ một chuỗi sang mảng. Ví dụ như nó sẽ chuyển một chuỗi “36,23,63,71,25” thành một mảng trong ví dụ dưới đây: CODE myString = "36,23,63,71,25"; myArray = myString.split(","); trace(myArray); Hãy nghĩ đến chuyện chúng ta có một câu nói được lưu trong một chuỗi muốn chuyển sang mảng, mỗi phần tử trong mảng sẽ chứa một chữ. Xem ví dụ dưới đây nhé: CODE myString = "This is a test"; myArray = myString.split(" "); trace(myArray); Làm chữ chuyển động
  5. Trong ví dụ này, chúng ta sẽ lấy từng chữ trong một câu dài và hiển thị vào textfield. - Tạo movie Flash mới - Tạo một text field dynamic, cho font chữ to, khoảng 64. Cho text field nằm ở giữa màn hình và canh giữa cho text field. Đặt variable = text. - Vẽ một shape rồi chọn Insert -> Convert to Movie Clip. Đặt tên cho instance này là Actions rồi kéo nó ra ngoài vùng hiển thị. - Chèn đoạn code sau vào movie clip đó. Đầu tiên sẽ sử dụng hàm split để tách từng chữ của câu vào trong mảng. Sau đó sẽ khai báo thêm 3 biến nữa. Biến wordNum sẽ lưu một con số là số thứ tự của chữ sẽ hiển thị. Biến frameDelay sẽ lưu số frame để mỗi chữ hiện ra. Biến frameCount sẽ đếm số frame mà một chữ đã đi qua. CODE onClipEvent(load) { // get the words wordList = ("Imagination is more important than knowledge").split(" "); // set up variables wordNum = 0; frameDelay = 6; frameCount = frameDelay; // prime for first word } onClipEvent(enterFrame) { // time for new word if (frameCount == frameDelay) { _root.text = wordList[wordNum]; // display word wordNum++; // next word if (wordNum >= wordList.length) wordNum = 0; frameCount = 0; } frameCount++; } - Nào, bây giờ thì đã xong rồi, hãy chạy thử xem nào Giờ thứ 13: Sử dụng Rollovers, Rollovers Tạo hình dáng con trỏ theo ý thích Việc thay con trỏ mặc định bằng một con trỏ theo ý thích của mình rất đơn giản, chỉ cần sử dụng hàm Mouse.hide() và đặt một movie clip của mình vào vị trí của con trỏ là xong. Con trỏ có thể là bất cứ hình dáng gì cũng được, như là hình mũi tên, hình bàn tay hay một movie clip. Hình dưới đây là một ví dụ của một movie clip được dùng để làm con trỏ. Chỉ là một hình mũi tên đơn giản nhưng bạn phải chú ý rằng dấu cộng chính giữa movie clip phải nằm ngay đầu của mũi tên.
  6. Nếu bạn muốn sử dụng lại con trỏ mặc định thì chỉ cần gọi Mouse.show() Một điều cần lưu ý nữa là phải chắc rằng movie clip làm con trỏ của chúng ta phải ở trên tất cả các movie clip khác. Chúng ta có thể chọn Modify -> Arrage ->Bring To Front để đưa movie clip lên đầu nhưng chỉ là trên các movie clip trong layer đó mà thôi. Cho dù bạn có để movie clip của mình lên layer trên cùng thì cũng có thể bị che khuất bởi những movie clip được load vào bằng duplicateMovie và attachMovie. Vì vậy, chúng ta sẽ sử dụng swapDepths() để đưa movie clip này lên trên cùng. Câu lệnh swapDepths() sẽ đưa movieclip lên một level mới, level có thể là một số nguyên 0, 1, 2 9999. Vì thế chúng ta sẽ sử dụng lệnh Cursor.swapDepths(9999); để đưa movieclip của chúng ta lên trên cùng. Luyện tập: Tạo con trỏ tĩnh - Tạo một movie mới - Tạo một movie clip mới để thay thế cho con trỏ - Quay trở lại movie đầu tiên, và chúng ta sẽ thay thế con trỏ bằng cách CODE onClipEvent(load) { // hide the real cursor Mouse.hide(); // bring this movie clip to the front this.swapDepths(99999); } - Tiếp theo chúng ta sẽ gắn vị trí của movie clip vào vị trí của con trỏ CODE
  7. onClipEvent(enterFrame) { // follow the mouse this._x = _root._xmouse; this._y = _root._ymouse; } - Sau cùng, chúng ta sẽ phục hồi lại con trỏ cũ khi kết thúc movie CODE onClipEvent(unload) { // show the real cursor again Mouse.show(); } - Cuối cùng là việc chạy thử movie của mình Luyện tập: Tạo con trỏ động - Chúng ta có thể sử dụng lại movie trước - Tạo một button mới trong root. Hãy thử làm cho button có sự thay đổi trong over và down để chúng ta có thể thấy được sự khác biệt. - Chúng ta sẽ thay đổi một ít trong movie clip làm con trỏ. Tạo một frame thứ hai, vẽ thêm vài nét như hình vẽ - Đặt tên hai frame là normal và over button - Đặt câu lệnh stop(); vào frame đầu tiên của movie clip
  8. - Kéo thả một button vào root - Đặt tên movie clip làm con trỏ là cursor - Thêm đoạn code sau vào button CODE on (rollOver) { cursor.gotoAndStop("over button"); } on (rollOut) { cursor.gotoAndStop("normal"); } - Bây giờ hãy chạy thử xem nào , hãy thử click vào button xem sao. Xem kết quả bạn làm có giống hình này không nhé! Rollovers Một kỹ thuật thông dụng để hiển thị những thông tin dài là sử dụng Rollovers để đưa ra những thông tin thay vì sử dụng một button để người dùng click vào thì sẽ sang một trang khác. Ý tưởng của kỹ thuật này là khi người dùng đưa chuột lướt những vùng nào đó. Mỗi vùng sẽ hiển thị cho người dùng xem một thông tin gì đó trên màn hình. Trong ví dụ sau, sẽ có 9 vùng như thế, mỗi vùng sẽ là một tên của một hành tinh (ở bên trái). Khi chúng ta đưa trỏ chuột qua những vùng đó thì bên phải sẽ xuất hiện thông tin về hành tinh đó. Khi đưa trỏ chuột ra ngoài thì thông tin đó cũng biến mất. Chúng ta có thể sử dụng AS để làm Rollovers bằng nhiều cách Rollovers sử dụng button Chúng ta sẽ sử dụng hai event của button là on(rollOver) và on(rollOut) để viết code
  9. xử lý việc hiển thị thông tin. Hãy xem ví dụ dưới đây: CODE on (rollOver) { information.gotoAndStop("information 1"); } on (rollOut) { information.gotoAndStop("none"); } Rollovers sử dụng movie clip Flash không có hàm onClipEvent(mouseOver), vì thế chúng ta sẽ sử dụng một hàm khác. Hàm hitTest sẽ cho chúng ta biết rằng con trỏ chuột có đang ở trên movie clip hay không. Và chúng ta có thể làm như sau CODE onClipEvent (enterFrame) { if (this.hitTest(_root._xmouse,_root._ymouse, true)) { _root.information.gotoAndStop("information 1"); } else { _root.information.gotoAndStop("none"); } } Nhưng làm như vậy vẫn còn một vấn đề nữa. Bởi vì movie clip của chúng ta sẽ vẫn tiếp tục chạy từ frame này sang frame khác, chúng ta đã gọi hàm gotoAndStop() để dừng lại. Hãy tưởng tượng chúng ta có nhiều rollovers. Cái đầu tiên sẽ đưa movie clip information về frame none, mặt khác thì rollovers khác lại đưa movie clip information về một nơi khác. Điều này sẽ làm xảy ra xung đột. Vì vậy, chúng ta sẽ làm như sau. Chúng ta sẽ ghi nhớ lại rằng con trỏ chuột có đang ở trên movie clip hay không. Nếu có, nó sẽ thi hành lệnh khi con trỏ chuột ra ngoài movie clip. Còn nếu không, nó sẽ thi hành lệnh khi con trỏ chuột đi vào movie clip. Để làm điều này, chúng ta sẽ sử dụng biến over, phụ thuộc vào vị trí của con trỏ chuột mà nó sẽ mang giá trị true hoặc false. Đối với mỗi frame, chúng ta sẽ sử dụng hàm hitTest để kiểm tra vị trí của con trỏ chuột. Nếu vị trí con trỏ đối lập với over thì sẽ xảy ra sự thay đổi. Chúng ta hãy xem đoạn code sau: CODE onClipEvent (load) { over = false; }
  10. onClipEvent (enterFrame) { // kiểm tra xem liệu con trỏ chuột có đang di chuyển qua movie clip không testOver = (this.hitTest(_root._xmouse,_root._ymouse, true)); if (testOver and !over) { _root.information.gotoAndStop("information 1"); over = true; }else if (!testOver and over) { _root.information.gotoAndStop("none"); over = false; } } Rollovers sử dụng frame Như đã nói ở trên, có rất nhiều cách để làm rollovers. Ở đây, chúng ta sẽ bàn về một cách khác. Thay vì sử dụng movie clip cho mỗi thông tin cần hiển thị, chúng ta sẽ sử dụng timeline chính để lưu thông tin. Frame đầu tiên sẽ là frame none, và các frame tiếp theo sẽ chứa các thông tin. Chúng ta hãy xem hình bên dưới
  11. gotoAndStop("none"); } Lợi thế của việc sử dụng cách này là chúng ta có thể thay đổi những thông tin trong các frame rất dễ dàng, chúng ta không phải mổ xẻ vào từng movie clip. Nếu bạn quen sử dụng nhiều frame thì đây là một cách tốt cho bạn Lưu ý rằng cả ba cách trên đều cho một kết quả như nhau, không có sự khác biệt. Ở đây, chúng tôi chỉ muốn trình bày cho các bạn thấy những cách làm khác nhau mà thôi! Luyện tập: Hiện thị thông tin Nào, bây giờ các bạn hãy thử sử dụng những hiểu biết của mình về cách thay đổi con trỏ và rollovers để làm một chương trình xem nào! Chương trình này sẽ hiển thị những thông tin về các hành tinh. Chúng ta sẽ có 9 hotspot, mỗi hotspot là một hành tinh, mỗi hotspot sẽ hiển thị một hộp thông tin khi đưa trỏ chuột ngang qua. Mỗi hotspot là một button, vì thế người dùng có thể click vào để di chuyển đến một frame khác để xem những thông tin về hành tinh đó. - Đầu tiên, hãy tạo một movie mới trong Flash. Movie này sẽ có 10 frame, từ frame 2 cho đến frame 10 sẽ chứa thông tin của các hành tinh. Đặt tên frame 1 là none và để trống vùng hiển thị thông tin. Đặt 10 button ở bên trái, mỗi cái cho một hành tinh. Một movie clip summary sẽ xuất hiện để hiển thị thông tin vắn tắt về các hành tinh khi đưa trỏ chuột ngang qua. Movie clip này cũng sẽ chứa 10 frame: 1 frame trống và 9 frame chứa thông tin của 9 hành
  12. tinh. Chúng ta cũng phải chú ý việc sử dụng layer cũng rất quan trọng, trong ví dụ này thì chúng ta sẽ sử dụng 3 layer và movie clip summary sẽ được đặt ở layer trên cùng - Đặt lệnh stop(); vào frame đầu tiên, và cũng đặt trong frame đầu tiên của movie clip summary - Nào, hãy viết code nhé! CODE on (rollOver) { summary.gotoAndStop("mercury"); } on (rollOut) { summary.gotoAndStop("none"); } - Những button ở trên sẽ đưa người dùng đến những frame khác nhau để xem thông tin về hành tinh, chúng ta lại viết code cho các button CODE on (release) { gotoAndStop("mercury"); } Lưu ý rằng chúng ta có hai frame tên mercury, một frame ở timeline chính và một ở trong movie clip summary - Tạo một movie clip để thay thế con trỏ chuột, và viết code như sau CODE onClipEvent(load) { Mouse.hide(); this.swapDepths(99999); } onClipEvent(enterFrame) { this._x = _root._xmouse; this._y = _root._ymouse; } onClipEvent(unload) { Mouse.show(); }
  13. - Tiếp theo chúng ta sẽ làm cho con trỏ chuột thay đổi khi đưa con trỏ ngang qua các button. Hãy thêm đoạn code sau vào phần code của button CODE on (rollOver) { summary.gotoAndStop("mercury"); cursor.gotoAndStop("over button"); } on (rollOut) { summary.gotoAndStop("none"); cursor.gotoAndStop("normal"); } on (release) { gotoAndStop("mercury"); } Bây giờ thì movie của bạn đã xong. Bạn hãy chạy thử xem sao Giờ thứ 14: Thành phần Scroll, Scrolling Mặc dù scrollbar rất quen thuộc trong các ứng dụng Mac, Windows, các trình duyệt web nhưng mấy ai hiểu được nó hoạt động như thế nào. Lý do đơn giản là do đây là một trong những thành phần trực quan, rất dễ xây dựng mà không cần phải viết code nhiều. Mọi người sử dụng nó nhưng không suy nghĩ nhiều về nó. Kết quả là khi những nhà phát triển sử dụng Flash để tạo ra những scrollbar của riêng họ thì gặp khó khăn. Vì vậy, chúng ta hãy cùng nhau tìm hiểu 4 thành phần cơ bản của một scrollbar và hãy tìm hiểu scrollbar là gì. Hình dưới đây cho chúng ta thấy những thành phần cơ bản của một scrollbar là: mũi tên lên, mũi tên xuống, thanh trượt và khay trượt. Thanh trượt (Slider)
  14. Thanh trượt phục vụ nhiều mục đích. Đầu tiên, thanh trượt sẽ trượt trên khay trượt để cho chúng ta thấy vị trí của khối văn bản chúng ta đang xem. Nếu thanh trượt ở trên cùng thì chúng ta đang xem dòng đầu tiên của văn bản, còn nếu thanh trượt ở cuối thì chúng ta đang xem dòng cuối cùng. Như đã nói, thanh trượt sẽ được kẹp chặt và trượt trên khay trượt. Khi chúng ta kéo thanh trượt trượt trên khay trượt thì khối văn bản sẽ được cập nhật vị trí thích hợp. Mới đây, scrollbar có thêm một đặc tính mới. Thay vì kích thước của thanh trượt sẽ bị gắn sẵn với một giá trị thì kích thước này sẽ được thay đổi tùy vào độ dài văn bản. Vì thế, vị trí đầu tiên của thanh trượt sẽ ứng với dòng đầu tiên của văn bản và vị trí cuối cùng sẽ ứng với dòng cuối cùng. Ví dụ một textbox có scrollbar hiển thị được 10 dòng của một văn bản có 100 dòng thì chiều cao thanh trượt sẽ là 10% so với khay trượt. Nhưng chúng ta sẽ không bàn vấn đề này ở đây. Khay trượt (Bar) Khay trượt có chức năng chính là chứa thanh trượt và cho thanh trượt trượt trên nó. Chiều dài của khay trượt phụ thuộc vào độ dài của văn bản. Khay trượt còn có một chức năng nữa là khi ta click vào khay trượt thì khối văn bản sẽ di chuyển một trang. Khi click vào phần trên của thanh trượt thì khối văn bản sẽ di chuyển đến trang trước, còn nếu click vào phần dưới thanh trượt thì khối văn bản sẽ di chuyển đến trang sau. Các mũi tên Mũi tên lên và xuống là hai thành phần đơn giản nhất của scrollbar, nó chỉ có chức năng cho người dùng di chuyển khối văn bản từng dòng một. Những thuộc tính chung Scrollbar có một số thuộc tính chung mà chúng ta cần phải xem xét. Đầu tiên, các thành phần của scrollbar chỉ hoạt động khi chúng ta click vào, và sẽ tiếp tục hoạt động cho đến khi chúng ta thả nút chuột ra. Lấy ví dụ: nếu người dùng click vào mũi tên xuống để di chuyển một khối văn bản thì khối văn bản sẽ di chuyển từng dòng một cho đến khi chúng ta thả nút chuột ra. Một vấn đề nữa là vị trí thanh trượt phải được cập nhật liên tục khi những thành phần khác được kích hoạt. Scroll một văn bản Đầu tiên, chúng ta mở khung Properties ra để đặt tên lại cho text field. Như trong hình dưới đây, chúng ta sẽ đặt tên cho text field là scrollText Sau đó, chúng ta có thể viết code cho nó lấy dữ liệu vào. Nhưng trước hết cần đặt cho text field của chúng ta một scroll. Khi đã chọn vào text field rồi thì bạn có thể thay đổi kích thước của text field bằng cách kéo hình ô vuông ở góc dưới bên phải của text field. Còn nếu không đặt kích
  15. thước thì text field sẽ vừa đủ để hiểu thị nội dung bên trong. Thay vì điều chỉnh bằng hình vuông màu trắng thì lúc đó, chiều cao của text field sẽ được tự điều chỉnh theo kích thước nội dung bên trong, có nghĩa là nếu văn bản bên trong text field đó có nhiều dòng thì chúng ta không thể làm cho text field chỉ hiện một vài dòng để scroll. Muốn là xuất hiện scroll thì chúng ta hãy giữ phím Shift và click vào hình vuông trắng đó để trở thành hình vuông đen, lúc này chúng ta có thể điều chỉnh kích thước text field theo ý muốn. Như vậy là chúng ta đã kích hoạt scroll cho text field. Còn một số thuộc tính khác lien quan đến scroll như Thuộc tính scroll sẽ cho chúng ta biết dòng nào trong văn bản sẽ xuất hiện đầu tiên. VD như scroll = 1 thì dòng đầu tiên sẽ được hiển thị đầu tiên, nếu scroll = 2 thì dòng thứ hai sẽ hiển thị và lúc này thì dòng 1 sẽ không thấy được. Thuộc tính maxscroll cho chúng ta biết giá trị lớn nhất của scroll Thuộc tính scroll và bottomscroll cho chúng ta biết chính xác dòng văn bản nào ở trên đầu và dòng nào ở cuối Để scroll văn bản lên hay xuống bạn cần phải tăng hoặc giảm giá trị của scroll. Thế là xong! Luyện tập: Thiết kế một chương trình scroll văn bản đơn giản Bài tập này thật ra rất dễ. Trong ví dụ dưới đây, chúng ta sẽ xây dựng một chương trình với một text field dynamic để chứa văn bản và hai button như hình dưới đây - Tìm một đoạn văn bản nào đó để dán vào text field (tìm đoạn nào dài dài tí ) - Bây giờ hãy tạo một movie mới trong Flash - Sử dụng công cụ Text Tool để tạo một text field - Mở phần Properties ra và đặt tên cho text field của chúng ta là scrollText. Đặt thuộc tính Mutiline và Show Border Around Text - Dán đoạn văn bản mà bạn đã chuẩn bị vào text field - Tạo hai button giống như hai hình vẽ ở trên. Một button để điều khiển đi lên, một để đi xuống. - Nhập đoạn code sau cho button đi lên: CODE on (press) {
  16. scrollText.scroll ; } - Và nhập đoạn code này cho button đi xuống: CODE on (press) { scrollText.scroll++; } - Ok, bây giờ bạn hãy chạy thử movie của mình xem sao. Bạn hãy thử click vào button để scroll văn bản Giờ thứ 15: Các thành phần nhập liệu Các bạn có thể tạo được nhiều thành phần nhập liệu bằng Action Script, chắc hẳn các bạn đã gặp các thành phần này trong các thể HTML. Trong chương này, các bạn sẽ học cách làm checkbox, radiobutton bằng Action Script. Bạn cũng sẽ học được cách làm sao để chuyển từ thành phần này sang thành phần khác trong form bằng cách nhấn nút TAB, và làm sao để hạn chế nội dung người dùng nhập vào Các nội dung trong chương này: - Cách tạo checkbox - Cách tạo radiobutton - Sử dụng TAB để chuyển từ thành phần này sang thành phần khác - Hạn chế nội dung nhập liệu Tạo Checkbox Trong Hour 8, các bạn đã biết cách tạo một selectable movie clip. CheckBox cũng là một Selectable movie clip giống với các checkbox chuẩn sử dụng trong các hệ điều hành Mac và Windows. Để tạo ra một Checkbox bạn cần 2 button và 1 movie clip. Button đầu tiên thể hiện trạng thái Off của Checkbox, có nghĩa là khi checkbox chưa được chọn. Một button thể hiện trạng thái On, có nghĩa là cũng checkbox đó nhưng đã được chọn. Hình dưới đây là 3 checkbox làm ví dụ. Check box đầu tiên đang được chọn, cái thứ 2 chưa được chọn, cái thứ 3 thì người dùng đang chuẩn bị chọn. Các bạn có biết cách nào để cho 3 thành phần của checkbox hoạt động chung như vậy được không? Rất đơn giản, button Off sẽ được đưa vào một movie clip riêng đặt ở frame đầu tiên, bấm F6 để tạo frame kế tiếp và đặt button On vào frame thứ 2. Đặt tên
  17. frame 1 là Off, frame 2 là On. Tiếp theo, cho một câu lệnh stop(); vào frame 1 để dùng movie clip lại ngay đó. Trong mỗi button đó sẽ có một đoạn code gọi một hàm ở ngoài time line của movie clip có chứa 2 button để xử lý khi mỗi nút được nhấn. CODE on (release) { pressButton(); } Ngoài ra, trong frame Off (frame 1) sẽ còn chứa một đoạn code nữa ngoài câu lệnh stop(); CODE state = false; function pressButton() { state = !state; if (state) { gotoAndStop("on"); } else { gotoAndStop("off"); } } Biến state để kiểm tra trạng thái của checkbox. Khi click một button thì hàm pressButton sẽ được gọi. Trong đó, sẽ đổi lại trạng thái của state, có nghĩa là lúc đầu là false (chưa chọn), sau khi click sẽ thành true (đã chọn). Tiếp theo, hàm pressButton sẽ kiểm tra giá trị của biến state để đưa người dùng đến frame thích hợp. Nếu state = true thì sẽ nhảy đến frame On, còn nếu state = false thì sẽ nhảy đến frame Off. Tạo RadioButton Việc tạo một Radiobutton sẽ phức tạp hơn một chút so với checkbox. Các Radiobutton sẽ được gom vào một nhóm có quan hệ với nhau. Checkbox được sử dụng trong những trường hợp chọn lựa không có tính loại trừ, có nghĩa là người dùng có thể chọn nhiều checkbox. Ngược lại, Radiobutton được sử dụng trong những trường hợp có tính loại trừ, có nghĩa là trong một nhóm Radiobutton thì chỉ có một checkbox được chọn tại một thời điểm, không có chuyện 2 Radiobutton đều được chọn. Nếu bạn đã chọn một RadioButton, khi bạn chọn qua một Radiobutton khác thì chọn lựa cũ sẽ tự động mất đi, chuyển qua Radiobutton mới. Hình dưới đây là một nhóm Radiobutton RadioButton đầu tiên đang được chọn, nhưng người dùng đang chuẩn bị chọn
  18. RadioButton thứ 2, nếu người dùng chọn RadioButton 2 hoặc bất kỳ cái nào khác thì RadioButton đầu tiên sẽ tự động mất chọn lựa. Một RadioButton đơn giản cũng tương tự như một Checkbox, một movie clip có 2 frame để chứa 2 button biểu hiện 2 trạng thái của RadioButton. Frame đầu tiên chứa một vòng tròn rỗng, frame thứ 2 chứ một vòng tròn với dấu chấm tròn ở giữa. Điểm khác nhau giữa Checkbox và RadioButton chính là code của chúng. Code của RadioButton sẽ phức tạp hơn code của CheckBox. Phần đầu code của Radiobutton sẽ đựơc viết ở frame đầu tiên. Nó được viết ở ngoài, không nằm trong hàm nào cả, điều này có nghĩa là đoạn code này sẽ chạy khi load movie clip. CODE stop(); // kiểm tra có phải là RadioButton đầu tiên trong nhóm hay không if (_parent.radioButtons == undefined) { // tạo một array RadioButton _parent.radioButtons = new Array(); // RadioButton đầu tiên mặc định được chọn gotoAndStop("on"); state = true; } else { // các RadioButton khác không được chọn state = false; } // chèn array RadioButton ra ngoài level ngoài _parent.radioButtons.push(this); Khi người dùng click vào button, thì hàm turnOn sẽ được gọi. Điều đầu tiên là hàm turnOn sẽ duyệt qua tất cả các RadioButton (các movie clip), gọi hàm turnOff cho từng RadioButton. Nói đơn giản có nghĩa là khi click vào một RadioButton thì trước tiên tất cả các RadioButton trong nhóm đều quay về trạng thái Off, sau đó sẽ chuyển trạng thái của RadioButton được chọn thành On. CODE function turnOn() { // chuyển tất cả thành OFF for(var i=0;i<_parent.radioButtons.length;i++) { _parent.radioButtons[i].turnOff(); } // chuyển RadioButtond được chọn thành ON gotoAndStop("on"); state = true; }
  19. Tiếp theo là đoạn code cho hàm turnOff() CODE function turnOff() { gotoAndStop("off"); state = false; } Tiếp theo là xây dựng hàm getValue()để kiểm tra xem RadioButton nào đang được chọn. Hàm này sẽ được một movie khác gọi. Hàm này rất đơn giản, nó sẽ duyệt qua tất cả các RadioButton trong array RadioButton xem cái nào đang được chọn. CODE function getValue() { // duyệt tất cả các RadioButton for(var i=0;i<_parent.radioButtons.length;i++) { // tìm RadioButton nào đang được chọn if (_parent.radioButtons[i].state) { return(_parent.radioButtons[i]._name); } } // nếu không có cái nào được chọn thì trả về một chuỗi rỗng “” return ""; } Luyện tập: Chương trình trắc nghiệm Bây giờ hãy cùng nhau áp dụng những thứ đã học được về CheckBox và RadioButton để làm một chương trình trắc nghiệm đơn giản nhé. Mỗi frame sẽ chứa một câu hỏi riêng. Ví dụ frame đầu tiên sẽ chứa câu hỏi như hình dưới đây, và có những câu trả lời ở dưới
  20. Bắt đầu nhé - Tạo một movie mới trong Flash - Tạo Checkbox như đã được học rồi đó. - Rồi sau đó kéo tạo 5 bản của movie clip checkbox vào, đặt tên là: Flash, Director, Fireworks, Freehand, and Dreamweaver. - Tạo các câu trả lời và một static text kế bên Checkbox như hình ở trên. - Tạo một button Next để chuyển đến câu hỏi tiếp theo. - Chèn đoạn code sau vào frame đầu tiên CODE results = new Array(); stop(); Đoạn code trên có nhiệm vụ tạo một mảng results để lưu kết quả của các câu trả lời, đồng thời cũng dùng movie tại đây. - Khi nhấn nút Next thì sẽ chuyển sang câu hỏi tiếp theo và lưu câu trả lời hiện thời vào mảng results CODE on (release) { if (Flash.state) results.push("Flash"); if (Director.state) results.push("Director"); if (Fireworks.state) results.push("Fireworks"); if (Freehand.state) results.push("Freehand"); if (Dreamweaver.state) results.push("Dreamweaver"); nextFrame(); } - Tiếp theo, trong frame thứ hai sẽ là câu hỏi thứ hai. Vì câu hỏi thứ hai chỉ cho chọn một lựa chọn nên chúng ta sẽ sử dụng RadioButton như hình dưới đây
  21. - Tạo RadioButton như phần trước rồi đưa vào movie 3 cái tên: Windows, Macintosh, and Linux - Chèn nội dung câu trả lời vào luôn như hình ở trên - Copy nút Next vào frame 2 nhưng chúng ta sẽ thay đoạn code bằng một đoạn code khác. CODE on (release) { results.push(Windows.getValue()); nextFrame(); } Đoạn code trên sử dụng hàm getValue để kiểm tra xem RadioButton nào đang được chọn - Ok, đến đây thì bạn tự làm tiếp những câu hỏi tiếp theo nhé, tương tự như vậy thôi. Nhưng mà hãy nhớ là tên các thành phần phải khác nhau nhé. Các bạn cũng có thể sử dụng hàm trace để đưa kết quả những câu trả lời ra cửa sổ Output để xem. - Trong Hour 18, các bạn sẽ học về cách đưa dữ liệu lên server, khi đó các bạn có thể cải tiến chương trình này để đưa câu trả lời lên server để kiểm tra. Sử dụng Tab để chuyển từ thành phần này sang thành phần khác Những người sử dụng Flash 5 luôn than phiền về việc không thể sử dụng tab để chuyển đổi giữa các thành phần như vậy. Công việc chuyển đổi bằng cách nhấn phím Tab này được gọi là Tab Order, chúng ta thường thấy việc này trong hầu hết các chương trình chuyên nghiệp, ví dụ như trong một trình duyệt web, điều này sẽ mang lại nhiều thuận tiện cho người sử dụng, nó sẽ chuyển đến thành phần logic tiếp theo trong chương trình. Tuy nhiên, sự lựa chọn thành phần logic tiếp theo của Flash không phải lúc nào cũng đúng. Vì thế, Flash chỉ có thể chứa vị trí của thành phần mà thôi. Lấy ví dụ như trong hình bên dưới, Flash sẽ hiểu rằng thành phần tiếp theo thành phần đầu tiên sẽ là cái ở dưới nó chứ không phải là cái kế bên.
  22. May mắn là chúng ta có thể đặt lại Tab order cho các thành phần bằng cách đặt lại thuộc tính tabIndex. Nếu chúng ta có 4 text field như hình trên: text1, text2, text3, text4 thì chúng ta có thể sử dụng đoạn code sau: CODE text1.tabIndex = 1; text2.tabIndex = 2; text3.tabIndex = 3; text4.tabIndex = 4; Điều chú ý khi sử dụng tabIndex là phải chú ý đến label của các textfield và tránh sử dụng lại một số nhiều lần, điều này sẽ làm cho Flash bị lẫn lộn. Một điều nữa là cho dù là mặc định của Flash hay là bạn sử dụng tabIndex thì Flash cũng không tự động đặt focus cho thành phần đầu tiên, vì thế, bạn phải tự làm điều này. Để làm được như vậy, bạn sử dụng một lệnh trong đối tượng Selection để báo cho Flash biết thành phần mặc địnhđược đặt focus CODE Selection.setFocus(text1); Bạn có thể sử dụng lệnh Selection.setFocus bất cứ lúc nào cũng được để chuyển đến một thành phần mong muốn. Việc này sẽ rất quan trọng, bạn sẽ đặt con trỏ vào textfield thay vì bắt người dùng phải click vào textfield trước khi gõ. Bạn có thể sử dụng Selection.getFocus để kiểm tra xem thành phần nào đang được focus. Đoạn code dưới đây sẽ là một ví dụ. Khi người dùng chuyển focus sang một thành phần khác thì bạn sẽ biết người dùng chuyển đến đâu. CODE Selection.addListener(this); this.onSetFocus = function(oldFocus, newFocus) { trace(oldFocus+","+newFocus); } Hạn chế nhập liệu Khi người dùng nhập dữ liệu vào một textfield, cũng có lúc bạn muốn hạn chế việc nhập liệu đó. Ví dụ trong ô năm sinh, bạn chỉ muốn người dùng nhập số vào, không cần phải nhập chữ. Bạn có thể hạn chế những ký tự được phép nhập vào textfield bằng cách đặt giá trị của thuộc tính restrict của textfield đó. Nếu không đặt giá trị thì textfield có thể nhận tất cả các ký tự. Nhưng nếu thuộc tính restrict của textfield là một chuỗi ký tự thì chỉ có những ký tự trong chuỗi đó mới được chấp nhận. Dưới đây
  23. là một ví dụ về hạn chế nhập liệu, người dùng chỉ có thể nhập số mà thôi CODE text1.restrict = "01234567890"; Còn dưới đây là một ví dụ nữa nếu ô nhập liệu là email CODE text2.restrict = "abcdefghijklmnopqrstuvwxyz0123456789@.-_"; Một điều chú ý là cả các ký tự in hoa và in thường đều đựơc chấp nhận trong text2 Bạn cũng có thể hạn chế số ký tự được phép nhập vào một textfield. Cái này bạn cũng có thể không cần phải dùng AS, có thể đặt thuộc tính trực tiếp trong khung Properties CODE text1.restrict = "01234567890"; text1.maxChars = 4; Luyện tập: Kiểm tra dữ liệu nhập Bây giờ chúng ta sẽ làm một chương trình gồm một form nhập liệu, yêu cầu nhập vào tên, năm sinh, email. Và chúng ta sẽ kiểm tra các thông tin nhập vào này Tên người dùng ít nhất phải có 3 ký tự. Năm sinh phải có 4 số và đó là những năm trong khoảng 100 năm trước đến nay. Còn email ít nhất phải có 7 ký tự và có dạng a@b.c, a, b có thể là tuỳ ý nhưng c phải có ít nhất là 3 ký tự và bắt buộc phải có ký hiệu @. Đó là những yêu cầu cơ bản. Nào, bắt đầu nhé! - Tạo một movie mới - Tạo 3 textfield cho các nội dung nêu trên, đặt tên là userName, userYear, và userEmail. Đặt các variable tương ứng là userNameText, userYearText, and userEmailText. Bạn cũng cần phải tạo một dynamic textfield liên kết với variable feedback. Tạo một nút Submit. Movie của bạn sẽ giống như hình dưới này nhé - Đặt đoạn code sau vào frame đầu tiên để dừng lại và thiết lập các thuộc tính để hạn chế nhập liệu CODE stop(); // hạn chế chiều dài tối đa của tên là 64 ký tự
  24. userName.maxChars = 64; // năm sinh phải có 4 số userYear.restrict = "01234567890"; userYear.maxChars = 4; // hạn chế dữ liệu email userEmail.restrict = "abcdefghijklmnopqrstuvwxyz0123456789@.-_"; userEmail.maxChars = 128; - Tiếp theo là đặt con trỏ vào text field userName lúc movie mới bắt đầu CODE Selection.setFocus(userName); - Để kiểm tra khi nào người dùng đã nhập liệu xong, chúng ta sẽ thêm một listener để bắt event như đoạn code dưới đây CODE Selection.addListener(this); Nó sẽ báo cho chúng ta biết khi nào xảy ra event onSetFocus - Tiếp theo đặt giá trị của biến ignoreSetFocus là False, chúng ta sẽ sử dụng đến biến này sau CODE ignoreSetFocus = false; - Tiếp theo chúng ta viết hàm onSetFocus để bắt event. CODE this.onSetFocus = function(oldFocus, newFocus) { // this is a focus reset, so ignore if (ignoreSetFocus) { ignoreSetFocus = false; return(0); } // use the appropriate check function if (oldFocus == userName) { ret = checkUserName(); } else if (oldFocus == userYear) { ret = checkUserYear(); } else if (oldFocus == userEmail) { ret = checkUserEmail(); }
  25. if (!ret) { // ignore this focus change and go back ignoreSetFocus = true; Selection.setFocus(oldFocus); } } Hàm này sẽ nhận hai đối số. Đối số thứ nhất là textfield trứơc khi chuyển focus và đối số thứ hai là textfield sau khi chuyển focus. Hàm checkUserName sẽ kiểm tra tên người dùng CODE // tên phải có ít nhất 3 ký tự function checkUserName() { if (userNameText.length thisYear) { feedback = "Bạn phải nhập đúng năm sinh"; return(false); }
  26. // quay trở lại feedback = ""; return(true); } Tiếp theo là hàm chechUserEmail để kiểm tra email CODE // kiểm tra email function checkUserEmail() { if (userEmailText.length userEmailText.indexOf(".")) { feedback = "@ và dấu chấm không đúng"; return(false); } else if (userEmailText.lastIndexOf(".") > userEmailText.length-3) { feedback = "Domain không hợp lệ" return(false); } // quay trở lại feedback = ""; return(true); } - Thế là kiểm tra dữ liệu đã xong. Bây giờ chúng ta sử dụng các hàm này để kiểm tra dữ liệu nhập vào và xuất ra kết quả. Hàm sau sẽ kiểm tra từng ô nhập liệu, nếu một trong những ô trên sai thì sẽ trả về kết quả false, còn đúng hết sẽ là true CODE function checkAll() { if (!checkUserName()) { return(false); } else if (!checkUserYear()) { return(false); } else if (!checkUserEmail()) { return(false); } return(true);
  27. } - Bây giờ chúng ta viết code cho nút Submit. Khi nhấn nút Submit thì sẽ gọi hàm CheckAll và đưa sang frame tiếp theo với lời cám ơn. CODE on (release) { if (checkAll()) { nextFrame(); } } Giờ thứ 16: Menu và button động Menu hệ thống đã rất quen thuộc với các chương trình máy tính hiện nay. Hệ điều hành của chúng ta và ngay cả Flash đều có một hệ thống menu ở trên đầu. Menu là một cách tốt để đưa ra nhiều lựa chọn cho người dùng mà lại ít tốn diện tích màn hình. Trong giờ thứ 16 này, chúng ta sẽ học về: - Cách làm một menu đơn giản - Sử dụng menu trong movie - Tạo một menu xổ xuống khi chúng ta click vào một nút - Cách tạo button động - Sử dụng button động trong movie Cách làm một menu đơn giản Những bạn mới làm quen với AS thường muốn biết cách tạo menu. Thật ra để tạo một menu rất đơn giản, chúng ta đã từng biết qua rồi, hoặc có thể các bạn không để ý. Cách thức hoạt động của nó là có một button, và khi người dùng đưa con trỏ qua button đó thì một loạt những button khác sẽ xuất hiện lần lượt bên dưới button đó tạo thành một dãy menu. Hình dưới đây là một ví dụ Khi chúng ta đưa con trỏ ngang qua nút About Us thì một loạt những button khác sẽ xuất hiện như hình bên phải. Như vậy, chúng ta cần có 2 frame trong movie clip làm menu. Frame thứ nhất sẽ chỉ chứa button About Us, frame thứ hai sẽ chứa button About Us và 3 button còn lại. Ở frame thứ nhất, khi người dùng đưa con trỏ ngang qua button About Us thì sẽ nhảy sang frame thứ 2 và dừng lại ở frame 2 cho đến khi người dùng đưa con trỏ chuột ra ngoài, khi đó thì sẽ trở về frame 1. Nếu để ý, các bạn sẽ thấy cách này giống như chúng ta đã được học ở Giờ thứ 13 về RollOver. Chúng ta sẽ dùng hàm hitTest để kiểm tra xem vị trí của con trỏ chuột có nằm trong button không. Dưới đây là đoạn code xử lý việc này. Chúng ta cùng xem nhé! CODE
  28. onClipEvent(load) { previouslyOver = false; } onClipEvent(enterFrame) { // kiểm tra vị trí con trỏ currentlyOver = this.hitTest(_root._xmouse,_root._ymouse,true); // kiểm tra sự thay đổi if (!previouslyOver and currentlyOver) { previouslyOver = true; this.gotoAndStop("on"); } else if (previouslyOver and !currentlyOver) { previouslyOver = false; this.gotoAndStop("off"); } } Hãy chú ý, nếu bạn sử dụng AS để quản lý những thành phần khác đựơc đặt chung trong frame, hãy chắc rằng bạn phải đưa menu lên trên cùng bằng cách sử dụng hàm swapDepths Luyện tập: Làm một menu Nào, chúng ta bắt tay vào làm thử một menu đơn giản nhé! Menu chính của chúng ta sẽ có 3 phần: About Us, Products và Store, mỗi menu lại chứa nhiều menu con. - Việc đầu tiên là tạo một movie mới trong Flash - Tạo một button đơn giản thôi, button này không nên có chữ, và nhớ chừa chỗ trống để chúng ta đưa chữ vào sau - Tạo movie clip mới, đặt tên là About Us Menu. Tạo hai layer, một là Label và một là Buttons - Trong layer Buttons, kéo button vừa tạo vào. Đặt dòng chữ About Us lên trên - Layer Label sẽ trải ra trên 2 frame. Nhưng 2 frame trong layer Buttons sẽ khác nhau, frame đầu đặt tên là off, frame 2 đặt tên là on. - Trong frame thứ hai của layer Buttons, kéo thêm 3 button nữa vào và tạo nội dung cho chúng là History, Clients, và Partners. Nhớ đặt câu lệnh stop() vào frame đầu tiên. Movie clip của chúng ta bây giờ sẽ giống như hình bên dưới
  29. Quay trở lại level root, kéo movie clip About Us Menu từ Library vào, đặt tên là aboutUsMenu, và chèn đoạn code sau: CODE onClipEvent(load) { previouslyOver = FALSE; } onClipEvent(enterFrame) { currentlyOver = this.hitTest(_root._xmouse,_root._ymouse,true); if (!previouslyOver and currentlyOver) { previouslyOver = true; this.gotoAndStop("on"); } else if (previouslyOver and !currentlyOver) { previouslyOver = false; this.gotoAndStop("off"); } } - Bây giờ hãy chạy thử movie của bạn xem nào. Đưa con trỏ vào button About Us xem điều gì xảy ra! - Phần việc còn lại là của bạn đó. Làm tương tự cho các menu còn lại! Tạo một menu xổ xuống khi chúng ta click vào một nút Có nhiều cách để làm menu xổ xuống, và cũng có nhiều cách menu hoạt động. Chúng ta đã biết một cách trong ví dụ phần trước, khi người dùng đưa con trỏ ngang qua một button thì một loạt button khác sẽ xuất hiện dọc bên dưới tạo thành một menu, đơn giản chỉ bằng 2 frame. Menu xổ xuống sẽ hoạt động theo một cách khác: khi người dùng click vào một
  30. button, một loạt menu sẽ xuất hiện nhưng người dùng phải giữa chuột và kéo con trỏ để chọn các menu con, muốn chọn menu nào thì thả chuột tại menu đó. Chúng ta hãy nghiên cứu mổ xẻ menu xổ xuống này nhé! Chúng ta cũng sẽ tạo 2 frame như bài trước, frame đầu chứa button là tiêu đề của menu, frame hai chứa các button xếp dọc xuống thành một hệ thống menu khi tiêu đề của menu được click. Tuy nhiên cách viết code sẽ khác đi! Đây là code cho button làm tiêu đề cho menu CODE on (press) { expandMenu(); } on (release, releaseOutside) { collapseMenu(); } Khi người dùng click vào button thì nó sẽ gọi hàm expandMenu(), khi người dùng thả chuột ra thì nó sẽ gọi hàm collapseMenu() Ngoài ra thì chúng ta còn sử dụng các event on(dragOver) và on(dragOut), hai event này cũng giống với on(rollOver) và on(rollOut) nhưng mà phải giữ chuột trong khi di chuyển CODE on (dragOver) { rollOverMenu(); } on (dragOut) { rollOutMenu(); } Button tiêu đề đã gọi 4 hàm expandMenu(), collapseMenu(), rollOverMenu(), rollOutMenu(), bây giờ chúng ta sẽ viết các hàm này, đặt chúng trên frame nhé! Hàm expandMenu() sẽ đặt giá trị cho biến expanded là true và nhảy sang frame thứ hai CODE function expandMenu() { expanded = true; gotoAndStop("on"); } Hàm collapseMenu() sẽ làm ngược lại CODE function collapseMenu() { expanded = false;