Phần 2 của bài viết sẽ hướng dẫn Thầy Cô và các bạn cách thức thực hiện một ñồng hồ ñếm ngược bằng Flash có thêm một số chức năng cải tiến so với phiên bản số 1 xem phần 1 của bài hướng [r]
Trang 1Phiên bản ñồng hồ thực hiện trong phần 2 này ñược CENTEA gọi là phiên bản số 2 – bao gồm một số cải tiến sau: có khung chữ báo “Hết giờ” khi kết thúc, có âm thanh vào một số giây cuối cùng, có âm thanh kết thúc khi ñồng hồ ñếm về 00:00
ðồng hồ ñếm ngược sau khi ñược thực hiện, có thể dễ dàng ñưa vào PowerPoint hoặc chạy ñộc lập như một chương trình bình thường
* ðối tượng bài viết hướng ñến: các Thầy Cô ñã từng làm quen với chương trình Flash hoặc ñã thực hiện thành công ñồng hồ phiên bản 1
Trang 2I Thiết lập giao diện ñồng hồ
- Mở chương trình Flash 8 lên
- Trong mục Create New, chọn Flash Document (hình 1)
Hình 1: Chọn Flash Document trong mục Create New
- Sau ñó thiết lập kích cỡ cho giao diện của ñồng hồ tùy ý trong mục Size ở tab Properties (hình 2) Trong bài hướng dẫn này, CENTEA chọn kích cỡ 300x200 px (hình 3)
Hình 2: Lựa chọn kích thước cho giao diện của ñồng hồ
Hình 3: Lựa chọn của CENTEA cho ví dụ của bài viết này
Trang 3- Tiến hành lưu lại file Flash (menu File / Save), ñặt tên file là dongho_2
- Trong bước này, Thầy Cô cũng có thể ñổi màu nền cho giao diện, bằng cách vào mục Background ở tab Properties (xin xem lại hình 2)
II Thiết lập các thành phần cho ñồng hồ
- Tạo một text box ñể làm ô tính phút với các thông số sau:
- Text type: Input Text
- Instance name: minute
- Var: minu
- Show border around text
- Nhập hai số không (00) vào ô text box
(xin xem hình 4)
Hình 4: Các thông số cho ô tính phút
- Thực hiện tương tự một ô text box khác ñể làm ô tính giây với các thông số sau:
- Text type: Input Text
- Instance name: second
- Var: seco
- Show border around text
- Nhập hai số không (00) vào ô text box
(xin xem hình 5)
Trang 4Hình 5: Các thông số cho ô tính giây
- Tạo một text box ñể làm ô thông báo kết thúc với các thông số sau:
- Text type: Dynamic Text
- Instance name: timeout
- Var: timeout
(xin xem hình 6)
- Khi ñồng hồ ñã ñếm ngược ñến thời ñiểm 00:00, thì trong ô thông báo sẽ xuất hiện dòng chữ “Hết giờ”
Trang 5Hình 6: Các thông số cho ô thông báo kết thúc
- Như vậy là chúng ta ñã tạo xong 3 ô chữ cho phút, giây và ô thông báo kết thúc Thầy Cô
và các bạn có thể thêm thắt các chi tiết cho các ô thời gian này ñẹp hơn như: thay ñổi màu chữ, tạo dấu hai chấm ở giữa 2 ô phút và giây (sử dụng một text box thứ 4 ở giữa 2 text box trên), thay ñổi kích cỡ chữ (tuy nhiên, cần chắc chắn rằng ô chữ có thể chứa ñược các số gồm 2 chữ số mà không bị nhảy xuống hàng), …
- Bước tiếp theo chúng ta sẽ thêm 3 nút nhấn cho ñồng hồ
- Mở thư viện các nút nhấn bằng cách vào menu Window / Common Libraries / Buttons (hình 7)
Trang 6Hình 7: Mở thư viện các nút nhấn
- Lựa chọn 3 nút nhấn khác nhau và kéo vào giao diện ñồng hồ ðể dễ dàng phân biệt, CENTEA lần lượt ñánh số các nút nhấn từ trái qua phải là 1, 2 và 3 (hình 8)
Hình 8: Các nút ñược ñưa vào giao diện của ñồng hồ và ñược ñánh số lần lượt là 1, 2, 3
- Chọn từng nút và ñiền thông số Instance name như hướng dẫn phía dưới
Trang 7Nút 1: sẽ ñược ñặt tên là nút Play
Chức năng của nút 1: khi nhấn vào nút Play, ñồng hồ sẽ bắt ñầu ñếm ngược từ con số phút và giây ñược nhập vào
Thông số Instance name của nút Play: ok_btn (hình 9)
Hình 9: Thông số của nút Play
Nút 2: sẽ ñược ñặt tên là nút Pause
Chức năng của nút 2: khi nhấn vào nút Pause, ñồng hồ sẽ tạm ngừng ñếm, ñể ñồng hồ hoạt ñộng lại, ta phải nhấn nút Play Lúc này, ñồng hồ sẽ ñếm lại từ thời ñiểm ñang tạm ngừng
Thông số Instance name của nút Pause: pause_btn (hình 10)
Hình 10: Thông số của nút Pause Nút 3: sẽ ñược ñặt tên là nút Replay
Chức năng của nút 3: khi nhấn vào nút Replay, ñồng hồ sẽ trở về các thời ñiểm 00 phút
và 00 giây ñể sẵn sàng ñón nhận giá trị mới do chúng ta nhập vào
Thông số Instance name của nút Replay: replay_btn (hình 11)
Trang 8Hình 11: Thông số của nút Replay
III Viết mã lệnh chương trình
- Tạo một lớp mới, bằng cách nhấn vào dấu cộng (+) trên thanh Timeline (hình 12)
Hình 12: Tạo một lớp mới bằng cách nhấn vào dấu cộng (Insert Layer)
- Nhấn chuột vào ô ñầu tiên của lớp vừa tạo (frame 1 của layer 2) ñể chọn ô này (hình 13)
Hình 13: Nhấn chuột vào ô ñầu tiên của lớp thứ 2
Trang 9- Mở bảng viết mã ActionScript lên, bằng cách vào menu Window / Actions hoặc nhấn phím F9 trên bàn phím (hình 14) Chú ý là ô ñầu tiên của lớp thứ 2 vẫn ñang ñược chọn (có màu ñen trên thanh Timeline) vì chúng ta sẽ viết mã chương trình trong ô ñầu tiên này
Hình 14: Mở bảng viết mã chương trình trong lúc ô số 1 của lớp thứ 2 vẫn ñang ñược
chọn
- Lúc này màn hình sẽ có dạng như hình 15
Hình 15: Cửa số viết mã chương trình
Trang 10- Dán ñoạn code phía dưới vào cửa sổ viết mã chương trình (phần phía bên tay phải) bằng cách copy ñoạn mã và paste vào
Chú ý:
• ðoạn mã bên dưới cũng ñược CENTEA cung cấp riêng biệt trong file text có tên là
code_countdown_2.txt ñược cung cấp kèm với bài hướng dẫn này Thầy Cô và các bạn có thể mở file text ñó lên, copy toàn bộ mã lệnh và dán vào cửa sổ viết mã chương trình của Flash
• ðoạn mã của 2 phiên bản ñồng hồ là khác nhau và không ñược sử dụng lẫn lộn Stage.showMenu=false;
Trang 12- Lúc này, màn hình giống hình 16 Chúng ta sẽ nhận thấy rằng, ô ñầu tiên của lớp thứ 2
sẽ có một ký hiệu: a Ký hiệu này cho chúng ta biết rằng ô này có chứa mã chương trình
Hình 16: Tiến hành dán code chương trình vào cửa sổ viết mã bên tay phải
- Tiến hành lưu file Flash Chúng ta qua bước kế tiếp: Làm việc với âm thanh
IV Làm việc với âm thanh
- Các âm thanh ñược ñưa vào file Flash sẽ làm cho chương trình sống ñộng hơn và thu hút hơn
Trang 13- ðối với phiên bản Flash chạy trên hệ ñiều hành Windows thì các ñịnh dạng âm thanh sau
có thể ñược ñưa vào file Flash: WAV, MP3
- Trong phiên bản 2 của ñồng hồ ñếm ngược mà CENTEA ñang hướng dẫn Thầy Cô thực hiện, chúng ta sẽ cần 2 âm thanh khác nhau
+ Âm thanh 1: có ñộ ngắn thích hợp ñể làm âm thanh gõ nhịp ở mỗi giây sau cùng CENTEA ñặt tên âm thanh này là ding (giống tiếng gõ nhịp của chuông hay ñồng hồ) ðối với ñồng hồ phiên bản 2, khi ñồng hồ bắt ñầu bước vào ñếm 5 giây cuối cùng, thì âm thanh ding sẽ vang lên ở mỗi giây này
+ Âm thanh 2: có ñộ dài ñể báo hiệu kết thúc ở giây cuối cùng khi ñồng hồ chỉ 00:00
Âm thanh này có thể tương tự như một tràng pháo tay, một hồi còi dài, một tiếng chuông dài, …CENTEA ñặt tên âm thanh này là end
- Thầy Cô và các bạn có thể tự tìm các loại âm thanh phù hợp cho mình trên mạng Internet hay tại các ñiểm bán CD, sau ñó chép chung các file âm thanh ñã lựa chọn vào một thư mục trên máy tính
Chúng ta bắt ñầu ñưa các file âm thanh vào trong file Flash
- Vào menu File / Import / Import to Library… (hình 17)
Hình 17: Sử dụng menu Import to Library…
Trang 14- Tìm ñến các file âm thanh mà Thầy Cô ñã lựa chọn và chép sẵn vào máy tính, sau ñó nhấn nút Open (hình 18)
Hình 18: Lựa chọn các file âm thanh và nhấn nút Open
- Trong hình 18, Thầy Cô thấy rằng CENTEA lựa chọn file âm thanh có tên là trumpets1 File này sẽ ñược CENTEA dùng làm âm thanh báo hiệu kết thúc
- Tiếp tục, ñưa vào file âm thanh thứ 2 với quy trình tương tự như trên (hình 19) Trong hình 19, CENTEA ñưa file âm thanh có tên clock4 vào file Flash File này có âm thanh ngắn gọn và sẽ ñược dùng ñể làm âm thanh gõ nhịp ở 5 giây cuối
Trang 15Hình 19: ðưa âm thanh thứ 2 vào file Flash
- Lúc này, trong cửa sổ Library của file Flash (nếu không thấy cửa sổ này, Thầy Cô và các bạn nhấn Ctrl + L) chúng ta sẽ thấy có 2 file âm thanh xuất hiện (hình 20)
Hình 20: Cửa sổ Library
Trang 16- Sau khi ñưa các file âm thanh vào file Flash, chúng ta vẫn chưa thể sử dụng các file âm thanh này, vì chúng ta chưa tiến hành liên kết các file âm thanh vào ñoạn mã chương trình của ñồng hồ ñếm ngược Xin mời Thầy Cô qua bước tạo liên kết của công ñoạn thực hiện ñồng hồ ñếm ngược phiên bản 2
ðể tiến hành liên kết, chúng ta làm như sau:
- Nh p chu t ph i lên file âm thanh tên clock4 trong c)a s* Library, và chọn lệnh Linkage… từ menu xổ ra (hình 21)
Hình 21: Nhấp chuột phải lên file âm thanh và chọn lệnh Linkage…
- Trong cửa sổ Linkage Properties, tại mục Linkage, chọn Export for ActionScript Tại
ô Identifier, nhập vào chữ ding (hình 22)
Trang 17Hình 22: Chọn Export for ActionScript
- Lặp lại quá trình trên cho file âm thanh trumpets1, với Identifier là end (hình 23)
Hình 23: ðặt Identifier cho file trumpets1 là end
- Tiến hành lưu lại file Flash Menu File / Save (hoặc nhấn Ctrl+S) Như vậy là Thầy Cô và các bạn ñã hoàn thành xong phiên bản 2 của ñồng hồ ñếm ngược Chúng ta có thể nhấn nút Ctrl + Enter ñể chạy kiểm tra file Flash (vào vào menu Control / Test Movie) Khi tiến hành chạy kiểm tra thử, chúng ta sẽ thấy ñồng hồ hoạt ñộng như hình 24 bên dưới
Hình 24: Màn hình ñồng hồ ñếm ngược phiên bản 2 khi chạy kiểm tra
Trang 18V Tinh chỉnh cho ựồng hồ phiên bản 2
Trong phiên bản ựồng hồ mà chúng ta vừa thực hiện bên trên có 2 yếu tố mà Thầy Cô và các bạn có thể can thiệp vào ựoạn code của chương trình ựể tùy biến cho phù hợp với nhu cầu riêng của mỗi người đó là:
Yếu tố thứ 1: Dòng chữ ỘHết giờỢ xuất hiện mỗi khi quá trình ựếm ngược kết thúc Nếu Thầy Cô và các bạn muốn ựổi thành dòng chữ khác như: K-t thúc, Th.i gian ựã h-t, Các
em n p bài, Ầ Chúng ta sẽ sửa như sau:
- Chọn lại ô số 1 của Layer 2, sau ựó nhấn F9 ựể mở lại cửa sổ viết mã chương trình (xin xem lại hình 13 và 14)
- Tìm tới dòng code thứ 61, chúng ta sẽ thấy dòng chữ:
Lưu ý: cuối dòng code có dấu chấm phẩy (;)
Hình 25: Sửa dòng thông báo tại vị trắ dòng code thứ 61
- Tiến hành lưu file Flash và test thử, chúng ta sẽ nhận ựược câu báo hiệu khi hết giờ như hình 26
Hình 26: Câu báo hiệu ựã ựược thay ựổi
Trang 19Yếu tố thứ 2: Thời gian bắt ñầu gõ nhịp báo hiệu kết thúc Trong phiên bản thực hiện phía trên, thời gian ñược chúng tôi lập trình sẵn là 5 giây Nếu Thầy Cô muốn thay ñổi thời gian này thành 10 giây, 3 giây hoặc 8 giây, …bất kỳ khoảng thời gian nào chúng ta muốn, vui lòng thực hiện như hướng dẫn bên dưới
- Chọn ô số 1 của Layer 2 và nhấn phím F9 ñể mở cửa sổ viết code
- Tìm tới dòng code thứ 45, chúng ta sẽ thấy có dòng chữ
if (min == 0 && sec <=5) {
- Sửa con số 5 ở phía cuối thành một số giây bất kỳ như 7, 3, 10, … và tiến hành lưu file Flash Lúc này dòng code 45 sẽ giống như hình bên dưới
Hình 27: Sửa con số 5 thành số giây bất kỳ Lưu ý: số giây bắt ñầu gõ nhịp càng lớn thì càng dễ làm người chơi bị phân tán sự tập trung
- Xin mời Thầy Cô và các bạn qua bước cuối cùng ñể xuất bản file
VI Xuất bản file
- Nếu ñã cảm thấy hài lòng với giao diện, màu sắc, hoạt ñộng của ñồng hồ, chúng ta tiến hành xuất bản file
- Vào menu File / Publish Settings… (hình 28) ñánh dấu chọn trước các mục Flash (ñể xuất ra file Flash có ñịnh dạng swf) và Windows Projector (ñể xuất ra file tự chạy, có ñịnh dạng exe), nhấn nút Publish, sau ñó nhấn nút OK (hình 29)
Trang 20VII Lời kết
Với bài hư@ng dAn ThBc hiCn ñDng hD ñ-m ngưEc bFng Flash - phIn 2 ñược viết chi tiết và minh họa ñầy ñủ, CENTEA tin rằng Thầy Cô và các bạn hoàn toàn có thể tự thực
Trang 21hiện chiếc ñồng hồ của mình một cách dễ dàng, nhằm có thêm một công cụ Tin học nhỏ giúp ích cho quá trình giảng dạy và công tác
ðể tạo sự thuận tiện cho quá trình tham khảo của Thầy Cô, CENTEA ñính kèm với bài hướng dẫn phần 2 này một số file:
- File Flash nguồn của ñồng hồ: dongho_2.fla ðây là file ñược thực hiện cho ví dụ trong bài viết Phải sử dụng chương trình Flash 8 mới mở ñược file này
- File source code của ñồng hồ: code_countdown_2.txt ðây là file text chứa các ñoạn mã chương trình ñể ñưa vào ñồng hồ trong quá trình thực hiện với chương trình Flash
- File ñồng hồ ñếm ngược dạng Flash và dạng tự chạy: dongho_2.swf và
dongho_2.exe ðây là 2 file kết quả cuối cùng của bài thực hành, ñược xuất bản từ chương trình Flash
Tất cả các file ñính kèm trong 2 phần của bài viết này ñều ñược sử dụng tự do với mục ñích giáo dục và phi thương mại Thầy Cô và các bạn ñược toàn quyền chỉnh sửa và thay ñổi các file trên
Kính chúc quý Thầy Cô và các bạn có những chiếc ñồng hồ ñếm ngược xinh xắn và hữu ích
Nếu trong quá trình thực hiện, có những trở ngại và thắc mắc, xin ñừng ngần ngại liên hệ với Trung tâm hỗ trợ giáo viên – CENTEA (www.giaovien.net) ñể ñược giúp ñỡ