Macromedia Flash - Tạo đồng hồ kim trong Flash

Cập nhật lúc 14h18' ngày 16/03/2011

Bài này sẽ hướng dẫn bạn cách tạo một chiếc đồng hồ hoạt động thực bằng cách sử dụng các hiệu ứng của Flash.

1. 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:

2. Tạo 5 layer trên phần Timeline, tên của chúng lần lượt tương ứng là: sec (giây), min (phút), hour (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 sec. Chọn dòng kẻ đó và nhấn F8 để chuyển nó sang dạng Symbol. Đặt tên cho Symbol này là sec_mc, chọn Movie clip và chọn ô vuông giữa dưới cùng trong phần Registration.

5. Nhấn OK 

6. Trong layer sec, đặt sec_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 sec trong phần Instance của cửa sổ thuộc tính Properties là “sec”. 

7. Kéo sec_mc từ cửa sổ Library vào layer min. Nếu cửa sổ Library không mở, nhấn Ctrl + L. Giảm bớt chiều dài của sec_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à “min” trong phần Instance của cửa sổ thuộc tính. 

8. Tiếp tục kéo sec_mc vào layer hour 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à “hour” trong ô Instance. 

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

time=new Date(); // time object
seconds = time.getSeconds()
minutes = time.getMinutes()
hours = time.getHours()

hours = hours + (minutes/60);

seconds = seconds*6; // calculating seconds
minutes = minutes*6; // calculating minutes
hours = hours*30; // calculating hours

sec._rotation=seconds; // giving rotation property
min._rotation=minutes; // giving rotation property
hour._rotation=hours; // giving rotation property
 

10. Vào frame thứ 2 của từng layer và nhấn phím F5

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ừ sec_mc. 

Download file nguồn tại đây.

TH - HT
Đánh giá(?):
META.vn | Mua sắm trực tuyến
Các bài phản hồi, bình luận
Tất cả có 7 phản hồi cho bài này
Gửi bởi Bạn van ngoc nhu [vanngoc0904] lúc 19:24 11/03/2009
cho em hỏi để tạo được đồng hồ kim trong flash thì cần phải có phần mềm gì hỗ trợ không hay chỉ cần có photoshop CS2 là được?
cảm ơn trước nha!
 Phàn nàn
Gửi bởi Bạn nguyen van a [alaka] lúc 21:09 19/04/2009
uj jaz!!!Cái này chỉ làm đc trên flash thoai!!!pts thì làm sao mà làm đc!cái này dùng ngôn ngữ actionscript.hớ hớ...
 Phàn nàn
Gửi bởi Bạn duong van anh [anhcnttk8d] lúc 21:52 15/04/2011
bạn ơi!tại sao mình không thể giảm được chiều dài kim phút và kim giời vậy.và một điều nữa là mình chèn code lệnh trên thì đồng hồ không tự cập nhật giờ chuẩn mà chạy theo 00h,mong bạn giải thích giúp mình.m thank bạn trước nhé!
 Phàn nàn
Gửi bởi Bạn Lê Đình hưng [hung1234567899] lúc 11:18 03/11/2011
bạn ơi sao minh làm giống của bạn sao không chạy được. code thì mình copy của bạn.như vậy thì nó sảy ra lỗi gì vậy. Mong bạn giúp đỡ.
 Phàn nàn
Gửi bởi Bạn Phan Tú [phantu1962] lúc 16:38 25/11/2011
Đồng hồ này tôi làm được rồi, cảm ơn chủ topic, nhưng tại sao nó chạy chậm hơn thực tế là 10 phút, có cách nào khắc phục nhờ anh em chỉ giúp.
Xim cảm ơn.
 Phàn nàn
Gửi bởi Bạn Thu Hương [thuhuong] lúc 07:57 26/11/2011
Cái này chạy dựa trên đồng hồ hệ thống, bạn xem lại hệ thống của mình chưa?
 Phàn nàn
Gửi bởi Bạn nguyen dang hai [danghai] lúc 08:58 26/11/2011
Bạn Phan Tú [phantu1962]: trước hết hãy xem lại múi giờ của mình đã chính xác chưa. Trường hợp hệ thống OK bạn có thể cộng thêm số phút vào dòng minutes = minutes*6; vì đồng hồ kim nó xoay theo đường tròn nên bạn tự tính sao cho hợp số phút nhé, ví dụ thiếu 10p có thể thêm vào minutes = 60 + minutes*6;

Bạn duong van anh [anhcnttk8d] và Lê Đình hưng [hung1234567899]: Để giảm chiều dài/rộng của kim nào chỉ cần kích vào kim đó và nhìn xuống hàng Properties mà thay đổi thông số ở WH.
Code rất chuẩn rồi, chú ý là chọn layer action rồi ấn F9 và paste code là xong. Sau đó chọn frame thứ 2 của tất cả các layer hiện có (ở đây là 7 layer) và ấn F5. có nghĩa là mọi layer sẽ có 2 frame bạn nhé! Chúc thành công.[red][/red]
 Phàn nàn
Tất cả có 7 phản hồi cho bài này
Bài viết mới nhất
Xem tất cả
Bài viết cũ hơn cùng chủ đề
Xem tất cả