Tạo mask nâng cao với action

Tạo mask nâng cao với action

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)