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 -