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

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

1. 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; }
2. 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
3. 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)) {
4. 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)) {
5. 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: • • • •
6. • • • • • • • • • • • 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
7. • 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);
8. 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
9. 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"
10. 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"));
11. 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 = "";
12. } 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 . ";
13. 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
14. 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. ";
15. 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
16. 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
17. 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”
18. 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
19. 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
20. 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);
21. 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); }
22. 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);
23. 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);
24. 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
25. đú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á
26. trị ban đầu như vị trí của các bông tuyết, tốc độ rơi, tốc độ bị thổi ngang, độ xoay của bông tuyết. CODE onClipEvent(load) { this._x = Math.random()*550; // 0 to 550 this._y = Math.random()*400; // 0 to 400 speed = Math.random()*3+3; // 3 to 6 drift = Math.random()*2-1; // -1 to 1 rotate = Math.random()*6-3; // -3 to 3 } onClipEvent(enterFrame) { this._y += speed; this._x += drift; this._rotation += rotate; // đưa những bông tuyết lên đầu if (this._y > 400) this._y = 0; // kiểm tra hai biên if (this._x 550) this._x = 0; } Khi event enterFrame xảy ra thì bông tuyết sẽ được điều khiển rơi xuống bởi speed và bị dạt theo hướng ngang bởi drift. Bông tuyết cũng sẽ bị xoay theo giá trị của rotate. Tiếp theo là sẽ kiểm tra xem nếu bông tuyết đã rơi xuống đất rồi thì sẽ cho nó rơi lại, nếu bông tuyết bị dạt qua bên phải thì nó sẽ được đưa quay lại về bên trái - Chạy thử movie của bạn. Các bông tuyết sẽ rơi tự do. Hãy click vào cuối movie xem sao, những bông tuyết ở dưới sẽ được rơi lại. - Đựơc rồi, bây giờ hãy làm cho bông tuyết nhiều nhiều một tí bằng đoạn code sau, đặt vào timeline chính nhé! CODE // tạo 50 bông tuyết for(var i=0;i<50;i++) { snowflake.duplicateMovieClip("snowflake"+i,i); } Hàm duplicateMovieClip hoạt động cũng giống như hàm attachMovie để đưa movie clip vào trong lúc đang chạy. Điểm khác biệt là hàm duplicateMovieClip sẽ chèn từ một Movie clip có sẵn, sử dụng lại tất cả hình ảnh và code, nhưng bạn phải chắc chắn rằng mỗi movie clip phải có một tên riêng và một level riêng
27. Giờ thứ 12: Đối tượng và Mảng, Objects and Arrays Cho đến bây giờ, mỗi biến đều chứa dữ liệu riêng lẻ, mỗi biến chứa một dữ liệu. Đối với những chương trình nhỏ và đơn giản thì không có gì để nói, nhưng đến khi bạn cần sử dụng thật nhiều biến. Cũng có những lúc bạn gặp khó khăn khi nhận ra rằng bạn cần lưu rất rất nhiều dữ liệu, những biến bình thường muốn làm thì không phải dễ. ActionScript cung cấp cho ta hai thứ để lưu những loại nhiều dữ liệu. Một là Custom Object (Đối tượng), với Custom Object bạn có thể nhóm những dữ liệu riêng lẻ lại với nhau. Cách khác là Array (Mảng), một trong những phần cơ bản của các ngôn ngữ lập trình cao cấp. Trong giờ thứ 12 này, chúng ta sẽ học: - Cách tạo Custom Object - Cách sử dụng những đối tượng ActionScript được dựng sẵn - Tìm hiểu về Array (Mảng) - Làm chữ chuyển động - Tạo những vật thể chạy theo con trỏ chuột trên màn hình Tạo Custom Object Chắc hẳn các bạn đã quen thuộc với những tên như x và y để điều khiển vị trí trên movie clip. Có bao giờ bạn cảm thấy nhàm chán với những chữ x, y hay muốn thay thế nó bằng những chữ khác như positionX, positionY hay bất cứ gì bạn thích không? Việc đó quá đơn giản, chỉ cần tạo biến của bạn rồi gán giá trị cho biến của bạn thôi . Nhưng dù sao thì đó cũng chỉ là những biến riêng lẻ thôi, chỉ với một cái tên khác . Trong phần này, chúng tôi không muốn chỉ cho các bạn làm những điều như vậy mà sẽ nói về cách tạo một custom variable Object. Ví dụ, bạn có thể lưu biến x, y như sau: CODE pos = {x:10, y:20};
28. Bằng cách sử dụng hai dấu ngoặc nhọn, bạn đã tạo ra một object. Bạn có thể truy cập dữ liệu bằng cách: CODE trace(pos.x); Bạn có thể sử dụng nó như bất cứ những biến nào khác. Hãy tưởng tượng đến một cấu trúc phức tạp hơn nhiều như một record trong một cơ sở dữ liệu. Ví dụ như ta có một custom object tên record, và trong nó sẽ có những property như là name, address, phone Bạn có thể tạo object từng bước một, tạo thêm property. Xem ví dụ này nhé: CODE record = new Object(); record.name = "Gary"; record.age = 32; record.state = "Colorado"; trace(record.name); Cũng với mục đích làm cho dữ liệu dễ tổ chức hơn, custom object cũng giống như những đối tượng dựng sẵn. Hai ví dụ về những đối tượng dựng sẵn là Color và đối tượng Date. Đối tượng Color Có thể dùng ActionScript để đổi màu của một movie clip bằng cách sử dụng câu lệnh setRGB. Đó là cách dễ nhất nhưng nó sẽ không thực hiện được đối với instance của movie clip. Thay vào đó, chúng ta sẽ chuyển đến đối tượng Color của movie clip. Thực hiện cách đó bằng hàm new Color(), sau đó thì có thể sử dụng câu lệnh setRGB để thay đổi màu. Dưới đây là một ví dụ, sử dụng setRGB từ đối tượng Color của movie clip để đặt lại màu cho movie clip sang màu 0xFF0000 (màu đỏ) CODE circleColor = new Color("circle"); circleColor.setRGB(0xFF0000); Chúng ta cũng có thể lấy màu của một movie clip. Sử dụng hàm getRGB() để lấy màu của movie, nhưng nhớ sử dụng hàm toString(16) để chuyển thành giá trị hexa.
29. CODE circleColor = new Color("circle"); trace(circleColor.getRGB(0xFF0000).toString(16)); Một cách khác để đặt màu cho movie clip bằng cách tạo một đối tượng color transform ứng với 8 mục như trong hình dưới đây Đầu tiên, tạo một đối tượng custom variable. Rồi tạo các property ra, ga, ba, aa, rb, gb, bb, ab. Các ký tự đầu tiên r, g, b, a là đại diện cho từ red, green, blue và alpha. Còn ký tự thứ hai a và b là đại diện cho 2 cột bên trái và bên phải Thay vì sử dụng setRGB thì chúng ta sẽ sử dụng setTransform như trong ví dụ dưới đây: CODE circleColor = new Color("circle"); myObject = new Object(); myObject = {ra:100, rb:255, ga:0, gb:0, ba:0, bb: 0, aa: 100, ab: 0}; circleColor.setTransform(myObject); Đối tượng Date Một đối tượng dựng sẵn khác là đối tượng Date. Đối tượng này cũng có thể được xem như là một biến bình thường, nó đại diện cho một thời điểm của thời gian. Đối tượng Date được chia ra 7 phần: năm (year), tháng (month), ngày (date), giờ (hour), phút (minute), giây (second) và phần trăm giây (milisecond). Bạn có thể tạo một đối tượng Date mới bằng cách cung cấp cho nó 7 thông tin trên CODE myDate = new Date(2002,3,29,10,30,15,500);
30. Hãy thử sử dụng câu lệnh trace để kiểm tra nội dung của myDate xem nào. Có phải bạn nhận được kết quả này không? CODE Mon Apr 29 10:30:15 GMT Rất dễ hiểu, đúng không nào? Nhưng mà còn một vấn đề: tháng là Apr trong khi chúng ta truyền tham số vào cho tháng là 3, vậy phải là March chứ!? Đối tượng Date của Flash cũng hoạt động tương tự như đối tượng Date của các ngôn ngữ lập trình khác. Tháng được quy định từ 0 đến 11, rất đặc biệt, bởi ngày thì được quy định từ 1 đến 31 . Nhưng dù sao thì bạn cũng phải làm quen đi Bạn cũng có thể lấy những thành phần từ đối tượng Date. Ví dụ dưới đây sẽ lấy năm. CODE myDate.getYear() Bạn có thể lấy giờ hiện tại bằng cách đơn giản là tạo một đối tượng Date rỗng . Giờ hiện tại sẽ được đưa vào đối tượng. Ví dụ: CODE myDate = new Date(); trace(myDate); Chú ý: Flash sẽ lấy giờ của đồng hồ hệ thống trong máy bạn. Vì thế đồng hồ trong máy tính của bạn chạy sai thì giờ lấy ra sẽ sai Mảng (Array) Mảng là một phần rất quan trọng trong lập trình. Bạn sẽ gặp mảng trong hầu hết các ngôn ngữ lập trình bởi vì nó là một công cụ rất cần thiết cho những ngôn ngữ lập trình phức tạp. Mảng (Array) là một dãy dữ liệu. Trong đó thì các dữ liệu sẽ có cùng một kiểu dữ liệu với nhau, như là cùng là tên của movie clip hoặc đều cùng là vị trí của movie clip Tạo mảng Dưới đây là một ví dụ về một mảng. Sử dụng dấu ngoặc vuông và những dấu phẩy để