Di chuột để xem ảnh AS2

In
Xem kết quả: / 12
Bình thườngTuyệt vời 

Nhìn vào flash này các bạn có ý tưởng gì không, mình thì nghĩ nếu các bạn có 1 tấm ảnh rất to của người yêu muốn đặt nó lên trang blog của mình để khi nào nhớ di chuột qua sẽ rất là thú vị. :P

Nguyên vật liệu cho flash này là một tấm ảnh thật to và đẹp.

Mình thì chọn bức ảnh này: http://aloflash.com/images/stories/tut/di-chuot-xem-anh-as2/aloflash.png

Sau khi bạn đã có bức ảnh phù hợp giờ thì chúng ta bắt đầu thôi nhỉ.

Bước 1:

Tạo 1 file tài liệu flash mới Ctrl + N chọn loại là ActionScript 2.0 nhé. Nhấn Ctrl + J để mở bảng Document Properties rồi bạn chỉnh kích thước cho hợp lý, kích thước càng lớn thì càng dễ làm :P

Bước 2:

Import bức ảnh mà bạn chọn vào trong flash bằng cách vào: File > Import > Import to Stages...

Bước 3:

Sử dụng công cụ Selection Tool (V) click chọn vào bức ảnh vừa Import vào Flash nhấn phím F8 để Convert nó thành dạng Movie Clip. Rồi nhấn Phím Delete để xóa nó đi.

Bước 4:

Mở Thư viện Libraly bằng cách vào: Window > Libraly (Ctrl + L). Nhìn trong này bạn sẽ thấy có 2 đối tượng 1 là bức ảnh bạn vừa Import, 2 là Movie Clip bạn vừa Convert.

Bước 5: 

Click chuột phải vào Movie Clip (Symbol 1Movie Clip bạn tạo lúc nãy) như trong hình dưới rồi chọn Properties...

Nó hiện ra 1 bảng Bạn chọn dấu kiểm vào 2 ô Export for ActionScript Export in frame 1 với đặt tên ở phần Identifier là: map

OK.

Bước 6:

Giờ chúng ta sẽ tiến hành vẽ phím mũi tên dạng như flash demo ở đầu bài TUT này.

Mình sẽ hướng dẫn các bạn cách vẽ đơn giản nhất, còn bạn nào muốn làm mũi tên theo phong cách riêng thì tùy ý nhé.

Nhấn Ctrl + để phóng to phần hiện thị Flash, sử dụng công cụ Rectangle Tool (R) Vẽ 1 hình chữ nhật như hình dưới

Tiếp tục vẽ 1 hình vuông bằng cách khi vẽ bạn giữ phím Shift để tạo hình vuông tuyệt đối.

Giờ bạn sử dụng công cụ Free Transfrom Tool (Q) click vào hình vuông vừa vẽ quay nó 1 góc 45 độ (bạn giữ phím Shift khi quay để được các góc tuyệt đối)

Giờ bạn chọn công cụ Selection Tool (V) giữ chuột và kéo 1 đường hình chữ nhật sao cho bổ đôi hình chữ nhật bạn vừa tạo như hình dưới:

khi bạn nhả chuột ra sẽ được: (bạn để ý nửa bên trái hình vuông xoay 45 độ sẽ có sự khác biệt)

Nhấn tiếp phím Delete để xóa nửa bên trái đi ta sẽ được

Giờ sử dụng công cụ Selection Tool (V) kéo hình tam giác vào gần hình chữ nhật để tạo thành mũi tên nhé

Vậy là chúng ta đã làm xong mũi tên rồi.

Bước 7:

Giờ bạn kéo chuột để chọn toàn bộ mũi tên hoặc nhấn Ctrl + A, sau đó nhấn phím F8 để Convert nó thành dạng Movie Clip, tiếp theo nhấn phím Delete để xóa nó đi.

Giờ thì bạn làm giống như ở bước 4 tức là mở thư viện Libraly ra rồi chuột phải vào Movie Clip mũi tên (Symbol 2) chọn Properties... rồi thiết đặt và đặt tên cho nó như hình dưới, tên của nó là: the_arrow

Vậy là xong bước thiết kế. Giờ chúng ta sẽ chuyển sang viết code cho bài tập này nhé.

Bước 8:

Click vào frame 1 nhấn phím F9 để mở bảng ActionScript và chèn vào đoạn code sau:

Mouse.hide();
_root.attachMovie("map", "map", 1);
_root.attachMovie("the_arrow", "the_arrow", 2, {_x: 250, _y: 175});
the_arrow.onEnterFrame = function ()
{
    this._x = this._x + (_xmouse - this._x) / 5;
    this._y = this._y + (_ymouse - this._y) / 5;
    dist_x = this._x - 250;
    dist_y = this._y - 175;
    angle = Math.atan(dist_y / dist_x) / 1.745329E-002;
    if (dist_x < 0)
    {
        angle = angle + 180;
    } // end if
    if (dist_x >= 0 && dist_y < 0)
    {
        angle = angle + 360;
    } // end if
    this._rotation = angle;
    deltax = -(this._x - 250) / 90;
    deltay = -(this._y - 175) / 90;
    map._x = map._x + deltax;
    map._y = map._y + deltay;
    if (map._x > 1000)
    {
        map._x = 1000;
    } // end if
    if (map._x < -500)
    {
        map._x = -500;
    } // end if
    if (map._y > 1000)
    {
        map._x = 1000;
    } // end if
    if (map._y < -650)
    {
        map._y = -650;
    } // end if
};

Trong đó: mapthe_arrow là tên gọi 2 symbol ảnh và mũi tên.

this._x = this._x + (_xmouse - this._x) / 5;
this._y = this._y + (_ymouse - this._y) / 5;  Đây là đoạn chỉnh tốc độ di chuyển của mũi tên bạn có thể thay số 5 bằng số khác số càng nhỏ tốc độ càng nhanh và ngược lại.
 
deltax = -(this._x - 250) / 90;
deltay = -(this._y - 175) / 90;   Tương tự như trên đây là tốc độ ảnh được load ra bạn có thể thay đổi số 90 bằng cách số khác càng nhỏ thì load càng nhanh và ngược lại.

OK như vậy là đã hoàn thành bài tập này rồi đấy. Bạn có thể nhấn Ctrl + Enter để ngắm nhìn người yêu dấu của mình.

Chúc các bạn thành công.

aloflash.com

Download

Share