Chúng ta không tìm hiểu chi tiết về các nhóm chức năng được tổ chức trong vùng Code Snippets này. Chúng ta sẽ tìm hiểu về chúng thông qua các ví dụ minh họa.
Tạo chiếc đồng hồ treo tường
Trong ví dụ này, chúng ta sẽ tìm hiểu cách tạo một chiếc đồng hồ treo tường. Bạn hãy sử dụng các công cụ vẽ để tạo cho mình một chiếc đồng hồ theo ý thích của bạn. Nhưng bạn cần lưu ý một vài điểm sau đây:
- Các kim quay phải nằm trên các Layer riêng biệt. Chúng phải là các MovieClip. Tâm xoay của các kim quay này phải nằm ở một đầu của nó.
- Các phần còn lại của đồng hồ, tùy thuộc vào mục đích của bạn, bạn có thể tạo trên các Layer khác nhau, hoặc trên cùng một Layer.
Trong chiếc đồ hồ mà tôi tạo, tôi sử dụng các Layer sau đây:
- Layer Oclock: chức phần khung của chiếc đồng hồ, bề mặt đồng hồ.
- Layer Node: chứa các mốc thời gian (4 mốc thời gian).
- Layer Hours (chứa kim giờ), Layer Minutes (chứa kim phút), Layer Seconds (chứa kim giây).
- Layer Center: nút gốc của các kim quay.
- Bạn lưu ý đến trật tự của các Layer. Layer Node ở trên Layer Oclock, Layer các kim quay ở trên Layer Node, Layer center trên Layer các kim quay để che đi phần gốc quay của các kim quay.
Chắc bạn sẽ thắc mắc Layer Action trong trường hợp này dùng để làm gì. Chúng ta sẽ biết ngay sau đây.
Đối với các kim quay, bạn cần cài đặt tên thể hiện cho nó. Ví dụ tôi đặt tên cho các đối tượng kim quay như sau: kim giờ là hourobj, kim phút là minobj, kim giây là secobj.
Tiếp theo, bạn hãy chọn một đối tượng kim quay, bấm vào khung Code Snippets (hoặc Windows > Code Snippets). Trong cửa sổ này, bạn chọn nhóm Animation > Rotate Continuously.
Khi đó, Flash sẽ chèn tự động một Action Frame vào trong TimeLine và khởi tạo nội dung Action cho bạn như sau.
| minobj.addEventListener(Event.ENTER_FRAME, fl_RotateContinuously); function fl_RotateContinuously(event:Event) { //Soạn thảo mã chương trình ở đây minobj.rotation += 10; } |
Bây giờ bạn hãy thay đoạn mã trong hàm fl_RotateContinuously bằng đoạn mã sau
| var dd:Date = new Date(); hourobj.rotation = ((dd.getHours()>=12)?(dd.getHours()):(dd.getHours()-12))*30; minobj.rotation = dd.getMinutes()*6; secobj.rotation = dd.getSeconds()*6; |
Trước khi thay thế hai đoạn mã này, bạn nên kiểm tra xem chiếc đồng hồ của bạn hoạt động như thế nào đã nhé. Rõ rang nó chỉ xoay duy nhất chiếc kim phút mà thôi. Bạn cũng lưu ý rằng hiệu ứng này của Code Snippets là hiệu ứng quay liên tục (Rotate Continuously), do đó, bạn không cần tương tác với đối tượng Timer.
Giải thích: Để cho chiếc đồng hồ hoạt động đúng, ta cần bổ sung sự kiện thời gian cho nó. Biến dd thuộc kiểu Date. Ta sử dụng hàm khởi tạo Date() để khởi tạo giá trị cho biến dd. Đối tượng thuộc kiểu Date có nhiều hàm tạo khác nhau, nhưng ở đây ta sử dụng hàm tạo không đối số. Với hàm tạo này, đối tượng dd sẽ nhận giá trị là thời gian hiện tại. Ta sẽ sử dụng các phương thức getHours, getMinutes, getSeconds để lấy giờ, phút, giây tương ứng. Ở đây, Flash sử dụng biến cố Event.ENTER_FRAME. Với biến cố này, hành động sẽ liên tục được cập nhập trên từng frame. Bạn lưu ý rằng mặc định, số Frame trên một giây là 24fps. Do đó, bạn hoàn toàn yên tâm rằng thời gian trên đồng hồ của bạn sẽ được cập nhật đến từng 1/24 giây.
Tiếp theo, chúng ta sẽ thảo luận về các công thức tính góc quay. Chúng ta biết rằng khi kim phút và kim giây quay đúng một vòng là 60 phút hoặc 60 giây. Nó tương ứng với số đo là 3600. Như vậy, tương ứng với 1 phút hoặc 1 giây sẽ có số đo là 60. Nếu có số phút và số giây hiện tại, ta chỉ việc nhân với 6 là nhận được kết quả của góc đo tương ứng với phút và giây hiện tại.
Với giờ thì kết quả sẽ khác. Một vòng quay 3600 chỉ tương ứng với 12 giờ, do đó, mỗi giờ chiếm đến một góc là 300. Nên góc quay của kim giờ sẽ là số giờ nhân với 30. Một điều lưu ý nữa, nếu thời gian hệ thống được định dạng 24h thì sẽ có một vài sai sót xảy ra. Do đó, để đảm bảo chiếc đồng hồ hoạt động tốt, bạn nên kiểm tra điều kiện: nếu số giờ vượt ngưỡng 12, thì số giờ sẽ là số giờ trừ đi 12, ngược lại thì giữ nguyên kết quả đó. Đây chính là giá trị của toán tử điều kiện mà ta sử dụng.
Đến đây, bạn sẽ thắc mắc là tại sao addEventListener lại chỉ áp dụng cho kim phút. Câu trả lời không phải như vậy. Bạn có thể áp dụng cho một đối tượng bất kì. Bạn có thể hiệu chỉnh ba đối tượng trên các Action Frame khác nhau. Nhưng cách thực thi như thế chỉ làm cho bạn tốn thời gian, và việc quản lý nhiều Frame sẽ làm cho bạn cảm thấy rối. Bạn hoàn toàn có thể làm thế nếu bạn muốn. Nhưng bạn cần lưu ý đến một phương châm khi lập trình đó là – Càng đơn giản, nhỏ gọn nhưng vẫn đảm bảo đầy đủ các nội dung thì càng tốt.
No comments:
Post a Comment