Giáo trình Thiết kế đa phương tiện (Flash) - Phần 1
AS là một ngôn ngữ lập trình được xây dựng trong Flash. AS giống như các
ngôn ngữ khác như Javascript, C++ v.v. nhưng bạn không cần biết các ngôn ngữ khác
để học AS (nếu có thì càng dễ hơn).
Bắt đâu học AS, thì chúng ta coi thử AS là gì, làm được những gì và có quan hẹ
gì với các chức năng khác của Flash. Trong bài này, bạn sẽ tìm hiểu coi AS ra đời như
thế nào, xem cách viết AS làm sao, tìm hiểu AS làm được những gì và sau sau cùng là
xác định được nơi lưu trữ AS ở trong Flash.
Để đi sát nghĩa và tiện cho sau này, mình sẽ không dịch một số từ ngữ ra tiếng
việt như script, movieclip v.v.
1. Script là gì?
AS là ngôn ngữ lập trình, với các lệnh sai khiến Flash movie làm việc theo đúng
những gì mình viết (chỉ có mình viết sai chứ computer không làm sai ). Phần nhiều
thì AS chỉ làm việc trong môi trường của Flash, tuy nhiên AS cũng có thể gửi lệnh cho
browser, hệ điều hành v.v.
Script có thể ngắn gọn vài chữ hay cũng có thể dài cả trăm trang. Script có thể
được việt gộp lại một chổ hay cũng có thể viết rãi rác khắp nơi trong movie.
2. Xuất xứ của AS
AS rât giống ngôn ngữ C++, Java, javascript .v.v và được dựa trên tiêu chuẩn do
ECMA (European Computer Manufactuers Association) lập ra gọi là
ECMAScript. Nhiều người hiểu lầm rằng AS dựa trên Javascript, nhưng thực chất cả 2
đều dựa trên ECMAScript.
Lúc đầu viết script trong Flash rất đơn giản và cho tới Flash 4 mới đuợc phát
triển nhưng cũng vẫn còn "thô sơ" với những vòng lặp và các điều kiện "if.else". Cho
tới Flash 5 thì dân Flash mới có thể lập trình và gắn liền script với các yếu tố trong
movie. . Sang tới Flash MX thì AS đã trở thành ngôn ngữ lập trình toàn diện với hơn
300 câu lệnh, hàm .v.v
3. Nhận biết AS
AS đơn giản là những câu lệnh được viết bằng tiếng Anh (vì lẽ này mà mình sẽ
không dịch các tư tiếng Anh liên quan đến AS, và một phần thì mình không giỏi thuật
ngữ computer hay tiếng việt cho lắm) và các phép tính và dấu câu. Ví dụ sau:
ActionScript on
(press) {
gotoAndPlay ("my frame");
}Trang 7
Bạn có thể giải nghĩa đoạn mã trên bằng cách tìm hiểu các từ chính trong đó.
Chữ "press" gới ý răng người dùng đang kích chuột vào một cái gì đó, (và trong
trường hợp này là cái nút) Chữ kế tiếp "gotoAndPlay" do 4 chữ "go to and play" gộp
lại, gợi ý rằng AS ra lệnh cho Flash tớimột điểm nào đó trong movie và bắt đầu chơi từ
điểm đó.
4. AS có thể làm những gì?
Flash movie gồm có các scence (cảnh), và mổi cảnh sẽ có 1 timeline (thời giản
biểu???) và timeline sẽ có các frame (khung) bắt đầu từ số 1. Thông thường thì Flash
sẽ chơi từ frame 1 cho tới frame cuối của scence với tốc độ cố định và dừng lại hay lặp
lại từ đầu tuy theo người làm Flash.
Mục đích chính của AS là thay đổi thứ tự trong cách chơi của Flash. AS có thể
dùng ở bất frame nào, hay chạy ngườc trở lại frame trước hay nhảy vài frame rồi chơi
tiếp. Nhưng đó không chỉ là những gì AS có thể làm được. AS có thể biến film hoạt
hình của Flash thành một chương trình ứng dụng có sự tương tác của người dùng.
Dưới đây là những cơ bản mà AS có thể làm:
• Hoạt hình: Bạn không cần AS để làm hoạt hình, nhưng với AS thì bạn có thể
tạo những hoạt hình phức tạp hơn. Ví dụ, trái banh có thể tưng xung quanh mành hình
mà không bao giờ ngừng, và tuân theo các định luật vật lý như lực hút, lực ma sát, lực
phản v.v Nếu không có AS thì bản cần phải dùng cả hàng ngàn frame để làm, còn với
AS thì chỉ 1 frame cũng đủ
• Navigation (hông biết dịchlàm sao cho hay ): thay vì movie chỉ chơi từng
frame 1 theo thứ tự thì bạn có thể dừng movie ỏ bất cứ frame nào, và cho phép người
dùng có thể chơi ở bất cứ frame nào .v.v
• Thu nhập thông tin từ người dùng (user input): bạn có thể dùng AS để hỏi
người dùng 1 cầu hỏi, rồi dùng thông tìn đó trong movie hay có thể gửi cho server hay
làm những gì bạn muốn.
• Thu nhập thông tìn từ các nguồn khác: AS có thể tương tác với server và lấy
các thông tin từ server hay text file
• Tính toán: AS có thể làm bất cứ phép tính nào mà toán học cho phép
• Thay đổi hình ảnh trong movie: AS có thể thay đổi kích thước, màu sắc, vị trí
của bất cứ movie clip (MC) nào trong movie flash của bạn. Bạn có thể tạo thêm phiên
bản hay xoá bới phiên bản của MC với AS
• Phân tích môi trường của máy tính: Với AS bạn có thể lấy giờ từ hệ điều hành
hay địa chỉ đang chơi movie Flash đó.
• Điểu khiển âm thanh trong flash movie: AS là cách tốt nhất để điều khiển âm
thanh trong Flash,AS có chơi chậm, chơi nhanh, ngừng, quay vòng .v.v bât kỳ âm
thanh nào trong Flash.
Trang 1
Trang 2
Trang 3
Trang 4
Trang 5
Trang 6
Trang 7
Trang 8
Trang 9
Trang 10
Tải về để xem bản đầy đủ
Tóm tắt nội dung tài liệu: 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
File đính kèm:
- giao_trinh_thiet_ke_da_phuong_tien_flash_phan_1.pdf