Danh mục

Macromedia Flash - Cách tạo hiệu ứng menu

Số trang: 7      Loại file: pdf      Dung lượng: 224.49 KB      Lượt xem: 8      Lượt tải: 0    
Hoai.2512

Hỗ trợ phí lưu trữ khi tải xuống: 3,000 VND Tải xuống file đầy đủ (7 trang) 0
Xem trước 2 trang đầu tiên của tài liệu này:

Thông tin tài liệu:

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.
Nội dung trích xuất từ tài liệu:
Macromedia Flash - Cách tạo hiệu ứng menuMacromedia Flash - Tạo hiệu ứng menuNguồn:quantrimang.comBài này sẽ hướng dẫn bạn cách tạo một menu flash với hiệu ứng khi dichuyể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 1Tạo một file flash mới. Vào Modify > Document (Ctrl + J). Đặt chiều rộng củafile 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 2Chọn công cụ Rectangle Tool (R). Trong phần Colors của panel công cụ, khóamà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ộthì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 3Trong khi hình chữ nhật vẫn đang được chọn, lấy công cụ Selection Tool (V),nhấn và giữ phím Shift đồng thời kéo và nhả chuột để nhân hình vuông lên nhiềuhình.Bước 4Vẫn chọn công cụ Selection Tool (V), chọn ô vuông thứ hai và thay đổi màu củanó thành màu #FF5400Bước 5Chọn tiếp ô vuông thứ 3 và đặt màu nó là #19A3CB.Bước 6Ô vuông thứ tư có màu #FFA800.Bước 7Và ô vuông cuối cùng có màu #94CA1A. Hoàn tất ta sẽ có hình như sauBước 8Lấy công cụ Text Tool (A) và vào phần Properties Panel (Ctrl + F3) ở phíadưới. Chọn các tùy chọn tương ứng như sauSau đó tạo một loạt chữ có nội dung tương ứng với từng menuBước 9Dùng công cụ Selection Tool (V) và chọn ô vuông đầu tiên cùng với text (trongví dụ này là “HOME PAGE”). Nhấn phím F8 (Convert to Symbol) để chuyển hìnhchữ nhật và text sang dạng Movie Clip Symol.Bước 10Vẫn chọn Movie Clip vừa tạo, vào phần Properties Panel (Ctrl + F3) phía bêndưới. Ở phía phần bên trái, bạn sẽ tìm thấy một trường nhập Instance name. Đặttên lại cho movie là homepage_mcBước 11Chọn công cụ Selection Tool (V) và kích đúp vào movie clip trên màn hình làmviệc.Bước 12Vẫ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 13Trở 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 14Trong 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 15Kích vào frame 15 của layer rectangle và nhấn F6Bước 16Vẫn chọn frame 15, lấy công cụ Free Transform Tool (Q), nhấn và giữ phím Altrồi kéo hình chữ nhật xuống như hình sau:Bước 17Kí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 t ên trtimeline và chọn Create Motion Tween từ menu xuất hiện.Bước 18Chọn layer text và nhấn F8 (Convert to Symbol) để chuyển text sang dạng MovieClip Symbol.Bước 19Kích vào frame 15 của layer text và nhấn F6Bước 20Sử dụng phím mũi tên hoặc chuột để kéo text xuống dưới một chút để vào trungtâm của hình chữ nhật như hình sauBước 21Kí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 22Trở lại scene chính (Scene 1)Bước 23Tạo một layer mới và đặt tên là Invisible Button. Sau đó tạo một nút vô hình lênphía trên hình chữ nhật và text.Bước 24Dùng công cụ Selection Tool (V) kích một lần vào nút vô hình đã tạo để chọnnó, 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(http://www.quantrimang.com/);}Bước 25Tạo một layer mới phía trên layer invisible button và đặt tên là action script.Bước 26Kí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ácbạ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 menukhác nhau ...

Tài liệu được xem nhiều: