Macromedia Flash - Tạo menu đơn giản

Trong bài này, tôi sẽ giải thích cách tạo một menu flash đơn giản trong flash 8 bằng cách sử dụng Action Script.

Bước 1

Mở một file Flash mới. Chọn Modify > Document (Ctrl + J). Thiết lập chiều rộng và cao cho file của bạn: 200 x 200px. Chọn màu nền là màu trắng, Frame rate là 26fps > kích OK.

Dùng công cụ Selection Tool (V), kích đúp vào tên layer 1 để đổi tên thành nó trong menu.

Bước 2

Chọn công cụ Line Tool (N), trong phần Properties Panel (Ctrl + F3) thiết lập các thuộc tính sau:

- Chọn màu #DCDCDC cho Stroke color

- Chọn loại đường kẻ là Solid với chiều dầy là 1

- Tích chọn Stroke hinting để bỏ sách các vết mờ ở góc khi vẽ

Sau đó, vẽ 4 dòng kẻ như hình dưới

Bước 3

Tạo nút đầu tiên cho menu bằng công cụ Text tool (T). Trong phần Properties Panel, chọn theo các lựa chọn sau:

- Chọn trường Static Text

- Chọn kiểu fone Trebuchet MS

- Chọn cỡ chữ 16

- Màu chữ là #9F9F9F

Sau đó nhập vào tên của từng nút

Bước 4

Sử dụng công cụ Line Tool (N) để vẽ “mũi tên” ở bên trái text menu như hình dưới.

Bước 5

Tạo các nút khác trong menu theo cách tương tự như tạo nút đầu tiên

Bước 6

Chọn button đầu tiên (trong ví dụ là “About Company”) và nhấn F8 (hoặc vào Modify > Convert to Symbol) để chuyển đổi nút đầu tiên sang dạng Movie Clip.

Bước 7

Vào Properties Panel, tại phần <Instance name> nhập vào button1 như hình dưới

Bước 8

Kích đúp vào Movie Clip vừa tạo với công cụ Selection Tool (V). Bạn sẽ vào chỉnh sửa trong Movie Clip.

Bước 9

Chỉ chọn phần “mũi tên”, nhấn Ctrl + X (Cut), tạo một layer mới, chọn nó và nhấn Ctrl + Shift + V (Paste in Place)

Bước 10

Trở lại layer 1 (layer text), chọn nó và nhấn tiếp F8 (Convert to Symbol) để chuyển đổi nó sang Graphic.

Bước 11

Chọn frame 15 và nhấn phím F6. Sau đó, kéo Graphic vừa tạo sang bên phải một chút, bạn nhớ giữ phím Shift trong quá trình kéo để không bị lệch.

Bước 12

Chọn công cụ Selection Tool (V), click một lần lên Graphic để chọn nó, mở Properties Panel (Ctrl + F3). Tại phần bên phải, bạn sẽ thấy mục Color. Chọn Tint với màu là #4183BF cho mục Color đó (như hình dưới).

Bước 13

Kích chuột phải vào bất cứ vị trí nào trong vùng màu tím nhạt giữa hai keyframe và chọn Create Motion Tween từ menu xuất hiện

Bước 14

Khóa layer 1, chọn layer 2, kích vào frame 15 và nhấn phím F6. Sau đó kéo “mũi tên” về phía phải một chút nữa (nhớ giữ phím Shift khi kéo)

Bước 15

Kích chuột phải vào bất kỳ vị trí nào trong vùng màu tím nhạt giữa hai keyframe, chọn Create Motion Tween từ menu xuất hiện.

Bước 16

Trở lại scene chính (Scene 1), tạo một layer mới mở trên layer menu và đặt tên là IB1 (Invisibale Button 1). Sau đó, tạo Invisible Button lên trên nút đầu tiên. Xem hình dưới.

Bước 17

Chọn Invisible Button, nhấn phím F9 hoặc vào Window > Actions để mở Actions Panel. Sau đó đưa đoạn code ActionScript sau vào Actions panel:

on (rollOver) {
_root.mouse_over_button1 = true;
}
on (rollOut) {
_root.mouse_over_button1 = fstartlse;
}

Bước 18

Tạo một layer mới với tên là A.S (Action Script). Chọn frame đầu tiên và đưa vào đoạn script sau:

_root.button1.onEnterFrame = function() {
if (mouse_over_button1) {
_root.button1.nextFrame();
} else {
_root.button1.prevFrame();
}
};

Vậy là đã xong.