nghiên cứu lập trình trò chơi “dắt ngựa về chuồng” phục vụ dạy học toán

TRƢỜNG ĐẠI HỌC CẦN THƠ KHOA SƢ PHẠM BỘ MÔN SP TOÁN HỌC ------------ LUẬN VĂN TỐT NGHIỆP Đề tài: NGHIÊN CỨU LẬP TRÌNH TRÒ CHƠI “DẮT NGỰA VỀ CHUỒNG” PHỤC VỤ DẠY HỌC TOÁN Cán bộ hướng dẫn Sinh viên thực hiện ThS. Bùi Lê Diễm Nguyễn Thị Hạnh Huệ ThS. Bùi Anh Tuấn MSSV: 1100102 Lớp: SP Toán - Tin K36 Cần Thơ, 2014 LỜI CẢM ƠN Em xin kính gửi tới Cô Bùi Lê Diễm (Bộ môn Toán - Trƣờng Đại học Cần Thơ) lòng biết ơn sâu sắc nhất vì đã chỉ bảo và hƣớng dẫn tận tình cho em trong suốt quá trình thực hiện khoá luận này. Em xin kính gửi lời cảm ơn chân thành nhất tới Thầy Bùi Anh Tuấn (Bộ môn Toán - Trƣờng Đại học Cần Thơ) đã chỉ bảo và định hƣớng cho em về đề tài luận văn này. Em xin gửi lời cảm ơn và biết ơn sâu sắc tới các thầy, cô đã dạy dỗ em trong suốt 4 năm học tập tại trƣờng Đại học Cần Thơ. Những kiến thức các thầy, cô dạy là vô cùng quý báu và sẽ là hành trang để em vững bƣớc vào đời. Và cuối cùng, con xin gửi lời cảm ơn và lòng biết ơn tới Cha Mẹ đã nuôi nấng, dạy dỗ và luôn động viên, làm chỗ dựa tinh thần cho con trong cuộc sống cũng nhƣ trong học tập. Xin chân thành cảm ơn! Cần Thơ, ngày 22 tháng 04 năm 2014 Nguyễn Thị Hạnh Huệ -2- MỤC LỤC DANH MỤC CÁC HÌNH ...................................................................................... 6 PHẦN I: MỞ ĐẦU ................................................................................................. 7 PHẦN II: NỘI DUNG NGHIÊN CỨU ................................................................ 8 Chƣơng 1: GIỚI THIỆU CÁC TIỆN ÍCH DÙNG ĐỂ THIẾT KẾ TRÒ CHƠI “DẮT NGỰA VỀ CHUỒNG”............................................................................... 8 1.1 ADOBE FLASH PROFESSIONAL CS5.5 ................................................ 8 1.1.1 Làm quen với giao diện Adobe Flash Professional CS5.5 ................... 8 1.1.2 Các vùng soạn thảo chính .................................................................... 10 a) Vùng Layer và TimeLine...................................................................... 10 b) Vùng thuộc tính Properties ................................................................... 11 c) Vùng thanh công cụ Tools .................................................................... 11 1.1.3 Các biểu tƣợng trong Flash CS5.5 ....................................................... 14 a) Biểu tƣợng Graphic............................................................................... 14 b) Biểu tƣợng Button ................................................................................ 15 c) Biểu tƣợng MovieClip .......................................................................... 17 1.1.4 Tạo hoạt cảnh ....................................................................................... 18 a) Classic Tween ....................................................................................... 18 b) Shape Tween ........................................................................................ 19 c) Motion Tween ....................................................................................... 20 1.2 ACTIONSCRIPT 3.0 .................................................................................. 22 1.2.1 Sơ lƣợc về ActionScript ....................................................................... 22 a) ActionScript là gì? ................................................................................ 22 b) ActionScript có thể làm những gì? ....................................................... 22 c) ActionScript có thể viết trên các đối tƣợng nào? ................................. 22 -3- 1.2.2 Kiểu dữ liệu mảng ................................................................................ 23 1.2.3 Các cấu trúc lệnh điều khiển ................................................................ 24 a) Câu lệnh if ............................................................................................. 24 b) Câu lệnh lặp for .................................................................................... 24 c) Câu lệnh lặp for..in ............................................................................... 25 d) Câu lệnh lặp for each...in ...................................................................... 25 e) Câu lệnh lặp while ................................................................................ 25 f) Câu lệnh lặp do...while .......................................................................... 26 1.2.4 Hàm ...................................................................................................... 26 1.2.5 Vùng chức năng Code Snippets ........................................................... 27 a) Actions .................................................................................................. 28 b)TimeLine Navigation............................................................................. 28 c) Animation ............................................................................................. 29 d) Load and Unload .................................................................................. 29 e) Audio and Video ................................................................................... 29 f) Event Handlers ...................................................................................... 29 g) Nhóm chức năng nâng cao hỗ trợ cho các dòng diện thoại thông minh chạy Android, iOS... ................................................................................ 30 Chƣơng 2: CHƢƠNG TRÌNH TRÒ CHƠI “DẮT NGỰA VỀ CHUỒNG” ......... 31 2.1 MÔ TẢ TRÒ CHƠI “DẮT NGỰA VỀ CHUỒNG” .................................. 31 2.2 TẠO CÁC CẢNH QUAY ........................................................................... 31 2.2.1 Tạo cảnh khởi động của trò chơi .......................................................... 32 2.2.2 Tạo cảnh nơi diễn ra trò chơi ............................................................... 33 2.2.3 Tạo hƣớng dẫn cho trò chơi ................................................................. 34 2.3 LẬP TRÌNH TRÒ CHƠI ............................................................................. 35 2.3.1 Lập trình cảnh 2 - Chơi trò chơi với máy............................................. 35 -4- 2.3.2 Lập trình cảnh 3 - Chơi trò chơi với ngƣời khác.................................. 43 2.3.3 Tạo chuyển động cho trò chơi .............................................................. 47 2.4 TỔ CHỨC TRÒ CHƠI “DẮT NGỰA VỀ CHUỒNG” TRONG DẠY HỌC TOÁN…….. ..................................................................................................... 49 2.4.1 Mục tiêu ............................................................................................... 49 a) Kiến thức............................................................................................... 49 b) Thái độ .................................................................................................. 49 c) Kĩ năng sống ......................................................................................... 49 2.4.2 Tổ chức trò chơi ................................................................................... 49 2.4.3 Kết luận ................................................................................................ 50 PHẦN III: KẾT LUẬN .......................................................................................... 51 TÀI LIỆU THAM KHẢO ..................................................................................... 52 -5- DANH MỤC CÁC HÌNH Hình 1 - Màn hình chào đón của Flash CS5.5 ......................................................... 8 Hình 2 - Cửa sổ ban đầu của Flash CS5.5................................................................ 9 Hình 3 - Giao diện làm việc của Flash CS5.5 .......................................................... 9 Hình 4 - Thanh TimeLine của Flash CS5.5 ............................................................. 10 Hình 5 - Vùng thuộc tính Properties ........................................................................ 11 Hình 6 - Thanh công cụ Tools.................................................................................. 12 Hình 7 - Chuyển đổi sang biểu tƣợng Graphic ........................................................ 14 Hình 8 - Bảng thuộc tính của biểu tƣợng Graphic ................................................... 15 Hình 9 - Chuyển đổi sang biểu tƣợng Button .......................................................... 16 Hình 10 - Bảng thuộc tính của biểu tƣợng Button ................................................... 16 Hình 11 - Bảng thuộc tính của biểu tƣợng MovieClip............................................. 17 Hình 12 - Kĩ thuật Classic Tween ............................................................................ 19 Hình 13 - Kĩ thuật Shape Tween .............................................................................. 20 Hình 14 - Kĩ thuật Motion Tween ............................................................................ 21 Hình 15 - Chức năng Motion Presets ....................................................................... 21 Hình 16 - Hộp thoại Action Panel (đối tƣợng KeyFrame) ....................................... 23 Hình 17 - Vùng chức năng Code Snippets ............................................................... 27 Hình 18 - Cảnh khởi động trò chơi “Dắt ngựa về chuồng” ..................................... 32 Hình 19 - Cảnh 2 (chơi với máy) ............................................................................. 34 Hình 20 - Cảnh 3 (chơi với ngƣời khác) .................................................................. 34 Hình 21 - Hƣớng dẫn trò chơi .................................................................................. 35 Hình 22 - Hộp thoại Publish Settings ....................................................................... 48 -6- PHẦN I: MỞ ĐẦU Những năm gần đây việc ứng dụng công nghệ thông tin vào giáo dục đang đƣợc diễn ra rầm rộ nhằm đổi mới về hình thức và phƣơng pháp giảng dạy, bên trong đó dạy học Toán cũng không ngoại lệ. Với mục tiêu: “Phát huy tính tích cực, chủ động, sáng tạo của học sinh, bồi dƣỡng phƣơng pháp tự học, rèn luyện kỹ năng vận dụng kiến thức vào thực tiễn, tác động đến tình cảm , đem lại niềm vui, hứng thú học tập cho học sinh” [1] việc lập trình các trò chơi một cách hợp lý, lành mạnh để học sinh tự tìm ra các kiến thức là điều cần thiết, đồng thời nếu các trò chơi mang tính học tập tạo đƣợc sự thu hút của các học sinh thì việc lạm dụng các trò chơi máy tính không lành mạnh trong bộ phận học sinh hiện nay sẽ đƣợc cải thiện. Chính vì vậy, việc nghiên cứu lập trình trò chơi phục vụ dạy học là không thể thiếu, cụ thể là trong dạy học toán. Nên chúng tôi quyết định chọn đề tài “Nghiên cứu lập trình trò chơi “Dắt ngựa về chuồng” phục vụ dạy học Toán”. Trong luận văn này chúng tôi cố gắng vận dụng những kiến thức đã học và nghiên cứu đƣợc về phầm mềm Adobe Flash Professional CS5.5 với mục đích có thể lập trình trò chơi: “Dắt ngựa về chuồng” nhằm dạy học khái niệm phép đối xứng tâm để giúp học sinh tự mình khám phá ra đƣợc kiến thức và tự hình thành đƣợc nghĩa của kiến thức đó. Phần nội dung của luận văn bao gồm các chƣơng sau: - Chƣơng I: Giới thiệu các tiện ích dùng để thiết kế trò chơi “Dắt ngựa về chuồng” gồm có: + Adobe Flash Professional CS5.5 + ActionScrip 3.0 - Chƣơng II: Chƣơng trình trò chơi “Dắt ngựa về chuồng” gồm có: + Mô tả trò chơi “Dắt ngựa về chuồng”. + Tạo các cảnh quay. + Lập trình trò chơi. + Tổ chức trò chơi “Dắt ngựa về chuồng” trong dạy học Toán. -7- PHẦN II: NỘI DUNG NGHIÊN CỨU Chƣơng 1 GIỚI THIỆU CÁC TIỆN ÍCH DÙNG ĐỂ THIẾT KẾ TRÒ CHƠI “DẮT NGỰA VỀ CHUỒNG” 1.1 ADOBE FLASH PROFESSIONAL CS5.5 Flash là một kĩ thuật tạo các hiệu ứng động (24 hình/giây), các thƣớc phim hoạt hình, thiết kế giao diện ngƣời dùng cho các ứng dụng web, lập trình các trò chơi từ đơn giản đến nâng cao,... Flash sử dụng đồ hoạ vector có thể phóng to ảnh mà không làm bể hạt nhƣng vẫn đảm bảo kích thƣớc tập tin flash nhỏ gọn và thƣờng đƣợc truyền tải trên World Wide Web, thuận tiện cho ngƣời sử dụng tải về hay sử dụng trực tuyến bất cứ lúc nào. Bên cạnh đó phần mềm Adobe Flash Professional CS5.5 có giao diện thân thiện với ngƣời dùng, có nhiều công cụ mới làm cho việc sáng tạo trở nên đơn giản hơn, đặc biệt có hiệu ứng script hổ trợ các dòng máy có màn hình cảm ứng và tập tin flash xuất ra có thể ở định dạng *.exe chạy ổn định trên mọi hệ điều hành. 1.1.1 Làm quen với giao diện Adobe Flash Professional CS5.5 Khi khởi động Adobe Flash Professional CS5.5 (gọi tắt là Flash CS5.5), màn hình Splash - màn hình chào đón hiện ra: Hình 1 - Màn hình chào đón của Flash CS5.5 -8- Sau khi hoàn thành quá trình khởi động, Flash sẽ hiện ra cửa sổ ban đầu: Hình 2 - Cửa sổ ban đầu của Flash CS5.5 Ở phần Create New, nhấp chọn ActionScript 3.0 (trong luận văn này chúng tôi chỉ sử dụng ActionScript 3.0 và phần này sẽ đƣợc nói rõ hơn trong mục 1.2), giao diện chính thức để làm việc đƣợc hiên ra: Hình 3 - Giao diện làm việc của Flash CS5.5 - Vùng hệ thống menu nằm trên cùng. - Vùng thanh công cụ nằm bên trái. - Vùng thuộc tính và thƣ viện nằm bên phải. - Vùng sáng tác là khung trắng ở trung tâm. - Vùng Layer và TimeLine nằm phía dƣới cùng. Để phóng to hay thu nhỏ khung sáng tác sử dụng Ctrl + = hay Ctrl + - hoặc hiệu chỉnh trên khung hiển thị dấu % cạnh khung thuộc tính. -9- 1.1.2 Các vùng soạn thảo chính a) Vùng Layer và TimeLine Hình 4 - Thanh TimeLine của Flash CS5.5 Layer là các lớp đƣợc dùng trong việc sáng tác. Mỗi một khung hình có thể có nhiều layer khác nhau, mỗi một đối tƣợng thƣờng đƣợc xây dựng trên mỗi layer. - Nhóm biểu tƣợng xoá và tạo layer (nằm dƣới cùng bên góc trái hình 4): biểu tƣợng thứ nhất từ trái sang là tạo player, biểu tƣợng giữa là tạo mới một thư mục để chứa player và biểu tƣợng cuối cùng là xoá layer hoặc thư mục. - Nhóm biểu tƣợng tuỳ chỉnh layer (nằm bên góc phải của vùng layer): biểu tƣợng thứ nhất từ trái sang (hình con mắt) cho phép ẩn hay hiện layer được chọn, biểu tƣợng giữa khoá không cho phép chỉnh sửa đối tượng trên layer được chọn và biểu tƣợng cuối cùng hiển thị đường viền và màu nền hay chỉ hiển thị đường viền của đối tượng. TimeLine chứa nhiều Frame, khi tạo ra chuyển động các Frame lần lƣợt thay thế cho nhau. - Frame (những ô nhỏ đƣợc đánh số nhƣ hình trên) là khung hình dùng trong kĩ thuật tạo chuyển động - Các chức năng hiển thị trên thanh TimeLine: Trong biểu tƣợng menu thả xuống nằm phía trên bên phải có các chức năng sau: Tiny (siêu nhỏ), Small (nhỏ), Normal (bình thƣờng), Medium (trung bình), Large (lớn), Preview (xem rõ hình), Preview in Context (xem rõ hình theo ngữ cảnh). - Các biểu tƣợng tuỳ chỉnh nằm phía dƣới cùng: + Năm biểu tƣợng đầu dùng để di chuyển và chạy thử các Frame. + Biểu tƣợng Center Frame: xác định Frame trung tâm. - 10 - + Biểu tƣợng Onion Skin: cho phép hiển thị toàn bộ hình ảnh của đối tƣợng trên vùng Frame đƣợc chọn (toàn bộ đối tƣợng). + Biểu tƣợng Onion Skin Outlines: cho phép hiển thị viền của đối tƣợng trên vùng Frame đƣợc chọn. + Biểu tƣợng Edit Multiple Frame: cho phép hiển thị đối tƣợng gốc trên toàn bộ đối tƣợng hiển thị theo hai chức năng Onion Skin trên để dễ chỉnh sửa đối tƣợng. b) Vùng thuộc tính (Properties) Mỗi một đối tƣợng đều có các thuộc tính riêng nhƣ màu nền, loại viền, màu viền... Để quản lý các thuộc tính này, Flash CS5.5 bố trí chúng trong một của sổ Properties. Hình 5 - Vùng thuộc tính Properties Publish gồm các tuỳ chỉnh Profile (quản lý các thông tin liên quan đến việc xuất tập tin flash), Player (cho phép tập tin trình chiếu có thể hoạt động tốt trên phiên bản của Flash Player nào), Script (phiên bản ActionScript mà đoạn phim đang sử dụng), Class (nhập tên lớp thể hiện để Flash khởi tạo cú pháp khai báo lớp nội tại). Properties chứa FPS (tốc độ trình chiếu - đo bằng frame trên mỗi giây Frames Per Second), Size (kích thƣớc của khung trình chiếu - đo bằng pixel), Stage (quản lý màu nền của khung soạn thảo). c) Vùng thanh công cụ (Tools) Chứa các công cụ để tạo hình, hiệu chỉnh và tạo các hiệu ứng cho các đối tƣợng. Có thể di chuyển nó và kéo thả nó ở một vị trí bất kỳ cho tiện làm việc. - 11 - Hình 6 - Thanh công cụ Tools Khi di chuyển chuột đến công cụ nào thì sẽ xuất hiện tên của công cụ đó. Bên cạnh một số công cụ có dấu tam giác nhỏ màu đen, khi nhấp chuột vào sẽ xuất hiện bảng chọn những công cụ khác. Đồng thời khi chọn công cụ nào thì vùng Properties sẽ hiển thị các thuộc tính tuỳ chỉnh cho đối tƣợng mà công cụ đó tạo ra. Pencil: dùng để vẽ các đối tƣợng bằng tay, có các thuộc tính sau: + Stroke color: màu sắc của nét vẽ. + Stroke: kích thƣớc của nét vẽ. + Style: dạng thức của nét vẽ, nhấp dấu tam giác để chọn. + Scale: độ kéo giãn của hình đƣợc vẽ, nó có thể là None (không kéo giãn), Normal (kéo giãn bình thƣờng), Horizontal (kéo giãn theo chiều ngang) hoặc Vertical (kéo giãn theo chiều dọc). + Hinting: Giúp bảo vệ nét vẽ ở đƣờng cong khỏi bị mờ. + Cap: thiết lập dạng thức cho đƣờng kết thúc. + Join: xác định cách mà hai phân đoạn của đối tƣợng nối với nhau. + Mitter: điều khiển độ sắc nét của Mitter, khi Cap đƣợc chọn là Mitter. Brush: cũng tƣơng tự Pencil, Brush cũng đƣợc dùng để vẽ nhƣng nét vẽ không bao gồm viền chỉ có màu nền. Brush có các thuộc tính sau: + Fill color: chọn màu cho nét vẽ brush. + Smoothing: thiết đặt độ mềm dẻo cho nét vẽ. Erase: xoá các nét vẽ. Line: dùng để vẽ đƣờng thẳng, có các thuộc tính nhƣ công cụ Pencil. Rectangle: dùng để vẽ hình chữ nhật và các dạng thể biến của nó (có thể là hình vuông, hình bình hành, hình oval,...) thuộc tính tƣơng tự nhƣ Pencil. Text: soạn thảo nội dung văn bản trong flash, có các thuộc tính sau: - 12 - + Text Tool có 3 tuỳ chọn: Static Text (văn bản cố định), Dynamic Text (văn bản có thể chọn, sao chép nhƣng không thể thay đổi), Input Text (nội dung của văn bản có thể thay đổi). + Character: Family (chọn loại phông chữ), Style (chọn dạng thức cho phông chữ), Size (chọn kích thƣớc cho phông chữ), Letter Spacing (chọn độ rộng cho kí tự trắng giữa các chữ cái), Color (chọn màu chữ), Auto Kern (tự động co giãn), AntiAlias (làm cho nét chữ trở nên mƣợt mà hơn). + Show Border around Text: hiển thị đƣờng viền xung quanh văn bản. + SubScript và SuperScript: tạo chỉ số dƣới và chỉ số trên. + Format: căn chỉnh vị trí văn bản. + Spacing và Margin: hiệu chỉnh khoảng cách. + Behavior: hiệu chỉnh tuỳ chọn hiển thị văn bản. + Orientation: thay đổi chiều hiển thị của văn bản. Selection: có thể chọn toàn bộ hoặc một phần đối tƣợng bằng cách kích chuột vào nó hoặc bôi đen một phần của nó. Ngoài ra còn có thể kéo giãn hoặc uốn cong hình thể của đối tƣợng. Laso: tƣơng tự nhƣ công cụ Selection nhƣng có thể chọn đối tƣợng theo hình dạng phức tạp. Paint Bucket: dùng để tô màu nền cho vật thể, có các thuộc tính sau: + Fill Color: đổ màu nền cho đối tƣợng. + Alpha: độ trong suốt của đối tƣợng. Ink Bottle: dùng để tô màu viền của đối tƣợng, có các thuộc tính nhƣ Pencil. EyeDropper: dùng để lấy thông số màu tại một vị trí trên đối tƣợng, chọn biểu tƣợng, sau đó kích vào một vị trí nào đó trên bức ảnh (vị trí mà ta cần lấy thông số màu), khi đó thông số màu nền mặc định sẽ là màu của vị trí vừa kích chuột. Free Transform: dùng để hiệu chỉnh góc cạnh, xoay đối tƣợng, phóng to hay thu nhỏ đối tƣợng, dịch chuyển tƣơng đối các phần của đối tƣợng. - 13 - Gradient Transform: hiệu chỉnh các thông số khi tạo màu cầu vồng cho đối tƣợng (tăng hay giảm kích thƣớc vùng sáng, thay đổi tâm của vùng sáng, thay đổi vị trí vùng màu,...). Pen: dùng để vẽ các đƣờng đa giác bằng cách tạo các điểm điều khiển, sau đó tự động nối các điểm này lại với nhau. Các thuộc tính của công cụ này hoàn toàn tƣơng tự công cụ Line. 1.1.3 Các biểu tƣợng trong Flash CS5.5 a) Biểu tƣợng Graphic Biểu tƣợng Graphic là một hình ảnh tĩnh có thể đƣợc tái sử dụng để tạo ra chuyển động. Bất kì một ảnh điểm, vector hay văn bản đều có thể chuyển đổi thành Graphic. Chúng chỉ có một Frame trên thanh TimeLine. Các bước sau nhằm tạo một Graphic: - Chọn đối tƣợng cần chuyển đổi sang biểu tƣợng Graphic. - Nhấp chuột phải chọn Convert to Symbol (hoặc nhấn phím F8). Đặt tên cho biểu tƣợng sẽ đƣợc tạo trong ô Name, chọn loại biểu tƣợng cần tạo (Graphic). Hình 7 - Chuyển đổi sang biểu tƣợng Graphic - Nhấp OK, một biểu tƣợng Graphic sẽ đƣợc tạo và đƣa vào thƣ viện. Các thuộc tính của biểu tượng Graphic - Thanh tuỳ chọn thả xuống: cho phép chuyển đổi qua lại giữa các biểu tƣợng. - Instance of: khi kích chuột vào tuỳ chọn swap, có thể thay đổi biểu tƣợng của đối tƣợng thể hiện đƣợc chọn. - Position and Size: cho phép hiệu chỉnh vị trí toạ độ của đối tƣợng đang thể hiện (x và y), và kích thƣớc (w - width và h - height). Tuỳ chọn Lock width and - 14 - height values together cho phép thay đổi kích thƣớc chiều rộng và cao đồng thời hay riêng lẻ. - Color effect: tuỳ chọn Style dùng để hiệu chỉnh các thuộc tính Brightness, Tint, Advanced và Alpha cho đối tƣợng. - Looping: tuỳ chọn liên quan đến số lần lặp lại hành động của biểu tƣợng Graphic. Nó có thể là Loop, Play Once và Single Frame. Hình 8 - Bảng thuộc tính của biểu tƣợng Graphic b) Biểu tƣợng Button (nút) Biểu tƣợng Button dùng để bổ sung một tƣơng tác với chƣơng trình, đáp trả các sự kiện kích chuột, ấn phím, kéo các thanh kéo và các hành động khác. Một biểu tƣợng Button sẽ có bốn Frame tƣơng tác: Up, Down, Over và Hit. Biểu tƣợng Button có thể đƣợc cài đặt và điều khiển bằng ActionScript. Các bước để tạo một Button: Cách 1: - Chọn đối tƣợng cần chuyển đổi sang Button. - Nhấp chuột phải chọn Convert to Symbol (hoặc nhấn phím F8). Đặt tên cho biểu tƣợng sẽ đƣợc tạo trong ô Name, chọn loại biểu tƣợng cần tạo (Button). - 15 - Hình 9 - Chuyển đổi sang biểu tƣợng Button - Nhấp OK để hoàn tất việc tạo Button. Cách 2: Sử dụng các Button đƣợc tạo sẵn bằng cách vào Windows  Common Libraries  Button. Cách 3: Sử dụng Commands bằng cách tạo một khối hình thể, nhấp chọn nó, sau đó vào Commands  Make Button. Các thuộc tính của biểu tượng Button Hình 10 - Bảng thuộc tính của biểu tƣợng Button - Instance Name: tên hiển thị của biểu tƣợng. Đƣợc dùng khi làm việc với ActionScript. - 16 - - Thanh tuỳ chọn thả xuống: cho phép chuyển đổi qua lại giữa các biểu tƣợng. - Instance of: chọn swap để thay đổi biểu tƣợng cho đối tƣợng hiển thị. - Position and Size: thay đổi vị trí và kích thƣớc cho đối tƣợng. - Color effect: chọn hiệu ứng màu sắc cho đối tƣợng, bao gồm Brightness, Tint, Advanced và Alpha. - Display: với thuộc tính Blending, cho phép ta chọn các chế độ pha trộn màu sắc cho Button. - Tracking: với Options gồm 2 tuỳ chọn Track as Button hoặc Track as MenuItem. - Filter: hoàn toàn tƣơng tự Filter khi làm việc với công cụ Text. c) Biểu tƣợng MovieClip Là một mẫu hoạt hình của Flash có thể đƣợc tái sử dụng. Khác với Graphic và Button, MovieClip có riêng một TimeLine với vô số Frame có thể dùng để tạo hoạt hình. Một MovieClip có thể bao gồm một hoặc nhiều biểu tƣợng Graphic, Button hoặc thậm chí là MovieClip. Cũng tƣơng tự nhƣ Button, có thể cài một tên hiển thị cho nó để điều khiển nó bằng ActionScript. Các thuộc tính của MovieClip Hình 11 - Bảng thuộc tính của biểu tƣợng MovieClip - 17 - Bên cạnh một số thuộc tính quen thuộc tƣơng đồng với Graphic và Button, MovieClip còn có một số thuộc tính nâng cao khác: - 3D Position and View: hiệu chỉnh vị trí trong không gian và khung nhìn ba chiều. - Perspective Angle: hiệu chỉnh góc phối cảnh theo độ xa gần. - Vanishing Point: hiệu chỉnh toạ độ của điểm triệt tiêu. 1.1.4 Tạo hoạt cảnh a) Classic Tween Classic Tween là một kĩ thuật tạo chuyển động cho đối tƣợng. Khi sử dụng Classic Tween, đối tƣợng sẽ đƣợc chuyển đổi thành hai biểu tƣợng Graphic (một biểu tƣợng cho KeyFrame đầu tiên và một biểu tƣợng cho KeyFrame kết thúc. Không thể sử dụng các hiệu ứng ba chiều cho Classic Tween cũng nhƣ không thể sử dụng các chức năng swap symbol cho đối tƣợng thể hiện, nhƣng Classic Tween cho phép chứa Frame ActionScript. Các bước sử dụng Classic Tween để tạo hiệu ứng động Đây là một ví dụ tạo hình tròn chuyển động không theo một phƣơng hƣớng nhất định nào. - Bƣớc 1: Dùng công cụ Oval để tạo hình tròn (kết hợp với phím Shift), dùng công cụ Free Transform chọn hết cả hình tròn (bao gồm viền và nền), nhấn phím F8 chuyển hình tròn từ Shape thành MovieClip, đặt tên tuỳ ý. - Bƣớc 2: Kích chuột vào Frame thứ 20, nhấn F6 để chèn KeyFrame kết thúc, thay đổi vị trí hình tròn tại Frame thứ 20 này, tiếp tục tạo các KeyFrame tại các vị trí Frame thứ 30, 40, 45, 55 và thay đổi vị trí của chúng ở các Frame này. - Bƣớc 3: Nhấp chuột vào giữa các khoảng cách giữa KeyFrame mở đầu và KeyFrame kết thúc, nhấp phải chuột chọn Classic Tween. Và làm tƣơng tự cho các khoảng KeyFrame còn lại. - Bƣớc 4: Nhấn Ctrl + Enter để kiểm tra. Nếu muốn điều chỉnh tốc độ của chuyển động thì thay đổi vị trí Frame (mặc định của Flash CS5.5 là 24 hình/giây). - 18 - Hình 12 - Kĩ thuật Classic Tween Trong hình minh hoạ sử dụng hình tròn với nền trắng và dùng công cụ Onion Skin (đã đƣợc kéo hai đầu mút từ Frame 1 đến Frame 55) để mô tả chuyển động. b) Shape Tween Chức năng chính của Shape Tween là “biến hình”, cũng tƣơng tự nhƣ Classic Tween, phải tạo hai KeyFrame mở đầu và kết thúc để hình thành chuyển động, cơ chế của nó là nhờ vào thuật toán Transform, nghĩa là sẽ dịch chuyển các điểm đƣợc đánh dấu theo một chỉ số nào đó ở Frame đầu tiên đến vị trí đƣợc đánh dấu cùng chỉ số trong Frame cuối cùng. Shape Tween không hỗ trợ hiệu ứng ba chiều, cũng không hỗ trợ chức năng swap symbol. Các bước sử dụng Shape Tween để tạo hiệu ứng động Đây là ví dụ đặc trƣng của Shape Tween - tạo hiệu ứng biến đƣờng thẳng thành đƣờng cong, và ví dụ này không thể thực hiện ở Classic Tween và Motion Tween. - Bƣớc 1: Dùng công cụ Line vẽ một đƣờng thẳng trên khung sáng tác. - Bƣớc 2: Dùng công cụ Selection, bấm chọn đƣờng thẳng, kích chuột phải và chọn Create Shape Tween. - Bƣớc 3: Chọn Frame thứ 50 nhấn F6 và Frame thứ 25 nhấn F6, tại Frame thứ 25 này dùng công cụ Add Anchor Point nhấp vào đƣờng thẳng để bổ sung các điểm điều khiển, sau đó dùng công cụ Convert Anchor Point để tạo điểm uốn. Khi - 19 - thực hiện các thao tác trên có nghĩa là làm đƣờng thẳng ở Frame 1 từ từ biến thành đƣờng cong ở Frame 25 và đƣờng cong này từ từ biến trở lại thành đƣờng thẳng ở Frame 50, điều này giúp chuyển động trở nên mƣợt mà hơn. - Bƣớc 4: Nhấn Ctrl + Enter để kiểm tra kết quả. Hình 13 - Kĩ thuật Shape Tween c) Motion Tween Kĩ thuật Motion Tween cũng đƣợc dùng để tạo chuyển động nhƣ hai Tween trên nhƣng nó đơn giản hơn kĩ thuật Classic Tween nhiều. Nó không đòi hỏi bạn phải tạo các KeyFrame, mà nó còn hổ trợ hiệu ứng ba chiều (Translation và Rotation). Với Motion Tween việc hiệu chỉnh đƣờng dịch chuyển, toạ độ, góc xoay, Filter, Blending,... là một việc rất đơn giản nhờ vào công cụ Selection và thuộc tính trong bảng Motion Editor. Các bước sử dụng Motion Tween để tạo hiệu ứng động Đây là ví dụ tạo hình trái tim chuyển động theo đƣờng cong bất kỳ. - Bƣớc 1: Dùng công cụ Brush vẽ hình trái tim (hoặc một hình ảnh bất kì) trên khung sáng tác. - Bƣớc 2: Bấm vào công cụ Selection, nhấp chọn đối tƣợng vừa vẽ. Kích chuột phải chọn Create Motion Tween. Flash sẽ tự động tạo một khoảng Frame mặc định để tạo chuyển động. Nếu số lƣợng Frame này không thoả mãn nhu cầu sử dụng, có thể thay đổi nó bằng cách đặt con trỏ chuột vào vị trí cuối cùng của vùng Frame - 20 - đƣợc đánh dấu, khi trỏ chuột có dạng mũi tên hai chiều, hãy nhấp chuột và kéo sang trái hoặc sang phải. - Bƣớc 3: Di chuyển hình vẽ sang vị trí mới, khi đó trên khung sáng tác sẽ xuất hiện một thanh mô tả chuyển động màu xanh lá, có thể sử dụng công cụ Selection để thay đổi dạng thức của đƣờng chuyển động. - Bƣớc 4: Nhấn Ctrl + Enter để kiểm tra. Hình 14 - Kĩ thuật Motion Tween Tạo chuyển động nhờ vào Motion Presets Chức năng Motion Presets này cung cấp rất nhiều hiệu ứng làm sẵn, đầu tiên hãy tạo một đối tƣợng (dùng công cụ vẽ một hình bất kỳ trên khung sáng tác), mở chức năng Motion Presets bằng cách vào Windows  Motion Presets, sau đó chọn đối tƣợng và chọn hiệu ứng chuyển động tƣơng ứng trong khung Motion Presets vừa mới xuất hiện. Hình 15 - Chức năng Motion Presets - 21 - 1.2 ACTIONSCRIPT 3.0 1.2.1 Sơ lƣợc về ActionScript a) ActionScript là gì? ActionScript là ngôn ngữ lập trình đƣợc xây dựng trong Flash tƣơng tự nhƣ JavaScript, C++,... Với các lệnh sai khiến ActionScript khiến Flash movie làm việc theo đúng những gì đƣợc lập trình. Phần nhiều thì ActionScript chỉ làm việc trong môi trƣờng của Flash, tuy nhiên nó cũng có thể gửi lệnh cho brower hay hệ điều hành. b) ActionScript có thể làm những gì? Flash có thể có các cảnh trình chiếu (Scene), mỗi cảnh sẽ có một TimeLine, trong một TimeLine sẽ có các Frame bắt đầu từ số 1. Thông thƣờng Flash sẽ chạy từ Frame 1 đến Frame cuối cùng thì dừng lại hay lập lại từ đầu theo ngƣời thiết kế. ActionScript có thể thay đổi thứ tự trong cách chạy của Flash, có thể dừng ở bất cứ Frame nào, hay chạy ngƣợc trở lại Frame nào, nhảy một số Frame rồi chơi tiếp, không dừng lại ở đó ActionScript có thể làm cho các phim Flash biến thành một chƣơng trình ứng dụng có sự tƣơng tác của ngƣời dùng: - Tạo những hoạt hình phức tạp: ví dụ nhƣ trái banh có thể chuyển động lên xuống xung quanh màn hình mà không bao giờ ngừng, và tuân theo các định luật vật lý nhƣ lực hút, lực ma sát, lực phản,... - Thu thập thông tin ngƣời dùng (User Input) và các nguồn khác nhau. - Thay đổi hình ảnh khi đang trình chiếu : ActionScript có thể thay đổi kích thƣớc , màu sắc, vị trí của MovieClip trong Flash, thêm hoặc xoá các MovieClip. - Điều khiển âm thanh trong Flash. c) ActionScript có thể viết trên các đối tƣợng nào? - TimeLine: ActionScript có thể viết vào KeyFrame ở bất cứ TimeLine nào và Flash sẽ thực hiện lệnh khi chạy tới KeyFrame đó. Ví dụ lệnh stop() đƣợc đặt ở KeyFrame thứ 5 trên TimeLine thì khi Flash chạy tới KeyFrame 5 sẽ dừng lại cho tới khi có lệnh khác. - 22 - - Button (nút): Nếu không có ActionScript đi kèm thì Button sẽ không có tác dụng gì, ActionScript viết trên Button chỉ có thể hoạt động khi chuột hoặc bàn phím tác động lên Button đó mà thôi. - MovieClip: ActionScript viết trên MovieClip có thể điều khiển chính MovieClip đó hay các MovieClip trong cùng một TimeLine hay các TimeLine ở ngoài cảnh quay. ActionScript đƣợc viết trong Action Panel, chọn đối tƣợng và nhấn phím F9 để mở hộp thoại này. Hình 16 - Hộp thoại Action Panel (đối tƣợng KeyFrame) 1.2.2 Kiểu dữ liệu mảng Mảng là một kiểu dữ liệu nguyên thuỷ. Mảng bao gồm các phần tử có cùng kiểu dữ liệu và đƣợc sắp xếp liên tiếp trên bộ nhớ máy tính. Khai báo mảng. Trong ActionScript, có nhiều cách khai báo mảng, nhƣng thông dụng nhất là 2 cách sau: - Cách 1: var tenmang:Array = new Array (kích thƣớc mảng); - Cách 2: var tenmang:Array = new Array (các phần tử); hoặc var tenmang:Array = [các phần tử]; Cách khai báo một thƣờng dùng khi ngƣời lập trình chƣa biết chính xác giá trị các phần tử cũng nhƣ kích thƣớc các phần tử trong mảng, cũng trong cách khai báo này, tham số kích thƣớc có thể không tồn tại, kích thƣớc mảng có thể thay đổi, nó - 23 - có thể tăng lên hoặc giảm xuống so với kích thƣớc đƣợc cấp phát ban đầu. Trong khi cách khai báo hai đƣợc dùng nếu kích thƣớc hoặc giá trị của các phần tử đã đƣợc biết. Truy cập các phần tử của mảng Mảng đƣợc truy cập theo chỉ số. Chỉ số của mảng đƣợc đặt trong cặp dấu móc vuông: tenmang[chỉ số]. Bổ sung và loại bỏ phần tử của mảng Khác với các ngôn ngữ lập trình khác, mảng trong ActionScript là một cấu trúc động có thể đƣợc sử dụng nhƣ danh sách liên kết và có thể thay đổi kích thƣớc của mảng cũng nhƣ có thể thêm phần tử hoặc xoá bỏ một phần tử nào đó. Để thêm mới một phần tử vào mảng (chỉ có thể thêm vào cuối mảng) có thể sử dụng phƣơng thức push. Ngƣợc lại, để loại bỏ một phần tử thì có thể sử dụng phƣơng thức pop và cũng chỉ có thể xoá phần tử ở cuối mảng. 1.2.3 Các cấu trúc lệnh điều khiển a) Câu lệnh if Cú pháp: if (biểu.thức.điều.kiện.đúng) {lệnh.1;} else{lệnh.2;} Giải thích: Khi thực hiện câu lệnh if, máy sẽ kiểm tra điều kiện của biểu.thức.điều.kiện, nếu nó nhận giá trị đúng thì thực hiện phần lệnh tƣơng ứng với if (lệnh.1), ngƣợc lại (biểu thức điều kiện sai) máy sẽ thực hiện phần lệnh thƣơng ứng với else (lệnh.2). b) Câu lệnh lặp for Cú pháp: for (var i:int = bt.khởi.tạo;bt.giới.hạn;bt.tăng) {lệnh;} - 24 - Giải thích: lệnh sẽ đƣợc thực hiện với số lần lặp chính là số lần lặp của i (i = (bt.giới.hạn - bt.khởi.tạo)/bt.tăng +1. c) Câu lệnh lặp for..in Khi chỉ số của mảng không liên tục hoặc không tuân theo một quy tắc nào đó, thì cách sử dụng vòng lặp for ở trên không còn hiệu quả. Để khắc phục nhƣợc điểm này, ActionScript bổ sung vòng lặp for..in. Bên cạnh đó, đối với Obiect, thì phần đánh chỉ số có thể không đơn thuần là số mà có thể là kiểu dữ liệu bất kì. Khi đó, ta bắt buộc phải sử dụng vòng lặp for...in này (hoặc for...each...in sẽ đƣợc trình bày trong mục tiếp theo). Cú pháp: for (var index in Array/Object) {lệnh;} Giải thích: Trong vòng lặp for..in này, chỉ số index sẽ đƣợc vét trong tập chỉ số của Array hoặc Object. Tƣơng ứng với chỉ số này, có thể thu đƣợc giá trị của các phần tử tƣơng ứng. d) Câu lệnh lặp for each...in Tƣơng tự nhƣ câu lệnh for...in, câu lệnh for each...in cũng có thể sử dụng cho mảng có chỉ số không liên tục hoặc Object. Tuy nhiên, for each...in truy cập đến các phần tử trực tiếp mà không cần thông qua chỉ số. Cú pháp: for each(var item in Array/Object) {lệnh;} Giải thích: Khác với câu lệnh for..in, biến item trong câu lệnh for each...in sẽ nhận giá trị của các phần tử của mảng chứ không phải là chỉ số và nó cũng đƣợc khai báo trực tiếp trong vòng lặp for. e) Câu lệnh lặp while Cú pháp: - 25 - while (biểu.thức.điều.kiện) {lệnh;} Giải thích: Câu lệnh While luôn kiểm tra biểu thức điều kiện trƣớc khi thực thi lệnh, nếu biểu thức điều kiện đúng thì thực thi lệnh (và tiếp tục lặp lại quá trình này), nếu biểu thức điều kiện sai ngay từ đầu thì lệnh sẽ không đƣợc thực thi. f) Câu lệnh lặp do...while Cú pháp: do {lệnh;} while (biểu.thức.điều.kiện); Giải thích: Khác với câu lệnh while, khi sử dụng lệnh do...while thì lệnh sẽ đƣợc thực thi trƣớc, sau đó kiểm tra biểu thức điều kiện, nếu biểu thức điều kiện còn đúng thì lệnh sẽ tiếp tục đƣợc thực hiện, cũng có nghĩa là lệnh bên trong do...while đƣợc thực hiện ít nhất một lần. 1.2.4 Hàm ActionScript là ngôn ngữ kịch bản nên vẫn hỗ trợ việc khai báo hàm ngoài lớp. Hàm là một nhóm các câu lệnh đƣợc xác định bằng một tên gọi và ngƣời ta gọi đó là tên hàm. Việc sử dụng hàm sẽ giúp giảm tải số lƣợng lệnh nếu các lệnh đó cần đƣợc viết lại nhiều lần. Nếu ta quy định các lệnh này dƣới một tên gọi thì chỉ cần gọi lại tên gọi hàm này khi muốn thực thi nhóm câu lệnh đó. Ngoài ra, hàm còn có cơ chế truyền tham số, giúp cho chƣơng trình trở nên gọn gàng hơn. Có thể hiểu hàm trong ActionScript giống với các hàm toán học. Cú pháp khai báo hàm: function tên.hàm (ds.tham.số):kiểu.dữ.liệu.trả.về {thân.hàm;} - 26 - Các bƣớc xây dựng hàm: - Bƣớc 1: Xác định tên hàm. Tên hàm do ngƣời lập trình quy định, nó có thể có tên bất kỳ nhƣng bắt buộc phải tuân theo quy tắc định danh: không đƣợc bắt đầu bằng số, không đƣợc chứa kí tự đặc biệt và ký tự trắng, không đƣợc trùng với từ khoá. - Bƣớc 2: Xác định các tham số của hàm. - Bƣớc 3: Xác định kiểu dữ liệu mà hàm trả về. - Bƣớc 4: Viết nội dung hàm. 1.2.5 Vùng chức năng Code Snippets Code Snippets là một trong những tính năng mới của phiên bản Flash CS5.5, nó đƣợc tích hợp để cho ngƣời sử dụng dễ dàng thêm các tƣơng tác với những đoạn mã ActionScript, với những trang bị sẵn này ngƣời dùng có thể hoàn toàn nhanh hơn trong việc viết các câu lệnh, dành nhiều thời gian hơn cho việc sáng tạo. Và chỉ cần tiêu tốn một ít thời gian tìm hiểu về Code Snippets ngƣời dùng có thể tạo nên một ứng dụng mà không cần học sâu về ngôn ngữ lập trình ActionScript. Hình 17 - Vùng chức năng Code Snippets - 27 - Code Snippets bao gồm các chức năng phổ biến đƣợc chia theo từng nhóm nhƣ sau: a) Actions - Click to go to Web page: cho phép mở một liên kết Web khi nhấp chuột vào đối tƣợng (tên các đối tƣợng đƣợc mặc định là movieClip_1). - Custom Mouse Cursor: thay đổi hình dạng của trỏ chuột sang hình dạng của đối tƣợng hoặc thay đổi hình dạng của trỏ chuột trở lại hình dạng mặc định ban đầu. - Drag & Drop: thực hiện thao tác kéo thả một đối tƣợng. - Play a MC: bắt đầu trình diễn đối tƣợng đƣợc chỉ định. - Stop a MC: dừng việc trình diễn đối tƣợng. - Click to hide an Object: khi nhấp chuột vào đối tƣợng movieClip_1 thì đối tƣợng movieClip_2 sẽ ẩn đi. - Show an Object: hiện đối tƣợng đƣợc chỉ định. - Click to Position an Object: thay đổi vị trí của đối tƣợng movieClip_2 khi nhấp chuột vào đối tƣợng movieClip_1. - Click to Display a TextField: hiển thị đoạn văn bản tại một vị trí chỉ định khi ta nhấp chuột vào một đối tƣợng. - Generate a Random Number: khởi tạo một số ngẫu nhiên. - Bring Object to the Front: chuyển đối tƣợng đƣợc chọn lên trên các đối tƣợng khác (các đối tƣợng này phải là movieClip hoặc Button). - Simple Timer: tạo bộ đếm thời gian (thƣờng dùng khởi tạo bộ đếm xuôi). - Countdown Timer: khởi tạo bộ đếm ngƣợc. b)TimeLine Navigation - Stop at this Frame: đừng trình diễn movie tại Frame này. - Click to Go to Frame and Stop: dừng phim tại một Frame đƣợc chỉ định. - Click to Go to Frame and Play: trình diễn movie nhảy đến Frame đƣợc chỉ định trong câu lệnh. - 28 - - Click to Go to Next Frame and Stop: dừng trình diễn phim ở Frame kế tiếp. - Click to Go to Previous Frame and Stop: dừng trình diễn phim ở Frame phía trƣớc. - Click to Go to Next Scene and Play: bắt đầu trình diễn đến cảnh quay kế tiếp trong danh sách các cảnh quay (Scene). - Click to Go to Previous Scene and Play: bắt đầu trình diễn từ cảnh quay trƣớc đó trong danh sách cảnh quay. - Click to Go to Scene and Play: bắt đầu trình diễn đến một cảnh quay đƣợc chỉ định trong danh sách cảnh quay. c) Animation - Move with Keyboard Arrows: di chuyển đối tƣợng theo các phím mũi tên trên bàn phím. - Move Horizontall: di chuyển đối tƣợng theo chiều ngang. - Move Vertically: di chuyển đối tƣợng theo chiều dọc. - Rotate Once: quay đối tƣợng một lần với góc đƣợc chỉ định (đƣợc tính theo độ). - Rotate Continously: quay đối tƣợng liên tục, mỗi lần quay một góc 10 độ. - Animate Horizontally: đối tƣợng chuyển động theo chiều ngang. - Animate Vertically: đối tƣợng chuyển động theo chiều dọc. - Fade in a Movie Clip: cách xuất hiện của đối tƣợng theo dạng thức hiện rõ dần (tăng dần độ alpha). - Fade out a Movie Clip: cách thức biến mất của đối tƣợng theo cách mờ dần (giảm dần độ alpha). d) Load and Unload: tải hoặc huỷ tải một tập tin trong thƣ viện. e) Audio and Video: trình diễn (hoặc ngừng trình diễn), thiết lặp, di chuyển một tập tin âm thanh. f) Event Handlers - Mouse Click Event: hành động thực thi khi chuột đƣợc nhấn lên đối tƣợng. - 29 - - Mouse Over Event: hành động thực thi khi chuột di chuyển qua đối tƣợng. - Mouse Out Event: hành động thực thi khi chuột di chuyển ra khỏi đối tƣợng. - Key Pressed Event: hành động thực thi khi một phím đƣợc nhấn (có thể là KEY_DOWN, KEY_UP). - Enter Frame Event: hành động diễn ra khi các cảnh quay đƣợc trình chiếu. g) Nhóm chức năng nâng cao hỗ trợ cho các dòng diện thoại thông minh chạy Android, iOS... - Mobile Touch Events - Mobile Gesture Envents - Mobile Actions - AIR for Mobile / AIR - 30 - Chƣơng 2 CHƢƠNG TRÌNH TRÒ CHƠI “DẮT NGỰA VỀ CHUỒNG” 2.1 MÔ TẢ TRÒ CHƠI “DẮT NGỰA VỀ CHUỒNG” Tham gia trò chơi có hai đối thủ. Có 15 ô xếp thành hàng ngang đƣợc đánh số từ 1 đến 15, ô số 8 là chuồng ngựa. Có 2 con ngựa, 1 con ở ô số 1, 1 con ở ô số 15.  1  2 3 4 5 6 7 8  9 10 11 12 13 14 15 Hai ngƣời lần lƣợt đi, mỗi ngƣời đến lƣợt mình phải dắt 1 trong 2 con ngựa (con nào cũng đƣợc), đi một hoặc nhiều ô tuỳ ý nhƣng không đƣợc lùi và không đƣợc đi qua chuồng ngựa. Ai dắt con ngựa về chuồng thì sẽ là ngƣời thắng cuộc. Phân tích trò chơi: Mỗi ngƣời chơi khi đến lƣợt mình sẽ lần lƣợt dắt một trong hai con ngựa đi một số ô tuỳ ý chỉ cần đảm bảo quy tắc là không đi lùi và không đi qua chuồng ngựa là đƣợc. Sau một số lần chơi nhất định thì ngƣời chơi sẽ phát hiện nếu ai dắt ngựa vào ô 7 hoặc ô 9 (hai ô cạnh chuồng ngựa) trƣớc thì sẽ thua, vì thế ngƣời chơi sẽ tìm cách không đƣa ngựa vào hai ô đó, cứ nhƣ vậy họ cũng sẽ không đƣa ngựa vào hai cạnh bên hai ô trên,...Từ đó ngƣời chơi sẽ phát hiện chuồng ngựa (ô 8) nằm cách đều hai con ngựa nên khi ngƣời chơi trƣớc đi một số ô nhất định thì ngƣời chơi sau chỉ cần đi theo đúng số ô đó thì sẽ thắng. Tức là ngƣời nào tạo ra đƣợc đối xứng qua chuồng ngựa trƣớc thì sẽ luôn thắng. 2.2 TẠO CÁC CẢNH QUAY Thông thƣờng một trò chơi máy tính cần phải có các cảnh quay (Scene) để giới thiệu trò chơi, cách chơi,... và tạo hứng thú cho ngƣời chơi. Cụ thể trong trò chơi “Dắt ngựa về chuồng” cần có các cảnh sau: - Cảnh 1 (màn hình hiển thị khi trò chơi vừa đƣợc khởi động) gồm: Tên trò chơi, hƣớng dẫn chơi và các nút điều khiển để tiến vào trò chơi. - 31 - - Cảnh 2 và 3 (nơi để chơi trò chơi với máy tính hoặc ngƣời khác) gồm 15 ô (14 ô để ngựa di chuyển và 1 là ô chuồng ngựa), các văn bản hiển thị khi ngƣời chơi thua hoặc thắng. - Cảnh 4 gồm mô tả và hƣớng dẫn trò chơi. 2.2.1 Tạo cảnh khởi động của trò chơi Trƣớc hết tạo một cảnh trong khung làm việc cho trò chơi bằng cách chọn File  New  ActionScript 3.0, thiết đặt thông số kích thƣớc: 1200x400 (vì trong cảnh 2 cần phải vẽ 15 ô trên cùng một hàng nên thiết đặt khung làm việc có chiều dài tƣơng đối lớn hơn so với chiều rộng). Chuẩn bị: một hình nền có kích thƣớc 1200x400 (có thể tải từ mạng về hình nền vừa ý sau đó dùng phần mềm Photoshop hay Paint để chọn lấy kích thƣớc theo khung làm việc), hình 2 con ngựa (có thể tự vẽ hoặc tải từ trang Google với từ khoá The horse vector art để tải những đồ hoạ vector dễ import vào thƣ viện trò chơi). Hình 18 - Cảnh khởi động trò chơi “Dắt ngựa về chuồng” Import hình nền và hai hình con ngựa vào thƣ viện (Library): File  Import  Import to Library, sau đó chọn tập tin cần Import rồi nhấp Open. Sau khi Import xong thì trong thƣ viện của trò chơi sẽ xuất hiện các tập tin đó. Bây giờ có thể bắt đầu tạo cảnh 1: - Nhấp vào tập tin nền trong thƣ viện thấy xuất hiện hình minh hoạ ở khung trên, kéo hình minh hoạ đó ra khung làm việc, đặt tên Layer đó là Nen. - 32 - - Tạo 2 Layer mới với tên NguaDen để chứa hình con ngựa màu đen và NguaXanh để chứa hình con ngựa màu xanh. - Tạo các văn bản DẮT NGỰA VỀ CHUỒNG (dạng movieClip), Hƣớng dẫn (dạng Button), CHƠI VỚI MÁY và CHƠI VỚI NGƢỜI KHÁC (dạng Button) bằng công cụ Text Tool, các văn bản này nằm trên các Layer khác nhau (đặt tên khác nhau cho dễ thiết lặp hành động sau này). Để các văn bản và hình ảnh trên các Layer khác nhau nhằm mục đích tạo các hành động cho từng đối tƣợng và dễ quản lý đối tƣợng. 2.2.2 Tạo cảnh nơi diễn ra trò chơi Tạo cảnh 2 (chơi với máy) bằng cách chọn Insert trên vùng menu, chọn Scene. Chuẩn bị một ảnh nền (có thể giống hoặc khác với ảnh nền của cảnh 1) với kích thƣớc 2400x400 chiều dài gấp đôi khung làm việc là để tạo cảnh chuyển động khi ngƣời chơi đang tham gia trò chơi. Import ảnh nền vào thƣ viện (làm nhƣ trên). - Dùng công cụ Rectangle Tool để tạo một hình vuông màu xanh nhƣ hình 19 (tƣởng tƣợng đây là những ô cỏ ngựa di chuyển để về chuồng), chọn công cụ Free Transform Tool để chọn cả viền của hình vuông, nhấp phím F8 để chuyển hình vuông thành Button với tên Co. - Tƣơng tự nhƣ trên tạo một Button tên Chuong là chuồng ngựa nhƣ hình 19. - Trong thƣ viện của trò chơi xuất hiện tập tin Co, nhấp chọn nó sau đó kéo vào trong khung làm việc, lặp lại cho đến khi đủ số 14 ô và sắp xếp nhƣ hình 19. Lấy hình hai con ngựa ra và đặt ở vị trí nhƣ hình, đổi chúng thành đối tƣợng MovieClip. - Chọn từng ô vuông sau đó đặt tên cho từng ô vuông này trong khung Instance Name của vùng thuộc tính (Properties), tên của 15 ô vuông theo thứ tự từ trái qua phải là: Co1, Co2, Co3, Co4, Co5, Co6,Co7, Chuong, Co9, Co10,Co11, Co12, Co13, Co14, Co15. - Dùng công cụ Text Tool để viết các văn bản hiện ra khi trò chơi kết thúc (một trong 2 con ngựa vào đƣợc chuồng), đổi các văn bảng này sang MovieClip. - 33 - - Sau khi đặt tên cho từng đối tƣợng, dùng công cụ Selection Tool để chọn hết các đối tƣợng (15 ô vuông và nền), nhấp chuột phải chọn Distribute to Layers để từng hình tách ra nằm trên các Layer khác nhau. Hình 19 - Cảnh 2 (chơi với máy) Cảnh 3 (Hai ngƣời cùng chơi với nhau) tạo tƣơng tự cảnh 2. Hình 20 - Cảnh 3 (chơi với ngƣời khác) 2.2.3 Tạo hƣớng dẫn cho trò chơi - Vẽ 1 hình chữ nhật có kích thƣớc bằng khung làm việc. Dùng công cụ Gradient Transform để tạo màu nền cho cảnh 4. Và tạo đoạn văn bản nhƣ sau để hƣớng dẫn cách chơi cho ngƣời tham gia trò chơi: Khi đến lƣợt mình, ngƣời chơi lần lƣợt dắt 1 trong 2 con ngựa (CON NGỰA NÀO CŨNG ĐƢỢC) đi một hoặc nhiều ô tuỳ ý nhƣng không đƣợc đi lùi và không đi qua chuồng ngựa, bằng cách - 34 - nhấp vào các ô màu xanh lá để dắt ngựa đến ô mình muốn, ô màu đỏ đại diện cho chuồng ngựa. Ai dắt đƣợc ngựa về chuồng trƣớc tiên thì thắng cuộc. - Sao chép đối tƣợng Menu và mô hình trò chơi từ cảnh 2 sang hƣớng dẫn để cho ngƣời chơi dễ hình dung ra cách chơi. Hình 21 - Hƣớng dẫn trò chơi 2.3 LẬP TRÌNH TRÒ CHƠI Trong trò chơi “Dắt ngựa về chuồng” thì phần quan trọng nhất là lập trình sao cho ngƣời chơi phải đảm bảo thực hiện đúng các quy tắc để dẫn đƣợc ngựa về chuồng và giành chiến thắng. Do đó ngƣời lập trình trò chơi (“Dắt ngựa về chuồng”) nên làm cho cảnh diễn ra trò chơi (cảnh 2 và 3) đƣợc lập trình đúng và chơi đƣợc theo đúng quy tắc rồi mới chuyển sang liên kết các cảnh lại với nhau (hoàn chỉnh trò chơi). Để xem chƣơng trình hoạt động thế nào nhấn Ctrl + Enter, quan sát thấy màn hình chƣơng trình cứ nhảy liên tục từ cảnh 1 đến cảnh 4, để chƣơng trình dừng lại tại một cảnh và thực thi lệnh tại cảnh đó, cần phải đặt lệnh stop(); vào từng Frame nền của mỗi cảnh. 2.3.1 Lập trình cảnh 2 - Chơi trò chơi với máy Theo phân tích trò chơi ở mục 2.1, nguyên tắc của trò chơi là “Ai tạo ra đối xứng với chuồng trƣớc sẽ là ngƣời thắng cuộc” nên phần này sẽ lập trình cho máy luôn thắng bằng cách đi số ô bằng với số ô do ngƣời chơi đi. Quy tắc trò chơi là không đƣợc đi lùi nên khi một trong hai con ngựa di chuyển đến ô nào thì ô đó sẽ mất. - 35 - Theo quy tắc trên, ngƣời lập trình cần làm cho các ô 1 và 15 biến mất khi ngƣời chơi nhấp vào ô 2 hoặc ô 14 đồng thời con ngựa ở ô 1 phải di chuyển đến ô 2, ngựa ở ô 15 phải di chuyển đến ô 14, điều này đƣợc lập trình nhƣ sau: stop(); var CO:Array=[Co1,Co2,Co3,Co4,Co5,Co6,Co7,Co9,Co10,Co11,Co12,Co13,Co14,Co 15]; Thua.visible=false; Co2.addEventListener(MouseEvent.CLICK, fl_ClickToHide_13); function fl_ClickToHide_13(event:MouseEvent):void { for (var i:int=0;i[...]... chuồng ngựa, bằng cách - 34 - nhấp vào các ô màu xanh lá để dắt ngựa đến ô mình muốn, ô màu đỏ đại diện cho chuồng ngựa Ai dắt đƣợc ngựa về chuồng trƣớc tiên thì thắng cuộc - Sao chép đối tƣợng Menu và mô hình trò chơi từ cảnh 2 sang hƣớng dẫn để cho ngƣời chơi dễ hình dung ra cách chơi Hình 21 - Hƣớng dẫn trò chơi 2.3 LẬP TRÌNH TRÒ CHƠI Trong trò chơi “Dắt ngựa về chuồng” thì phần quan trọng nhất là lập. .. phần quan trọng nhất là lập trình sao cho ngƣời chơi phải đảm bảo thực hiện đúng các quy tắc để dẫn đƣợc ngựa về chuồng và giành chiến thắng Do đó ngƣời lập trình trò chơi (“Dắt ngựa về chuồng”) nên làm cho cảnh diễn ra trò chơi (cảnh 2 và 3) đƣợc lập trình đúng và chơi đƣợc theo đúng quy tắc rồi mới chuyển sang liên kết các cảnh lại với nhau (hoàn chỉnh trò chơi) Để xem chƣơng trình hoạt động thế nào... đƣợc trình chiếu g) Nhóm chức năng nâng cao hỗ trợ cho các dòng diện thoại thông minh chạy Android, iOS - Mobile Touch Events - Mobile Gesture Envents - Mobile Actions - AIR for Mobile / AIR - 30 - Chƣơng 2 CHƢƠNG TRÌNH TRÒ CHƠI “DẮT NGỰA VỀ CHUỒNG” 2.1 MÔ TẢ TRÒ CHƠI “DẮT NGỰA VỀ CHUỒNG” Tham gia trò chơi có hai đối thủ Có 15 ô xếp thành hàng ngang đƣợc đánh số từ 1 đến 15, ô số 8 là chuồng ngựa. .. động) gồm: Tên trò chơi, hƣớng dẫn chơi và các nút điều khiển để tiến vào trò chơi - 31 - - Cảnh 2 và 3 (nơi để chơi trò chơi với máy tính hoặc ngƣời khác) gồm 15 ô (14 ô để ngựa di chuyển và 1 là ô chuồng ngựa) , các văn bản hiển thị khi ngƣời chơi thua hoặc thắng - Cảnh 4 gồm mô tả và hƣớng dẫn trò chơi 2.2.1 Tạo cảnh khởi động của trò chơi Trƣớc hết tạo một cảnh trong khung làm việc cho trò chơi bằng... thì ngƣời chơi sau chỉ cần đi theo đúng số ô đó thì sẽ thắng Tức là ngƣời nào tạo ra đƣợc đối xứng qua chuồng ngựa trƣớc thì sẽ luôn thắng 2.2 TẠO CÁC CẢNH QUAY Thông thƣờng một trò chơi máy tính cần phải có các cảnh quay (Scene) để giới thiệu trò chơi, cách chơi, và tạo hứng thú cho ngƣời chơi Cụ thể trong trò chơi “Dắt ngựa về chuồng” cần có các cảnh sau: - Cảnh 1 (màn hình hiển thị khi trò chơi vừa... thấy màn hình chƣơng trình cứ nhảy liên tục từ cảnh 1 đến cảnh 4, để chƣơng trình dừng lại tại một cảnh và thực thi lệnh tại cảnh đó, cần phải đặt lệnh stop(); vào từng Frame nền của mỗi cảnh 2.3.1 Lập trình cảnh 2 - Chơi trò chơi với máy Theo phân tích trò chơi ở mục 2.1, nguyên tắc của trò chơi là “Ai tạo ra đối xứng với chuồng trƣớc sẽ là ngƣời thắng cuộc” nên phần này sẽ lập trình cho máy luôn thắng... không đi qua chuồng ngựa là đƣợc Sau một số lần chơi nhất định thì ngƣời chơi sẽ phát hiện nếu ai dắt ngựa vào ô 7 hoặc ô 9 (hai ô cạnh chuồng ngựa) trƣớc thì sẽ thua, vì thế ngƣời chơi sẽ tìm cách không đƣa ngựa vào hai ô đó, cứ nhƣ vậy họ cũng sẽ không đƣa ngựa vào hai cạnh bên hai ô trên, Từ đó ngƣời chơi sẽ phát hiện chuồng ngựa (ô 8) nằm cách đều hai con ngựa nên khi ngƣời chơi trƣớc đi một số... thƣớc 1200x400 (có thể tải từ mạng về hình nền vừa ý sau đó dùng phần mềm Photoshop hay Paint để chọn lấy kích thƣớc theo khung làm việc), hình 2 con ngựa (có thể tự vẽ hoặc tải từ trang Google với từ khoá The horse vector art để tải những đồ hoạ vector dễ import vào thƣ viện trò chơi) Hình 18 - Cảnh khởi động trò chơi “Dắt ngựa về chuồng” Import hình nền và hai hình con ngựa vào thƣ viện (Library): File... cách đi số ô bằng với số ô do ngƣời chơi đi Quy tắc trò chơi là không đƣợc đi lùi nên khi một trong hai con ngựa di chuyển đến ô nào thì ô đó sẽ mất - 35 - Theo quy tắc trên, ngƣời lập trình cần làm cho các ô 1 và 15 biến mất khi ngƣời chơi nhấp vào ô 2 hoặc ô 14 đồng thời con ngựa ở ô 1 phải di chuyển đến ô 2, ngựa ở ô 15 phải di chuyển đến ô 14, điều này đƣợc lập trình nhƣ sau: stop(); var CO:Array=[Co1,Co2,Co3,Co4,Co5,Co6,Co7,Co9,Co10,Co11,Co12,Co13,Co14,Co... con ngựa, 1 con ở ô số 1, 1 con ở ô số 15  1  2 3 4 5 6 7 8  9 10 11 12 13 14 15 Hai ngƣời lần lƣợt đi, mỗi ngƣời đến lƣợt mình phải dắt 1 trong 2 con ngựa (con nào cũng đƣợc), đi một hoặc nhiều ô tuỳ ý nhƣng không đƣợc lùi và không đƣợc đi qua chuồng ngựa Ai dắt con ngựa về chuồng thì sẽ là ngƣời thắng cuộc Phân tích trò chơi: Mỗi ngƣời chơi khi đến lƣợt mình sẽ lần lƣợt dắt một trong hai con ngựa ... học tập cho em, nâng cao khả tƣơng tác học sinh Với đề tài “NGHIÊN CỨU LẬP TRÌNH TRÒ CHƠI “DẮT NGỰA VỀ CHUỒNG” PHỤC VỤ DẠY HỌC TOÁN” nội dung luận văn kết nghiên cứu cách lập trình trò chơi “Dắt. .. cảnh quay + Lập trình trò chơi + Tổ chức trò chơi “Dắt ngựa chuồng” dạy học Toán -7- PHẦN II: NỘI DUNG NGHIÊN CỨU Chƣơng GIỚI THIỆU CÁC TIỆN ÍCH DÙNG ĐỂ THIẾT KẾ TRÒ CHƠI “DẮT NGỰA VỀ CHUỒNG” 1.1... dụng trò chơi máy tính không lành mạnh phận học sinh đƣợc cải thiện Chính vậy, việc nghiên cứu lập trình trò chơi phục vụ dạy học thiếu, cụ thể dạy học toán Nên định chọn đề tài Nghiên cứu lập trình