Làm menu dropdown bằng flash AS3

Hôm nay tớ sẽ viết 1 bài hướng dẫn các bạn làm menu dropdown bằng flash AS3 .

Nào bắt đầu , chúng ta tạo 1 file flash , cho chiều dài*rộng là : 600px*100px . Frame rate là 24 .

Tiếp đó, ta vẽ 1 menu ngang với các giá trị bên trong . Tớ tạo thử 1 menu với các trường sau : home , about us , collections , accessory , question , job . Để làm được điều đó , ở timeline chính , tớ chọn công cụ rectangular tool và kẻ 1 hình chữ nhật ngang màn hình .

Sau đó , tớ sẽ bắt đâu đưa menu vào . Chọn công cụ text tool , và gõ các chữ : home , about us , collections , accessory , question , job vào khung trên .

Giờ bắt đầu vào phần quan trọng , tớ sẽ làm cho khi rê chuột vào collections , thì menu bộ sưu tập sản phẩm của tớ sẽ được show ra và xổ xuống dưới . Các nút còn lại , các bạn làm tương tự .

Bắt đầu ta, ta convert text collections qua movie clip , để làm được điều này , bạn right click vào text collections -> chọn convert to symbol -> chọn loại là movie clip -> đặt tên là collections .

Sau đó , ta double click vào clip collections trên time line chính để vào trong nó . Tại đó, ta tạo các layer sau theo tứ tự từ dưới lên : buttons , mask , collections , labels , actions .

Tại layer buttons , ta tạo các button con của nó . Nhớ là mỗi menu con là 1 “button” nhé , vì có như thế , ta mới có thể link và lập trình được ( hoặc là movie clip tùy bạn chọn ) . Sau khi chọn cho chúng là button rồi , thì ta add chúng vào 1 khung , và nhóm chúng lại thành 1 movie clip , đặt tên movie clip là dropdown .

Sau đó ta tạo mask cho chúng , mask là một movie che đi menu của chúng ta , khi chúng ta gọi , thì mask bắt đầu mở ra cho chúng ta thấy . Để tạo mask , ta chọn công cụ rectangular tool , ở layer mask , ta vẽ 1 hình chữ nhật bao che hoàn toàn menu mới tạo của chúng ta . Sau đó set properties của nó là mask . Và lớp buttons ta set properties nó thành masket .

Sau khi có mask rồi , thì chúng ta làm chuyển động cho menu , ta kéo layer button từ frame 10 sang frame 15 , sao cho chúng ta có chuyển động motion là được , dĩ nhiên , vị trí đầu không nằm trong mask , vị trí cuối nằm trong mask để kết quả có thể show ra màn hình . Và ta phải làm cả frame invert cho chuyển động vừa rồi nữa chứ , phải không nè ?

Kết quả có được là menu sẽ xổ xuống , rồi xổ lên , như thế thì không đẹp tí nào , ta phải thêm stop() ở ngay frame vừa xuống , để menu dừng lại tại đó chứ ! :D

Ngoài ra ta còn phải thêm các stop() ở frame thứ 1(bắt đầu chạy) , 10(khi hover tới) , 14(để kết thúc hover),20(để kết thúc out) . Cùng các label hover (khi rê tới) , out(khi rê ra). Như vậy, kết quả cho tới lúc này , sẽ không thấy gì cả .

Vậy là xong bước tạo menu con rồi đó , tiếp tới , chúng ta sẽ lập trình , để menu con này xổ ra theo đúng ý chúng ta .
Bắt đầu , chúng ta quay trở về time line chính , chọn vào menu collections -> rồi đặt tên instance của nó là : mc_collections . Sau đó thêm 1 layer actions ở ngay trên layer chính time line , rồi vào actions script của nó gõ lệnh như sau :

mc_collections.buttonMode=true ;
mc_collections.addEventListener(MouseEvent.ROLL_OVER,onroll);
mc_collections.addEventListener(MouseEvent.ROLL_OUT,onout);
function onroll(e:MouseEvent):void
{
e.currentTarget.gotoAndPlay('hover');
}
function onout(e:MouseEvent):void
{
e.currentTarget.gotoAndPlay('out');
}

Vậy là xong rồi đó , chung ta đã tạo thành công menu drop down , nhưng chưa dừng lại tại đây , chúng ta phải làm sao cho menu chúng ta ra đẹp cái chứ , đúng không hè ?

Vào movie clip Colllections -> tại frame thứ 10 , click vào motion của buttons -> chọn ease là 100 , và tương tự tại frame thứ 15 , chọn ease là 100 thì menu của ta sẽ ra đẹp hơn .

Lưu ý : còn 1 điều là , menu dropdown bên trong collections phải nằm gần menu collections , nếu nó ở xa quá , thì menu sẽ không rollOut được, hãy trải nghiệm và các bạn sẽ khám phá ra nhiều điều .:lol:

Source : http://www.mediafire.com/?yxmm34immgd

Advertisements

3 thoughts on “Làm menu dropdown bằng flash AS3

  1. Hello there! This article could not be written any better!
    Looking at this post reminds me of my previous roommate!
    He constantly kept preaching about this. I most certainly will
    forward this article to him. Fairly certain he’s going to have a good read. I appreciate you for sharing!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s