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

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

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

  1. for(i=1;i<=3;i++) { if (this["choice"+i].getState()) { choice = this["choice"+i]._name; } } trace("Choice: "+choice); } } ListBox Một ListBox (hộp danh sách) là một phương pháp đơn giản cho phép người dùng lựa chọn một hoặc nhiều tùy chọn. Một ListBox có thể đặt như một thiết lập của CheckBoxes hoặc RadioButtons. Nó đặc biệt hữu ích khi bạn có nhiều lựa chọn nhưng khoảng trống trên màn hình có hạn. Một khung danh sách trong như một trường text cuộn trên thực tế là như vậy. Mỗi dòng tương ứng với một lựa chọn riêng biệt của người sử dụng. Nếu có nhiều lựa chọn hơn vùng mà khung danh sách có thể hiển thị thì người dùng có thể cuộn lên và cuộn xuống để xem hết các mục trong danh sách. Khi bạn tạo một instance mới của component ListBox, bạn phải thiết đặt thông số Select Multiple (lựa chọn nhiều dòng) của nó. Nếu tham số này là true, người dùng có thể dùng các phím Shift, Command, hoặc Ctrl để lựa chọn nhiều hơn một dòng. Nếu là false, mỗi lần bạn chỉ có thể chọn được một dòng. Thêm vào đó, bạn phải thiết đặt thông số Labels (nhãn). Tuy nhiên, đây không phải là một giá trị đơn mà là một mảng các giá trị. Flash có một giao diện đặc biệt (special interface) cho việc nhập các giá trị này. Khi bạn click trên tham số Labels trong bảng Properties, bạn sẽ bắt gặp một hộp thoại cho phép bạn nhập vào một mảng các mục (item) cho các thông số khác. Bạn cũng có một tham số Data (dữ liệu) để tạo một mảng dữ liệu. Thông số Data này, giống như thông số data đã dùng với các nút radio, cho phép đoạn mã của bạn lấy thông tin bổ sung về các lựa chọn mà người dùng đã chọn. Tuy nhiên, thông số này không bắt buộc phải có. Trong movie mẫu 21listbox.fla, tôi đặt một component ListBox với ba lựa chọn trên màn hình. Chúng được thiết đặt là có thể chọn nhiều dòng. Khi người dùng click lên trên một dòng, hàm listBoxChange sẽ được gọi. Điều này được xác định bởi thông số Change Handler của nó. Hàm này cho bạn biết dòng nào (lựa chọn nào) vừa được chọn: ActionScript function listBoxChange(listBoxInstance) { trace(listBoxInstance.getValue()); }
  2. Trong movie mẫu này cũng có một component PushButton. Khi nó được click, nó sẽ thực thi hàm này. Nó sử dụng hàm getSelectedItems() để lấy một mảng các lựa chọn (choices) đã chọn trong list box. Mỗi mục chọn trong mảng là một đối tượng với một thuộc tính label và data. Vì chúng ta đã không sử dụng các thuộc tính data của hộp danh sách (list box), nên thay vào đó chúng ta sẽ lấy các nhãn (label). ActionScript function buttonPressed(buttonInstance) { if (buttonInstance == doneButton) { items = myListBox.getSelectedItems(); for(var i=0;i<items.length;i++) { trace(items[i].label); } } } Bạn cũng có thể thêm hoặc bớt các dòng từ list box bằng cách sử dụng ActionScript. Ví dụ, addItem sẽ thêm một lựa chọn bổ sung vào list box. ActionScript myListBox.addItem("Choice Four"); Bạn có thể dùng addItemAt, removeItemAt, và replaceItemAt để thay đổi list box bởi ActionScript. ComboBox Một combo box giống như một menu kéo xuống (pull-downl menu) ở đó người dùng cũng có thể gõ vào một giá trị. May thay, bạn cũng có thể tắt tùy chọn hiệu chỉnh giá trị. Khi đó combo box như một menu pull-down bình thường. Thông số để làm điều này là Editable (có thể hiệu chỉnh) trong hộp thoại Properties. Bổ sung cho tham số đó, bạn cũng có thể cung cấp các mảng chứa nhãn (Labels) và dữ liệu (Data). Một thông số khác của combo box là Row Count (số dòng). Các combo box có thể nhỏ như các list box. Khi người dùng click vào, chúng sẽ trải rộng thành một danh sách các lựa chọn. Nếu số lựa chọn vượt quá giá trị Row Count, một thanh cuộn sẽ xuất hiện ở bên phải cho phép người dùng cuộn lên xuống để lựa chọn. Cơ bản một combo box có thể có 3 trạng thái. Khi không hoạt động nó thu nhỏ thành một dòng. Khi click vào nó, combo box sẽ trải rộng thành danh sách tuỳ chọn, nếu số lựa chọn lớn hơn số dòng có thể hiển thị thì xuất hiện thêm thanh cuộn. Khi một người dùng chọn một lựa chọn mới trong combo box, bộ quản lý Click Handler sẽ được gọi. Dưới đây là một hàm đơn giản cho bạn biết nhãn của combo box
  3. đã chọn: ActionScript function comboBoxChange(comboBoxInstance) { trace(comboBoxInstance.getValue()); } Bạn cũng có thể dùng getSelectedIndex() để lấy chỉ mục (tính từ 0) của mục đã chọn. Movie mẫu 21combobox.fla là một ví dụ về component ComboBox. ScrollPane Hai component tiếp theo khác hẳn so với 5 component ở trên. Chúng không dùng để cho phép người dùng lựa chọn, nhưng dùng để hiển thị lượng thông tin lớn trong các khoảng nhỏ (cuộn mà lị). Component ScrollPane (ô cuộn) gồm có một thanh cuộn dọc, cuộn ngang và một vùng hiển thị hình chữ nhật. Thông số chính của component này là Scroll Content (cuộn nội dung). Đây là tên liên kết (Linkage name) cho một movie clip. Khi bạn chạy movie, movie clip được copy từ Library và đặt vào vùng hiển thị của ô cuộn. Sau đó các thanh cuộn sẽ cho phép người dùng nhìn thấy các phần khác nhau của movie clip. Bạn có thể xem ví dụ trong file 21scrollpane.fla. Nếu bạn thiết đặt thông số Drag Content là true, người dùng cũng có thể click vào trong vùng hiển thị và kéo hình trong đó chạy. Các thanh cuộn cũng thay đổi khi bạn kéo nội dung trong ô cuộn (chính là cái movie clip hiển thị trong ô đó). Mặc dù component ScrollPane không đòi hỏi bất kỳ ActionScript nào để làm việc, nhưng có rất nhiều hàm mà bạn có thể dùng để xác định xem phần nào của movie clip đang được xem hoặc để thay đổi chiều rộng (width) và chiều cao (height) của ô. Bạn cũng có thể dùng bảng Properties để thay đổi chiều rộng và chiều cao của ô cuộn. Khi bạn làm việc đó, ô cuộn trông bị méo mó trong Flash, nhưng no star where, nó sẽ ngon lành ngay khi bạn chạy movie. Một lệnh ActionScript rất hữu ích là loadScrollContent . Lệnh này sử dụng một địa chỉ URL và hiển thị một movie clip ở ngoài vào trong ô cuộn. ActionScript myScrollPane.loadScrollContent("myMovieClipFile.swf"); Ô cuộn có thể được dùng như một trình duyệt hình ảnh. ScrollBar
  4. Component cuối cùng là ScrollBar. Component này thêm các thanh cuộn vào trường text. Bạn có thể dùng component này mà không cần dùng bất kỳ code ActionScript nào. Chỉ việc kéo và thả một component ScrollBar vào một trường text (text field), tự nó sẽ thêm vào trường text. Component ScrollBar có ít thuộc tính Actionscript có thể sử dụng được. Ví dụ, bạn có thể sử dụng getScrollPosition() để lấy vị trí cuộn hiện tại và setScrollPosition() để thay đổi nó. Thực hành với Components Bây giờ chúng ta sẽ phối hợp 5 component khác nhau để tạo một form nhập dữ liệu: CheckBox, RadioButton, ComboBox, ListBox, và PushButton components. Tạo một Flash movie mới. Tạo ba component CheckBox. Đặt tên cho chúng là checkbox1, checkbox2, và checkbox3. Nhãn của chúng là: Macintosh, Windows, Linux. Tạo ba component RadioButton. Đặt tên cho chúng là radiobutton1, radiobutton2, và radiobutton3. Nhãn của chúng lần lượt là như trên Tạo một ComboBox component. Đặt tên cho nó là combobox. Thêm một vài nhãn (label) vào đó để người dùng có thể chọn lựa. Tạo một ListBox component đặt tên là listbox. Thêm bao nhiêu nhãn vào tuỳ bạn. Đừng lo lắng về thứ tự của chúng vì chúng ta sẽ sắp xếp lại sau. Thiết đặt thông số ListBox Multiple Selections thành false. Dùng bảng Properties để tạo cho khung danh sách (list box) rộng 200 và cao 200 pixel. Thêm một PushButton component. Đặt cho nó nhãn là Done và thông số điều khiển Click Handler là buttonPressed. Thêm dòng sau vào trong frame script. Nó sẽ sắp xếp lại nhãn của các mục trong component ListBox. ActionScript listbox.sortItemsBy("label","Asc"); Lệnh sortItemsBy làm việc rất tốt với component ComboBox. Bạn có thể dùng "label" hoặc "data" cho thông số đầu tiên. Điều đó tùy thuộc vào nhãn (label) hay các trường dữ liệu (data) sẽ được sử dụng để sắp xếp. Thông số thứ hai có thể là "Asc" (sắp xếp theo thứ tự tăng dần) hoặc "Desc" (giảm dần). Component PushButton sẽ gọi hàm buttonPressed. Chúng ta sẽ tạo hàm này theo từng đoạn nhỏ để xử lý từng phần của form. Hàm bắt đầu bằng việc tạo một mảng mới. Sau đó nó kiểm tra từng check box xem hàm getValue() của nó có phải là true không. Nếu là true, nhãn của check box đó sẽ
  5. được thêm vào mảng đó. Khi vòng lặp kết thúc, mảng own chứa bất kỳ lựa chọn nào mà người dùng đã làm với các check box. ActionScript function buttonPressed(buttonInstance) { if (buttonInstance == doneButton) { // sưu tập mảng của các CheckBoxes đã chọn own = new Array(); for(var i=1;i<=3;i++) { if (this["checkbox"+i].getValue()) { own.push(this["checkbox"+i].getLabel()); } } trace("Computers Owned: "+own); Đoạn mã tiếp theo kiểm tra tất cả các component RadioButton và ghi nhớ xem component nào đã được bật (đã được chọn): ActionScript // xác định RadioButton nào đã lựa chọn favorite = "none"; for(var i=1;i<=3;i++) { if (this["radiobutton"+i].getState()) { favorite = this["radiobutton"+i].getLabel(); } } trace("Favorite: "+favorite); Component đơn giản nhất là combo box. Đoạn mã này chỉ đơn giản trả về giá trị của nó: ActionScript // lấy giá trị của ComboBox ComboBox nextPurchase = comboBox.getValue(); trace("Next Purchase: "+nextPurchase); Để check (kiểm) nhiều lựa chọn của list box, bạn cần lặp từ đầu đến cuối mảng trả về bởi getSelectedItems(). Sau đó bạn cần xem xét thuộc tính label của mỗi mục chọn (item). Đoạn mã sau sẽ làm điều đó và xây dựng một mảng chứa các nhãn đã lựa chọn: ActionScript
  6. // sưu tập các lựa chọn của ListBox uses = new Array(); items = listbox.getSelectedItems(); for(var i=0;i<items.length;i++) { uses.push(items[i].label); } trace("Uses: "+uses); } } Nếu thực sự hiện tại bạn đang làm điều này, nên sử dụng các đối tượng có tính cấu trúc hơn là sử dụng lệnh trace. Cho ví dụ, bạn có thể tạo một đối tượng LoadVars để sau đó gửi thông tin đến máy chủ. Thay đổi kiểu dáng (Style) của một Component Các component của Flash vốn trông đã rất đẹp. Nhưng nếu tất cả các nhà phát triển Flash đều bắt đầu sử dụng chúng, thì tất cả các Flash movie của chúng ta trông sẽ na ná nhau. May thay, bạn có thể tuỳ chỉnh các component theo nhiều cách khác nhau. Bạn có thể dễ dàng tạo các giao diện riêng (custom skin) cho chúng. Dưới đây là ba cách tùy chỉnh component bằng cách sử dụng ActionScript. Global Customization (tuỳ biến chung) Sử dụng đối tượng globalStyleFormat, bạn có thể tùy chỉnh giao diện cho tất cả các component trong một lần. Đây là một ví dụ thay đổi màu chữ của tất cả các text trong tất cả các component thành màu xanh da trời (blue): ActionScript globalStyleFormat.textColor = 0x0000FF; globalStyleFormat.applyChanges(); Lệnh applyChanges chấp nhận sự thay đổi. Ngoài ra, bạn có thể thiết đặt nhiều thuộc tính khác. Dưới đây là một số thay đổi chi tiết: ActionScript globalStyleFormat.textColor = 0x0000FF; globalStyleFormat.textFont = "Arial"; globalStyleFormat.textSize = 18; globalStyleFormat.textBold = true; globalStyleFormat.applyChanges(); Bạn có thể thay đổi thành nhiều giá trị như font chẳng hạn. Số mục thay đổi trong kiểu dáng của các component quá dài để có thể liệt kê hết ở đây. Bạn có thể thay đổi
  7. màu sắc và kiểu dáng của các dấu kiểm trong CheckBoxes, các hình tròn trong những RadioButton, những mũi tên trong các thanh cuộn ScrollBars, màu nền, màu sắc của vùng tô sáng (highlight colors), màu sắc các mục chọn, v.v Hãy xem trong chương trình Flash của bạn để biết đầy đủ thông tin về danh sách này. Grouped Customization (tùy chỉnh theo nhóm) Mặc dù đối tượng globalStyleFormat đã được sử dụng bởi tất cả các component trên stage, bạn vẫn có thể tạo cho các đối tượng của bạn kiểu dáng (style) riêng biệt chỉ dùng trong một vài component mà bạn chỉ định. Bạn thực hiện điều đó bằng cách tạo một đối tượng FStyleFormat. Khi bạn làm điều này, đối tượng mới của bạn sẽ có các thuộc tính giống như đối tượng globalStyleFormat. Ví dụ, bạn có thể tạo một đối tượng kiểu dáng (style object) và thiết đặt màu sắc của nó thành đỏ tươi như dưới đây: ActionScript myStyle = new FStyleFormat(); myStyle.textColor = 0xFF00FF; Các yếu tố khác của style không được thiết đặt chính xác trong đối tượng style này. Vì thế bạn có thể áp dụng style này cho một component, mà diện mạo của style không thay đổi. Để áp dụng kiểu dáng style này vào một component, hãy sử dụng lệnh addListener: myStyle.addListener(radiobutton1); Bạn nghĩ có vẻ kỳ quặc khi sử dụng với addListener, đúng là như vậy. Hãy hiểu rằng: bạn báo cho component để tiếp nhận (listen) đối tượng style. Single Component Customization (tùy chỉnh component riêng lẻ) Bạn cũng có thể thiết đặt một cách chính xác một trong những thuộc tính của style. Tuy nhiên, bạn không thể làm điều đó bằng cách sử dụng cú pháp chấm (dot) gọn và đẹp như bạn mong muốn. Thay vì thế, bạn cần phải dùng lệnh setStyleProperty. Lệnh này sẽ đặt thuộc tính style dưới dạng một chuỗi ở tham số đầu tiên và giá trị mà bạn muốn thiết đặt cho nó ở tham số thứ hai. ActionScript checkbox1.setStyleProperty("textColor",0xFF0000); Bằng cách sử dụng ba phương pháp thiết đặt style cho các component, bạn có thể tùy chỉnh các component theo như mong muốn.
  8. Giờ thứ 22: Điều khiển âm thanh với ActionScript Có hai cách để bạn có thể cho âm thanh vào đoạn phim Flash của mình. Cách thứ nhất là đặt nó vào ngay timeline. Việc này không cần phải sử dụng mã. Cách thứ hai là sử dụng ActionScript để chơi những đoạn nhạc được lưu trữ trong Library. Tìm hiểu cách truy xuất âm thanh với ActionScript: Việc kết nối và chơi nhạc: Điều đầu tiên mà bạn cần trước khi chơi một đoạn nhạc với ActionScript là kết nối đến nó. Bạn hãy "Import" file nhạc vào Library, bấm phải chuột chọn "Linkage", rồi đánh dấu vào các phần export. Bạn cũng có thể đặt một cái tên "Identifier" khác cho đoạn nhạc thay vì để tên file nhạc. Ví dụ, nếu bạn "import" file nhạc "mysound.wav", nó sẽ xuất hiện trong Library với cái tên mysound.wav. Khi bạn chọn Linkage, và đánh dấu export, nó sẽ được đặt tên "Identifier" ngay là "mysound.wav", nhưng bạn có thể sửa thành bất kì tên gi bạn muốn(vd: nhac1). Đó chính là cái tên mà bạn sẽ sử dụng trong ActionScript. Để chơi một đoạn nhạc bằng ActionScript, bạn phải làm ít nhất ba bước: Đầu tiên là tạo một đối tượng "Sound" : ActionScript mySound = new Sound(); Thứ hai, bạn cần gắn đoạn nhạc trong thư viện vào đối tượng "Sound" này: mySound.attachSound("mySound.wav") //mySound.wav là tên bạn đã đặt trong phần "Identifier" Cuối cùng, bạn hãy ra lệnh cho đối tượng "Sound" của bạn chơi đoạn nhạc: ActionScript mySound.start(); Và đây là một đoạn đơn giản đặt vào trong một Button để chơi đoạn nhạc từ Library: ActionScript on (release) { mySound = new Sound(); mySound.attachSound("poof.wav"); mySound.start(); } Bạn có thể tham khảo một ví dụ đơn giản trong file "22playsound.fla" kèm theo quyển sách này. Bạn cũng có thể xem qua một phương pháp hơi phức tạp một tí trong file "22playsoundfunction.fla". Trong file Flash này, có một function tên là "playsound" được đặt ở timeline chính. "function" này bao gồm tất cả các mã mà bạn cần để chơi một đoạn nhạc đơn giản.
  9. ActionScript function playSound(soundName,balance) { var mySound = new Sound(); mySound.attachSound(soundName); mySound.start(); } Với việc sử dụng function này, bạn đã đơn giản hóa đoạn ActionScript nên bạn sẽ chỉ cần sử dụng đúng một dòng lệnh để chơi nhạc. Đây là đoạn mã đặt trong một Button để sử dụng function này: ActionScript on (release) { playSound("poof.wav"); } Câu lệnh "start" Câu lệnh "start" trong ví dụ trên có thể được sử dụng bằng nhiều cách. Bạn có thể thêm hai tham số nữa vào nó để thay đổi cách mà đoạn nhạc sẽ được chơi. Tham số thứ nhất bạn có thể thêm được gọi là "offset". Nó giúp bạn có thể chơi bản nhạc từ bất kì vị trí nào bạn muốn chứ không phải chơi lại từ đầu. Ví dụ, dòng lệnh này sẽ bắt đầu chơi từ vị trí thứ 1000 miligiây của đoạn nhạc(1 giây sau khi bật): ActionScript mySound.start(1000); Tham số thứ hai của câu lệnh "start" là số lần lặp lại của đoạn nhạc. Ví dụ, nếu bạn muốn bắt đầu bản nhạc tại vị trí sau 1 giây và lặp ba lần, câu lệnh sẽ như sau: ActionScript mySound.start(1000,3); Bắt đầu bản nhạc tại vị trí từ đầu và lặp ba lần: ActionScript mySound.start(0,3); Câu lệnh đi đôi với "start" là "stop". Khi bạn đang chơi một đoạn nhạc, bạn có thể đưa ra câu lệnh "stop" bất cứ khi này để ngừng hẳn đoạn nhạc. Bạn phải thêm vào tham số là tên (Identifier) của đoạn nhạc. Nếu không, lệnh "stop" sẽ ngừng tất cả các đoạn nhạc đang chơi.
  10. ActionScript mySound.stop("poof.wav"); Điều chỉnh âm lượng Bạn có thể sửa đổi đoạn trước và khi đang chơi bằng một số câu lệnh. Các câu lệnh này còn có thể điều chỉnh âm lượng của đoạn nhạc, trong tất cả loa hay chỉ từng cái. Lệnh "setVolume" là cách điều chỉnh đơn giản nhất, bạn chỉ cần cho một tham số từ 0 đến 100 là bạn có thể vặn to, nhỏ một đoạn nhạc: ActionScript mySound.setVolume(50); Trong file "22playsoundvolume.fla" bao gồm một nút Play và bốn nút khác để điều chỉnh âm lượng lần từ là 0, 10, 50 và cuối cùng là 100. Nút Play sẽ chơi một đoạn nhạc 100 lần nên bạn có thể thử điều chỉnh âm lượng trong lúc đang chơi nhạc. Chú ý là việc bạn điều chỉnh âm thanh của một đoạn nhạc sẽ không liên quan đến các đoạn nhạc khác. Vì vậy bạn có thể điều chỉnh các âm thanh khác nhau như nhạc nền và các tiếng động. Đối tượng "Sound" Đối tượng "Sound" có hai thuộc tính mà bạn nên biết đến. Thứ nhất là "duration" là độ dài của đoạn nhạc tính bằng miligiây. Thứ hai là "position" là vị trí mà đoạn nhạc đang chơi, cũng tính bằng miligiây. Ví dụ, nếu một đoạn nhạc có thuộc tính "duration" bằng 3000, có nghĩa là nó dài 3 giây. Nếu thuộc tính "position" bằng 1500 thì đoạn nhạc đang chơi ở chính giữa. Trong file "22tracksound.fla" thể hiện cách dùng "position" và "duration" để thể hiện của đoạn nhạc. Sau khi bắt đầu, một vạch đen sẽ chạy dần dần theo vị trí của đoạn nhạc. ActionScript onClipEvent(enterFrame) { // tính xem đã chơi được bao nhiêu của đoạn nhạc (giá trị từ 0.0 đến 1.0) percentPlayed = thisSound.position/thisSound.duration; // lấy độ dài của thanh barWidth = _root.bar._width; // đặt vị trí của dấu vạch _root.mark._x = _root.bar._x + barWidth*percentPlayed; }
  11. Khi đoạn nhạc kết thúc: Bạn có thể sử dụng thuộc tính "position" và "duration" để kiểm tra một đoạn nhạc hết hay chưa, khi đó hai giá trị này sẽ bằng nhau. Tuy nhiên nếu đoạn nhạc được lặp nhiều lần thì hai giá trị này sẽ bằng nhau mỗi khi cuối đoạn nhạc. Một cách tốt hơn để kiểm tra khi nào đoạn nhạc kết thúc là dùng "onSoundComplete". Đây là một function sẽ được thực thi khi đoạn nhạc kết thúc hẳn. ActionScript mySound = new Sound(); mySound.attachSound("mySound.aif"); mySound.onSoundComplete = function () { trace("sound done!"); } mySound.start(); Điều chỉnh độ cân bằng: Bạn có thể điều chỉnh âm lượng của loa này to hơn loa khác thông qua lệnh "setPan". Điều này giống như giàn máy stereo. Bạn có thể đặt giá trị từ -100 đến 100. Nếu bạn để là -100, tất cả âm thanh sẽ được phát ra bên loa trái, còn 100 sẽ là loa phải. ActionScript mySound.setPan(-100); Bạn có thể tham khảo file "22monopan.fla". Khi bạn bấm nào nút "Play" bên trái, loa trái sẽ phát ra, bấm nút "Play" bên phải, loa phải sẽ phát ra. Giờ thứ 23: Quản lý streaming cho movie, Managing Movie Streaming Trong giờ 23 chúng ta sẽ tiến hành những bước sau: • Tìm hiểu, giám sát movie khi load • Làm 1 loader đơn giản • Làm 1 loader phức tạp hơn với loading bar • Load các media movie ở bên ngoài vào flash (sound, image) Chúng ta bắt đâu với bước 1 nhé : Các Movie Flash đều có tính chất stream. Điều này có nghĩa là frame đầu tiên của movie sẽ bắt đầu ngay khi nó được nạp xuống, ko phụ thuộc vào việc cái frame cuối cùng đã được load xong hay chưa. Bạn có thể ko muốn việc này xảy ra. Ví dụ như movie của bạn là 1 đoạn animation
  12. ngắn, bạn có thể ko muốn nó bắt đầu cho đến khi movie được load hoàn toàn từ web. Có vài cách để bắt movie đợi cho đến khi loading xong. Cách thông dụng nhất là ta tạo 1 loader frame. Đó là frame đầu tiên của movie. Nó sẽ quan sát tính chất của movie và xác định xem khi nao thì movie kết thúc việc loading. Để biết được có bao nhiều frame đã được load xuống bạn sử dụng tính chất _framesLoaded, còn để biết tổng số Frame của movie bạn sử dụng tính chất: _framesTotal. Bạn có thể sử dụng điều này trong 1 số trường hợp đơn giản. Ví dụ bạn đặt ở frame đầu tiên lệnh stop(); Ở đó ta tạo 1 button cho phép người sử dụng tiếp túc. Khi người sử dụng click vào btn bạn có thể dùng 1 đoạn script tương tự như sau để xác định xem phải làm gì tiếp theo: CODE on (release) { if (_root._framesLoaded == _root._totalFrames) { play(); } else { textDisplay = "Wait a few seconds and press again."; } } Nếu như movie chưa được load hết thì text field mà ta đã liên kết qua var textDisplay sẽ thông báo cho user. Bạn cũng có thể sử dụng kĩ thuật này trong 1 phần của 1 movie dài. Ví dụ btn có thể nằm ở Frame 50 và chỉ để người sử dụng tiếp tục khi mà 50 frames tiếp theo đã sẵn sàng. Ta dùng đoạn code sau để thực hiện: CODE onClipEvent(load) { _root.textDisplay = "Waiting for the next sequence to load."; _root.stop(); } onClipEvent(enterFrame) { if (_root._framesLoaded >= 100) { _root.play(); } } Đây là phần đầu cơ bản của 1 loader script. Tuy nhiên có các cách khác chính xác hơn để giám sát việc loading hơn là tính số frames. Bạn có thể sử dụng getBytesLoaded and getBytesTotal để tính tổng số file và số file đã load. Đây là đoạn script đặt vào trong 1 mc ở frame đầu tiên của movie. Ở frame đầu tiên bạn chú ý đặt thêm lệnh stop();
  13. CODE onClipEvent(enterFrame) { if (_root.getBytesLoaded() == _root.getBytesTotal()) { _root.play(); } } Ở mỗi lần enterFrame điều kiện sẽ được kiểm tra và khi thỏa mãn tức movie được load hoàn toàn thì movie sẽ được play tiếp tục Chúng ta tiếp tục tiến hành làm 1 loader đơn giản để cho toàn bộ movie được load trước khi nó vượt qua frame 1 : 1.Mở 1 file mới. 2.Ở frame đầu ta tạo 1 keyframe 3.Tạo thêm 1 kf mới ở frame 2 Để có thể test cái loader 1 cách rõ ràng thì frame 2 nên chứa 1 movie tối thiểu là 100 K. Cách tốt nhất để tăng dung lượng là ta import 1 video. 4.Trở lại frame 1, chúng ta muốn có 1 movie chờ cho đến khi toàn bộ movie đã được load trước khi tiép tục sang frame 2 > cho 1 lệnh stop(); vào frame 1 này. Ta tạo 1 shape đơn giản và convert nó sang mc và tống cổ nó sang 1 góc màn hình mà người xem ko nhìn thấy (chuối rừng). Ta cho đoạn script sau vào: CODE onClipEvent(enterFrame) { bytesLoaded = _root.getBytesLoaded(); bytesTotal = _root.getBytesTotal() percentLoaded = Math.round(100*bytesLoaded/bytesTotal); _root.displayText = "Loading: "+percentLoaded+"%"; if (bytesLoaded == bytesTotal) { _root.play(); } } đoạn script sẽ kiểm tra getBytesLoaded để xem liệu movie đã kết thúc việc loading chưa. Ở đây ta tính số phần trăm đã load (percentLoaded) và cho hiển thị con số này qua biến displayText ở root level Bạn đừng quên tạo 1 dynamic text field và đặt var cho nó là displayText nhe. Sẽ rất khó kiểm tra khi bạn test cái movie này với Flash player trên máy vì movie của bạn chạy nhanh quá, ko kịp nhìn cái loader. Bởi vậy nên publish nó lên 1 trang web rùi test . Hoặc bạn có thể giả thiết lập 1 cai modem 56 K Nào bây giờ goto website và test bạn sẽ thấy quá trình loading được hiện ở số phần trăm ở text field. Khi đạt đến 100% movie sẽ tiếp tục play. Bạn có thể kiểm tra movie của bạn với file: 23simpleloader.fla 3.Để cho cái loader của chúng ta thêm đẹp, chúng ta tiến hành bước 3 làm 1 loader
  14. phức tạp hơn có thêm 1 cái progess bar nữa nhé : các bước làm như sau: 1.Bắt đầu 1 movie mới 2.Vẽ 1 hình chữ nhật rộng với border 3.Chọn toàn bộ cái hình chữ nhật này và đặt chúng vào 1 mc bằng cách chọn insert và convert to mc. 4.Click 2 cái vào mc mới này để edit nó 5.Tách riêng phần fill và border của cái hình chữ nhật ra làm 2 layer 6.Copy cái fill của hình chữ nhật và tạo 1 layer mới để paste nó vào. Layer này nên nằm ở trước và layer có chứa hình chữ nhật cũ thì nằm sau nó. 7.Chọn hình chữ nhật mới này(cai fill) và chọn cho nó màu tối hơn. đăt vị trí khớp với cái border, phía trên hình chữ nhât cũ 8.Bây giờ ta convert nó sang mc và đặt instance name là barFill Double click vào mc mới này và ta chỉnh reg. point cho nó là góc tận cùng bên trái. Trở lại movie chính, ta tạo thêm 1 layer mới. Và đặt 1 dynamic text ở đó. Đặt var cho nó là displaytext, bạn nhớ chọn font chữ đẹp dẹp và màu cũng đẹp đẹp 1 chút nhé Ở movie của timeline chính ta đặt đoạn code sau vào mc chính của chúng ta: CODE onClipEvent(load) { // initialize variables bytesLoaded = 0; bytesTotal = _root.getBytesTotal(); } Đoạn code enterFrame phải làm nhiều việc nhất. Nó có nhiệm vụ theo dõi số bytesLoaded và bytesTotal liên tục mỗi Frame. Biến percentLoaded có giá trị từ 0 đến 100. Và nó được sử dụng chính để thay đối _xscale của thanh Bar. Bạn còn nhớ là ta đã mặc định điểm reg. point của thanh Bar này ở góc bên trái ko? Chính vì vậy mà thanh bar sẽ dài ra theo giá trị của biến percentLoaded sang phía bên phải Khi mà số bytesLoaded = số bytesTotal thì display text sẽ hiện thông báo: "Loading Complete" và chuyển movie sang frame tiếp theo. CODE onClipEvent(enterFrame) { // if there is more to load
  15. if (bytesLoaded < bytesTotal) { // get current amount loaded bytesLoaded = _root.getBytesLoaded(); // calculate percentage percentLoaded = Math.round(100*bytesLoaded/bytesTotal); // if there is still more if (bytesLoaded < bytesTotal) { // display text displayText = "Loading: "+percentLoaded+"%"; // set scale of bar barFill._xscale = percentLoaded; // no more left } else { // display complete displayText = "Loading Complete."; // fill out bar barFill._xscale = 100; // go to next frame _root.nextFrame(); } } } Ko biết hướng dẫn như trên các bạn đã hình dung ra cách làm chưa nhỉ. Nếu các bạn chưa hiểu thì cbt sẽ post thêm hình minh họa vào Timeline của chúng ta tôt nhất nên phân ra như sau nha: -Timeline chính sẽ gồm có 3 layer. Layer thứ nhất sẽ chứa cái loader bar mc mà chúng ta đã tạo. Nó sẽ kéo dài trong 2 frames. -Layer thứ 2 sẽ gồm có 2 keyframes ở fr1 và fr2. Ở kf 1 là lệnh stop(); Layer thứ 2 ta sẽ cho 1 button. Người sử dụng sẽ click vào button để xem tiếp phần còn lại của movie. Trong btn cho đoạn code sau: CODE on (release) { play(); } -Layer thứ 3 bắt đầu từ frame thứ 3 sẽ chứa cái movie cần load của bạn
  16. Các bạn có thể xem thêm ở file : 23complexLoader.fla Có những lúc bạn cần tạo các movie lớn có các media thì ta ko cần phải tạo 1 movie đầy những file media trong đó mà có thể load các file media có sẵn này từ bên ngoài. Nhờ vậy bạn có thể xây dựng 1 trình diễn lớn bằng cách sử dụng những file bên ngoài. Để làm được điều này chúng ta sẽ tìm hiểu các bước sau: Thế chỗ movie hiện thời Cách đơn giản để làm điều này là bạn chia cắt movie này ra thành các phần riêng. Khi 1 movie kết thúc ta có thể chuyển đến 1 movie khác. Tất cả những gì bạn cần là dùng lệnh loadMovie Ví dụ, bạn có 1 frame ở cuối 1 movie dài. Khi người xem đến đó, họ có thể click vào 1 button và xem 1 movie khác. Đoạn code đơn giản như sau: CODE on (release) { loadMovie("animation2.swf"); } Hoặc là bạn có thể cho người sử dụng lựa chọn animation mà họ muốn xem tiếp. Ở cuối movie sẽ có 2 buttons chứa các movie khác nhau. Việc tạo liên kết giữa các movie là rất quan trọng sao cho khi user có thể trở lại movie cũ ban đầu. Bạn có thể xem ví dụ ở file 23movie1.fla để biết thêm làm thế nào để trình bày tác phẩm của bạn với các files có sẵn. Loading a Movie Clip Với lệnh loadMovie bạn có thể thay thế chỗ của 1 mc bằng 1 mc khác. Ví dụ để thay thế chỗ của myMovieClip bằng file otherMovie.swf bạn chỉ cần làm: CODE myMovieClip.loadMovie("otherMovie.swf); Khi sử dụng loadMovie bạn có thể dùng getBytesTotal and getBytesLoaded functions để thông báo cho người dùng bằng text hoặc bằng progess bar mà chúng ta đã làm ở trên quá trình load. Nếu muốn preload một movie clip để sẵn sàng lúc cần hiển thị, chúng ta sẽ tạo một movie trống, không có gì ở trong ngoại trừ một câu lệnh stop(). Sau đó chúng ta load mc vào mc trống này (ko hiển thị trên stage). Khi load hoàn toàn thì movie của chúng ta đã sẵn sàng ở frame đầu tiên. Movie file này sẽ nằm sẵn sàng trong browser cache của user. Bây giờ khi đến đoạn có sử dụng mc này thì lệnh loadMovie sẽ làm việc. Lúc đó sẽ nhanh hơn vì file đã được download hoàn toàn về rồi. Sau đó sử dụng lệnh gotoAndPlay(2) để qua frame 1.
  17. Loading a JPEG myMovieClip.loadMovie("picture.jpg"); Flash MX cũng cho phép ta khả năng load 1 file JPEG ở ngoài vào. Cách làm tương tự như cách chúng ta load movie ở trên, chỉ cần thay đổi địa chỉ movie bằng địa chỉ của file JPEG là ok: CODE myMovieClip.loadMovie("picture.jpg"); mc myMovieClip bây giờ được thay thế chỗ bằng 1 mc có chứa bitmap image này. Bạn có thể kiểm tra và xem ví dụ ở file 23loadipeg.fla Loading a Sound Có 2 cách để play 1 sound từ 1 file bên ngoài. Cả 2 đều sử dụng sound object và lệnh loadSound. Các sound file này cần ở dạng phổ biến là mp3. Sau đây là 1 ví dụ cho cách thứ 1, để chơi 1 event sound. Ở đây toàn bộ sound sẽ được load vào bộ nhớ trước và sau đó được chơi nếu như có lệnh start(); CODE on (release) { mySound = new sound(); mySound.loadSound("mysound.mp3",false); mySound.start(); } Flash sẽ ghi nhớ là lệnh start đã được đưa ra thậm chí khi sound mới chỉ bắt đầu download. Khi sound được load xong thì nó sẽ được play ngay lập tức CODE on (release) { mySound = new sound(); mySound.loadSound("mysound.mp3",true); } Cách thứ 2 là ta sử dụng true ở param thứ 2. Giá trị true này sẽ bảo với flash đó là 1 stream sound. Ngay khi sound được load phần nào thì sẽ bắt đầu chơi ngay trong lúc phần còn lại vẫn tiếp tục được load. Nếu người dùng có kết nối mạng tốt thì sẽ nghe được toàn bộ sound khi load. Ghi chú là bạn ko cần phải sử dụng lệnh start với 1 streaming sound. Tuy nhiên bạn
  18. cần phải chú ý khi sử lí file MP3. Ví dụ nếu bạn sử dụng file nhạc mp3 với 128 Kbps hay 160 Kbps thường dùng để nghe thì nó sẽ là 1 file quá lớn để có thể stream vói internet, đặc biệt nếu người sư dụng dùng modem. 32 Kpsb hay ít hơn sẽ thích hợp hơn khi ta sử dụng stream. Chúng ta tổng kết lại nhe: Streaming là 1 cách rất tốt giúp chúng ta sử dụng dễ dàng hơn với 1 movie lớn. Ta có thể sư dụng AS để kiểm tra 1 quá trình loading. Bạn có thể giữ movie ở frame thứ nhất và chỉ để nó tiếp tục khi toàn bộ movie đã được load. Bạn cũng có thể thông báo cho người dùng quá trình loading bằng text thông báo số % hoặc 1 bằng 1 progess bar chẳng hạn. Bạn có thể chia movie ra thành cách file riêng và sử dụng loadMovie để nhảy từ file này tới file khác như người sử dụng muốn. Các file bên ngoài có thể được load vào bằng các cách khác nhau. Ngoài movie bạn có thể load 1 file ảnh, file nhạc nữa. Một số câu hỏi và trả lời sau có thể giúp bạn nắm rõ bài hơn: Câu 1: ta có thể load 1 mc, vậy có thể unload chúng ko?? -Trả lời: có, bằng lệnh unloadMovie Câu 2: bình thường thì flash cần bao lâu để load trước khi nó start?? -Trả lời: ngay frame đầu tiên. Bởi vậy bạn cần sử dụng lệnh stop nếu như muốn nó đợi trước khi tiếp tục. Câu 3: 2 cách để xác định khi 1 movie được load hoàn toàn?? -Trả lời: cách 1 dùng getBytesLoaded == getBytesTotal function cách 2 dùng _frameLoaded property và _totalFrames property. Ngoài ra bạn có thể xem thêm các bài viết sau: Cách tạo 1 preloader đơn giản Cách tổng quát để tạo 1 loader đẹp: Ngoài ra về loadMovie, loadSound cũng có rất nhiều bài. Bạn chịu khó search ha Giờ thứ 24: Vẽ với AS, Hour 24. Drawing with ActionScript Đây là h cuối cùng, cũng là giờ rất thú vị, hy vọng các bạn cảm thấy dzui dzẻ khi vẽ bằng AS . CBT ko có kinh nghiệm dịch bài, với lại nhìn vào mấy bài text dày đặc
  19. chữ là tối mắt tối mũi nên nhiều chỗ dịch lung tung, theo ý thích bởi vậy có chỗ nào diễn đạt tối nghĩa, ko đúng thì các bạn cứ thẳng thắn góp ý, đừng thương tiếc . Trong giờ này chúng ta sẽ học cách: • Vẽ đường thẳng và đường cong • Tô màu 1 vùng • Để người sử dụng vẽ với chuột • Đặt các hình đã vẽ trong 1 movie clip mới • Tạo các text fields 1a.Drawing lines -Để vẽ 1 đường thẳng, việc đầu tiên cần làm là định nghĩa các giá trị của lineStyle, nó dày như thế nào nè, rùi có màu gì và độ alpha. CODE lineStyle(thickness, color, alpha); Màu (color): giá trị được đưa ra dưới dạng số thập lục phân hexa, ví dụ: 0x000000 là màu đen, 0xffffff: trắng , chúng ta có thể nhìn vào bảng color mixer để biết thêm Độ trong suốt(alpha): min = 0; max=100; Độ dày (thickness): độ dày nhỏ nhất là 0, còn lớn nhất là bao nhiu thì cbt ko biết . Với độ dày 1 cái line có độ dày là 1 pixel, còn nếu ta cho giá trị là 0 (hairline) thì nó vẫn có độ dày là 1 pixel . Tuy nhiên chúng khác nhau ở chỗ: với hairline nếu như chúng ta thay đổi scale của nó thì độ dày của nó vẫn ko thay đổi. Các bạn thử đoạn code sau, và thay đổi giá trị độ dày nhé: CODE lineStyle(0,0x000000,100); moveTo(20,50); lineTo(200,200); _xscale=300; _yscale=300; Nhìn đoạn code trên ta thấy xuất hiện lệnh: CODE moveTo(20,50) Để vẽ 1 đường thẳng ta cần xác định 2 điểm: đầu và cuối. Mỗi điểm lại được xác đinh với 2 giá trị x và y > moveTo là điểm đầu, điểm đặt bút. Như vậy ở câu trên ta đặt bút tại x=20; y=50. > lineTo là điểm tiếp đến. Ta có x= 200; y=200. Như vậy chúng ta đã vẽ được đường thẳng nối từ điểm (20,50) đến (200,200).
  20. Chú ý: 1. nếu như các bạn ko nêu điểm moveTo thì nó tự mặc định là điểm (0,0) 2. nếu như các bạn vẽ thêm các line tiếp theo với lineTo thì điểm đặt bút được mặc định là điểm cuối cùng của line trước. Ví dụ để vẽ 500 đường lung tung trên màn hình ta có đoạn code đơn giản sau: CODE // set line style lineStyle(2,0x000000,100); // draw 500 lines for(var i=0;i<500;i++) { // pick random start point x1 = Math.random()*550; y1 = Math.random()*400; // pick random end point x2 = Math.random()*550; y2 = Math.random()*400; // move to start point moveTo(x1,y1); // draw to end point lineTo(x2,y2); } Bây giờ các bạn thử play trò này xem sao, thử thay đổi độ alpha, color or thickness của nó Mọi người thử copy and paste đoạn code sau xem hiện ra gì nào : CODE // set line style lineStyle(2,0x999999,100); for(var x=-400;x<550;x+=10) { // draw diagonal strip from left to right moveTo(x,0); lineTo(x+400,400); // draw opposite strip moveTo(550-x,0); lineTo(550-x-400,400); }
  21. 1b.Drawing Curves Tương tự khi bạn đã biết cách vẽ line rồi thì vẽ curveTo ko có gì là khó. Nó chỉ có thêm 1 chút giá trị thôi. Ta có đoạn code: CODE lineStyle(3,0x000000,100); moveTo(150,200); curveTo(275,275,400,200); Như đã biết moveTo là điểm bắt đầu, anker1 ha. curveTo(control_x, control_y, anker2_x, anker2_y); Control_point là tiếp tuyến của 2 điểm anker với đường cong anker2 là điểm cuối cùng của curve. Các bạn có thể đọc thêm 1 số bài viết trong diễn đàn về đường cong bezier để hiểu rõ thêm . Chúng ta play tiếp với đoạn code sau: CODE lineStyle( 1, 0x0000FF, 100 ); moveTo(200,200); curveTo(250,200,300,200); curveTo(300,250,300,300); curveTo(250,300,200,300); curveTo(200,250,200,200); Olala, tại sao chúng ko hiện ra các curve mà lại là 1 hình vuông. Nguyên nhân là do chúng ta cho các giá trị control point ở giữa 2 điểm kia Hãy thử thay đổi 1 chút xem chúng ta có gì nào: CODE var bend = 42; moveTo(200,200); curveTo(250,200-bend,300,200); curveTo(300+bend,250,300,300); curveTo(250,300+bend,200,300); curveTo(200-bend,250,200,200); sử dụng biến bend để thay đổi control point ta được 1 hình trong hơi méo rùi . Về phần này plz đọc thêm các topic trong box AS
  22. 2. Drawing Filled Areas Trước hết để có thể tô màu cho 1 vùng ta cần phải vẽ 1 hình khép kín ha. Sau đó dùng lệnh beginFill để vẽ: CODE beginFill(color of fill, alpha of fill) Ví dụ đoạn code sau: CODE lineStyle( 3, 0x000000, 100 ); beginFill( 0xFF0000 ); moveTo(175,100); lineTo(375,100); lineTo(375,300); lineTo(175,300); lineTo(175,100); endFill(); Nếu như 1 vùng được cắt bởi line lần thứ 2 thì ở chỗ đó nó sẽ ko có màu nữa. Dựa vào đó ta có thể tạo nên 1 số hình thú vị . Bạn thử copy đoạn code sau xem nó hiện ra cái gì nào và chỗ nào được tô màu, chỗ nào ko : CODE lineStyle(3,0x000000,100 ); beginFill(0xFF0000); moveTo(250,50); lineTo(308,230); lineTo(155,120); lineTo(345,120); lineTo(192,230); lineTo(250,50); endFill(); Có cách khác tốt hơn để vẽ 1 star, nó cho phép chúng ta qui định các giá trị ban đầu. Bạn thử xem file fla 24betterstar.fla xem sao Pause 3.Vẽ với chuột Phần tiếp theo trong sách này có đoạn code để user vẽ với chuột, thành thật mà nói, nếu bạn đã đọc đoạn code của DS post bên phần Flash hack thì bạn sẽ thấy nó khác nhau 1 trời 1 vực như thế nào Nếu bạn đã đọc đoạn code của DS thì đừng nên đọc tiếp đoạn code hướng dẫn trong
  23. cuốn sách này làm gì. CBt thấy là ko cần thiết phải dịch chỗ này nhưng trót rùi nên tôn trọng quyển sách, cbt dịch cho đầy đủ vậy 1.Tạo 1 shape đơn giản, convert to mc. 2.Copy đoạn code sau vào mc (cbt đã phân tích kèm) CODE onClipEvent (load) { // cho các giá trị cho kiểu line _root.lineStyle(0, 0x000000, 100); } //khi chuột được dzí xuống thì bắt đầu vẽ onClipEvent(mouseDown) { // ok to draw draw = true; // xác định điểm start để vẽ startX = _root._xmouse; startY = _root._ymouse; _root.moveTo(startX,startY); } //khi thả chuột ra thì ko vẽ nữa onClipEvent(mouseUp) { // don't draw anymore draw = false; } //bắt đầu onClipEvent (enterFrame) { if (draw) { //lấy vị trí hiện tại của chuột newX = _root._xmouse; newY = _root._ymouse; //nếu như vị trí khác với vị trí ban đầu if ((newX != startX) or (newY != startY)) { //vẽ 1 line tới vị trí mới _root.lineTo(newX,newY); // reset location for new time startX = newX; startY = newY; } } }
  24. Phần này chỉ có vậy 4.Tạo 1 movie clip riêng cho các hình đã vẽ Những gì chúng ta đã làm ở trên chỉ là vẽ 1 cách đơn giản trên stage, nó có bất lợi là có thể bị bất kì mc nào che khuất. ko thể di chuyển. Khi chúng ta đặt những cái này vào trong 1 mc thì thuận tiện hơn rất nhiều. ta có thể thay đổi _x, _y, rotation, alpha, scale Để tạo 1 new mc ta dùng lệnh : CODE my_mc.createEmptyMovieClip("tên của new mc", level của nó) Ví dụ : CODE this.createEmptyMovieClip("myMovieClip",1); myMoveClip.lineStyle(0,0x000000,100); myMoveClip.moveTo(100,100); myMovieClip.lineTo(200,200); Như vậy bạn đã có 1 mc mới tên là myMovieClip, level 1, có chứa các hình vẽ trên. Nếu bạn muốn viết nhanh hơn thì có thể viết lại như sau: CODE this.createEmptyMovieClip("myMovieClip",1); with(mymovieClip){ lineStyle(0,0x000000,100); moveTo(100,100); lineTo(200,200); } Lệnh createEmptyMovieClip này còn có rất nhiều tác dụng khác như ta có thể attach thêm movie vào đó hay là sao chép (duplicateMovieClip) Rùi bi giờ bạn hãy thử tạo 1 mc mới đi nào Có 1 bài hướng dẫn vẽ bông tuyết khá đẹp trong cuốn sách, tuy nhiên code được chia nhỏ thành các function khá dài dòng và mất công. trong khi trong diễn đàn của chúng ta có nhiều đoạn code về làm tuyết hay hơn rất nhiều: bài thế trời làm tuyết của DS trong box hướng dẫn thực hành. Đặc bịêt hợp với chủ đề này là bài dùng 100% bằng AS của Raider (tìm trong mục lục), trong đó có đoạn code rất hay. Bởi vậy cbt sẽ ko dịch về đoạn code trong sách này nữa.
  25. Để biết thêm chi tiết xin xem file fla 24snowflakes.fla 5.Textfield Đây là phần cuối cùng, chúng ta sẽ học cách tạo 1 text field và sau đó là làm 1 effect flying words. Tạo Text Để tạo 1 text chúng ta cần tạo 1 ô text (text field) với lệnh : CODE createTextField("text_name", level , vị trí _x, vi trí _y, chiều rộng,chiều dài); Sau đó là text hiện lên trong text field đó: CODE text_name.text = "Nội dung text"; Ví dụ đoạn code sau, mình phân tích trong đó luon cho nhanh: CODE //tạo 1 ô chữ tên my , level 0, _x=0, _y=170, width=550, height=60 createTextField("myTextField",0,0,170,550,60); //text myTextField.text = "Welcome to VNFX"; // giá trị true là sử dụng font chúng ta add trong thư viện, false là ta sử dụng font mặc định myTextField.embedFonts = true; //mặc định các tính chất của text myTextFormat = new TextFormat(); //loại chữ, cỡ, màu, vị trí myTextFormat.font = "Arial"; myTextFormat.size = 48; myTextFormat.color = 0x330000; myTextFormat.align = "center"; //liên kết những tính chất này với ô text của chúng ta myTextField.setTextFormat(myTextFormat); Chú ý khi sử dụng embedFont ta cần phải chọn 1 font trong thư viện click vào góc phải trên cùng của thư viện, chọn font mà bạn muốn, sau đó click chuột phải, linkage,
  26. export, IDname Nếu bạn muốn tạo 1 Input text thì cần phải cho type của textField là input, sau đó có thể set thêm các variable để máy có thể nhận info từ user Còn rất nhiều các tính chất trong textField và textFormat class, các bạn nên đọc thêm help để trang trí cho textField của mình Lý thuyết chỉ có vậy, nào bây giờ chúng ta sẽ làm effect flying words CBT ko dám nhận xét nhiều về đoạn code và cách làm trong cuốn sách này, tuy nhiên nó được chia nhỏ thành các function gây rắc rối, dài dòng cho người đọc, lại còn phải tạo thêm mc trên stage, có chỗ hạn chế nữa Thôi thì cứ đưa ra vậy CODE function createText(n,text) { // create a new movie clip this.createEmptyMovieClip("text"+n,n); mc = this["text"+n]; // set the text format myFormat = new TextFormat(); myFormat.font = "Arial"; myFormat.color = 0x000000; myFormat.size = 24; myFormat.align = "center"; // create a new text field mc.createTextField("myTextField",1,-100,-20,200,40); mc.myTextField.text = text.toUpperCase(); mc.myTextField.embedFonts = true; mc.myTextField.setTextFormat(myFormat); // return reference to this movie clip return(mc); } function createAllText(textList) { // loop through array of text for(var i=0;i<textList.length;i++) { // create movie clip with this text mc = createText(i,textList[i]); // set random location mc._x = Math.random()*450+50; mc._y = Math.random()*350+25; // set scale to nothing
  27. mc._xscale = 0; mc._yscale = 0; // set scale variable to negative amount mc.scale = 0-i*100; } } function init() { // create array of text var words = "Love,Peace,Destiny,Llamas,Fate,History,Cheese,Rainbows,Tiny Rocks"; var textList = words.split(","); // create all text movie clips createAllText(textList); // remember how many there are numWords = textList.length; } function moveText() { // loop through words for(var i=0;i 300) { mc._visible = false; // set scale of movie clip to scale when it is a positive number } else if (mc.scale > 0) { mc._xscale = mc.scale; mc._yscale = mc.scale; } } } init(); stop(); Sau đó bạn tạo 1 mc trên stage và nhét đoạn code sau vào: CODE onClipEvent(enterFrame) { _parent.moveText(); }
  28. Cuối cùng vào thư viện, trong menu của thư viện ta chọn font ruì linkage, rùi export với tên Arial. effect này ko có gì khác là ta tạo 1 array chứa các ô text, sau đó các text hiện ra từ từ và dần dần phóng to lên, đến 1 kích thước nào đó thì biến mất. Để các text hiện ra từ từ ta chỉ cần mặc định scale ban đầu của text là ko, sau đó dùng thêm 1 var nữa. Dần dần phóng to lên thì ta thay đổi scale thôi. Thấy đoạn code trên dài dòng quá nên cbt viết lại cho nó đơn giản bớt như sau CODE function a(){ wordArr=new Array("vnfx","flash","actionscript"); //ta tạo 3 mc chứa 3 text field for(var n=0;n 300) { removeMovieClip(this); } else if (this.scale > 0) { this._xscale=this._yscale = this.scale; } } } } a();
  29. //cho lặp lại sau 5 s setInterval(a, 5000); Kết thúc rồi có thắc mắc kiện cáo gì các bạn cứ góp ý ha