AloFlash ! Cộng đồng flash Việt Nam



You are here: Tutorials  AS 1.0 - 2.0 Di chuột để xem ảnh AS2

Di chuột để xem ảnh AS2

Email In PDF.
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

Bình luận (9)Add Comment
0
...
được viết bởi tuananh, Tháng mười hai 16, 2010
bạn có thể giải thích rõ code được hog
0
...
được viết bởi aloflash, Tháng mười hai 21, 2010
...
if (map._x > 1000)
{
map._x = 1000;
} // end if
if (map._x 1000)
{
map._x = 1000;
} // end if

Ah đây là toạ độ lớn nhất của hình (map) Bạn hãy tính toán khoảng cách từ tâm hình ra mép hình cho phù hợp. Nếu hình của bạn là 1000, bạn để tâm (hình dấu cộng nhỏ màu đen) ở giữa hình thi max x và y sẽ tương ứng với trục tọa độ như trong toán học. Khi làm bạn có thể vẽ sơ đồ trên trục tung và trục hoành (trục x và y) lấy tâm là tọa độ (0, 0) bạn sẽ tính toán được chính xác.

Chúc vui vẻ.smilies/smiley.gif
0
...
được viết bởi Di chuột để xem ảnh AS2 , Tháng mười hai 21, 2010
vậy nếu tôi có hình có width=1000 thì tọa độ lớn nhất của hình map_x la 1500 đúng không.Tôi vẫn chưa hiểu bởi hình sẽ di chuyển theo delta_x làm sao mà căn được khi nào hết hình. Nếu lấy từ tâm hình thì " map._x < -500" sao không lấy là -1000
0
...
được viết bởi aloflash, Tháng mười hai 22, 2010
Chào bạn, thật sự hơi khó giải thích cho bạn. Thôi mình tổng hợp và viết thành công thức cho bạn áp dụng nhé.smilies/smiley.gif

if (map._x > 1000)
{
map._x = 1000;
} // end if
if (map._x < -500)
{
map._x = -500;
} // end if

Trong đoạn code trên 1000 là chiều rộng của ảnh chia 2, nghĩa là ảnh của bạn có chiều ngang là 2000 thì x sẽ là 1000.
Còn 500 ở dưới là lấy 1000 chia cho 2 lần 250 trong đó 250 là tọa độ của mũi tên lúc đầu (_root.attachMovie("the_arrow", "the_arrow", 2, {_x: 250, _y: 175});).

Còn đoạn dưới:

if (map._y > 1000)
{
map._y = 1000;
} // end if
if (map._y < -650)
{
map._y = -650;
} // end if

Tương tự:

1000 là chiều cao của bức hình chia 2, nghĩa là ảnh của bạn cao 2000 thì số này là 100. còn 650 là 1000 trừ đi 2 lần tọa độ con trỏ lúc đầu là 175 nhân 2 = 350. ta có 1000 - 350 = 650.

Như vậy đó bạn.

Lưu ý: Khi bạn sử dụng công cụ Free Transfrom Tool (Q) đặt cho tâm của hình trùng với tâm hình dấu + màu đen của Movie thì công thức trên mới có tác dụng.

Chúc bạn thành công.smilies/wink.gif
0
...
được viết bởi tuananh, Tháng mười hai 23, 2010
_x: 250, _y: 175 cái này lúc đầu mình cho đại hay khi vẽ mũi tên xong lấy tọa độ của nó rồi xóa ah?smilies/smiley.gif
0
...
được viết bởi tuananh, Tháng mười hai 23, 2010
nếu được bạn có thể làm một video về tut này đi.smilies/grin.gif
0
...
được viết bởi nguyenhailogo, Tháng một 20, 2011
cái này hay áp dụng nhiều trong các web flash
0
...
được viết bởi RandomAth, Tháng mười một 02, 2011
hic, mình muốn làm dạng giống thế mà ko có mũi tên được ko vậy???? smilies/sad.gifsmilies/sad.gifsmilies/sad.gifsmilies/sad.gifsmilies/sad.gif
0
...
được viết bởi Masaru, Tháng mười hai 31, 2011
Cái này làm sao cho nó dừng lại vậy bạn? Di chuyển liên tục thì muốn xem kỹ góc nào đó cũng khó.

Viết bình luận
nhỏ hơn | lớn hơn

busy