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]
(1)4/5/2008 HƯỚNG DẪN THỰC HIỆN ðỒNG HỒ ðẾM NGƯỢC BẰNG FLASH Phần - CENTEA - Phần bài viết hướng dẫn Thầy Cô và các bạn cách thức thực ñồng hồ ñếm ngược Flash có thêm số chức cải tiến so với phiên số (xem phần bài hướng dẫn) Phiên ñồng hồ thực phần này ñược CENTEA gọi là phiên số – bao gồm số cải tiến sau: có khung chữ báo “Hết giờ” kết thúc, có âm vào số giây cuối cùng, có âm kết thúc ñồng hồ ñếm 00:00 ðồng hồ ñếm ngược sau ñược thực hiện, có thể dễ dàng ñưa vào PowerPoint chạy ñộc lập chương trình bình thường * ðối tượng bài viết hướng ñến: các Thầy Cô ñã làm quen với chương trình Flash ñã thực thành công ñồng hồ phiên www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 1/21 (2) 4/5/2008 I Thiết lập giao diện ñồng hồ - Mở chương trình Flash lên - Trong mục Create New, chọn Flash Document (hình 1) Hình 1: Chọn Flash Document mục Create New - Sau ñó thiết lập kích cỡ cho giao diện ñồng hồ tùy ý 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 ñồng hồ Hình 3: Lựa chọn CENTEA cho ví dụ bài viết này www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 2/21 (3) 4/5/2008 - 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ó thể ñổi màu cho giao diện, 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 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 tương 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) www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 3/21 (4) 4/5/2008 Hình 5: Các thông số cho ô tính giây - Tạo 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ì ô thông báo xuất dòng chữ “Hết giờ” www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 4/21 (5) 4/5/2008 Hình 6: Các thông số cho ô thông báo kết thúc - Như là chúng ta ñã tạo xong ô 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 như: thay ñổi màu chữ, tạo dấu hai chấm ô phút và giây (sử dụng text box thứ text box trên), thay ñổi kích cỡ chữ (tuy nhiên, cần chắn ô chữ có thể chứa ñược các số gồm chữ số mà không bị nhảy xuống hàng), … - Bước chúng ta thêm nút nhấn cho ñồng hồ - Mở thư viện các nút nhấn cách vào menu Window / Common Libraries / Buttons (hình 7) www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 5/21 (6) 4/5/2008 Hình 7: Mở thư viện các nút nhấn - Lựa chọn nút nhấn khác và kéo vào giao diện ñồng hồ ðể dễ dàng phân biệt, CENTEA ñánh số các nút nhấn từ trái qua phải là 1, và (hình 8) Hình 8: Các nút ñược ñưa vào giao diện ñồng hồ và ñược ñánh số là 1, 2, - Chọn nút và ñiền thông số Instance name hướng dẫn phía www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 6/21 (7) 4/5/2008 Nút 1: ñược ñặt tên là nút Play Chức nút 1: nhấn vào nút Play, ñồng hồ bắt ñầu ñếm ngược từ số phút và giây ñược nhập vào Thông số Instance name nút Play: ok_btn (hình 9) Hình 9: Thông số nút Play Nút 2: ñược ñặt tên là nút Pause Chức nút 2: nhấn vào nút Pause, ñồng hồ 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ồ ñếm lại từ thời ñiểm ñang tạm ngừng Thông số Instance name nút Pause: pause_btn (hình 10) Hình 10: Thông số nút Pause Nút 3: ñược ñặt tên là nút Replay Chức nút 3: nhấn vào nút Replay, ñồng hồ trở các thời ñiểm 00 phút và 00 giây ñể sẵn sàng ñón nhận giá trị chúng ta nhập vào Thông số Instance name nút Replay: replay_btn (hình 11) www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 7/21 (8) 4/5/2008 Hình 11: Thông số nút Replay III Viết mã lệnh chương trình - Tạo lớp mới, cách nhấn vào dấu cộng (+) trên Timeline (hình 12) Hình 12: Tạo lớp cách nhấn vào dấu cộng (Insert Layer) - Nhấn chuột vào ô ñầu tiên lớp vừa tạo (frame layer 2) ñể chọn ô này (hình 13) Hình 13: Nhấn chuột vào ô ñầu tiên lớp thứ www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 8/21 (9) 4/5/2008 - Mở bảng viết mã ActionScript lên, cách vào menu Window / Actions nhấn phím F9 trên bàn phím (hình 14) Chú ý là ô ñầu tiên lớp thứ ñang ñược chọn (có màu ñen trên Timeline) vì chúng ta viết mã chương trình ô ñầu tiên này Hình 14: Mở bảng viết mã chương trình lúc ô số lớp thứ ñang ñược chọn - Lúc này màn hình có dạng hình 15 Hình 15: Cửa số viết mã chương trình www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 9/21 (10) 4/5/2008 - Dán ñoạn code phía vào cửa sổ viết mã chương trình (phần phía bên tay phải) cách copy ñoạn mã và paste vào Chú ý: • ðoạn mã bên ñược CENTEA cung cấp riêng biệt 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 mã lệnh và dán vào cửa sổ viết mã chương trình Flash • ðoạn mã phiên ñồng hồ là khác và không ñược sử dụng lẫn lộn Stage.showMenu=false; var min:Number = 0; var sec:Number = 0; second.restrict = "0-9"; second.maxChars = 2; minute.restrict = "0-9"; minute.maxChars = 2; timeout = ""; var sound_end:Sound = new Sound(); sound_end.attachSound("end"); var sound_ding:Sound = new Sound(); sound_ding.attachSound("ding"); _root.ok_btn.onRelease = function() { = minu; sec = seco; timeout = ""; if (min != || sec != 0) { minute.selectable = false; second.selectable = false; ID = setInterval(down, 1000); this.enabled = false; } }; _root.pause_btn.onRelease = function() { clearInterval(ID); _root.ok_btn.enabled = true; }; _root.replay_btn.onRelease = function() { minu = "00"; seco = "00"; clearInterval(ID); _root.ok_btn.enabled = true; minute.selectable = true; second.selectable = true; timeout = ""; www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 10/21 (11) 4/5/2008 }; function down() { if (min != || sec != 0) { sec ; if (sec<0) { sec = 59; ; } if (min == && sec <=5) { sound_ding.start(); } seco = String(sec); minu = String(min); if (seco.length<2) { seco = "0"+seco; } if (minu.length<2) { minu = "0"+minu; } } else { minute.selectable = true; second.selectable = true; clearInterval(ID); timeout = "Hết giờ"; sound_end.start(); } } _root.minute.onSetFocus = function() { minu = ""; _root.ok_btn.enabled = true; }; _root.minute.onKillFocus = function() { if (minu.length == 0) { minu = "00"; } else if (minu.length == 1) { minu = "0"+minu; } }; _root.second.onSetFocus = function() { seco = ""; _root.ok_btn.enabled = true; }; _root.second.onKillFocus = function() { if (seco.length == 0) { seco = "00"; www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 11/21 (12) 4/5/2008 } else if (seco.length == 1) { seco = "0"+seco; } else if (Number(seco)>59) { seco = "59"; } }; - Lúc này, màn hình giống hình 16 Chúng ta nhận thấy rằng, ô ñầu tiên lớp thứ có ký hiệu: a Ký hiệu này cho chúng ta biết ô 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 IV Làm việc với âm - Các âm ñược ñưa vào file Flash làm cho chương trình sống ñộng và thu hút www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 12/21 (13) 4/5/2008 - ðối với phiên Flash chạy trên hệ ñiều hành Windows thì các ñịnh dạng âm sau có thể ñược ñưa vào file Flash: WAV, MP3 - Trong phiên ñồng hồ ñếm ngược mà CENTEA ñang hướng dẫn Thầy Cô thực hiện, chúng ta cần âm khác + Âm 1: có ñộ ngắn thích hợp ñể làm âm gõ nhịp giây sau cùng CENTEA ñặt tên âm này là ding (giống tiếng gõ nhịp chuông hay ñồng hồ) ðối với ñồng hồ phiên 2, ñồng hồ bắt ñầu bước vào ñếm giây cuối cùng, thì âm ding vang lên giây này + Âm 2: có ñộ dài ñể báo hiệu kết thúc giây cuối cùng ñồng hồ 00:00 Âm này có thể tương tự tràng pháo tay, hồi còi dài, tiếng chuông dài, …CENTEA ñặt tên âm này là end - Thầy Cô và các bạn có thể tự tìm các loại âm phù hợp cho mình trên mạng Internet hay các ñiểm bán CD, sau ñó chép chung các file âm ñã lựa chọn vào thư mục trên máy tính Chúng ta bắt ñầu ñưa các file âm vào file Flash - Vào menu File / Import / Import to Library… (hình 17) Hình 17: Sử dụng menu Import to Library… www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 13/21 (14) 4/5/2008 - Tìm ñến các file âm 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 và nhấn nút Open - Trong hình 18, Thầy Cô thấy CENTEA lựa chọn file âm có tên là trumpets1 File này ñược CENTEA dùng làm âm báo hiệu kết thúc - Tiếp tục, ñưa vào file âm thứ với quy trình tương tự trên (hình 19) Trong hình 19, CENTEA ñưa file âm có tên clock4 vào file Flash File này có âm ngắn gọn và ñược dùng ñể làm âm gõ nhịp giây cuối www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 14/21 (15) 4/5/2008 Hình 19: ðưa âm thứ vào file Flash - Lúc này, cửa sổ Library 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 thấy có file âm xuất (hình 20) Hình 20: Cửa sổ Library www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 15/21 (16) 4/5/2008 - Sau ñưa các file âm vào file Flash, chúng ta chưa thể sử dụng các file âm này, vì chúng ta chưa tiến hành liên kết các file âm vào ñoạn mã chương trình ñồng hồ ñếm ngược Xin mời Thầy Cô qua bước tạo liên kết công ñoạn thực ñồng hồ ñếm ngược phiên ðể tiến hành liên kết, chúng ta làm sau: - Nh p chu t ph i lên file âm tên clock4 c)a s* Library, và chọn lệnh Linkage… từ menu xổ (hình 21) Hình 21: Nhấp chuột phải lên file âm và chọn lệnh Linkage… - Trong cửa sổ Linkage Properties, mục Linkage, chọn Export for ActionScript Tại ô Identifier, nhập vào chữ ding (hình 22) www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 16/21 (17) 4/5/2008 Hình 22: Chọn Export for ActionScript - Lặp lại quá trình trên cho file âm 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ư là Thầy Cô và các bạn ñã hoàn thành xong phiên ñồ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 thấy ñồng hồ hoạt ñộng hình 24 bên Hình 24: Màn hình ñồng hồ ñếm ngược phiên chạy kiểm tra www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 17/21 (18) 4/5/2008 V Tinh chỉnh cho ñồng hồ phiên Trong phiên ñồng hồ mà chúng ta vừa thực bên trên có yếu tố mà Thầy Cô và các bạn có thể can thiệp vào ñoạn code chương trình ñể tùy biến cho phù hợp với nhu cầu riêng người đó là: Yếu tố thứ 1: Dòng chữ “Hết giờ” xuất 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ửa sau: - Chọn lại ô số 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 thấy dòng chữ: timeout = “H-t gi.”; - Sửa chữ “Hết giờ” thành chữ gì mà Thầy Cô mong muốn, ví dụ: Các em nộp bài Lưu ý: dùng bảng mã Unicode gõ chữ - Lúc này, dòng chữ phía trên trở thành timeout = “Các em n p bài”; (xin xem hình 25) 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 vị trí dòng code thứ 61 - Tiến hành lưu file Flash và test thử, chúng ta nhận ñược câu báo hiệu hết hình 26 Hình 26: Câu báo hiệu ñã ñược thay ñổi www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 18/21 (19) 4/5/2008 Yếu tố thứ 2: Thời gian bắt ñầu gõ nhịp báo hiệu kết thúc Trong phiên thực phía trên, thời gian ñược chúng tôi lập trình sẵn là giây Nếu Thầy Cô muốn thay ñổi thời gian này thành 10 giây, giây giây, …bất kỳ khoảng thời gian nào chúng ta muốn, vui lòng thực hướng dẫn bên - Chọn ô số Layer 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 thấy có dòng chữ if (min == && sec <=5) { Sửa số phía cuối thành số giây 7, 3, 10, … và tiến hành lưu file Flash Lúc này dòng code 45 giống hình bên Hình 27: Sửa số thành số giây 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 tập trung - Xin mời Thầy Cô và các bạn qua bước cuối cùng ñể xuất file VI Xuất file - Nếu ñã cảm thấy hài lòng với giao diện, màu sắc, hoạt ñộng ñồng hồ, chúng ta tiến hành xuất file - Vào menu File / Publish Settings… (hình 28) ñánh dấu chọn trước các mục Flash (ñể xuất file Flash có ñịnh dạng swf) và Windows Projector (ñể xuất file tự chạy, có ñịnh dạng exe), nhấn nút Publish, sau ñó nhấn nút OK (hình 29) www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 19/21 (20) 4/5/2008 Hình 28 Hinh 29 - Các file xuất nằm cùng thư mục với file Flash chương trình ñồng hồ ñếm ngược - Như là Thầy Cô và các bạn ñã hoàn thành quá trình tạo ñồng hồ ñếm ngược phiên - ðể làm ñồng hồ sinh ñộng, Thầy Cô có thể vận dụng sáng tạo mình ñể trang trí thêm các chi tiết, hoa văn cho ñồng hồ, thêm các văn tên Trường, tổ môn, tên giáo viên, VII Lời kết Với bài hư@ng dAn ThBc hiCn ñDng hD ñ-m ngưEc bFng Flash - phIn ñược viết chi tiết và minh họa ñầy ñủ, CENTEA tin Thầy Cô và các bạn hoàn toàn có thể tự thực www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 20/21 (21) 4/5/2008 ñồng hồ mình cách dễ dàng, nhằm có thêm 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 thuận tiện cho quá trình tham khảo Thầy Cô, CENTEA ñính kèm với bài hướng dẫn phần này số file: - - File Flash nguồn ñồng hồ: dongho_2.fla ðây là file ñược thực cho ví dụ bài viết Phải sử dụng chương trình Flash mở ñược file này File source code ñồ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ồ quá trình thực 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à file kết cuối cùng bài thực hành, ñược xuất từ chương trình Flash Tất các file ñính kèm phần bài viết này ñều ñược sử dụng tự 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ó ñồng hồ ñếm ngược xinh xắn và hữu ích Nếu quá trình thực hiện, có 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 ñỡ Email: centea.info@gmail.com ================================== Bài viết ñược thực bởi: Hà An – www.giaovien.net Với hỗ trợ lập trình từ Bộ phận kỹ thuật CENTEA – CENTEA Tech www.giaovien.net // www.center4teachers.com centea.info@gmail.com Trang 21/21 (22)