Monday, April 18, 2011

Hướng dẫnTạo baner đồng hồ hoạt động thực bằng Flash tương tự baner trang 24h.com.vn

Demo: http://lyly.nhatnghe.org/taodonghochuyendong/demodongho.html
Bước 1: Tạo  file mới :width :500 và height:300.


 Tạo một hình đòng hồ theo ý thích của bạn. Có thể vẽ nó trên Photoshop sau đó import nó vào flash hoặc vẽ trực tiếp trên flash. Bạn có thể lấy hình đồng hồ sau:
Bước 2: Tạo 5 layer trên phần Timeline, tên của chúng lần lượt tương ứng là: kimgiay(giây), kimphut(phút),kimgio (giờ) và actions. Bạn có thể xem hình dưới đây là Timeline mẫu.


3. Chèn vào thiết kế đồng hồ nền mà bạn đã tạo sẵn

4. Vẽ một đường kẻ dọc trong layer kimgiay. Chọn dòng kẻ đó và nhấn F8 để chuyển nó sang dạng Symbol. Đặt tên cho Symbol này là g_mc, chọn Movie clip và chọn ô vuông giữa dưới cùng trong phần Registration. Nhấn OK.





Bước 6. Trong layer kimgiay, đặt g_mc vào vị trí tương ứng so với ảnh nền đồng hồ bạn đã thiết kế.




Đặt tên của layer kimgiay trong phần Instance của cửa sổ thuộc tính Properties là “kimgiay”. 


Bước7. Kéo g_mc từ cửa sổ Library vào layer kimphut. Nếu cửa sổ Library không mở, nhấn Ctrl + L. Giảm bớt chiều dài của g_mc trong phần này đi (để tương ứng với kim phút). Đặt nó vào vị trí tương ứng với ảnh nền đồng hồ. Đặt tên layer này là “kimphut” trong phần Instance của cửa sổ thuộc tính.



8. Tiếp tục kéo g_mc vào layer kimgio từ cửa sổ Library đã mở. Lại giảm chiều dài của kim đi cho tương ứng với kim giờ. Đặt nó vào vị trí tương ứng so với ảnh nền đồng hồ. Đặt tên nó là “kimgio” trong ô Instance.

9. Chọn layer actions, vào phần Action Script (F9) và đưa vào đoạn mã sau:

_root.onEnterFrame=function(){
d=new Date();
giay = d.getSeconds();
phut = d.getMinutes();
gio = d.getHours();
gio = gio + (phut/60);
giay = giay*6;
phut = phut*6;
gio = gio*30;
kimgiay._rotation= giay;
kimphut._rotation= phut;
kimgio._rotation= gio;
}
Chú ý:Ba kimgiay ,kimphut,kimgio phải chỉnh tâm ở cuối đều nhau, nếu không sẽ chạy không đúng tâm đồng hồ.

Kết quả đồng hồ của bạn có chạy không, hãy thử nhấn Ctrl + Enter xem sao. Ngoài ra bạn có thể tự chế các kim sao cho phù hợp không nhất thiết là phải lấy kim từ g_mc.

No comments:

Post a Comment