Tài Liệu Thiết Kế Flash

Trường Đại Học Sư Phạm TP hồ Chí Minh

Khoa Vật Lý

Câu lạc bộ Vật Lý ảo

dYc

Tài liệu hướng dẫn

Lập trình

Cho

Ấn phẩm nội bộ dành cho thành viên Câu lạc bộ Vật Lý ảo

LỜI NÓI ĐẦU

Các bạn thân mếm!

Làm hoạt hình với Flash đã khá quen thuộc với mọi người, và đã được sử dụng ở hầu hết các website động hiện nay. Flash được ưa chuộng bởi những đồ họa sinh động, đẹp mắt.

Câu lạc bộ Vật lý ảo, khoa Vật lý trường ĐH Sư Phạm TP.HCM sử dụng Flash để mô phỏng các chuyển động, các hiện tượng vật lý xãy ra trong tự nhiên, mô phỏng các thí nghiệm vật lý,…Để việc mô phỏng được dễ dàng, chính xác, chúng ta sử dụng ngôn ngữ lập trình ActionScript tích hợp trong Flash. ActionScript là những mã kịch bản, điều khiển các đối tượng và bảng tiến trình của Flash, nó là trung tâm sức mạnh cho Flash, hầu hết các kỷ thuật nâng cao đều sử dụng những đọan mã ActionScript.

ActionScript không chỉ là ngôn ngữ dành riêng cho người lập trình mà là công cụ bổ sung hiệu quả cho thiết kế của bạn. Không nhất thiết bạn phải là người giỏi lập trình thì mới sự dụng được ngôn ngữ này, chỉ cần bạn biết một chút ít tiếng Anh và thuật toán là có thể sử dụng dễ dàng.

Những ai có thể sử dụng được tài liệu này?

Đây là tài liệu được biên soạn dành cho những ai đã học qua chương trình Flash cơ bản,(nếu bạn chưa biết gì về Flash thì hãy trang bị cho mình những kiến thức cơ bản của Flash trước khi xem tài liệu này).

Đây là tài liệu hướng dẫn sử dụng ActionScript đáp ứng cho việc mô phỏng flash trong câu lạc bộ vật lý ảo. Do đó nhiều phần không cần thiết sẽ được lướt qua hoặc không giới thiệu tới.

Rất mong nhận được sự đóng góp ý kiến xây dựng tài liệu cho hoàn chỉnh hơn từ phía các bạn đọc.

Chúc các bạn thành công!

Chương 1:

Tìm hiểu về các lệnh cơ bản

Trong chương này chúng ta sẽ làm quen với một số lệnh cơ bản nhằm điều khiển bảng tiến trình chính, điều khiển các đoạn phim, nút nhấn và các thuộc tính của chúng.

I.      Giao diện làm việc

Để dễ dàng xem và hiệu chỉnh các đoạn mã của bạn, bạn nên để những đoạn mã của mình trong một lớp (layer) riêng, ví dụ tôi đặt những đoạn mã của mình vào lớp action.

Mở bảng action làm việc (F9). Bảng làm việc có giao diện như hình trên. Phía bên trái bảng làm việc cung cấp cho các bạn toàn bộ những công thức được quy định sẵn bởi flash.( Các bạn không cần quan tâm đến những công thức này). Vùng làm việc của bạn là vùng màu trắng bên phải.

II.   Một số lệnh cơ bản

1.                  // text

• Dòng chú thích
• Những gì viết sau dấu // sẽ được flash bỏ qua, đây chỉ là dòng chú thích do người lập trình đưa vào nhằm ghi chú các câu lệnh của mình.
• Vd: //câu lạc bộ vật lý ảo

2.                  /* text */

• Đoạn chú thích
• Có chức năng tương tụ như dòng chú thích.

3.                  stop();

• Dừng bảng tiến trình.
• Có chức năng dừng mọi hoạt động trong bảng tiến trình.

4.                  play();

• Bắt đầu chạy bảng tiến trình.

5.                  gotoAndStop(frame);

• Đối số (frame) là số frame hoặc frame lable.
• Lệnh có chức năng đi đến và dừng tại frame ở đối số
• Ví dụ: gotoAndStop(15); đi đến và dừng tại khung thứ 15.
• Chú ý: bạn nên đặt tên cho frame ở khung frame lable thì sẽ tránh được một số lỗi khi bạn chèn thêm frame vào.
• Ví dụ ở frame 15 bạn đặt nhãn là myFrame, thì thay vì viết như trên bạn có thể viết: gotoAndStop(“myFrame”); như vậy sẽ tránh gặp lỗi khi bạn chèn thêm một hoặc vài khung hình nữa ở trước frame 15.

·        _currentframe: là khung hiện hành mà đầu phát đang đến.

6.                 gotoAndPlay(frame);

• lệnh có chức năng tương tự nhưng ngược lại với gotoAndStop();

III.           Làm việc với các đối tượng

Trong vùng stage làm việc của bạn có rất nhiều đối tượng, ví dụ đoạn phim, nút nhấn, văn bản text,…, bạn hãy đặt tên cho chúng để dễ dàng gọi chúng khi bạn cần.

Ví dụ tôi có một quả bóng với thuộc tính là movie clip, tôi đặt tên như sau:

Việc đặt tên như thế nào là tùy ở bạn ( nhớ là đừng đạt tên trùng với các lệnh có sẵn trong flash là được). Ở đây tôi dùng hậu tố _mc để chỉ nó là một đoạn phim. Chúng ta có một số hậu tố như sau:

Hậu tố	Ý nghĩa
_mc	Đoạn phim (movie clip)
_btn	Nút nhấn (button)
_sound	Âm thanh
_video	Đoạn video
_str	Chuỗi (string)
_aray	Mảng (dãy)
…..	……

1.                 Bây giờ chúng ta tìm hiểu cách gọi các đối tượng đó làm việc theo ý mình:

this.action();

• Gọi tên tất cả các đối tượng đang có mặt trong vùng stage và thực hiện lệnh action
• Vd: this.stop( ); tất cả các đối tượng ngừng hoạt động.

Instance Name. action( );

• Instance name là tên của đối tượng
• Action có thể là một lệnh hoặc một thuộc tính của đối tượng.
• Vd: quabong_mc._x = 100; dòng lệnh này sẽ thiết lặp thuộc tính tọa độ x của quả bóng là 100 trong vùng Stage.
• Bạn nên chú ý 4 thuộc tính của đối tượng sau:

_x: tọa độ x của đối tượng

_y: tọa độ y của đối tượng

_width: thuộc tính độ rộng của đối tượng

_height: thuộc tính độ cao của đối tượng

Chú ý: tất cả 4 thuộc tính trên tính bằng đơn vị pixel, chúng được biểu hiện trong bảng Properties. Ngoài ra bạn nên chú ý  thuộc tính cần thiết như:

_alpha: thuộc tính trong suốt của đối tượng

_currentframe: trả về cho bạn một con số là số frame hiện tại của đầu phát.

_rotation: dùng để xoay một góc (độ) của đối tượng.

_visible: thuộc tính kiểu Boolean (luận lý) có 2 giá trị true hoặc false, nếu là true thì đối tượng được nhìn thấy, nếu là false thì đối tượng được dấu đi.

_xmouse: trả về giá trị x của chuột

_ymouse: trả về giá trị y của chuột

_xscale: độ co giãn theo phương x của đối tượng

_yscale: độ co giãn theo phương x của đối tượng

2.                 Làm việc với nhiều bảng tiến trình

Khi làm flash bạn nên thiết kế các hành động của từng đối tượng ở các đoạn phim riêng, sau đó kéo chúng vào vùng Stage sẽ giúp bạn dễ dàng chỉnh sửa, nâng cấp chúng hơn. Vì vậy rất có khả năng bạn phải làm việc với nhiều bảng tiến trình. Chúng ta xét một ví dụ đơn giản sau để điều khiển các quả bóng:

Công việc đầu tiên của bạn là mở chương trình Macromedia Flash lên và vẽ vào vùng stage một quả bóng.  Chọn quả bóng và nhấn F8 để chuyển nó thành một đoạn phim, công việc này đã khá quen thuộc với bạn. Trong bảng tiến trình của đoạn phim bạn chọn frame số 2 nhấn F6 để tạo khung hình khóa, tại đây bạn kéo quả bóng (lên hay xuống là tùy bạn) 1 px theo phương y. Việc bạn vừa thực hiện sẽ giúp cho quả bóng nẩy lên xuống liên tục thi bạn chạy thử chương trình.

Bây giờ trở về màn hình làm việc chính bạn sẽ thấy một phiên bản quả bóng là một MovieClip. Đặt tên cho nó là ball_mc trong ô Instance Name. Bạn hãy tạo chuyển động cho quả bóng bằng cách thông dụng như Create Motion Tween mà bạn đã biết. Bây giờ nhấn tổ hợp phím Ctrl+Enter bạn sẽ thấy một quả bóng vừa nhảy tưng tưng vùa chạy qua màn hình.

Trên đây là những thao tác căn bản mà bạn đã biết trước đây. Bây giờ là những gì bạn cần biết. Tạo thêm một lớp mới là action ngay bên trên layer 1 của bảng tiến trình chính. Nhấn F9 để mở bảng ActionScript và bắt đầu viết lệnh.

Bạn bắt đầu nhập vào như sau:

Bạn nghĩ rằng mọi thứ sẽ bất động? Nhưng thực tế không phải như vậy, quả bóng vẫn ” nhảy tưng tưng”. Tại sao lại như vậy? Điều này thật dễ hiểu, bạn chỉ làm dừng bảng tiến trình chính (có hành động chạy ngang của quả bóng chớ không làm dừng bảng tiến trình phụ (có chứa hành động nhảy tưng tưng của quả bóng).

Để điều khiển dừng hành động nhảy của quả bóng bạn có thể mở bảng tiến trình đó lên và nhập vào dòng lệnh như trên, nhưng điều đó sẽ không hay chút nào nếu bạn phải làm việc với quá nhiều đoạn phim. Có một cách thật đơn giản hơn, tại bảng chính bạn nhập như sau:

Quả bóng chỉ chạy mà không nhảy.

Muốn dừng toàn bộ quả bóng bạn làm như sau:

Tuyệt vời, quả bóng nằm im bất động.

Chú ý: nếu có nhiều bảng tiến trình lồng vào nhau thì bạn gọi tên chúng từ ngoài vào trong kiểu như đường dẫn trong các thư mục vậy nhưng ở đây chúng cách nhau bởi dấu chấm (.).

IV.           Các sự kiện (event)

Các sự kiện trong phim flash có thể là một sự kiện bên ngoài, ví dụ khi bạn nhấn vào nút, hoặc sự kiện từ bên trong như tải phim hoặc di chuyển đến khung hình kế tiếp.

1. Các sự kiện bên ngoài

Phổ biến nhất trong phim flash là các nút nhấn (button). Mỗi khi người dùng tác động (nhấn) lên chúng thì flash sẽ thực hiện các lệnh do người thiết kế làm sẵn.

• Sự kiện onPress: lệnh sẽ được thực hiện khi nhấp chuột
• Sự kiện onRelease: lệnh sẽ được thực hiện khi nhấp chuột rồi thả ra.
• Trong ví dụ trên, bạn tạo một button có instance name là push_btn. Mở

bảng action của layer action và viết lệnh như sau:

Nếu bạn viết lệnh trực tiếp lên nút thì bạn chọn vào nút đó và mở bảng action lên viết như sau:

Cả hai cách viết trên đều cho cùng kết quả là làm quả bóng ngừng nhảy.

2. Các sự kiện bên trong

Các sự kiện bên trong xãy ra bạn khó mà quan sát được, vì vậy thật khó để biết flash hoạt động ra sao. Nhưng điều đó không quan trọng và cũng không gây khó khăn gì cho bạn khi thiết kế.

Một ví dụ đơn giản của sự kiện bên trong là onEnterFrame, sự kiện này được tạo mỗi khi đầu phát chuyển sang một khung mới.

V.  Ví dụ

Bây giờ là lúc ứng dụng thực tế. Trong ví dụ quả bóng nói trên, ta sẽ học cách điều khiển nó.

Tạo 2 quả bóng có tên phiên bản (instance name) là ball01_mc và ball02_mc. Tạo 2 nút lệnh có tên instance name là next_btn, prev_btn để điều khiển quả bóng số 1.(Trong ví dụ này ta không chú ý tới hành động “nhảy tưng tưng” của quả bóng nữa). Nút next_btn mỗi lần nhấn quả bóng 1 sẽ chạy qua 10px, nút prev_btn thì ngược lại.Quả bóng 2 sẽ di chuyển ngang qua màn hình theo tọa độ của chuột

Mở bảng action viết lệnh như sau:

// điều khiển quả bóng ball01_mc thông qua hai button next_btn và prev_btn

next_btn.onPress = function(){

ball01_mc._x  += 10;

}

prev_btn.onPress = function(){

ball01_mc._x  -= 10;

}

Đoạn mã sau hướng dẫn các bạn điều khiển tọa độ y của quả bóng 1 bằng phím Up và Down trên bàn phím: Nhập đoạn mã sau vào một button bất kỳ có trong bảng tiến trình:

on (keyPress “<Up>”){

ball01_mc._y -= 10;

}

on (keyPress “<Down>”){

ball01_mc._y += 10;

}

Trở lại layer action trên vùng stage chính bạn nhập mã lệnh sau, điều khiển quả bóng 2:

onEnterFrame = function (){

ball02_mc._x  = _xmouse;

}

Chương 2

Tìm hiểu về các lệnh nâng cao

Trong chương này chúng ta sẽ lần lượt tìm hiểu một số lệnh và hàm nâng cao trong ActionScript

Ø     Sử dụng biến để lưu trử thông tin

Ø     Tìm hiểu các khái niệm về số, chuỗi, mảng,…

Ø     Câu lệnh if

Ø     Tìm hiểu về các vòng lặp

Biến

Biến là nơi chứa được đặt tên và bạn có thể dùng nó để chứa dữ liệu và sử dụng nhiều lần

Tạo biến:

Cú pháp: var variable:type;

variable = value;

Trong đó:         variable là tên biến

type: kiểu của biến

value: giá trị của biến

Ví dụ:   tạo một biến mới có tên là myVariable có kiểu số (Number) và thiết lập giá trị cho biến là 1:

Var myVariable:Number;

myVariable = 1;

bạn cũng có thể viết ngắn hơn: var myVariable:Number = 1;

hoặc: var myVariable = 1;

hoặc: myVariable = 1;

Chú ý: nếu biến là kiểu chuỗi thì giá trị chuỗi được viết giữa hai dấu nháy “”

Bạn có thể dùng hàm trace (myVariable); để xuất giá trị biến myVariable ở cửa sổ output.

Kiểu của biến: trên thực tế có 3 loại giá trí:

Kiểu String (chuỗi): bao gồm các ký tự và ký số

Kiểu Number (số): bao gồm toàn bộ tập số thực

Kiểu Boolean ( luận lý): là các giá trị true, false

Nối chuỗi: các chuỗi được nối với nhau bằng dấu cộng (+);

Vd:       var myName:String;

myName = “bin”+ “ho”;

kết quả cho biến myName là chuỗi “binho”;

Đối với kiểu số thì linh động hơn các bạn có thể cộng, trừ, nhân, chia,…hoặc thậm chí là bình phương hay khai căn.

Kết quả nối số với chuỗi là một chuỗi mới.

Vd:       myAge = 15 + “5”;

Kết quả cho myAge là chuỗi “155” chứ không phải là 20.

Câu lệnh điều kiện

Cú pháp:

if (condition){

Thực hiện các lệnh 1;

}

else { thực hiện các lệnh 2;

};

Trong đó: condition là điều kiện, nếu điều kiện là đúng thì thực hiện các lệnh 1, nếu ngược lại thì thực hiện các lệnh 2.

Ví dụ: if ( myBall_mc._y < 100){

gotoAndPlay(“fallingball”);}

else { gotoAndStop(1);

}

Ý nghĩa: nếu tọa độ y của quả bóng myBall_mc nhỏ hơn 100 px thì đi đến và chạy tại frame “fallingball”, nếu ngược lại thì đi đến và dừng tại frame số 1.

Chú ý: câu lệnh if rút gọn không có hàm else.

Các toán tử:

Ký hiệu toán tử	Ý nghĩa	Ví dụ
= =	Kiểm tra xem 2 toán hạng có bằng nhau không?	myball_mc._x = = 100
>	Toán hạng 1 có lớn hơn toán hạng 2 không?	ball01_mc._x > ball02_mc._x
<	Toán hạng 1 có nhỏ hơn toán hạng 2 không?	ball01_mc._x < ball02_mc._x
<=	Toán hạng 1 có nhỏ hơn hoặc bằng toán hạng 2 không?	ball01_mc._x <= ball02_mc._x
>=	Toán hạng 1 có lớn hơn hoặc bằng toán hạng 2 không?	ball01_mc._x >= ball02_mc._x
!=	Toán hạng 1 có khác toán hạng 2 không?	ball01_mc._x!= ball02_mc._x

Toán tử logic

• && and
• || or
• ! not

Các hàm phép toán:

• Math.abs ( number):trả về giá trị tuyệt đối của đối số number
• Math.acos(number): trả về giá trị hàm arccos của đối số number ở góc radian
• Math.asin(number): trả về giá trị hàm arcsin của đối số number ở góc radian
• Math.atan(number): trả về giá trị hàm arctan của đối số number ở góc radian
• Math.cos(number): trả về giá trị hàm cos của đối số number, number tính bằng độ.
• Math.E: trả về giá trị số e = 2.71828182845905
• Math.exp(number): trả về giá trị e mũ, trong đó number là số mũ
• Math.PI: trả về giá trị số = 3.14159265358979
• Math.pow(base, exponent): hàm mũ, trong đó base là cơ số, exponent là số mũ.
• Math.random(): trả về một số ngẫu nhiên nằm trong khoảng từ 0 đến 1.
• Math.sqrt(number): hàm căn thức, number là số thực dương.

Mảng (Array)

Mảng là một phần tử chứa nhiều biến mà được truy cập bằng một tên.

Cú pháp:

tenmang = new Array( );

Ví dụ:            tạo mảng có tên là physic_array:

physic_array = new Array ( );

physic_array[0] = “co hoc”;

physic_array[1] = “nhiet hoc”;

physic_array[2] = “dien tu”;

trong đó “co hoc”, “nhiet hoc”, “dien tu”, …là các phần tử của mảng. Mảng có nhiều phần tử và bắt đầu bằng phần tử 0.

Chú ý:

• Bạn có thể tạo mảng bằng cách khác ngắn gọn hơn:
  • physic = new Array ( “co hoc”, “nhiet hoc”, “dien tu”);
• Mảng có 3 loại biến khác nhau: Number, String, Boolean.
  • Vd: my_array = new Array( );

my_array[0] = “physic”;

my_array[1] = 2;

my_array[2] = true;

• Xác định kiểu cho mảng: mảng có kiểu là mặc định là Array
  • var my_array:Array = new Array;

Một số phương pháp và đối tượng của mảng:

• Concat: Nối thêm phần tử vào mảng và trả về mảng mới.
• Join: Nối tất cả các phần tử của mảng vào một biến chuỗi
• Pop: Loại bỏ phần tử cuối cùng của mảng và trả về giá trị của phần tử này
• Push: Thêm một số phần tử vào cuối mảng đã có, trả về mảng với độ dài mới
• Reverse: Đảo ngược thứ tự các phần tử của mảng.
• Sort: Đảo lộn thứ tự phần tử bằng phương pháp sắp xếp lại
• Length: Trả về chiều dài của mảng được đo bằng số phần tử

Ví dụ: nối các mảng:

Mang1_array = new Array ( “cohoc”);

Mang2_array = new Array (“nhiethoc”);

Mang3_array = new Array (“dientu”);

Mang_array = Mang1_array.contac ( Mang1_array,Mang2_array);

Ta được Mang_array = [“cohoc,nhiethoc,dientu”]

Các vòng lặp

Khi chạy bảng tiến trình đồng nghĩa với việc flash đã tạo một vòng lặp, vòng lặp được chạy từ frame số 1 đến frame cuối của bảng tiến trình chính. gotoAnd Play() là một vòng lặp một số khung hình nhất định, song ở đây chúng ta sẽ xét cách lặp các hành động.

Vòng lặp while

Cú pháp:

while ( condition){

Thực hiện các việc này;

};

Trong đó: condition là điều kiện, nếu điều kiện là true thì thực hiện các lệnh trong dấu ngoặc mốc{}

Ví dụ: Mở flash mới và nhập vào bảng action dòng lệnh sau:

• Dòng đầu bạn tạo một biến mới có tên là myNumber và gán cho nó giá trị 0.
• Vòng lặp while kiểm tra xem biến myNumber có nhỏ hơn 10 hay không, nếu đúng thì thực hiện lệnh ở dòng 3, dòng 4.

• Kết quả của vòng lặp

  Dòng 3 sẽ xuất ra giá trị biến myNumber ở cửa sổ Output

• Dòng 4 tăng giá trị myNumber lên 1 đơn vị.
• Vòng lặp kết thúc khi myNumber = 10.

Vòng lặp for

Cú pháp:

for ( init; condition; next){

thực hiện các lệnh này;

}

Trong đó:         init: biến

condition: điều kiện

next: giá trị biến tiếp theo

Ví du:               for ( i; i < 10; i + +){

trace (i);

}

Câu lệnh trên cho kết quả như dòng lặp while.

Ví dụ về các vòng lặp

Bây giờ bạn hãy mở một flash mới và vẽ một quả bóng vào vùng stage, nhấn F8 để chuyển nó thành một đoạn phim, đặt tên phiên bản (instance name) là ball_mc. Bây giờ mở khung hình 1 của lớp action lên và nhập mã lệnh như sau.

var i:Number = 0;

while (i < 10) {

duplicateMovieClip (ball_mc, “ball”+i+ “_mc”, i);

i++;

}

Hàm duplicateMovieClip(target,newname= “”, depth);

Ý nghĩa: tạo ra một phiên bản mới của đoạn phim

Hàm có 3 đối số: target là tên phiên bản của đoạn phim cần nhân bản, newname là nơi xác định tên gọi của phiên bản mới, đối số depth thông báo cho flash biết cấp độ nào để đặt bản sao, mỗi đoạn phim chỉ có một cấp độ nên ta dùng biến đếm cho mỗi phiên bản của phim.

Kết quả cuối cùng của đoạn mã trên là tạo ra 10 bản sao của đoạn phim ball_mc có tên lần lượt là ball0_mc, ball1_mc,…ball9_mc.

Bây giờ ta bổ sung thêm đoan mã sau:

ball_mc.onEnterFrame = function( ){

//di chuyển theo vị tri chuột

this._x = _xmouse;

this._y = _ymouse;

};

Chỉ có đoạn phim ball_mc là di chuyển theo chuột, 10 đoạn phim còn lại vẫn nằm im bất động. Dĩ nhiên ta không phải viết lệnh riêng lẻ để kiểm soát từng đọan phim một mà sử dụng vòng lặp, bạn hãy bổ sung đoạn mã hoàn thành như sau:

ball_mc.onEnterFrame = function( ){

j = 0;

while (j<0){

//di chuyển theo vị tri chuột

this._x = _xmouse;

this._y = _ymouse;

j++;

}

};

var i:Number = 0;

var j:Number = 0;

while (i < 10) {

duplicateMovieClip (ball_mc, “ball”+i+ “_mc”, i);

i++;

}

Đoạn mã này cho phép bạn cập nhật vị trí của phiên bản ball_mc 10 lần thay vì mỗi lần một phiên bản khác nhau. Chúng ta xây dựng lại đoạn như sau:

ball_mc.onEnterFrame = function( ){

j = 0;

while (j<0){

//di chuyển theo vị tri chuột

_root[“ball”+j+”_mc”]._x = _xmouse;

_root[“ball”+j+”_mc”]._y = _ymouse;

j++;

}

};

Trong đó thành phần _root sẽ thông báo cho flash biết quan sát trong bản tiến trình chính, thành phần trong dấu [] thông báo cho flash biết đây là một hằng chuỗi, mà là một tham chiếu. Điều này hiểu _root như là một mảng mà các phần tử là các đoạn phim và dùng tên thay vì số chỉ mục.

Cho đến bây giờ bạn vẫn chưa nhìn thấy 10 phiên bản quả bóng, chúng sẽ hiện ra ngay thôi. Bạn đặt phần từ gốc của mình tại vị trí x: 300, y:200, ta tính hiệu khoảng cách từ vị trí chuột đến vị vị trí gốc.

ball_mc.onEnterFrame = function( ){

// tính khoảng cách từ tâm đến vị trí chuột

hieux = _xmouse – 300;

hieuy = _ymouse – 200 ;

j = 0;

while (j<10){

//di chuyển theo vị tri chuột

_root[“ball”+j+”_mc”]._x = 300 + (hieux  * j/10);

_root[“ball”+j+”_mc”]._y = 200 + (hieuy * j/10);

j++;

}

};

var i:Number = 0;

var j:Number = 0;

var hieux:Number = 0;

var hieuy: Number = 0;

while (i < 10) {

duplicateMovieClip (ball_mc, “ball”+i+ “_mc”, i);

i++;

}

Bạn chạy thử để thấy kết quả.

Chương 3:

Các mẫu ActionScript

Trong chương này chúng ta sẽ lần lượt làm quen với một số hàm, đoạn mã căn bản để ứng dụng vào việc thiết kế của bạn, dựa trên những gì bạn đã được biết ở 2 chương trước.

Mở tập tin flash mới, thiết lập các giá trị ban đầu:

Đây là yêu cầu chuẩn của CLB VL ảo, với độ rộng là 800 px và độ cao là 600 px, background color bạn có thể tùy chọn sao cho phù họp với thiết kế của mình. Frame rate là 18 khung hình trên giây vì tốc độ 12 hình trên giây đã lỗi thời, ở tốc độ 18 fpt thì flash chạy sẽ mịn hơn.

Tạo trường nhập và xuất văn bản:

Dùng công cụ Text Tool (T) để tạo trường nhập và xuất văn bản, trường nhập có thuộc tính là Input Text, trường xuất có thuộc tính là Dynamic Text.

Trường nhập văn bản

Trường xuất văn bản

Trong trường xuất văn bản bạn đặt tên biến là output_txt, mục Show border around text không nhất thiết bạn phải chọn vì đây là vùng làm việc của flash.

Tạo một nút nhấn đặt tên là enter_btn.

Tại khung hình 1 lớp action bạn nhập đoạn mã như sau:

Như vậy mỗi khi bạn nhập vào trường nhập thì giá trị đó sẽ được lưu vào biến input_txt, và mỗi khi bạn nhấn vào nút enter_btn thì giá trị đó được xuất ra ở khung output.

Chú ý: có một số tùy chọn để người dùng nhập vào, ví dụ bạn chọn vào mục Embed…để mở hộp thoại: bạn chọn Numberals [0..9] (11 glyphs) thì chỉ nhập được các ký số vào khung input mà thôi.

Button và key (Nút nhấn và bàn phím)

Nếu bạn là người sử dụng chương trình flash do người khác viết thì điều gì là bạn mong mõi nhất trong file phim ấy? Nếu là tôi thì câu trả lời sẽ là: tôi muốn tác động vào phim flash của bạn có thể là thông qua chuột và bàn phím. Thật là may mắn, flash cung cấp cho bạn những công cụ lập trình để làm được điều đó.

Button

Khi bạn tạo một button sẽ có 4 frame mặt định là Up, Over, Down, Hit ( điều này có lẽ bạn đã biết), vấn đề ở đây là khi bạn nhấn hoặc nhấn rồi thả ra một button thì flash sẽ thực hiện lệnh cho bạn như thế nào?

Có 2 cách để bạn lập trình cho một button hoạt động:

• Cách 1 là viết vào lớp action trong bảng tiến trình chính, khi đó cú pháp lệnh sẽ là:
  • Instance name.onPress = function(){

thuc hien cac lenh nay;

}

o       Trong đó instance name là tên button bạn muốn viết lệnh

• Cách 2 là bạn viết trực tiếp vào button, bạn chọn vào button muốn viết lệnh, mở bảng action và viết lệnh với cú pháp như sau:
  • on (release){

thực hiện các lệnh này;

}

o       trong ví dụ trên bạn đã viết lệnh vào lớp action, bạn chọn lại lớp action và xóa đoạn mã trên, chọn vào button enter_btn và mở bảng action viết lệnh như sau:

o   Bạn hãy kéo button enter ra khỏi vùng stage để dấu nó đi vì ta không cần nhấn vào nó.

o   Nhấn tổ hợp phím Ctrl + Enter chạy thử, bạn nhập vào khung input và nhấn phím Enter trên bàn phím thì chuỗi bạn vừa nhập sẽ xuất hiện ở khung output như khi bạn click vào nút enter vậy.

• Chú ý: onPress: lệnh sẽ được thực hiện khi nhấp chuột

onRelease: lệnh sẽ được thực hiện khi nhấp chuột rồi thả ra.

key

Ở chương trước bạn đã có dịp được biết về cách điều khiển quả bóng di chuyển thông qua 2 phím Up và Down trên bàn phím, ví dụ vừa rồi giúp bạn biết cách sử dụng phím enter để hiển thị văn bản ở trường xuất.

Qua các ví dụ trên bạn cần chú ý các lệnh về bàn phím chỉ được viết vào các button, điều này khá thú vị, bạn có thể tạo một button thật đơn giản chẳng hạn như một dấu chấm tròn thật nhỏ có màu trùng với màu nền để dấu chúng đi dễ dàng hoặc kéo chúng ra khỏi vùng stage để người dùng không nhìn thấy, viết các lệnh bàn phím cho chúng, bạn sẽ tạo cho người dùng cảm giác như họ đang nhập trực tiếp từ bàn phím lệnh vào flash vậy.

Một số cú pháp lệnh về bàn phím áp dụng cho button:

• Nếu là key bình thường thì bạn viết như sau:
  • on (keyPress “a”) {

thực hiện lệnh này;

}

o       on (keyPress “A”) {

thực hiện lệnh này;

}

• Nếu là các key chức năng như Enter, Up, Down…
  • on (keyPress “<enter>”) {

thực hiện lệnh này;

}

o       một số phím chức năng:

Một số cú pháp lệnh về bàn phím áp dụng cho MovieClip:

onClipEvent (enterFrame) {

if (Key.isDown(Key.getCode(“a”))) {

thực hiện lệnh này;

}

if (Key.isDown(Key.LEFT)) {

thực hiện lệnh này;

}

}

Di chuyển đối tượng

Người dùng cũng muốn tác động lên các đối tượng phim như nắm và kéo phim, các thanh trượt để thay đổi một thuộc tính nào đó.

Di chuyển theo chuột: thường được dùng trong các game tương tác hoặc khi bạn muốn dùng chúng để làm tăng sức hấp dẫn cho đoạn phim của bạn.

Hướng dẫn sau giúp bạn là một tâm ngắn và chúng sẽ thay đổi tọa độ theo đọa độ chuột như trong một số game bắn súng mà bạn vẫn thường thấy. Mở flash mới, chọn Insert / new Symbol hoặc Ctrl + F8 để tạo một đoạn phim mới. Dùng các công cụ vẽ hình tròn, đường thẳng để vẽ đoạn phim, trang trí và làm các hiệu ứng tùy thích.

Trở về bảng tiến trình chính, kéo một phiên bản của đoạn phim bạn vừa thiết kế ra vùng stage, đặt tên phiên bản cho nó là hongtam_mc, tại layer action bạn nhập đoạn mã sau:

Chạy thử chương trình bạn sẽ thấy đoạn phim bạn vừa làm sẽ di chuyển theo tọa độ chuột. Bây giờ bạn chỉ cần dấu chuột đi là được.Bạn bổ sung câu lệnh:

Mouse.hide(); phía sau dòng thứ 3 để dấu chuột di là xong.

drag

Đoạn mã sau sẽ hướng dẫn các bạn chỉ di chuyển đối tượng khi lick chuột vào đối tượng và kéo rê nó đi. Chọn vào phiên bản movie hoặc button, mở bảng điều khiển nhập đoạn mã sau:

1.         onClipEvent(mouseDown){

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

3.        this.startDrag();

4.        };

5.   }

6.    onClipEvent (mouseUp){

7.   if( this.hitTest(_root._xmouse,_root._ymouse)){

8.        this.stopDrag();

9.        };

10.  }

// Dòng 1. là mỗi khi xãy ra sự kiện nhấn chuột, dòng 2, câu lệnh if kiểm tra xem tọa độ x và y của chuột có nằm trên đối tượng cần drag hay không. Nếu đúng thì cho phép drag đối tượng. Tương tự như vậy ở dòng số 6 là sự kiện được tạo ra mỗi khi thả chuột, dòng số 7 không bắt buột phải có, song trong một số trường hợp ( có nhiều hơn 1 đối tượng được drag ) thì đoạn mã drag trên sẽ bị sai. Do đó, dòng số 7 giúp cho mã lệnh của bạn mạnh hơn, đúng trong mọi trường hợp.

Ví dụ: làm thanh trượt. Bạn tạo một button có tên instance name là thanhtruot_btn và một nút trượt có thuộc tính là Movie Clip và đặt tên Instance name là nuttruot_mc.

Button thanhtruot_btn

Movie  nuttruot_mc

Nhấp chọn vào button thanh trượt và mở bảng action viết đoạn mã sau:

on(press){

startDrag (“nuttruot_mc”,true,260,300,530,300);

}

on (release) {

stopDrag();

}

on (releaseOutside) {

stopDrag();

}

Bạn đã khá quen thuộc với các hàm trên rồi, ở đây các số 260 , 300, 530, 300 là khoảng cách của nuttruot_mc so với các cạnh left, top, right, bottom. Chú ý nếu nếu đối số left = right thì không thể drag đối tượng theo chiều ngang được, cùng như ta không thể drag theo chiều dọc nếu đối số top = bottom.

Lập trình chuyển động

Có thể nói chuyển động là đặc tính cố hữu và là thuộc tính cơ bản của các sự vật, trong vật lý sự chuyển động của các vật rất đa dạng, từ các chuyển động cơ học như chuyển động thẳng đều, chuyển động tròn, chuyển động cong,…đến những chuyền động phức tạp như chuyển động nhiệt của các phân tử, chuyển động của các hạt, các electron,…

Chuyển động đơn giản nhất là chuyển động thẳng, mà bạn đã có dịp làm quen với nó ở chương trước thông qua lệnh Create Motion Tween có sẵn trong flash. Bạn có thể tùy chọn nhanh dần đều hay chậm dần đều thông qua bảng Property:

Ở hộp Tween bạn chọn Motion để chỉ đây là một chuyển động, trong hộp Ease bạn  chọn từ 1 đến 100 nếu muốn chuyển động chậm dần, từ -1 đến -100 nếu muốn đó là chuyển động nhanh dần, chọn 0 là chuyển động thẳng đều. Trong hộp tùy chọn Rotation bạn chọn CW là thuộc tính đối tượng xoay theo chiều kim đồng hồ, CCW đối tượng xoay ngược chiều kim đồng hồ. Ngoài ra đối tượng còn có thể chuyền động theo lớp dẫn.

Đó là những chuyển động đơn giản dựa vào những thuộc tính có sẵn của flash, còn viết lệnh, lập trình cho một đối tượng chuyển động thì sẽ như thê nào?

Chắc hẵn bạn còn nhớ chuyển động theo phương ngang của một quả bóng?

onEnterftame = function(){

ball_mc._x += 10;

}

// mỗi lần qua frame mới thì tăng giá trị x của quả bóng lên 10 px.

Đây là chuyển động thẳng đều, nếu bạn muốn nhanh dần hay chậm dần thì sao? Vấn đề ở đây chỉ là thuật toán, ví dụ bạn thay dòng lệnh số 2 thành: ball_mc._x += 800-ball_mc._x;trong đó 800 là độ rộng của vùng làm việc. Bạn cũng có thể dùng thuộc tính rotation để lập trình quả bóng xoay.

Chuyển động theo quỹ đạo: ví dụ một quả bóng khi được ném lên theo phương xiên thì quỹ đạo chuyển động của nó là một parabol, dựa vào sự phụ thuộc tuyến tính giữa hai đại lượng x và y trong phương trình quỹ đạo bạn có thể lập trình để một đối tượng chuyển động theo quỹ đạo ấy. Ta có mối liên hệ :

Y = f(x), bạn nhập đoạn mã sau:

// xác định vị trí ban đầu của quả bóng

onClipEvent (load) { this. _x = vị trí đầu của x ; this._y = vị trí đầu của y ; speed = tốc độ ; }

// x chuyển động theo phương ngang chậm dần, y chuyển động theo phương trình y = f(x). onClipEvent (enterFrame) { this._x += (vị trí cuối của x – this._x)/speed ; this._y = f (ball_mc._x); }

Chú ý: bạn viết đoạn mã trên trực tiếp vào doạn phim, còn nếu bạn viết vào layer action trên bảng tiến trình chính thì câu lệnh đầu được sửa lại là:

ball_mc.onEnterFrame = function () {

Ví dụ: viết lệnh chuyển động cho một quả bóng ball_mc có phương trình quỹ đạo là y = :

onClipEvent (load) { this. _x = 0 ; this._y = 0 ; } onClipEvent (enterFrame) { this._x += 2 ; this._y = Math.pow(this._x, 2); }

Chuyển động hổn độn của các phân tử:

Bạn thực hiện như sau: chọn Insert / new symbol hoặc Ctrl + F8 để tạo một Movie Clip, bạn vẽ vào vùng stage một phân tử khí nho nhỏ. Bạn đừng kéo phân tử này ra vùng stage chính vội, chúng ta sẽ học cách làm việc với Library. Trong bảng điều khiển library bạn nhấp phải lên đoạn phim vừa tạo chọn Linkage…Hộp thoại Linkage Properties xuất hiện, bạn đánh dấu chọn vào mục Export for ActionScript, trong phần Identifier bạn đặt tên là ball_mc ( hay một cái tên nào mà bạn thích). Xin chú thích thêm là khi làm việc trực tiếp với các library bạn không thể dùng tên trong library để gọi chúng ra vì tên library chỉ để cho người dùng phân biệt nó với các mục khác.

Trở lại layer action trong bảng tiến trình chính bạn viết mã lệnh như sau:

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

myball = _root.attachMovie(“ball_mc”,”ball_mc”+i, i);

myball.onEnterFrame = function(){

this._x = random(280);

this._y = random(180);

};

}

Trong đó chức năng attachMovie giúp bạn đặt một phiên bản của đoạn phim vào vùng thể hiện. Bạn dùng vòng lặp for để kéo ra cùng lúc nhiều phiên bản của đoạn phim. Hàm random(number) trả về cho bạn một số nguyên trong khoảng 0 đến đối số number.

Làm đồng hồ với Flash.

Đồng hồ số:

Dùng công cụ Text tool (T) để tạo một trường xuất có thuộc tính là Dynamic Text, đặt tên phiên bản Instance name là txt, tên biến là time trong bảng Property.

Mở layer action và nhập đoạn mã sau:

function getTime(){

var today:Date = new Date;

var gio:String = String(today.getHours());

var phut:String = String(today.getMinutes());

var giay:String = String(today.getSeconds());

if ( gio.length = = 1 ){ gio = “0” + gio};

if ( phut.length = = 1 ) {phut = “0” + phut}

if ( giay.length = = 1 ) {giay = “0” + giay};

time = ( gio+”:”+phut+”:”+giay)}

setInterval (getTime,100)

Công việc còn lại của bạn là trang trí cho cái đồng hồ của mình trông thật ấn tượng và sinh động.

Đồng hồ kim:

Tạo 3 kim đồng hồ có độ dài khác nhau có thuộc tính là movieclip (chú ý tâm của chúng nằm tại một đầu của kim), đặt tên Instance name của chúng là kimgio, kimphut, kimgiay. Đặt chúng trùng nhau trong vùng stage, sau đó nhập đoạn code sau:

var today:Date = new Date(); function getTime() { var hours = today.getHours(); var minute = today.getMinutes(); var second = today.getSeconds(); var sec = second*6; var min = minute*6; var hour = hours*30+minute/2; _root.kimgio._rotation = hour; _root.kimphut._rotation = min; _root.kimgiay._rotation = sec; delete today; today = new Date(); } setInterval(getTime, 10);

Công việc sau cùng vẫn là tìm mặt đồng hồ đặt vào chúng là xong.

Tài liệu tham khảo

Lập trình ActionScript cho flash – Nguyễn Trường Sinh – Nhà xuất bản lao động xã hội.

Macromedia FLASHMX – Nguyễn Trường Sinh – Nhà xuất bản lao động xã hội.

Website dayvahoc.net

http://www.3c.com.vn

Chia sẻ:

• Facebook
• X

Thích Đang tải...