Online Media

Trong bài tập này, tôi sẽ hướng dẫn bạn cách tạo mask kéo theo chuột bằng đoạn mã action script. Cách tạo rất đơn giản, hãy thực hiện tuần tự theo các bước trong bài này!

Kéo hình tròn dưới đây bằng chuột!

Bước 1

Đầu tiên, hãy chọn bức ảnh làm nền cho bài tập này.

Bước 2

Tạo một file flash mới. Nhấn phím Ctrl + J (Document Properties) và thiết lập kích thước rộng (Width) và cao (Hight) của file theo độ rộng của ảnh. Chọn bất kỳ màu nền nào và thiết lập tốc độ Frame rate của file là 32, sau đó kích OK.

Bước 3

Chọn file, vào Import > Import to stage (Phím tắt: Ctrl + R) và import vào bức ảnh mà bạn đã chọn.

Bước 4

Trong khi bức ảnh vẫn được chọn, vào phần Align Panel (Ctrl + K) và thực hiện theo các bước sau:

1. Đảm bảo rằng nút Align/Distribute to Stage được chọn,
2. Kích vào nút Align horizontal center
3. Kích vào nút Align vertical center

Bước 5

Trong khi bức ảnh vẫn được chọn, nhấn phím F8 (Convert to Symbol) để chuyển ảnh sang dạng Movie Clip.

Bước 6

Khi Movie Clip mới vẫn được chọn, vào phần Properties Panel bên dưới. Trên phần bên trái trong trường Instance name bạn nhập tên của Movie Clip vào. Trong ví dụ này sẽ là photo.

Bước 7

Tạo một layer mới và đặt tên là mask. Sử dụng công cụ Oval Tool (O) để vẽ một hình tròn như hình bên dưới (giữ Shift trong quá trình vẽ).

Trong khi hình tròn vẫn được chọn, nhấn phím F8 (Convert to Symbol) để chuyển hình tròn này sang dạng Movie Clip.

Hình 8

Khi Movie Clip hình tròn mới tạo vẫn được chọn, vào Properties Panel ở phía dưới. Trong phần bên trái bạn nhập tên Movie Clip vào trường Instance name, trong ví dụ này nhập là mask

Bước 9

Tạo một layer mới trên layer mask và đặt tên là action.

Bước 10

Chọn frame đầu tiên của layer action, vào Action Script (F9) và đưa vào đoạn mã sau:

stop();
photo.setMask(mask);
mask.onPress = function() { 
    startDrag(this); 
    }
mask.onRelease = function() {
    stopDrag();
    }

Kiểm tra lại sản phẩm vừa tạo (Ctrl + Enter)