Làm quen với AS, Your First Look at AS

Ví dụ nếu bạn muốn lưu trử tên của người dùng trong biến số thì bạn nên đặt tên biến số đó là userName (mình nghĩ đặt tên tiếng Anh dễ hiểu hơn, vì tiếng việt không dấu cũng dễ bị hiểu[r]

Giờ thứ 01: Làm quen với AS Giờ thứ 02: Sử dụng Action panel Giờ thứ 03: Học cách lập trình Giờ thứ 04: Viêt code Flash Giờ thứ 05: Điều khiển luồng movie Giờ thứ 06: Điều khiển movie clip

Giờ thứ 07: dịch chuyển thay đổi movie Giờ thứ 08: chọn, kéo thả movie clip

Giờ thứ 09: Lấy thông tin từ người dùng Giờ thứ 10: Tạo Và Điểu Khiển Văn Bản Giờ thứ 11: Làm việc với số Giờ thứ 12: Đối tượng Mảng Giờ thứ 13: Sử dụng Rollovers Giờ thứ 14: Thành phần Scroll

Giờ thứ 15: Các thành phần nhập liệu

Giờ thứ 16: Menu button động (continous) Giờ thứ 17: Liên kết liên lạc với trình duyệt Giờ thứ 18: Gởi thơng tin cho máy chủ

Giờ thứ 19: Dùng XML với Flash Giờ thứ 20 : Ky thuat in (Printing) Giờ thứ 21: Sử dụng component

Giờ thứ 22: Điều khiển âm với ActionScript Giờ thứ 23: Quản lý streaming cho movie

Giờ thứ 01: Làm quen với AS, Your First Look at AS

AS ngôn ngữ lập trình xây dựng Flash AS giống ngôn ngữ khác Javascript, C++ v.v bạn không cần biết ngôn ngữ khác để học AS (nếu có dễ hơn)

Bắt đâu học AS, coi thử AS gì, làm có quan hẹ với chức khác Flash Trong này, bạn tìm hiểu coi AS đời nào, xem cách viết AS làm sao, tìm hiểu AS làm sau sau xác định nơi lưu trữ AS Flash

Để sát nghĩa tiện cho sau này, không dịch số từ ngữ tiếng việt script, movieclip v.v.

Script gì?

AS ngơn ngữ lập trình, với lệnh sai khiến Flash movie làm việc theo

mình viết (chỉ có viết sai computer khơng làm sai ) Phần nhiều AS làm việc mơi trường Flash, nhiên AS gửi lệnh cho browser, hệ điều hành v.v

Script ngắn gọn vài chữ hay dài trăm trang Script việt gộp lại chổ hay viết rãi rác khắp nơi movie

Xuất xứ AS

AS rât giống ngôn ngữ C++, Java, javascript v.v dựa tiêu chuẩn ECMA (European Computer Manufactuers Association) lập gọi ECMAScript Nhiều người hiểu lầm AS dựa Javascript, thực chất dựa ECMAScript

Lúc đầu viết script Flash đơn giản Flash đuợc phát triển cịn "thơ sơ" với vòng lặp điều kiện "if else" Cho tới Flash dân Flash lập trình gắn liền script với yếu tố movie Sang tới Flash MX AS trở thành ngơn ngữ lập trình tồn diện với 300 câu lệnh, hàm v.v

Nhận biêt AS

ActionScript

on (press) {

gotoAndPlay ("my frame"); }

Bạn giải nghĩa đoạn mã cách tìm hiểu từ Chữ "press" gới ý người dùng kích chuột vào đó, (và trường hợp nút) Chữ "gotoAndPlay" chữ "go to and play" gộp lại, gợi ý AS lệnh cho Flash tớimột điểm movie bắt đầu chơi từ điểm

AS làm gì?

Flash movie gồm có scence (cảnh), mổi cảnh có timeline (thời giản biểu???) timeline có frame (khung) số Thơng thường Flash chơi từ frame frame cuối scence với tốc độ cố định dừng lại hay lặp lại từ đầu theo người làm Flash

Mục đích AS thay đổi thứ tự cách chơi Flash AS dùng bất frame nào, hay chạy ngườc trở lại frame trước hay nhảy vài frame chơi tiếp Nhưng khơng AS làm AS biến film hoạt hình Flash thành chương trình ứng dụng có tương tác người dùng Dưới mà AS làm:

 Hoạt hình: Bạn khơng cần AS để làm hoạt hình, với AS bạn tạo hoạt hình phức tạp Ví dụ, trái banh tưng xung quanh mành hình mà khơng ngừng, tuân theo định luật vật lý lực hút, lực ma sát, lực phản v.v Nếu khơng có AS cần phải dùng hàng ngàn frame để làm, cịn với AS frame đủ

 Navigation (hông biết dịchlàm cho hay ): thay movie chơi frame theo thứ tự bạn dừng movie ỏ frame nào, cho phép người dùng chơi frame v.v

 Thu nhập thông tin từ người dùng (user input): bạn dùng AS để hỏi người dùng cầu hỏi, dùng thơng tìn movie hay gửi cho server hay làm bạn muốn

 Tính tốn: AS làm phép tính mà tốn học cho phép

 Thay đổi hình ảnh movie: AS thay đổi kích thước, màu sắc, vị trí movie clip (MC) movie flash bạn Bạn tạo thêm phiên hay xoá bới phiên MC với AS

 Phân tích mơi trường máy tính: Với AS bạn lấy từ hệ điều hành hay địa chơi movie Flash

 Điểu khiển âm flash movie: AS cách tốt để điều khiển âm Flash,AS có chơi chậm, chơi nhanh, ngừng, quay vòng v.v bât kỳ âm Flash

Phát triển khả AS

Điều quan trọng mà AS làm cho bạn chưa nghĩ tới Với AS trí tưởng tượng óc sáng tạo bạn khơng có khơng thể xảy với AS

Mục đích sách, VNFX hướng dẫn bạn hiểu biết Flash để từ bạn tự dùng để làm sản phẩm tuyệt vời mà khơng có

Viết AS đâu

Câu hỏi tìm hiểu AS thường hỏi "Viết AS vào đâu?" Flash có mơi trường làm multimedia phức tạp Nếu bạn dùng Flash hay đọc qua hướng dẫn kèm với Flash, bạn biết yếu tớ timeline, key frame v.v nêu bạn chưa biết khuyên bạn nên tìm hiểu trước tiêp tục Ơ mục Flash Tổng Quá, VNFX có post link để download CD hướng dẫn cho người chưa dùng Flash

Viết AS time line

AS viết vào key frame timeline Để làm vậy, bạn chọn key frame timeline trước bạn mở Action Panel (có thể nhấn F9) để viêt hay xem AS viết Mình khun bạn nên dùng Action Panel dạng Expert Normal, bạn học nhiều lẹ

Khi viết AS vào key frame AS key frame hoạt động mà Flash chơi tới key frame Ví dụ lệnh AS stop() đặt key frame Flash chơi tới key frame dừng lại có lệnh khác cách viết gọi viết vào time line

Một lý viết script vào time line bạn muốn dùng function (hàm), function cho phép tái sử dụng đoạn mã từ nhiều nơi, nhiều level khác

Viêt AS nút

Nút khơng có tác dụng khơng kèm AS lên Muốn kèm AS vào nút chọn nút stage (sân khấu: diện tích flash movie), sau mở Action panel viết vào ta viết vào key frame

AS viết nút hoạt động chuột bàn phím tác động lên nút mà

Viết AS MC

MC khác với graphic chổ MC đặt tên mang vào stage, MC thường hình ành động, có AS kèm theo MC Để viết AS vào MC tương tự ta làm với nút

AS kèm theo MC điểu khiển MC MC timeline hay timeline movie

Giờ thứ 02: Sử dụng Action panel, Using the Script Editing Window

Nếu dân đồ hoạ coi Timeline nhà dân lập trình với AS coi Action Panel nơi cư ngụ mình, dân AS thay đổi, viết tất lệnh Vì quan trọng bạn dụng quen thuộc Action Panel

Flash MX sử dụng panel để giúp bạn lấy thơng tin movie bạn làm cách dễ dàng Khi bạn cài đặt chay Flash lần đầu tiên, Flash hỏi bạn muốn sử dụng Flash Flash xếp đặt panel cho hợp lý Bạn thay đổi cách xếp đặt theo ý bạn

Nói chung bạn nên xếp đặt panel bạn cho thuận tiện cho bạn nhất, này cần có kinh nghiệm Mình dùng dual monitor, close hết panel giữ lại hình, kéo action panel property panel qua bên monitor, bên stage, cần mở panel dùng phím tắt để mở.

Sử dụng Action panel có cách: bình thường (normal) chuyên dụng (expert) Khi chạy máy lần đầu Action panel set dạng bình thường Ở dạng bình thường bạn khơng đánh trực tiếp câu lệnh, mà phải chọn từ menu bên tay trái panel Với setup bạn khơng phạm phải lỗi viết AS

tiến được, dùng expert mode lúc đầu mệt bảo đảm bạn học mau và nhớ lâu hơn

Sử dụng Action panel với expert mode bạn có nhiều tự hơn, tự đồng nghĩa với trách nhiệm nên bạn phải cẩn thật viết code Từ normal mode chuyển sang expert mode nhấn phím tắt CONTROL + SHIFT + E, chuyển ngược lại dùng CONTROL + SHIFT + N (nhớ kích chuột vào action panel trước dùng phím tắt) Bạn đổi từ Normal mode sang expert mode lúc nào, đổi ngược lại mà code bạn khơng có lỗi

Action panel có popup menu (mũi tên xuống dưới, nằm góc phải action panel) có nhiều lệnh tốt cho bạn bạn dùng Action panel, Expert mode Bạn tìm thay câu nào, chữ script bạn Phím tắt cho tìm kiếm Control + F cho thay Control + H, nhấn F3 Flash tiếp tục tìm chữ, câu bạn muốn tìm

Một lệnh "Goto Line" giúp bạn tìm câu bạn muốn tìm Lệnh "Check Syntax" rà sốt script bạn tìm lỗi cú pháp Lúc tập viết AS, dùng nên thường xuyên dùng Chech Syntax để check lổi sctipt Lệnh "Auto Format" "Auto Format Options" giúp cho bạn trình bày script bạn cho dễ đọc Bạn thay đổi màu sắc, font chữ v.v cho script bạn bạn dễ đọc code cách vào Edit > Preferences > ActionScript Editor Các phần lại pop-up window cho phép bạn xuất hay nhập AS dạng text file in script giấy

Tuy gọi expert mode thực dùng dễ normal mode Bởi expert mode thi Action panel chẳng khác chương trình "note pad" hay "text pad" Bạn việc viết bạn muốn vào Khi dùng expert mode, bạn tham khảo câu lệnh, cú pháp AS khung bên trái Action Panel Và bạn tơn thủ số quy tắt bạn sử chức "Code Hint" Action Panel, chức tạo nên khung nhỏ nhỏ có câu lệnh AS hợp quy cho bạn lựa chọn

được

Sau thực hành nho nhỏ, giúp bạn làm quen với Action panel expert mode

1 Tạo movie

2 Chọn key frame (frame số 1) layer (mình khơng dịch chữ layer = lớp dễ trùng với class= lớp)

3 Mở Action panel (có thể dùng phím tắt hay vào phần Window > Action panel

4 Chuyển sang expert mode (dùng phím tắt hày vào pop-up menu Action panel để đổi)

5 Vào chổ để viết AS Viết đoạn code sau:

ActionScript

trace ("I am expert");

Khi bạn thử movie dịng chữ "I am expert" Output panel,

sẽ đề cập đến lệnh trace() vào tới

Giờ thứ 03: Học cách lập trình, Learning to program

Lập trình coi khoa học nghệ thuật Vì lập trình viên giỏi cần có điều kiện kiến thức ngôn ngữ mà họ dùng tính sáng tạo, có trường hợp có cách lập trình cho đề án

Trong trình viết AS, bạn tạo cho riêng phong thái viết code đặc trưng Có thể đầu bạn dùng phong cách viết code viết này, sau bạn từ từ chuyển sang phong cách riêng bạn

Thường khái niệm ngơn ngữ lập trình giống nhau, bàn khái niệm lập trình áp dụng Flash

Cách suy nghĩ computer

nó

Cịn AS chuổi lệnh, thị cho computer, hay Flash phải làm mơi trường runtime (runtime environment)

Khi viết AS bạn nên tự coi "ngu" computer, đọc lại dòng lệnh AS nghĩ tới kết việc thi hành lệnh Khi tự đặt vào vị trí computer, bạn đốn script bạn làm mơi trường runtime, bạn thấy lỗi mà bạn vơ ý mắc phải Khi mà bạn trở thành diễn viên tuyệt vời vai

computer bạn trở thành lập trình viên tài ba

Lệnh, hàm, phép tính

Lệnh (command) yếu tố AS để thị Flash làm hành động cụ thể Lệnh thi hành tuyệt đối trường hợp khả thi Ví dụ ta viết gotoAndPlay(5) Flash tới frame chơi, movie khơng có frame lệnh khơng thể làm

Hàm (function, dùng từ function nhiều hàm) phần tính tốn phép tính cho (return) kết Ví dụ hàm random() cho số ngẫu nhiên đó, hay hàm sqrt() cho giá trị bình phương số mà hàm nhận truyền cho Lệnh hàm truyền cho hay nhiều thơng số (parameter, dùng từ parameter thay thơng số), thơng số giúp cho hàm lệnh cụ thể Ví dụ gotoAndPlay(5) thơng số, khơng có thơng số lệnh

"gotoAndPlay" khơng biết rõ phải nói Flash đâu hàm sqrt() cần có thơng số giá trị bình phương số

Sự khác biệt hàm lệnh phép tính Phép tính thường dấu +, -, *, / phép so sánh <, == > Hàm có phép tính, lệnh khơng

Biến số

một thời gian dài hay suốt trình thời gian Flash chơi

Tên biến số thường nhóm từ, hay đơn giản từ, hay chữ Thông thường tên biến số nên rõ ràng dễ hiểu nói lên tính chất thơng tin mà biến số lưu trử Ví dụ bạn muốn lưu trử tên người dùng biến số bạn nên đặt tên biến số userName (mình nghĩ đặt tên tiếng Anh dễ hiểu hơn, tiếng việt khơng dấu dễ bị hiểu lầm), bạn đặt tên biền số "n" ngắn, người đọc script bạn khó hiểu, đặt name dễ trùng với biến số hay từ khố khác (_name đặc tính đối tượng MovieClip)

Khi viết AS, bạn cần lưu ý viết cho dể hiểu dễ đọc Và lập trình viên quy ước tên biến số theo quy tắc sau: tên biến số viết thường chữ đầu tiên, viết hoa chữ cho chữ kế tiếp, ví dụ userName, userLastName, userMotherMaidenName v.v Lưu ý chữ số dùng để đặt tên cho biến số, ln bắt đâu tên chữ

Có nhiều loại biến số để lưu trử nhiều loại thông tin, loại thơng tin có nhiều loại khác Như số (number) loại giá trị biến số, cịn có loại khác số nguyên (integer), số khơng ngun (floating, double) Bạn dùng biến số để chứa chuỗi (chuỗi gọi tắt cho chuỗi chữ cái), chuỗi có chữ cái, nhiều chữ khơng có hết, tất chuỗi sau hợp lệ: "ablsdfjksl", "a", " ", "" Khi viết chuỗi cần dùng dấu ngoặc kép ("") để bắt đầu kết thúc chuỗi

Trong ngơn ngữ lập trình khác Java, C++, hay ActionScript 2.0 Flash MX 2004 bạn phải xac định trước loại thơng tin bạn lưu biến số Nhưng với ActionScript (trong FlashMX) bạn khơng cần làm việc Ví dụ biến số userName lúc đầu chứa chuỗi, sau lại chứa số ngun hợp lệ

Ngồi chuỗi số, cịn có nhiều loại khác đề cập tới vào sau

Điều kiện

Trong trường hợp nên lệnh cho Flash phải làm cho thích hợp với tình ta dùng "điều kiện" để lệnh cho Flash

nếu user 18 tuổi, user 18 tuổi chơi đoạn phim Trước tiên, Flash so sánh số tuổi user với số 18, số tuổi user thoả mãn điều kiện đặt Flash có giá trị true từ phép so sánh trên, ngược lại false Điều kiện luôn (true) hay sai (false) Một giá trị có hay sai gọi boolean Sau thực phép so sánh có kết từ phép so sánh trên, Flash chọn giải pháp đưa cho trường hợp

Đơi cần có nhiều điều kiện đơn giản "true" hay "false", ví dụ bạn muốn Flash chơi đoạn phim A cho ngừơi 18 tuổi, 18 13 chơi đoạn phim B, 13 chơi đoạn phim C

Vòng lặp

Con người làm computer lười khơng muốn làm nhiều, mà bán cho computer Nhất phải làm làm lại việc nhàm chán Vì vòng lặp (loop) yếu tố quan trọng ngơn ngữ lập trình AS vậy, bạn dùng vòng lặp script

Trong vòng lặp, "điều kiện" quan trọng Mọi vịng lặp cần có điểm bắt đầu điểm dừng điều kiện để báo hiệu điểm dừng vịng lặp Ví dụ bạn muốn cho vịng lặp chạy 10 lần có biến số dùng để đếm vịng lặp, 0, Mỗi vịng lặp chạy biến số tăng thêm Khi tới vòng lặp dừng lại Sau minh hoạ vòng lặp này:

1 Một số lệnh trứơc vòng lặp

2 Bắt đầu vòng lặp, set biến số counter = Làm số lệnh vòng lặp

4 Tăng biến số counter +=1

5 Nếu biến số counter nhỏ 9, trở lại bước thứ Ra khỏi vòng lặp, tiếp tục chương trình

Ở bắt dầu biến số counter = quy ước thơng thường ngơn ngữ lập trình bắt đầu vịng lặp

lặp Chúng ta ngưng vịng lặp trước điểm dừng nó, điều đề cập tới vào

Làm điều không tưởng

Lệnh, hàm, phép tính, biến số, thơng số, điều kiện, vịng lặp phần ngơn ngữ lặp trình, biết phối hợp lại thành chương trình hồn hảo khó

Chương trình đơn giản tập hợp lệnh cho computer để giải vấn đề Vì trước viết chương trình cần phải xác định "vấn đề" cần phải giải Ví dụ thực tế ngồi đời, mẹ bạn nhờ bạn chợ mua gà Nhưng đơn giản nói chợ mua gà chưa đủ biết mua gà sống hay gà làm mua gà sống mua loại v.v Đó chưa nói tới mua gà chở nào, giá v.v Nếu bạn mẹ nói rõ chợ bến thành, mua gà mái dầu, nặng khoảng kg, với giá khoảng 10000 thật dễ dàng cho bạn phải không?

Biết vấn đề mua gà tìm cách mua gà Bạn phải "lên kế hoạch", nên nhờ bạn chở hay taxi chợ bến thành Nếu taxi hãng nào, tìm số phone để gọi, v.v cịn nhờ bạn chở nhờ tên Rồi nên mặc quần áo chợ Ra đến chợ phải mặc làm sao, trả tiền mặt hay ghi sổ nợ Bạn thấy không, từ chuyện mua gà đơn giản mà tốn ngày trời để lên chương trình

Viết AS, bạn cần phải lưu ý tới tất việc dù nhỏ cách Flash làm theo ý bạn tình Các chương trình có bug khơng phải người viết dỡ mà chưa nghĩ tới hết tình thơi

Tóm lại, điều quan trọng lập trình khả nẳng phân tích vấn đề thành nhiều vấn đề nhỏ khơng cịn nhỏ nữa, sau xây dựng chương trình từ giải quyếy vấn đế nhỏ lên dần vấn đề

Viết mã hoàn chỉnh

"computer" cho thật giống, đừng suy nghĩ, mà thi hành lệnh script bạn Viết đoạn code nhỏ ráp lại với (vì mà lập trình theo hướng đối tượng sử dụng nhiều nhất)

Nếu script bạn có bug đừng mà nản lịng, khơng có chương trình người làm mà khơng có bug Vì bạn đừng cố gắng viêt code cho tuyệt hảo lỗi Nếu có bug bạn diệt bug thơi Bạn chuẩn bị "chiến đấu" với bug cách viết code cho dễ hiểu dễ đọc, viết nhiều thích cho đoạn mã Đơi diệt bug (debug) đơn giản có kho mà biết bug đâu để diệt Flash có kèm theo vài cơng cụ giúp bạn debug dễ dàng hơn, nói tới cơng cụ tới

Giờ thứ 04: Viêt code Flash, Writing code in Flash

Khi bạn viết script, bạn dùng tất từ khóa, ký hiệu v.v Vậy trước tiên phân tích đoạn script sau Đoạn script gắn vào button

ActionScript

on (press) {

var myVariable = 7;

var myOtherVariable = "Macromedia"; for (var i=0; i<10; i++) {

trace(i);

if (myVariable + == 5) { trace(myOtherVariable); }

} }

Dịng xác định đoạn code sau kích hoạt mà user nhấn vào nút hàm on(press) dụng vào nút mà thơi Ngồi bạn dùng on(release) bạn muốn kích hoạt đoạn mã sau user nhấn nút, buông tay

đoạn code phụ thuộc vào lệnh hay hàm

Dịng thứ hai lập biến số (mình viết tắt var nhe) tên myVariable, đặt giá trị cho tương tự hàng lập var tên myOtherVariable cho giá trị "Macrmedia" Cả câu kết thúc dấu chấm phẩy ;

Dòng thứ vịng lặp (mình gọi loop cho tiện nhe) for (sẽ nhắc tới loại loop phía dưới) điều kiện loop Nó lặp 10 lần với điều kiện bắt đầu i=0 tăng thêm cho lần lặp lên tới Tương tự on(press), for loop có đoạn code cho riêng nó, đựơc bọc quanh { } đoạn code kích hoạt mà điều kiện for loop thỏa mãn

Dòng thứ lệnh trace(), lệnh viết thông tin output window lúc bạn làm việc với Flash, user không thấy Kế tiếp điều kiện, if từ khoá Flash, kiểm tra kết phép so sánh myVariable + ==5 Nếu mà kết kích hoạt lệnh trace trong, viết output window giá trị myOtherVariable Vậy bạn thấy đoạn script hoàn chỉnh AS Tiếp theo nói đến vài phần khác AS

Output window

Ở có nhắc tới output window, mà khơng nói rõ Output window window software Flash, xuất mà bạn chảy thử movie Nếu Flash

compile movie cho bạn phát lỗi Flash viết output window Trong chạy thử movie, lệnh trace() viết thơng tin output window Output window quan trọng việt "diệt bọ", dùng chung với trace bạn quan sát thơng số, biến số, đối tượng, thuộc tính đối tượng v.v

Trong lúc học AS, bạn viết đọan script ngắn khơng làm để viết thông tin output window, đoạn code

Thực hành: viết thông tin output windown

1 Tạo file

2 Chọn frame movie, mở Action panel Chỉnh kích thước cho action panel đủ lớn để viết, nhớ dùng expert mode

3 Kích chuột vào phần viết script viết câu sau: trace("hello world"); Chạy thử movie (Control + Enter)

5 Bạn thấy output window? (Nếu output window bạn chưa mở nhấn F2) Giống action panel, output window có pop-up menu nho nhỏ góc phải Bạn dùng đễ copy, xố hay save nội dung output window hay tìm kiếm chữ, v.v Ngồi ra, pop-up menu có phần cho bạn chỉnh chế độ "diệt bọ", bạn chọn khơng cần output window in lỗi (none), hay in lỗi (error), hay in cảnh báo (error) cuối in chi tiết lỗi hay cảnh báo (verbose)

Biến số cục toàn bộ

Ở thứ 3, có nhắc đến variable (biến số) dùng đễ lưu trữ thông tin Và sử dụng variable AS dễ dàng Bạn cần ấn định giá trị cho variable Ví dụ:

myVariable = Chúng ta tạo variable có tên myVariable ấn định giá trị cho (bạn đặt tên cho variable bạn mn)

Bây bạn thử viết đoạn code sau:

ActionScript

var1= 7;

var2= "hello world";

trace ("var1: " + var1+ " /var2: " + var2);

Khi bạn chạy thử movie output window có hàng chữ sau: var1: /var2: hello world Vì số "hello world" chứa var1 var2 in

thành global variable Flash movie dùng hệ thống level, timeline movie root leve (gốc), cịn movie clip Flash movie nhỏ Flash movie lớn Các hình ảnh, script movie clip level thấp root level

Local variable (biến số cục bộ), khác với global variable, local variable có trể truy cập đoạn code, hay timeline Khi dùng local variable khỏi timeline hay đoạn code Flash xố local variable khỏi nhớ Muốn tạo local variable dùng từ khố var trước tên local variable, ví dụ: var myLocal = "This is local"; Bạn cần dùng từ khố var lần thơi, lần dùng sau cần dùng tên local variable thơi Ví dụ đoạn code:

ActionScript

var myLocal = 9; myLocal = 11; trace(myLocal);

Phép so sánh phép tính

So sánh giá trị AS đơn giản, dùng ký hiệu toán học <, >, =

Khi ấn định giá trị dùng dấu =, khác biệt so sánh dùng == Đoạn code sau xét coi giá trị a có khơng, in kết output window Và test đoạn code sau, bạn thấy true output window

ActionScript

var a = 7; trace(a == 7);

Nếu bạn dùng lộn = với == bị lỗi runtime Flash khơng tìm lỗi cho bạn

Bạn dùng == để so sánh chuỗi mẫu tự:

var myString = "Hello World."; trace(myString == "Hello World."); trace(myString == "hello world.");

Khi bạn test đoạn code bạn có "true" "false" output window, lần so sánh thứ nhau, lần thứ hai khơng chữ H h khác

Nếu bạn muốn thử coi giá trị có khác khơng dùng ky hiệu !=

ActionScript

var a = 7; trace(a != 9); trace(a != 7);

Hàm trace cho "true" khác 9, thứ hai cho "false" Nếu bạn muốn thử giá trị coi lớn hay nhỏ dùng > <

ActionScript

var a = 7; trace(a < 8); trace(a > 6); trace(a < 1);

Đoạn code cho "true", "true" "false" output window "a" thật nhỏ lớn 6, không nhỏ

Nếu bạn muốn thử giá trị coi lớn hay nhỏ hay dùng ký hiệu >= <=

ActionScript

var a = 7; trace(a <= 9); trace(a >= 5); trace(a >= 7);

Đoạn code cho kết "true"

nhân (*), chia (/) Ví dụ muốn thêm vào giá trị a viết a = a + AS có cách viết tắt Java, C++ cho dụ này, a += Nếu bạn muốn thêm vào a bạn viết cách a = a +1 a += cách thứ a++ Dấu ++ làm tăng thêm cho giá trị thơi Có cách dùng ++, để sau variable cách trên, cách để trước variable Bây giở thư đoạn code sau:

ActionScript

var a = 7; trace(a++); trace(a);

Ở output window bạn thấy tới Ở dòng thứ 2, hàm trace cho giá trị a trước tăng giá trị a lên thêm Bây xem ví dụ khác:

ActionScript

var a = 7; trace(++a); trace(a);

Ở output window bạn thấy Ở dịng thứ ví dụ này, hàm trace tăng giá trị a trước cho giá trị a Tương tự ++, AS có cách viết tắt cho giãm giá trị variable dấu -, -=, =- Phép tính nhân chia có *, *=, /, /= thơi

Điệu kiện

Trong AS ngôn ngữ khác, if else từ khố điếu kiện Tiếng việt có nghĩa "nếu khơng" Từ khố if dùng kết so sánh để tới định kích hoạt đoạn code Đoạn code sau so sánh giá trị variable a với 7, Flash chơi frame 10

if (a == 7) {

gotoAndPlay(10); }

Từ khố if ln bắt đầu cho điều kiện so sánh Luôn đặt code so sánh ngoặc đơn () Tất code kích hoạt nều điều kiện thoả mãn để đâu ngoặc móc {}

Từ khố else bổ sung cho if trường hợp bạn muốn thực đoạn code điều kiện if không thỏa mãn Ví dụ:

ActionScript

if (a == 7) {

gotoAndPlay(10); } else {

gotoAndPlay(15); }

Nếu trường hợp cần thỏa mãn nhiều điều kiện dùng cú pháp if else if else Bạn có bao nhiều else if

Nãy ta chi nói tới điều kiện dựa so sánh, AS cho phép dùng so sánh đa hợp (compound comparision) Trong điều kiện Flash ta dùng nhiều so sánh đễ tới kết xác Ví dụ a lớn 10 a phải nhỏ 15 lệnh cho Flash chơi frame 10

ActionScript

if ((a > 10) and (a < 15)) { gotoAndPlay(10);

}

Từ khoá and (cịn viết &&) u cầu phải thoả mãn điều kiện phép so sánh Bạn dùng từ khố or (cịn viết ||)nếu cần thoả mãn điều kiện phép so sánh

if ((a > 10) or (a < 15)) { gotoAndPlay(10);

}

Vòng lặp

Cú pháp vịng lặp (loop) rắc rối so với cú pháp điều kiên if tương tự C, C++, Java Gồm có loại vịng lặp for loop, while loop do-while loop

for loop coi vịng lặp với từ khố for cú pháp nhìn sau:

ActionScript

for(var i=0;i<10;i++) { trace(i);

}

Nếu bạn cho chạy đoạn code bạn có từ số tới output window for loop tăng giá trị variable i suốt trình thực loop Điều kiện for loop có phần chính, cách biệt dấu chầm phẩy ( Đầu tiên điều kiẹn bắt đầu với việc tạo local variable cho for loop var i=0 phần for loop thực có lần lúc bắt đâu Phần thứ hai điều kiện for loop i<10, thực vòng lặp Nếu điều kiện thoả mãn tiếp tục vịng lặp Và phần cuối phép tính cho tiếp nối for loop vòng lặp, i++ nên giá trị i tăng sau vòng lặp trước vòng lặp bắt đầu phần bỏ vào ngoặc đơn () Còn code thực vòng lặp ngoặc móc {} Bây giả làm computer chạy for loop

1 Tạo local variable ấn định giá trị cho

2 Kiểm tra giá trị i có nhỏ 10 khơng, nhỏ 10 vịng lặp thực code {}, cịn khơng tới bước thứ

Tới bước thứ giá trị i 10

while loop với từ khoá while có cú pháp nhìn tương tự sau:

ActionScript

while (a > 0) {

// code thực while loop }

Đơn giản for loop, while loop tương tự điều kiện if đơn giản, thực code vòng lặp điều kiện while loop thỗ mãn, bạn dễ dàng vào trường hợp vịng lặp vơ hạn, dẫn đến tình trạng treo máy Trong đoạn code trên, bạn phải làm co lúc a nhỏ hay vòng lặp ngừng lại

Giống while loop, do-while loop có cú pháp nhìn sau:

ActionScript

do {

// code thực do-while loop } while (a > 0);

Chỉ khác với while loop do-while loop thực code vòng lặp trước kiểm tra điều kiện (while loop kiểm tra điều kiện chạy code vòng lặp)

Muốn phá khỏi trình tự hành loại loop dùng lệnh break continue Lệnh break phá khỏi loop hoàn toàn lệnh continue phá khỏi vịng lặp bắt đầu vòng lặp Tạo ví dụ cụ thể phức tạp, nên tạm khoan bàn tới lệnh sau

Hàm

ActionScript

function myFunction(num) { var newNum = num + 3; return newNum;

}

Fuction khố function, tên function chữ cách bạn đặt tên cho variable, lưu ý cách đặt tên cho fuction để người ta đọc tên biết chức function Theo sau tên function thơng số

(parameter, cho ngằn gọi thơng số param viết này) để ngoặc đơn () Function co

hay nhiều param hay không cần param Param chẳng qua la variable dùng function, variable truyền tự vào function gọi Đoạn code function thực nằm ngoặc móc {} Bây giớ phân tích đoạn code Khi function myFunction gọi, param num truyền vào, sau function myFunction tạo local variable tên newNum, ấn định giá trị newNum giá trị param num cộng với Sau myFunction dùng lệnh return để ấn định giá trị newNum kết myFunction Lệnh return lệnh đặc biệt dùng function mà Lệnh kết thúc function

Để sử dùng function này, dùng lệnh hay hàm AS, giống trace() Đây ví dụ: var a= myFunction(7); Trước tiên tạo local var sau ấn định giá trị local var kết myFunction với param 7, cuối thi local var 10

Một ưu điểm function bạn tái dụng Dưới hàng code dùng chung fuction cho kết khác

ActionScript

trace(myFunction(7)); trace(myFunction(13)); trace(myFunction(2));

Dot Syntax

Một điều bạn thấy nhiều trình học AS dot syntax (hỗng biết dịch bây giờ) Dot syntax phương pháp dùng lập trình theo hướng đối tượng (oob: object oriented programming)

Đây ví dụ dot syntax Nếu bạn muốn lấy bình phương số, Flash có sẵn function để làm chuyện rồi, hàm thuộc đối tượng toán, tên Math Vậy muốn gọi function trước tiên bạn phải gọi tên đối tượng mà fucntion trực thuộc, Math, theo sau dấu chấm (dot), tới tên function sqrt Cách viết sau:

ActionScript

var a = Math.sqrt(4);

Một cách dùng dot syntax khác để truy cập đặc tính hay variable đối tượng, movie clip

ActionScript

var a = myClip._x;

var a = myClip.myVariable;

Chúng ta đề cập đến đối tượng Math MovieClip tới, cịn quan trọng bạn nắm khái niệm dot syntax

Chú giải

Một đức tính cần có lập trình viên viết code cho dễ đọc dễ hiễu Nhưng nhiều dù viết có cố gắng cách đoạn code khó hiễu cho người xem, cần lời giải Muốn giải AS cần dùng ký hiệu// trước câu giải Nếu giải nhiều vài dịng dùng kiểu

ActionScript

/*

giải: cộng cho a cộng cho b */

a += 2; // add a // add to b b += 2;

Debugging

Thường thời gian diệt bọ tốn gần 1/3 thời gian phát triển chương trình Nếu bạn nắm vững "nghê thuật" diệt bọ bạn rút ngắn nhiều thời gian Có cách diệt bọ hữu là: phân tích, viết message output window dùng AS debugger

Với loại bọ đơn giản phân tích đoạn code giúp bạn bắt trúng bọ cần diệt Dùng output window để theo dõi đối tượng, vòng lặp, điều kiện, nhờ vào bạn biết chổ code có vấn đề, cuối dùng AS debugger có sẳn Flash Debugger window cho phép bạn coi hết tất moi thành phần movie bạn, cho phép bạn dùng AS bất chổ bạn muốn Tham khảo thêm phần trợ giúp Flash để biết cách dùng debugger

Giờ thứ 05: Điều khiển luồng movie, Control the flow of the movie

Sử dụng AScript cách điều khiển movie đơn gỉản nhất, nhung lại hiệu Chương bạn học cách :

 để dừng Movie frame

 Sao để nhảy từ frame đến frame  tạo nút cho phép điều khiển movie  tạo slide show đơn giản

Dừng movie

Đây câu lệnh stop:

ActionScript

stop();

Khi bạn dùng câu lệnh , movie tạm dừng frame mà bạn đặt câu lệnh Các animation bên movieClip file đồ họa tiếp tục chạy frame Nhưng animation time line bị dừng

Để cho animation timeline tiếp tục chạy, ta sử dụng lênh đơn giản lệnh play ta bàn đến sau

Ví dụ

Tại frame 1, bạn thả text box viết vào Chữ A Tại frame 2, bạn thả text box viết vào Chữ B Tại frame 3, bạn thả text box viết vào Chữ C

Bây bạn hay đặt câu lệnh stop(); vào Frame 2, bạn se thấy chữ A xuất nhanh đến chữ B, chữ C ko thấy xuất hiện,, Đơn giản câu lệnh stop() dừng

animation timeline Frame

Nhảy từ frame đến frame kia

Một câu lệnh AS câu lệnh gotoAndPlay Câu lệnh giúp bạn nhảy từ frame đến frame mà bạn muốn Bạn sư dụng số thứ tự frame tên frame

ActionScript

gotoAndPlay(7); gotoAndPlay(20);

bạn sử dụng nhiều movies , hay gọi cảnh(scene) Nếu Câu lệnh gotoAndPlay có tham số, tham số frame Nhưng có tham số,thì tham số đầu tiền tên scene, tham ssố thứ số thứ tự frame hay tên frame

ActionScript

gotoAndPlay("My Scene","My Frame");

Khi bạn dùng gotoandPlay,movies nhảy đến frame mà bạn gọi , tiếp tục chạy, bạn muốn nhảy đến frame dừng lại, bạn co thể sử dụng gotoAndStop Câu lệnh dùng y hệt gotoAndPlay, với lựa chọn tham số hay tham số

Ngồi có thêm câu lệnh họat động giống gotoAndStop , nextFrame and prevFrame

Để hiểu rõ câu lệnh này, ta tiếp phần sau Tạo nút (button)

Nút biểu tượng (symbol) Flash, movie cilps hình Tạo button

Có nhiều cách để tạo nút Một cách chọn Insert, New Symbol từ Menu Một hộp thoại lên hỏi bạn đặt tên lựa chọn biểu tượng bạn loại Movie clip, button, hay đồ họa Bạn chọn Button

Bây cửa sổ Flash thay đổi, timeline button thay timeline movie Có frames timeLine button Chúng có tên Up, Over, Down, HIt CHúng thể trạng thái button, vùng họat động button

VÙng hoạt động button tương tự

Mặt khác , bạn tạo hiệu ứng khác cho button bạn VÍ dụ bạn đổi mầu vòng tròn màu xanh Frame OVER,có nghĩa bạn đưa chuột qua button, button chuyển sang màu xanh

Khi bạn tạo xong button, bạn trở lai movie timeline Và button bạn sẵn sàng thư viện FLash Bạn viêc bấm F11, tìm button bạn kéo thả vào nơi bạn cần cửa sổ thiết kế

Tạo script cho button

Để đặt script cho button, chọm button Sau vào cửa sổ Action cách bấm chuột phải lên button chọn Action từ menu xuất

Hãy Chắc chắn cửa sổ Action đặt chế đọ Expert Bạn kiểm tra băng popup menu góc bên phải cửa sổ

Đây đoạn mã thơng thường cho button Bạn đặt cửa sổ mã sau kiểm tra movie xem họat động

ActionScript

on (release) {

trace("You clicked the button!") }

on : keyword, gọi để xử lí kiện

Release : Là kiện, người sử dụng click vào button nhả chuột Đoạn mã trace thực thi

Thực Hành: Tạo Slide Show đơn giản

Có lẽ ko phải diễn tả nhiều Slide Show, bạn tưởng tượng giông Power Point Khi bấm chuột, slide chuyển sang slide khác

1 Mở Flash, chọn New

2 Trong Layer 1, từ Frame đến Frame 4, bạn đăt biểu tượng hay hình ảnh, text khác để phân biệt frame

3 Sau bạn tạo layer mới, đặt button lên layer này.Tiếp theo bạn chọn Frame layer 2, bấm F6 Điều đảm bảo cho button bạn xuất tất Frame Layer

Bây copy đoạn mã sau vào button bạn, ý nhớ copy vào action button, ko phải vào frame

ActionScript

on (release) { nextFrame(); }

Cuối chọn Frame Layer action chèn đoạn code sau

ActionScript

stop();

Hãy chạy thử slide show bạn = cách bấm Ctrl Enter 5) Xây dựng presentation đơn giản:

down load file FLA để xem easy

Giờ thứ 06: Điều khiển movie clip, Controlling Movie Clips 6th Hour Điều khiển movie clip

Bạn học

1- lệnh cho movie clip 2-Tạo playback cho animation

3-TÌm hiểu đích(target) movie clip 4-Tập viết code cho movie clip

5-Tạo movie clip chạy lùi lại

1) Ra lệnh cho movie clip :

Một movie đơn giản NÓ cần frame movie clip Nhưng thân movie clip lại animation dài Việc dễ dàng thực mà ko cần Actioncript Để điều khiển movie, bạn phải đặt tên cho movie clip Chú ý movies clip có tên, tên sử dụng cho timeline Một tên sử dụng cho actioncript tên đặt trùng tên khác tên

Làm để đặt tên cho movie clip :

Chọn insert -> New Symbol (hoặc bấm Ctrl F8), đặt tên cho movies clip (nhớ lựa chọn option movies clip, ko phải button hay graphic)

Tên sử dụng cho timeline vd: gear animation

Thả movie gear animation vào cửa sổ thiết kế PHía cửa sổ properties, ban thấy box instance name Đặt tên cho movie

tên sử dụng cho Action script , vd : gears

và vậy, bạn lập trình , tên sử dụng gears , ko phải gear animation bạn sử dụng dấu chấm để đưa lênh cho movie bạn ví dụ

gears.stop();

gears.gotoAndStop(5);

Nhớ movie clip ln có level Nếu đoạn mã đặt movieclip, bạn ko cần sử dụng tên movies, cần gotoAndStop(); Nếu bạn đặt tên movie vào, Flash tìm movie bạn từ timeline Tức phải qua level -> chậm chút

2)Animation Playback Controller

Hãy down load source code từ phần download xem Về bản, làm việc sau:

- Tạo Movie ,đặt tên gear animation - Đặt instance name gear(hướng dẫn trên) - Frame time line chính, chèn code

ActionScript

gears.stop();

-Tạo button Advance, Previous, Play, Stop, and Rewind -Code cho button

Advance

ActionScript

on (release) {

gears.nextFrame(); }

Previous

ActionScript

on (release) {

Play

ActionScript

on (release) { gears.play(); }

Stop

ActionScript

on (release) { gears.stop(); }

Rewind

ActionScript

on (release) {

gears.gotoAndStop (1); }

3) Target movie

Level Flash time line chính(Level 0) Nếu bạn muốn lệnh cho time line này, bạn dùng code sau

_root.gotoAndStop();

thậm chí bạn đặt code time line chính, bạn ko cần _root Chỉ cần gotoAndStop(); Giả sử bạn có movie time line, tức bạn có level sâu hơn(level 1) Nếu bạn từ time line chính, muốn goi movie gears , bạn phải dùng câu lệnh

gears.gotoAndStop(7);

this["gears"].gotoAndStop(7);

Cả cách giống Tuy nhiên this có nghĩa level hành VÍ dụ trên, level hành this level Nhưng code đặt movie, level hành level Bạn phải ý

Giả sử bạn có movie khác bên movie, tức bạn có level Nếu bạn muốn từ level gọi đến level 2, bạn phải dùng _parent

Parent dùng giống root, khác chỗ, gọi từ level Còn root gọi từ level (tức level gốc)

Thuận lợi từ việc sử dụng root, this bạn gán biến cho movie clips

ActionScript

var whichClipToUse = "gears"; this[whichClipToUse].stop();

Thuận lợi vịệc sử dụng this nhiều root chỗ , ko phải lúc thứ xảy time line chính, đơi ta muốn xảy level định Bởi this cách tốt để goi level movie Tuy nhiên trương hợp đơn giản, hay đặt tên cho movies

4) Mã cho movie clip

Chúng ta bàn button trên, movie clip script giống button,

ActionScript

onClipEvent (load) {

trace("This clip has been loaded."); }

load : kiện xảy movie clip xuất lần hình NĨ xảy lần

Nhớ time line bị đừng, movie clip nằm time line tiếp tục chạy Sự kiên enterFrame xảy liên tục bên movie clip đến frame Sự kiện thực thi đoạn mã cách liên tục bị kết thúc

ActionScript

onClipEvent (enterFrame) {

trace("This clip has entered a new frame."); }

bây copy đoạn code vào sổ action timeline run bạn thấy

ActionScript

This clip has been loaded

This clip has entered a new frame This clip has entered a new frame This clip has entered a new frame This clip has entered a new frame

dòng chữ tiếp tục bạn tắt movie

Giờ thứ 07: dịch chuyển thay đổi movie, Moving and Changing Movie Clips

Một movie clip (MC) có thuộc tính, cho phép bạn xác định vị trí, phóng to thu nhỏ, quay, chí làm biến

Chương bạn biết cách: -thay đổi vị trí mc

Mọi thứ Flash có vị trí VỊ trí đo PIXEL Góc bên trái hình vị trí (0,0) Nó vị trí giao hàng ngang cột dọc

Nếu bạn sử dụng movie mặc định, góc bên phải 550,400 Có nghia 550 pixel từ bên trái sang 400 pixel từ bên xuống

2) Vị trí Mouse:

Cũng movie, mouse xác đinh tọa độ CHú ý thuật ngữ mouse nói đến trỏ (cursor), khơng phải chuột bạn cầm tay ^^

Có hai thuộc tính trỏ , _xmouse _ymouse

line chính, mặc định góc trái Nếu xmouse ymouse thuộcc tính movie clip, mặc định trung tâm MC

Hầu hết trường hợp thuộc tính liên quan đến movie chính, bạn nên dùng cách _root._xmouse _root._ymouse

Đây đoạn code ví du

CODE

onClipEvent (enterFrame) { trace(_root._xmouse); trace(_root._ymouse); trace("");

}

Khi bạn chạy movie, bạn thấy cặp số in ra, tọa độ x,y mouse Hãy dịch chuyển mouse lên góc trái trên, bạn thấy vị trí mouse 0.0 góc phải dưới, tọa độ 550 400

Chú ý: bạn đưa chuột ngồi Flash window, tọa độ cht xmouse y mouse không thay đổi Nếu bạn di chuyển chuột thật nhanh từ trung tâm cửa sổ cửa sổ, giá trị cũ bạn quay trở lại cửa sổ VÌ vậy, bạn phải lên kế hoạc cẩn thẩn trước dùng xmouse, y mouse

3) Làm movie quay

Một thuộc tính khac thuộc tính _rotation

Thuộc tính rotation chấp nhận giá trị góc độ Một vòng tròn chia 360 độ, miền giá trị thuộc tính rotation -180 180 Bạn sử dụng giá trị integer hoạc floating point Giá trị _rotation ln ln vịng -180 180, ví dụ 179, -179 Nhưng bạn đặt 181, hiểu thành góc độ -179

CODE

myClip._rotation = 90; myClip._rotation++;

_root["myClip"]._rotation = 45; this._rotation += 0.5;

4) Co giãn đàn hồi MC:

Bạn làm co giãn, thay đổi chiều dài chiều rộng movie clip Scale thuộc tính

THuộc tính để làm việc _xscale cho chiều ngang _yscale cho chiều dọc

Các giá trị gán cho x,y scale phần trăm Có nghĩa giá trị 100 100 phần trăm , thuộc tính mặc đinh cho movie clip gốc Bạn sử dụng số nhỏ 50 để làm movie co lại Hoặc sử dụng số to hơn, 200 để giãn movie Thậm dùng giá trị âm để lật movie

ví dụ 07mousesclae.fla chứa đoạn mã mà chúgn ta gặp nhiều sau Nó kiểm tra tọa độ mouse, Sau xác đinh từ mouse đến trung tâm movie xa Rồi sử dụng khoảng cách ,cả chiều cao chiều rộng để tính phần trăm tỉ lệ cho movie clip

CODE

onClipEvent (load) {

// get the original width and height of the mc origWidth = this._width;

origHeight = this._height; }

onClipEvent (enterFrame) {

// get the distance from the center of the mc to the mouse dx = _root._xmouse-this._x;

// calculate the percentage of scale sx = 100*dx/(origWidth/2);

sy = 100*dy/(origHeight/2); // set the scale of the mc this._xscale = sx;

this._yscale = sy; }

Chú ý ta sử dụng thuộc tính mới, _width _height trả chiều cao chiều rộng movie clip Pixel CHúng lưu giú onClipEvent (load) để ta cần lấy lại giá trị gốc movie

Thuộc tính _width, _height

Sự khác scale width,height í scale sử dụng giá trị phần trăm Còn width height sử dụng pixel Movie có giá trị sau: width 75, height 45, scale cho xscale and yscale 100 phần trăm

Dưới ví dụ sử dụng width height thấy cho xscale, yscale

CODE

onClipEvent (enterFrame) {

// get the distance from the center of the mc to the mouse dx = _root._xmouse-this._x;

dy = _root._ymouse-this._y; // set the scale of the mc this._width = dx*2; this._height = dy*2; }

onClipEvent(load) gái trị chiều dài chiều cao movie gốc ko cần lưu trữ.Đây ví dụ cho thấy sử dụng width height tiện dụng xscale ,y scale

5) Visibility

Một thuộc tính khác MC thuộc tính _visible , giá trị thuộc tính giá trị boolean true , false

CODE

myClip._visible = false;

hãy xem ví dụ 07visible.fla để rõ

Giả sử ta không muốn movie biến hẳn, mà bị mờ đi, ta sử dụng thuộc tính _alpha Thuộc tính có giá trị từ đến 100

CODE

myClip._alpha = 50;

Thuộc tính alpha kênh màu thứ 4, tên alpha channel kênh red ,green, blue đủ để tạo màu cầu vồng Khi bạn nghe đến đồ họa 32 bit, có nghĩa đủ kênh màu Cịn 24 bit có nghĩa cỏ kênh

Nếu giá trị _visible movie suốt hồn tịan nhìn thấy tất thứ phía sau movie

Nhìn hình sau để xem movieclip với giá trị alpha khác nhau, 10, 50 100 (từ trái sang)

Giờ thứ 08: chọn, kéo thả movie clip, Moving and Changing Movie Clips

1 Selection

Tạo chọn lựa, có nghĩa user click vào item , khơng có xảy Như vậy, người dùng lựa chọn thay đổi lựa chọn

Chúng ta sử dụng lụa chọn bước để học kéo thả movie Button bên Movie method

Một movie phản ứng với mouse click Không thể sử dụng kiện on (release) hay (Press) ta phải tìm cách đánh lừa Đó sử dụng button bên movie Button xử lý mouse click, miễn có độ lớn đủ để bao trùm movie

Hãy xem ví dụ 08buttoninmc.fla Ta nhìn thấy movie clip hình.nhưng thực chất bên movie clip button

Để tạo khả select, ta phải tạo nhiều frame.Frame chứa button tên offbutton Button có mã

CODE

on (release) {

this.gotoAndStop(2); }

bằng this, button gọi đến movie clip mà nằm Frame thứ chứa nút tương tự nhu frame , tên onbutton, nút có mầu sáng để người dùng nhận chọn

CODE

on (release) {

this.gotoAndStop(1); }

cuối đặt vào frame

stop();

Bây chạy để xem Phương thức hitTest

Có cách khác để làm movie sử lý mouse click mà khơng cần button, sử dụng kiện onClipEvent(mouseDown) onClipEvent(mouseUp)ví dụ

CODE

onClipEvent (mouseUp) { this.gotoAndStop(2); }

Hãy chạy ví dụ 08twomcs1.fla để xem.Bạn thấy onClipEvent(mouseUp) khác với on (Release) Nếu bạn click vào movie, hai phản ứng.Bởi tất movie clip nhận kiện mouse up gửi đến cho chúng

Quyết đinh movie click

Có cách để click vào movie muốn Đó sử dụng vị trí chuột để xác định Sửa đoạn mã thành sau

CODE

onClipEvent (mouseUp) {

if (this.hitTest(_root._xmouse, _root._ymouse)) { this.gotoAndStop(2);

} }

vậy cách ràng buộc movie clip với mouse location , ta click movie ta muốn VIết mã cho selection:

Chúng ta phải cho phép User click lên movies nhiều lần thay đổi trạng thái MC từ bật sang tắt, hay tắt sang bật

Đoạn mã sau xác định movie trạng thái gửi đến frame khác VIệc thực thuộc tính _currentFrame Thuộc tính đọc giá trị khỉ frame thứ nhất, giá trị frame thứ

onClipEvent (mouseUp) {

if (this.hitTest(_root._xmouse, _root._ymouse)) { if (this._currentFrame == 1) {

this.gotoAndStop(2); } else {

this.gotoAndStop(1); }

} }

Bây bạn thấy cách để tạo chọn lựa movie Cách thư tiện lợi bạn muốn dùng trang thái khác Over,up , down Cách thứ hai khơng cần nhiều biểu tượng thư viện

Enjoy

2) Kéo movie clip

Bây ta học kéo movie

Có cách để kéo movie, cách thứ sử dụng lệnh Cách dễ sử dụng khơng cho bạn nhiều lựa chọn việc sửa đổi giám sát movie

Cách Drag bản:

2 câu lệnh drag co :startDrag stopDrag bạn dùng startDrag bạn muốn movie bạn theo chuột, stopDrag bạn muốn movie bạn không theo chuột Đây đoạn code :

CODE

onClipEvent (mouseDown) {

if (this.hitTest(_root._xmouse, _root._ymouse)) { this.startDrag();

} }

if (this.hitTest(_root._xmouse, _root._ymouse)) { this.stopDrag();

} }

Sự kiện onClipEvent nhìn tương tự ta làm Chúng sử dụng hitTest để nhận biết movie click Và sau câu lệnh startDrag stopDrag sử dụng Khi chuột bấm xuống, câu lệnh startDrag thực thi Và ngược lại, chuột thả ra, stopDrag thực thi

Hãy xem movie, bạn thấy với câu lệnh drag, bạn kéo movie cách độc lập Nhưng ý bạn kéo movie lúc Chỉ movie kéo thời điểm Vì bạn nên cần cách drag phức tạp linh động để làm ứng dụng hay game

Note: startDrag có thám số Tham số thứ giá trị True(hoặc False) để định việc trung tâm movie clip có khóa với vị trí chuột hay khơng Các tham số lại left, top, right, bottom Nếu bạn đặt chúng, movie bạn kéo theo ràng buộc

Kéo nâng cao

Bây ta học cách kéo movie mà ko dùng câu lệnh startDrag stopDrag Vậy làm nào??

Bạn cần có phần mã sau movie bạn:

Thứ kiện onClipEvent(load), kiện đặt cho biến global tên dragging giá trị false Khi biến true, tức báo hiệu movie kéo

Thứ hai, ngưịi dùng click vào movie Có nghĩa dragging = true

Thứ ba, trình kéo tiếp tục diễn kiện onClipEvent(enterFrame) Sự kiện đơn giản gán _x _y (thuộc tính movie clip) cho _root._xmouse

Thứ 4, ngưịi dùng thả chuột , biến dragging gán false Sau đoạn code đầy đủ

CODE

onClipEvent (load) {

// start out not dragging dragging = false;

}

onClipEvent (mouseDown) {

if (this.hitTest(_root._xmouse, _root._ymouse)) { // follow the mouse from now on

dragging = true; }

}

onClipEvent (enterFrame) { if (dragging) {

// set to location of the mouse this._x = _root._xmouse; this._y = _root._ymouse; }

}

onClipEvent (mouseUp) {

if (this.hitTest(_root._xmouse, _root._ymouse)) { // don't follow the mouse any longer

dragging = false; }

Trong ví dụ 08complexdrag.fla chứa MC Kiểm tra movie, sử dụng MC bên trái Đây MC làm theo đoạn code Chú ý xem trung tâm movie đựơc khóa với vị trí chuột Nó làm movie nhảy bạn click vào

Thơng thường, bạn muốn kéo MC lên hình, bạn khơng muốn nhảy tới để làm khớp vị trí chuột với trung tâm MC Hãy kéo file xung quanh hình.Bạn thấy bạn click chuột vào điểm movie, movie làm khớp vị trí click chuột với trung tâm movie Điều tương tự với câu lệnh startDrag

Để tránh điều này, cần thêm đoạn code nhỏ Khi ngưòi sử dụng bấm chuột, lấy offset, khoảng cách từ chuột trung tâm movie Sau đó, thay việc gán vị trí chuột đến trung tâm movie, ta se thêm vào offset MC luôn xuất offset giá trị người dùng kéo

Tưởng tượng , ví dụ ngưịi dùng click vào điểm cách trung tâm movie pixel Sau ta ln muốn khoảng cách pixel trì Điều làm cho người dùng click vào điểm để kéo movie

Đây code cho movie 2(bên phải)

CODE

onClipEvent (load) {

// start out not dragging dragging = false;

}

onClipEvent (mouseDown) {

if (this.hitTest(_root._xmouse, _root._ymouse)) { // follow the mouse from now on

dragging = true;

xOffset = this._x - _root._xmouse; yOffset = this._y - _root._ymouse; }

}

onClipEvent (enterFrame) { if (dragging) {

// set to location of the mouse this._x = _root._xmouse + xOffset; this._y = _root._ymouse + yOffset; }

}

onClipEvent (mouseUp) {

if (this.hitTest(_root._xmouse, _root._ymouse)) { // don't follow the mouse any longer

dragging = false; }

}

Hãy xem movie để thấy khác biệt đoạn code 3) Kéo thả

Bây ta biết kéo movie, ta thả đâu.?

Vấn đề bạn muốn theo dõi hành động người sử dụng xác đinh người sử dung đặt movie đâu

Basic Drop Zone

Trong đoạn mã sau, chức hitTest sử dụng để so sánh MC kéo với movie khác tên dragZone lêvl(root level)

CODE

onClipEvent (mouseDown) {

if (this.hitTest(_root._xmouse, _root._ymouse)) { this.startDrag();

} }

onClipEvent (mouseUp) {

if (this.hitTest(_root._xmouse, _root._ymouse)) { this.stopDrag();

// see if this mc is inside the dropZone mc if (this.hitTest(_parent.dropZone)) { trace("Dropped in zone");

} else {

trace("Dropped outside zone"); }

} }

Chú ý hitTest không sử dụng trước, thay vị trí _x _y movie khác

Loại hitTest so sánh vị trí vùng bao phủ movie clip Trong trường hợp này, so sánh với _parent.dropZone Nếu có movie đè lên nhau, hitTest trả giá trị True Để xác đinh xem MC tồn tại, hình chữ nhật movie sử dụng Điều có nghĩa bạn sử dụng hình trịng, ví dụ, thân vịng trịn khơng chạm vào miễn hình nhật movie dùng

Có cách sử dụng hitTest Thứ sử dụng tọa độ x,y Chúng ta sử dụng movie clip vị trí x,y, sau sử dụng dropzone movie clip thứ

CODE

if (_parent.dropZone.hitTest(this._x,this._y)) {

Với đoạn code này, thay ví dụ trên, movie clip nằm bên hình chữ nhật vùng dropzone

Chúng ta thêm bước với hittest Bằng cách thêm tham số thứ cho hitTest, dùng hitTest để xem hình dạng xác movie clip xác đinh vị trí x,y Biến thứ cần gán true bạn muốn hành vi Nếu false, se hành động giống chức hitTest bình thường Đây đoạn code

CODE

if (_parent.dropZone.hitTest(this._x,this._y,true)) {

Bây movie kéo thả ta họat động tốt Nếu bạn sử dụng ví dụ 08drop.fla, movie bên phải sử dụng đoạn mã gơc, nằm đè hình chữ nhật dropzone Các movie khác sử dụng đoạn code phức tạp hitTest chúng có trung tâm nàm bên hình dạng gốc dropzone

Giờ thứ 09: Lấy thông tin từ người dùng, Getting input from the user

Cho tới bây giờ, qua làm quen với AS, tất tác động bạn lên flash làm qua chuột Nhưng ngồi chuột, bạn dùng bàn phím để nạp thơng tin vào Flash

Làm để phát người dùng bấm phím

Có cách để phát phím tên bàn phím bị nhấn dùng nút, dùng đối tượng Key, dùng "listener" (chỉ có Flash MX MX 2004)

1 Phát qua nút:

xử lý kiện on cho đoạn code nút Ví dụ đoạn code sau kích hoạt mà người dùng nhấn phím "a"

ActionScript

on (keyPress "a"){

trace ("Key 'a' pressed"); }

Trong movie mẫu 09keybutton.fla có nút đơn giản nằm hình vài ví dụ Nếu bạn cho chạy thử movie nhấn phím "a" Output window có viết dòng chữ

"Key 'a' pressed." Xử lý kiện on(keyPress) nhớ phải phân biệt dạng chữ (case-sensitive) nên bạn code cho nhận phím "a" khơng thể nhận phím "A" May mà dùng bao nhiều xứ lý kiện

Nếu bạn muốn xữ lý phím khác, phím mũi tên, enter, dài (space bar) bạn phải dùng code dành riêng cho chúng Vì dụ bạn muốn xữ lý phím mũi tên trái (left arrow key) dùng đoạn code sau:

ActionScript

on (keyPress "<Left>") { trace("Left pressed."); }

Và sau code dành cho phím đặc biệt:  <Right>

 <Tab>

 <Backspace>  <Escape>  <Home>  <Enter>  <Space>

Bạn hợp nhiều kiện lại chung với Ví dụ bạn có nút nút có phím tắt "b" Vậy bạn nhấn nút nhấn phím "b" code nút kích hoạt

ActionScript

on (keyPress "b", release) {

trace("'b' pressed or button clicked."); }

Các ví dụ có movie mẫu 09keybutton.fla

2 Phát qua Đối tượng phím (key object)

Mặc dù nút hữu ích việc phát người dùng nhấn phím, nút lại khơng thể phát trường hợp người dùng nhấn phím khơng tay Ví dụ bạn làm game Flash, người chơi cho thể làm cho nhân vật game di chuyển liên tục họ nhấn phím mũi tên không nhât tay lên

Cho trường hợp vậy, bạn phải dùng đối tượng Key Đối tượng Key tập hợp số hàm (function) số (constant) xây dựng sẳn Flash Bạn dùng hàm số để biêt phím bị nhấn hay khơng Ví dụ, muốn kiểm tra coi phím mũi tên trái có bị đang nhấn hay khơng dùng đoạn code sau:

ActionScript

Hàm Key.isDown cho kết hay sai phụ thuộc vào thông số có phải phím bị nhấn hay khơng Hằng số Key.LEFT tượng trưng cho phím mũi tên trái mũi tên trái bị nhấn output window cho hàng chữ "The left arrow is down" Dưới số tương tự Key.LEFT đề cập

 Key.BACKSPACE  Key.ENTER  Key.PGDN  Key.CAPSLOCK  Key.ESCAPE  Key.RIGHT  Key.CONTROL  Key.HOME K  ey.SHIFT

 Key.DELETEKEY  Key.INSERT  Key.SPACE  Key.DOWN  Key.LEFT  Key.TAB  Key.END  Key.PGUP  Key.UP

Nếu bạn muốn kiểm tra xem phím bình thường bị nhấn bạn phải dùng

Key.getCode để lấy mã số phím để dùng hàm Key.isDown Đây code mẫu bạn muốn kiểm tra phím "a"

ActionScript

if (Key.isDown(Key.getCode("a")) { trace("The left arrow is down"); }

3 Key Listener

Key listener dùng để quan sát bàn phím thơng báo cho Flash phím nhấn Ở cách thứ dùng đối tượng Key để kiểm tra coi phím có bị nhấn hay khơng, khơng thể biết xác lúc phím bị nhấn Nếu mà người dùng nhấn phím nhanh, trước onClipEvent(enterFrame) kịp kích hoạt đối tượng key để kiểm tra Flash người dùng nhấn phím Một bất tiện dùng cách thứ bạn muốn người dùng nhấn phím nhiều lần đối tượng Key khơng phân biệt lần nhấn dài nhiều nhấn thật nhanh

Ví Flash MX, MM cho thêm lựa chọn Key listeners bạn dùng "listener" (có thể hiểu quan sát viên) để theo dõi kiện bàn phím thơng báo cho Flash phím nhấn

Listener có phần Phần đầu phần tạo listener Bạn phải lệnh cho listener ý vào kiện bàn phím Đây code cho tạo listener

ActionScript

Key.addListener(_root);

Lệnh Key.addlistner tạo listener cho đối tượng thông số _root Và đối tượng thông báo kiện bàn phím

Trong đoạn code trên, _root đối tượng thông báo kiện bàn phím Nhưng nhận thơng báo _root phải làm gì? Vì cần phải viết code xử lý kiện cho _root Ví dụ đoạn code sau thực _root nhận thơng báo kiện bàn phím

_root.onKeyUp = function() { trace(Key.getAscii()); }

Khi người dùng nhấn phím, tay lên tạo kiện onKeyUP, kiện thơng báo tới _root (bạn thay _root bắng đối tượng nào) sau hàm Key.getAscii() cho kết mã số ASCII tương ứng với phím vừa nhấn, ví dụ A = 65, B = 66 v.v

Bạn xem fla mẫu 09keylistener.fla, trogn có đoạn code (lưu ý fla hết ngồi đoạn code AS frame đầu tiên)

Nếu bạn muốn biết phím thay ASCII code bạn dùng

String.fromCharCode() đễ cho kết bạn muốn tìm Thay dịng

trace(Key.getAscii()); băng trace(String.fromCharCode(Key.getAscii()));

Thật ngồi cách trên, cách dùng xử lý kiện onClipEven movie clip để theo dỏi kiện keyDown, keyUp, cách khơng cịn dùng Flash MX nữa, bạn cách Flash trước MX thơi

Bài Tập: Dùng phím để di chuyển movie clip Tạo file Flash

2 Tạo movie clip đơn giản

3 Gắn đoạn code vào movie clip

ActionScript

onClipEvent(enterFrame) {

Đoạn code kiểm tra phím mũi tên di chuyển movie clip theo hướng mũi tên Bạn thử movie coi

4 Thay đổi đoạn code cho hoàn chỉnh hơn: tạo biến [b]x, y[/b] có giá trị tương đương với vị trí ban đầu movie clip, lập giá trị cho biến [b]speed[/b] bắng Mổi frame movie, kiểm tra phím mũi tên điều chỉnh giá trị biến [b]x,y[/b] không điều chỉnh vị trí movie clip, sau phối hợp với biến [b]speed[/b] để tìm vị trí cho movie clip, di chuyện movie clip tới đó:

[code]onClipEvent(load) { x = this._x;

y = this._y; speed = 5; }

onClipEvent(enterFrame) { if (Key.isDown(Key.LEFT)) { x -= speed;

}

if (Key.isDown(Key.RIGHT)) { x += speed;

}

if (Key.isDown(Key.UP)) { y -= speed;

}

if (Key.isDown(Key.DOWN)) { y += speed;

}

this._x = x; this._y = y; }

chúng ta di chuyển movie clip tới đó, kiểm tra vị trí có hợp lý không (áo dụng rât nhiều game), thứ hai tiện cho thay đổi tốc độ di chuyển movie clip, cần thay đổi giá trị biến speed

Nhập văn bản

Trong Flash, người dùng nhẫp văn vào khung, bạn dùng AS để lấy văn Để cho người dùng nhập văn bản, bạn phải tạo khung input text

và tạo cho varible để tương ứng với gía trị khung input text (nếu bạn chưa biết tạo input text download CD hướng dẫn bên box tài liệu để tham khảo thêm)

Các chức thao tác làm việc với chuỗi ký tự (string

Chúng ta có nhềiu thao tác với chuỗi ký tự:

1 Ghép chuỗi lại với nhau: dùng ký hiệu + Ví dụ bạn có variable tên myVariable có giá trị "Hello", muốn ghép chữ "world" vào sau dùng sau: myVariable =

myVariable + "world" kết có "Hello world" Bạn ghép nhiều chuỗi lại với cách

2 Substrings Substring chuổi ký tự nhỏ chuổi ký tự khác Ví dụ "ell" substring "hello world" "hello" "elle" hay "hell"

Bạn lấy substring string với cú pháp sau: String.substring(start, end)); String đối tượng chuỗi mà bạn muốn trích phần, start số thứ tự ký tự bắt đầu cho chuổi bạn muốn lây, end số thự tự bắt đâu cho phần bạn không muốn lấy Lưu ý rắng ký tự đầu tiê có số thự tự Ví dụ với đoạn code sau, output window cho hàng chữ "lo W"

var myString = "Hello World."; trace(myString.substring(3,7));

Ngoài cách dùng tương tự cách khác thơng số có cú pháp sau: String.substr(start, length); thông số cho số thứ tự chữ thứ hai cho chiều dài chuỗi Đoạn code sau có kết tượng tự cách

ActionScript

var myString = "Hello World."; trace(myString.charAt(6));

Các hàm đối tượng String

Sau số hàm tiêu biểu đối tượng String

1 indexOf: dùng để tìm số thứ tự ký tự hay chuỗi nhỏ đối tượng String Nếu hàm indexOf tìm khơng thấy ký tự hay chuỗi nhỏ cho kết -1 Đây cú pháp:myString.indexOf(substring,start)); substring ký tự hay chuỗi muốn tìm, start số thự tự bắt đầu tìm đối tượng String Ví dụ:

ActionScript

var myString = "Hello World."; //output:

trace(myString.indexOf("W",0)); //output:

trace(myString.indexOf("llo",0));

2 lastIndexOf: tương tự indexOf tìm ký tự cuối ngược lên tớiký tự

var myString = "Hello World."; //output:

trace(myString.indexOf("l",0)); //output:

trace(myString.lastIndexOf("l"));

3 toUpperCase/toLowerCase: dùng để đổi chuỗi từ viềt thường sang viết hoa ngược lại

ActionScript

var myString = "Hello World."; //output: HELLO WORLD

trace(myString.toUpperCase()); //output: hello world

trace(myString.toLowerCase());

4 length: đặc tính Sring dùng để tính chiều dài chuỗi

ActionScript

var myString = "Hello World."; //output: 12

trace(myString.length); Bài tập:

1 mở file 09form-noscripts.fla

2 kiểm tra tên variable input text field qua property panel Thêm đoạn mã sau vào nút CLEAR

ActionScript

4 thêm đoạn mã sau vào nút SUBMIT

ActionScript

on (release) { submitForm(); }

5 Thêm đoạn code sau vào frame movie

ActionScript

function clearForm() { firstName = ""; middleInitial = ""; lastName = ""; address = ""; city = ""; state = ""; zip = ""; phone = ""; comments = ""; }

function submitForm() {

if (middleInitial.length == 1) {

trace("Name: "+firstName+" "+middleInitial+" "+lastName); } else {

trace("Name: "+firstName+" "+lastName); }

}

Giờ thứ 10: Tạo Và Điểu Khiển Văn Bản, Creating and Controlling Text

Dynamic Text

Bạn hiển thị văn dynamic text field Khác với Input field mà bạn làm quen số 9, dynamic text field cho phép AS thay đổi nội dung văn người dùng Vì nội dung, hình thức văn thay đổi lúc nên gọi dynamic text

Trước tiên bạn tạo dynamic text bẳng dụng cụ text toolbar, thay chọn "Input Text" property panel, bạn chọn "Dynamic Text"

Bước nối nội dung văn dynamic text field với variable cách viết tên variable vào khung Var propery panel Ví dụ bạn đặt variable myText vào khung Var bạn thay đổi giá trị myText văn dynamic text field thay đổi giống giá trị biến myText Ngồi bạn cịn thay đổi số lựa chọn cho dynamic text field "Single", "Multiline", or "Multiline No Wrap" để xử lý trường hợp nội dung văn dài cònn nhiều lựa chọn khác (Nếu bạn chưa nắm vững phần tham khảo thêm sử dụng Flash CD post box tài liệu)

Định dạng văn theo HTML (HTML format)

Để định dạng văn kiểu HTML, phải cho phép dynamic text field chấp nhận định dạng HTML (click vào HTML icon property panel) sau bạn dùng thẻ HTML để định dạng văn bạn Ví dụ đoạn code tạo văn sau:

CODE

myText = "This text is <B>bold</B>.<BR>"; myText += "This text is <I>italic</I>.<BR>";

myText += "This text is <U>underlined</U>.<BR>";

myText += "This text is <FONT FACE='Arial Black'>Arial Black</FONT>.<BR>"; myText += "This text is <FONT SIZE='24'>large</FONT>.<BR>";

myText += "This text is <A HREF='link.html'>linked</A>.<BR>";

QUOTE

This text is <B>bold</B>.<br> This text is <I>italic</I>.<br>

This text is <U>underlined</U>.<br>

This text is <FONT COLOR='#FF0000'>red</FONT>.<br>

This text is <FONT FACE='Arial Black'>Arial Black</FONT>.<br> This text is <FONT SIZE='24'>large</FONT>.<br>

This text is linked

Siêu liên kết (hyper link) có tác dụng giống HTML khác điều khơng có gạch

Sau thẻ HTML dùng Flash MX  <B></B>: viết đậm

 <I></I>: viết nghiêng  <U></U>: gạch

 <FONT FACE='Arial Black'></FONT>: kiểu chữ  <FONT SIZE='24'></FONT>: cỡ chữ

 <FONT COLOR='#XXXXXX></FONT>: màu chữ  <A HREF=''></A>: link

 <P></P>: Đọan văn  <BR>: Xuống hàng

Đối Tượng TextFormat

điều này, bạn cần phải tạo biến từ đối tượng TextFormat Sau bạn định giá trị cho thuộc tính Ví dụ bạn muốn kiểu chữ Arial Black, cỡ 26, màu đỏ dùng đọan code sau:

CODE

myFormat = new TextFormat(); myFormat.font = "Arial Black"; myFormat.size = 36;

myFormat.color = 0xFF0000;

textInstance.setTextFormat(myFormat);

Bạn dùng đối tượng TextFormat stylesheet file HTML, bạn tạo bạn dùng chổ movie

Bạn coi đọan code file mẫu: 10formattext.fla Variable ngồi Flash

Bạn lấy biến từ trang HTML vào Flash để thay đổi nội dung Flash hay dùng vào chuyện Ví dụ bạn phải làm 30 banner Flash cho 30 trang web, bạn làm banner thôi, thay đỗi nội dung tuỳ theo trang web Muốn nhập văn hay giá trị biến từ HTML, bạn cần thêm vài chữ vào sau tên movie phần <object> <embed> HTML Đoạn mã HTML sau nhập giá trị biến txtName vào Flash

HTML

<PARAM NAME=movie VALUE="10banner.swf?txtName=Dominico Savio!"> thẻ <embed> bạn thêm phần variable giá trị vào sau tên file

HTML

src="10banner.swf?txtName=Dominico Savio!">

Khi movie load tự tạo variable "txtname" đặt giá trị cho biến

"Dominico Savio" Bạn xem trang 10banner.html, 10banner.fla source file để xem chi tiết

txtName=Dominico Savio!&gender=male"

Ngoài lấy biến từ HTML, bạn cịn lấy biến từ text file Cách thích hợp bạn có nhiều biến để nhập vào Flash, hay giá trị biến dài để gắn vào thẻ HTML Bạn cần dùng lệnh loadVariables() để làm điều Ví dụ:

CODE

loadVariables("10external.txt", _root);

Bạn coi thêm cách dùng loadVariables() bên box ActionScript [Bài Tập

Một ví dụ đơn giản áp dụng điều mà bạn vừa học làm "news ticker" dây:

<giong Marquee>

Dòng chữ chạy từ bên phải qua bên trái cho suốt tin Bạn tham khảo source fla: 10ticker.fla test để có khái niệm thêm "news ticker"

1 Tạo movie

2 Tạo dynamic text field, với độ cao vừa hàng, dài chiều ngang stage, dễ nhận, bạn viết vài chư đó, "text goes here"

3 Tạo variable cho text field text

4 Chọn font, nên dùng kiểu chữ tương tự Courier New, cho bề ngang chư

5 Con text field nhấn F8 để đổi thành Movie Clip, đặt cho tên tuỳ bạn

6 Sau gắn đoạn script sau vào movie

CODE

onClipEvent(load) { // đặt tin

tickerText = "News Alert: ";

tickerText += "The first manned flight to Mars prepares to leave Earth orbit "; tickerText += "Your favorite sports team wins championship ";

tickerText += "Scientists find cure for major diseases "; firstChar = 0; // bắt đầu chữ

lineLength = 50; // số chữ tối đa news ticker // thêm khoảng trống vào trước dòng tin

for(var i=0;i<lineLength;i++) { tickerText = " " + tickerText; }

}

onClipEvent(enterFrame) { // phát tin

text = tickerText.substr(firstChar,lineLength); // thêm chữ kê tiếp

firstChar++;

// phát lại tin sau lần kết thúc if (firstChar > tickerText.length) { firstChar = 0;

} }

Trước tiên bạn tạo biến tickerText để chứa văn news ticker, biến firstChar để chứa giá trị chữ thấy news ticker, lineLenght số chữ xuất lúc news ticker Và tất đểu cho vào sử lý kiện onLoad

Trong onEnterFrame, Flash lấy 50 chữ bỏ vào biến text (ở dynamic text field) hiển thị lên hình Sau di chuyển sang chữ thứ câu firstChar++;, sau kiểm tra, tin phát hết phát lại từ đầu. Bạn thay đổi giá trị lineLenght giá trị văn tickerText để hiểu biến

khơng Nếu khơng trở lại hỏi nhe Happy flashing

Giờ thứ 11: Làm việc với số, Chương hay bổ ích!

Chúng ta nghiên cứu text strings chương trước Bây nghiên cứu số Bạn phải đụng độ với số Action Script nhiều trường hợp, bạn cần phải hiểu để sử dụng chúng

Những phép toán (operator) hàm (function) số

Những phép toán đơn giản

Chúng ta học qua phép toán đơn giản Bây xem lại Dấu + dấu - thực phép toán cộng trừ, dấu * thực phép nhân, dấu / thực phép chia

Ngồi ra, bạn sử dụng phép toán +=, -=, *=, /= để làm đơn giản cho code bạn Lấy ví dụ hai câu lệnh thực công việc cộng thêm biến a

CODE

a = a + 7; a += 7;

Những phép so sánh

Những phép toán so sánh == để so sánh hai số xem có khơng, > (lớn hơn), < (nhỏ hơn), <= (nhỏ bằng), >= (lớn bằng) Trong Action Script so sánh số nguyên với số thực Ví dụ 7.2 lớn

Math.abs

CODE

trace(Math.abs(-7));

Math.round

Nếu bạn có số thực, bạn lại muốn hiển thị cho người dùng xem dạng số nguyên thay phải cho họ xem số phần thập phân, bạn sử dụng hàm Math.round Thử nhé:

CODE

trace(Math.round(7.2));

Math.ceil, Math.floor

Hai hàm khác dùng để làm tròn số thực thành số nguyên Math.ceil Math.floor Hàm Math.ceil làm tròn số lên Math.floor làm tròn số xuống Thử nhé:

CODE

trace(Math.ceil(7.2)); trace(Math.floor(8.3));

Math.min, Math.max

Các bạn sử dụng hai hàm để tìm số lớn số nhỏ hai số Ví dụ hàm Math.min(4, 5); trả 4, Min.math(4, 5); trả

Math.pow

Đây hàm để lấy lũy thừa, đơn giản thôi, tham số thứ số, tham số thứ hai lũy thừa Ví dụ bạn muốn lấy luỹ thừa viết

CODE

Math.pow(4, 3);

căn sử dụng

CODE

Math.pow(4, 5);

Math.sqrt(4);

Cả hai cách kết

Hàm số lượng giác

Những hàm object class mà bạn biết dễ học Nhưng cịn hàm lượng giác sin, cosin “khó nuốt” nhiều Mặc dù bạn bỏ qua hàm hàm lượng giác hữu ích hay việc tạo ứng dụng Flash Vậy tìm hiểu cách làm việc nhé!

Hàm sin cosin sử dụng qua Math.sin Math.cosin, biểu diễn mối quan hệ đường thẳng với đường cong đường tròn

Bây bạn tưởng tượng vòng tròn đường thẳng Bắt đầu từ điểm “a” có toạ độ 1,0 đến điểm 0,-1 qua -1,0 qua 0,1 cuối trở 1,0

Trong Flash, ngôn ngữ lập trình khác, định vị vật toạ độ x, y chúng Vì thế, việc chuyển điểm đường thẳng thành điểm có toạ độ x, y đường trịn hữu dụng Đó mà hàm sin cosin thực Ví dụ đặt điểm “a” điểm bắt đầu đường thẳng đường tròn, bạn có sử dụng hàm sin cosin để tính toạ độ x, y điểm “a” đường tròn Tất nhiên, Math.cos(0) trả giá trị 1, Math.sin(0) trả giá trị Kết trả toạ độ điểm “a” 1,0

Vậy điểm “c” nằm đâu đường tròn? Nếu duỗi đường trịn có độ dài 6.28 lần bán kính, bán kính nên độ dài 6.28 Đây xuất xứ số pi Pi 3.14, nửa độ dài đường tròn

Độ dài đường tròn 6.28 phần tư độ dài đường trịn 1.57 Điểm tương ứng với điểm “c” Hàm Math.cos(1.57) trả giá trị nhỏ, gần Hàm

Math.sin(1.57) trả giá trị gần -1 Chỉ gần khơng số pi khơng xác 3.14, gần

Trong đoạn code đây, cộng thêm n, movie clip chuyển động dọc theo đường trịn Hàm Math.cos tính giá trị x hàm Math.sin tính giá trị y, chúng nhân thêm với giá trị radius để tăng kích thước đường trịn

Giá trị centerX centerY cộng thêm cho toạ độ x, y, tâm đường trịn khơng cịn 0,0 mà vị trí 150,150

CODE

onClipEvent(load) { n = 0;

radius = 100; centerX = 150; centerY = 150; }

onClipEvent(enterFrame) { n += 1;

this._x = Math.cos(n) * radius + centerX; this._y = Math.sin(n) * radius + centerY; }

Chữ (string) số (number)

Có nhiều cách để chuyển đổi từ chuỗi sang số ngược lại Ví dụ trường hợp người dùng nhập số vào text field, bạn nhận giá trị cộng thêm Hãy xem đoạn code sau đây, num biến giá trị text field

CODE

b = num + 1;

phép cộng num với có nghĩa cộng ký tự “1” vào chuỗi num có giá trị “42” Để làm cho Flash hiểu num số, bạn sử dụng hai hàm sau để chuyển chuỗi thành số Hàm parseInt chuyển chuỗi thành kiểu số nguyên, hàm parseFloat chuyển chuỗi thành kiểu số thực Ví dụ hàm parseInt(“42”) trả giá trị 42, sử dụng parseInt(“42.9”) nhận giá trị 42 hàm parseInt khơng làm trịn số, lấy phần ngun mà thơi Cịn sử dụng hàm

parseFloat(“42.9”) bạn nhận giá trị 42.9, muốn làm tròn bạn sử dụng hàm Math.round(parseFloat(“42.9”)) Hàm parseFloat trả nguyên tham số truyền vào chuỗi số nguyên Ví dụ parseFloat(“42”) cho ta số 42 Trừ trường hợp bạn muốn trả giá trị số ngun, cịn khơng bạn nên sử dụng hàm parseFloat

Một nét đặc biệt hay hàm parseInt chuyển chuỗi thành số thành nhiều dạng hệ số khác Hãy xem ví dụ cho dễ hiểu:

CODE

parseInt(“FF”, 16);

Hàm trả giá trị 255, ý nghĩa chuyển chuỗi chứa số FF số hexa hệ số 16 thành số hệ nguyên hệ số 10

Ngược lại, để chuyển từ số sang chuỗi, sử dụng hàm toString Hàm hoạt động khác với hàm parse, hoạt động bên biến, gọi hàm sau dấu chấm (.) Xem ví dụ nhé:

CODE

a = 135;

trace(a.toString() + 1);

Kết 1351

Chúng ta sử dụng hàm toString để chuyển số thành chuỗi chứa số hệ số khác Ví dụ a.toString(16) trả kết chuỗi “ff”

Tạo số ngẫu nhiên phần quan trọng công việc thiết kế game số hoạt hình Bởi khơng có sơ ngẫu nhiên đoạn phim bạn chạy giống nhau, khơng cịn thú vị nữa!

Để tạo số ngẫu nhiên, bạn sử dụng hàm Math.random() Hàm trả giá trị từ 0.0 đến 1.0 thường khơng trả giá trị 1.0

Hãy xem ví dụ đây, bạn nhận số ngẫu nhiên cửa sổ OutPut

CODE

trace(Math.random());

Kết trả giống 0.023268056102097, lần lại khác

Một ví dụ khác bạn cần tạo số ngẫu nhiên từ đến 10, việc đơn giản, cần nhân thêm số ngẫu nhiên cho 10 Đoạn code sau cho ta số ngẫu nhiên từ 0.0 đến 10.0

CODE

trace(Math.random() * 10);

Nhưng cần số ngẫu nhiên từ 1.0 đến 10.0 từ 0.0 đến 10.0, thế, cộng thêm

CODE

trace(Math.random() * 10 + 1);

Bây kết trả 1.0 đến 11.0 khơng có kết 11.0 Hãy sử dụng hàm Math.floor để làm tròn xuống

CODE

trace(Math.floor(Math.random() * 10 + 1));

biểu thức phức tạp, rất phức tạp mà khơng thể đốn Kết trả cho kết dường ngẫu nhiên Kết đưa hàm tính lần lưu lại thành số chuẩn để tính ngẫu nhiên cho lần

Hãy nghĩ điều này, số ngẫu nhiên đời sống thật không thật ngẫu nhiên Nếu giữ mặt xúc xắc, theo hướng thật xác, có kết

Được rồi, thử tạo số ngẫu nhiên từ đến Làm đây? Ah, có thủ thuật cho bạn đây:

CODE

trace(Math.floor(Math.random() * + 3);

Trong phạm vi từ đến có tất số nguyên 3, 4, 5, 6, Thế cịn phạm vi từ 50 đến 100

CODE

trace(Math.floor(Math.random() * 51 + 50);

Là số 51 phạm vi từ 50 đến 100 có 51 số, cịn từ 51 đến 100

CODE

trace(Math.floor(Math.random() * 50 + 50);

Một cách để thử xem phạm vi bạn có ý khơng, thử với số nhỏ số lớn thay cho Math.random() Giá trị nhỏ hàm Math.random() 0, thử với số

CODE

trace(0 * 51 + 50);

Giá trị lớn Math.random() khơng xác 1.0 mà gần bằng, thử với giá trị 0.9999

trace(.9999 * 51 + 50);

Hãy thử xem có khơng nhé!

Dưới ví dụ thú vị, movie clip bạn nhảy đến vị trí

CODE

onClipEvent(enterFrame) { this._x = Math.random()*550; this._y = Math.random()*400; }

Luyện tập: Tạo chương trình máy tính đơn giản

Hãy bắt tay vào việc thiết kế chương trình máy tính đơn giản

- Mở movie Flash Movie giống hình

Chúng ta có 10 nút để nhập 10 số từ đến 9, nút phép tốn, phím =, dấu chấm thập phân, phím C để xóa hình Một text field đặt để hiển thị số người dùng bấm, text field liên kết với biến display

- Trong movie clip nút bấm, chèn đoạn code sau

CODE

on (release) {

_parent.keyPressed(this._name); }

Khi nút nhấn hàm keyPressed gọi level mà level root Hàm truyền tên movie clip

- Quay trở lại level root, movie clip phải có tên riêng, khơng trùng Đặt tên movie clip theo số nó, ví dụ nút số có tên 5, dấu chấm thập phân có tên “.” Dấu cộng, dấu trừ, dấu nhân, dấu chia, dấu bằng, nút C đặt tên plus, minus, multiply, divide, equals, clear

- Ok, bắt đầu viết code nhé! Code nằm movie frame

// trước tiên, xố hình cũ clearAll();

function clearAll() {

display = "0"; // giá trị mặc định memory = 0; // nhớ

operation = "none"; // chưa có phép toán

newNum = true; // đánh dấu nhập xong số }

Biến display chuỗi (string), liên kết với text field hiển thị nội dung người dùng bấm Nó bắt đầu với giá trị 0, có nghĩa người dùng bật máy lên mặc định số

Biến memory lưu lại số trước để thực phép tính Điều cần thiết, ví dụ bạn bấm số 5, +, số nhập vào, bạn bấm dấu cộng, hình xóa số lưu vào memory, số nhập tiếp thực phép tính

Phép toán người dùng chọn cần lưu vào nhớ Khi người dùng nhấn 5, +, rồi, sau bấm dấu = phép tốn khác chương trình gọi lại phép tốn cũ đựơc lưu biến operation để thực phép toán trước với

Biến newNum biến cờ hiệu để báo cho chương trình biết kết thúc phép tốn Ví dụ người dùng bấm 5, +, sau bấm phép tốn khác kết lưu lại để tính tốn tiếp, lúc phép tốn chưa kết thúc, newNum = false Cịn người dùng bấm dấu = hình kết kết thúc ln phép tốn để

chuyển sang phép toán mới, newNum = true

- Phần hàm keyPressed để xử lý nút nhấn Hàm keyPressed sử dụng cấu trúc switch thay cho cấu trúc if, then, else Cả hai cách hoạt động tương tự cách viết khác, bạn xem nhé:

CODE

// hàm gọi nút nhấn function keyPressed(keyName) {

switch (keyName) {

case "clear" : // nhấn nút C clearAll();

break;

case "plus" : // phép toán cộng, trừ, nhân, chia operate(keyName);

break; case "minus" :

operate(keyName); break;

case "multiply" : operate(keyName); break;

case "divide" :

operate(keyName); break;

case "equals" :

operate(keyName); break;

default : // số

if (newNum) { // hiển thị số hình display = keyName;

newNum = false;

if (display == "0") newNum = true; // số không bắt đầu với số } else {

display += keyName; // nối thêm số vào hình }

break; }

Khi người dùng nhấn nút C hàm clearAll() gọi, tương tự người dùng nhấn phép tốn hàm operate đựơc gọi

- Hàm operate thực tính tốn Nó tìm phép tốn số trướcđó số thời, sử dụng hàm parseFloat để chuyển chuỗi thành số.Operation có giá trị none nhập số sau thực xong phép toán hình xóa

CODE

// thực phép toán trước function operate(keyName) { switch (operation) {

case "none" : // số

memory = parseFloat(display); // lưu lại số trước break;

case "plus" : // thực phép toán memory += parseFloat(display); break;

case "minus" :

memory -= parseFloat(display); break;

case "multiply" :

memory *= parseFloat(display); break;

case "divide" :

memory /= parseFloat(display); break;

}

// equals operation is like a clear, but results are displayed if (keyName == "equals") {

operation = "none"; } else {

}

display = memory.toString(); // display result newNum = true; // prepare for next number }

Luyện tập: Làm hành tinh bay quanh quỹ đạo

Trong ví dụ lượng giác phần trước, bạn biết cách làm movie clip quanh quay vòng tròn Bây áp dụng kiến thức để làm movie hành tinh xoay quang mặt trời, hành tinh thứ có vệ tinh

- Tạo movie Flash

Tạo movie clip vòng tròn, đặt tên sun, mercury, venus, earth, mars, and moon, đặt instance name chúng giống Hãy làm cho kích thước khác chút nhé!

- Đặt movie clip sun (mặt trời) vào hình Các hành tinh khác quay quanh mặt trời Vị trí movie clip hành tinh khác khơng quan trọng, điều khiển vị trí chúng Action Script

- Đặt đoạn code sau vào movie clip mercurcy:

CODE

onClipEvent(load) { speed = 4; radius = 40; orbit = 0; }

onClipEvent(enterFrame) { orbit += speed;

Trong event load thiết lập tốc độ quay hành tinh, khoảng cách hành tinh với mặt trời Biến speed điều khiển tốc độ quay hành tinh, có nghĩa số vịng quay frame Nếu speed = 6.28 hành tinh quay vòng frame, speed = đoạn code sau hành tinh quay vòng quỹ đạo 15.7 frame (6.28/.4)

Trong lần event enterFrame xảy orbit (quỹ đạo) cộng thêm với speed thời, hành tinh di chuyển đến vị trí Toạ độ x, y hành tinh hiệu chỉnh theo vị trí mặt trời, tâm quỹ đạo hành tinh mặt trời

- Chạy thử movie Lúc này, hành tinh đứng yên, có mercurcy di chuyển Nếu quỹ đạo bị nghiêng bạn phải xem lại xem mặt trời có nằm quỹ đạo hay không

- Đặt đoạn code tương tự vào movie clip venus, earth, and mars movie clips, mà bạn thay đổi giá trị hai biến speed radius để làm cho hành tinh xa gần mặt trời Gợi ý cho bạn nhé, speed hành tinh mercury, venus, earth, and mars 4, 2, 1, 05, radius cho hành tinh 40, 90, 150, 210

- Chạy thử lại movie Bây bốn hành tinh chuyển động, moon chưa chuyển động chưa viết code điều khiển

- Bây viết code cho moon, moon có speed nhanh radius nhỏ hơn, moon quay quanh earth thay quay quanh sun

CODE

onClipEvent(load) { speed = 5; radius = 15; orbit = 0; }

onClipEvent(enterFrame) { orbit += speed;

- Bây chạy thử movie bạn lần Bây tất hành tinh quay rồi, vấn đề Earth khơng xác nằm quỹ đạo moon, thế? Bởi moon quay trước earth, moon nằm layer layer earth Chúng ta cần phải làm cho earth quay trước đến moon Để làm vậy, chọn movie clip moon, chọn Modify -> Arrange -> Send to Back

Luyện tập: Làm tuyết rơi

Đây ví dụ hữu ích cho việc tạo số ngẫu nhiên Bạn khơng cần phải dùng Action Script lúc bạn phải làm hàng trăm movie clip tuyết, chuyển động theo đường

Bằng cách sử dụng Action Script số ngẫu nhiên, bạn làm cho bơng tuyết rơi với tốc độ hướng rơi ngẫu nhiên Bắt tay vào làm nhé!

- Tạo movie Flash

- Tạo movie clip mới, đặt tên Snowflake đặt tên instance snowflake - Đặt đoạn code sau vào movie clip Snowflake Đoạn code khởi tạo giá trị ban đầu vị trí bơng tuyết, tốc độ rơi, tốc độ bị thổi ngang, độ xoay tuyết

CODE

onClipEvent(load) {

this._x = Math.random()*550; // to 550 this._y = Math.random()*400; // to 400 speed = Math.random()*3+3; // to drift = Math.random()*2-1; // -1 to rotate = Math.random()*6-3; // -3 to }

onClipEvent(enterFrame) { this._y += speed;

this._x += drift;

this._rotation += rotate;

if (this._y > 400) this._y = 0; // kiểm tra hai biên

if (this._x < 0) this._x = 550; if (this._x > 550) this._x = 0; }

Khi event enterFrame xảy tuyết điều khiển rơi xuống speed bị dạt theo hướng ngang drift Bông tuyết bị xoay theo giá trị rotate Tiếp theo kiểm tra xem tuyết rơi xuống đất cho rơi lại, bơng tuyết bị dạt qua bên phải đưa quay lại bên trái…

- Chạy thử movie bạn Các tuyết rơi tự Hãy click vào cuối movie xem sao, tuyết rơi lại

- Đựơc rồi, làm cho tuyết nhiều nhiều tí đoạn code sau, đặt vào timeline nhé!

CODE

// tạo 50 bơng tuyết for(var i=0;i<50;i++) {

snowflake.duplicateMovieClip("snowflake"+i,i); }

-Thang Tran

-.NET Developer Xtreme Biz

www.xtremebiz.biz

Giờ thứ 12: Đối tượng Mảng, Objects and Arrays

Cho đến bây giờ, biến chứa liệu riêng lẻ, biến chứa liệu Đối với chương trình nhỏ đơn giản khơng có để nói, đến bạn cần sử dụng thật nhiều biến Cũng có lúc bạn gặp khó khăn nhận bạn cần lưu rất nhiều liệu, biến bình thường muốn làm khơng phải dễ

ActionScript cung cấp cho ta hai thứ để lưu loại nhiều liệu Một Custom Object (Đối tượng), với Custom Object bạn nhóm liệu riêng lẻ lại với Cách khác Array (Mảng), phần ngôn ngữ lập trình cao cấp Trong thứ 12 này, học:

- Cách tạo Custom Object

- Cách sử dụng đối tượng ActionScript dựng sẵn - Tìm hiểu Array (Mảng)

- Tạo vật thể chạy theo trỏ chuột hình

Tạo Custom Object

Chắc hẳn bạn quen thuộc với tên x y để điều khiển vị trí movie clip Có bạn cảm thấy nhàm chán với chữ x, y hay muốn thay chữ khác positionX, positionY hay bạn thích khơng? Việc q đơn giản, cần tạo biến bạn gán giá trị cho biến bạn thơi Nhưng dù biến riêng lẻ thôi, với tên khác

Trong phần này, không muốn cho bạn làm điều mà nói cách tạo custom variable Object Ví dụ, bạn lưu biến x, y sau:

CODE

pos = {x:10, y:20};

Bằng cách sử dụng hai dấu ngoặc nhọn, bạn tạo object Bạn truy cập liệu cách:

CODE

trace(pos.x);

Bạn sử dụng biến khác

Hãy tưởng tượng đến cấu trúc phức tạp nhiều record sở liệu Ví dụ ta có custom object tên record, có property name, address, phone…

Bạn tạo object bước một, tạo thêm property Xem ví dụ nhé:

CODE

record.state = "Colorado"; trace(record.name);

Cũng với mục đích làm cho liệu dễ tổ chức hơn, custom object giống đối tượng dựng sẵn Hai ví dụ đối tượng dựng sẵn Color đối tượng Date

Đối tượng Color

Có thể dùng ActionScript để đổi màu movie clip cách sử dụng câu lệnh setRGB Đó cách dễ không thực instance movie clip Thay vào đó, chuyển đến đối tượng Color movie clip Thực cách hàm new Color(), sau sử dụng câu lệnh setRGB để thay đổi màu

Dưới ví dụ, sử dụng setRGB từ đối tượng Color movie clip để đặt lại màu cho movie clip sang màu 0xFF0000 (màu đỏ)

CODE

circleColor = new Color("circle"); circleColor.setRGB(0xFF0000);

Chúng ta lấy màu movie clip Sử dụng hàm getRGB() để lấy màu movie, nhớ sử dụng hàm toString(16) để chuyển thành giá trị hexa

CODE

circleColor = new Color("circle");

trace(circleColor.getRGB(0xFF0000).toString(16));

Đầu tiên, tạo đối tượng custom variable Rồi tạo property ra, ga, ba, aa, rb, gb, bb, ab Các ký tự r, g, b, a đại diện cho từ red, green, blue alpha Còn ký tự thứ

hai a b đại diện cho cột bên trái bên phải

Thay sử dụng setRGB sử dụng setTransform ví dụ đây:

CODE

circleColor = new Color("circle"); myObject = new Object();

myObject = {ra:100, rb:255, ga:0, gb:0, ba:0, bb: 0, aa: 100, ab: 0}; circleColor.setTransform(myObject);

Đối tượng Date

Một đối tượng dựng sẵn khác đối tượng Date Đối tượng xem biến bình thường, đại diện cho thời điểm thời gian

Đối tượng Date chia phần: năm (year), tháng (month), ngày (date), (hour), phút (minute), giây (second) phần trăm giây (milisecond) Bạn tạo đối tượng Date cách cung cấp cho thơng tin

CODE

myDate = new Date(2002,3,29,10,30,15,500);

CODE

Mon Apr 29 10:30:15 GMT

Rất dễ hiểu, khơng nào? Nhưng mà cịn vấn đề: tháng Apr truyền tham số vào cho tháng 3, phải March chứ!?

Đối tượng Date Flash hoạt động tương tự đối tượng Date ngơn ngữ lập trình khác Tháng quy định từ đến 11, đặc biệt, ngày quy định từ đến 31 Nhưng dù bạn phải làm quen

Bạn lấy thành phần từ đối tượng Date Ví dụ lấy năm

CODE

myDate.getYear()

Bạn lấy cách đơn giản tạo đối tượng Date rỗng Giờ đưa vào đối tượng Ví dụ:

CODE

myDate = new Date(); trace(myDate);

Chú ý: Flash lấy đồng hồ hệ thống máy bạn Vì đồng hồ máy tính bạn chạy sai lấy sai

Mảng (Array)

Mảng phần quan trọng lập trình Bạn gặp mảng hầu hết ngơn ngữ lập trình cơng cụ cần thiết cho ngơn ngữ lập trình phức tạp Mảng (Array) dãy liệu Trong liệu có kiểu liệu với nhau, là tên movie clip vị trí movie clip

Dưới ví dụ mảng Sử dụng dấu ngoặc vuông dấu phẩy để tạo mảng:

CODE

myArray = [36,23,63,71,25];

Mảng myArray có chứa phần tử số nguyên Muốn lấy giá trị phần tử mảng sử dụng sau:

CODE

trace(myArray[0]);

Phần tử mảng luôn đánh số Vì vậy, ví dụ có phần tử phần tử thứ chứa giá trị 36 phần tử thứ mang giá trị 25

Một cách khác để tạo mảng sử dụng new Array()

CODE

myArray = new Array();

Muốn thêm phần tử vào cuối mảng, sử dụng câu lệnh push Ví dụ tạo 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);

Để kiểm tra xem mảng có phần tử bạn sử dụng thuộc tính length

CODE

myArray = [36,23,63,71,25]; trace(myArray.length);

Còn muốn lấy phần tử cuối mảng bỏ phần tử khỏi mảng 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ụ trace phần tử mảng myArray Sau đó, lấy phần tử cuối mảng tức 25 đưa vào biến a, đồng thời bỏ phần tử 25 khỏi mảng Cuối trace phần tử mảng myArray, lúc phần tử

Sử dụng kết hợp push pop để tạo hệ thống vào sau trước (last in first out), thường gọi stack Hãy tưởng tượng đến chồng sách, để sách xuống, chồng lên sách thứ 2, thứ 3, thứ 4… Khi muốn lấy sách phải lấy trước, tức chồng lên cuối

Ngược lại với pop shift Nó bỏ phần tử mảng Đoạn code làm giống đoạn không bỏ phần tử 25 mà bỏ phần tử 36:

CODE

myArray = [36,23,63,71,25]; trace(myArray);

a = myArray.shift(); trace(a);

Ngược lại với shift unshift Nó chèn thêm phần tử vào đầu mảng

Nếu bạn muốn lấy phần mảng sử dụng hàm slice Đối số truyền vào vị trí vị trí cuối phần cần lấy mảng

CODE

myArray = [36,23,63,71,25] trace(myArray.slice(1,3));

Đoạn code trả 23, 63 khơng kể phần tử thứ Nếu khơng có đối số thứ lấy đến cuối mảng

Một hàm khác hàm splice Hàm thay số phần tử mảng phần tử khác Sử dụng hàm này, đối số vị trí phần tử mảng, đối số thứ hai số phần tử muốn xóa kể từ phần tử đối số Truyền đối số thứ số khơng muốn xóa phần tử Những phần tử danh sách phần tử muốn chèn vào mảng Nói khó hiểu nhỉ, xét ví dụ Ví dụ xóa phần tử 23 63 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 mảng

Chúng ta xếp mảng câu lệnh sort Ví dụ cho ta mảng xếp theo thứ tự số:

CODE

myArray = [36,23,63,71,25]; myArray.sort();

trace(myArray);

CODE

myArray = ["Gary","Will","Jay","Brian"]; myArray.sort();

trace(myArray);

Câu lệnh reverse để đảo vị trí xếp mảng Ví dụ:

CODE

myArray = ["Gary","Will","Jay","Brian"]; myArray.reverse();

trace(myArray);

Muốn xếp mảng theo vị trí giảm dần sử dụng sort sử dụng reverse

Sử dụng câu lệnh concat để nối hai mảng lại với Nó khơng làm thay đổi mảng cũ, mà tạo mảng

CODE

myArray = [36,23,63,71,25] otherArray = [58,97,16];

newArray = myArray.concat(otherArray); trace(newArray);

Chuyển đổi chuỗi mảng

Chúng ta sử dụng câu lệnh join để đổi từ mảng thành chuỗi Câu lệnh cần đối số ký tự ngăn cách phần tử mảng chuỗi Nếu bạn khơng truyền tham số vào ký tự mặc định dấu phẩy Ví dụ trả 36:23:63:71:25

CODE

Câu lệnh join sử dụng khơng cần thiết lắm, hàm split lại hữu dụng Nó chuyển đổi từ chuỗi sang mảng Ví dụ chuyển chuỗi

“36,23,63,71,25” thành mảng ví dụ đây:

CODE

myString = "36,23,63,71,25"; myArray = myString.split(","); trace(myArray);

Hãy nghĩ đến chuyện có câu nói lưu chuỗi muốn chuyển sang mảng, phần tử mảng chứa chữ Xem ví dụ nhé:

CODE

myString = "This is a test"; myArray = myString.split(" "); trace(myArray);

Làm chữ chuyển động

Trong ví dụ này, lấy chữ câu dài hiển thị vào textfield - Tạo movie Flash

- Tạo text field dynamic, cho font chữ to, khoảng 64 Cho text field nằm hình canh cho text field Đặt variable = text

- Vẽ shape chọn Insert -> Convert to Movie Clip Đặt tên cho instance Actions kéo vùng hiển thị

- Chèn đoạn code sau vào movie clip Đầu tiên sử dụng hàm split để tách chữ câu vào mảng Sau khai báo thêm biến Biến wordNum lưu số số thứ tự chữ hiển thị Biến frameDelay lưu số frame để chữ Biến frameCount đếm số frame mà chữ qua

CODE

onClipEvent(load) { // get the words

// 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, xong rồi, chạy thử xem

Giờ thứ 13: Sử dụng Rollovers, Rollovers

Tạo hình dáng trỏ theo ý thích

Việc thay trỏ mặc định trỏ theo ý thích đơn giản, cần sử dụng hàm Mouse.hide() đặt movie clip vào vị trí trỏ xong Con trỏ hình dáng được, hình mũi tên, hình bàn tay hay movie clip

Nếu bạn muốn sử dụng lại trỏ mặc định cần gọi Mouse.show()

Một điều cần lưu ý phải movie clip làm trỏ phải tất movie clip khác Chúng ta chọn Modify -> Arrage ->Bring To Front để đưa movie clip lên đầu movie clip layer mà thơi Cho dù bạn có để movie clip lên layer bị che khuất movie clip load vào duplicateMovie attachMovie Vì vậy, sử dụng

swapDepths() để đưa movie clip lên

Câu lệnh swapDepths() đưa movieclip lên level mới, level số nguyên 0, 1, 2… 9999 Vì sử dụng lệnh

Cursor.swapDepths(9999);

để đưa movieclip lên Luyện tập: Tạo trỏ tĩnh

- Tạo movie

- Tạo movie clip để thay cho trỏ

- Quay trở lại movie đầu tiên, thay trỏ cách

CODE

// bring this movie clip to the front this.swapDepths(99999);

}

- Tiếp theo gắn vị trí movie clip vào vị trí trỏ

CODE

onClipEvent(enterFrame) { // follow the mouse

this._x = _root._xmouse; this._y = _root._ymouse; }

- Sau cùng, phục hồi lại trỏ cũ kết thúc movie

CODE

onClipEvent(unload) {

// show the real cursor again Mouse.show();

}

- Cuối việc chạy thử movie Luyện tập: Tạo trỏ động

- Chúng ta sử dụng lại movie trước

- Tạo button root Hãy thử làm cho button có thay đổi over down để thấy khác biệt

- Đặt tên hai frame normal over button

- Đặt câu lệnh stop(); vào frame movie clip - Kéo thả button vào root

- Đặt tên movie clip làm trỏ cursor - Thêm đoạn code sau vào button

CODE

on (rollOver) {

cursor.gotoAndStop("over button"); }

on (rollOut) {

cursor.gotoAndStop("normal"); }

Rollovers

Một kỹ thuật thông dụng để hiển thị thông tin dài sử dụng Rollovers để đưa thơng tin thay sử dụng button để người dùng click vào sang trang khác

Ý tưởng kỹ thuật người dùng đưa chuột lướt vùng Mỗi vùng hiển thị cho người dùng xem thơng tin hình

Trong ví dụ sau, có vùng thế, vùng tên hành tinh (ở bên trái) Khi đưa trỏ chuột qua vùng bên phải xuất thơng tin hành tinh Khi đưa trỏ chuột ngồi thơng tin biến

Chúng ta sử dụng AS để làm Rollovers nhiều cách Rollovers sử dụng button

Chúng ta sử dụng hai event button on(rollOver) on(rollOut) để viết code xử lý việc hiển thị thông tin Hãy xem ví dụ đây:

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), sử dụng hàm khác Hàm hitTest cho biết trỏ chuột có movie clip hay khơng Và làm sau

CODE

onClipEvent (enterFrame) {

if (this.hitTest(_root._xmouse,_root._ymouse, true)) { _root.information.gotoAndStop("information 1"); } else {

_root.information.gotoAndStop("none"); }

}

nó mang giá trị true false Đối với frame, sử dụng hàm hitTest để kiểm tra vị trí trỏ chuột Nếu vị trí trỏ đối lập với over xảy thay đổi Chúng ta xem đoạn code sau:

CODE

onClipEvent (load) { over = false; }

onClipEvent (enterFrame) {

// kiểm tra xem liệu trỏ chuột có 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ó nhiều cách để làm rollovers Ở đây, bàn cách khác

Thay sử dụng movie clip cho thông tin cần hiển thị, sử dụng timeline để lưu thơng tin Frame frame none, frame chứa thông tin

Ví dụ sử dụng button cho hotspot, lưu ý button xuất tất frame, thông tin cần hiển thị xuất vài frame Bây công việc viết code gần giống làm rollovers button Nhưng 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 việc sử dụng cách thay đổi thơng tin frame dễ dàng, mổ xẻ vào movie clip Nếu bạn quen sử dụng nhiều frame cách tốt cho bạn

Lưu ý ba cách cho kết nhau, khơng có khác biệt Ở đây, chúng tơi muốn trình bày cho bạn thấy cách làm khác mà thôi!

Nào, bạn thử sử dụng hiểu biết cách thay đổi trỏ rollovers để làm chương trình xem nào! Chương trình hiển thị thơng tin hành tinh

Chúng ta có hotspot, hotspot hành tinh, hotspot hiển thị hộp thông tin đưa trỏ chuột ngang qua Mỗi hotspot button, người dùng click vào để di chuyển đến frame khác để xem thơng tin hành tinh

Đặt 10 button bên trái, cho hành tinh Một movie clip summary xuất để hiển thị thông tin vắn tắt hành tinh đưa trỏ chuột ngang qua Movie clip chứa 10 frame: frame trống frame chứa thông tin hành tinh

Chúng ta phải ý việc sử dụng layer quan trọng, ví dụ sử dụng layer movie clip summary đặt layer

- Đặt lệnh stop(); vào frame đầu tiên, đặt frame movie clip summary

- Nào, viết code nhé!

CODE

on (rollOver) {

summary.gotoAndStop("mercury"); }

on (rollOut) {

summary.gotoAndStop("none"); }

- Những button đưa người dùng đến frame khác để xem thông tin hành tinh, lại viết code cho button

CODE

on (release) {

gotoAndStop("mercury"); }

Lưu ý có hai frame tên mercury, frame timeline movie clip summary

- Tạo movie clip để thay trỏ chuột, viết code sau

onClipEvent(load) { Mouse.hide();

this.swapDepths(99999); }

onClipEvent(enterFrame) { this._x = _root._xmouse; this._y = _root._ymouse; }

onClipEvent(unload) { Mouse.show(); }

- Tiếp theo làm cho trỏ chuột thay đổi đưa trỏ ngang qua button Hãy thêm đoạn code sau vào phần code button

CODE

on (rollOver) {

summary.gotoAndStop("mercury"); cursor.gotoAndStop("over button"); }

on (rollOut) {

summary.gotoAndStop("none"); cursor.gotoAndStop("normal"); }

on (release) {

}

Bây movie bạn xong Bạn chạy thử xem

Giờ thứ 14: Thành phần Scroll, Scrolling

Mặc dù scrollbar quen thuộc ứng dụng Mac, Windows, trình duyệt web… hiểu hoạt động Lý đơn giản là thành phần trực quan, dễ xây dựng mà không cần phải viết code nhiều Mọi người sử dụng khơng suy nghĩ nhiều

Kết nhà phát triển sử dụng Flash để tạo scrollbar riêng họ gặp khó khăn Vì vậy, tìm hiểu thành phần

scrollbar tìm hiểu scrollbar

Hình cho thấy thành phần scrollbar là: mũi tên lên, mũi tên xuống, trượt khay trượt

Thanh trượt (Slider)

Như nói, trượt kẹp chặt trượt khay trượt Khi kéo trượt trượt khay trượt khối văn cập nhật vị trí thích hợp

Mới đây, scrollbar có thêm đặc tính Thay kích thước trượt bị gắn sẵn với giá trị kích thước thay đổi tùy vào độ dài văn Vì thế, vị trí trượt ứng với dòng văn vị trí cuối ứng với dịng cuối Ví dụ textbox có scrollbar hiển thị 10 dịng văn có 100 dịng chiều cao trượt 10% so với khay trượt Nhưng không bàn vấn đề

Khay trượt (Bar)

Khay trượt có chức chứa trượt cho trượt trượt Chiều dài khay trượt phụ thuộc vào độ dài văn Khay trượt cịn có chức ta click vào khay trượt khối văn di chuyển trang Khi click vào phần trượt khối văn di chuyển đến trang trước, click vào phần trượt khối văn di chuyển đến trang sau

Các mũi tên

Mũi tên lên xuống hai thành phần đơn giản scrollbar, có chức cho người dùng di chuyển khối văn dịng

Những thuộc tính chung

Scrollbar có số thuộc tính chung mà cần phải xem xét Đầu tiên, thành phần scrollbar hoạt động click vào, tiếp tục hoạt động thả nút chuột Lấy ví dụ: người dùng click vào mũi tên xuống để di chuyển khối văn khối văn di chuyển dịng thả nút chuột

Một vấn đề vị trí trượt phải cập nhật liên tục thành phần khác kích hoạt

Scroll văn bản

đây, đặt tên cho text field scrollText

Sau đó, viết code cho lấy liệu vào Nhưng trước hết cần đặt cho text field scroll

Khi chọn vào text field bạn thay đổi kích thước text field cách kéo hình vng góc bên phải text field Cịn khơng đặt kích thước text field vừa đủ để hiểu thị nội dung bên

Thay điều chỉnh hình vng màu trắng lúc đó, chiều cao text field tự điều chỉnh theo kích thước nội dung bên trong, có nghĩa văn bên text field có nhiều dịng làm cho text field vài dịng để scroll Muốn xuất scroll giữ phím Shift click vào hình vng trắng để trở thành hình vng đen, lúc điều chỉnh kích thước text field theo ý muốn Như kích hoạt scroll cho text field Cịn số thuộc tính khác lien quan đến scroll

Thuộc tính scroll cho biết dòng văn xuất VD scroll = dịng hiển thị đầu tiên, scroll = dịng thứ hai hiển thị lúc dịng khơng thấy

Thuộc tính maxscroll cho biết giá trị lớn scroll

Thuộc tính scroll bottomscroll cho biết xác dịng văn đầu dòng cuối

Để scroll văn lên hay xuống bạn cần phải tăng giảm giá trị scroll Thế xong!

Luyện tập: Thiết kế chương trình scroll văn đơn giản

- Tìm đoạn văn để dán vào text field (tìm đoạn dài dài tí ) - Bây tạo movie Flash

- Sử dụng công cụ Text Tool để tạo text field

- Mở phần Properties đặt tên cho text field scrollText Đặt thuộc tính Mutiline Show Border Around Text

- Dán đoạn văn mà bạn chuẩn bị vào text field

- Tạo hai button giống hai hình vẽ Một button để điều khiển lên, để xuống

- Nhập đoạn code sau cho button lên:

CODE

on (press) {

scrollText.scroll ; }

- Và nhập đoạn code cho button xuống:

CODE

scrollText.scroll++; }

- Ok, bạn chạy thử movie xem Bạn thử click vào button để scroll văn

Giờ thứ 15: Các thành phần nhập liệu

Các bạn tạo nhiều thành phần nhập liệu Action Script, hẳn bạn gặp thành phần thể HTML Trong chương này, bạn học cách làm checkbox, radiobutton Action Script Bạn học cách để chuyển từ thành phần sang thành phần khác form cách nhấn nút TAB, để hạn chế nội dung người dùng nhập vào

Các nội dung 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 sang thành phần khác - Hạn chế nội dung nhập liệu

Tạo Checkbox

Trong Hour 8, bạn biết cách tạo selectable movie clip CheckBox Selectable movie clip giống với checkbox chuẩn sử dụng hệ điều hành Mac Windows

Để tạo Checkbox bạn cần button movie clip Button thể trạng thái Off Checkbox, có nghĩa checkbox chưa chọn Một button thể trạng thái On, có nghĩa checkbox chọn

Check box chọn, thứ chưa chọn, thứ người dùng chuẩn bị chọn

Các bạn có biết cách thành phần checkbox hoạt động chung không? Rất đơn giản, button Off đưa vào movie clip riêng đặt frame đầu tiên, bấm F6 để tạo frame đặt button On vào frame thứ Đặt tên frame Off, frame On Tiếp theo, cho câu lệnh stop(); vào frame để dùng movie clip lại Trong button có đoạn code gọi hàm time line movie clip có chứa button để xử lý nút nhấn

CODE

on (release) { pressButton(); }

Ngồi ra, frame Off (frame 1) cịn chứa đoạn code 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 checkbox Khi click button hàm pressButton gọi Trong đó, đổi lại trạng thái state, có nghĩa lúc đầu false (chưa chọn), sau click thành true (đã chọn) Tiếp theo, hàm pressButton kiểm tra giá trị biến state để đưa người dùng đến frame thích hợp Nếu state = true nhảy đến frame On, cịn state = false nhảy đến frame Off

Tạo RadioButton

Việc tạo Radiobutton phức tạp chút so với checkbox Các Radiobutton gom vào nhóm có quan hệ với

Checkbox sử dụng trường hợp chọn lựa khơng có tính loại trừ, có nghĩa người dùng chọn nhiều checkbox Ngược lại, Radiobutton sử dụng trường hợp có tính loại trừ, có nghĩa nhóm Radiobutton có checkbox chọn thời điểm, khơng có chuyện Radiobutton chọn Nếu bạn chọn RadioButton, bạn chọn qua Radiobutton khác chọn lựa cũ tự động đi, chuyển qua Radiobutton

Hình nhóm Radiobutton

RadioButton chọn, người dùng chuẩn bị chọn RadioButton thứ 2, người dùng chọn RadioButton khác RadioButton tự động chọn lựa

Một RadioButton đơn giản tương tự Checkbox, movie clip có frame để chứa button biểu trạng thái RadioButton Frame chứa vòng tròn rỗng, frame thứ vòng tròn với dấu chấm tròn

Điểm khác Checkbox RadioButton code chúng Code RadioButton phức tạp code CheckBox

CODE

stop();

// kiểm tra có phải RadioButton nhóm hay không if (_parent.radioButtons == undefined) {

// tạo array RadioButton

_parent.radioButtons = new Array();

// RadioButton mặc định chọn gotoAndStop("on");

state = true; } else {

// RadioButton khác không chọn state = false;

}

// chèn array RadioButton level ngồi _parent.radioButtons.push(this);

Khi người dùng click vào button, hàm turnOn gọi Điều hàm turnOn duyệt qua tất RadioButton (các movie clip), gọi hàm turnOff cho RadioButton Nói đơn giản có nghĩa click vào RadioButton trước tiên tất RadioButton nhóm quay trạng thái Off, sau chuyển trạng thái RadioButton chọn thành On

CODE

function turnOn() {

// chuyển tất thành OFF

for(var i=0;i<_parent.radioButtons.length;i++) { _parent.radioButtons[i].turnOff();

// chuyển RadioButtond chọn thành ON gotoAndStop("on");

state = true; }

Tiếp theo đoạn code cho hàm turnOff()

CODE

function turnOff() { gotoAndStop("off"); state = false;

}

Tiếp theo xây dựng hàm getValue()để kiểm tra xem RadioButton chọn Hàm movie khác gọi Hàm đơn giản, duyệt qua tất RadioButton array RadioButton xem chọn

CODE

function getValue() {

// duyệt tất RadioButton

for(var i=0;i<_parent.radioButtons.length;i++) { // tìm RadioButton chọn

if (_parent.radioButtons[i].state) {

return(_parent.radioButtons[i]._name); }

}

// khơng có chọn trả chuỗi rỗng “” return "";

Luyện tập: Chương trình trắc nghiệm

Bây áp dụng thứ học CheckBox RadioButton để làm chương trình trắc nghiệm đơn giản Mỗi frame chứa câu hỏi riêng

Ví dụ frame chứa câu hỏi hình đây, có câu trả lời

Bắt đầu

- Tạo movie Flash

- Tạo Checkbox học

- Rồi sau kéo tạo movie clip checkbox vào, đặt tên là: Flash, Director, Fireworks, Freehand, and Dreamweaver

- Tạo câu trả lời static text kế bên Checkbox hình - Tạo button Next để chuyển đến câu hỏi

- Chèn đoạn code sau vào frame

CODE

Đoạn code có nhiệm vụ tạo mảng results để lưu kết câu trả lời, đồng thời dùng movie

- Khi nhấn nút Next chuyển sang câu hỏi lưu câu trả lời 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();

}

- Tạo RadioButton phần trước đưa vào movie tên: Windows, Macintosh, and Linux

- Chèn nội dung câu trả lời vào hình

- Copy nút Next vào frame thay đoạn code đoạn code khác

CODE

on (release) {

results.push(Windows.getValue()); nextFrame();

}

Đoạn code sử dụng hàm getValue để kiểm tra xem RadioButton chọn - Ok, đến bạn tự làm tiếp câu hỏi nhé, tương tự Nhưng mà nhớ tên thành phần phải khác Các bạn sử dụng hàm trace để đưa kết câu trả lời cửa sổ Output để xem

- Trong Hour 18, bạn học cách đưa liệu lên server, bạn cải tiến chương trình để đưa câu trả lời lên server để kiểm tra

Sử dụng Tab để chuyển từ thành phần sang thành phần khác

Những người sử dụng Flash than phiền việc sử dụng tab để chuyển đổi thành phần Công việc chuyển đổi cách nhấn phím Tab gọi Tab Order, thường thấy việc hầu hết chương trình chun nghiệp, ví dụ trình duyệt web, điều mang lại nhiều thuận tiện cho người sử dụng, chuyển đến thành phần logic chương trình

May mắn đặt lại Tab order cho thành phần cách đặt lại thuộc tính tabIndex Nếu có text field hình trên: text1, text2, text3, text4 sử dụng đoạn code sau:

CODE

text1.tabIndex = 1; text2.tabIndex = 2; text3.tabIndex = 3; text4.tabIndex = 4;

Điều ý sử dụng tabIndex phải ý đến label textfield tránh sử dụng lại số nhiều lần, điều làm cho Flash bị lẫn lộn

Một điều cho dù mặc định Flash bạn sử dụng tabIndex Flash khơng tự động đặt focus cho thành phần đầu tiên, thế, bạn phải tự làm điều Để làm vậy, bạn sử dụng lệnh đố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 sử dụng lệnh Selection.setFocus lúc để chuyển đến thành phần mong muốn Việc quan trọng, bạn đặt trỏ vào textfield thay bắt người dùng phải click vào textfield trước gõ

Bạn sử dụng Selection.getFocus để kiểm tra xem thành phần focus Đoạn code ví dụ Khi người dùng chuyển focus sang thành phần khác bạn 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 liệu vào textfield, có lúc bạn muốn hạn chế việc nhập liệu Ví dụ ô năm sinh, bạn muốn người dùng nhập số vào, khơng cần phải nhập chữ Bạn hạn chế ký tự phép nhập vào textfield cách đặt giá trị thuộc tính restrict textfield Nếu khơng đặt giá trị textfield nhận tất ký tự Nhưng thuộc tính restrict textfield chuỗi ký tự có ký tự chuỗi chấp nhận Dưới ví dụ hạn chế nhập liệu, người dùng nhập số mà thơi

CODE

text1.restrict = "01234567890";

Cịn ví dụ nhập liệu email

CODE

text2.restrict = "abcdefghijklmnopqrstuvwxyz0123456789@.-_";

Một điều ý ký tự in hoa in thường đựơc chấp nhận text2

Bạn hạn chế số ký tự phép nhập vào textfield Cái bạn khơng cần phải dùng AS, đặt thuộc tính trực tiếp khung Properties

CODE

text1.restrict = "01234567890"; text1.maxChars = 4;

Luyện tập: Kiểm tra liệu nhập

Bây làm chương trình gồm form nhập liệu, yêu cầu nhập vào tên, năm sinh, email Và kiểm tra thông tin nhập vào

khoảng 100 năm trước đến Còn email phải có ký tự có dạng a@b.c, a, b tuỳ ý c phải có ký tự bắt buộc phải có ký hiệu @ Đó yêu cầu Nào, bắt đầu nhé!

- Tạo movie

- Tạo textfield cho nội dung nêu trên, đặt tên userName, userYear, userEmail Đặt variable tương ứng userNameText, userYearText, and userEmailText Bạn cần phải tạo dynamic textfield liên kết với variable feedback Tạo nút Submit Movie bạn giống hình

- Đặt đoạn code sau vào frame để dừng lại thiết lập thuộc tính để hạn chế nhập liệu

CODE

stop();

// hạn chế chiều dài tối đa tên 64 ký tự userName.maxChars = 64;

// năm sinh phải có số

userYear.restrict = "01234567890"; userYear.maxChars = 4;

// hạn chế liệu email

- Tiếp theo đặt trỏ vào text field userName lúc movie bắt đầu

CODE

Selection.setFocus(userName);

- Để kiểm tra người dùng nhập liệu xong, thêm listener để bắt event đoạn code

CODE

Selection.addListener(this);

Nó báo cho biết xảy event onSetFocus

- Tiếp theo đặt giá trị biến ignoreSetFocus False, sử dụng đến biến sau

CODE

ignoreSetFocus = false;

- Tiếp theo 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();

ret = checkUserEmail(); }

if (!ret) {

// ignore this focus change and go back ignoreSetFocus = true;

Selection.setFocus(oldFocus); }

}

Hàm nhận hai đối số Đối số thứ textfield trứơc chuyển focus đối số thứ hai textfield sau chuyển focus Hàm checkUserName kiểm tra tên người dùng

CODE

// tên phải có ký tự function checkUserName() { if (userNameText.length < 3) {

feedback = "Bạn phải nhập ký tự" return(false);

}

// quay trở lại feedback feedback = "";

return(true); }

Hàm checkUserYear kiểm tra năm nhập vào

CODE

// năm phải từ khoảng 100 năm đến function checkUserYear() {

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ăm sinh sớm (không thật)

} else if (parseInt(userYearText) < thisYear-100) {

feedback = "Bạn phải nhập năm sinh, từ 100 năm trước đến nay"; return(false);

// năm sinh tương lai :)

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

}

// quay trở lại feedback = ""; return(true); }

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

CODE

// kiểm tra email

function checkUserEmail() { if (userEmailText.length < 7) { feedback = "Email ngắn"; return(false);

feedback = "Thiếu ký tự @"; return(false);

} else if (userEmailText.indexOf(".") == -1) { feedback = "Thiếu dấu chấm (.)";

return(false);

} else if (userEmailText.indexOf("@") > userEmailText.indexOf(".")) { feedback = "@ dấu chấm không đúng";

return(false);

} else if (userEmailText.lastIndexOf(".") > userEmailText.length-3) { feedback = "Domain không hợp lệ"

return(false); }

// quay trở lại feedback = ""; return(true); }

- Thế kiểm tra liệu xong Bây sử dụng hàm để kiểm tra liệu nhập vào xuất kết Hàm sau kiểm tra ô nhập liệu, ô sai trả kết false, cịn hết true

CODE

function checkAll() { if (!checkUserName()) { return(false);

} else if (!checkUserYear()) { return(false);

} else if (!checkUserEmail()) { return(false);

}

}

- Bây viết code cho nút Submit Khi nhấn nút Submit gọi hàm CheckAll đưa sang frame với lời cám ơn

CODE

on (release) { if (checkAll()) { nextFrame(); }

}

Giờ thứ 16: Menu button động

Menu hệ thống quen thuộc với chương trình máy tính Hệ điều hành Flash có hệ thống menu đầu Menu cách tốt để đưa nhiều lựa chọn cho người dùng mà lại tốn diện tích hình

Trong thứ 16 này, học về: - Cách làm menu đơn giản

- Sử dụng menu movie

- Tạo menu xổ xuống click vào nút - Cách tạo button động

- Sử dụng button động movie

Cách làm menu đơn giản

Những bạn làm quen với AS thường muốn biết cách tạo menu Thật để tạo menu đơn giản, biết qua rồi, bạn khơng để ý

Khi đưa trỏ ngang qua nút About Us loạt button khác xuất hình bên phải Như vậy, cần có frame movie clip làm menu Frame thứ chứa button About Us, frame thứ hai chứa button About Us button lại Ở frame thứ nhất, người dùng đưa trỏ ngang qua button About Us nhảy sang frame thứ dừng lại frame người dùng đưa trỏ chuột ngoài, trở frame Nếu để ý, bạn thấy cách giống học Giờ thứ 13 RollOver Chúng ta dùng hàm hitTest để kiểm tra xem vị trí trỏ chuột có nằm button không Dưới đoạn code xử lý việc Chúng ta xem nhé!

CODE

onClipEvent(load) { previouslyOver = false; }

onClipEvent(enterFrame) { // kiểm tra vị trí trỏ

currentlyOver = this.hitTest(_root._xmouse,_root._ymouse,true); // kiểm tra thay đổi

if (!previouslyOver and currentlyOver) { previouslyOver = true;

this.gotoAndStop("on");

} else if (previouslyOver and !currentlyOver) { previouslyOver = false;

this.gotoAndStop("off"); }

Hãy ý, bạn sử dụng AS để quản lý thành phần khác đựơc đặt chung frame, bạn phải đưa menu lên cách sử dụng hàm swapDepths Luyện tập: Làm menu

Nào, bắt tay vào làm thử menu đơn giản nhé! Menu có phần: About Us, Products Store, menu lại chứa nhiều menu

- Việc tạo movie Flash

- Tạo button đơn giản thôi, button khơng nên có chữ, nhớ chừa chỗ trống để đưa chữ vào sau

- Tạo movie clip mới, đặt tên About Us Menu Tạo hai layer, Label Buttons

- Trong layer Buttons, kéo button vừa tạo vào Đặt dòng chữ About Us lên

- Layer Label trải frame Nhưng frame layer Buttons khác nhau, frame đầu đặt tên off, frame đặt tên on

Quay trở lại level root, kéo movie clip About Us Menu từ Library vào, đặt tên aboutUsMenu, 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 chạy thử movie bạn xem Đưa trỏ vào button About Us xem điều xảy ra!

- Phần việc cịn lại bạn Làm tương tự cho menu lại! Tạo menu xổ xuống click vào nút

Có nhiều cách để làm menu xổ xuống, có nhiều cách menu hoạt động Chúng ta biết cách ví dụ phần trước, người dùng đưa trỏ ngang qua button loạt button khác xuất dọc bên tạo thành menu, đơn giản frame

Menu xổ xuống hoạt động theo cách khác: người dùng click vào button, loạt menu xuất người dùng phải chuột kéo trỏ để chọn menu con, muốn chọn menu thả chuột menu Chúng ta nghiên cứu mổ xẻ menu xổ xuống nhé!

Chúng ta tạo frame trước, frame đầu chứa button tiêu đề menu, frame hai chứa button xếp dọc xuống thành hệ thống menu tiêu đề menu click Tuy nhiên cách viết code khác đi!

Đây 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 gọi hàm expandMenu(), người dùng thả chuột gọi hàm collapseMenu()

CODE

on (dragOver) { rollOverMenu(); }

on (dragOut) { rollOutMenu(); }

Button tiêu đề gọi hàm expandMenu(), collapseMenu(), rollOverMenu(), rollOutMenu(), viết hàm này, đặt chúng frame nhé! Hàm expandMenu() đặt giá trị cho biến expanded true nhảy sang frame thứ hai

CODE

function expandMenu() { expanded = true; gotoAndStop("on"); }

Hàm collapseMenu() làm ngược lại

CODE

function collapseMenu() { expanded = false; gotoAndStop("off"); }

CODE

function rollOverMenu() { if (expanded) {

gotoAndStop("on"); }

}

function rollOutMenu() { if (expanded) {

gotoAndStop("off"); }

}

Chúng ta viết code tiếp cho menu xổ xuống Chúng button, viết event on(release) cho chúng để bắt kiện người người thả chuột button đó, có nghĩa người dùng chọn menu Khi đó, gọi hàm collapseMenu() thực cơng việc mình, đơn giản gọi hàm trace Chúng ta viết event on(dragOver) on(dragOut) cho button để giữ menu lại người dùng giữ chuột kéo qua button thu menu lại người dùng thả chuột kéo

CODE

on (release) { collapseMenu();

trace("History Button Pressed"); }

on (dragOut) { rollOutMenu(); }

Cịn có nhiều cách để làm menu, phụ thuộc vào mục đích sử dụng bạn khả sử dụng AS người

Button động

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

Điều cần phải làm tạo button mẫu Tiếp theo, đặt button vào movie clip, movie clip có hai thành phần, button hai dynamic text button, dynamic text 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 chọn Linkage Nhớ chọn mục Export for Actionscript đặt tên cho buttonMovieClip Đựơc rồi, có button mẫu, sử dụng AS để sử dụng button Việc đơn giản, sử dụng lệnh attachMovie để tạo instance movie clip đặt lại giá trị cho dynamic text movie clip, đặt lại vị trí 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, thử movie bạn xem

mỗi button gọi hàm khác nhau, điều có nghĩa chúng thực việc khác

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

- Tạo button mẫu 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 có nghĩa button gọi hàm buttonRollOverAction đưa chuột qua, gọi hàm buttonClickAction click chuột Hai đối số giúp báo button click - Dưới hàm createButton để tạo button động, lần tạo loạt button 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++;

}

// Tạo 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 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 gọi hàm createButtonList để tạo button

CODE

buttonLevels = 1;

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

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 đối số khác mảng định nghĩa

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:"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 làm biến button tạo, có nghĩa tất menu mảng vừa tạo biến xuất mảng thời điểm mà Hãy tưởng tượng menu Flash, đưa trỏ đến menu File menu File xổ xuống, đưa sang Edit menu File thu lại menu Edit xổ xuống…

Trước đó, phải có đoạn code sau để menu đến mảng menu

CODE

allButtonLists = new Array();

allButtonLists = [aboutUsButtonList,productsButtonList,storeButtonList];

Tiếp theo viết hàm deleteButtonList deleteAllButtonLists

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

}

Giờ thứ 17: Liên kết liên lạc với trình duyệt, Browser Navigation and Communication

Khi thiết kế Flash, bạn có sử lưa chọn, nhúng vào trang web làm application tự chạy riêng Nếu bạn nhúng vào trang web movie bạn liên lạc với trình duyệt để báo cho trình duyệt cần phải làm

Trong thứ 17, bạn học được: - Cách load trang web

- Tìm hiểu cách liên lạc với JavaScript - Mở cửa sổ trình duyệt 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 application tự chạy

Load trang web

Ngày Flash sử dụng nhiều website Nó sử dụng để làm trang chủ để tạo liên kết (navigation bar)… Cũng có lúc, cần load trang web từ movie Flash

Cách đơn giản

Bạn load trang web cách sử dụng câu lệnh getURL Nó hoạt động giống thẻ <a href…> HTML Dưới ví dụ nhấn button load trang web thay cho trang tại:

CODE

on (release) {

Ở ví dụ trang anotherpage.html load Bạn thay URL hoàn chỉnh (như http://www.yahoo.com) để liên kết đến website khác đường dẫn tương đối để liên kết đến trang website

Không cần sử dụng AS, tạo liên kết cách đặt thuộc tính hypertext links TextField, thật giống hệt thẻ <a href…> HTML Cách nâng cao

Cách bạn sử dụng hàm getURL với cách khác để xác định nơi load trang web lên frame window Như biết frame window có tên, truyền tên vào đối số thứ hàm getURL

Trong ví dụ đây, trang web bạn có nhiều frame, có frame tên Main, trang web load frame Main

CODE

on (release) {

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

Bạn sử dụng đoạn code để load trang web vào window tên Main Ngồi ra, bạn cịn sử dụng đối số đặc biệt để truyền vào thay cho tên: - _blank : mở window load trang web vào window

- _parent : load trang web vào frame cha frame

- _top : load trang web vào window cũ, không kể frame mà thay tất frame window

Nếu bạn muốn thay đổi thiết lập window kích thước… bạn phải sử dụng JavaScript Chúng ta nói vấn đề sau

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

Bây bạn đủ khả làm liên kết Flash sử dụng AS, bạn cần phải có thêm kiến thức khác HTML

nội dung

Movie làm Flash chứa số button để liên kết sang trang web khác

- Đầu tiên tạo trang HTML chứa frame, trang tên navigation.html

CODE

<HTML><HEAD>

<TITLE>Flash Navigation Example</TITLE> </HEAD>

<BODY BGCOLOR="#FFFFFF"> <FRAMESET cols="120,*">

<FRAME name="navigation" src="navbar.html" scrolling="no"> <FRAME name="content" src="content1.html" scrolling="auto"> </FRAMESET>

</BODY> </HTML>

- Trang HTML tạo frame, frame chứa trang HTML khác Bây tạo trang HTML Chúng ta chưa cần phải làm trang HTML cho frame bên trái, tạo publish movie thành HTML Còn trang HTML frame bên phải có nhiều thay đổi

Bây tạo trang HTML đơn giản tên content1.html, content2.html, content3.html chứa dòng chữ đơn giản

CODE

<HTML><HEAD>

<TITLE>Content 1</TITLE> </HEAD>

<BODY BGCOLOR="#FFFFFF"> Content

- Bây công việc làm với Flash Tạo movie rộng 100px, cao 400px Tạo button viết code cho nút để liên kết đến trang content1.html, content2.html, content3.html tương tự sau:

CODE

on (release) {

getURL("content1.html","content"); }

- Lưu movie lại với tên navbar.fla - Publish movie thành file html

- Tiếp theo đưa tất file vào thư mục Các file là: navigation.html, content1.html, content2.html, content3.html, navbar.html, and navbar.swf

- Hãy mở trang navigation.html để thử xem

ActionScript JavaScript

Nếu bạn quen sử dụng JavaScript bạn vui biết JavaScript liên lạc với ActionScript Tuy nhiên, cách không hoạt động tốt tất loại trình duyệt

Việc liên lạc xây dựng công nghệ Một công nghệ LiveConnect xây dựng phiên trình duyệt Netscape trước phiên 6.0 Công nghệ thứ hai ActiveX dùng để liên lạc Flash Internet Explorer

Nhưng bạn thiết kế cho người dùng sử dụng trình duyệt Windows cách tốt

Gởi thông điệp đến JavaScript

Gởi thông điệp từ ActionScript đến JavaScript cần viết code ActionScript thay đổi nội dung trang HTML bạn

Để hiểu rõ cách làm việc mổ xẻ file html mà Flash tạo

Đầu tiên, ý đến thẻ OBJECT/EMBED, có số phần để chấp nhận liên lạc Tham số ID thẻ OBJECT giống với tham số NAME thẻ EMBED Hai tham số đặt tên cho movie trang web để JavaScript gọi Ngồi cịn có tham số khác thẻ EMBED, tham số swLiveConnect phép phiên bạn Netscape trước phiên 6.0 liên lạc với Flash công nghệ LiveConnect

CODE

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/ [ic:cc]flash/swflash.cab#version=5,0,0,0"

ID=flashmovie WIDTH=120 HEIGHT=120>

<PARAM NAME=movie VALUE="17astojs.swf"> <PARAM NAME=quality VALUE=high> <PARAM

NAME=bgcolor VALUE=#FFFFFF> <EMBED src="17astojs.swf" quality=high bgcolor=#FFFFFF

WIDTH=120 HEIGHT=120

swLiveConnect=true NAME=flashmovie TYPE="application/x-shockwave-flash" PLUGINSPAGE="http:

//www.macromedia.com/shockwave/download/ index.cgi? P1_Prod_Version=ShockwaveFlash"></

EMBED> </OBJECT>

Trước đoạn code thẻ OBJECT/EMBED có đoạn script Phần hàm JavaScript với tên movie ID thẻ OBJECT nối tiếp với _DoFSCommand Như ví dụ tên hàm flashmovie_DoFSCommand

document.flashmovie Hãy xem đoạn code xem nhé:

CODE

<script LANGUAGE=JavaScript>

function flashmovie_DoFSCommand(command, args) { if (navigator.appName.indexOf("Microsoft") != -1) { var flashmovieObj = flashmovie;

} else {

var flashmovieObj = document.flashmovie; }

alert(command); alert(args); }

Trong Internet Explorer, Flash khơng liên lạc với JavaScript mà cịn liện lạc với VBScript Đoạn code viết JavaScript thay cho đoạn JavaScript trên:

CODE

if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 &&

navigator.userAgent.indexOf("Windows 3.1") == -1) { document.write('<script LANGUAGE=VBScript\> \n'); document.write('on error resume next \n');

document.write('Sub flashmovie_FSCommand(ByVal command, ByVal args)\n'); document.write('call flashmovie_DoFSCommand(command, args)\n');

document.write('end sub\n'); document.write('</SCRIPT\> \n'); }

Vậy phần ActionScript phải Xin trả lời cần dịng mà thơi

CODE

fscommand ("alert", "This is alert 1."); Nhận thông điệp từ JavaScript

Nhận thơng điệp từ JavaScript dễ Nhưng bạn phải nhớ đặt tham số ID thẻ OBJECT tham số NAME thẻ EMBED, nhớ đặt giống tên Và nhớ đặt swLiveConnect=true thẻ EMBED

Bây sẵn sàng để truyền thông điệp từ JavaScript cho movie Hãy xem ví dụ nhé, ví dụ sử dụng hàm gotoFrame để di chuyển movie sang frame thứ hai

CODE

<FORM NAME="flashControlForm">

<INPUT NAME="gotoFrame1" TYPE=Button VALUE="Frame 1" onClick="window.document.flashmovie.GotoFrame(1);"> </FORM>

Chắc đến bạn tự hỏi di chuyển sang frame thứ hai mà lại sử dụng gotoFrame(1), khơng nào? Bởi hệ đếm số (zero-based) Vì vậy, frame 0, frame 1, frame 2…

Có 24 câu lệnh Flash movie Tuy nhiên khơng cần phải dành nhiều thời gian để tìm hiểu nói cách liên lạc hoạt động tốt tất loại trình duyệt

Bạn sử dụng hàm GetVariable SetVariable để điều khiển biến timeline movie Câu lệnh Zoom dùng để kéo dãn movie Hai hàm isPlaying percentLoaded dùng để kiểm tra movie hoạt động Play dùng để play movie ngừng

Có lẽ yêu cầu thường gặp người sử dụng Flash Bạn làm điều cách sử dụng hàm getURL JavaScript

Tuy nhiên, sử dụng JavaScript có nhiều đặc điểm hay hơn, bạn đặt lại thuộc tính window Nào, làm thử nhé:

- Tạo movie

- Đặt vào movie button

- Chèn đoạn code sau cho button vừa tạo

CODE

on (release) {

fscommand ("newwindow", "content.html"); }

- Trong phần Publish Settings, chọn để publish file HTML với Flash movie Trong phần HTML, nhớ chọn vào mục Flash with FSCommand

- Publish movie bạn

- Mở file HTML mà Flash vừa tạo trình soạn thảo được, NotePad chẳng hạn Hãy tìm phần để chèn JavaScript, chèn đoạn code sau vào:

CODE

if (command == "newwindow") {

window.open(args,"","width=320,height=240,location=no,toolbar=no, menubar=no"); }

- Tạo thêm file HTML đơn giản đặt tên content.html

- Mở file HTML bạn trình duyệt nhớ trình duyệt phải hỗ trợ

JavaScript nha Khi nhấn vào button cửa sổ xuất hiện, khơng có toolbar, kích thước 320x240

dụng JavaScript

Quay trở lại file HTML mà Flash tạo, chèn đoạn code JavaScript sau vào cuối đoạn code ta chèn vào lúc trước

CODE

function initComm() {

window.document.newWindowMovie.SetVariable("jsCommOK","OK"); }

Đoạn code thử đặt giá trị cho biến jsCommOK OK Nếu trình duyệt có hỗ trợ JavaScript jsCommOK mang giá trị OK cịn khơng biến jsCommOK undefined

- Để chạy hàm initComm bạn sửa lại phần BODY trang HTML sau:

CODE

<BODY bgcolor="#FFFFFF" onLoad="initComm();">

Điều có nghĩa hàm initComm gọi sau trang load xong - Bây quay trở lại file Flash bạn, sửa đoạn script button thành:

CODE

on (release) {

if (jsCommOK == "OK") {

fscommand ("newwindow", "content.html"); } else {

getURL ("content.html", "_blank"); }

}

Trong phần này, làm file Flash ActionScript mà điều khiển JavaScript

- Tạo movie Flash với frame nhiều Nội dung frame khơng quan trọng, bạn muốn để đựơc lời khuyên frame nên khác để theo dõi thay đổi

- Đặt câu lệnh stop() vào frame - Publish file HTML

- Mở file HTML trình soạn thảo văn

- Truyền tham số ID thẻ OBJECT NAME thẻ EMBED, hai mang giá trị slideshow

- Nhớ đặt swLiveConnect=true thẻ EMBED - Tạo button file HTML đoạn code sau:

CODE

<FORM NAME="flashControlForm">

<INPUT NAME="next" TYPE=Button VALUE="Next" onClick="nextFrame();"> <INPUT NAME="prev" TYPE=Button VALUE="Previous" onClick="prevFrame();"> </FORM>

- Mỗi button gọi hàm Cả hai hàm sử dụng TcurrentFame(“/”)biết frame thứ mấy, sử dụng gotoFrame để di chuyển tới lui

CODE

<script LANGUAGE="JavaScript"> function nextFrame() {

var frameNum = window.document.slideshow.TCurrentFrame("/"); window.document.slideshow.GotoFrame(frameNum+1);

}

function prevFrame() {

var frameNum = window.document.slideshow.TCurrentFrame("/"); window.document.slideshow.GotoFrame(frameNum-1);

</SCRIPT>

Công việc bạn cịn nhớ khơng: CHẠY THỬ

Giờ thứ 18: Gởi thông tin cho máy chủ, Sending Information to the Server

Cho đến tận bây giờ, movie làm hầu hết chạy (stand alone) Có nghĩa chạy máy khách (client-side) khơng có liên lạc với máy chủ (Server) Nên nhớ Flash gởi trả thơng tin cho Server giống form HTML Vậy thứ 18 này, tìm hiểu vấn đề

Trong thứ 18, học: - Tìm hiểu đối tượng LoadVars

- Tạo chương trình server-side đơn giản - Sử dụng Flash để gởi liệu cho Server

Đối tượng LoadVars

Rất may mắn có Flash MX, phiên Flash trước đây, muốn làm điều phải làm movie clip khó khăn Đối với Flash MX, sử dụng đối tượng LoadVars

Đối tượng LoadVars bao gồm tập hợp câu lệnh biến đặc biệt để gởi liệu cho Server giống post form HTML Chúng ta tạo đối tượng giống tạo đối tượng khác Hãy xem thứ 12 nhé!

Lấy liệu

Dưới ví dụ Thay sử dụng new Object() new LoadVars Sau đối tượng LoadVars tạo

myVars = new LoadVars();

Với đối tượng LoadVars, làm việc, gởi lấy liệu Để lấy liệu, sử dụng câu lệnh load Cái cần đường dẫn đến nơi chứa liệu:

CODE

myVars.load("myURL.txt");

Ví dụ hoạt động giống câu lệnh LoadVariables thứ 10 Tuy nhiên, câu lệnh LoadVariables lấy thay liệu level với câu lệnh mà thơi Hãy tưởng tượng, có file chứa liệu sau:

CODE

name=George&ID=47

Gởi liệu

Với đối tượng LoadVars, gởi liệu lên Server Trước hết, đưa liệu vào đối tượng LoadVars, sau sử dụng câu lệnh send để gởi liệu

CODE

myVars = new LoadVars(); myVars.name = "George"; myVars.ID = 47;

myVars.send("serverprogram.cgi", "_self");

Đoạn code tạo đối tượng LoadVars tên myVars, đưa hai thuộc tính vào đối tượng myVars Sau đó, gởi liệu lên Server, xác đến chương trình CGI tên echo.cgi

có thể thay giá trị khác biết

Nhưng câu lệnh sendAndLoad Câu lệnh ghép câu lệnh send load Có nghĩa đối tượng LoadVars gởi liệu lên Server, sau lấy giá trị trả

CODE

mySendVars = new LoadVars(); myLoadVars = new LoadVars(); mySendVars.name = "George"; mySendVars.ID = 47;

mySendVars.sendAndLoad("serverprogram.cgi", myLoadVars);

Trạng thái lấy liệu

Hãy nhớ câu lệnh send load khơng lấy liệu tức Có thể phải đợi thời gian ngắn dài Vì vậy, có nhu cầu theo dõi trạng thái lấy liệu Chúng ta sử dụng liệu sau câu lệnh load sendAndLoad, mà cần phải kiểm tra xem lấy liệu xong chưa

Cách đơn giản dùng movie clip lặp lặp lại để kiểm tra Cũng sử dụng getBytesLoaded getBytesTotal với liệu lớn Dưới ví dụ để kiểm tra việc lấy liệu:

CODE

myLoadVars.onLoad = function(success) { if (success) {

gotoAndStop("load done"); } else {

gotoAndStop("load problem"); }

}

Như đoạn code đối số success nhận hai giá trị true false biết việc nhận liệu xong hay chưa

Càng ngày XML trở nên thông dụng ứng dụng tin học, Flash, học điều sau:

 XML

 Đối tượng XML Flash

 Phân tích xử lý XML theo phuơng pháo đệ quy (recursive) XML Căn bản

XML đơn giản văn để chứa liệu XML tương tự HTML, dùng thẻ Tuy nhiên, XML khác HTML thẻ HTML ấn định trước cho chức khác nhau, cịn XML khơng

Với XML, bạn tự tạo cho thẻ theo ý bạn để phù hợp cho mục đích riêng bạn

Có thể tạo XML file với trình biên tập văn (như Notepad, Textpad ) đơn giản software chuyên để viết XML (XMLSpy, Epic )

Với Flash MX, bạn dễ dàng truy cập liệu trữ XML, đối tượng XML Flash tự động phân tích văn XML

Trong VNFX có nhiều viết XML (ví dụ giới thiệu XML Flash-Lee) bạn tham khảo thêm

Đối tượng XML

Đối tượng XML Flash gồm có nhiều hàm vằ đặc tính dùng để giúp bạn lấy phân tích kiện XML file cách dễ dàng Bước dùng đối tượng XML tạo phiên XML trước:

CODE

Phân tích sử lý văn thành XML

Sau tạo phiên XML trên, phiên chưa có cả, nhiên bạn nhanh chóng tạo tài liệu XML cách dùng lệnh parseXML Lệnh nhập chuổi văn bản, phân tích xử lý thành tài liệu XML

CODE

myXML = new XML();

myXML.parseXML("<user><name>Gary</name><ID>47</ID></user>"); Hay bạn viết trực tiếp sau

CODE

myXML = new XML("<user><name>Gary</name><ID>47</ID></user>");

Nếu mà chuổi nhập vào tạo thành XML hồn chỉnh bạn dùng đặc tính status để kiểm tra

CODE

myXML = new XML("<user><name>Gary</name><ID>47</user>"); trace(myXML.status);

Output window cho -9 chạy đoạn code -9 có nghĩa thiếu thẻ đóng (end tag), thiếu thẻ </ID> Nếu output window cho -10 bạn thiếu thẻ mở (start tag), có nghĩa việc hồn chỉnh

Lấy liệu từ đối tượng XML

Có nhiều hàm để làm việc Ví dụ, bạn dùng firstChild để lấy nút (node) đối tượng XML:

myXML = new XML("<user><name>Gary</name><ID>47</ID></user>"); trace(myXML.firstChild);

Output window cho <user><name>Gary</name><ID>47</ID></user> Vì nút đối tượng XML Nếu xâu vào lần với firstChild

CODE

myXML = new XML("<user><name>Gary</name><ID>47</ID></user>"); trace(myXML.firstChild.firstChild);

Kỳ output window cho <name>Gary</name>, phần tử name nút user

Ngoài cách ra, cách dùng childNodes, ma trận của nút Cùng ví dụ dùng sau với chidlNodes

CODE

myXML = new XML("<user><name>Gary</name><ID>47</ID></user>"); trace(myXML.childNodes[0].childNodes[0]);

Dưới nút name, nút nút name, dùng cách để lấy nút đó:

CODE

myXML = new XML("<user><name>Gary</name><ID>47</ID></user>"); trace(myXML.childNodes[0].childNodes[0].childNodes[0]);

và output window cho chữ Gary Đây nút văn (text node) nút name Nhìn tưởng tận rồi, xuống sâu nữa, nút cuối cùng, bạn muốn lấy giá trị chuổi văn bạn thêm bước sau:

myXML = new XML("<user><name>Gary</name><ID>47</ID></user>"); trace(myXML.childNodes[0].childNodes[0].childNodes[0].nodeValue);

Nếu bạn muốn lấy ID nút thứ thay đổi sau:

CODE

myXML = new XML("<user><name>Gary</name><ID>47</ID></user>"); trace(myXML.childNodes[0].childNodes[1].childNodes[0].nodeValue);

* Để giải thích thêm đoạn code trên, bạn dùng childNodes kết sẻ đối tượng, cịn bạn dùng nodeValue chuỗi Bạn thử bẳng đoạn code viết

CODE

myXML = new XML("<user><name>Gary</name><ID>47</ID></user>"); myVar1 = myXML.childNodes[0].childNodes[0].childNodes[0];

myVar2 = myXML.childNodes[0].childNodes[0].childNodes[0].nodeValue; trace ("myVar1: " +typeof(myVar1));

trace ("myVar2: " +typeof(myVar2));

và output window cho bạn thấy rõ, law đối tượng chuỗi

Tự tạo XML từ "tay trắng"

Không biết dịch câu cho nghĩa với "Creating XML from Scratch" đành dịch

Để minh hoạ, tạo XML tương tự với lệnh vừa đề cập

CODE

myXML = new XML();

newElement = myXML.createElement("user"); myXML.appendChild(newElement);

newElement = myXML.createElement("name"); myXML.childNodes[0].appendChild(newElement); newText = myXML.createTextNode("Gary");

myXML.childNodes[0].childNodes[0].appendChild(newText); newElement = myXML.createElement("ID");

myXML.childNodes[0].appendChild(newElement); newText = myXML.createTextNode("47");

myXML.childNodes[0].childNodes[1].appendChild(newText);

Nếu bạn muốn thay đổi giá trị text node, bạn cần dùng nodeValue

CODE

myXML.childNodes[0].childNodes[1].childNodes[0].nodeValue = 53; Thuộc tính

Các thành phần XML có thuộc tính (attribute) Trong gặp rắc rối cách dịch attribute property, chữ tiếng việt dịch thuộc tính, đặc tính mà tiếng anh khác thật rắc rối xin dùng tiếng Anh nhe. Attribute gồm có từ khố giá trị từ khố đó, dùng để định rõ thành phần Ví dụ, đoạn XML dây với attribute type làm rõ nghĩa thành phần name hơn, ("alias" bí danh)

CODE

<user>

<ID>47</ID> </user>

Nếu bạn muốn đưa đoạn code vào XML object phải đổi dấu " (ngoặc kép) thành dấu ' (ngoặc đơn)

CODE

trace(myXML.childNodes[0].childNodes[0].attributes.type); Còn cách cho kết dùng []

CODE

trace(myXML.childNodes[0].childNodes[0].attributes["type"]);

Và bạn thay đổi giá trị attribute, hay thêm attribute sau:

CODE

myXML.childNodes[0].childNodes[0].attributes["type"] = "real"; Với câu trên, attribute type chưa có tạo

(trong sách đoạn code tác giả viết lộn type alias, bạn so sánh sách và thấy khác biệt, source file khơng xác, các bạn cần kiểm tra lại)

Khác với node, attribute truy cập ma trận (array) nên bạn dùng lệnh length hay dùng [] với index number Nhưng bạn dùng vịng lặp for in để truy cập attribute node.

CODE

myXML = new XML("<user><name type='alias' validity='verified'>Gary</name> <ID>47</user>");

trace(attr+": "+myXML.childNodes[0].childNodes[0].attributes[attr]); }

output window cho ra: alias verified Thêm vài AS XML

Bạn cần biết thêm số điều đối tượng XML Nhất điểm sau, phần đối tượng XML đối tượng XML riêng biệt Ví dụ bạn lấy node đối tượng XML quy thành biến

CODE

myXML = new XML("<user><name>Gary</name><ID>47</user>"); thisUser = myXML.childNodes[0];

thisUserName = thisUser.childNodes[0];

thisUserNameText = thisUserName.childNodes[0].nodeValue; thisUserID = thisUser.childNodes[1];

thisUserIDText = thisUserID.childNodes[0].nodeValue;

Bạn biết số node trong node khác bẳng thuộc tính length childNodes Ví dụ, user node có node trong, bạn biết với đoạn code sau:

CODE

myXML = new XML("<user><name>Gary</name><ID>47</user>"); trace(myXML.childNodes[0].childNodes.length);

Ngồi việc có tểh tìm giá trị node văn nodeValue, bạn bíết tên thành phần (hay thẻ) với nodeName Ví dụ bạn lấy tên thành phần (thẻ) user name sau:

CODE

Bạn biết node thành phần XML node văn (text node) với thuộc tính nodeType Nếu nodeType có thành phần XML có nhiều thành phần node đó, node node văn

Giờ thứ 20 : Kỹ thuật in

Không phức tạp trình duyệt Server Cominucation, in ấn cách mà FLash truyền liệu

Khả in ấn FLash hữu ích cho phép xây dựng văn mà người sử dụng in nội dung từ file flash bạn.Đây thường lựa chọn tốt dựa vào hàm in ấn trình duyệt

Trong thứ 20 :

- Học cách thiết lập movie bạn cho việc in ấn - Học cách sử dụng lệnh in

- Tạo biểu mẫu in I> Thiết lập cho movie có khả in:

1-Bạn cần làm vài việc với movie trước sử dụng lệnh in Action Script Thật không may,những lệnh in không linh hoạt Nếu sử dụng chúng mà khơng có chuẩn bị , Flash in toàn nội dung movie, frame

Và thường điều mà bạn khơng muốn Có bạn muốn in frame tại, frame movie riêng, đoạn gồm nhiều frame Nhưng bạn muốn in hết toàn

2 - Đặt tên cho frame

Bạn định frame in ký hiệu "#p" Nếu ký hiệu khơng đặt lên frame Flash in tồn movie bạn Ngược lại, bạn đặt từ hai ký hiệu trở lên movie bạn flash in tất frame

*Chú ý: Khi bạn đặt từ hai ký hiệu in trở lên, test movie, Flash xuất lời cảnh báo : "WARNING : Duplicate layer "

Đó điều rủi ro xảy ra, không ảnh hưởng đến movie bạn bạn sử dụng label "#p" câu lệnh "gotoAndStop" lệnh tương tự

3- Lên kế hoạch in

Bạn cần phải suy nghĩ lên kế hoạch cho movie bạn muốn movie có khả in Vì khơng thể in frame nên bạn

cần tạo frame có khả in Chú ý thứ tồn movie bạn in Nó bao gồm nút Print ( để nhấn vào thực lệnh in), movie có tồn

Vì cần phải có frame chứa nút Print, frame khác tương tự khơng có nút Print yếu tố khôgn

cần thiết khác Frame thứ hai dặt nhãn "#p"

Bạn bố trí cách sử dụng timeline Ví dụ bạn có menu nút Prin hai layer riêng biệt, mà cần có

trong nội dung biểu mẫu in Những layer bạn không muốn in khơng cần kéo chũng sang frame có nhãn "#p"

Ngược lại, hình hai nội dung mà người duyệt web không thấy được, hình Frame đặt tên "#p"

bạn thấy timeline.Layer Buttons không sử dụng keyframe giống frame Ngồi việc chặn nút Print khơng đựoc in ra,

Bây bạn biết làm để chuẩn bị cho biểu mẫu in, học AS cần thiết

II> Các câu lệnh

Có hai lệnh in sử dụng Chúng có khác biệt nhỏ, hoạt động giống

1- Print

Lệnh thứ

QUOTE

Print

Lệnh bao gồm hai tham số Tham số thứ đối tượng để in Thương timeline chính, "_root" Bạn sử dụng

Tham số thứ hai ba tuỳ chọn sau :

QUOTE

bframe

QUOTE

bmovie

QUOTE

bmax

Các tham số giúp FLash co dãn văn in theo ý người sử dụng Flash co dãn văn in tới kích thước

của trang giấy mà khơng bóp méo văn Ví dụ frame in có kích thước 550x400, chiều ngang phóng to tới kích thước 550px

chiều dọc scale theo tỷ lệ

Khi sử dụng tuỳ chọn "bframe", frame tự scale để lấp đầy kích thước trang Nếu frame thứ có nội dung với kích thước 550x400

nhưng frame thứ hai chứa nội dung có kích thước 275x200, frame thứ hai tự động scale gấp đơi kích thước ban đầu

khi sử dụng tuỳ chọn "bmax", Flash kiểm tra toàn frame in để xác định xem frame có kích thước lớn Các frame

cịn lại scale dựa kích thước frame lớn nhất, tính theo tỷ lệ Điều taọ nên frame có kích thước tỷ lệ với

Ví dụ, frame lớn có kích thước 550x400, lấp đầy trang in Frame khác có kích thước 275x200, chiếm nửa trang in

Tuỳ chọn cuối "bmovie", trường hợp bạn cần phải làm thêmm việc nhỏ nữa, tạo frame có chưa khung

Khung xác định kích thước lớn in văn (bằng kích thứoc khung) Bạn phải đặt tên frame với ký hiệu

"#b" Và flash sử dụng kích thước khung để scale tồn frame cịn lại Nếu có phần văn nằmg khung in

Sau ví dụ lệnh "Print" :

QUOTE

on(release) {

print(this,"bframe"); }

Như bạn thấy, tuỳ chọn coi chuỗi đặt dấu "" 2-PrintAsBitmap

Câu lệnh làm việc tương tự lệnh Print với hai tham số tương tự

Điều khác biệt lệnh Print gửi đối tượng đồ hoạ font chữ tới máy in Sau đó, máy in xây dựng lại vector nội dung để in

Ngược lại, PrintAsBitmap chuyển toàn nội dung thành ảnh bitmap lớn gửi tới máy in

Điểm thuận lới PrintAsBimap độ suốt văn in Nếu bạn có đối tượng đồ hoạ bán suốt,

chắc có ưu điẻm chắn bạn cần đến chức in này, đồng thời hoạt động tốt với nhiều loại máy in

Lệnh in văn in có tính thẩm mỹ cao, đường cong smooth chữ rõ ràng in Nó nhanh

khi in qua mạng

Nguyên tác chung sử dụng lệnh PrintAsBitmap bạn thật chắn kết giống nội dung hiển thị hình

Sử dung Print văn khơng cần độ xác cao bạn xây dựng movie để điều khiển môi trường mạng nội

Chú ý: Nếu bạn sưe dụng movie qua internet, lệnh in làm việc tất frame movie load xuống

Thao tác : Tạo biểu mẫu in

điền vào, gửi Chúng ta sử dụng máy tính, lại phải kiếm bút bàn để viết ?

Vì không tạo biễu mẫu cho phép điền thơng tin vào, sau in vời đầy đủ nội dung nhập vào

Chúng ta làm ví dụ đơn giản này, thấy chúng thuận tiện nhiều so với biêt mẫu html yêu cầu người sử dụng in toàn nội dung site

Bạn hồn tồn điề khiển in ra, thứ linh tinh trang web bỏ qua yếu tố email address thêm vào 1- Tạo movie

3-Đặt tiêu đề cho trường lên phía nhập liệu

4-Tạo tiêu đề cho Form Chú ý,hai loại tiêu đề đặt hai layer riêng biệt 5-Tạo nút Print đặt layer tên Buttons

6-CHèn đoạn mã sau cho button :

QUOTE

on (release){

print (this, "bmax"); }

7- Thêm Frame thứ hai cho movie, kéo Title Bar Content sang frame

thứ hai

8- Trong frame thứ hai layer Title, đặt tiêu đề khác Ví dụ, frame thứ "Fill out that application" frame thứ hai cần Appilcation

10- Thêm layer tên Signature Đặt keyframe frame thứ hai layer Thêm đường ngăn cách địa frame Nếu làm frame layer khơng có gì, nội dung tồn frame

11- Thêm layers tên Frame Labels Đặt hai keyframe Keyframe thứ 2, đặt ký hiệu "#p" Keyframe thứ chèn code

QUOTE

stop();

Tóm tắt

Để in frame movie bạn cần phải đặt label cho chúng "#p" Bạn đặt tên cho nhiều frame movie

Mọi thứ frame "#p" in Bạn trang trí tuỳ thích biểu mẫu in ra, trừ yếu tố menu

Bạn dụng lệnh "Print" để in frame sử dụng vector shape để gứi tới máy in Tuy nhiên, cần in đối tượng đồ hoạ bán suốt chắn

tất biểu mẫu in giống nhau, bạn sử dụng lệnh PrintAsBitmap Giờ thứ 21: Sử dụng component, Using component

ActionScript cho Component kèm Flash

Có component gắn liền kèm theo chương trình Flash: CheckBox, ComboBox, ListBox, PushButton, RadioButton, ScrollBar, ScrollPane

Để thêm component vào movie bạn, bạn click đúp lên component bảng Component, nhấn kéo component vào stage

PushButton

Click kéo component PushButton vào stage tạo instance (thể hiện) component PushButton stage Khi bạn thêm số phần tử Library vào movie Rất may phần tử cất folder gọn Library (thư viện), chúng không ảnh hưởng đến công việc bạn

Component PushButton stage trông đơn giản: khung với từ "PushButton"

Bạn nhớ bật tính Live Preview (xem trước) Flash cách chọn Control ->Enable Live Preview

(nút nhấn)

Ngoài bạn đặt cho component instance name (tên minh họa) testButton (kiểm tra nút)

Bây tất công việc phải làm viết hàm buttonPressed Dưới ví dụ đơn giản Hàm gửi vài dòng text cửa sổ Output:

ActionScript

function buttonPressed(buttonInstance) { if (buttonInstance == testButton) { trace("Test Button Pushed."); } else {

trace(buttonInstance._name); }

}

Mỗi hàm quản lý nút chuyển tham số: tham chiếu đến nút gọi hàm Vì bạn kiểm tra instance có phải có tên testButton hay khơng Hàm ví dụ chuyển thông báo "Test Button Pushed" nút nhấn testButton, in tên minh họa nút nút bị nhấn testButton

Bạn xem ví dụ mẫu movie 21pushbutton.fla

CheckBoxes

Component CheckBox (hộp kiểm) tương tự mà tạo 15 (anh em dịch sau nhé)

Trong ví dụ movie 21checkboxes.fla, tơi tạo hộp kiểm (CheckBoxes) Nếu bạn chọn component chúng mở bảng Properties, bạn thấy có nhiều thơng số so với component PushButton

Bổ sung vào thông số Label Change Handler, bạn có Initial Value (giá trị ban đầu) Label Placement (sắp xếp nhãn) Thông số Initial Value true false, tùy thuộc vào việc bạn muốn hộp kiểm ban đầu đánh dấu hay không Thông số Label Placement cho phép bạn xếp nhãn bên phải trái (right left) so với ô kiểm Right xếp mặc định Nếu bạn chuyển thành left, dòng chữ ghi nhãn hộp kiểm xuất bên trái ô

Trong movie mẫu, đặt tên cho instance CheckBox option1, option2, option3 Tôi đặt nhãn (label: phần text bên cạnh ô kiểm) Option One, Option Two, Option Three Thông số Change Handler instance đổi thành changeOptions

Tơi đặt hàm changeOptions timeline Hàm thực thi hộp kiểm CheckBox click vào Nó gửi tên trạng thái CheckBox cửa sổ Output

ActionScript

function changeOptions(checkBoxInstance) {

trace(checkBoxInstance._name+": "+checkBoxInstance.getValue()); }

Trong 21checkboxes.fla, thêm vào component PushButton Nút đặt tên doneButton gọi hàm buttonPressed Hàm lặp lặp lại với tất CheckBox gửi trạng thái chúng (được đánh dấu hay chưa) cửa sổ Output

ActionScript

trace("Option One: "+option1.getValue()); trace("Option Two: "+option2.getValue()); trace("Option Three: "+option3.getValue()); }

}

Thay gửi kết cửa sổ Output, hầu hết bạn muốn sử dụng chúng dạng khác Ví dụ, bạn đặt chúng đối tượng LoadVars để chúng gửi tới server

RadioButtons

RadioButtons giống CheckBoxes, ngoại trừ việc chúng xếp thành nhóm Tại thời điểm, bạn chọn nút RadioButton nhóm

File mẫu 21radiobuttons.fla có ba component RadioButtons Nếu bạn chọn nút mở bảng thuộc tính (Properties panel) cho nút, bạn nhìn thấy component có nhiều thơng số so với component CheckBox hay PushButton

Thêm vào thông số bạn thấy component CheckBox hai thông số Group Name (tên nhóm) Data (dữ liệu) Thơng số Group Name xác định xem RadioButton thuộc nhóm Trong movie mẫu, ba RadioButtons thiết đặt thông số firstGroup Nếu có nhóm nút thứ hai với tên khác, hai nhóm xem độc lập với định RadioButton bật

Thông số Data tùy chọn bạn sử dụng đoạn mã Bạn truy cập (access) hàm getData() Bạn lưu trữ lệnh mà đoạn mã bạn thực thi nút radio chọn

Trong movie mẫu, ba RadioButtons đặt tên choice1, choice2, choice3 Nhãn ba nút Choice One, Choice Two, Choice Three

nào thiết lập Đoạn script lặp lặp lại với ba nút để tìm kiếm nút trả true từ hàm getState() Điều nghĩa nút RadioButton bật

ActionScript

function buttonPressed(buttonInstance) { if (buttonInstance == doneButton) { var choice = "none";

for(i=1;i<=3;i++) {

if (this["choice"+i].getState()) { choice = this["choice"+i]._name; }

}

trace("Choice: "+choice); }

}

ListBox

Một ListBox (hộp danh sách) phương pháp đơn giản cho phép người dùng lựa chọn nhiều tùy chọn Một ListBox đặt thiết lập CheckBoxes RadioButtons Nó đặc biệt hữu ích bạn có nhiều lựa chọn khoảng trống hình có hạn

Một khung danh sách trường text cuộn thực tế Mỗi dòng tương ứng với lựa chọn riêng biệt người sử dụng Nếu có nhiều lựa chọn vùng mà khung danh sách hiển thị người dùng cuộn lên cuộn xuống để xem hết mục danh sách

Thêm vào đó, bạn phải thiết đặt thơng số Labels (nhãn) Tuy nhiên, giá trị đơn mà mảng giá trị Flash có giao diện đặc biệt (special interface) cho việc nhập giá trị Khi bạn click tham số Labels bảng Properties, bạn bắt gặp hộp thoại cho phép bạn nhập vào mảng mục (item) cho thơng số khác

Bạn có tham số Data (dữ liệu) để tạo mảng liệu Thông số Data này, giống thông số data dùng với nút radio, cho phép đoạn mã bạn lấy thông tin bổ sung lựa chọn mà người dùng chọn Tuy nhiên, thông số khơng bắt buộc phải có

Trong movie mẫu 21listbox.fla, đặt component ListBox với ba lựa chọn hình Chúng thiết đặt chọn nhiều dòng Khi người dùng click lên dòng, hàm listBoxChange gọi Điều xác định thơng số Change Handler Hàm cho bạn biết dòng (lựa chọn nào) vừa chọn:

ActionScript

function listBoxChange(listBoxInstance) { trace(listBoxInstance.getValue()); }

Trong movie mẫu có component PushButton Khi click, thực thi hàm Nó sử dụng hàm getSelectedItems() để lấy mảng lựa chọn (choices) chọn list box Mỗi mục chọn mảng đối tượng với thuộc tính label data Vì khơng sử dụng thuộc tính data hộp danh sách (list box), nên thay vào lấy nhãn (label)

ActionScript

for(var i=0;i<items.length;i++) { trace(items[i].label);

} } }

Bạn thêm bớt dịng từ list box cách sử dụng ActionScript Ví dụ, addItem thêm lựa chọn bổ sung vào list box

ActionScript

myListBox.addItem("Choice Four");

Bạn dùng addItemAt, removeItemAt, replaceItemAt để thay đổi list box ActionScript

ComboBox

Một combo box giống menu kéo xuống (pull-downl menu) người dùng gõ vào giá trị

May thay, bạn tắt tùy chọn hiệu chỉnh giá trị Khi combo box menu pull-down bình thường Thơng số để làm điều Editable (có thể hiệu chỉnh) hộp thoại Properties Bổ sung cho tham số đó, bạn cung cấp mảng chứa nhãn (Labels) liệu (Data)

Một thông số khác combo box Row Count (số dịng) Các combo box nhỏ list box Khi người dùng click vào, chúng trải rộng thành danh sách lựa chọn Nếu số lựa chọn vượt giá trị Row Count, cuộn xuất bên phải cho phép người dùng cuộn lên xuống để lựa chọn

lớn số dịng hiển thị xuất thêm cuộn

Khi người dùng chọn lựa chọn combo box, quản lý Click Handler gọi Dưới hàm đơn giản cho bạn biết nhãn combo box chọn:

ActionScript

function comboBoxChange(comboBoxInstance) { trace(comboBoxInstance.getValue());

}

Bạn dùng getSelectedIndex() để lấy mục (tính từ 0) mục chọn

Movie mẫu 21combobox.fla ví dụ component ComboBox

ScrollPane

Hai component khác hẳn so với component Chúng không dùng phép người dùng lựa chọn, dùng để hiển thị lượng thông tin lớn khoảng nhỏ (cuộn mà lị)

Component ScrollPane (ơ cuộn) gồm có cuộn dọc, cuộn ngang vùng hiển thị hình chữ nhật Thơng số component Scroll Content (cuộn nội dung) Đây tên liên kết (Linkage name) cho movie clip Khi bạn chạy movie, movie clip copy từ Library đặt vào vùng hiển thị cuộn Sau cuộn cho phép người dùng nhìn thấy phần khác movie clip

Bạn xem ví dụ file 21scrollpane.fla

Mặc dù component ScrollPane khơng địi hỏi ActionScript để làm việc, có nhiều hàm mà bạn dùng để xác định xem phần movie clip xem để thay đổi chiều rộng (width) chiều cao (height)

Bạn dùng bảng Properties để thay đổi chiều rộng chiều cao cuộn Khi bạn làm việc đó, ô cuộn trông bị méo mó Flash, no star where, ngon lành bạn chạy movie

Một lệnh ActionScript hữu ích loadScrollContent Lệnh sử dụng địa URL hiển thị movie clip ngồi vào cuộn

ActionScript

myScrollPane.loadScrollContent("myMovieClipFile.swf");

Ơ cuộn dùng trình duyệt hình ảnh

ScrollBar

Component cuối ScrollBar Component thêm cuộn vào trường text Bạn dùng component mà không cần dùng code ActionScript Chỉ việc kéo thả component ScrollBar vào trường text (text field), tự thêm vào trường text

Component ScrollBar có thuộc tính Actionscript sử dụng Ví dụ, bạn sử dụng getScrollPosition() để lấy vị trí cuộn setScrollPosition() để thay đổi

Thực hành với Components

Bây phối hợp component khác để tạo form nhập liệu: CheckBox, RadioButton, ComboBox, ListBox, PushButton components

Tạo ba component CheckBox Đặt tên cho chúng checkbox1, checkbox2, checkbox3 Nhãn chúng là: Macintosh, Windows, Linux

Tạo ba component RadioButton Đặt tên cho chúng radiobutton1, radiobutton2, radiobutton3 Nhãn chúng

Tạo ComboBox component Đặt tên cho combobox Thêm vài nhãn (label) vào để người dùng chọn lựa

Tạo ListBox component đặt tên listbox Thêm nhãn vào tuỳ bạn Đừng lo lắng thứ tự chúng xếp lại sau Thiết đặt thông số ListBox Multiple Selections thành false Dùng bảng Properties để tạo cho khung danh sách (list box) rộng 200 cao 200 pixel

Thêm PushButton component Đặt cho nhãn Done thơng số điều khiển Click Handler buttonPressed

Thêm dòng sau vào frame script Nó xếp lại nhãn mục component ListBox

ActionScript

listbox.sortItemsBy("label","Asc");

Lệnh sortItemsBy làm việc tốt với component ComboBox Bạn dùng "label" "data" cho thơng số Điều tùy thuộc vào nhãn (label) hay trường liệu (data) sử dụng để xếp Thơng số thứ hai "Asc" (sắp xếp theo thứ tự tăng dần) "Desc" (giảm dần)

Component PushButton gọi hàm buttonPressed Chúng ta tạo hàm theo đoạn nhỏ để xử lý phần form

getValue() có phải true khơng Nếu true, nhãn check box thêm vào mảng Khi vịng lặp kết thúc, mảng own chứa lựa chọn mà người dùng làm với check box

ActionScript

function buttonPressed(buttonInstance) { if (buttonInstance == doneButton) {

// sưu tập mảng CheckBoxes chọn own = new Array();

for(var i=1;i<=3;i++) {

if (this["checkbox"+i].getValue()) {

own.push(this["checkbox"+i].getLabel()); }

}

trace("Computers Owned: "+own);

Đoạn mã kiểm tra tất component RadioButton ghi nhớ xem component bật (đã chọn):

ActionScript

// xác định RadioButton lựa chọn favorite = "none";

for(var i=1;i<=3;i++) {

if (this["radiobutton"+i].getState()) {

favorite = this["radiobutton"+i].getLabel(); }

}

trace("Favorite: "+favorite);

ActionScript

// lấy giá trị ComboBox ComboBox nextPurchase = comboBox.getValue(); trace("Next Purchase: "+nextPurchase);

Để check (kiểm) nhiều lựa chọn list box, bạn cần lặp từ đầu đến cuối mảng trả getSelectedItems() Sau bạn cần xem xét thuộc tính label mục chọn (item)

Đoạn mã sau làm điều xây dựng mảng chứa nhãn lựa chọn:

ActionScript

// sưu tập lựa chọn ListBox uses = new Array();

items = listbox.getSelectedItems(); for(var i=0;i<items.length;i++) { uses.push(items[i].label); }

trace("Uses: "+uses); }

}

Nếu thực bạn làm điều này, nên sử dụng đối tượng có tính cấu trúc sử dụng lệnh trace Cho ví dụ, bạn tạo đối tượng LoadVars để sau gửi thơng tin đến máy chủ

Thay đổi kiểu dáng (Style) Component

Các component Flash vốn trông đẹp Nhưng tất nhà phát triển Flash bắt đầu sử dụng chúng, tất Flash movie trông na ná

component cách sử dụng ActionScript

Global Customization (tuỳ biến chung)

Sử dụng đối tượng globalStyleFormat, bạn tùy chỉnh giao diện cho tất

component lần Đây ví dụ thay đổi màu chữ tất text tất component thành màu xanh da trời (blue):

ActionScript

globalStyleFormat.textColor = 0x0000FF; globalStyleFormat.applyChanges();

Lệnh applyChanges chấp nhận thay đổi Ngồi ra, bạn thiết đặt nhiều thuộc tính khác Dưới số thay đổi chi tiết:

ActionScript

globalStyleFormat.textColor = 0x0000FF; globalStyleFormat.textFont = "Arial"; globalStyleFormat.textSize = 18; globalStyleFormat.textBold = true; globalStyleFormat.applyChanges();

Bạn thay đổi thành nhiều giá trị font chẳng hạn Số mục thay đổi kiểu dáng component dài để liệt kê hết Bạn thay đổi màu sắc kiểu dáng dấu kiểm CheckBoxes, hình trịn RadioButton, mũi tên cuộn ScrollBars, màu nền, màu sắc vùng tô sáng (highlight colors), màu sắc mục chọn, v.v Hãy xem chương trình Flash bạn để biết đầy đủ thông tin danh sách

Grouped Customization (tùy chỉnh theo nhóm)

bạn tạo cho đối tượng bạn kiểu dáng (style) riêng biệt dùng vài component mà bạn định

Bạn thực điều cách tạo đối tượng FStyleFormat Khi bạn làm điều này, đối tượng bạn có thuộc tính giống đối tượng globalStyleFormat

Ví dụ, bạn tạo đối tượng kiểu dáng (style object) thiết đặt màu sắc thành đỏ tươi đây:

ActionScript

myStyle = new FStyleFormat(); myStyle.textColor = 0xFF00FF;

Các yếu tố khác style khơng thiết đặt xác đối tượng style Vì bạn áp dụng style cho component, mà diện mạo style không thay đổi

Để áp dụng kiểu dáng style vào component, sử dụng lệnh addListener:

myStyle.addListener(radiobutton1);

Bạn nghĩ kỳ quặc sử dụng với addListener, Hãy hiểu rằng: bạn báo cho component để tiếp nhận (listen) đối tượng style

Single Component Customization (tùy chỉnh component riêng lẻ)

Bạn thiết đặt cách xác thuộc tính style Tuy nhiên, bạn khơng thể làm điều cách sử dụng cú pháp chấm (dot) gọn đẹp bạn mong muốn Thay thế, bạn cần phải dùng lệnh setStyleProperty Lệnh đặt thuộc tính style dạng chuỗi tham số giá trị mà bạn muốn thiết đặt cho tham số thứ hai

checkbox1.setStyleProperty("textColor",0xFF0000);

Bằng cách sử dụng ba phương pháp thiết đặt style cho component, bạn tùy chỉnh component theo mong muốn

Giờ thứ 22: Điều khiển âm với ActionScript

Có hai cách để bạn cho âm vào đoạn phim Flash Cách thứ đặt vào timeline Việc không cần phải sử dụng mã Cách thứ hai sử dụng

ActionScript để chơi đoạn nhạc lưu trữ Library Tìm hiểu cách truy xuất âm với ActionScript:

Việc kết nối chơi nhạc:

Điều mà bạn cần trước chơi đoạn nhạc với ActionScript kết nối đến Bạn "Import" file nhạc vào Library, bấm phải chuột chọn "Linkage", đánh dấu vào phần export Bạn đặt tên "Identifier" khác cho đoạn nhạc thay để tên file nhạc

Ví dụ, bạn "import" file nhạc "mysound.wav", xuất Library với tên mysound.wav Khi bạn chọn Linkage, đánh dấu export, đặt tên "Identifier" "mysound.wav", bạn sửa thành tên gi bạn muốn(vd: nhac1) Đó tên mà bạn sử dụng ActionScript

Để chơi đoạn nhạc ActionScript, bạn phải làm ba bước: Đầu tiên tạo đối tượng "Sound" :

ActionScript

mySound = new Sound();

Thứ hai, bạn cần gắn đoạn nhạc thư viện vào đối tượng "Sound" này:

"Identifier"

Cuối cùng, bạn lệnh cho đối tượng "Sound" bạn chơi đoạn nhạc:

ActionScript

mySound.start();

Và đoạn đơn giản đặt vào Button để chơi đoạn nhạc từ Library:

ActionScript

on (release) {

mySound = new Sound();

mySound.attachSound("poof.wav"); mySound.start();

}

Bạn tham khảo ví dụ đơn giản file "22playsound.fla" kèm theo sách

Bạn xem qua phương pháp phức tạp tí file

"22playsoundfunction.fla" Trong file Flash này, có function tên "playsound" đặt timeline "function" bao gồm tất mã mà bạn cần để chơi đoạn nhạc đơn giản

ActionScript

function playSound(soundName,balance) { var mySound = new Sound();

mySound.attachSound(soundName); mySound.start();

}

function này:

ActionScript

on (release) {

playSound("poof.wav"); }

Câu lệnh "start"

Câu lệnh "start" ví dụ sử dụng nhiều cách Bạn thêm hai tham số vào để thay đổi cách mà đoạn nhạc chơi

Tham số thứ bạn thêm gọi "offset" Nó giúp bạn chơi nhạc từ vị trí bạn muốn chơi lại từ đầu Ví dụ, dịng lệnh bắt đầu chơi từ vị trí thứ 1000 miligiây đoạn nhạc(1 giây sau bật):

ActionScript

mySound.start(1000);

Tham số thứ hai câu lệnh "start" số lần lặp lại đoạn nhạc Ví dụ, bạn muốn bắt đầu nhạc vị trí sau giây lặp ba lần, câu lệnh sau:

ActionScript

mySound.start(1000,3);

Bắt đầu nhạc vị trí từ đầu lặp ba lần:

ActionScript

mySound.start(0,3);

(Identifier) đoạn nhạc Nếu không, lệnh "stop" ngừng tất đoạn nhạc chơi

ActionScript

mySound.stop("poof.wav"); Điều chỉnh âm lượng

Bạn sửa đổi đoạn trước chơi số câu lệnh Các câu lệnh điều chỉnh âm lượng đoạn nhạc, tất loa hay

Lệnh "setVolume" cách điều chỉnh đơn giản nhất, bạn cần cho tham số từ đến 100 bạn vặn to, nhỏ đoạn nhạc:

ActionScript

mySound.setVolume(50);

Trong file "22playsoundvolume.fla" bao gồm nút Play bốn nút khác để điều chỉnh âm lượng lần từ 0, 10, 50 cuối 100 Nút Play chơi đoạn nhạc 100 lần nên bạn thử điều chỉnh âm lượng lúc chơi nhạc

Chú ý việc bạn điều chỉnh âm đoạn nhạc không liên quan đến đoạn nhạc khác Vì bạn điều chỉnh âm khác nhạc tiếng động

Đối tượng "Sound"

Đối tượng "Sound" có hai thuộc tính mà bạn nên biết đến Thứ "duration" độ dài đoạn nhạc tính miligiây Thứ hai "position" vị trí mà đoạn nhạc chơi, tính miligiây

Trong file "22tracksound.fla" thể cách dùng "position" "duration" để thể đoạn nhạc Sau bắt đầu, vạch đen chạy theo vị trí đoạn nhạc

ActionScript

onClipEvent(enterFrame) {

// tính xem chơi đoạn nhạc (giá trị từ 0.0 đến 1.0) percentPlayed = thisSound.position/thisSound.duration;

// lấy độ dài

barWidth = _root.bar._width; // đặt vị trí dấu vạch

_root.mark._x = _root.bar._x + barWidth*percentPlayed; }

Khi đoạn nhạc kết thúc:

Bạn sử dụng thuộc tính "position" "duration" để kiểm tra đoạn nhạc hết hay chưa, hai giá trị Tuy nhiên đoạn nhạc lặp nhiều lần hai giá trị cuối đoạn nhạc

Một cách tốt để kiểm tra đoạn nhạc kết thúc dùng "onSoundComplete" Đây function thực thi đoạn nhạc kết thúc hẳn

ActionScript

mySound = new Sound();

mySound.attachSound("mySound.aif"); mySound.onSoundComplete = function () { trace("sound done!");

}

mySound.start();

Bạn điều chỉnh âm lượng loa to loa khác thông qua lệnh "setPan" Điều giống giàn máy stereo Bạn đặt giá trị từ -100 đến 100 Nếu bạn để -100, tất âm phát bên loa trái, 100 loa phải

ActionScript

mySound.setPan(-100);

Bạn tham khảo file "22monopan.fla" Khi bạn bấm nút "Play" bên trái, loa trái phát ra, bấm nút "Play" bên phải, loa phải phát

Giờ thứ 23: Quản lý streaming cho movie, Managing Movie Streaming

Trong 23 tiến hành bước sau:  Tìm hiểu, giám sát movie load

 Làm loader đơn giản

 Làm loader phức tạp với loading bar

 Load media movie bên vào flash (sound, image) Chúng ta bắt đâu với bước :

Các Movie Flash có tính chất stream Điều có nghĩa frame movie bắt đầu nạp xuống, ko phụ thuộc vào việc frame cuối load xong hay chưa

Bạn ko muốn việc xảy Ví dụ movie bạn đoạn animation ngắn, bạn ko muốn bắt đầu movie load hồn tồn từ web

Có vài cách để bắt movie đợi loading xong Cách thông dụng ta tạo loader frame Đó frame movie Nó quan sát tính chất movie xác định xem nao movie kết thúc việc loading

Bạn sử dụng điều số trường hợp đơn giản Ví dụ bạn đặt frame lệnh stop();

Ở ta tạo button cho phép người sử dụng tiếp túc Khi người sử dụng click vào btn bạn dùng đoạn script tương tự sau để xác định xem phải làm tiếp theo:

CODE

on (release) {

if (_root._framesLoaded == _root._totalFrames) { play();

} else {

textDisplay = "Wait a few seconds and press again."; }

}

Nếu movie chưa load hết text field mà ta liên kết qua var textDisplay thông báo cho user

Bạn sử dụng kĩ thuật phần movie dài Ví dụ btn nằm Frame 50 để người sử dụng tiếp tục mà 50 frames sẵn sàng Ta dùng đoạn code sau để thực hiện:

CODE

onClipEvent(load) {

_root.textDisplay = "Waiting for the next sequence to load."; _root.stop();

}

onClipEvent(enterFrame) {

if (_root._framesLoaded >= 100) { _root.play();

Đây phần đầu loader script Tuy nhiên có cách khác xác để giám sát việc loading tính số frames Bạn sử dụng getBytesLoaded and getBytesTotal để tính tổng số file số file load

Đây đoạn script đặt vào mc frame movie Ở frame bạn ý đặt thêm lệnh stop();

CODE

onClipEvent(enterFrame) {

if (_root.getBytesLoaded() == _root.getBytesTotal()) { _root.play();

} }

Ở lần enterFrame điều kiện kiểm tra thỏa mãn tức movie load hồn tồn movie play tiếp tục

Chúng ta tiếp tục tiến hành làm loader đơn giản toàn movie load trước vượt qua frame :

1.Mở file

2.Ở frame đầu ta tạo keyframe 3.Tạo thêm kf frame

Để test loader cách rõ ràng frame nên chứa movie tối thiểu 100 K Cách tốt để tăng dung lượng ta import video

4.Trở lại frame 1, muốn có movie chờ tồn movie load trước tiép tục sang frame -> cho lệnh stop(); vào frame

Ta tạo shape đơn giản convert sang mc tống cổ sang góc hình mà người xem ko nhìn thấy (chuối rừng) Ta cho đoạn script sau vào:

onClipEvent(enterFrame) {

bytesLoaded = _root.getBytesLoaded(); bytesTotal = _root.getBytesTotal()

percentLoaded = Math.round(100*bytesLoaded/bytesTotal); _root.displayText = "Loading: "+percentLoaded+"%";

if (bytesLoaded == bytesTotal) { _root.play();

} }

đoạn script kiểm tra getBytesLoaded để xem liệu movie kết thúc việc loading chưa Ở ta tính số phần trăm load (percentLoaded) cho hiển thị số qua biến displayText root level

Bạn đừng quên tạo dynamic text field đặt var cho displayText nhe

Sẽ khó kiểm tra bạn test movie với Flash player máy movie bạn chạy nhanh quá, ko kịp nhìn loader Bởi nên publish lên trang web rùi test Hoặc bạn giả thiết lập cai modem 56 K

Nào goto website test bạn thấy trình loading số phần trăm text field Khi đạt đến 100% movie tiếp tục play

Bạn kiểm tra movie bạn với file: 23simpleloader.fla

3.Để cho loader thêm đẹp, tiến hành bước làm loader phức tạp có thêm progess bar :

các bước làm sau: 1.Bắt đầu movie

2.Vẽ hình chữ nhật rộng với border

3.Chọn tồn hình chữ nhật đặt chúng vào mc cách chọn insert convert to mc

4.Click vào mc để edit

5.Tách riêng phần fill border hình chữ nhật làm layer

trước layer có chứa hình chữ nhật cũ nằm sau

7.Chọn hình chữ nhật này(cai fill) chọn cho màu tối đăt vị trí khớp với border, phía hình chữ nhât cũ

8.Bây ta convert sang mc đặt instance name barFill

Double click vào mc ta chỉnh reg point cho góc tận bên trái

Trở lại movie chính, ta tạo thêm layer Và đặt dynamic text Đặt var cho displaytext, bạn nhớ chọn font chữ đẹp dẹp màu đẹp đẹp chút

Ở movie timeline ta đặt đoạn code sau vào mc chúng ta:

CODE

onClipEvent(load) { // initialize variables bytesLoaded = 0;

bytesTotal = _root.getBytesTotal(); }

Đoạn code enterFrame phải làm nhiều việc Nó có nhiệm vụ theo dõi số bytesLoaded bytesTotal liên tục Frame Biến percentLoaded có giá trị từ đến 100 Và sử dụng để thay đối _xscale Bar Bạn nhớ ta mặc định điểm reg point Bar góc bên trái ko? Chính mà bar dài theo giá trị biến percentLoaded sang phía bên phải

Khi mà số bytesLoaded = số bytesTotal display text thơng báo: "Loading Complete" chuyển movie sang frame

CODE

onClipEvent(enterFrame) { // if there is more to load

if (bytesLoaded < bytesTotal) { // get current amount loaded

// calculate percentage

percentLoaded = Math.round(100*bytesLoaded/bytesTotal); // if there is still more

if (bytesLoaded < bytesTotal) { // display text

displayText = "Loading: "+percentLoaded+"%"; // set scale of bar

barFill._xscale = percentLoaded; // no more left

} else {

// display complete

displayText = "Loading Complete."; // fill out bar

barFill._xscale = 100; // go to next frame _root.nextFrame(); }

} }

Ko biết hướng dẫn bạn hình dung cách làm chưa Nếu bạn chưa hiểu cbt post thêm hình minh họa vào

Timeline tôt nên phân sau nha:

-Layer thứ gồm có keyframes fr1 fr2 Ở kf lệnh stop();

Layer thứ ta cho button Người sử dụng click vào button để xem tiếp phần lại movie

Trong btn cho đoạn code sau:

CODE

on (release) { play(); }

-Layer thứ frame thứ chứa movie cần load bạn Các bạn xem thêm file : 23complexLoader.fla

Có lúc bạn cần tạo movie lớn có media ta ko cần phải tạo movie đầy file media mà load file media có sẵn từ bên ngồi Nhờ bạn xây dựng trình diễn lớn cách sử dụng file bên

Để làm điều tìm hiểu bước sau: Thế chỗ movie thời

Cách đơn giản để làm điều bạn chia cắt movie thành phần riêng Khi movie kết thúc ta chuyển đến movie khác Tất bạn cần dùng lệnh loadMovie

Ví dụ, bạn có frame cuối movie dài Khi người xem đến đó, họ click vào button xem movie khác Đoạn code đơn giản sau:

CODE

on (release) {

loadMovie("animation2.swf"); }

movie có buttons chứa movie khác Việc tạo liên kết movie quan trọng cho user trở lại movie cũ ban đầu

Bạn xem ví dụ file 23movie1.fla để biết thêm làm để trình bày tác phẩm bạn với files có sẵn

Loading a Movie Clip

Với lệnh loadMovie bạn thay chỗ mc mc khác Ví dụ để thay chỗ myMovieClip file otherMovie.swf bạn cần làm:

CODE

myMovieClip.loadMovie("otherMovie.swf);

Khi sử dụng loadMovie bạn dùng getBytesTotal and getBytesLoaded functions để thông báo cho người dùng text progess bar mà làm trình load

Nếu muốn preload movie clip để sẵn sàng lúc cần hiển thị, tạo movie trống, khơng có ngoại trừ câu lệnh stop() Sau load mc vào mc trống (ko hiển thị stage) Khi load hồn tồn movie sẵn sàng frame

Movie file nằm sẵn sàng browser cache user Bây đến đoạn có sử dụng mc lệnh loadMovie làm việc Lúc nhanh file download hồn tồn Sau sử dụng lệnh gotoAndPlay(2) để qua frame

Loading a JPEG

myMovieClip.loadMovie("picture.jpg");

Flash MX cho phép ta khả load file JPEG vào

địa file JPEG ok:

CODE

myMovieClip.loadMovie("picture.jpg");

mc myMovieClip thay chỗ mc có chứa bitmap image Bạn kiểm tra xem ví dụ file 23loadipeg.fla

Loading a Sound

Có cách để play sound từ file bên Cả sử dụng sound object lệnh loadSound Các sound file cần dạng phổ biến mp3

Sau ví dụ cho cách thứ 1, để chơi event sound Ở toàn sound load vào nhớ trước sau chơi có lệnh start();

CODE

on (release) {

mySound = new sound();

mySound.loadSound("mysound.mp3",false); mySound.start();

}

Flash ghi nhớ lệnh start đưa chí sound bắt đầu download Khi sound load xong play

CODE

on (release) {

mySound = new sound();

mySound.loadSound("mysound.mp3",true); }

vẫn tiếp tục load Nếu người dùng có kết nối mạng tốt nghe toàn sound load

Ghi bạn ko cần phải sử dụng lệnh start với streaming sound Tuy nhiên bạn cần phải ý sử lí file MP3 Ví dụ bạn sử dụng file nhạc mp3 với 128 Kbps hay 160 Kbps thường dùng để nghe file lớn để stream vói internet, đặc biệt người sư dụng dùng modem 32 Kpsb hay thích hợp ta sử dụng stream Chúng ta tổng kết lại nhe:

Streaming cách tốt giúp sử dụng dễ dàng với movie lớn Ta sư dụng AS để kiểm tra trình loading Bạn giữ movie frame thứ để tiếp tục tồn movie load

Bạn thơng báo cho người dùng q trình loading text thơng báo số % progess bar chẳng hạn

Bạn chia movie thành cách file riêng sử dụng loadMovie để nhảy từ file tới file khác người sử dụng muốn

Các file bên ngồi load vào cách khác Ngồi movie bạn load file ảnh, file nhạc

Một số câu hỏi trả lời sau giúp bạn nắm rõ hơn: Câu 1: ta load mc, unload chúng ko??

-Trả lời: có, lệnh unloadMovie

Câu 2: bình thường flash cần để load trước start??

-Trả lời: frame Bởi bạn cần sử dụng lệnh stop muốn đợi trước tiếp tục

Câu 3: cách để xác định movie load hoàn toàn?? -Trả lời: cách dùng getBytesLoaded == getBytesTotal function cách dùng _frameLoaded property _totalFrames property Ngồi bạn xem thêm viết sau:

Cách tạo preloader đơn giản

http://www.vnfx.com/ipb/index.php?showtopic=2325 Cách tổng quát để tạo loader đẹp:

http://www.vnfx.com/ipb/index.php?showtopic=2921

Ngoài loadMovie, loadSound có nhiều Bạn chịu khó search

Đây h cuối cùng, thú vị, hy vọng bạn cảm thấy dzui dzẻ vẽ AS CBT ko có kinh nghiệm dịch bài, nhìn vào text dày đặc chữ tối mắt tối mũi nên nhiều chỗ dịch lung tung, theo ý thích có chỗ diễn đạt tối nghĩa, ko bạn thẳng thắn góp ý, đừng thương tiếc

Trong học cách:  Vẽ đường thẳng đường cong  Tô màu vùng

 Để người sử dụng vẽ với chuột

 Đặt hình vẽ movie clip  Tạo text fields

1a.Drawing lines

-Để vẽ đường thẳng, việc cần làm định nghĩa giá trị lineStyle, dày nè, rùi có màu độ alpha

CODE

lineStyle(thickness, color, alpha);

Màu (color): giá trị đưa dạng số thập lục phân hexa, ví dụ: 0x000000 màu đen, 0xffffff: trắng , nhìn vào bảng color mixer để biết thêm

Độ suốt(alpha): = 0; max=100;

Độ dày (thickness): độ dày nhỏ 0, cịn lớn bao nhiu cbt ko biết Với độ dày line có độ dày pixel, ta cho giá trị (hairline) có độ dày pixel Tuy nhiên chúng khác chỗ: với hairline thay đổi scale độ dày ko thay đổi Các bạn thử đoạn code sau, thay đổi giá trị độ dày nhé:

CODE

lineTo(200,200); _xscale=300; _yscale=300;

Nhìn đoạn code ta thấy xuất lệnh:

CODE

moveTo(20,50)

Để vẽ đường thẳng ta cần xác định điểm: đầu cuối Mỗi điểm lại xác đinh với giá trị x y

-> moveTo điểm đầu, điểm đặt bút Như câu ta đặt bút x=20; y=50 > lineTo điểm tiếp đến Ta có x= 200; y=200 Như vẽ đường thẳng nối từ điểm (20,50) đến (200,200)

Chú ý:

1 bạn ko nêu điểm moveTo tự mặc định điểm (0,0)

2 bạn vẽ thêm line với lineTo điểm đặt bút mặc định điểm cuối line trước

Ví dụ để vẽ 500 đường lung tung hình ta có đoạn code đơn giản sau:

CODE

// set line style

lineStyle(2,0x000000,100); // draw 500 lines

// pick random end point x2 = Math.random()*550; y2 = Math.random()*400; // move to start point moveTo(x1,y1); // draw to end point lineTo(x2,y2); }

Bây bạn thử play trò xem sao, thử thay đổi độ alpha, color or thickness Mọi người thử copy and paste đoạn code sau xem :

CODE

// set line style

lineStyle(2,0x999999,100);

for(var x=-400;x<550;x+=10) {

// draw diagonal strip from left to right moveTo(x,0);

lineTo(x+400,400);

// draw opposite strip moveTo(550-x,0); lineTo(550-x-400,400); }

1b.Drawing Curves

CODE

lineStyle(3,0x000000,100); moveTo(150,200);

curveTo(275,275,400,200);

Như biết moveTo điểm bắt đầu, anker1 curveTo(control_x, control_y, anker2_x, anker2_y);

Control_point tiếp tuyến điểm anker với đường cong anker2 điểm cuối curve

Các bạn đọc thêm số viết diễn đàn đường cong bezier để hiểu rõ thêm

Chúng ta play tiếp với đoạn code sau:

CODE

lineStyle( 1, 0x0000FF, 100 ); moveTo(200,200);

curveTo(250,200,300,200); curveTo(300,250,300,300); curveTo(250,300,200,300); curveTo(200,250,200,200);

Olala, chúng ko curve mà lại hình vng Ngun nhân cho giá trị control point điểm

Hãy thử thay đổi chút xem có nào:

CODE

var bend = 42; moveTo(200,200);

sử dụng biến bend để thay đổi control point ta hình méo rùi Về phần plz đọc thêm topic box AS

2 Drawing Filled Areas

Trước hết để tơ màu cho vùng ta cần phải vẽ hình khép kín Sau dùng lệnh beginFill để vẽ:

CODE

beginFill(color of fill, alpha of fill) Ví dụ đoạn code sau:

CODE

lineStyle( 3, 0x000000, 100 ); beginFill( 0xFF0000 );

moveTo(175,100); lineTo(375,100); lineTo(375,300); lineTo(175,300); lineTo(175,100); endFill();

Nếu vùng cắt line lần thứ chỗ ko có màu Dựa vào ta tạo nên số hình thú vị Bạn thử copy đoạn code sau xem chỗ tô màu, chỗ ko :

CODE

lineStyle(3,0x000000,100 ); beginFill(0xFF0000);

lineTo(155,120); lineTo(345,120); lineTo(192,230); lineTo(250,50); endFill();

Có cách khác tốt để vẽ star, cho phép qui định giá trị ban đầu Bạn thử xem file fla 24betterstar.fla xem

Pause

3.Vẽ với chuột

Phần sách có đoạn code để user vẽ với chuột, thành thật mà nói, bạn đọc đoạn code DS post bên phần Flash hack bạn thấy khác trời vực http://www.vnfx.com/ipb/index.php?showtopic=3007

Nếu bạn đọc đoạn code DS đừng nên đọc tiếp đoạn code hướng dẫn sách làm CBt thấy ko cần thiết phải dịch chỗ trót rùi nên tơn trọng sách, cbt dịch cho đầy đủ

1.Tạo shape đơn giản, convert to mc

2.Copy đoạn code sau vào mc (cbt phân tích kèm)

CODE

onClipEvent (load) {

// cho giá trị cho kiểu line _root.lineStyle(0, 0x000000, 100); }

//khi chuột dzí xuống bắt đầu vẽ onClipEvent(mouseDown) {

// xác định điểm start để vẽ startX = _root._xmouse; startY = _root._ymouse; _root.moveTo(startX,startY); }

//khi thả chuột ko vẽ onClipEvent(mouseUp) {

// don't draw anymore draw = false;

}

//bắt đầu

onClipEvent (enterFrame) { if (draw) {

//lấy vị trí chuột newX = _root._xmouse; newY = _root._ymouse;

//nếu vị trí khác với vị trí ban đầu if ((newX != startX) or (newY != startY)) { //vẽ line tới vị trí

_root.lineTo(newX,newY); // reset location for new time startX = newX;

startY = newY; }

Phần có

4.Tạo movie clip riêng cho hình vẽ

Những làm vẽ cách đơn giản stage, có bất lợi bị mc che khuất ko thể di chuyển

Khi đặt vào mc thuận tiện nhiều ta thay đổi _x, _y, rotation, alpha, scale

Để tạo new mc ta dùng lệnh :

CODE

my_mc.createEmptyMovieClip("tên new mc", level nó) Ví dụ :

CODE

this.createEmptyMovieClip("myMovieClip",1); myMoveClip.lineStyle(0,0x000000,100); myMoveClip.moveTo(100,100);

myMovieClip.lineTo(200,200);

Như bạn có mc tên myMovieClip, level 1, có chứa hình vẽ Nếu bạn muốn viết nhanh viết lại sau:

CODE

this.createEmptyMovieClip("myMovieClip",1); with(mymovieClip){

lineStyle(0,0x000000,100); moveTo(100,100);

Lệnh createEmptyMovieClip cịn có nhiều tác dụng khác ta attach thêm movie vào chép (duplicateMovieClip)

Rùi bi bạn thử tạo mc

Có hướng dẫn vẽ bơng tuyết đẹp sách, nhiên code chia nhỏ thành function dài dịng cơng trong diễn đàn có nhiều đoạn code làm tuyết hay nhiều: trời làm tuyết DS box hướng dẫn thực hành Đặc bịêt hợp với chủ đề dùng 100% AS Raider (tìm mục lục), có đoạn code hay Bởi cbt ko dịch đoạn code sách

Để biết thêm chi tiết xin xem file fla 24snowflakes.fla 5.Textfield

Đây phần cuối cùng, học cách tạo text field sau làm effect flying words

Tạo Text

Để tạo text cần tạo ô text (text field) với lệnh :

CODE

createTextField("text_name", level , vị trí _x, vi trí _y, chiều rộng,chiều dài); Sau text lên text field đó:

CODE

text_name.text = "Nội dung text";

CODE

//tạo ô chữ tên my , level 0, _x=0, _y=170, width=550, height=60 createTextField("myTextField",0,0,170,550,60);

//text

myTextField.text = "Welcome to VNFX";

// giá trị true sử dụng font add thư viện, false ta sử dụng font mặc định myTextField.embedFonts = true;

//mặc định tính chất text myTextFormat = new TextFormat(); //loại chữ, cỡ, màu, vị trí

myTextFormat.font = "Arial"; myTextFormat.size = 48;

myTextFormat.color = 0x330000; myTextFormat.align = "center";

//liên kết tính chất với ô text myTextField.setTextFormat(myTextFormat);

Chú ý sử dụng embedFont ta cần phải chọn font thư viện click vào góc phải thư viện, chọn font mà bạn muốn, sau click chuột phải, linkage, export, IDname

Nếu bạn muốn tạo Input text cần phải cho type textField input, sau set thêm variable để máy nhận info từ user

để trang trí cho textField

Lý thuyết có vậy, làm effect flying words

CBT ko dám nhận xét nhiều đoạn code cách làm sách này, nhiên chia nhỏ thành function gây rắc rối, dài dòng cho người đọc, lại cịn phải tạo thêm mc stage, có chỗ hạn chế Thơi đưa

CODE

function createText(n,text) { // create a new movie clip

this.createEmptyMovieClip("text"+n,n); mc = this["text"+n];

// set the text format

myFormat = new TextFormat(); myFormat.font = "Arial";

myFormat.color = 0x000000; myFormat.size = 24;

myFormat.align = "center"; // create a new text field

mc.createTextField("myTextField",1,-100,-20,200,40); mc.myTextField.text = text.toUpperCase();

mc.myTextField.embedFonts = true;

mc.myTextField.setTextFormat(myFormat); // return reference to this movie clip

return(mc); }

function createAllText(textList) { // loop through array of text

ề cách dùng loadVariables() bên box ActionScript (ví dụ giới thiệu XML Flash-Lee) http://www.vnfx.com/ipb/index.php?showtopic=2325 http://www.vnfx.com/ipb/index.php?showtopic=2921 http://www.vnfx.com/ipb/index.php?showtopic=3007