Thứ Bảy, 11 tháng 6, 2011

Tạo nút bấm hiệu ứng đơn giản sử dụng AS3

Tạo nút bấm hiệu ứng đơn giản sử dụng AS3

Bài này hướng dẫn các bạn cách tạo hình ảnh xuất hiện bằng nút bấm với AS3. Với bài học này bạn phải biết cách import hình ảnh vào stage, chuyển đổi sang Movie Clip Symbol, cách tạo tên...

Bước 1

Tìm bất kì hình ảnh nào bạn yêu thích

Bước 2

Tạo một tài liệu flash mới. Nhấn Ctrl + J trên bàn phím (Document Properties) và thiết lập kích thước của tài liệu của bạn tùy ý. Chọn bất kỳ màu nào làm màu nền. Thiết lập tỷ lệ khung hình phim Flash của bạn là 34 và kích OK.

Bước 3

Chọn hình ảnh lớp hiện tại. Kích đúp vào tên mặc định của nó (Layer 1) để thay đổi. Nhấn Enter khi bạn đã gõ vào tên mới!

Bước 4

Chọn bây giờ File> Import> Import đến stage (Ctrl + R) và import bất kỳ hình ảnh vào flash stage.

Bước 5

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



Bước 6

Trong khi Movie Clip vừa tạo vẫn được chọn, vào Properties Panel ở phía dưới. Ở phía bên trái, bạn sẽ tìm thấy một trường nhập Instance name. Gọi là Movie Clip Photo. Xem hình sau



Bước 7

Tạo một layer mới phía trên layer photo và đặt tên là nút fade. Sau đó, tạo ra một số nút, nhập vào nó fade và chuyển đổi nó thành một biểu tượng nút.



Bước 8

Trong khi các nút mới làm vẫn được chọn, vào Properties Panel ở phía dưới. Ở phía bên trái, bạn sẽ tìm thấy một trường nhập Instance name. Call Button mybutton này. Xem hình sau



Bước 9

Tạo một lớp mới trên lớp nút fade và đặt tên là action.

Bước 10

Select now the first frame of layer action and go to the Action Script Panel (F9). After that, enter this code inside the actions panel:

Bây giờ chọn frame đầu tiên của layer action, vào Action Script Panel (F9). Sau đó, điền mã vào bên trong bảng điều khiển action:

import fl.transitions.*;
import fl.transitions.easing.*;

myButton.addEventListener(MouseEvent.CLICK, fadeMyObject);

function fadeMyObject(event:MouseEvent) {
TransitionManager.start(Photo, {type:Fade, direction:Transition.IN, duration:6, easing:Strong.easeOut});
}

Hoàn thành!

Kiểm tra (Ctrl+Enter)

Tải file (.fla)

0 nhận xét:

Đăng nhận xét

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | 100 Web Hosting