Tài liệu Macromedia Flash - Tạo hiệu ứng menu doc

Macromedia Flash - Tạo hiệu ứng menu
Ngu
ồ
n:quantrimang.com
Bài này sẽ hướng dẫn bạn cách tạo một menu flash với hiệu ứng khi di
chuyển chuột vào. Để tạo bài này, bạn sẽ phải sử dụng mã Action Script.
Ngoài ra, việc thiết kế menu lại rất đơn giản.
Bước 1

Tạo một file flash mới. Vào Modify > Document (Ctrl + J). Đặt chiều rộng của
file là 380 px và chiều cao là 100 px. Chọn màu nền là #f8f8f2 và thiết lập tốc độ
Frame rate là 24 fps
. Hoàn tất toàn bộ kích OK.

Bước 2

Chọn công cụ Rectangle Tool (R). Trong phần Colors của panel công cụ, khóa
màu viền bằng cách kích vào Stroke color (có biểu tượng bút chì nhỏ) sau đó
chọn hình ô vuông trắng có đường chéo đỏ. Màu nền đặt là #393939 và vẽ một
hình vuông có kích thước khoảng 70 x 70px và đặt nó vào vị trí như hình dưới.
Bước
3

Trong
k
nhấn v
à
hình.
Bước
4

Vẫn ch
ọ
nó thà
n
Bước
5

Chọn ti
ế

Bước
6

Ô vuôn

Bước
7

Và ô v
u
3

k
hi hình c
h
à
giữ phí
m
4

ọ
n công c
ụ
n
h màu #F
F
5

ế
p ô vuôn
g
6

g thứ tư c
ó
7

u
ông cuối
c
h
ữ nhật vẫ
n
m
Shift đồn
g
ụ
Selecti
o
F

5400
g
thứ 3 và
ó
màu #F
F
c
ùng có m
n
đang đ
ư
g
thời kéo
o
n Tool (V
đặt màu
n
F
A800.
àu #94C
A
ư
ợc chọn, l
và nhả c
h
), chọn ô
v
n
ó là #19
A

A
1A. Hoàn
ấy công c
ụ
h
uột để nh
v
uông thứ
A
3CB.
tất ta sẽ
c

ụ
Selecti
o
ân hình v
u

hai và tha

c
ó hình nh
ư
o
n Tool (
V
u
ông lên n
y đổi màu

ư
sau
V
),
hiều
của

Bước 8

Lấy công cụ Text Tool (A) và vào phần Properties Panel (Ctrl + F3) ở phía
dưới. Chọn các tùy chọn tương ứng như sau

Sau đó tạo một loạt chữ có nội dung tương ứng với từng menu

Bước 9

Dùng công cụ Selection Tool (V) và chọn ô vuông đầu tiên cùng với text (trong
ví dụ này là “HOME PAGE”). Nhấn phím F8 (Convert to Symbol) để chuyển hình
chữ nhật và text sang dạng Movie Clip Symol.

Bước 10

Vẫn chọn Movie Clip v
ừa tạo, vào phần Properties Panel (Ctrl + F3) phía bên
dưới. Ở phía phần bên trái, bạn sẽ tìm thấy một trường nhập Instance name. Đặt
tên lại cho movie là homepage_mc

Bước 11

Chọn công cụ Selection Tool (V) và kích đúp vào movie clip trên màn hình làm

việc.

Bước 12

Vẫn dùng công cụ Selection Tool (V), chỉ chọn text và nhấn Ctrl + X (Cut). Sau
đó tạo một layer mới và đặt tên là text. Chọn layer text và nhấn phím Ctrl + Shift
+ V (Paste in place).

Bước 13

Trở lại layer 1, kích đúp vào nó bằng công cụ Selection Tool (V) và đổi tên nó
thành rectangle.

Bước 14

Trong khi vẫn chọn layer rectangle, nhấn phím F8 lần nữa (Convert to Symbol)
để chuyển nó sang dạng Movie Clip Symbol.

B
ước 15

Kích vào frame 15 của layer rectangle và nhấn F6

Bước 16

Vẫn chọn frame 15, lấy công cụ Free Transform Tool (Q), nhấn và giữ phím Alt
rồi kéo hình chữ nhật xuống như hình sau:
Bước
1

Kích c
h
timelin
e
Bước
1

Chọn l
a
Clip Sy
m
Bước
1

Kích v
à

Bước
2

Sử dụn
tâm củ
a
1
7
h
uột phải
v
e
và chọn

C
1
8
a
yer text v
à
m
bol.
1
9
à
o frame 1
5
2
0
g phím m
ũ
a
hình ch
ữ
v
ào bất kỳ
v
C
reate M
o
à
nhấn F8
5
của lay

e
ũ
i tên hoặ
c
ữ
nhật như
v
ị trí nào t
o
tion Twe
e
(Convert
t
e
r text và n
c
chuột để
hình sau
rong vùng
e
n từ me
n
t
o Symbol
hấn F6
kéo text
x

màu xám
n

u xuất hi
ệ

) để chuy
ể
x
uống dư
ớ
giữa hai
k
ệ
n.
ể
n text sa
n

ớ
i một chú
t
k
eyframe
t
n
g dạng M
t
để vào tr
u
tr
ên
ovie

u
ng

Bước 21

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

Bước 22

Trở lại scene chính (Scene 1)

Bước 23

Tạo một layer mới và đặt tên là Invisible Button. Sau đó tạo một nút vô hình lên
phía trên hình chữ nhật và text.

Bước 24

Dùng công cụ Selection Tool (V) kích một lần vào nút vô hình đã tạo để chọn
nó, vào phần Action Script panel (F9). Sau đó đưa đoạn code sau vào:
on (rollOver) {
_root.mouse_over_homepage_mc = true;
}
on (rollOut) {
_root.mouse_over_homepage_mc = fstartlse;
}
on (release) {
getURL("
}

Bước 25

Tạo một layer mới phía trên layer invisible button và đặt tên là action script.

Bước 26

Kích vào frame đầu tiên của layer action script, vào phần Action Script Panel và
đưa vào đoạn mã sau:
_
root.homepage
_
mc.onEnterFrame = function() {
if (mouse_over_homepage_mc) {
_
root.homepage
_
mc.nextFrame();
} else {
_
root.homepage
_
mc.prevFrame();
}
};
Vậy là chúng ta đã hoàn thiện một nút trong menu, công việc tiếp theo của các
bạn là thực hiện tương tự như vậy trên các trang tiếp theo. Chú ý trong đoạn mã
Action Script có một địa chỉ URL cần phải thay đổi tương ứng trên từng menu
khác nhau
