Giáo trình Thiết kế đa phương tiện (Flash) - Phần 1

 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 
 Trang 98 
 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! 
 Trang 99 
 2.1 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 
 Trang 100 
 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"); 
 Trang 101 
 } 
 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 trên button, dynamic text sẽẽ có hai thành ph được 
liên kết vầớn, mi biếộn buttonLabel. Trong ct là button và hai là dynamic text ử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. 
 Trang 102 
 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 
 2.2 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); 
 } 
 Trang 103 
// Tạo một loạt button từ mảng 
function createButtonList(buttonList, x, y, direction) { for 
(var i=0;i<buttonList.length;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"); 
 Trang 104 
 } 
} 
- 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 
 Trang 105 
 CODE 
 function deleteButtonList(buttons) { for 
 (var i=0;i<buttons.length;i++) { 
 buttons[i].mc.removeMovieClip(); 
 } 
 } 
function deleteAllButtonLists() { for(var 
 i=0;i<allButtonLists.length;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 
 3. Liên kết và liên lạc với trình duyệt 
 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 
 3.1 Load một trang web 
 Trang 106 
 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à  để 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"); 
 } 
 Trang 107 
 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 
 3.2 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 
 Trang 108 
 - Trang HTML trên chỉ tạo ra 2 frame, trong mỗi frame sẽ chứa một trang HTML 
 khác. Bây giờ chúng ta sẽ tạo 2 trang HTML đó. Chúng ta chưa cần phải làm trang 
 HTML cho frame bên trái, vì nó sẽ được tạo ra khi chúng ta publish movie thành 
 HTML. Còn trang HTML trong frame bên phải sẽ có nhiều thay đổi. Bây giờ hãy 
 tạo 3 trang HTML đơn giản tên content1.html, content2.html, content3.html chứa 3 
 dòng chữ đơn giản. 
 CODE 
 Content 1 
 Content 1 
 - Bây giờ là công việc làm với Flash. Tạo một movie mới rộng 100px, cao 400px. 
 Tạo 
 3 button và viết code cho các nút để liên kết đến 3 trang content1.html, 
content2.html, content3.html tương tự như sau: 
 CODE 
 on (release) { 
 getURL("content1.html","content"); 
 } 
 Lưu movie lại với tên navbar.fla 
 - Publish movie ra thành file html 
 - Tiếp theo là đưa tất cả các file vào một thư mục. Các file đó sẽ là: navigation.html, 
 content1.html, content2.html, content3.html, navbar.html, and navbar.swf. 
 - Hãy mở trang navigation.html để thử xem nhé. 
 Bài 6. ActionScript và JavaScript 
 Trang 109