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,buttonLabe l);
}
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
function createButtonList(buttonList, x, y, direction) {
for (var i=0;i<> ret = createButton(buttonList[i].label,x,y, buttonList[i].action);
buttons[i].mc = ret;
if (direction == "down") {
y += 20;
} else if (direction == "across") {
x += 100;
}
}
}
- Còn đây là cách tạo mảng để tạo button
CODE
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,storeButtonLi st];
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]);
}
}
20:40
Ngọc Bích
