Cá bơi theo chuột trong flash AS2 ~ Flash

Bình thườngTuyệt vời

Chào các bạn lâu lắm rồi mình mới lại có thời gian để viết tut, với bài tut này không chỉ các bạn tạo cho mình con cá di chuyển mà có thể tạo thoải mái các con hay các vật theo óc sáng tạo của bạn.

Từ tiêu đề bài là làm cá, nhưng mình lại làm khác đi để các bạn có thể hình dung ra sự linh động của nó trong ứng dụng nhé. Mình sẽ làm hình logo aloflash di chuyển theo chuột cho nó mấu.

Chúng ta bắt đầu nhỉ.

Bước 1:

Tạo 1 file flash mới Ctrl + N, chọn loại ActionScript 2.0 nhé. Bạn có thể nhấn Ctrl + J để mở bảng Document Setting tùy chỉnh về chiều dài chiều rộng hay tốc độ frame cho file bạn làm.

Bước 2:

Chọn 1 hình, có thể là file vector hoặc ảnh PNG (Ảnh hình gì, con gì, vật gì là tùy theo ý tưởng của bạn), sau đó bạn kéo vào flash nếu là vector hoặc Import vào nếu là ảnh, để Import bạn vào File > Import > Import to Stage... (Ctrl +R). Ta có kết quả, như hình dưới là mình đã Copy file vector ở bên Illustrator rồi Pase vao flash.

Bước 3:

Giờ bạn sử dụng công cụ Selection Tool (V) click vào hình bạn mới import vào nhấn Ctrl + C để copy rồi Ctrl + V 2 lần để copy nó thêm 2 hình nữa. Hoặc clic chuột giữ phím Alt rồi kéo hình để nhân ra. Ta sẽ có 3 hình logo:

Bước 4:

Click vào từng hình một nhấn phím F8 để Convert nó thành dạng MovieClip, trong phần mình khoanh đỏ ở hình dưới bạn đánh dấu vào 2 ô Export for ActionScript và Export to Frame 1, và đặt tên ở Identifier là: mot

Làm tương tự như vậy với hình thứ 2, nhấn phím F8 để Convert nó thành dạng MovieClip, và đặt tên ở Identifier là: hai

Làm tương tự như vậy với hình thứ 3, nhấn phím F8 để Convert nó thành dạng MovieClip, và đặt tên ở Identifier là: ba

* Vậy là khi bạn mở thư viện Libraly bạn sẽ thấy ta có 3 Symbol và đã được Export tương ứng với 3 tên: một, hai và ba (Đây là ta chỉ để kiểm tra xem đã làm đủ chưa, bạn có thể bỏ qua việc mở Libraly).

Bước 5:

(Đây là bước chúng ta sẽ sắp xếp sao cho khi chạy nó sẽ nuột nà, các bạn nào muốn sửa lại tâm MovieClip hình của bạn, hoặc đổi đối tượng có thể làm lại từ bước này nhé.)

Sử dụng công cụ Slection Tool (V), nhấn Ctrl + để phóng to file flash lên, click chọn các Movie Clip bạn vừa tạo, kéo và xắp xếp chúng theo thứ tự từ trái qua phải

Giờ bạn sử dụng công cụ Free Transform Tool (Q) để quay hình cho hợp lý. (Cái logo của mình lấy ý tưởng từ con bọ rùa nên mình sẽ quay đầu nó sang bên trái, bên trái là bên sẽ chạy về chuột).

Tiếp tục với các hình còn lại và mình sẽ sắp xếp cho nó nhỏ dần:

Giờ đã OK hết thì bạn nhấn Ctrl + A chọn tất cả 3 MovieClip đó rồi nhấn phím Delete để xóa chúng đi.

Bước 6:

Mở bảng Libraly bằng cách vào: Window > Libraly (Ctrl + L), Click vào từng Symbol, sử dụng công cụ Free Transform Tool (Q) để phân biệt giữa 2 tâm, bạn phóng to hình lên, để ý 2 vùng mình khoanh đỏ, cái tâm ngoài hình tròn chính là tâm mà ActionScript sẽ hiểu nó là tâm của đối tượng, do vậy ta sẽ kéo sao cho cái tâm hình logo aloflash vừa khớp vào cái tâm tròn ở ngoài. Như hình dưới:

Làm tương tự với 2 Symbol logo còn lại.

OK như vậy là chúng ta đã hoàn thành bước thiết kế cho nó, giờ chúng ta sẽ chuyển sang bước viết code cho nó.

Bước 7:

lần lượt click vào frame thứ 2 và thứ 3 trên layer nhấn phím F6 để tạo thêm 2 keyframe như hình dưới:

Click vào Frame thứ nhấn nhấn F9 để mở bảng ActionScript bạn chèn vào đoạn code sau:

setProperty("", _quality, "MEDIUM");
N = 20;
R = 12;
C = 2;
A = 2;
var x = new Array();
var y = new Array();
for (i = 0; i < N; i++)
{
x[i] = 0;
y[i] = 0;
} // end of for
for (i = 1; i < N; i++)
{
if (i == 1)
{
attachMovie("mot", "Pieza" + i, N + 1 - i);
}
else if (i == 4 || i == 14)
{
attachMovie("hai", "Pieza" + i, N + 1 - i);
}
else
{
attachMovie("ba", "Pieza" + i, N + 1 - i);
} // end else if
this["Pieza" + i]._x = 142 + x[i - 1];
this["Pieza" + i]._y = 142 + y[i - 1];
this["Pieza" + i]._xscale = 102 + A * (1 - i);
this["Pieza" + i]._yscale = 102 + A * (1 - i);
this["Pieza" + i]._alpha = 100 - 100 / N * i;
} // end of for

Nhấn F9 để tắt bảng ActionScript, rồi lại Click vào frame thứ 2, nhấn F9 mở bảng ActionScript và chèn vào đoạn code:

x[0] = x[0] + (_xmouse - x[0] - 142) / R;
y[0] = y[0] + (_ymouse - y[0] - 142) / R;
for (i = 1; i < N; i++)
{
x[i] = x[i] + (x[i - 1] - x[i]) / C;
y[i] = y[i] + (y[i - 1] - y[i]) / C;
} // end of for
for (i = 1; i < N; i++)
{
this["Pieza" + i]._x = 142 + (x[i - 1] + x[i]) / 2;
this["Pieza" + i]._y = 142 + (y[i - 1] + y[i]) / 2;
this["Pieza" + i]._rotation = 5.729578E+001 * Math.atan2(y[i] - y[i - 1], x[i] - x[i - 1]);
} // end of for

Tương tự như vậy bạn chèn đoạn code này trên frame thứ 3:

gotoAndPlay(2);

OK, vậy là ta đã hoàn thành bài tập này. Giờ bạn thử nhấn Ctrl + Enter xem kết quả nhé. Nếu muốn bạn có thể quay lại bước 5 để chỉnh, hoặc chỉnh tâm lệch đi ở bước 6 để tạo chuyển động xoay.

Đây là demo nếu làm theo bài tập này:

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

aloflash.com

Download