Cá bơi theo chuột

Tue Dec 12, 2017 11:07 pm

Dựa theo bài hướng dẫn trên http://aloflash.com/thuc-hanh-flash/actionscript-10-20/543-ca-boi-theo-chuot-trong-flash-as2.html

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. Ở đây mình chọn 850 px x 570 px.

[You must be registered and logged in to see this image.]

Bước 2: Bạn có thể thêm hình nền hoặc không tùy thích, ở đây mình có thêm hình nền.

[You must be registered and logged in to see this image.]

Bước 3: Mình thêm hình cá Nemo vào, để Import bạn vào File > Import > Import to Stage... (Ctrl +R).

[You must be registered and logged in to see this image.]

Bước 4: 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.

Bước 5: 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

[You must be registered and logged in to see this image.]

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: mot, 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).

[You must be registered and logged in to see this image.]

Bước 6: (Đâ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ý.

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 7: 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, 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 vừa khớp vào cái tâm tròn ở ngoà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 8: 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:

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

Code:: 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:

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:

Code:: 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.

Link cho bạn nào cần: https://drive.google.com/drive/folders/1DvcgfIzWE1_WVG4KmzdnTqY2jjILT96r?usp=sharing