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
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.
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 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ó:
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.
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.
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.
Bạn có từng khó chịu khi ngồi bồn cầu lạnh ngắt trong mùa đông hay…
Bạn đang thắc mắc thuê chung cư 2 phòng ngủ có phù hợp với gia…
Một trong những kinh nghiệm giúp việc mua bán nhà đất diễn ra hiệu quả,…
Khi chọn mua bộ bàn làm việc tại nhà, gia chủ tuổi Ngọ nên cân…
Hiện nay, chi phí để thuê mặt bằng công ty tại các thành phố lớn…
Hồ cá Koi bằng thùng xốp được khá nhiều người sử dụng để nuôi cá…