Di chuột chạy ảnh với AS2 ~ Flash

Thứ Hai, 20 tháng 6, 2011

Đây là một bài tập khá hay nhưng rất đơn giản. Bạn nào thích thì vào Vọc nhé :D.
Nguyên vật liệu cho bài tập này là 1 bức ảnh để làm nền chạy, mình chọn bức này (các bạn lưu ý, chiều cao của bức ảnh phải lớn hơn hoặc bằng chiều cao của khung hiện thị flash còn chiều rộng thì vô cùng bạn muốn dài bao nhiêu cũng được tùy bạn). Mình thì chọn bức ảnh này:
http://i805.photobucket.com/albums/yy331/haihuoc_tunglinhonline/di-chuot-chay-anh-bg.jpg
P/S: bạn có thể ghép những tấm ảnh của bạn thành 1 cái ảnh dài để khi di chuột nó sẽ kéo ra thần tượng của bạn nhé (ý tưởng của mình :P)
OK sau khi các bạn đã chọn cho mình bức ảnh phù hợp thì chúng ta tiến ành làm nhé.
Bước 1:
Tạo 1 tài liệu Flash mới Ctrl + N chọn loại là Action Script 2.0 nhé, nhấn Ctrl + J mở bảng Document Setting để điều chỉnh chiều rộng và dài của file flash cũng như màu nền cho phù hợp với bức ảnh của bạn.
Bước 2:
Import bức ảnh vào flash bằng cách vào File > Import > Import to Stages...
Bước 3:
Sau khi import bức ảnh vào bạn sử dụng công cụ Selection Tool (V) click chọn bức ảnh vừa import rồi mở bảng Align bằng cách vào Window > Align (Ctrl +K) điều chỉnh như trong hình dưới để căn bức ảnh vào giữa khung hiển thị của flash.

Bước 4:
Nhấn phím F8 để convert nó thành dạng Movie Clip và đặt tên cho movie clip này là: bg_mc
Bước 5:
Tạo 1 layer mới, click vào frame đầu tiên trên layer vừa tạo nhấn phím F9 để mở bảng ActionScript và chèn vào đoạn code sau:

this.onMouseMove = function() {
constrainedMove(bg_mc, 4, 1);
};
function constrainedMove(target:MovieClip, speed:Number, dir:Number) {
var mousePercent:Number = _xmouse/Stage.width;
var mSpeed:Number;
if (dir == 1) {
mSpeed = 1-mousePercent;
} else {
mSpeed = mousePercent;
}
target.destX = Math.round(-((target._width-Stage.width)*mSpeed));
target.onEnterFrame = function() {
if (target._x == target.destX) {
delete target.onEnterFrame;
} else if (target._x>target.destX) {
target._x -= Math.ceil((target._x-target.destX)*(speed/100));
} else if (target._x<target.destX) {
target._x += Math.ceil((target.destX-target._x)*(speed/100));
}
};
}