Tạo đồng hồ đếm thời gian trong Adobe Flash Cs6

Đăng ngày: 10 Tháng 7 2014
Đánh giá bài này
(1 Bình chọn)
Tạo đồng hồ đếm thời gian trong Adobe Flash Cs6 Tạo đồng hồ đếm thời gian trong Adobe Flash Cs6

Trong hướng dẫn này bạn sẽ học được cách để tạo ra một đồng hồ đếm thời gian trong adobe Flash với Actionscript 2. Chúng tôi sẽ sử dụng movie clip nimation như một bộ đếm thời gian với Flash CS6

Cùng chủ đề này

 Kết quả sau khi làm theo hướng dẫn

  

Bước 1 - Document Settings

Tạo một Document mới (File - New) và chọn ActionScript 2.0 với kích thước 800px Width,400px Height và tùy chọn Frame Rate to 30 fps. Màu nền tôi để màu trắng, hoặc có thể bất cứ màu nào bạn muốn.

Tạo đồng hồ đếm thời gian trong Adobe Flash Cs6

Bước 2 – Tạo bộ đếm giờ

Đối với bộ đếm giờ, bạn cần tạo ra 3 đoạn văn bản có thể hoạt động (Giờ, phút, giây), để làm được điều này, bạn chọn Text Tool (T)   và vẽ 3 đoạn text bình thường và ghi trong chúng 2 số 0. Việc này rất quan trọng để cung cấp cho 3 đoạn chữ một chỉ số ban đầu, vì thế chúng ta có thể làm việc với chúng trong Script. Bạn có thể thêm 1 đoạn text tĩnh để ghi chú giờ, phút, giây.

Bạn có thể thiết lập các loại trường Properties Panel (CTRL+F3). Dưới tên trường hợp có 2 phần xổ xuống. Đầu tiên là Classic Text và thứ 2 là Dynamic Text. Ngoài ra, để chắc chắn về font chữ ta có Embed..  để thay đổi font chữ 1 cách chính xác (chọn  Numeralstừ danh sách).  Tham khảo hình ảnh dưới đây nếu bạn chưa chắc chắn.

Tạo bộ đếm giờ

Tạo nút Start, Pause và Reset

Với  Rectangle Primitive Tool (R), Vẽ ra 3 nút dưới đây để tùy chỉnh thời gian và thêm ghi chú trên nút bằng Text Tool. Bây giờ chọn mỗi nút với đoạn text của nó và gộp chúng thành 1 nút. Chỉ cần chuột phải và chọn Convert to Symbol (or press F8) và chọn Type sang Button. Kết thúc bạn sẽ có:

Tạo nút Start, Pause và Reset trong bộ đếm giờ

Bước 3 – Tạo  Empty Movie Clip đến Bộ đến giờ.

Khi chúng ta thực hiện với các bộ đếm giờ, chúng ta cần một đoạn code để đếm giây, và để thực hiện việc này, chúng ta sẽ bổ sung thêm các tính động cho các đoạn text.

Tạo ra bất cứ hình thù nào bạn muốn (Ở đây chúng tôi chọn hình chữ nhật) Click chuột phải vào nó và chọn Convert to Symbol (hoặc nhấn F8). Bây giờ bạn chọn Type tới Movie Clip và nhấn OK.

Đoạn Movie Clip này sẽ ẩn và sẽ chỉ thực thi mỗi 30 khung hình/giây. Bạn có thể di chuyển nó ra ngoài khung hình làm việc hoặc có thể cho nó ẩn đi bằng cách giảm Opacity xuống 0. Trong trường hợp này, chúng tôi chuyển nó ra ngoài màn hình làm việc và đổi tên thành timerClip.

Tạo  Empty Movie Clip đến Bộ đến giờ.

Giờ thì ấn đúp chuột vào Movie Clip mới được tạo ra, tới frame 30 và insert a frame (hoặc nhấn F5). Hoạt động này sẽ lặp lại, mỗi 30 khung hình/giây.

khung hình bộ đếm giờ

Bước 4 - Thêm Count Up Timer Script tới Root Frame

Sau khi thêm 30 trong movie clip, bạn có thể trở lại màn hình khởi động Scene 1 và chọn khung hình đầu tiên, nhấn F9 để mở Action Script Panel (hoặc đơn giản hơn bạn có thể ấn chuộn phải và chọn "Actions").

Trước tiên, chúng ta cần phải khởi động tất cả các biến, bao gồm cả các đoạn text, và giờ chúng tôi cần phải tạm ngưng các movie clip và màn hình làm việc để kiểm soát chúng bằng đoạn code sau:

stop(); // stop the scene animation

timerClip.stop(); // stop the movie clip animation

 

// initialise variables

var hour:Number = 0;

var minute:Number = 59;

var second:Number = 57;

 

// set all text timers to 0

hours.text = "0" + hour;

minutes.text = "0" + minute;

seconds.text = "0" + second;

Chúng ta có các biến tiêu biểu, trong đó sẽ chứa integer numbers. Bạn có thể nhận ra rằng chúng tôi đã cho 1 số 0 ở phía trước của biến. Bộ đếm thời gian sẽ đếm từ “01” đến “09” và sau đó sẽ thay đổi tới 10.

Để tạo ra sự thay đổi, dựa trên thời gian của animation, chúng tôi sẽ cài đặt thêm chức năng cho movie clip mà chúng tôi sẽ đặt tên là timerClip. Chức năng này chạy code trong mỗi khung hình và sẽ chỉ chạy trong 30 khung hình, tức là 1 giây. Đặt tên cho chức năng này là onEnterFrame được thiết kế chỉ để sử dụng cho movie clips.

Hãy chắc chắn phải thêm đoạn mã sau dưới biến, đoạn mã như sau:

timerClip.onEnterFrame = function() {

                if (this._currentframe == 30) {                   

                                second += 1;

 

                                // SECONDS

                                if (second > 59) {                                             

                                                second = 0;

                                                seconds.text = "0" + second;

                                                minute += 1;                                     

 

                                                // MINUTES

                                                if (minute >= 10) {

                                                                minutes.text = minute;

                                                } else {

                                                                minutes.text = "0" + minute;

                                                }

 

                                                // HOURS

                                                if (minute > 59) {

                                                                minute = 0;

                                                                minutes.text = "0" + minute;                                                     

                                                                hour += 1;

 

                                                                if (hour >= 10) {

                                                                                hours.text = hour;

                                                                } else {

                                                                                hours.text = "0" + hour;

                                                                }

                                                }

                                } else {                                 

                                                if (second >= 10) {

                                                                seconds.text = second;

                                                } else {

                                                                seconds.text = "0" + second;

                                                }

 

                                }                             

                }

}

Tốt, nếu bạn kiểm tra lại project không có gì xay ra hoặc bị dừng lại thì bạn bắt đầu chạy đoạn animation từ đầu.

Bước 5 - Thêm Actions vào Buttons

Để thêm sự kiện và nút (Buttons) ta ấn vào nó và chọn Action Script Panel (F9). Chúng ta cần phải kích hoạt code khi nhấn chuột vào nút. Ở dây chúng ta sẽ làm gì khi ấn chuột vào?.

Code cho Nút Start.

Để chạy đếm giờ, ta thêm đoạn code sau vào.

on(release) {

                timerClip.play();

}

Code cho Nút Stop/Pause.

Để dừng bộ đếm thời gian, ta phải dừng lại cả Movie Clip lẫn Animation. Ta thêm đoạn code sau vào nút:

on(release) {

                timerClip.stop();

}

Code cho Nút Reset.

Nếu bạn muốn làm mới thời gian về 0, Trước tiên bạn cần dừng bộ đếm thời gian lại và cài đặt giá trị thời gian về 0..

on(release) {

                timerClip.stop();

 

                hour = 0;

                minute = 0;

                second = 0;

 

                hours.text = "00";

                minutes.text = "00";

                seconds.text = "00";

}

Kết quả:

Bây giờ mọi thứ đã được thiết lập xong, bạn có thể Test bộ đếm thời gian bằng cách ấn CTRL+ENTER. Chúc bạn thực hiện thành công!

Đừng quên chia sẻ và góp ý với LMT Việt Nam bằng comment ở dưới để chúng tôi sẽ có những bài viết chất lượng cao, có ích.

Xuân Trung

Gửi bình luận

Hãy nhập đầy đủ các thông tin yêu cầu trong ô có dấu (*). Không được phép sử dụng mã HTML.

LIKE để ủng hộ bạn nhé!

 

Tham gia diễn đàn seo hàng đầu Việt Nam

Has no content to show!