AloFlash ! Cộng đồng flash Việt Nam



You are here: Tutorials  ActionScript 3.0 Đẩy bóng đơn giản bằng đoạn AS đơn giản

Đẩy bóng đơn giản bằng đoạn AS đơn giản

Email In PDF.
Xem kết quả: / 21
Bình thườngTuyệt vời 

Xin hướng dẫn các bạn làm 1 bài tập đơn giản, các bạn có thể ứng dụng làm game hoặc có thể nghĩ ra ý tưởng đuổi 1 con cá vàng. :D

Bước 1:

Tạo 1 tài liệu flash mới Ctrl + N. Nhớ là chọn loại ActionScript 3.0 nhé. Để kicks thước tùy theo ý bạn. Mình để là 450x320 và tốc độ framerate là 30fps

Bước 2:

Vẽ nền cho file flash của bạn. Sử dụng công cụ Rectangle Tool (R) vẽ 1 ô hình chữ nhật kích thước 450x320 rồi đổ màu cho nó như sau:

Convert nó thành dạng MovieClip bằng cách nhấn F8 chọn loại Movie Clip và đặt tên cho nó là bg. Như hình dưới.

Tại phần 3D Position And View bạn nhận vào ô tọa độ XY tương ứng là 300 và 175 như hình.

Chọn công cụ Selection Tool (V) nhấp đúp vào Movie Clip bg bạn nhập vào ô tọa độ XY tương ứng -300 và -175. như hình:

Vậy là ta đã xong bước tạo Background. bạn khóa layer này lại nhé để đỡ đụng chạm.

Bước 3:

Ta sẽ tiến hành tạo trái bóng cho flash này:

Tạo 1 layer mới. Sử dụng công cụ Oval Tool (O). vẽ 1 hình tròn nhỏ nhỏ thôi với kích thước này mình lấy quả bóng khoảng 50x50.

Ta tiến hành đổ màu cho nó giống quả bóng bằng cách chọn chọn bảng công cụ Swatches vào Windows > Swatches (Ctrl + F9). mình họn màu đỏ, còn các bạn chọn màu nào tùy ý hoặc có thể sáng tạo thêm.

Convert nó thành dạng Movie Clip bằng cách nhấn F8 chọn kiểu type là Movie Clip và chọn OK. Sau đó mở thư viện Library ra (window > Library hoặc Ctrl +L). Chuột phải vào movie clip quả bóng vừa tạo chọn Properties...

Nó sẽ mở ra 1 bảng: Bạn hãy chú ý những vùng mình đã khoanh đỏ, đánh dấu kiểm vào ô Export For ActionScript và đặt tên Class là: ball_mc rồi nhấn OK.  

Quay lại nơi hiển thị flash xóa movie quả bóng này đi. Lại trở lại Library nháy đúp 2 phát vào Movie Clip quả bóng sau đó bạn zoom to quả bóng lên bằng cách nhấn Ctrl + . Mình sẽ hướng dẫn các bạn tỉ mỉ chỗ này vì đây là phần quan trọng để đoạn AS sẽ hiểu tâm quả bóng ở đâu. nếu bạn bỏ qua bước này thì sau khi xong nhưng điểm tiếp xúc sẽ bị lệch.

Bạn hãy chú ý điểm mình đánh dấu vòng đỏ đây chính là tâm của Movie Clip mà AS sẽ chọn. 

Sử dụng công cụ Free Transform Tool (Q) bạn kéo hình quả bóng sao cho cái tâm mình đánh dấu ở hình trên trùng với cái tâm tròn trắng mà khi bật Free Transform Tool nó sẽ hiển thị. Và ta sẽ được như hình:

Ok. Như vậy là chúng ta đã xong công đoạn quả bóng. 

Bước 4:

Làm mũi tên hoặc gậy đẩy tùy theo ý tưởng của bạn.

Mình thì làm mũi tên, bạn có thể làm theo mình, Sử dụng công cụ Pen Tool (P), vẽ hình mũi tên các bạn hãy giữ phím Shift để vẽ nó sẽ thuận tiện hơn.

Sau đó bạn chọn công cụ Paint Bucket Tool (K) để đổ màu cho nó. Bảng màu trong Swatches nhé.

Giờ thì các bạn sẽ làm tương tự như bước 3 phần tạo quả bóng chỉ lưu ý 2 điểm là tên bạn đặt cho quả bóng là ball_mc thì bạn đặt cho mũi tên là arrow_mc và tâm mũi tên chính là đỉnh của mũi tên.

Ok vậy là xong. 

Bước 5:

Giờ ta tiến hành viết ActioScript cho flash.

Tạo mới layer mới. Click vào frame đầu tiên bạn nhấn F9 chèn vào đó đoạn code sau:

 

var top:Number=0;
var right:Number=stage.stageWidth;
var bottom:Number=stage.stageHeight;
var left:Number=0;
 
var vx:Number=3;
var vy:Number=3;
var friction:Number=0.98;
 
var ball:MovieClip;
ball = new ball_mc();
addChild(ball);
 
ball.x=325;
ball.y=150;
 
var pointer:MovieClip = new arrow_mc();
addChild(pointer);
pointer.x = mouseX;
pointer.y = mouseY;
Mouse.hide();
 
addEventListener(Event.ENTER_FRAME, mover);
 
function mover(e:Event):void {
var dx:Number;
var dy:Number;
var ar:Number
 
pointer.x = mouseX;
pointer.y = mouseY;
 
dx = mouseX - ball.x;
dy = mouseY - ball.y;
ar = Math.atan2(dy,dx);
var a:Number = ar * 180 / Math.PI;
pointer.rotation = a;
 
vx*=friction;
vy*=friction;
 
ball.x-=vx;
ball.y-=vy;
 
if(ball.hitTestPoint(pointer.x, pointer.y,true)){
vx=Math.cos(ar)*10;
vy=Math.sin(ar)*10;
}
 
if (ball.x<left+ball.width/2) {
ball.x=left+ball.width/2;
vx*=-1;
} else if (ball.x > right - ball.width / 2) {
ball.x=right-ball.width/2;
vx*=-1;
}
if (ball.y<top+ball.height/2) {
ball.y=top+ball.height/2;
vy*=-1;
} else if (ball.y > bottom - ball.height / 2) {
ball.y=bottom-ball.height/2;
vy*=-1;
}
}

OK. Quá trình làm bài flash này đã hoàn tất. Qua bài học này chúng ta đã rút ra được 1 vài điểm đáng chú ý đó là tạo tâm điểm cho đoạn movie...

Chúc các bạn thành công và vận dụng tốt bài học này

aloflash.com

Download

Bình luận (4)Add Comment
0
...
được viết bởi huy1878, Tháng mười hai 26, 2010
AS 3 khác AS2 quá nhỉ, nhìn khó hiểu quá
0
...
được viết bởi ut, Tháng hai 19, 2011
huynh ơi .. huynh biết học flash ở đâu ko
0
...
được viết bởi chanh, Tháng tám 23, 2011
Huynh ơi đẩy nhiều trái bóng được ko huynh...!
0
...
được viết bởi Nghĩa, Tháng ba 17, 2014
Huynh ơi sao đệ làm y đúng các bước mà tâm mũi tên nó vẫn lệch sang trái là sao huynh ?

Viết bình luận
nhỏ hơn | lớn hơn

busy