Giờ thứ 01: Làm quen với as giờ thứ 02: Sử dụng Action panel

tải về 0.7 Mb.

trang	5/5
Chuyển đổi dữ liệu	30.08.2016
Kích	0.7 Mb.
	#29200

1 2 3 4 5

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);

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 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.

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

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.

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

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
- 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 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;
}

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

Ví dụ trên sử dụng button cho các hotspot, và chúng ta hãy lưu ý rằng các button sẽ xuất hiện trong tất cả các frame, nhưng thông tin cần hiển thị thì chỉ xuất hiện ở một vài frame.
Bây giờ công việc viết code của chúng ta gần giống như làm rollovers bằng button. Nhưng chúng ta không cần phải gọi hàm gotoAndStop từ movie clip information.

CODE

on (rollOver) {

gotoAndStop("information 1");
}

on (rollOut) {

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 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();
}

- 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)

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 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) {

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 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 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;
}
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

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

- 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.

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 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ự
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();
}

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 < 3) {
feedback = "Bạn phải nhập ít nhất 3 ký tự"
return(false);
}

// quay trở lại feedback

feedback = "";
return(true);
}
Hàm checkUserYear sẽ kiểm tra năm nhập vào

CODE

// năm phải từ khoảng 100 năm đến nay

function checkUserYear() {
// lấy năm
today = new Date();
thisYear = 1900+today.getYear();

// kiểm tra đã nhập

if (parseInt(userYearText) == Math.NaN) {
feedback = "Bạn phải nhập năm sinh.";
return(false);

// nếu năm sinh quá sớm (không thật)

} else if (parseInt(userYearText) < thisYear-100) {
feedback = "Bạn phải nhập đúng năm sinh, từ 100 năm trước đến nay";
return(false);

// nếu năm sinh là ở trong tương lai :)

} else if (parseInt(userYearText) > thisYear) {
feedback = "Bạn phải nhập đúng năm sinh";
return(false);
}

// quay trở lại

feedback = "";
return(true);
}

Tiếp theo là hàm chechUserEmail để kiểm tra email

CODE

// kiểm tra email

// 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);

}
- 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

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

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 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;
gotoAndStop("off");
}

Hàm rollOverMenu sẽ kiểm tra biến expanded và sẽ di chuyển đến frame thích hợp nếu expanded = true. Có nghĩa là khi người dùng click chuột vào button tiêu đề thì menu sẽ xổ xuống và người dùng phải giữ chuột trong lúc di chuyển để chọn, nếu thả chuột ra thì menu sẽ thu lại.

CODE

function rollOverMenu() {

if (expanded) {
gotoAndStop("on");
}
}

function rollOutMenu() {

if (expanded) {
gotoAndStop("off");
}
}

Chúng ta sẽ viết code tiếp cho các menu xổ xuống. Chúng đều là các button, và chúng ta sẽ viết event on(release) cho chúng để bắt sự kiện khi người người thả chuột trên button đó, có nghĩa là người dùng chọn menu đó. Khi đó, nó gọi hàm collapseMenu() rồi thực hiện công việc của mình, ở đây đơn giản chỉ gọi hàm trace. Chúng ta cũng viết event on(dragOver) và on(dragOut) cho các button này để giữ menu lại khi người dùng giữ chuột và kéo qua các button cũng như sẽ thu menu lại khi người dùng thả chuột ra hoặc kéo ra ngoài.

CODE

on (release) {

collapseMenu();
trace("History Button Pressed");
}

on (dragOut) {

rollOutMenu();
}

Điều cuối cùng cần phải làm là phải thay đổi thuộc tính cho các button. Trong phần khung properties của button, chuyển Track as Button thành Track as Menu Item. Điều này sẽ làm cho button nhận được sự kiện release thay vì sẽ nhận press trước.

Còn có rất nhiều cách để làm menu, nó phụ thuộc vào mục đích sử dụng của bạn và khả năng sử dụng AS của mỗi người

Button động

Một cách khác cũng tương tự để làm menu xổ xuống là sử dụng button động. Chúng ta có thể làm một menu xổ xuống mà không cần phải làm cách button trước, chúng ta sẽ được tự sinh ra bằng AS , thú vị nhỉ.

Điều đầu tiên cần phải làm là tạo một button mẫu. Tiếp theo, đặt button vào trong một movie clip, movie clip này sẽ có hai thành phần, một là button và hai là dynamic text ở trên button, dynamic text sẽ được liên kết với biến buttonLabel. Trong cửa sổ Library, click chuột phải lên tên movie clip và chọn Linkage. Nhớ chọn mục Export for Actionscript và đặt tên cho nó là buttonMovieClip. Đựơc rồi, bây giờ chúng ta đã có một button mẫu, tiếp theo chúng ta sẽ sử dụng AS để sử dụng button này. Việc này cũng rất đơn giản, chúng ta sử dụng lệnh attachMovie để tạo một instance của movie clip và đặt lại giá trị cho dynamic text trong movie clip, và đặt lại vị trí của nó bằng cách đặt cách thuộc tính _x, _y.

CODE

function createButton(buttonLabel, x, y) {

this.attachMovie("buttonMovieClip","button"+buttonLevels,buttonLevels);
bmc = this["button"+buttonLevels];
bmc.buttonLabel = buttonLabel;
bmc._x = x;
bmc._y = y;
buttonLevels++;
return(bmc);
}
Đựơc rồi, hãy thử movie của bạn xem nào

Bạn có thể tạo ra hàng loạt button động bằng cách gọi một loạt hàm createButton, hoặc chúng ta sẽ lưu các tên button vào một mảng rồi dùng vòng lặp for để gọi hàm createButton.
Nhưng có một vấn đề cần giải quyết là làm thế nào để xử lý riêng cho từng button. Nếu viết code ngay trong button thì các button sẽ như nhau. Vậy làm cách nào để làm cho các button có thể xử lý những công việc khác nhau? Button sẽ gọi những hàm từ ngoài root, như vậy thì mỗi button có thể gọi một hàm khác nhau, điều này cũng có nghĩa là chúng sẽ thực hiện những việc khác nhau

Luyện tập: Sử dụng button động để tạo menu

- Tạo một movie mới trong Flash

- Tạo button mẫu như trong phần trước, đặt đoạn code sau vào button

CODE

on (rollOver) {

_parent.buttonRolloverAction(thisAction,buttonLabel);
}
on (release) {
_parent.buttonClickAction(thisAction,buttonLabel);
}
Điều này có nghĩa là khi button sẽ gọi hàm buttonRollOverAction khi đưa chuột qua, và gọi hàm buttonClickAction khi click chuột. Hai đối số của nó sẽ giúp báo button nào được click
- Dưới đây là hàm createButton để tạo button động, nhưng lần này chúng ta sẽ tạo một loạt button từ một mảng lưu sẵn

CODE

function createButton(buttonLabel, x, y, buttonAction) {

this.attachMovie("buttonMovieClip","button"+buttonLevels,buttonLevels);
bmc = this["button"+buttonLevels];
bmc.buttonLabel = buttonLabel;
bmc._x = x;
bmc._y = y;
bmc.thisAction = buttonAction;
buttonLevels++;
return(bmc);
}

// Tạo một loạt button từ mảng

mainButtonList = new Array();

mainButtonList.push({label:"About Us", action:"aboutUsButtonList"});
mainButtonList.push({label:"Products", action:"productsButtonList"});
mainButtonList.push({label:"Store",action:"storeButtonList"});

- Công việc tiếp theo là gọi hàm createButtonList để tạo button

CODE

buttonLevels = 1;

createButtonList(mainButtonList,100,100,"across");

- Nếu bạn thử chạy movie lúc nào thì chúng ta sẽ thấy 3 button được tạo nhưng mà sẽ chưa làm gì khi đưa chuột ngang qua hay click vào. Bây giờ chúng ta sẽ viết hàm buttonRollOverAction để xử lý

CODE

function buttonRolloverAction(thisAction,thisLabel) {

if (thisAction == "aboutUsButtonList") {
deleteAllButtonLists();
createButtonList(aboutUsButtonList,100,120,"down");
} else if (thisAction == "productsButtonList") {
deleteAllButtonLists();
createButtonList(productsButtonList,200,120,"down");
} else if (thisAction == "storeButtonList") {
deleteAllButtonLists();
createButtonList(storeButtonList,300,120,"down");
}
}
- Hàm buttonRollOverAction gọi hàm createButtonLists với các đối số khác nhau là một trong 3 mảng được định nghĩa dưới đây

CODE

aboutUsButtonList = new Array();

aboutUsButtonList.push({label:"History", action:"goto"});
aboutUsButtonList.push({label:"Clients", action:"goto"});
aboutUsButtonList.push({label:"Partners", action:"goto"});

productsButtonList = new Array();

productsButtonList.push({label:"Widgets", action:"goto"});
productsButtonList.push({label:"Toys", action:"goto"});
productsButtonList.push({label:"Power Tools", action:"goto"});

storeButtonList = new Array();

storeButtonList.push({label:"Order Online", action:"goto"});
storeButtonList.push({label:"Find a Store", action:"goto"});
storeButtonList.push({label:"Request Catalog", action:"goto"});
storeButtonList.push({label:"Track Shipment", action:"goto"});
storeButtonList.push({label:"Return Item", action:"goto"});

- Hàm deleteAllButtonLists sẽ làm biến mất các button đã được tạo, có nghĩa là tất cả các menu trong 3 mảng vừa tạo sẽ biến mất và sẽ chỉ xuất hiện một mảng tại một thời điểm mà thôi. Hãy tưởng tượng cái menu của chúng ta trong Flash, khi đưa con trỏ đến menu File thì menu File xổ xuống, nhưng khi đưa sang Edit thì menu File sẽ thu lại và menu Edit xổ xuống…

Trước đó, chúng ta phải có đoạn code sau để chỉ từng menu đến các mảng menu con

CODE

allButtonLists = new Array();

allButtonLists = [aboutUsButtonList,productsButtonList,storeButtonList];
Tiếp theo chúng ta sẽ viết hàm deleteButtonList và deleteAllButtonLists

CODE

function deleteButtonList(buttons) {

for (var i=0;i buttons[i].mc.removeMovieClip();
}
}

function deleteAllButtonLists() {

for(var i=0;i deleteButtonList(allButtonLists[i]);
}
}

Bây giờ hãy chạy thử movie của chúng ta nhé. Bạn thấy sao? Tuyệt vời phải không nào

Giờ thứ 17: Liên kết và liên lạc với trình duyệt, Browser Navigation and Communication
Khi thiết kế Flash, bạn có 2 sử lưa chọn, có thể nhúng vào một trang web hoặc làm một application có thể tự chạy riêng. Nếu bạn nhúng vào một trang web thì movie của bạn có thể liên lạc với trình duyệt để báo cho trình duyệt cần phải làm gì.

Trong giờ thứ 17, các bạn sẽ học được:

- Cách load một trang web
- Tìm hiểu cách liên lạc với JavaScript
- Mở một cửa sổ trình duyệt mới từ movie
- Sử dụng JavaScript gởi thông điệp đến movie
- Lưu thông tin người dùng vào JavaScript cookies
- Tạo movie sử dụng JavaScript
- Những câu lệnh đặc biệt cho những application tự chạy

Load một trang web

Ngày nay thì Flash được sử dụng rất nhiều trong các website. Nó được sử dụng để làm trang chủ hoặc là để tạo những thanh liên kết (navigation bar)… Cũng có lúc, chúng ta cần load một trang web mới từ movie Flash.

Cách đơn giản
Bạn có thể load một trang web mới bằng cách sử dụng câu lệnh getURL. Nó hoạt động giống như thẻ của HTML. Dưới đây là một ví dụ khi nhấn một button thì sẽ load một trang web mới thay thế cho trang hiện tại:

CODE

on (release) {

getURL("anotherpage.html");
}

Ở ví dụ trên thì trang anotherpage.html sẽ được load. Bạn có thể thay bằng một URL hoàn chỉnh (như là http://www.yahoo.com) để liên kết đến một website khác hoặc đường dẫn tương đối để liên kết đến những trang trong cùng một website.

Không cần sử dụng AS, chúng ta cũng có thể tạo được liên kết như vậy bằng cách đặt thuộc tính hypertext links của TextField, cái này thật ra giống hệt như là thẻ của HTML

Cách nâng cao
Cách này bạn cũng sử dụng hàm getURL với một cách khác để xác định nơi sẽ load trang web lên là trong frame nào hoặc là trong window nào. Như chúng ta đã biết thì mỗi frame và mỗi window đều có tên, chúng ta sẽ truyền tên này vào đối số thứ 2 của hàm getURL.
Trong ví dụ dưới đây, trang web của bạn sẽ có nhiều frame, trong đó có frame tên là Main, trang web mới sẽ được load trong frame Main này
CODE

on (release) {

getURL("summary.html","Main");
}

Bạn cũng có thể sử dụng đoạn code trên để load trang web vào window tên Main.

Ngoài ra, bạn còn có thể sử dụng những đối số đặc biệt để truyền vào thay cho tên:
- _blank : mở một window mới và load trang web vào window đó
- _parent : load trang web vào frame cha của frame hiện tại
- _top : load trang web vào window cũ, không kể đang ở frame nào mà sẽ thay thế tất cả các frame trong window
Nếu bạn muốn thay đổi những thiết lập của window như kích thước… thì bạn phải sử dụng JavaScript. Chúng ta sẽ nói về vấn đề này sau

Luyện tập: Làm thanh liên kết (navigation bar)

Bây giờ thì bạn đã đủ khả năng làm một thanh liên kết bằng Flash sử dụng AS, nhưng bạn cần phải có thêm những kiến thức khác về HTML.

Thanh liên kết của chúng ta sẽ đặt ở frame bên trái của trình duyệt, frame bên phải sẽ chứa nội dung.
Movie làm bằng Flash sẽ chứa một số button để liên kết sang các trang web khác.
- Đầu tiên chúng ta sẽ tạo một trang HTML chứa 2 frame, trang này tên là navigation.html

CODE

Flash Navigation Example

Каталог: wp-content -> uploads -> 2015
2015 -> Tác giả phạm hồng thái bài giảng ngôn ngữ LẬp trình c/C++
2015 -> TRƯỜng đẠi học ngân hàng tp. Hcm markerting cơ BẢn lớP: mk001-1-111-T01
2015 -> Hãy là người đầu tiên biết
2015 -> Có chiến lược toàn diện về việc truyền phát tin tức
2015 -> BỘ TÀi chính
2015 -> THỦ TƯỚng chính phủ
2015 -> SỞ lao đỘng thưƠng binh và XÃ HỘI
2015 -> CỘng hòa xã HỘi chủ nghĩa việt nam trưỜng đẠi học cần thơ Độc lập – Tự do – Hạnh phúc
2015 -> Dapandethi. Blogspot. Com lịch sử BÁo chí thế GiỚI
2015 -> Dapandethi. Blogspot. Com đẠi học quốc gia hà NỘi trưỜng đẠi học khoa học xã HỘi và nhân văn khoa báo chí

tải về 0.7 Mb.

Chia sẻ với bạn bè của bạn:

1 2 3 4 5