Tạo đồng hồ kim cho website, blog hoặc điện thoại

Hướng dẫn tạo đồng hồ kim bằng Flash cho website hay điện thoại của bạn.

Với nhiều website blog nhiều bạn phải tốn khá nhiều thời gian tìm kiếm một chiếc đồng hồ để trang trí cho blog/web của mình. Vậy tại sao bạn không nghĩ đến chính mình cũng có thể tạo ra những chiếc đồng hồ như vậy, thậm chí còn đẹp hơn như vậy nếu bạn có khả năng hơn.

Công cụ cần thiết:

Đơn giản chỉ là phần mềm Adobe Flash (bất cứ một phiên bản nào từ Macromedia 7 cho đến Adobe flash 5). Bạn có thể tìm down bản Adobe Flash 5 tại đây.

Khi đã có công cụ làm rồi, bạn cũng không phải lo lắng là phải làm sao để tạo ra những chiếc đồng hồ như vậy khi bản thân không biết cách dùng Adobe Flash ra sao.  Bởi vì trong tut này mình sẽ hướng dẫn chi tiết để bạn có thể làm.

Chúng ta bắt đầu với việc làm một đồng hồ kim

-          Đầu tiên bạn cần có một ảnh cho chiếc đồng hồ của mình.

Ở đây mình đã Design bằng pts một cái đồng hồ kim tròn mang logo của Erhay:

Ok. Cứ có cái đồng hồ là được rồi :D.

-          Bây giờ chúng ta mở Adobe Flash lên. Chọn Flash File ActionScript2 là được rồi.

-          Trên hình kích thước là 550*400 là khá lớn. Bạn ấn vào Edit để chỉnh cho phù hợp với đồng hồ của bạn.  Với đồng hồ của mình mình sẽ lấy size: 250*250.  Bạn ấn vào Edit (chỉnh thông số mặc định) chọn chất lượng ảnh là Cao nhất (JPEG quality). Còn các thông số mặc định như Player: Flash Player 10…Nếu bạn muốn đồng hồ kim chạy trên điện thoại thì bạn phải chỉnh về Player 7 hoặc Player 8. Tùy vào flash lite trên đt của bạn.

-          Điều chỉnh độ lớn khung làm việc bằng Ctrl – để thu nhỏ hoặc Ctrl + để phóng to

-          Tiếp theo bạn nhấn Ctrl + R để nhập ảnh đồng hồ vào. Dùng phím mũi tên để di chuyển sao cho vừa với khung là được.

-          Tạo New Layer đặt tên là kim. Và Ấn “N” để chọn vào Line Tool. Sau đó vẽ lần lượt 3 kim giờ, phút, giây như trong hình.

-         Phải chuột vào kim giờ và chọn Convert to Symbol.  Name : đặt là giờ (cái này không quan trọng).  Ở instance name bạn đặt là hour.  Làm tương tự vậy với kim phút và giây. Đặt lần lượt instance name của kim phút là min, kim giây là sec.

-          Công việc tiếp theo là xếp chồng 3 kim đó lên nhau và đặt vào chính giữa lúc 00:00:00 (ấn V để chọn Selection Tool, sau đó dùng chuột hoặc phím mũi tên để di chuyển thành vị trí chồng nên nhau như hình vẽ). Bạn cần để ý tâm của mỗi kim sẽ là dấu khoanh tròn đỏ như hình. Di chuyển kim bằng cách chọn vào kim (kích đúp) sau đó di chuyển bằng phím mũi tên.

                                          

                                          

-          Sau khi đã xếp chồng như vậy, công việc bây giờ của bạn là tạo một layer mới. Đặt tên là Code (Tên đặt sao dễ nhớ, thao tác tạo layer mới như thao tác đã hướng dẫn tại hình trên). Và bây giờ bạn  ấn F9 để mở hộp nhập Actionscript  và paste đoạn code dưới vào:




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







-          Sau đó bạn cần tạo các key frame cho 2 layer Kim và Dongho. Bằng cách chọn vào keyframe (dấu chấm đen) trên mỗi layer và ấn F5. Sao cho được như hình.

Sau đó bạn ấn thử Ctrl + Enter. Nếu đồng hồ chạy là bạn đã làm xong. Bây giờ bạn xuất ra file SWF để chạy trên web hay điện thoại của bạn thôi.  File -> Export -> Export Movie

Và dưới đây là kết quả. Bạn cũng có thể dùng ảnh để làm kim và thao tác tương tự. Do làm kim hơi mất thời gian nên mình dùng Line tool. Nếu dùng ảnh thì sẽ đẹp hơn nhiều. Bạn có thể thêm các hiệu ứng như hoa lá...

Bài sau mình sẽ hướng dẫn cách tạo đồng hồ số và các hiệu ứng khác. Cảm ơn mọi người đã quan tâm. Nếu có ý kiến hay thắc mắc bạn có thể comment hoặc đặt câu hỏi tại mục Erhay – Hỏi đáp.

Kết quả: