You are on page 1of 330

ĐẶNG NGỌC HOÀNG THÀNH

SCRIPT VÀ KĨ
THUẬT HOẠT HÌNH
(Giáo trình giảng dạy trên Flash CS5/CS6và ActionScript 3.0)
Blank Page

-2-
LỜI NÓI ĐẦU

A
dobe Flash là một phần mềm chuyên nghiệp để tạo các thước phim
hoạt hình, các trò chơi, thiết kế giao diện web (ứng dụ ng trong kı̃
thuậ t RIA – Rich Internet Application)… Flash có một ứng dụng to lớn
trong thế giới Internet nói chung và trong công nghệ giải trí nói riêng.
Dù rằng nhiều công nghệ mới ra đời đang cố gắng cạnh tranh với
Flash, nhưng Flash vẫn chiếm thị phần cao hơn hẳn. Có khá nhiều giáo trình về
Flash được biên soạn, nhưng đại đa số đều dựa trên phiên bản MacroMedia Flash
MX 2004 tương đối cũ. Với phiên bản CS5, Adobe đã bổ sung vào những tính năng
mới giúp người dùng thiết kế và lập trình đơn giản hơn. Cuốn giáo trình này gồm
có ba phần:
Phần 1. Thiết kế dành riêng cho những độc giả không chuyên muốn tìm
hiểu cách sử dụng công cụ vẽ và tạo hoạt hình bằng các công cụ có sẵn của Flash.
Phần này bao gồm các chương 1, chương 2, chương 3, chương 4.
Phần 2. Gồm chương 5. Dành cho các độc giả muốn tìm hiểu về
ActionScript 3.0 – một ngôn ngữ lập trình có cấu trúc gần giống với Java được sử
dụng để tăng cường sức mạnh cho Flash.
Phần 3. Mang tính chất tổng hợp. Gồm các chương 6 và 7. Phần này giúp
bạn đọc hoàn thiện các thước phim hoạt hình bằng các kĩ thuật nâng cao. Chúng
tôi cũ ng cung cấp thêm các kiến thức để làm việc với hình ảnh, âm thanh và video.
Bê n cạ nh đó , chúng tôi còn giới thiệu gói thư viện mã nguo� n mở PaperVision3D
(trong dự á n cù ng tê n) để làm việc với đồ họa 3D trong Flash – một điều mà hầu
như chưa có một giáo trình ve� Flash nào đề cập đến.
Khi biên soạn giáo trình này, chú ng tôi đã cố gắng hoàn thiện nó. Tuy nhiên,
không thể tránh khỏi sai sót. Chú ng tôi rất mong nhận được sự đóng góp ý kiến
quý báu của các bạn độc giả cũng như các bạn đồng nghiệp. Mọi thư từ đóng góp
xin gửi về các địa chỉ email sau dnhthanh@hueic.edu.vn hoặc
myhoangthanh@yahoo.com.
Trong giáo trình này, chúng tôi còn bổ sung thêm một số tính năng mới mà Adobe
đưa vào cho phiên bản Flash CS6.

Huế 2012

Tác giả

-3-
Blank Page

-4-
PHỤ LỤC

LỜI NÓI ĐẦU ........................................................................................................................................ 3

CHƯƠNG 1. GIỚI THIỆU VỀ FLASH .......................................................................................... 11

1.1. Sơ lược về đồ họa vector và lịch sử ra đời của Flash ........................................ 11

1.2. So sánh Flash với Silverlight và JavaFx .................................................................. 14

1.3. Cài đặt Adobe Flash CS5 .............................................................................................. 15

1.4. Giới thiệu về Adobe Flash CS5/CS5.5...................................................................... 19

1.4.1. Các chế độ tùy biến giao diện ............................................................................. 20

1.4.2. Tạo mới dự án cho desktop và mobile ........................................................... 21

1.4.3. Layer, Frame, Scene và Movie ............................................................................ 24

1.4.4. Vùng thanh công cụ Tools .................................................................................... 27

1.4.5. Vùng thuộc tính Properties ................................................................................. 27

1.4.6. Vùng soạn thảo ActionScript .............................................................................. 28

1.4.7. Các vùng chức năng khác ..................................................................................... 29

Tổng kết chương 1 .......................................................................................................................... 37

CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN ................................................................................... 39

2.1. Các công cụ Pencil, Brush và Erase .......................................................................... 39

2.2. Công cụ vẽ hình cơ bản ................................................................................................. 41

2.3. Công cụ Text ................................................................................................................ 49

2.4. Công cụ chọn Selection và Lasso ............................................................................... 51

2.5. Các công cụ đổ màu Paint Bucket, Ink Bottle và bắt màu EyeDropper ..... 53

2.6. Công cụ Free Transform và Gradient Transform ............................................... 54

2.7. Các công cụ làm việc với đường Bezier .................................................................. 57

-5-
2.8. Làm việc với các đối tượng .......................................................................................... 59

Tổng kết chương 2 .......................................................................................................................... 62

CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH ................................................................... 64

3.1. Biểu tượng Graphic ........................................................................................................ 64

3.2. Biểu tượng Button .......................................................................................................... 66

3.3. Biểu tượng MovieClip .................................................................................................... 68

3.4. Làm việc với Library ...................................................................................................... 69

Tổng kết chương 3 .......................................................................................................................... 71

CHƯƠNG 4. TẠO HOẠT CẢNH .................................................................................................... 73

4.1. Tìm hiểu về TimeLine .................................................................................................... 73

4.2. Classic Tween.................................................................................................................... 80

4.3. Shape Tween ..................................................................................................................... 81

4.4. Motion Tween ................................................................................................................... 83

4.5. Công cụ Bone và Bind .................................................................................................... 88

4.6. Công cụ Deco ..................................................................................................................... 92

4.7. Công cụ 3D Translation và 3D Rotation .............................................................. 102

Tổng kết chương 4 ....................................................................................................................... 105

CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT ................................................................... 107

5.1. Các kiểu dữ liệu ............................................................................................................. 108

5.2. Biến và Hằng................................................................................................................... 109

5.3. Toán tử và Biểu thức ................................................................................................... 111

5.4. Kie� u dữ liệ u mả ng Array ........................................................................................... 116

5.5. Các cấu trúc lệnh điều khiển .................................................................................... 118

5.5.1. Câu lệnh if ................................................................................................................ 118

-6-
5.5.2. Câu lệnh switch ..................................................................................................... 120

5.5.3. Các câu lệnh lặp for, while và do…while ..................................................... 121

5.5.4. Các lệnh continue, break và return ............................................................... 126

5.6. Hàm .................................................................................................................................... 127

5.7. Lớp và Đối tượng .......................................................................................................... 132

5.7.1. Xây dựng lớp .......................................................................................................... 132

5.7.2. Làm việc với đối tượng ...................................................................................... 136

5.7.3. Lớp sự kiện Event ................................................................................................ 138

5.7.4. Sự kiện chuột ......................................................................................................... 142

5.7.5. Sự kiện bàn phím.................................................................................................. 144

5.7.6. Là m việ c với Timer .............................................................................................. 148

5.7.7. Là m việ c với cá c thà nh pha� n ho� trợ giao diệ n người dù ng GUI ........ 150

5.8. Đưa một đối tượng vào ActionScript.................................................................... 151

5.9. Làm việc với XML ......................................................................................................... 154

5.10. Vùng chức năng Code Snippets .......................................................................... 155

Tổng kết chương 5 ....................................................................................................................... 195

CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO ......................................................................... 197

6.1. Xử lý âm thanh, hình ảnh và video ........................................................................ 197

6.2. Tạo kĩ xảo điện ảnh với Flash .................................................................................. 201

6.3. Tạo thước phim Flash tựa 3D .................................................................................. 205

6.4. Ghép nối nhiều hoạt cảnh ......................................................................................... 212

6.5. Kĩ thuật mặt nạ mask .................................................................................................. 212

6.6. Tạo các nút nhấn điều khiển .................................................................................... 220

6.7. Xuất bản một Movie..................................................................................................... 222

-7-
6.8. Xuất bản một tập tin Flash trong suốt trên trình duyệt................................ 231

6.9. Tương tác giữa ActionScript và JavaScript ........................................................ 235

6.10. Lậ p trı̀nh Socket trê n Adobe AIR ....................................................................... 237

6.11. Là m việ c với cơ sở dữ liệ u trong AIR ............................................................... 246

Tổng kết chương 6 ....................................................................................................................... 253

CHƯƠNG 7. THƯ VIỆN PAPERVISION3D .......................................................................... 255

7.1. Giới thiệu về PaperVision3D và Adobe Flex Builder...................................... 255

7.2. Cấu hình và cài đặt PaperVision3D cho Adobe Flex Buider ........................ 259

7.3. Chương trình Hello, PaperVision3D !................................................................... 261

7.4. Các đối tượng trong PaperVision3D ..................................................................... 265

7.4.1. Các đối tượng hình thể ........................................................................................... 265

7.4.2. Đối tượng Material - Phối màu cho hình thể ................................................. 272

7.4.3. Đối tượng Lights - Hiệu ứng ánh sáng ............................................................. 275

7.4.4. Đối tượng Shader - Hiệu ứng đổ bóng ............................................................. 276

7.4.5. Đối tượng ShadedMaterial.................................................................................... 276

7.4.6. Đối tượng CompositeMaterial ............................................................................. 277

7.4.7. Đối tượng MaterialsList ......................................................................................... 277

7.5. Import một mô hình 3D ............................................................................................. 277

Tổng kết chương 7 ....................................................................................................................... 280

BÀI TẬP THỰC HÀNH ................................................................................................................. 282

A – PHA� N BA� I TA�̣ P CO� HƯƠ�NG DA� N................................................................................. 282

1. TẠ O CHUYE� N ĐO�̣ NG CHO NHA� N VA�̣ T ..................................................................... 282

2. TẠ O HIE�̣ U Ư�NG PHO� NG TE� N LƯ�A............................................................................. 284

3. TẠ O HIE�̣ U Ư�NG ZOOM ................................................................................................... 287

-8-
4. TẠ O BE� CA� .......................................................................................................................... 288

5. TẠ O PHA� O HOA ................................................................................................................ 289

6. XA� Y DỰNG GAME ĐƯA BO� NG VA� O LO� .................................................................... 298

7. XA� Y DỰNG GAME DIE�̣ T RE�̣ P ........................................................................................ 303

8. XÂY DỰNG GAME NO� NG TRẠ I VUI VE� .................................................................... 309

B – PHA� N BA� I TA�̣ P TỰ LA� M.................................................................................................. 321

BÀI THỰC HÀNH SỐ 1 ........................................................................................................ 321

BÀI THỰC HÀNH SỐ 2 ........................................................................................................ 323

BÀI THỰC HÀNH SỐ 3 ........................................................................................................ 323

BÀI THỰC HÀNH SỐ 4 ........................................................................................................ 324

BÀI THỰC HÀNH SỐ 5 ........................................................................................................ 326

BÀI THỰC HÀNH SỐ 6 ........................................................................................................ 326

TÀI LIỆU THAM KHẢO THÊM .................................................................................................. 329

-9-
Blank Page

- 10 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

1.1. Sơ lược về đồ họa vector và lịch sử ra đời của Flash


Sơ lược về đồ họa vector
Đo� họ a má y tı́nh là mộ t trong những lı̃nh vực có nhie� u ứng dụ ng lớn trong thực
tie� n. Mộ t trong những lı̃nh vực ứng dụ ng tie� m nă ng đó là lı̃nh vực giả i trı́ đa
phương tiệ n multimedia. Đồ họa máy tính có the� được chia làm ba dạng cơ bản:
Đồ họa điểm: cơ sở của nó là các điểm ảnh (pixel). Mỗi bức ảnh của đồ họa điểm
là một ma trận điểm, mà mỗi điểm ảnh được xác định bởi một mẫu màu theo
chuẩn phổ biến là RGB (Red-Green-Blue). Mỗi tham số màu được phân bố từ 0
cho đến 2n -1 (ảnh dạng n bit màu). Khi phóng to bức ảnh của đồ họa điểm, ta sẽ
thấy rõ từng điểm ảnh. Hãy quan sát ví dụ đối với bức ảnh sau đây:

Hình 1 – Đồ họa điểm


CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

Đồ họa Fractal: sử dụng thuật toán đệ quy. Mộ t bộ phậ n nà o đó trê n đo� i tượng
fractal sẽ là mộ t hı̀nh ả nh thu nhỏ củ a chı́nh đo� i tượng đó . Đâ y là mộ t dạ ng đo� họ a
quan trọ ng và có nhie� u ứng dụ ng trong thực tie� n. Nếu quan tâm đến dạng đồ họa
này, độ c giả có the� tham khảo thêm trong các tài liệu liên quan đến đồ họa Fractal
hay hình học Fractal.

Hình 2 – Đồ họa Fractal


Đồ họa vector: cơ sở của nó là vector và đường cong Bezier. Dạ ng đo� họ a vector
có nhiều ưu điểm so với đồ họa điểm. Một trong những ưu điểm lớn nhất của nó
là không khô ng có sự giới hạ n khi phó ng to bức ả nh. Thô ng thường, cá c ả nh dạ ng
đo� họ a đie� m sẽ bị “vỡ hạt” khi phóng to. Sự vỡ hạ t nà y cò n tù y và o độ phâ n giả i
củ a cá c bức ả nh. A� nh cà ng mịn (được chụ p bởi cá c má y ả nh có zoom so� lớn) thı̀
cho phé p khả nă ng phó ng to lớn hơn. Cò n đo� i với ả nh dạ ng vector, thı̀ sẽ khô ng
bao giờ xả y ra tı̀nh trạ ng nà y. Cũ ng vı̀ lı́ do nà y, mà ha� u he� t cá c nhà thie� t ke� thı́ch
sử dụ ng chương trı̀nh xử lı́ đo� họ a vector hơn là đo� họ a đie� m (bởi chú ng thường
được in trê n cá c kho� gia� y có kı́ch thước khá c nhau bao go� m cả những kho� gia� y có
kı́ch thước lớn). Các chương trình đồ họa vector nổi tiếng bao gồm Adobe

- 12 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

Illustrator, Corel Draw,… Một bức ảnh dưới dạng đồ họa vector bao giờ cũng mịn
màng hơn so với đồ họa điểm.
Đo� i với đo� họ a đie� m, không có nhiều định dạng hỗ trợ chế độ transparent (hay
chế độ màu alpha). Nhưng với đồ họa vector, thì những tính năng này được hỗ
trợ một cách hoàn hảo. Với đồ họa vector, các chương trình chỉnh sửa và thiết kế
đồ họa luôn hỗ trợ chế độ lớp Layer, nhưng với đồ họa điểm, chỉ có một vài định
dạng mới hỗ trợ lớp Layer này (như định dạ ng photoshop, định dạ ng corel
photopaint,…). Bạ n hãy quan sát một số đối tượng đồ họa được tạo bởi Adobe
Illustrator sau đây:

Hình 3 – Đồ họa vector


Định dạng tậ p tin cuo� i cù ng củ a Flash (swf) mà chúng ta sẽ làm quen ở đây cũng
thuộc vào đồ họa vector. Flash thường được sử dụng để tạo ra các hiệu ứng động.
Xét ở một phạm trù nào đó, nó có nhiều điểm tương đồng với kĩ thuật tạo video
(kĩ thuật 24 hình/giây). Nhưng nó có ưu điểm là phim được tạo bởi Flash không
bị vỡ hạt khi phóng to (trừ trường hợp phim có chứa các đối tượng đồ họa điểm).
Mộ t đie� u đặc biệt mà Flash được ưa chuộ ng và sử dụ ng rộ ng rã i trê n internet là

- 13 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

kích thước phim tạo bởi Flash rất nhỏ gọn so với các định dạng phim khác và
thường được sử dụ ng đe� truye� n tả i trê n world wide web.
Lịch sử ra đời của Flash
Flash là một kĩ thuật tạo các hiệu ứng động, các thước phim hoạt hình, thie� t ke�
giao diệ n người dù ng cho cá c ứng dụ ng web… Flash được giới thiệu đầu tiên bởi
công ty MacroMedia vào năm 1999. Đến năm 2005, công ty này đã được Adobe
mua lại với giá 3.4 tỉ đôla. Từ khi ra đời cho đến này, Flash đã có rất nhiều bước
phát triển đáng chú ý. Nhiều tính năng mới đã liên tục được cập nhập trong các
phiên bản của nó, kể từ các phiên bản Macromedia Flash cho đến Adobe Flash
hiện nay.
Với phiên bản Adobe Flash CS4, công ty Adobe đã bổ sung vào cho Flash những
tính năng mạnh mẽ: hỗ trợ nhiều định dạng import dữ liệu; bổ sung các công cụ
tạo hoạt hình mạnh mẽ như Bone, Bind, 3D Translation, 3D Rotation,…
Phiên bản mới nhất của Flash là CS5.5 (cho đến đa� u năm 2012). Hiện nay, Adobe
cũng đã tạo ra một ấn bản mã nguồn mở cho Flash đó là công nghệ Flex. Một
trong những công nghệ ra đời sớm nhất hỗ trợ tạo giao diện cho ứng dụ ng web có
tı́nh tương tá c cao với người dù ng – RIA. Flex là một công nghệ hứa hẹn đem lại
nhiều lợi nhuận cho Adobe (nhờ vào trình phát triển Adobe Flex Buider). Nó là
một đối thủ lớn khi so sá nh với công nghệ Silverlight của Microsoft và JavaFx của
Sun (nay được mua lại bởi Oracle).

1.2. So sánh Flash với Silverlight và JavaFx


Ngày nay, xu thế thương mại điện tử hóa đang ngày càng len lỏi vào các ngóc
ngách xã hội. Các website khô ng chı̉ là nơi cung cấp thông tin mà người sử dụ ng
internet cò n sử dụ ng nó đe� trao đổi thô ng tin, mua bá n, chia sẻ ... Do đó, giao diện
website đẹp mắt, thiết kế thuận tiện là một lợi thế. Chính vì lẽ đó, rất nhiều nhà
phát triển chú ý đến điều này. Các hãng phần mềm lớn như Microsoft, Adobe,
Sun,… đã phát triển các công nghệ hỗ trợ để chiếm lĩnh thị trường phần mềm hỗ
trợ công nghệ RIA nó i trên. Tính về tuổi đời phát triển của các công nghệ hỗ trợ
RIA, Adobe tỏ ra là người tiên phong.
Flash/Flex của Adobe, Silverlight của Microsoft và JavaFx của Sun là những công
nghệ đáng chú ý nhất. Mỗi trong số chúng đều có ưu điểm no� i trộ i riê ng. Một ưu
điểm chung của chúng là đồ họa rất đẹp và chuyển động rất mềm mại.
Flash/Flex có tuổi đời khá cao, với lượng người dùng đông đảo, hầu hết các nhà
phát triển đã quá quen thuộc với Flash. Flash cũng hỗ trợ lập trình hướng đối
tượng. Nó cũng tương thích với hầu hết các ngôn ngữ lập trình web hiện nay.
Flash hỗ trợ hầu hết trên các hệ điều hành: Windows, Linux, MacOS và rất nhiều
mẫu Mobile của nhiều hãng khác nhau. Để phát triển một ứng dụng Flash, các nhà

- 14 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

phát triển có thể sử dụng trình biên tập Adobe Flash Professional hoặ c Adobe
Flash Builder. Cá c trình biên tập này hoạt động tốt trên đa số hệ điều hành:
Windows và MacOS. Một yêu cầu để trình khách (vı́ dụ như trı̀nh duyệ t web) có
thể chạy được Flash là cần cài đặt một plugin Flash nhỏ gọn (khoả ng 2 Mb); hỗ
trợ một phiên bản Flash Lite (cho các dòng điện thoại); Adobe Flash Player,
Adobe Shockwave, Adobe AIR (cho cả PC, Laptop, smartphone, tablet,…).
Silverlight mặc dầu ra đời sau Flash, nhưng với sự hậu thuẩn của một tập đoàn
lớn như Microsoft, nó cũng đang dần có một vị thế đáng kể. Ngoài ra, Silverlight
được phát triển trên nền .NET, các lập trình viên có thể sử dụng VB.NET hoặc C# -
một ngôn ngữ lập trình mạnh mẽ - để phát triển. Nhược điểm của nó là chỉ tương
thích trên Windows, MacOS và các mẫu điện thoại Windows Mobile. Để phát triển
ứng dụng trên Silverlight, các nhà phát triển chỉ có thể sử dụng Visual Studio vốn
chỉ dành cho hệ điều hành Windows. Trình khách muốn chạy được Silverlight cần
cài đặt Plugin Silverlight (khoảng 5 Mb).
JavaFx ra đời sau cùng, nhưng nó có nhiều ưu điểm: mã nguồn mở, hỗ trợ nhiều
hệ điều hành – Windows, Linux, MacOS và hứa hẹn hoạt động tốt trên nhiều mẫu
Mobile, trình khách không cần cài đặt plugin hỗ trợ. Để soạn thảo JavaFx, người
dùng có thể sử dụng Eclipse hoặc NetBean. Cả hai trình biên dịch này đều hoạt
động tốt trên Windows, Linux và MacOS. Nhưng một điều đáng tiếc là JavaFx lại
ra đời quá muộn màng.
Với tuổi đời cao, lượng người dùng có kinh nghiệm lớn, các lập trình viên và các
nhà phát triển đã quá quen thuộc với Flash. Flash vẫn đang và sẽ phát triển trong
một khoảng thời gian dài nữa. Flash có ba định hướng trọng tâm: phát triển RIA
cho web, tạo các chương trình ứng dụng chạ y trê n Adobe Air (tương thı́ch với
Windows, MacOS, Linux, Android, iOS…) và các thước phim trình diễn chạ y trê n
Flash Player, Shockwave, Flash Plugin, Flash Lite. Trong năm 2010, W3C đã đưa
ra chuẩn mới cho cá c ứng dụ ng web – cô ng nghệ HTML 5 – hứa hẹn sẽ soán ngôi
RIA của Flash, Silverlight và JavaFx. Dù sau này, vị thế trong việc phát triển RIA
cho web có thay đổi, thì những định hướng còn lại của Flash vẫn là những định
hướng phát triển quan trọng, đảm bảo sự trường tồn cho công nghệ này.

1.3. Cài đặt Adobe Flash CS5


Yêu cầu cấu hình cài đặt: hệ điều hành Windows XP Pack 3 hoặc cao hơn
(MacOS X hoặc cao hơn), 1Gb Ram hoặc cao hơn, Pentium IV hoặc cao hơn.
Mặc dầu mục đích chính của chúng ta là sử dụng chương trình Adobe Flash
Professional CS5, tuy nhiên các bạn có thể sử dụng thêm một số chương trình
đính kèm như: Photoshop dùng để hiệu chỉnh ảnh, Dreamweaver thiết kế giao
diện web đồng thời chèn các phim Flash vào, soạn thảo ActionScript chuyên

- 15 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

nghiệp hơn với Flash Buider 4, hiệu chỉnh âm thanh, video… Chính vì lý do này,
tôi đề nghị các bạn nên chọn bộ trọn gói Adobe Master CS5 (hoặ c CS5.5).
Chúng ta có thể tải trực tiếp từ Adobe và có 30 ngày để dùng thử. Sau khi tải về,
hãy tiến hành giải nén tập tin, khi đó ta sẽ thu được một thư mục chính.
Nếu ta sử dụng một đĩa cài đặt DVD, thì hãy đưa đĩa DVD vào ổ đĩa DVD trên máy
tính. Chúng ta có thể sử dụng chế độ AutoRun của nó, hoặc mở đĩa DVD này ra.
Trong cả hai trường hợp nêu trên, thư mục chính sẽ có 4 thư mục con và một tệp
Set-up.exe. Cấu trúc thư mục có dạng như sau:

Hình 4 – Cấu trúc thư mục bên trong đĩa DVD cài đặt Flash CS5
Hãy nhấp đôi chuột vào tập tin Set-up.exe, khi đó, sẽ có cửa sổ sau đây hiện ra

Hình 5 – Màn hình chào đón khi cài đặt Adobe Master CS5

- 16 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

Hãy đọc qua các điều khoản sử dụng phần mềm, nếu đồng ý thì các bạn chỉ việc
nhấp Accept. Ngược lại, hãy chọn Quit để hủy bỏ việc cài đặt.
Sau khi nhấp vào Accept, cửa sổ sau đây sẽ xuất hiện.

Hình 6 – Cửa sổ Serial Number


Trong cửa sổ này, chúng ta có thể điền serial vào – tương ứng với Provide a serial
number (nếu đã có một số serial), ngược lại, hãy chọn Install this product as a
trial (nếu các bạn muốn sử dụng thử 30 ngày). Nếu muốn chọn ngôn ngữ hiển thị,
hãy chọn Select Language. Sau đó, bạn nhấp Next. Adobe Master không hỗ trợ
tiếng việt. Nó chỉ hỗ trợ một vài ngôn ngữ như tiếng anh, tiếng nhật… Nếu số
serial điền vào đúng, thì sẽ xuất hiện một dấu tích mầu xanh. Ngược lại, nếu số
serial sai, dấu nhân màu đỏ sẽ xuất hiện. Nếu số serial đúng, ta có thể nhấp Next
để tiếp tục quá trình cài đặt. Nếu không có số serial, hãy chọn chế độ dùng thử.
Khi cài đặt ở chế độ dùng thử, Adobe sẽ thường xuyên đưa ra thông báo để nhắc
nhở về số ngày dùng thử còn lại và nó sẽ tự động chấm dứt khả năng dùng thử
sau 30 ngày. Ta cũng có thể sử dụng chế độ cài đặt này nếu đã có số serial. Và số
serial sẽ được bổ sung sau.
Sau khi nhấp next, cửa sổ Adobe ID sẽ hiện ra. Sau đó là cửa sổ Install Options.
Trong cửa sổ này, cho phép ta chọn lựa các thông số cài đặt.

- 17 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

Hình 7 – Cửa sổ Install Options


Chúng ta có thể chọn lựa các phần mềm cần cài đặt bằng cách đánh dấu tích vào
các phần mềm tương ứng. Nếu muốn học Flash CS5, hãy chọn – Flash
Professional. Ngoài ra, tôi khuyến nghị hãy chọn thêm các phần mềm sau:
Photoshop (xử lý đồ họa điểm), Flash Buider (thiết kế RIA cho web, lập trình
ActionScript chuyê n nghiệ p…), SoundBooth (xử lý âm thanh). Ngoài ra, nếu quan
tâm đến các lĩnh vực đồ họa khác, ta có thể cài đặt thêm các phần mềm như
Illustrator là phần mềm chuyên xử lí đồ họa vector, Fireworks cũng là phần mềm
chuyên xử lí đồ họa điểm, Adobe Premier chuyên xử lý phim, After Effect chuyên
tạo kĩ xảo điện ảnh. Bạ n cũ ng ca� n lưu ý ra� ng, trong phiê n bả n CS5.5, Adobe đã loạ i
pha� n me� m SoundBooth ra khỏ i bộ cà i đặ t. Ne� u bạ n muo� n tı̀m mộ t chương trı̀nh
xử lý â m thanh khi chọ n bộ cà i đặ t CS5.5, thı̀ bạ n có the� dù ng Adobe Audition.
Adobe Audition khô ng tı́ch hợp trong bộ cà i đặ t CS5.5 mà nó là mộ t pha� n me� m
riê ng. Bạ n có the� tả i nó và dù ng thử 30 ngà y như đo� i với bộ cà i đặ t CS5.5.
Ở mục Location bên dưới, bạn hãy chọn vị trí mà bạn sẽ cài đặt. Theo mặc định,
nó sẽ cài đặt vào thư mục C:\Program Files\Adobe. Bạn cũng cần lưu ý dung
lượng ổ đĩa dành cho việc cài đặt. Bạn cần luôn đảm bảo rằng dung lượng để cài
đặt – Total install phải luôn nhỏ hơn dung lượng ổ đĩa còn trống – Available.
Sau đó, hãy nhấp vào nút Install và chờ đợi cho quá trình cài đặt hoàn tất. Để kết
thúc quá trình cài đặt, hãy nhấp vào nút Finish để đóng cửa sổ cài đặt lại.

- 18 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

1.4. Giới thiệu về Adobe Flash CS5/CS5.5


Khởi động Adobe Flash Professional CS5/CS5.5: để khởi động Adobe Flash
Professional CS5/CS5.5, ta có thể bấm chọn biểu tượng của nó trên màn hình
Desktop, hoặc tiến hành các bước sau:
- Vào Start > All Programs
- Chọn Adobe Master Collection CS5/CS5.5.
- Chọn Adobe Flash Professional.

Hình 8 – Khởi động Adobe Flash Professional CS5/CS5.5


Khi đó, màn hình Splash – màn hình chào đón của Adobe Flash Professional sẽ
hiện ra

Hình 9 – Mành hình chào đón của Adobe Flash Professional CS5/CS5.5
Sau khi quá trình khởi động hoàn tất, bạn sẽ thấy giao diện sau đây

- 19 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

Hình 10 – Cửa sổ ban đầu của Flash Professional CS5/CS5.5


Phiên bản Adobe Flash CS5 xuất xưởng năm 2010, phiê n bả n CS5.5 xua� t xưởng
nửa cuo� i nă m 2011. So với các phiên bản trước đó, CS5 và CS5.5 có nhiều thay đổi
về cả giao diện chương trình lẫn các tính năng của nó.
Về giao diện: phiên bản CS5/CS5.5 dành cho Windows đã tuyệt giao với giao
diện Window, sử dụng một giao diện độc lập với hệ điều hành.
Về tính năng: bổ sung thêm nhiều công cụ mới làm cho công việc sáng tác trở
nên đơn giản hơn như các công cụ Bone, Bind, 3D Translation, 3D Rotation, cá c
hiệ u ứng script ho� trợ mà n hı̀nh cả m ứng...

1.4.1. Các chế độ tùy biến giao diện


Trong giao diện tổng thể Essential của Flash CS5/CS5.5, có thể chia làm 5 vùng
chính:
- Vùng hệ thống menu phía trên cùng.
- Vùng thanh công cụ ở bên phải.
- Vùng thuộc tính và thư viện bên cạnh thanh công cụ.
- Vùng sáng tác ở trung tâm.

- 20 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

- Vùng TimeLine và Layer ở phía bên dưới.

Hình 11 – Giao diện Adobe Flash CS5/CS5.5


Flash CS5/CS5.5 cho phép bạn làm việc theo chế độ Tab. Trên vùng thanh menu,
ở góc bên phải mục Essentials cho phép ta chuyển đổi qua lại giữa các cách bố trí
giao diện. Có 6 chế độ bố trí giao diện: Animator, Classic, Debug, Designer,
Developer và Essentials. Tùy vào cảm quan của bạn, bạn hãy chọn lấy một cách
bố trí giao diện nào mà bạn cho là phù hợp và tiện lợi cho bạn nhất. Riêng tôi, tôi
chọn chế độ Essentials.
Để phóng to hay thu nhỏ khung sáng tác, ta chỉ cần sử dụng phím tắt là Ctrl+= để
phóng to và Ctrl+- để thu nhỏ. Hoặc bạn có thể chọn chế độ hiển thị % ở bên
dưới thanh menu.

1.4.2. Tạo mới dự án cho desktop và mobile


Để tạo mới một dự án, bạn kích chuột vào File, chọn New (phím tắt là Ctrl+N).
Chọn thẻ General. Giữa hai phiên bản CS5 và CS5.5 chỉ có một chút khác biệt. Hãy
quan sát hộp thoại sau đây:

- 21 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

Hình 12 – Tạo mới một dự án trong Flash CS5 và CS5.5

- 22 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

Như bạn thấy, mộ t đie� m mới củ a phiê n bả n CS5.5 so với phiên bản CS5 là hỗ trợ
dự án template cho hệ điều hành Android.
Khi tạ o mới mộ t dự á n trong Flash, chúng ta ca� n quan tâm đến một so� kiểu dự án
sau đây:
- ActionScript 3.0: tạo dự án Flash hỗ trợ ActionScript 3.0. Dự án này sử dụng cho
Flash Player và Flash Plugin với nền tảng chủ yếu là Desktop. Bạn cũng lưu ý
rằng, trong giáo trình này, chúng ta đang thảo luận về ActionScript 3.0. Phiên bản
này là phiên bản mới nhất của ActionScript cho đến thời điểm này.
- ActionScript 2.0: tương tự như dự á n ActionScript 3.0, tuy nhiên phiên bản
ActionScript được hỗ trợ là 2.0.
- Adobe Air 2/AIR: tạo dự án Flash cho Desktop hoặc các thiết bị khác có hỗ trợ
Adobe Air. Trong trường hợp này, AIR được sử dụng là phiên bản AIR 2.0 trở lên.
Adobe Air là một dự án mới của Adobe nhằm tạo ra môi trường cho các nhà phát
triển xây dựng những ứng dụng dựa vào công nghệ Flash có thể chạy độc lập trên
các nền tảng hệ điều hành. Nó có nhiều điểm tương đồng với công nghệ Java của
Sun hay .NET của Microsoft. Để phát triển một trình ứng dụng trên Adobe Air,
bạn hoàn toàn có thể sử dụng trình soạn thảo Adobe Flash hoặc Adobe Flex
Builder (hay Adobe Flash Buider).
- AIR for Android: tạo dự án Flash chạy trên AIR phục vụ cho các thiết bị sử dụng
hệ điều hành Android của Google. Trong giáo trình này, tôi sẽ giới thiệu cho các
bạn cách cài đặt AIR và các ứng dụng chạy trên AIR cho bộ giả lập Android SDK
do Google cung cấp. Chi tiết phần này sẽ được trình bày trong phần xuất bản tập
tin Flash.
- AIR for iOS: tạo dự án Flash chạy trên AIR phục vụ cho các thiết bị sử dụng hệ
điều hành iOS của Apple. iOS SDK của Apple chỉ cung cấp cho các nhà phát triển
sử dụng nền tảng MacOS, do đó, nếu bạn là một nhà phát triển ứng dụng
Windows, bạn chỉ có thể lựa chọn một trong hai cách: cài đặt MacOS để sử dụng
bộ SDK; hoặc sử dụng môi trường giả lập Virtual PC để cài đặt MacOS. Hiển nhiên,
bạn hoàn toàn có thể viết các ứng dụng cho iOS trong trường hợp sử dụng Adobe
Flash CS5 trở lên, tuy nhiên, để đảm bảo ứng dụng thực thi tốt trên hệ điều hành
này, bạn cần kiểm tra nó trên môi trường giả lập hoặc trên chính thiết bị đó.
- Flash Lite 4, Adobe Device Central: tạo dự án Flash cho Mobile chạy trên Flash
Lite. Khi chọn kiểu dự án này, Adobe Flash CS5/CS5.5 sẽ tự động gọi đến Adobe
Device Central. Đây là tiện ích quản lý các thông tin về Flash Lite hỗ trợ trên các
dòng điện thoại. Bạn chỉ cần tìm kiếm loại điện thoại mà bạn cần tạo dựng dự án,
sau đó bấm vào Create.

- 23 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

Hình 13 – Adobe Device Central


- Ngoài ra, nếu bạn muốn tạo các Action độc lập, bạn có thể tạo riêng chúng bằng
cách chọn ActionScript File. Việc tạo các ActionScript độc lập và sử dụng chúng
trong các dự án Flash sẽ được thảo luận kĩ hơn khi chúng ta làm quen với lập
trình với ActionScript ở chương 5.
Remarks: Bạn cũng cần lưu ý đến một vài định dạng trong các dự án của Flash.
Tập tin dự án của Flash sẽ có phần mở rộng là .fla (thực chất đây là một tập tin
nén). Tập tin ActionScript File có định dạng là .as. Tập tin cuối cùng của flash khi
xuất bản là .swf (ngoài ra, Flash còn có các định dạng khác hỗ trợ cho các dự án
khác nhau như: *.exe – trình tự chạy trên windows, *.app – trình cài đặt trên Mac,
*.apk – trình cài đặt trên Android,…).

1.4.3. Layer, Frame, Scene và Movie


Trong kĩ thuật tạo các thước phim, kĩ thuật được sử dụng phổ biến để tạo chuyển
động trong các đoạn phim là kĩ thuật 24 hình/ giây. Trong kĩ thuật này, các hình
ảnh có nhiều điểm tương đồng sẽ được ghép nối lại một cách liên tiếp. Các đối
tượng cần tạo chuyển động sẽ có chút thay đổi trên mỗi khung hình. Khi các
khung hình thay thế cho nhau ở tốc độ mà mắt người không nhận ra sự thay đổi

- 24 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

này, chúng ta sẽ cảm thấy đối tượng chuyển động. Kĩ thuật tạo hoạt hình trong
Flash cũng hoàn toàn tương tự. Trước khi tìm hiểu kĩ về các cách thức tạo chuyển
động trong Flash, chúng ta cùng nhau tìm hiểu qua các khái niệm: Lớp – Layer,
Khung hình – Frame, Cảnh quay – Scence, Thước phim – Movie.
- 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ể
chứa 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. Kĩ thuật layer được sử dụng rộng rãi trong đồ họa máy tính, bao gồm cả đồ
họa điểm như: photoshop, corel photopaint hay đồ họa vector như: illustrator,
coreldraw.

Hình 14 – Tạo mới Layer

Nhóm biểu tượng xóa và tạo layer – : biểu tượng thứ nhất từ trái sang là
tạo mới layer, biểu tượng thứ hai là tạo mới một thư mục để chứa layer và
biểu tượng cuối cùng là xóa layer hoặc thư mục chứa layer.
Nhóm biểu tượng hiệu chỉnh layer – : biểu tượng thứ nhất từ trái sang là
cho phép ẩn hay hiện layer đó, biểu tượng thứ hai là khóa không cho phép
chỉnh sửa đối tượng trên layer và biểu tượng cuối cùng là cho phép đối tượng
trên layer hiển thị đường viền và màu nền hay chỉ đường viền.
- Frame: là khung hình dùng trong kĩ thuật tạo chuyển động. Vật thể chuyển động
được là nhờ vào kĩ thuật thay thế các khung hình. Như tôi đã trình bày ở trên, mắt
người chỉ có thể lưu được không quá 24 hình ảnh trong một giây, nếu tốc độ
chuyển đổi các khung hình lớn, mắt chúng ta không thể nhận thấy được sự thay
đổi này mà cảm giác như là hình ảnh đang chuyển động. Với Flash, số khung hình
không nhất thiết phải lớn như trong kĩ thuật tạo video, nó giảm đi một cách đáng
kể nhờ vào công nghệ được sử dụng trong Flash. Điều này cũng giúp làm giảm
kích thước của tập tin Flash.
- Scene: được hiểu như là các cảnh quay trong Flash. Một cảnh quay là tập hợp
của các khung hình kế tiếp nhau để tạo ra chuyển động. Để chèn thêm scene, ta
vào Insert, chọn Insert Scene. Nhờ vào các cảnh quay này, chúng ta có thể tạo các

- 25 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

thước phim dài, mà không phải quản lý các lớp một cách quá phức tạp khi số
lượng đối tượng trên cảnh quay đó trở nên quá lớn. Một cảnh quay trong Flash
cũng giống một cảnh quay trong phim truyền hình vậy. Khi cần tạo một thước
phim hoàn chỉnh, chúng ta sẽ ghép nối nhiều cảnh quay lại với nhau. Bạn cũng
lưu ý rằng, các cảnh quay sẽ được ghép tự động theo thứ tự mà bạn sắp xếp. Do
đó, nếu muốn thay đổi thứ tự cảnh quay, bạn chỉ việc thay đổi thứ tự sắp xếp của
nó. Để làm xuất hiện cửa sổ quản lý các cảnh quay, bạn vào Windows > Other
Panels > Scene (hoặc phím tắt Shift+F2).

Hình 15 – Cửa sổ quản lý cảnh quay


Trong cửa sổ này, bạn chỉ cần sắp xếp lại thứ tự trình bày của các Scence bằng
thao tác kéo thả đơn giản. Thứ tự các cảnh quay sẽ diễn ra theo thứ tự từ trên
xuống dưới. Khi xây dựng các cảnh quay độc lập, bạn có thể kiểm tra từng cảnh
quay này bằng cách vào Control > Test Scene (hoặc tổ hợp phím Ctrl+Alt+Enter).
- Movie: là một thước phim hoàn chỉnh. Một movie có thể chứa một hoặc nhiều
cảnh quay. Để chuyển đổi qua lại giữa các cảnh quay trong một movie, ta bấm vào
biểu tượng và chọn tên của scene. Để kiểm tra một bộ phim hoàn chỉnh, bạn
chọn Control > Test Movie (hoặc tổ hợp Ctrl+Enter). Bạn cũng lưu ý rằng, nếu bạn
xây dựng một thước phim chứa nhiều đối tượng đồ họa và có nhiều cảnh quay,
thì việc kiểm tra sự hoạt động của từng cảnh quay là điều cần thiết. Bạn chỉ nên
kiểm tra sự hoạt động của toàn bộ phim khi các cảnh quay đã hoạt động tốt. Sở dĩ
như vậy là vì, quá trình biên dịch một bộ phim hoàn chỉnh bao giờ cũng chậm
hơn, chiếm nhiều tài nguyên bộ nhớ hơn so với biên dịch từng cảnh quay riêng lẻ.
Điều này đặc biệt hữu ích với những máy có cấu hình không quá cao.
Remarks: Bạn cũng cần lưu ý rằng, Flash cũng hỗ trợ chế độ kiểm tra trực tiếp
trong khung sáng tác. Để thực hiện chức năng này, bạn có thể chọn một trong hai
chế độ: chế độ kiểm tra bằng tay, chế độ kiểm tra tự động. Đối với chế độ kiểm tra
bằng tay, bạn sử dụng thanh đánh dấu Frame hiện tại, sau đó kéo trượt nó trên
thanh TimeLine. Với chế độ kiểm tra tự động, bạn chỉ cần nhấn phím Enter. Nếu
phim của bạn nằm trên TimeLine quá dài và bạn đang thực hiện chức năng kiểm

- 26 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

tra tự động, bạn muốn dừng chế độ này ngay lập tức ! Khi đó, bạn hãy nhấn phím
Enter thêm lần nữa. Chế độ kiểm tra tự động sẽ dừng ngay lập tức.

1.4.4. Vùng thanh công cụ Tools


Vùng thanh công cụ 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. Bạn có thể thu gọn thanh công cụ bằng cách bấm vào biểu
tượng thu nhỏ bên phải trên cùng, thứ hai từ phải sang (). Hoặc tắt nó đi, bằng
cách bấm vào biểu tượng còn lại ().

Hình 16 – Thanh công cụ


Bạn có thể di chuyển nó, kéo thả nó vào một vị trí nào đó trong giao diện của
Flash. Bạn có thể làm xuất hiện hoặc ẩn nó đi bằng cách vào menu Window, chọn
Tools.

1.4.5. 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 viền, loại viền, màu nền…
Đe� quả n lý cá c thuộ c tı́nh nà y, Flash bo� trı́ chú ng trong mộ t cửa so� Properties.

Hình 17 – Vùng thuộc tính Properties

- 27 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

Để hiển thị các thuộc tính của một đối tượng, bạn chỉ việc nhấp chọn đối tượng.
Khi đó, trong bảng thuộc tính Properties này sẽ hiển thị các thông số liên quan
đến các thuộc tính của đối tượng. Để thay đổi các thông số thuộc tính của đối
tượng đó, bạn chỉ việc thay đổi các thông số trong bảng thuộc tính Properties này.
Cá c biểu tượng nhỏ ở góc trên bên phải cho phép thu nhỏ () hoặc đóng lại vùng
thuộc tính Properties (). Tương tự, chúng ta cũng có thể làm xuất hiện hoặc
đóng vùng thuộc tính này lại bằng cách vào Windows, chọn Properties.
Thuộc tính của vùng soạn thảo Stage:
Publish: gồm Player (cho phép phim trình chiếu có thể hoạt động tốt trên phiên
bản Flash Player nào), Script (phiên bản ActionScript mà đoạn phim đang sử
dụng), Class (bạn chỉ việc nhập tên Lớp thể hiện vào, lập tức Flash sẽ khởi tạo cho
bạn một cú pháp khai báo của lớp nội tại – mặc định là lớp thừa kế từ MovieClip),
Profile (quản lý các thông tin liên quan đến việc xuất bản dự án Flash), AIR
Settings (các cấu hình thiết lập cho dự án Flash chạy trên Adobe Air).
Properties: chứa FPS (tốc độ chơi – đo bằng số 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).

1.4.6. Vùng soạn thảo ActionScript


Trong khung soạn thảo ActionScript, phần soạn thảo nằm ở trung tâm của cửa sổ
này. Vùng phía bên trái chứa các lớp thư viện và cây phả hệ (mô tả sự ke� thừa củ a
cá c lớp). Phía trên khung soạn thảo là hệ thống các công cụ hỗ trợ soạn thảo
ActionScript.
(1) – Bổ sung thêm các thành phần vào ActionScript.
(2) – Tìm kiếm và thay thế.
(3) – Chèn target path. Chức năng này thường sử dụng khi làm việc với lớp.
(4) – Kiểm tra lỗi cú pháp.
(5) – Định dạng cho mã nguồn theo chế độ tự động của ActionScript.
(6) – Xem các chỉ dẫn về mã nguồn.
(7) – Tạo các điểm thoát khi debug chương trình.
(8) – Đóng mở các khối mã lệnh chương trình.
(9) – Hỗ trợ khi viết script.

- 28 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

Hình 18 – Khung soạn thảo ActionScript

1.4.7. Các vùng chức năng khác


Ta có thể làm hiển thị thêm các vùng chức năng khác trong Flash bằng cách vào
Windows và chọn cửa sổ tương ứng.
Vùng Align (Ctrl+K): dùng để can chỉnh lề trái, phải, trên và dưới cho các đối
tượng. Can chỉnh kích thước cho đối tượng.
Trong vùng align này chia làm bốn nhóm:

- Nhóm Align: canh chỉnh vị trí của các đối tượng. Theo thứ tự các biểu tượng từ
trái sang phải là canh trái, canh giữa theo chiều ngang, canh phải, canh trên,
canh giữa theo chiều dọc và canh dưới. Nếu đánh dấu kiểm vào tùy chọn Align
to Stage thì nó sẽ canh chỉnh theo khung soạn thảo, ngược lại, nó sẽ can chỉnh
theo vị trí tương đối của các đối tượng.
- Nhóm Distribute: canh chỉnh theo trục tương đối của các đối tượng. Theo thứ
tự các biểu tượng từ trái sang phải là: canh chỉnh theo trục ở phía mép trên,
theo trục đối xứng ngang, theo trục ở phía mép dưới, theo trục ở phía mép
trái, theo trục đối xứng dọc và theo trục ở phía mép phải.

- 29 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

- Nhóm Match Size: hiệu chỉnh cùng kích thước của đối tượng theo chiều ngang,
chiều dọc, hoặc theo cả chiều ngang và chiều dọc. Nếu chọn tùy chọn Align to
Stage, nó sẽ canh chỉnh kích thước đối tượng theo khung soạn thảo.
- Nhóm Space: hiệu chỉnh khoảng cách giữa các đối tượng theo chiều dọc và
ngang.

Hình 19 – Vùng canh chỉnh vị trí và kích thước Align


Vùng Transform (Ctrl+T): hiệu chỉnh góc cạnh cho đối tượng. Việc hiệu chỉnh
góc cạnh này bao gồm:

Hình 20 – Vùng Transform


- Nhóm đầu tiên: kéo giãn chiều dài và chiều rộng (tính theo tỉ lệ %), nếu bạn
nhấp chọn tùy chọn cuối cùng trong nhóm này (biểu tượng mắc xích bị phân
đôi), thì độ kéo giãn của đối tượng theo chiều ngang và chiều dọc sẽ diễn ra
đồng thời, ngược lại việc hiệ u chỉnh kích thước theo chiều dài và chiều rộng là
độc lập.

- 30 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

- Nhóm thứ hai: Rotate (hiệu chỉnh góc quay), Skew (hiệu chỉnh góc dịch chuyển
xiêng – hay độ kéo trượt theo hai phía).
- Nhóm thứ 3: liên quan đến tọa độ 3D và điểm trọng tâm 3D. Chức năng này chỉ
hoạt động đối với biểu tượng MovieClip. Chúng tôi sẽ trình bày kĩ hơn về biểu
tượng này trong chương 3.

Vùng History (Ctrl+F10): quản lý lịch sử các thao tác của bạn khi sáng tác.

Hình 21 – Vùng History


Bạn chỉ việc chọn thời điểm được chỉ định trong vùng History này để phục hồi các
thao tác được đánh dấu tại thời điểm đó. Theo mặ c định, Flash sẽ a� n định 100 la� n
undo (phụ c ho� i lạ i thao tá c trước đó ) cho tà i liệ u (hoặ c cho đo� i tượng). Ne� u bạ n
muo� n tă ng so� la� n Undo thı̀ hã y thực hiệ n thao tá c sau: và o Edit > Preferences;
chọ n General và sau đó thay đo� i thô ng so� Undo (hoặ c Document Level Undo hoặ c
Object Level Undo). Bạ n cũ ng ca� n lưu ý ra� ng, ne� u so� la� n Undo cà ng lớn, thı̀ tà i
nguyê n bộ nhớ được sử dụ ng đe� lưu cũ ng sẽ lớn và có the� là m giả m hiệ u nă ng
là m việ c.
Vùng Color: quản lý màu sắc. Bạn có thể hiệu chỉnh trực tiếp màu sắc cho đối
tượng (chọn đối tượng, sau đó bấm vào bảng màu) hoặc có thể kết hợp với công
cụ đổ màu mà ta sẽ tìm hiểu trong chương tiếp theo.
Trong bảng màu chuẩn này, ta có thể chọn mẫu màu RGB thông dụng hoặ c mẫu
màu HSL – bằng cách bấm chuột vào biểu tượng quả cầu phía trên bên phải; hoặc
chọn không màu bằng cách bấm vào biểu tượng hình vuông gạch chéo. Bạn cũng
có thể chọn chế độ Transparent bằng cách điều chỉnh thông số Alpha. Bảng màu
chuẩn còn cung cấp cho chúng ta một số mẫu màu Gradient có sẵn. Nếu nhu cầu
sử dụng màu trong bảng màu chuẩn không đáp ứng đủ, bạn có thể sử dụng bảng
màu nâng cao (tổ hợp phím Alt+Shift+F9).

- 31 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

Hình 22 – Bảng màu chuẩn


Trong bảng màu nâng cao này, nếu bạn muốn hiệu chỉnh màu cho viền thì bấm
chọn stroke, nếu muốn hiệu chỉnh cho màu nền thì chọn fill. Trong hộp thoại thả
xuống, có các chế độ màu sau đây:
+ None: chọ n che� độ không màu.
+ Solid Color: chọn màu đơn (hay màu đặc). Bạn có thể chọn mẫu màu theo chế
độ RGB hoặc HSL. Có thể hiệu chỉnh thuộc tính Alpha của nó. Nói chung, chế độ
Solid hoàn toàn giống với bảng màu chuẩn ở trên.
+ Linear Gradient: pha trộn màu theo dạng cầu vồng với các cầu vồng phân bố
theo đường thẳng.

Hình 23 – Chế độ màu Solid Color Hình 24 – Chế độ màu Linear Gradient

- 32 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

Khác với solid, chế độ Linear Gradient cho ta các hiệu chỉnh màu sắc hấp dẫn hơn
với dạng thức cầu vồng. Bạn có thể hiệu chỉnh thuộc tính Flow là một dải màu
biến thiên theo thang màu bên dưới (Extend color) hoặc chế độ màu phản xạ
(Reflect) hoặc chế độ màu lặp (Repeat). Nếu bạn muốn thay đổi màu trong thang
Gradient, bạn chỉ việc bấm chọn nút đánh dấu ở mỗi màu trong thang màu ở bên
dưới, sau đó chọn lại màu mới (hoặc kích đối chuột vào nút này, rồi chọn lại màu
mới). Nếu bạn muốn bổ sung thêm một màu trong thang màu Gradient, bạn chỉ
việc bấm chọn vào một vị trí bất kì trên thang màu bên dưới. Ngược lại, nếu bạn
muốn loại bỏ một màu ra khỏi thang màu Gradient, bạn chỉ việc kéo thả nó ra
khỏi thang màu này. Bạn thấy đấy, việc sử dụng màu Gradient rất đơn giản.
+ Radial Gradient: hoàn toàn tương tự Linear Gradient, chỉ có duy nhất một sự
khác biệt là Radial Gradient tạo màu cầu vồng theo dạng xoáy tròn khác với
Linear Gradient theo dạng đường thẳng.
+ Fill Bitmap: với chức năng này, bạn có thể đổ màu cho đối tượng bằng các bức
ảnh. Đây là một cách tạo hiệu ứng màu khá thú vị, rất hữu dụng trong nhiều tình
huống.
Vùng Common Library (Buttons, Classes và Sounds): quản lý các dạng button
(Simple Button), các lớp thư viện và âm thanh.

Vùng Component (Ctrl+F7): quản lý các thành phần GUI (Graphics User
Interface – Giao diệ n người dù ng) trong Flash. Bạn có thể sử dụng các đối tượng
này để tạo một giao diện web, một trình ứng
dụng...

Vùng Library (Ctrl+L): quản lý các đối tượng


được import và convert. Chúng ta sẽ đi vào chi
tiết về vùng này trong các chương sau.

Vùng Motion Presets: vùng cung cấp các chế độ


tạo hoạt hình có sẵn của Flash. Bạn chỉ việc chọn
đối tượng, sau đó chọn hiệu ứng và nhấp Apply.
Lập tức bạn sẽ có một hiệu ứng hoạt hình như
mong đợi.

Vùng Code Snippets: tương tự như Motion


Presets, đây là vùng tạo ActionScript có sẵn của
Flash. Ta chỉ việc chọn đối tượng, sau đó nhấp vào
chức năng tương ứng, lập tức một đoạn mã
ActionScript sẽ được phát sinh tương ứng với Hình 25 – Vùng Motion Presets

- 33 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

đối tượng được chọn theo chức năng mà bạn đã chọn. Chức năng này cũng rất
hữu ích cho những người dùng phổ thông, muốn tạo các ActionScript để điều
khiển đối tượng nhưng lại ngại tìm hiểu về ngôn ngữ lập trình này bởi nhiều lý do
khách quan lẫn chủ quan. Tuy nhiên, bạn cũng cần lưu ý rằng, chức năng này chỉ
cung cấp một vài tính năng chứ không phải là tất cả, bởi vậy, nếu bạn muốn tạo
một thước phim chuyên nghiệp, bạn cần có sự hiểu biết tương đối đầy đủ về ngôn
ngữ lập trình ActionScript mạnh mẽ này được tích hợp trong Flash.

Hình 26 – Vùng Code Snippets


Chúng ta sẽ tìm hiểu về vùng chức năng này sau khi tìm hiểu về ngôn ngữ lập
trình ActionScript. Trong vùng chức năng Code Snippets có các nhóm hiệu ứng
Action sau đây:

- Actions: tạo sẵn các hiệu ứng liên quan đến các hành động của đối tượng.
- Timeline Navigation: điều khiển quá trình chơi phim. Nó cũng tương tự như
thanh PlayBack khi điều khiển một thước phim. Trong giáo trình này, chúng ta
sẽ thảo luận việc tạo một thanh PlayBack bằng ActionScript mà không cần sử
dụng chức năng Code Snippets. Sau khi tìm hiểu về cách tạo thanh PlayBack
mà không cần dùng đến chức năng Code Snippets, tôi đề nghị bạn hãy sử dụng
chức năng này để tạo lạ i thanh PlayBack. Chi tiết chúng ta sẽ tìm hiểu trong
chương 6.
- Animation: tạo các hiệu ứng động cho các đối tượng MovieClip.
- Audio and Video: các chức năng của thanh PlayBack để điều khiển video và
audio khi các đối tượng này được sử dụng trong Flash.

- 34 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

- Load and Unload: tạo một màn hình Splash khi phim được tải. Tải và hủy tải
các bức ảnh, đoạn phim,… trong phim Flash được tạo.
- Event Handlers: quản lý việc thực thi các Event. Event là các sự kiện tương
ứng với một hành động nào đó của đối tượng. Nó có thể là hành động
ON_ENTER, ON_LOAD… củ a stage; hành động MOUSE_UP, MOUSE_DOWN…
tương ứng với sự kiện của chuột; hà nh độ ng KEY_UP, KEY_DOWN… tương ứng
với sự kiệ n của bàn phím... Các Event sẽ được quản lý bởi các lớp tương ứng.
Các lớp này cung cấp các chức năng để lắng nghe các die� n bie� n sự kiệ n diễn ra
trên mỗi đối tượng. Khi có một Event nào đó xảy ra, tương ứng với các hàm
được triệu gọi, nó sẽ thực thi các chức năng tương ứng.
- Cá c nhó m chức nă ng là m việ c với cá c dò ng điệ n thoạ i cả m ứng thô ng minh, và
nhó m chức nă ng là m việ c với AIR (phiê n bả n CS5.5).

Chi tiết về các nhóm chức năng này, ta sẽ tìm hiểu thêm trong chương
ActionScript.

Vùng String: cho phép bạn tùy chọn ngôn ngữ cho thước phim của mình. Nếu
bạn muốn phim của bạn hiển thị đúng ngôn ngữ trên các máy tính khác nhau, bạn
hãy hiệu chỉnh trong vùng String này.

Thay đổi phím tắt trong Adobe Flash: vào Insert > KeyBoard Shortcuts.

Hình 27 – Hộp thoại quản lý phím tắt


Nếu muốn thay đổi phím tắt tương ứng với một chức năng nào đó, bạn hãy chọn
chức năng tương ứng trên vùng Commands (da� u +), sau đó ở mục ShortCuts, bạn
bổ sung tổ hợp phím tắt. Nếu muốn loại bỏ một phím tắt nào đó, bạn chỉ việc bấm

- 35 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

vào dấu – tương ứng với chức năng đó. Khi đó, phím tắt sẽ bị loại bỏ. Nếu muốn
thay đổi phím tắt, bạn sử dụng nút lệnh Change.
Remarks: bạn không nên thay đổi quá nhiều các phím tắt. Nếu bạn sử dụng các
phím tắt theo mặc định, sẽ có một vài lợi thế khi bạn sử dụng Flash trên nhiều máy
tính khác nhau. Bởi vì, không phải máy tính nào bạn cũng có quyền thay đổi các
thiết lập này. Đặc biệt đối với các máy bị giới hạn quyền truy cập hoặc những máy
tính không cho phép bạn lưu lại những thiết lập phím tắt.
Tạo các mẫu màu tô nhờ vào dự án Adobe Kuler: Adobe Kuler là một dự án
trực tuyến hỗ trợ quản lý các mẫu màu tô. Ta có thể tạo, sử dụng và chia sẻ cho
cộng đồng tham gia vào dự án Kuler này. Một yêu cầu quan trọng khi muốn sử
dụng Adobe Kuler là máy tính phải có kết nối internet. Để mở cửa sổ Kuler, ta vào
Windows, chọn Extensions, và chọn tiếp Kuler.
Cửa sổ Project (Windows>Project): hoàn toàn tương tự như chức năng New
Project và Open Project trong menu File. Tuy nhiên, khi sử dụng cửa sổ này, ta có
thể xem cấu trúc, các tập tin trong dự án của Flash.

- 36 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

Tổng kết chương 1


Trong chương này, chúng ta đã làm quen với một số khái niệm cơ bản về đồ họa,
cái khái niệm liê n quan đe� n Flash. Chúng ta cũng tìm hiểu về một số vùng chức
năng của Flash. Các vùng chức năng này được bố trí trong menu Windows.
Chúng tôi hi vọng, sau khi kết thúc chương này, bạn không còn ngỡ ngàng trước
giao diện của Flash. Bạn sẽ tùy biến giao diện cho phù hợp với chính bạn.
Một điều giúp bạn trở nên chuyên nghiệp hơn là bạn nên nhớ các phím tắt khi
thao tác. Nếu các phím tắt được bố trí không thuận tiện, bạn có thể thay đổi nó
nhờ vào Keyboard Shortcuts.

- 37 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH

Blank Page

- 38 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

2.1. Các công cụ Pencil, Brush và Erase


Công cụ Pencil

Hình 28 – Công cụ Pencil


Đối với công cụ Pencil, bạn có thể dùng để vẽ các đối tượng bằng tay. Các thuộc
tính tương ứng với công cụ Pencil mà bạn có thể hiệu chỉnh là:
- 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ẽ - đường liền nét, đứt nét…
- Scale: độ kéo dãn của hình được vẽ. Nó có thể là None, Normal, Horizontal hoặc
Vertical – tương ứng với không kéo giãn, kéo giãn bình thường, kéo giãn theo
chiều ngang và 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.
Công cụ Brush
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

Cũng tương tự công cụ Pencil, Brush cũng được dùng để vẽ. Chỉ có một khác biệt
là nét vẽ của Brush không bao gồm viền chỉ có màu nền, còn Pencil thì ngược lại
chỉ có màu viền không có màu nền. Các thuộc tính của Brush bao gồm:
- Fill color: chọn màu cho nét vẽ brush.
- Smoothing: độ mềm dẻo cho nét vẽ.

Hình 29 – Công cụ Brush

Công cụ Spray Brush


Khi bạn bấm vào biểu tượng tam giác nhỏ ở trên biểu tượng Brush, thì sẽ xuất
hiện biểu tượng của Spray Brush.
Đây là công cụ phun màu tuyệt vời của Flash. Bạn có thể định nghĩa mẫu màu để
phun, các chế độ phun màu: góc nghiêng, độ rộng, độ cao, chế độ xoay các biểu
tượng theo góc ngẫu nhiên,…
Để tự định nghĩa một mẫu màu tô, bạn phải tạo một biểu tượng – hoặc là Graphic,
Button hoặc MovieClip. Chúng ta sẽ thảo luận chi tiết về chúng trong chương 3. Ở
đây, để minh họa cho một mẫu tô màu, chúng ta sẽ sử dụng biểu tượng MovieClip
mà không thảo luận thêm về nó.
Để tạo một kiểu phun màu như trong hình minh họa, hãy làm theo các bước sau:
Bước 1: Định nghĩa một mẫu màu. Bạn hãy vẽ một hình đại diện. Ví dụ trong
trường hợp của tôi, tôi sử dụng hình ngôi sao 10 cánh có chiều dài của các cánh
xen kẻ nhau – tức là cánh dài, cánh ngắn liên tiếp nhau.

- 40 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

Bước 2: Hiệu chỉnh kích thước của nó sao cho phù hợp. Kích chuột phải vào nó,
chọn Convert to Symbol > MovieClips và nhấp Ok.
Bước 3: Bấm chọn công cụ Spray Brush. Trong bảng Properties, chọn mục
Symbol, chọn nút Edit, và chọn biểu tượng mà ta vừa tạo. Sau đó, bạn hãy hiệu
chỉnh các thuộc tính trên bảng Properties này như: độ kéo rộng của biểu tượng
khi phun (scale width), độ kéo theo chie� u cao của biểu tượng khi phun (scale
height), độ rộng của đường phun (width), độ cao của đường phun (height), góc
phun (Brush angle). Các chế độ tạo mẫu ngẫu nhiên: độ kéo giãn của biểu tượng
(random scaling), góc xoay của biểu tượng (rotate symbol), góc phun (random
rotation).

Hình 30 – Công cụ Spray Brush

Công cụ Erase
Công cụ dùng để tẩy xóa các nét vẽ.

2.2. Công cụ vẽ hình cơ bản


Công cụ Line
Là công cụ để vẽ đường thẳng. Khi bấm vào biểu tượng công cụ này trên thanh
công cụ, trong bảng thuộc tính Properties sẽ hiện ra các thông tin liên quan.

- 41 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

Hình 31 – Công cụ Line


Cũng như công cụ Pencil, đối với công cụ Line, thuộc tính Fill không tồn tại. Chỉ có
các thuộc tính sau:
- Stroke color: chọn màu cho đường thẳng.
- Stroke: kích thước của nét vẽ.
- Style: dạng thức của nét vẽ.
- Scale: độ kéo dãn của hình được vẽ. Nó có thể là None, Normal, Horizontal hoặc
Vertical – tương ứng với không kéo giãn, kéo giãn bình thường, kéo giãn theo
chiều ngang và 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.
Công cụ Rectangle
Là công cụ sử dụng để vẽ hình chữ nhật và các dạng biến thể của nó. Dạng biến
thể này có thể là hình chữ nhật có góc tròn. Hình vuông hay hình bình hành cũng
là các trường hợp riêng khi sử dụng công cụ này. Khi muốn vẽ hình có tỉ lệ chiều
rộ ng và chiều cao bằng nhau (hình vuông chẳng hạn), ta nhấn phím Shift.
Khi bấm vào biểu tượng công cụ Rectangle, trong bảng thuộc tính Properties của
nó, ta chú ý đến các thuộc tính sau đây:
- Stroke color: chọn màu viền cho nét vẽ.
- Fill color: chọn màu nền cho nét vẽ.
- Stroke: kích thước của nét vẽ.

- 42 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

- Style: dạng thức của nét vẽ.


- Scale: độ kéo dãn của hình được vẽ. Nó có thể là None, Normal, Horizontal hoặc
Vertical – tương ứng với không kéo giãn, kéo giãn bình thường, kéo giãn theo
chiều ngang và theo chiều dọc.

Hình 32 – Công cụ Rectangle


- 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.
- Rectangle Option: cho phép hiệu chỉnh góc tròn cho hình chữ nhật. Nếu bạn chọn
Lock Corner Radius Controls to one Control – cho phép chỉnh góc tròn của hình
chữ nhật theo dạng 4 góc đồng thời hay riêng lẻ - tức là khi bạn hiệu chỉnh độ
cong của một góc, các góc khác cũng sẽ sao chép số liệu của góc hiệu chỉnh này.
Các số liệu 4 góc ở phía trên tương ứng với độ cong của các góc. Bạn có thể nhập
số liệu vào các ô được cung cấp sẵn, hoặc sử dụng thanh trượt ở phía bên dưới để
hiệu chỉnh độ cong các góc cho hình chữ nhật gó c trò n này.
- Reset: đưa về các số liệu tùy chỉnh mặc định cho các góc tròn.
Công cụ Oval
Vẽ các hình Oval. Khi bấm chọn vào biểu tượng tam giác nhỏ ở phía dưới biểu
tượng Rectangle, sẽ xuất hiện biểu tượng Oval này.

- 43 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

Hình 33 – Công cụ Oval


Khi sử dụng công cụ Oval, ta chú ý đến điểm sau đây: nếu muốn tỉ lệ chiều rộ ng và
chiều cao luôn cân bằng nhau (ví dụ khi vẽ hình tròn) thì ta giữ phím Shift và vẽ,
ngược lại, ne� u khô ng nha� n Shift thı̀ tỉ lệ đó sẽ không cân bằng (ví dụ khi vẽ hình
Eclipse).
Trong bảng thuộc tính Properties, ta có các tùy chọn sau đây:
- Stroke color: chọn màu cho nét vẽ.
- Fill color: chọn màu nền cho hình thể.
- Stroke: chọn kích thước của nét vẽ.
- Scale: độ kéo dãn của hình được vẽ. Nó có thể là None, Normal, Horizontal hoặc
Vertical.
- 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.
- Oval Option: góc mở Start Angle và góc đóng End Angle giúp tạo hình Oval nhờ
vào sự giới hạn của hai góc này. Góc mở Start Angle quay theo chiều kim đồng hồ,
lấy vị trí gốc là vị trí góc 900, số đo của góc chính là số đo góc của phần bị khuyết.
Góc đóng End Angle quay theo chiều ngược kim đồng hồ, số đo góc phần bị
khuyết là góc bù 2 của góc này (tức 360-góc đóng).
Ví dụ, khi thiết lập góc mở Start Angle là 600, ta thu được hình như sau

- 44 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

Hình 34 – Hình tạo bởi góc mở


Trong hình này, góc khuyết có số đo là 600. Góc khuyết sẽ được lấy từ vị trí 900 và
quay theo chiều kim đồng hồ. Nếu ta thiết lập góc đóng End Angle là 600, ta sẽ thu
được hình như sau

Hình 35 – Hình tạo bởi góc đóng


Trong hình này, góc khuyết có số đo là 3600-600=3000, hay phần hình thể chiếm
600. Góc khuyết sẽ được lấy từ vị trí 900 và quay theo chiều ngược kim đồng hồ.
Tương tự như trên, ta có thể kết hợp hình thể có số đo góc đóng 600 và góc mở
1200. Ta sẽ thu được hình thể bên dưới. Phần hình thể được vẽ ra là sự kết hợp
của cả hai hình tạo bởi góc đóng và góc mở như trên

Góc mở

Góc đóng

Hình 36 – Hình tạo bởi góc đóng và góc mở


- Inner Radius: độ lớn bán kính của đường tròn bên trong. Đây là cách thức để tạo
hình vành khăn. Hình vành khăn là hình được tạo bởi hai đường tròn đồng tâm,
những phần chồng khít nhau sẽ bị loại bỏ.

- 45 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

- Close Path: có tác dụng đối với hình thể tạo bởi góc đóng và góc mở. Nó sẽ tự
động làm cho các đường kết nối trở nên liền mạch.
Hình bên trái không kích hoạt Close Path. Hình bên phải kích hoạt Close Path.
Như ta thấy, với tùy chọn Close Path, hình thể sẽ được khép kính và thuộc tính
Fill Color mới có tác dụng.

Hình 37 – Hình tạo bởi góc mở 600 và kết hợp với tùy chọn Close Path.

Công cụ Rectangle Primitive


Khi bấm vào biểu tượng hình tam giác nhỏ ở trên công cụ Rectangle, ta sẽ thấy
xuất hiện công cụ Rectangle Primitive. Tương tự công cụ Rectangle, nhưng với
công cụ này, ta có thể hiệu chỉnh góc tròn của nó sau khi nó được tạo ra. Đây là
một ưu điểm của công cụ này.

Hình 38 – Công cụ Rectangle Primitive

- 46 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

Nếu muốn thay đổi góc tròn, ta chỉ cần dịch chuyển các nút nhấn nhờ vào công cụ
Selection sang trái hoặc phải (đối với nút nhấn nằm ngang) hoặc lên xuống (đối
với nút nhấn nằm dọc). Chi tiết về công cụ Selection ta sẽ thảo luận trong các
phần tiếp theo. Công cụ Selection này có biểu tượng hình con trỏ chuột, màu đen,
nằm phía trên cùng của thanh công cụ. Các tùy chỉnh thuộc tính trong bảng thuộc
tính Properties hoàn toàn tương tự với công cụ Rectangle.
Bạn cũng cần lưu ý rằng, công cụ Rectangle Primitive dựa trên cơ sở của
Rectangle. Điều này bạn có thể nhận thấy được khi phát họa hình bằng công cụ
này: có một hình chữ nhật góc cạnh bao quanh hình thể của chúng ta.
Công cụ Oval Primitive
Hoàn toàn tương tự công cụ Oval. Bạn có thể hiệu chỉnh các thuộc tính góc mở,
góc đóng, bán kính của hình vành khăn. Và cũng tương tự công cụ Rectangle
Primitive, ta có thể hiệu chỉnh các thuộc tính của hình đã vẽ nhờ vào các nút nhấn
nhấn. Nút nhấn trung tâm dùng để điều chỉnh kích thước bán kính vành khăn. Nút
nhấn biên ngoài dùng để điều chỉnh góc đóng, góc mở.
Việc hiệu chỉnh các góc đóng, góc mở, bán kính vành khăn cũng nhờ vào công cụ
Selection mà chúng ta sẽ làm quen trong mục tiếp theo.

Hình 39 – Công cụ Oval Primitive

- 47 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

Bạn cũng cần lưu ý, cũng giống công cụ Oval, để tạo dựng các hình thể sao cho
chiều rộ ng và chiều cao (như hình tròn) bằng nhau nhờ vào Oval Primitive, ta
cũng nhấn và giữ Shift khi vẽ hình.
Với công cụ này, ta có thể tạo ra các hình dạng phức tạp mà không cần hiệu chỉnh
các thông số ban đầu như công cụ cùng loại Oval. Chỉ cần hiệu chỉnh các nút điều
khiển trên các khối hình cơ sở là ta đã nhận được những hình biến thể độc đáo.
Hình cơ sở của nó cũng là hình chữ nhật (hình Oval có biên ngoài nội tiếp hình
chữ nhật này).
Công cụ PolyStar
Dùng để vẽ đa giác và hình sao. Khi bấm chọn công cụ này, ta chú ý các tùy chọn
trong bảng thuộc tính Propeties.
- Fill color: chọn màu nền cho vật thể.
- Stroke color: chọn màu viền cho nét vẽ.

Hình 40 – Công cụ PolyStar


- Stroke: chọn kích thước cho nét vẽ.
- Style: chọn dạng thức cho nét vẽ.
- 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.
- Hinting: giúp bảo vệ nét vẽ ở đường cong khỏi bị mờ.
- Mitter: điều khiển độ sắc nét của Mitter, khi Cap được chọn là Mitter.
- Tool Setting: thiết lập các tùy chọn nâng cao. Khi bấm vào nút Option, sẽ hiện ra
hộp thoại sau

- 48 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

Hình 41 – Thiết lập PolyStar


Trong đó,
+ Style: lựa chọn hình dạng của đa giác là đa giác lồi hay hình sao.
+ Number of Sides: số lượng các cạnh đa giác (hay số lượng cánh hình sao).
+ Star point size (SPS): tỉ lệ giữa khoảng cách từ tâm của hình sao đến đỉnh lõm
của hình sao và khoảng cảnh từ tâm của hình sao đến đỉnh lồi của hình sao. Tỉ lệ
này nằm trong dải từ 0...1. Nếu tỉ lệ này càng lớn (càng gần 1) thì hình sao càng
mập, ngược lại, nếu tỉ lệ này càng nhỏ thì hình sao càng gầy.

Hình 42 – Hình sao mập (tỉ lệ SPS = 0.9) và hình sao gầy (tỉ lệ SPS = 0.1)

2.3. Công cụ Text


Là công cụ dùng để soạn thảo nội dung văn bản trong Flash.
- Text Tool: có ba loại – Static Text (văn bản cố định – như nội dung của label
trong lập trình hướng đối tượng), Dynamic Text (văn bản có thể chọn, copy
nhưng không thể thay đổi – như nội dung của TextBox khi hiệu chỉnh thuộc tính
Readonly=True), Input Text (nội dung văn bản có thể thay đổi – như nội dung của
TextBox khi thuộc tính Readonly=False).
- Character: Family (chọn loại phông chữ), Style (chọn dạng thức cho phông chữ -
in đậm, in nghiêng…), Size (chọn kích thước cho phông chữ), Letter Spacing (chọn

- 49 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

độ rộng cho kí tự trắng giữa các chữ cái), Color (chọn màu cho phông chữ), Auto
Kern (tự động co giãn), Anti-Alias (làm cho nét chữ trở nên mượt mà hơn).

Hình 43 – Công cụ Text


- Show Border around Text: hiển thị đường viền xung quanh văn bản.
- SubScript và SuperScript: tạo chữ viết dưới (kiểu x2) và viết trên (kiểu x2).
- Format: can chỉnh vị trí văn bản (trái, phải, giữa, hai phía).
- Spacing và Margin: Spacing hiệu chỉnh khoảng cách của các từ trong văn bản
hoặc các dòng văn bản. Margin hiệu chỉnh khoảng cách bên trái hoặc bên phải của
nội dung văn bản so với viền bên ngoài.
- Behavior: Single Line (chỉ cho phép văn bản hiển thị trên một dòng – tức không
chấp nhập kí tự xuống dòng hay nói cách khác, phím Enter sẽ không có hiệu lực
khi soạn văn bản dạng này), MultiLine (cho phép văn bản hiển thị trên nhiều
dòng, nếu nội dung văn bản dài hơn khung soạn thảo, nó sẽ tự động xuống dòng
mà không cần phải nhấn phím Enter), MultiLine no Wrap (cho phép văn bản hiển
thị trên nhiều dòng, nếu nội dung văn bản dài hơn khung soạn thảo, nó không tự
động xuống dòng), Password (nội dung văn bản sẽ bị ẩn dưới một kí tự được
chọn làm mặt nạ – như cá c cha� m đen hie� n thị trong cá c ô nhập password).
- Orientation: thay đổi chiều hiển thị của văn bản.
Ngoài ra, khi nội dung văn bản đã được soạn thảo, ngoài những thuộc tính nêu
trên, văn bản còn có thêm một số thuộc tính sau đây:
- Options: các tùy chọn như tạo liên kết trong trang html. Link – đường dẫn đến
một liên kết nào đó. Target – cách thức mở liên kết, bao gồm _blank, _parent, _self
và _top.

- 50 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

- Filter: tạo các hiệu ứng nâng cao như tạo đổ bóng, hiệu ứng bóng mờ, hiệu ứng
cầu vồng… Để sử dụng các hiệu ứng này, bạn chỉ bấm vào biểu tượng đầu tiên
trong vùng công cụ được tô vàng, từ bên trái sang. Nếu bạn thay đổi một hiệu ứng
nào đó, và muốn lưu lại thiết lập này, bạn nhấp vào biểu tượng thứ ba từ trái
sang. Nếu bạn muốn quay lại thiết lập mặc định, hãy nhấp biểu tượng thứ hai từ
trái sang. Biểu tượng con mắt cho phép bạn tạm ẩn hiệu ứng được chọn. Biểu
tượng mũi tên quay lùi, cho phép bạn quay lại thiết lập các thông số trước đó.
Biểu tượng thùng rác cuối cùng, cho phép bạn xóa bỏ một hiệu ứng được chọn.

Hình 44 – Thiết lập văn bản nâng cao

2.4. Công cụ chọn Selection và Lasso


Công cụ Selection

Hình 45 – Công cụ Selection


Với công cụ này, bạn có thể chọn đối tượng, một phần đối tượng bằng cách kích
đôi chuột vào nó hoặc bôi đen một phần của nó. Bạn có thể kéo giãn, uốn các biên

- 51 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

của hình thể (khi con trỏ chuột đặt ở các biên của hình và nó có dạng như biểu
tượng Selection bổ sung thêm đường cong màu đen).
Công cụ Lasso
Tương tự công cụ Selection, công cụ Lasso cũng cho phép chọn. Điểm khác biệt là
công cụ Selection dùng để chọn toàn bộ một hay nhiều đối tượng (bằng cách giữ
phím Shift) hoặc một phần đối tượng theo khung chọn là hình chữ nhật. Còn công
cụ Lasso có thể chọn theo hình dạng phức tạp. Chúng ta chọn Lasso và vẽ ra
khung chọn. Nó không nhanh bằng Selection nhưng tỏ ra hiệu quả trong nhiều
trường hợp, nếu các đối tượng được chọn nằm phân tán hoặ c buộc phải chọn một
phần đối tượng. Cũng tương tự Selection, ta có thể giữ phím Shift để chọn theo
nhiều vùng khác nhau. Công cụ Lasso không thể dùng để tinh chỉnh đối tượng.
Khi bấm vào biểu tượng này, sẽ xuất hiện thêm các công cụ con bao gồm Magic
Wand, Magic Wand Setting và Polygon Mode.

Hình 46 – Công cụ Lasso


Magic Wand là cô ng cụ chọ n nhanh. Khi sử dụ ng cô ng cụ nà y ta ca� n hiệ u chı̉nh
mộ t so� thô ng so� trong mụ c Magic Wand Setting: threshold – so� pixel cho phé p sai
so� khi chọ n, smoothing – cá ch thức là m mượt né t chọ n (bao go� m: pixel, rough,
normal và smoothing).
Polygon Mode là cô ng cụ cho phé p chọ n theo cá c đường ga� p khú c phức tạ p. Đâ y
là cô ng cụ dù ng đe� chọ n trong những tı̀nh huo� ng đò i hỏ i độ chı́nh xá c cao. Khi sử
dụ ng cô ng cụ nà y, đò i hỏ i người sử dụ ng phả i ra� t tı̉ mı̃ đe� xử lý .
Bạ n cũ ng ca� n lưu ý ra� ng, cá c cô ng cụ chọ n nà y chı̉ có tá c dụ ng đo� i với cá c đo� i
tượng được vẽ ba� ng Flash (hay những đo� i tượng đo� họ a vector nó i chung). Nó
khô ng có tá c dụ ng đo� i với cá c đo� i tượng đo� họ a đie� m. Muo� n á p dụ ng cá c cô ng cụ

- 52 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

nà y cho cá c đo� i tượng đo� họ a đie� m, bạ n ca� n chuye� n đo� i từ đo� họ a đie� m sang đo�
họ a vector. Tuy nhiê n, hiệ n nay chưa có mộ t thuậ t toá n nà o hữu hiệ u đe� chuye� n
đo� i mọ i ả nh đie� m sang ả nh vector mộ t cá ch hoà n hả o. Flash cũ ng ho� trợ chức
nă ng chuye� n đo� i nà y nhưng chı̉ hiệ u quả đo� i với những ả nh có những đặ c trưng
de� chuye� n đo� i (như có nhie� u vù ng mà u đo� ng nha� t). Đe� sử dụ ng chức nă ng nà y, ta
chọ n đo� i tượng đo� họ a đie� m, sau đó chọ n Modify > Bitmap > Trace Bitmap.

2.5. Các công cụ đổ màu Paint Bucket, Ink Bottle và bắt màu
EyeDropper
Công cụ Paint Bucket
Đây là công cụ dùng để đổ màu nền cho vật thể. Khi kích vào biểu tượng này trên
thanh công cụ, trên bảng thuộc tính Properties sẽ hiện ra các thông số liên quan:

Hình 47 – Công cụ Paint Bucket


- Fill color: đổ màu nền cho đối tượng. Để đổ màu bên trong đối tượng, bạn cần
lưu ý rằng khung viền bao quanh nó cần phải kín. Nếu có một khoảng hở trên
đường viền này, thì công cụ không hoạt động (khác với các trình biên tập khác,
thường thì trong trường hợp này, công cụ sẽ đổ màu lên cả những phần liền kề
nó). Đó cũng chính là ưu điểm của công cụ này trong Flash của Adobe. Với công cụ
này, bạn có thể tạo ra những hiệu ứng màu phức tạp. Nó hỗ trợ các chế độ màu
RGB, HSL, chế độ màu Alpha, chế độ không màu, màu dạng kiểu cầu vồng. Bảng
màu của Paint Bucket không cho phép bạn hiệu chỉnh dải màu cầu vồng với các
màu tùy chọn, để làm điều này bạn cần kết hợp với bảng màu đầy đủ
(Windows>Color). Trong hộp thoại màu này, cho phép bạn có thể sử dụng các

- 53 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

kiểu pattern, bitmap và dải màu cầu vồng tùy chọn để đổ màu nền cho đối tượng.
Nhưng bạn cũng lưu ý rằng, nó cần kết hợp với công cụ Paint Bucket này.

Công cụ Ink Bottle


Đây là công cụ dùng để đổ màu viền. Khi bấm chọn vào biểu tượng tam giác đen
nhỏ ở trên biểu tượng Paint Bucket, sẽ xuất hiện biểu tượng công cụ Ink Bottle.

Hình 48 – Công cụ Ink Bottle


Khi bấm vào biểu tượng này, trên vùng thuộc tính Properties sẽ xuất hiện các
thuộc tính liên quan:
- Stroke color: chọn màu viền.
- Stroke: chọn kích thước cho viền.
- Style: chọn dạng thức cho viền.
- 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.
Công cụ EyeDropper
Đây là công cụ dùng để lấy thông số màu tại một vị trí trên đối tượng. Ta chỉ việc
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í mà bạn
vừa kích chuộ t vào.

2.6. Công cụ Free Transform và Gradient Transform


Công cụ Free Transform

- 54 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

Hình 49 – Công cụ Free Transform


Đây là công cụ để tinh chỉnh góc cạnh, xoay đối tượng. Đe� sử dụ ng cô ng cụ nà y, ta
bấm chọn biểu tượng cô ng cụ trê n thanh cô ng cụ , sau đó chọn đối tượng ca� n hiệ u
chı̉nh. Ta có thể thay đổi sự dịch chuyển tương đối của các phần đối tượng ne� u ta
đặt trỏ chuột theo cách cạnh của đối tượng và dịch chuyển nó. Nếu muốn phóng
to, thu nhỏ đối tượng, ta chỉ đặt trỏ chuột vào các nút của đối tượng, và kéo ra
ngoài nếu muốn tăng kích thước, và kéo vào trong nếu muốn làm giảm kích
thước. Nếu muốn xoay đối tượng, ta nhấn vào nút ở các góc của đối tượng, và
xoay đối tượng.
Khi làm việc với các đối tượng bằng công cụ này bạn cần lưu ý đến chức năng
xoay đối tượng.

Hình 50 – Thay đổi tâm xoay của đối tượng

- 55 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

Mặc định, khi ta tạo một đối tượng thì đối tượng đó đã tồn tại một tâm xoay (khi
xoay đối tượng, đối tượng sẽ quay quanh tâm xoay này). Bạn có thể hiệu chỉnh vị
trí của tâm xoay này bằng cách bấm chọn nó và di chuyển.
Trên hình vẽ trên, bạn có thể thấy sự thay đổi vị trí của tâm xoay trên đối tượng.
Ở đối tượng bên trái, tâm xoay nằm ở chính giữa của đường thẳng, còn ở hình
bên phải, tâm xoay được dịch chuyển xuống góc phía dưới. Bạn có thể xoay đối
tượng để nhận ra sự khác biệt: đường thẳng bên trái xoay theo kiểu chong chóng
(tâm quay ở chính giữa của cánh chong chóng), còn đường thẳng ở bên phải thì
xoay theo kiểu kim đồng hồ (tâm quay ở một đầu của kim quay).
Bất kì một đối tượng nào đối xứng tâm, thì theo mặc định, tâm đối xứng của đối
tượng chính là tâm xoay của nó.
Tâm xoay của đối tượng không nhất thiết phải nằm trên đối tượng. Nó có thể nằm
bất kì, tùy thuộc vào mục đích sử dụng của bạn.
Xoay một đối tượng là một hiệu ứng tạo khá đơn giản trong Flash. Bạn sẽ được
tìm hiểu kĩ hơn khi học về cách tạo chuyển động bằng kĩ thuật Tween và
ActionScript.
Công cụ Gradient Transform
Nhờ vào công cụ này, ta có thể hiệu chỉnh các thông số khi đổ màu cầu vồng cho
đối tượng. Sau khi tạo màu cầu vồng cho đối tượng, ta bấm chọn vào biểu tượng
tam giác đen trên công cụ Free Transform, và lú c nà y sẽ xuất hiện công cụ
Gradient Transform, bạn chỉ việc bấm chọn nó.

Hình 51 – Công cụ Gradient Transform


Sau đó, bấm chuộ t vào vùng màu cầu vồng. Trên vùng màu này, sẽ hiện ra một
dạng thức đổ màu như hình bên trên. Bạn chỉ việc hiệu chỉnh hình bao củ a khung

- 56 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

màu này như: kéo to (tăng kích thước vùng sáng), thu nhỏ (giảm kích thước vùng
sáng), hiệu chỉnh vị trí của tam giác (thay đổi tâm của vùng sáng), bấm vào nút
tròn và dịch chuyển nó (thay đổi vị trí vùng màu).

2.7. Các công cụ làm việc với đường Bezier


Như tôi đã giới thiệu ở trên, Flash là một chuẩn đồ họa vector. Mọi đối tượng
trong Flash đều dựa trên cơ sở của đường Bezier. Các đường Bezier được tạo
dựng dựa trên phương pháp nội suy Spline. Một đường Bezier được đặc trưng
bởi điểm và đường điều khiển của điểm đó. Điểm ở đây có thể là điểm uốn, điểm
góc cạnh, điểm đối xứng – ta sẽ gọi chung là điểm điều khiển (vì tương ứng với
đường điều khiển). Nếu bạn đã từng làm quen với Microsoft Word, chắc hẳn bạn
cũng đã biết đến đường Bezier này. Để làm việc với các đối tượng này, Flash cung
cấp cho ta một tập hợp các công cụ để làm việc với đường Bezier: công cụ
SubSelection, Pen, Add Anchor Point, Delete Anchor Point và Convert Anchor
Point. Công cụ SubSelection nằm riêng, các công cụ còn lại được bố trí chung vào
một vị trí trên thanh công cụ. Sau đây, chúng ta sẽ lần lượt tìm hiểu về các công cụ
này.
Công cụ SubSelection

Hình 52 – Công cụ SubSelection


Nhấp chọn biểu tượng SubSelection, sau đó bấm vào đối tượng. Khi đó, đường
viền của đối tượng sẽ hiện ra các đường Bezier cấu thành nên vật thể. Các điểm
được đánh dấu bằng chấm tròn được gọi là các điểm điều khiển đường Bezier.
Với công cụ này, ta có thể hiệu chỉnh vị trí của các điểm này. Điểm điều khiển
trong đường Bezier cũng chia làm hai nhóm: nhóm điểm góc cạnh và nhóm điểm

- 57 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

uốn cong. Bạn có thể nhận thấy chúng – hình vuông, chữ nhật tạo nên từ các điểm
góc cạnh; đường tròn, eclipse được tạo từ các điểm uốn cong.
Công cụ Pen
Công cụ này 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 thông số liên quan đến công cụ này hoàn toàn tương tự với công cụ Line.
Khi sử dụng công cụ Pen, bạn cũng lưu ý rằng, nếu bạn tạo hình thể có dạng
đường thẳng, bạn chỉ việc nhấp vào nút đầu và nút cuối. Nếu bạn muốn tạo dạng
đường cong, bạ n cần rê chuột liên tiếp để hiệu chỉnh đường điều khiển của nó.

Hình 53 – Công cụ Pen

Công cụ Add Anchor Point và Delete Anchor Point


Công cụ Add Anchor Point dùng để bổ sung thêm điểm điều khiển cho đường
Bezier, ngược lại, Delete Anchor Point xóa bớt đi các điểm điều khiển cho đường
Bezier.
Để bổ sung thêm điểm điều khiển, ta chỉ việc chọn công cụ Add Anchor Point, sau
đó bấm vào một vị trí trên đường biên.
Để xóa đi điểm điều khiển, ta chỉ việc chọn công cụ Delete Anchor Point, sau đó
bấm vào một điểm điều khiển cần xóa bỏ.
Việc bổ sung và xóa bỏ các điểm điều khiển rất hữu ích trong việc tạo các đường
uốn. Với các đường uốn đặc thù, ta cần bổ sung vào một số lượng điểm điều khiển
tối ưu cho việc hiệu chỉnh. Ta có thể lấy ví dụ: đối với đường Parabol, ta chỉ cần
ba điểm điều khiển; với đường đồ thị hàm số đa thức bậc ba ta cần bốn điểm điều
khiển.

- 58 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

Các điểm điều khiển là các điểm nằm trên đường biên. Những điểm không nằm
trên đường biên là các điểm thuộc đường điều khiển.

Hình 54 – Hình các điểm điều khiển

Công cụ Convert Anchor Point


Dùng để chuyển đổi điểm điều khiển góc cạnh thành điểm điều khiển uốn cong.
Ngoài ra nó còn có chức năng hiệu chỉnh góc uốn nhờ vào các đường điều khiển.
Chức năng này tương đối giống với chức năng hiệu chỉnh góc cạnh của công cụ
SubSelection. Nhưng điểm khác biệt ở chỗ, công cụ Convert Anchor Point hiệu
chỉnh các đường điều khiển một cách độc lập (tại một điểm điều khiển có hai
đường điều khiển bên trái và bên phải. Công cụ này hiệu chỉnh các đường điều
khiển bên trái và bên phải một cách riêng biệt.), trong khi đó công cụ
SubSelection hiệu chỉnh đồng thời hai đường điều khiển này (điểm uốn đối
xứng).
Để chuyển đổi điểm điều khiển góc cạnh thành điểm uốn cong, ta chỉ việc chọn
công cụ và nhấp vào điểm cần chuyển đổi. Để hiệu chỉnh góc xoay cho các đường
điều khiển, ta chỉ việc xoay các đường điều khiển.

Hình 55 – Công cụ Convert Anchor Point

2.8. Làm việc với các đối tượng


Khi thao tác với các đối tượng, ta thường sử dụng các chức năng sau đây:

- 59 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

- Nhóm viền và nền của đối tượng thành một nhóm: có hai cách nhóm – sử dụng
chức năng Group và chức năng Union. Chọn đối tượng nền và vie� n (nhấp đôi
chuột vào đối tượng), sau đó vào Modify, chọn Group (Ctrl+G) hoặc Combine
Object > Union. Để nhóm nhiều đối tượng thành một nhóm, ta sử dụng chức năng
Group: chọn các đối tượng cần nhóm, nhấn tổ hợp phím Ctrl+G.
- Vô hiệu hóa việc chỉnh sửa một đối tượng: chọn đối tượng cần khóa, vào Modify,
chọn Arrange > Lock (Ctrl+Alt+L).
- Kích hoạt việc chỉnh sửa một đối tượng trở lại: Modify > Arrange > Unlock All
(Ctrl+Shift+Alt+L).
- Sắp xếp thứ tự đối tượng: chọn đối tượng, vào Modify > Arrange. Sau đó, ta có
thể hiệu chỉnh thứ tự sắp xếp như đối với cá c đo� i tượng đo� họ a trong Microsoft
Word.
- Canh chỉnh vị trí và kích thước của đối tượng: vào Modify > Align (Ctrl+K).

Hình 56 – Vùng Align


Các chức năng trong nhóm vùng này, chúng ta đã tìm hiểu ở trên.
- Làm việc với Shape: vào Modify > Shape. Sau đó ta chọn chức năng cần hiệu
chỉnh.
- Làm việc với Bitmap: Bitmap là một đối tượng đồ họa điểm. Flash cũng hỗ trợ đồ
họa điểm. Để làm việc với Bitmap, ta vào Modify > Bitmap. Tương ứng với
Bitmap, sẽ có hai chức năng là Swap Bitmap (thay đổi hình Bitmap) hay Trace
Bitmap (chuyển đổi Bitmap thành dạng vector). Việc chuyển đổi một Bitmap
thành một dạng đồ họa vector là rất phức tạp. Đa số ảnh vector thu được vẫn
không giữ gìn nguyên trạng như đối với đối tượng ảnh Bitmap ban đầu.
- Xây dựng các đối tượng trên các Layer khác nhau: việc sử dụng layer là một kĩ
thuật hữu ích trong đồ họa máy tính. Trong Flash, kı̃ thuậ t Layer nà y cũ ng ra� t
quan trọ ng. Nhờ và o Layer, mà ta có the� tạ o ra cá c chuye� n độ ng riê ng biệ t cho
từng đo� i tượng trê n khung sá ng tá c. Khi ke� t hợp Layer với Timeline, cá c đo� i
tượng sẽ có cá c khung die� n hoạ t củ a riê ng mı̀nh. Sự hoạ t độ ng củ a mo� i đo� i tượng,
chı̉ die� n ra trong layer củ a nó và khô ng gâ y ả nh hưởng tới cá c đo� i tượng trê n cá c
layer khá c.

- 60 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

Hình 57 – Distribute to Layers


Ta có the� la� y mộ t vı́ dụ như sau: bạn hãy tưởng tượng, trên một cả nh quay củ a
bạ n, có một chú cú n, một chú mèo và một khung cảnh ở phía sau. Khi xây dựng
hoạt cảnh, chú cú n hành động theo thao tác riêng của nó, mèo hành động theo
thao tác riêng của mèo, khung cảnh có thể đứng yên hoặc có những hiệu ứng
riêng. Rõ ràng, mỗi đối tượng có một cách thức thực hiện hành động riêng. Nếu ta
xây dựng tất cả chúng trên cùng một layer, thì việc xây dựng hành động khác
nhau là điều không thể. Do đó, trong trường hợp này, ta cần sử dụng layer. Để xây
dựng từng layer cho từng đối tượng, bạn chỉ việc chọn toàn bộ đối tượng cần xây
dựng layer, sau đó kích chuột phải và chọn Distribute to Layers. Khi đó, các đối
tượng khác nhau sẽ nằm trên các layer khác nhau.

- 61 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

Tổng kết chương 2


Trong chương này, chúng ta đã làm quen với các công cụ vẽ hình cơ bản trong
Flash. Với các công cụ thie� t ke� nà y, chúng tôi hi vọng bạn sẽ sử dụng nó một cách
thuần thục. Khi sử dụng các công cụ thie� t ke� , bạn cũng cần quan tâm đến các thao
tác đồng hành với nó: tạ o hı̀nh câ n đo� i ba� ng cá ch giữ phı́m shift, ké o hı̀nh và nha� n
phı́m Ctrl đe� sao ché p, giữ phı́m shift đe� chọ n nhie� u đo� i tượng....
Việc sử dụng thành thạo các công cụ trong Flash sẽ giúp bạn tạo các đối tượng đồ
họa đẹp mắt, phục vụ cho mục đích tạo hoạt hình về sau. Một điều hiển nhiên là
số công cụ này có thể không phải chuyên dụng cho việc thiết kế đồ họa. Nếu bạn
muốn một trình thie� t ke� đồ họa vector chuyên dụng, bạn có thể sử dụng Adobe
Illustrator được đính kèm trong bộ sản phẩm Adobe Design. Tuy nhiên, với các
công cụ hỗ trợ trong Flash, bạn hoàn toàn có thể tạo dựng những đối tượng đồ
họa đỉnh cao phụ c vụ cho cô ng việ c thie� t ke� hoạ t hı̀nh, game....

- 62 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN

Blank Page

- 63 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH

CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH


Biểu tượng là một đối tượng được tạo trong Flash và có thể tái sử dụng. Một biểu
tượng có thể được sử dụng trong một movie hoặc import vào thư viện và sử dụng
trong một movie khác. Có ba loại biểu tượng là: Graphics, Buttons và MovieClips.
Biểu tượng là đối tượng được tạo và lưu vào trong thư viện. Nếu một bản sao của
biểu tượng đó được sử dụng trong movie thì nó được gọi là một sự thể hiện của
biểu tượng đó (instance). Mỗi sự thể hiện của một biểu tượng có một thuộc tính
riêng (màu sắc, kích thước, chức năng…) khác với biểu tượng tạo ra nó. Mọi sự
thể hiện của đối tượng có thể được tạo nhờ vào chức năng kéo thả biểu tượng từ
thư viện vào khung thie� t ke� . Khi một biểu tượng được chỉnh sửa thì mọi sự thể
hiện của nó cũng được cập nhập theo.
Việc sử dụng biểu tượng là phương pháp hiệu quả để giảm kích thước của movie.
Những biểu tượng không được sử dụng trong movie, dù nằm trong thư viện thì
nó cũng không được tính vào kích thước của movie đó.

3.1. 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 (đie� u đó có nghı̃a là ne� u ta
đặ t nó trê n mộ t frame duy nha� t thı̀ nó luô n duy trı̀ mộ t trạ ng thá i nà o đó mà
khô ng bao giờ tạ o ra được những hiệ u ứng độ ng). Bie� u tượng graphic cũ ng khô ng
ho� trợ Actionscript.
Để tạo một Graphic, bạn thao tác như sau:
- Chọn đối tượng cần chuyển đổi sang biểu tượng Graphic.
- Nhấn phím F8 (hoặc kích chuột phải, chọn Convert to Symbol). Trong hộp thoại
Convert to Symbol, có các tùy chọn sau

Hình 58 – Chuyển đổi sang biểu tượng Graphic


+ Name: tên của biểu tượng sẽ được tạo.
+Type: loại biểu tượng cần tạo. Ở đây, chúng ta chọn là Graphic.
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH

Tiếp đến, bạn 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

Hình 59 – Bảng thuộc tính của biểu tượng Graphic


- Thanh tùy chọn thả xuống: cho phép chuyển đổi qua lại giữa các loại biểu tượng.
- Instance of: khi kích chuột vào tùy chọn swap, bạn 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í theo tọa độ của đối tượng thể hiện
(x và y), và kích thước (w – width và h – height). Tùy chọn Lock width and 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: với tùy chọn Style, bạn có thể hiểu chỉnh các thuộc tính Brightness,
Tint, Advanced và Alpha cho đối tượng.
- Looping: tùy 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.
Tạo hiệu ứng động đơn giản bằng biểu tượng Graphic
Trong vı́ dụ nà y, ta sẽ tạ o hiệ u ứng độ ng ba� ng cá ch sử dụ ng bie� u tượng Graphic.
Trong vı́ dụ nà y, tô i có đe� cậ p đe� n ba khá i niệ m: TimeLine, frame và keyframe.
Chú ng ta chı̉ minh họ a cho vı́ dụ sử dụ ng bie� u tượng Graphic mà khô ng thả o luậ n
thê m ve� chú ng. Chi tie� t ta sẽ thả o luậ n trong chương tie� p theo.
(1) Bạ n hã y sử dụ ng cô ng cụ Rectangle đe� tạ o mộ t hı̀nh chữ nhậ t mà u xanh blue
và sau đó chuye� n đo� i nó sang bie� u tượng graphic.

- 65 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH

(2) Nha� p đô i chuộ t và o bie� u tượng graphic nà y đe� mở thanh Timeline củ a nó .
Trong thanh Timeline nà y, ta chọ n frame thứ 2 và nha� n phı́m F6 đe� tạ o mới mộ t
keyframe. Trê n keyframe nà y, ta thay đo� i mà u sa� c cho hı̀nh chữ nhậ t thà nh mà u
đỏ .
(3) Quay trở lạ i với khung sá ng tá c, tạ i frame thứ 2 nha� n phı́m F5.
Khi kie� m tra movie, bạ n ca� n chọ n đo� i tượng graphic và hiệ u chı̉nh cá c thô ng so�
trong mụ c Looping la� n lượt: loop, play one, single frame đe� quan sá t ke� t quả . Khi
chọ n hiệ u ứng loop, thı̀ sự bie� n đo� i từ mà u xanh blue sang mà u đỏ và ngược lạ i sẽ
die� n ra mộ t cá ch liê n tụ c (lặ p liê n tụ c); khi chọ n hiệ u ứng play one thı̀ sự bie� n đo� i
đó chı̉ die� n ra mộ t la� n duy nha� t; khi chọ n single frame thı̀ khô ng có sự bie� n đo� i
nà o die� n ra (bởi nó chı̉ sử dụ ng mộ t frame đơn duy nha� t).
Hai tù y chọ n loop và play one thường sử dụ ng khi muo� n tạ o ra cá c hı̀nh ả nh độ ng
như đo� i với cá c ả nh độ ng gif. Nghı̃a là sử dụ ng chức nă ng thay the� từng khung
hı̀nh đơn giả n. Cò n đo� i với single frame, nó thường được sử dụ ng khi ta muo� n to� i
ưu khung thie� t ke� . Bạ n có the� thie� t ke� nhie� u hı̀nh ả nh trê n đo� i tượng graphics
nà y. Mo� i hı̀nh ả nh được thie� t ke� trê n mo� i keyframe riê ng biệ t. Khi ca� n sử dụ ng
hı̀nh ả nh trê n frame nà o, ta chı̉ ca� n chọ n thuộ c tı́nh looping tương ứng với tù y
chọ n single frame và chı̉ định tù y chọ n first tương ứng với keyframe mà hı̀nh ả nh
củ a đo� i tượng ca� n dù ng đang thie� t lậ p. Cá ch là m nà y giú p ta quả n lý cá c đo� i tượng
đo� họ a đơn giả n hơn. Bạ n hã y thử tưởng tượng, bạ n có mộ t khung cả nh. Khung
cả nh nà y sẽ thay the� theo 4 mù a: xuâ n, hạ , thu, đô ng. Khi thie� t ke� cả nh, ta có the�
tạ o mộ t bie� u tượng graphic có tê n là landcape. Trê n landcape nà y sẽ có 4
keyframe tương ứng với sự bie� n đo� i cả nh sa� c theo 4 mù a. Trong phim, ne� u ta ca� n
hie� n thị theo cả nh sa� c củ a mù a nà o, thı̀ ta chı̉ việ c thay đo� i tham so� first từ 1 – 4
(khi looping được chọ n là single frame) mà khô ng phả i thay đo� i quá nhie� u cá c lớp
đo� i tượng hay tù y chı̉nh lạ i trên thanh Timeline.

3.2. Biểu tượng Button


Biểu tượng Button dùng để bổ sung một tương tác với movie, đá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. Bie� u tượng Button có
the� được cà i đặ t và đie� u khie� n ba� ng ActionScript. Đie� u nà y hoà n toà n khá c so với
bie� u tượng Graphic ở trê n. Bạ n cũ ng ca� n lưu ý ra� ng, trong Flash có hai lớp đo� i
tượng Button: Simple Button và Button. Lớp Simple Button là lớp Button do
người dù ng thie� t ke� và sử dụ ng chức nă ng Convert to Symbol. Lớp Button cò n lạ i
na� m trong thư việ n fl.Controls được sử dụ ng trong việ c thie� t ke� giao diệ n GUI cho
cá c ứng dụ ng. Chú ng là hai lớp đo� i tượng hoà n toà n khá c biệ t. Mặ c dù chú ng có

- 66 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH

nhie� u đie� m tương đo� ng. Trong mụ c nà y, ne� u ta chı̉ đe� cậ p đe� n Simple Button mà
khô ng quan tâ m đe� n đo� i tượng fl.Controls.Button.
Để tạo một Button, bạn thao tác như sau:
- Chọn đối tượng cần chuyển đổi sang Button.
- Nhấp phím F8 hoặc kích chuột phải, chọn Convert to Symbol. Khi đó, sẽ xuất
hiện hộp thoại sau:

Hình 60 – Chuyển đổi sang biểu tượng Button


Trong mục Type, chọn Button và nhấp Ok.
Tạo hiệu ứng cho Button
Ở đây, ta chỉ thao tác để tạo hiệu ứng cho Button. Ta không thảo luận thêm về
việc sử dụng TimeLine và cách tạo hiệu ứng động. Chi tiết về phần này tô i sẽ trı̀nh
bà y trong chương tiếp theo.
Mỗi biểu tượng Button có 4 Frame trên TimeLine. Tương ứng với Frame Up là
hiệu ứng khi trỏ chuột được thả ra (sau khi bấm xuống), Frame Down tương ứng
với hiệu ứng khi trỏ chuột nhấn xuống, Frame Over tương ứng với hiệu ứng khi
trỏ chuột di chuyển qua đối tượng và Frame Hit tạo một vùng tương tác ảo cho
Button (nghĩa là khi thao tác trên vùng này hoàn toàn tương tự với thao tác trên
chính Button đó). Vùng tương tác này gọi là ảo bởi nó không hiển thị trên movie.
Sau đây, ta sẽ thao tác để tạo hiệu ứng cho Button.
(1) Kích đôi chuột vào Button vừa tạo.
(2) Nhấp chọn Frame Up, nhấn phím F6 và thay đổi thuộc tính mà u sa� c, tọ a độ x
và y, mà u vie� n, độ rộ ng, độ cao… cho Button này. Hoàn toàn tương tự cho Frame
Down và Frame Over.
(3) Nếu bạn muốn tạo vùng tương tác ảo, bạn hãy sử dụng công cụ vẽ để tạo một
vùng tương tác này trong Frame Hit: chọn Frame Hit, nhấp F6 và vẽ một hình thể
trong Frame Hit này.
(4) Quay trở lại Scene, nhấp Ctrl+Enter để kiểm tra.
Việ c tạ o Button và đie� u khie� n nó trong Flash là he� t sức đơn giả n. So với lớp
fl.Controls.Button, thı̀ Simple Button đơn giả n hơn nhie� u. Ta cũ ng ca� n lưu ý ra� ng,
Simple Button khô ng ho� trợ thuộ c tı́nh label (pha� n vă n bả n hie� n thị trê n Button)

- 67 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH

nhưng ta hoà n toà n có the� tạ o được vă n bả n cho Button ba� ng cô ng cụ Text ke� t
hợp với từng frame Up, Down, Over và Hit.
Các 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.
- Thanh tùy chọn thả xuống: cho phép chuyển
đổi qua lại giữa các loại 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, bạn có thể chọn Track
as Button hoặc Track as MenuItem.
- Filter: hoàn toàn tương tự với Filter khi làm
việc với công cụ Text.

Hình 61 – Bảng thuộc tính của biểu tượng Button


Tạo biểu tượng Button nhanh chóng: bạn có thể sử dụng một trong các chức năng
sau đây để tạo một biểu tượng Button hết sức nhanh chóng:
+ Sử dụng các Button được tạo sẵn: vào Windows > Common Libraries > Button.
+ Sử dụng Commands: bạn hãy tạo một khối hình thể, nhấp chọn nó. Sau đó vào
Commands > Make Button.

3.3. 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ó the� dù ng đe� 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, bạn có thể cài đặt một tên
hiển thị cho nó để điều khiển nó bằng ActionScript.

- 68 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH

Tạo hiệu ứng cho Movieclip: chúng ta sẽ tìm hiểu về cách tạo hoạt hình cho một
MovieClip trong chương tiếp theo.
Các thuộc tính của biểu tượng MovieClip
- Instance Name: tên hiển thị của biểu
tượng. Được dùng khi làm việc với
ActionScript.
- Thanh tùy chọn thả xuống: cho phép
chuyển đổi qua lại giữa các loại 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.
- 3D Position and View: hiểu chỉnh vị trí
trong không gian và khung nhìn 3D.
- Perspective Angle: hiệu chỉnh góc phối
cảnh theo độ xa gần.
- Vanishing Point: hiệu chỉnh tọa độ của
điểm triệt tiêu.
- Color effect: chọn hiệu ứng màu sắc cho
đối tượng, bao gồm:Brightness, Tint,
Advanced và Alpha.

Hình 62 – Bảng thuộc tính của biểu tượng MovieClip


- 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, bạn có thể chọn Track as Button hoặc Track as MenuItem.
Đâ y là cá ch thức tương tá c với Button. Nó có the� tạ o hiệ u ứng theo cá ch củ a mộ t
Button truye� n tho� ng hay theo cá ch củ a mộ t MenuItem.
- Filter: hoàn toàn tương tự với Filter khi làm việc với công cụ Text.

3.4. Làm việc với Library


Library là thư viện quản lý các đối tượng được import và convert. Để convert một
đối tượng ta kích chuột phải vào đối tượng và chọn Convert to Symbol. Khi đó,

- 69 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH

biểu tượng này sẽ xuất hiện trong Library. Kích thước của một movie không bao
gồm toàn bộ các đối tượng trong Library, nó chỉ bao gồm các đối tượng được sử
dụng trong movie.
Để import một đối tượng từ bên ngoài vào Libray, ta chọn File > Import > Import
to Library. Sau đó, các đối tượng được chọn sẽ được đưa vào trong Library.

Hình 63 – Khu vực quản lý thư viện Library


Các đối tượng nằm trong thư viện được tổ chức và quản lý theo cấu trúc cây thư
mục. Để tổ chức và quản lí theo cây thư mục, ta cần tạo mới thư mục theo cấu trúc
cây của Windows Explorer. Các đối tượng trong thư viện có thể được chứa trong
các thư mục của cây thư mục này. Thư viện của Flash cho phép bạn thực hiện
thao tác kéo thả các đối tượng từ vị trí này trong cây thư mục sang vị trí khác. Ở
phía trên của cấu trúc cây thư mục này là khung Preview, cho phép bạn có thể
xem qua các đối tượng trong thư viện chương trình của Flash.

- 70 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH

Tổng kết chương 3


Trong chương này, chúng ta đã làm quen với ba loại biểu tượng trong Flash.
Chúng có một vài điểm tương đồng và một vài điểm khác biệt. Một điểm khác biệt
nhất giữa chúng là số Frame hỗ trợ cho mỗi biểu tượng là khác nhau: Graphic – 1
Frame, Button – 4 Frame và MovieClip – nhiều Frame. Chı̉ có bie� u tượng Button
và MovieClip mới có the� được cà i đặ t đe� sử dụ ng trong ActionScript. Bie� u tượng
Graphic được dù ng đe� to� i ưu việ c quả n lý cá c đo� i tượng đo� họ a; bie� u tượng
Button dù ng đe� tạ o ra cá c nú t nha� n tương tá c trong phim; bie� u tượng MovieClip
dù ng đe� tạ o hoạ t hı̀nh và cá c tương tá c nâ ng cao khá c. MovieClip là linh ho� n củ a
Flash bởi ta khô ng the� tạ o ra hoạ t hı̀nh mà khô ng sử dụ ng đe� n nó .
Hi vọng sau khi học xong chương này, bạn sẽ hiểu được cách sử dụng các loại
biểu tượng củ a Flash. Cách chuyển đổi một đối tượng đồ họa sang các biểu tượng.
Cách chuyển đổi các đối tượng hie� n thị cho mỗi biểu tượng….

- 71 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH

Blank Page

- 72 -
CHƯƠNG 4. TẠO HOẠT CẢNH

CHƯƠNG 4. TẠO HOẠT CẢNH

4.1. Tìm hiểu về TimeLine


TimeLine là vùng tương tác để tạo ra chuyển động trong movie của Flash. Để tạo
ra chuyển động, TimeLine thay thế từng Frame một theo thời gian.

Hình 64 – Vùng TimeLine


Trong TimeLine, bạn có thể dễ dàng thấy được ba phần chính: Phần quản lý Layer
(bên trái), Phần quản lý Frame (phía trên bên phải) và Phần quản lý Công cụ
(phía dưới bên phải).
- Layer: quản lý các lớp đối tượng. Mỗi một đối tượng trên Layer sẽ có một thanh
TimeLine của riêng mình. Trong trường hợp minh họa trên, thì đối tượng trên
Layer 1 nằm trên TimeLine phía dưới và đối tượng trên Layer 2 nằm trên
TimeLine phía trên.
- Thanh TimeLine: chứa nhiều Frame. Khi tạo ra chuyển động, các Frame sẽ lần
lượt thay thế cho nhau. Frame sau sẽ thay thế cho Frame trước đó. Ta có thể xem
qua hành động bằng cách kéo Frame hiện tại (Frame đánh dấu màu đỏ) sang trái
hoặc phải trên TimeLine.
- Các chức năng hiển thị trên thanh Timeline: Trong bie� u tượng menu thả xuo� ng
na� 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).
- Vùng thanh công cụ - gồm các công cụ sau đây:
+ Center Frame: xác định Frame trung tâm.
CHƯƠNG 4. TẠO HOẠT CẢNH

+ 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. Sự hiển thị này bao gồm toàn bộ đối tượng.

Hình 65 – Onion Skin


+ Onion Skin Outlines: 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. Sự hiển thị này chỉ bao gồm viền của đối tượng.

Hình 66 – Onion Skin Outlines


+ Edit Multiple Frames: 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. Khi đó, ta có thể chỉnh sửa đối
tượng (Hình 44).
+ Các thông số khác: Current Frame – vị trí của Frame hiện tại (Frame được đá nh
da� u đỏ ). Frame rate – tốc độ chuyển động (tính bằng số Frame trên giây). Thô ng
so� Frame rate cà ng lớn, thı̀ phim sẽ cà ng die� n ra nhanh. Theo chua� n củ a kı̃ thuậ t
24 hı̀nh trê n giâ y thı̀ to� c độ nà y là 24fps. Hie� n nhiê n, bạ n có the� thay đo� i giá trị
nà y. Tuy nhiê n, đie� u nà y khô ng được khuye� n khı́ch vı̀ nó là chua� n quo� c te� .
Elapsed Time – thời gian thực thi từ vị trı́ đa� u tiê n (frame 1) cho đe� n Frame hiệ n
tạ i (current Frame) trên thanh TimeLine.

- 74 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Hình 67 – Onion Skin và Onion Skin Outlines kết hợp với Edit Multiple Frames
Một số chức năng khi làm việc với TimeLine
Khi làm việc với TimeLine, ta thường xuyên sử dụng đến hai phím tắt sau đây:
+ Phím F5: chèn Frame vào thanh TimeLine (tương ứng với Insert Frame). Nếu
vùng TimeLine trong thanh TimeLine đã được tạo Tween, thì nó sẽ tự động giãn
vùng Tween này (chèn thêm Frame vào trong vùng Frame đã tạo Tween, các
Frame mới tạo này cũng kế thừa Tween). Ne� u chưa tạ o Tween, thı̀ nó đơn thua� n
sao ché p toà n bộ cá c đo� i tượng trê n keyframe lie� n ngay trước vị trı́ củ a frame
được chè n. Khi thay đo� i cá c đo� i tượng củ a ba� t kı̀ mộ t frame nà o trong khoả ng nà y
thı̀ cá c cá c đo� i tượng trê n cá c frame khá c cũ ng sẽ được cậ p nhậ t theo.
+ Phím F6: chèn KeyFrame vào thanh TimeLine (tương ứng với Insert KeyFrame).
Frame cuối cùng khi chèn là một KeyFrame. Với KeyFrame này, ta có thể tạo điểm
chốt cho hành động trong một movie. Khi kết hợp với Tween, nó sẽ tạo một
chuyển động mềm mại cho movie của Flash. Đie� m khá c biệ t khi sử dụ ng
Keyframe so với frame thô ng thường là frame thô ng thường chı̉ đơn thua� n sao
ché p cá c đo� i tượng củ a keyframe trước đó đe� tạ o ra mộ t dã y cá c khung hı̀nh
gio� ng nhau. Trong khi đó , keyframe sẽ tạ o ra đie� m cho� t. Nó cũ ng sao ché p toà n bộ
cá c đo� i tượng củ a keyframe trước đó sang cá c frame lie� n ngay trước keyframe
tạ o ra đie� m cho� t. Nhưng khi ta thay đo� i đo� i tượng ở keyframe mới tạ o ra nà y, thı̀
cá c cá c đo� i tượng trê n cá c frame khá c khô ng thay đo� i.
Chúng ta có thể tham khảo ví dụ sau đây, để hiểu rõ hơn về hai phím tắt này.
Trong ví dụ này, chúng ta sẽ tạo một hình chữ nhật có nền trắng và viền đen
(Hình 68). Tại Frame thứ 5, bạn nhấp vào Frame này, nhấn phím F5. Sau đó, bạn
thay đổi độ lớn của viền (thuộc tính Stroke = 5) – xem Hình 69. Giờ bạn hãy kiểm
tra độ lớn của viền trên mọi Frame. Như bạn thấy, viền của tất cả hình chữ nhật
trên mọi Frame đều thay đổi thành 5.

- 75 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Bây giờ, bạn hãy làm lạm lại ví dụ trên bằng cách thay phím F5 bằng phím F6. Bạn
sẽ thấy rằng thuộc tính Stroke sẽ không thay đổi trên mọi Frame, chỉ thay đổi duy
nhất ở KeyFrame cuối cùng (KeyFrame mà bạn hiệu chỉnh).

Hình 68 – Khởi tạo một hình thể trên KeyFrame đầu tiên.

Hình 69 – Chèn các Frame bằng phím F5

- 76 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Hình 70 – Chèn KeyFrame bằng phím F6


Như vậy, bạn có thể thấy rằng, nếu bạn muốn sao chép một Frame cho các Frame
tiếp theo, bạn sử dụng phím F5. Ngược lại, nếu bạn muốn tạo một sự thay đổi,
bạn cần sử dụng phím F6.
Sao chép và cắt dán một nhóm Frame: để thực hiện chức năng này, bạn hãy bôi
đen nhóm Frame mà bạn muốn sao chép hoặc cắt dán, sau đó bạn kích chuột phải
và chọn Copy Frames hoặc Cut Frames.

Hình 71 – Sao chép hoặc Cắt dán nhóm Frame

- 77 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Để thực hiện chức năng dán, bạn hãy chọn vị trí cần dán nhóm Frame đã copy
trên TimeLine. Sau đó, kích chuột phải và chọn Paste Frames.

Hình 72 – Dá n một nhóm Frame đã được copy hoặc cut


Clear Frames, Clear KeyFrame và Remove Frames: chức năng Clear Frames sẽ làm
cho các đối tượng trên Layer của Frame được chọn sẽ bị xóa đi. Hay nói cách
khác, Clear Frames sẽ tạo ra hai KeyFrame ở vị trí bắt đầu và kết thúc của nhóm
Frame được đánh dấu. Tương ứng với vị trí đầu tiên, nó sẽ chèn một Blank
KeyFrame (là một KeyFrame nhưng không chứa đối tượng nào trên nó) và
KeyFrame tương ứng với vị trí kết thúc. Clear KeyFrame cũng tương tự như Clear
Frame, nhưng nó áp dụng cho một KeyFrame. Còn Remove Frames sẽ xóa sạch
các Frame này lẫn đối tượng trên nó.
Convert to KeyFrames và Convert to Blank KeyFrames: chuyển đổi một Frame
thành KeyFrame hoặc Blank KeyFrame.
Insert Blank KeyFrame: chèn một Blank KeyFrame.
Reverse Frames: cho phép lật ngược thứ tự của một nhóm Frame. Để thực hiện
chức năng này, bạn bôi đên nhóm Frame, kích chuột phải và chọn Reverse Frame.
Với chức năng này, bạn có thể tạo ra một chuyển động mang tính đối xứng.
Tạo chuyển động nhờ vào kĩ thuật “Frame by Frame”
Đây là kĩ thuật tạo chuyển động dựa trên cơ sở của kĩ thuật 24 hình/giây. Các
Frame sẽ hie� n thị tuần tự trên Scene. Sự hiển thị từng Frame một này tạo ra
chuyển động cho đối tượng.

- 78 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Ta sẽ minh họa kĩ thuật “Frame by Frame”. Ví dụ sau đây sẽ minh họ a cá ch tạo
hiệu ứng động cho các kí tự trong từ “Flash”.
Bước 1. Sử dụng công cụ Text, tạo một dòng văn bản có nội dung là “Flash”.
Bước 2. Chọn công cụ Selection. Bấm vào dòng văn bản sau đó kích chuột phải và
chọn Break Apart.
Bước 3. Nhấp chọn Frame thứ hai trong TimeLine. Nhấp phím F6. Sau đó bấm
chọn kí tự đầu tiên – kí tự F, và dịch chuyển nó lên trên so với các kí tự còn lại hoặc
thay đổi màu sắc của nó.

Hình 73 – Kĩ thuật Frame by Frame


Chọn Frame thứ ba trong TimeLine. Nhấp phím F6. Sau đó tiếp tục với kí tự thứ hai
– kí tự l. Quá trình này cứ tiếp diễn cho đến kí tự cuối cùng là kí tự h.
Bước 4. Nhấp Ctrl+Enter để kiểm tra sản phẩm.
Với kĩ thuật Frame by Frame, bạn hoàn toàn có thể tạo ra hoạt cảnh. Nhưng một
nhược điểm của kĩ thuật này là nếu bạn muốn tạo một hiệu ứng mềm mại thì bạn
phải thao tác rất mất thời gian. Flash cung cấp cho bạn các phương pháp sau đây
để tạo chuyển động với tên gọi là Tween. Có ba phương pháp Tween: Classic
Tween, Motion Tween và Shape Tween. Về cơ bản, chúng có nhiều điểm tương
đồng và nhie� u đie� m khá c biệ t đặ c trưng. Chúng ta sẽ lần lượt khảo sát ba loại
Tween này.

- 79 -
CHƯƠNG 4. TẠO HOẠT CẢNH

4.2. Classic Tween


Classic Tween là một kĩ thuật tạo chuyển động được cung cấp trong các phiên bản
từ Flash CS3 trở về trước. Trong phiên bản Flash CS5+, Adobe vẫn còn duy trì kĩ
thuật này. Về cơ bản, khi thao tác với kĩ thuật Classic Tween ta cần phải sử dụng
đến hai KeyFrame khởi đầu và KeyFrame kết thúc. Kể từ ấn bản CS4, Adobe đã
đưa vào một kĩ thuật mới gọi là Motion Tween – một kĩ thuật mà theo Adobe là sử
dụng đơn giản, không cần tạo KeyFrame rắc rối như Classic Tween. Mục đích tạo
ra kĩ thuật Classic Tween là tạo ra 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).
Bạn không thể sử dụng các hiệu ứng 3D cho Classic Tween cũng như không thể
sử dụng chức năng swap symbol cho đối tượng thể hiện. Nhưng sở dĩ Adobe vẫn
lưu lại kĩ thuật này trong phiên bản CS5 dù kĩ thuật Motion Tween có nhiều ưu
điểm hơn là vì kĩ thuật Classic Tween có những ưu điểm riêng mà Motion Tween
không thể thay thế được. Một trong những ưu điểm đó là kĩ thuật Classic Tween
cho phép chứa Frame ActionScript.
Các bước sử dụng Classic Tween để tạo hiệu ứng động
Ví dụ sau đây sẽ trình bày cho bạn phương pháp tạo quả bóng rơi nhờ vào kĩ
thuật Classic Tween.
Bước 1. Trên khung sáng tác, bạn hãy sử dụng công cụ Oval để tạo một hình quả
bóng và trang trí cho nó theo hình quả bóng chuyền.
Bước 2. Kích chuột vào Frame thứ 10, nhấp phím F6 để chèn KeyFrame kết thúc.
Tại Frame thứ 10 này, bạn hãy thay đổi vị trí của quả bóng (chạm mặt đất). Sau khi
chạm đất, quả bóng sẽ nẩy lên. Để tạo điều này, bạn bấm vào Frame thứ 20, nhấp
phím F6 để chèn KeyFrame kết thúc. Tại KeyFrame này, bạn hãy thay đổi vị trí của
quả bóng lần nữa (vị trí quả bóng nẩy đến). Bạn hãy tiếp tục quá trình này cho đến
khi bạn cảm thấy phù hợp (thời điểm mà quả bóng dừng). Bạn có thể quan sát quá
trình này trong hình 74 bên dưới.
Bước 3. Bấm chuột vào khoảng cách giữa KeyFrame mở đầu và KeyFrame kết
thúc, kích chuột phải và chọn Classic Tween. Bạn hãy lặp lại điều này cho các
khoảng KeyFrame còn lại.
Bước 4. Nhấn Ctrl+Enter để kiểm tra kết quả.
Đây là một ví dụ đặc trưng sử dụng Classic Tween – dùng để tạo chuyển động của
đối tượng. Bạn hoàn toàn có thể sử dụng nó để hiệu chỉnh thuộc tính của đối
tượng, dù rằng việc này không phải là chức năng chính yếu dành cho nó. Bạn cũng
cần lưu ý rằng, trong ví dụ ở trên, mỗi lần bạn nhấn phím F6 là bạn đã tạo mới
một KeyFrame kết thúc và KeyFrame kế tiếp của KeyFrame kết thúc đó cũng

- 80 -
CHƯƠNG 4. TẠO HOẠT CẢNH

đóng chức năng là KeyFrame mở đầu của KeyFrame kết thúc sau. Nghĩa là mỗi
lần bạn nhấp F6, bạn đã tạo ra thêm một khoảng đánh dấu KeyFrame để tạo
Classic Tween.

Hình 74 – Kĩ thuật Classic Tween


Trong hình minh họa trên, Layer 1 chứa quả bóng, Layer 2 chứa đo� i tượng minh
họ a cho sà n nhà (hình chữ nhật màu xanh). Các nút đen trên TimeLine của Layer
1 là các KeyFrame. Các khoảng giữa các nút này là các khoảng đánh dấu
KeyFrame của Classic Tween.

4.3. Shape Tween


Kĩ thuật Shape Tween dường như có những tính năng riêng biệt. Mặc dù nó cũng
có thể dùng để chuyển đổi màu sắc, hình dáng của vật thể như hai loại Tween còn
lại. Nhưng chức năng chính của nó là “biến hình”. Để tạo sự biến hình, cũng tương
tự Classic Tween, bạn phải tạo hai KeyFrame mở đầu và kết thúc. Shape Tween
không hỗ trợ hiệu ứng 3D, không hỗ trợ chức năng swap symbol để thay đổi biểu
tượng nguồn cho một đối tượng thể hiện. Khi tạo Shape Tween, đối tượng sẽ
chuyển đổi thành hai đối tượng Graphic. Hai biểu tượng này tương ứng với hai
Keyframe đầu tiên và Keyframe cuối cùng của Shape Tween. Về cơ chế của Shape
Tween, nó sử dụng thuật toán Transform – nghĩa là sẽ dịch chuyển các điểm được

- 81 -
CHƯƠNG 4. TẠO HOẠT CẢNH

đá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.
Các bước sử dụng Shape Tween để tạo hiệu ứng động
Trong ví dụ này, chúng ta sẽ tạo hiệu ứng biến đường thẳng thành đường cong.
Bạn không thể tạo được hiệu ứng này bằng các Tween còn lại. Đây cũng là một ví
dụ điển hình sử dụng Shape Tween.

Hình 75 – Kĩ thuật Shape 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. Với công cụ Shape Tween, bạn có thể tạo Tween trước khi chèn KeyFrame
hoặc sau khi chèn KeyFrame. Ta sẽ minh họa bằng việc tạo Tween trước. Bạn hãy
dùng công cụ Selection, bấm chọn đối tượng, kích chuột phải và chọn Create Shape
Tween.
Bước 2. Bấm chọn vào Frame 30 trên TimeLine, nhấp phím F6 để chèn KeyFrame
kết thúc. Bạn bấm chọn công cụ Add Anchor Point và bấm vào vị trí giữa đường
thẳng để bổ sung điểm điều khiển. Tiếp đến, bạn chọn công cụ Convert Anchor Point
để tạo điểm uốn. Bạn hãy bấm chọn điểm mà bạn vừa tạo và uốn đường thẳng này
thành đường cong như trên.
Bước 3. Nhấn tổ hợp Ctrl+Enter để kiểm tra sản phẩm.
Bạn lưu ý rằng, trong hình minh họa trên, tôi đã sử dụng chức năng Onion Skin.
Sử dụng Shape Hint để điều khiển sự biến hình

- 82 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Khi sử dụng Shape Tween, nó sẽ tự động tạo ra sự biến hình theo một thuật toán
được định sẵn. Nếu bạn muốn điều khiển sự biến hình này, Flash cũng cung cấp
cho bạn công cụ đó là Shape Hint.
Shape Hint là một điểm điều khiển khi sử dụng Shape Tween. Để sử dụng chức
năng này, bạn cần tạo một Shape Tween cho một đối tượng, sau đó vào menu
Modify > Shape > Add Shape Hint (phím tắt là Ctrl+Shift+H). Shape Hint sẽ xuất
hiện theo cặp: một điểm ở Frame đầu tiên trên TimeLine của Tween và một điểm
ở Frame cuối cùng. Các Shape Hint này được đánh chỉ số là a, b, c…. Bạn hãy quan
sát hai hình vẽ sau đây

Hình 76 – Các cặp Shape Hint ở Frame đầu (bên trái) và Frame cuối (bên phải)
Khi sử dụng Shape Hint, các điểm cùng cặp (cùng chỉ số) sẽ tạo ra sự biến hình
tương ứng, nhưng luôn đảm bảo điểm cùng cặp của Frame thứ đầu tiên sẽ chuyển
thành điểm cùng cặp của Frame cuối cùng (điểm a ở hình bên trái sẽ biến thành
điểm a ở hình bên phải, tương tự điểm b và c).
Bằng cách bổ sung các Shape Hint này, bạn có thể điều khiển chuyển động của đối
tượng.
Để gỡ bỏ một Shape Hint, bạn chỉ việc chọn nó, kích chuột phải và chọn Remove
Hint.

4.4. Motion Tween


Như đã nêu ở trên, kĩ thuật Motion Tween cũng được dùng để tạo chuyển động.
Nó cũng tương tự như kĩ thuật Classic Tween, 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ột ưu điểm
của Motion Tween mà trong phiên bản Flash CS4 mới được bổ sung vào là hỗ trợ
hiệu ứng 3D. Có hai hiệu ứng 3D là Translation và Rotation. Chi tiết về hai chức
năng này ta sẽ tìm hiểu thêm trong mục cuối cùng của chương này.

- 83 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Hình 77 – Kĩ thuật Motion Tween


Nếu so sánh với kĩ thuật Frame by Frame và Classic Tween, thì bạn cũng nên biết
rằng, với kĩ thuật Motion Tween, bạn có thể tối ưu kích thước của file Flash khi
xuất bản. Với Motion Tween, bạn còn có thể hiệu chỉnh đường dịch chuyển, tọa
độ, góc xoay, Filter, Blending… 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
Trong ví dụ này, ta tạo hiệu ứng chuyển động theo hình cánh cung cho đối tượng
được vẽ. Trong hình minh họa, đường màu xanh minh họa cho đường chuyển
động của đối tượng.
Bước 1. Dùng công cụ Brush vẽ 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 thỏa mãn nhu cầu sử dụng, bạn
có thể thay đổi nó bằng cách đặt con trỏ chuột vào vị trí cuối cùng cùng vùng
Frame được đánh dấu. Khi trỏ chuột có dạng , bạn hãy nhấp chuột và kéo sang
trái hoặc sang phải.
Bước 2. Di chuyển hình được vẽ sang vị trí mới. Khi đó, bạn sẽ thấy trên khung
sáng tác xuất hiện một thanh mô tả chuyển động của đối tượng (thanh màu xanh
trong hình minh họa). Bạn có thể sử dụng công cụ Selection để thay đổi dạng thức
của đường chuyển động.

- 84 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Bước 3. Nhấn tổ hợp Ctrl+Enter để kiểm tra sản phẩm.


Hiệu chỉnh chuyển động và các hiệu ứng nâng cao với Motion Editor
Đây là một công cụ mạnh mẽ được tích hợp với kĩ thuật Motion Tween. Để sử
dụng chức năng này, đầu tiên bạn hãy tạo một Motion Tween. Sau đó, vào
Windows>Motion Editor. Khi đó, cửa sổ Motion Editor xuất hiện.
Hộp thoại Motion Editor này được chia làm hai phần: phần bên trái và phần bên
phải. Phần bên trái chứa các chức năng và các thông số liên quan, phần bên phải
là biểu đồ minh họa. Ta có thể hiệu chỉnh một trong hai phần này. Các nhóm chức
năng trong Motion Editor mà bạn cần quan tâm là:
- Basic Motion: dịch chuyển vị trí của vật trong không gian ba chiều (theo tọa độ x,
tọa độ y và góc z).

Hình 78 – Bảng thuộc tính Motion Editor


- Transformation: xoay chuyển (skew) theo chiều x, y hoặc kéo giãn (scale) theo
chiều x, y.
- Color Effect: bấm vào biểu tượng dấu cộng để bổ sung vào cá c hiệ u ứng. Có các
hiệu ứng Alpha, Tint, Brightness và Advanced color. Nếu muốn loại bỏ, ta chỉ việc
nhấp vào dấu trừ, và chọn hiệu ứng cần xóa.
- Filter: cũng tương tự như Filter cho văn bản. Ta có thể bổ sung bằng cách bấm
vào dấu cộng, và loại bỏ bằng cách bấm vào dấu trừ.
- Eases: bổ sung thêm các hiệu ứng khác.
Tạo chuyển động nhờ vào Motion Presets

- 85 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Flash CS5 cung cấp sẵn cho ta các hiệu ứng chuyển động có sẵn trong vùng chức
năng Motion Presets. Để sử dụng chức năng này, ta vào Windows > Motion
Presets.
Vùng chức năng Motion Presets này cung cấp cho chúng ta rất nhiều hiệu ứng làm
sẵn. Khi sử dụng các hiệu ứng trong vùng chức năng này, các đối tượng của bạn
không cần phải chuyển đổi sang biểu tượng. Bạn có thể thao tác trực tiếp trên các
đối tượng. Dĩ nhiên, bạn cũng có thể áp dụng các hiệu ứng này cho các biểu tượng
như Graphic, Button hay MovieClip.
Để minh họa cho vùng chức năng này, ta sẽ cùng nhau xây dựng một vài hiệu ứng
hoạt hình sau đây:
Hiệu ứng quả bóng chuyển động: bạn hãy tạo một khối cầu dạng 3D như trên
hình vẽ. Sau đó, bạn hãy bấm chọn đối tượng, bấm tiếp vào khung Motion Presets
và chọn lựa hiệu ứng chuyển động tương ứng.

Hình 79 – Chức năng Motion Presets: chọn hiệu ứng bounce-in-3D


Ở trong ví dụ này, tôi sử dụng loại chuyển động bounce-in-3D. Sau khi chọn lựa
hiệu ứng chuyển động, bạn nhấp nút Apply. Ne� u kết hợp với Onion Skin, chúng ta
sẽ thấy dạng chuyển động của nó như hình minh họa bê n dưới.
Khi sử dụng dạng thức chuyển động được tạo sẵn của Motion Presets, bạn sẽ
nhận thấy rằng việc tạo chuyển động trong trường hợp này cũng sẽ quy về việc
sử dụng Motion Tween. Bạn sẽ dễ dàng kiểm tra được điều này khi quan sát
thanh Timeline. Trên Timeline bạn sẽ nhận thấy được dạng Tween được sử dụng
là Motion Tween (hay bạn có thể nhìn thấy đường chuyển động của đối tượng –

- 86 -
CHƯƠNG 4. TẠO HOẠT CẢNH

đây là dấu hiệu của Motion Tween). Nếu bạn quan sát trong thư viện Library, bạn
cũng sẽ thấy rằng một movieClip mới đã được tạo ra. Điều này có nghĩa Flash
CS5+ đã làm sẵn cho bạn từ A-Z.

Hình 80 – Chức năng Motion Presets: Motion Path


Hiệu ứng chữ chạy 3D: thông thường, khi kết thúc một bộ phim thời trung cổ,
các thông tin về phim sẽ được hiển thị theo dạng thức chữ chạy từ dưới lên và thu
nhỏ dần. Chúng ta sẽ sử dụng chức năng Motion Presets để tạo hiệu ứng này.

Hình 81 – Chức năng Motion Presets: hiệu ứng text-scroll-3D

- 87 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Bạn hãy nhập một đoạn nội dung văn bản, sau đó chọn hiệu ứng text-scroll-3D
trong vùng chức năng Motion Presets. Nhấp Apply.
Cuối cùng, bạn hãy nhấn tổ hợp Ctrl+Enter để kiểm tra.
Bài tập đề nghị: Hãy sử dụng kĩ thuật Tween kết hợp với các công cụ tạo hiệu
ứng 3D để tạo dựng các hiệu ứng như trong Motion Presets cho hai hiệu ứng nêu
trên:
a) Hiệu ứng quả bóng di chuyển trong không gian.
b) Chữ chạy 3D.

4.5. Công cụ Bone và Bind


Công cụ Bone
Với công cụ Bone, bạn có thể tạo ra các chuyển động dựa trên các khớp nối. Các
chuyển động này có thể lấy ví dụ như các khớp xương tay chân, các khớp nối của
cần cẩu, hình rồng uốn lượn, rắn trườn,… Công cụ này rất hữu ích và đơn giản.
Đây là công cụ mới được bổ sung vào trong Adobe Flash CS4. Khi sử dụng công cụ
này, ta cần phân biệt các trường hợp sau:
- Trường hợp 1: Nếu đối tượng cần tạo khớp nối là đối tượng liên tục (hình rắn
trườn, rồng lượn…), ta sẽ sử dụng công cụ này một cách trực tiếp. Trường hợp
nà y thường sử dụ ng khi ta thao tá c trực tie� p trê n cá c đo� i tượng đo� họ a vector
được thie� t ke� ba� ng cá c cô ng cụ củ a Flash hoặ c import từ cá c trı̀nh xử lý đo� họ a
vector như Illustrator.
- Trường hợp 2: Nếu đối tượng cần tạo không liên tục, cần có khớp nối (như
khớp xương, khớp nối cần cẩu…), ta sẽ sử dụng công cụ này sau khi convert các
phần của nó thành các biểu tượng. Trường hợp nà y thường sử dụ ng khi ta import
cá c đo� i tượng đo� họ a đie� m và sử dụ ng Photoshop đe� ca� t thà nh cá c pha� n khá c
nhau.
Tiếp theo, ta sẽ minh họa cho việc sử dụng công cụ Bone trong hai trường hợp
này.

 Công cụ Bone trong trường hợp 1

- Bước 1. Bạn hãy sử dụng công cụ Pencil hoặc Brush để tạo hình một chú rắn.
- Bước 2. Bấm chọn công cụ Bone, sau đó vẽ các đường khớp nối như trong hình
minh họa.
- Bước 3. Hãy sử dụng công cụ Selection để kiểm tra các mối nối. Để tạo hiệu ứng
động, bạn hãy nhấp chọn vào một Frame nào đó (ví dụ Frame 20), nhấn phím F6.
Cơ chế làm việc tự động của công cụ Bone sẽ giúp tạo ra chuyển động nếu bạn hiệu
chỉnh độ cong của đối tượng tại Frame này nhờ vào các khớp nối. Bạn hoàn toàn
không cần sử dụng đến kĩ thuật Tween.

- 88 -
CHƯƠNG 4. TẠO HOẠT CẢNH

- Bước 4. Nhấp tổ hợp Ctrl+Enter để kiểm tra kết quả.


Bạn thấy chuyển động của chú rắn như thế nào? Rất mềm mại phải không? Với
công cụ này kết hợp với ActionScript, bạn hoàn toàn có thể tạo ra trò chơi “Rắn
tìm mồi”. Dĩ nhiên đó chỉ là định hướng mà thôi, nếu bạn muốn thực sự tìm hiểu
về kĩ thuật lập trình game trong Flash, bạn hãy tìm các giáo trình chuyên về chủ
đề này. Trong phạm vi giáo trình này, chúng tôi không đưa ra những dự án game
tầm cỡ, chúng ta chỉ tập trung vào kĩ thuật tạo hoạt hình, cách điều khiển đối
tượng (đây là một trong những chức năng nền tảng của lập trình game) và một số
hiệu ứng thường được sử dụng trong kĩ xảo (cả kĩ xảo truyền hình lẫn kĩ xảo điện
ảnh). Tô i cũ ng đưa và o mộ t so� hướng da� n đe� tạ o nê n cá c game nhỏ với mụ c đı́ch
giú p bạ n định hı̀nh được cá ch thức lậ p trı̀nh game trê n Flash. Ne� u bạ n hie� u được
cơ che� nà y, bạ n hoà n toà n có the� tạ o ra cá c game theo kịch bả n củ a bạ n.

Hình 82 – Công cụ Bone trường hợp 1


 Công cụ Bone trong trường hợp 2

- Bước 1. Bạn hãy tạo ba khối hình chữ nhật (tượng trưng cho các phần của cần
cẩu) và sau đó convert chúng thành các đối tượng Graphic.
- Bước 2. Bấm chọn công cụ Bone, sau đó vẽ các đường khớp nối như trong hình
minh họa.
- Bước 3. Hãy sử dụng công cụ Selection để kiểm tra các mối nối. Chọn Frame 20,
nhấn phím F6, sau đó thay đổi hình dạng của cần cẩu bằng cách điều chỉnh các mối
nối.
- Bước 4. Nhấn tổ hợp Ctrl+Enter để kiểm tra.

- 89 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Hình 83 – Công cụ Bone trường hợp 2


Nếu bạn gặp khó khăn trong việc điều khiển các bộ phận của chiếc cần cẩu này,
bạn hãy dành chút thời gian để tìm hiểu về các thuộc tính của các đoạn nối trong
công cụ Bone này ở ngay dưới đây.
Bảng thuộc tính của các đoạn nối bởi công cụ Bone
Khi bạn nhấp chuột vào một đoạn thẳng nối các mối nối, trong bảng thuộc tính
Properties sẽ hiện ra các thông số trong hình 84.

Hình 84 – Bảng thuộc tính của mối nối tạo bởi công cụ Bone

- 90 -
CHƯƠNG 4. TẠO HOẠT CẢNH

- Location: Position X và Y (tọa độ của thanh nối), Length (độ dài của thanh nối),
Angle (góc nghiêng của thanh nối), Speech (tốc độ xoay của thanh nối).
- Joint Rotation: cho phép hoặc không cho phép thanh nối có thể xoay – tương
ứng với Enable được chọn hay không được chọn.
- Rotation Constrain: cho phép mối nối gốc của thanh nối dịch chuyển trong vùng
từ Min đến Max.

Hình 85 – Thuộc tính Constrain


- Joint x Translation và Joint y Translation: cho phép thanh nối dịch chuyển theo
chiều x hay chiều y. Thuộc tính constraint cho hai trường hợp này hoàn toàn
tương tự thuộc tính constraint của Rotation.
- Spring: là một chức năng mới của IK Bone, nó có hai thuộc tính Strength (số
lượng của Spring. Khi giá trị này lớn hơn 0, khung sườn sẽ phản ứng lại với một
chuyển động vật lý có tỷ lệ thuận giữa giá trị Strength và chuyển động tổng thể)
và Damping (giá trị đề kháng Strength). Tùy chọn này ảnh hưởng đến độ tắt dần
của chuyển động, lần lượt xác định bằng khoảng thời gian giữa sự chuyển động
ban đầu và thời gian khi IK Bone trở lại vị trí dừng của nó). Đây là một tính năng
mới đối với công cụ này trong phiên bản Flash CS5+ này mà Adobe đã bổ sung
vào.

Công cụ Bind
Công cụ này phải dùng kết hợp với công cụ Bone. Khi sử dụng công cụ Bone trong
trường hợp 1, ta có thể kết hợp với công cụ Bind. Với công cụ Bind, bạn có thể ép
buộc các thanh nối phụ thuộc lẫn nhau. Khi sử dụng công cụ Bind, và bấm vào
một thanh nối, sẽ hiện ra bốn điểm điều khiển đối với thanh nối đó (trong hình
minh họa bên dưới, đó là các nút được đánh dấu vàng).

Hình 86 – Công cụ Bind


Tương ứng với các điểm điều khiển này là các viền của phần đối tượng được điều
khiển bởi thanh nối. Để cho mỗi mối nối liên kết với một mối nối khác, ta sử dụng

- 91 -
CHƯƠNG 4. TẠO HOẠT CẢNH

công cụ Bind, bấm chọn các nút điều khiển này và kéo thả vào vị trí thanh nối
khác (thanh nối mà các điểm này phụ thuộc vào).

4.6. Công cụ Deco


Là công cụ trang trí nghệ thuật. Với công cụ này, ta có cá c hiệu ứng tùy chọn:
Vine Fill, Grid Fill, Symmetry Brush, 3D Brush, Building Brush, Decorated Brush,
Fire Animation, Flame Brush, Flower Brush, Lightning Brush, Particle System,
Smoke Animation và Tree Brush.
Hiệu ứng Vine Fill
Tạo hiệu ứng nghệ thuật dạng cây nho. Khi bấm chọn dạng biểu tượng này, sẽ
xuất hiện bảng thuộc tính sau
• Leaf: biểu tượng tương ứng với biểu tượng lá. Nếu bạn muốn thay đổi, bạn
chỉ việc nhấp vào Edit và chọn dạng symbol tương ứng. Nếu bạn muốn đổi
màu lá, bạn nhấp vào biểu tượng Color tương ứng với Leaf. Nếu muốn sử
dụng hình mặc định, bạn bấm chọn Default Shape.

Hình 87 – Công cụ Deco với hiệu ứng Vine Fill

• Flower: hoàn toàn tương tự nhưng nó tương ứng với biểu tượng hoa. Nếu
bạn muốn thay đổi màu hoa, bạn nhấp vào biểu tượng Color tương ứng với
Flower. Nếu muốn sử dụng hình mặc định, bạn bấm chọn Default Shape.
• Advanced Option: Branch Angle (góc xoay của các cành nho), Color (màu của
cành nho), Pattern Scale (kéo giãn mẫu cành nho) và Segment Length (độ dài
của các cành nho).

- 92 -
CHƯƠNG 4. TẠO HOẠT CẢNH

• Animate Pattern: xây dựng một nhóm (go� m cà nh, là và hoa) lên từng Frame
mộ t. Chức năng này giúp tạo hiệu ứng động. Bạn có thể hiệu chỉnh tốc độ nhờ
vào Frame Step.

Hiệu ứng Grid Fill


Tạ o hiệ u ứng nghệ thuậ t dạ ng lưới. Khi bấm chọn hiệu ứng Grid Fill, trong bảng
thuộc tính có các thuộc tính sau:
• Fill: nhấp chọn edit để thay đổi biểu tượng. Bấm vào biểu tượng color để đổi
màu cho biểu tượng. Bấm vào Default Shape để chọn hình mặc định.
• Advanced Options: Horizontal Spacing (khoảng cách theo chiều ngang),
Vertical Spacing (khoảng cách theo chiều dọc) và Pattern Scale (độ phóng to
của biểu tượng).

Hình 88 – Công cụ Deco với hiệu ứng Grid Fill


Hiệu ứng Symmetry Brush
Hiệ u ứng nà y giú p tạ o cá c ma� u nghệ thuậ t có tı́nh cha� t đo� i xứng. Khi bấm chọn
hiệu ứng Symmetry Brush, trong bảng thuộc tính Properties sẽ hiện ra các thuộc
tính sau đây:
• Module: bấm edit để thay đổi biểu tượng. Bấm color để đổi màu cho biểu
tượng. Chọn Default Shape để chọn hình mặc định.
• Advanced Options: Reflect Across Line (tạo cặp điểm đối xứng qua đường
chuẩn), Reflect Across Point (tạo cặp điểm đối tứng qua điểm chuẩn), Rotate
Around (tạo các điểm dạng vòng), Grid Translation (tạo một mảng các điểm).
• Test Collisions: cho phép tránh hiện tượng các biểu tượng va chạm vào nhau.

- 93 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Hình 89 – Công cụ Deco với hiệu ứng Symmetry Brush


Hiệu ứng 3D Brush
Hiệu ứng 3D Brush được sử dụng để tạo các kiểu phối màu từ nhiều đối tượng.
Mỗi một thao tác phun màu bằng hiệu ứng này cần sử dụng tối đa 4 đối tượng.

Hình 90 – Công cụ Deco với hiệu ứng 3D Brush

- 94 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Với hiệu ứng này, các đối tượng sẽ được phun theo hiệu ứng 3D (tạ o tọ a độ nga� u
nhiê n trong khô ng gian 3 chie� u…). Để thay đổi các đối tượng, bạn chỉ việc nhấp
vào nút Edit, và chọn một đối tượng khác để thay thế. Các đối tượng để thay thế
phải là các biểu tượng của Flash (MovieClip, Button hoặc Graphic). Các tính năng
trong mục Drawing Effect này hoàn toàn tương tự trong hiệu ứng Vine và Grid.
Trong mục Advanced Options có các tùy chọn sau đây:
• Max objects: số lượng đối tượng được tạo cực đại trong mỗi lần phun.
• Spray area: vùng được phun (tính theo pixel).
• Perspective: cho phép tạo hiệu ứng phối cảnh hay không.
• Distance scale: độ kéo giãn theo khoảng cách (độ phóng to – zoom).
• Random scale range: Tỉ lệ kéo giãn ngẫu nhiên (bao nhiêu trong số các biểu
tượng đó chịu tác động của độ kéo giãn ngẫu nhiên).
• Random rotation range: tạo các góc quay ngẫu nhiên cho các biểu tượng.

Hiệu ứng Building Brush


Với hiệu ứng Building Brush, bạn có thể tạo dựng các tòa nhà cao tầng. Công cụ
này rất hữu ích trong các tác vụ muốn xây dựng một đô thị sầm uất.

Hình 91 – Công cụ Deco với hiệu ứng Building Brush


Trong mục Advanced Options, có hai chức năng:
• Tùy chọn thả xuống: cho phép bạn lựa chọn các mẫu nhà cao tầng. Bạn có 4
lựa chọn mẫu nhà cao tầng – skyscraper 1, skyscraper 2, skyscraper 3 và

- 95 -
CHƯƠNG 4. TẠO HOẠT CẢNH

skyscraper 4. Nếu bạn muốn tạo các mẫu nhà ngẫu nhiên, bạn có thể chọn
Radom Building.
• Building size: kích thước (theo chiều ngang) của tòa nhà.
Khi xây dựng các tòa nhà, bạn cần lưu ý: sau khi chọn công cụ Deco và chọn mẫu
nhà, bạn hãy nhấp chuột và kéo dọc theo hướng lên phía trên. Nếu độ cao của tòa
nhà đã phù hợp, bạn thả chuột.
Với hiệu ứng này bạn có thể dễ dàng tạo dựng các ngôi nhà cao tầng. Bạn lưu ý
rằng, các ngôi nhà cao tầng này được tạo bằng cách lắp ghép các phần lại với nhau
để tạo nên một tòa nhà hoàn chỉnh. Nếu bạn muốn tạo hiệu ứng cho một đối
tượng ngôi nhà hoàn chỉnh, bạn cần nhóm các phần của ngôi nhà thành một đối
tượng.
Hiệu ứng Decorated Brush
Với công cụ Decorated Brush, bạn có thể tạo các đường viền nghệ thuật theo các
mẫu được cung cấp sẵn.

Hình 92 – Công cụ Deco với hiệu ứng Decorated Brush


Trong mục tùy chọn Advanced Option, bạn có 3 tùy chọn:
• Tùy chọn thả xuống: có 20 dạng đường viền nghệ thuật cho bạn chọn lựa.
• Pattern color: chọn màu cho đường viền nghệ thuật.
• Pattern size: kích thước của biểu tượng nghệ thuật.
• Pattern width: độ rộng của biểu tượng nghệ thuật.

Hiệu ứng Fire Animation

- 96 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Hiệu ứng Fire Animation sẽ tạo ra một ngọn lửa cháy sáng. Nó rất hữu dụng trong
các tác vụ cần tạo dựng ngọn lửa.
Đối với hiệu ứng này, mục Advanced Options có các tùy chọn sau:
• Fire size: kích thước ngọn lửa.
• Fire speech: tốc độ cháy của lửa.
• Fire duration: hiệu ứng động của lửa sẽ diễn ra trong bao nhiêu frame. Bạn
sẽ thấy đó chính là số keyframe hiển thị trên thanh TimeLine. Nhưng điều
này chỉ đúng trong trường hợp tùy chọn End Animation không được chọn.
• End Animation: ngọn lửa tàn dần (nếu được chọn), hoặc diễn tiến mãi mãi
(nếu không được chọn).
• Flame color: màu phía rìa ngoài của ngọn lửa.
• Flame core color: màu của lõi ngọn lửa.
• Fire spark: số ngọn lửa.

Hình 93 – Công cụ Deco với hiệu ứng Fire Animation


Thông thường, khi tạo dựng một hoạt cảnh có sử dụng đến ngọn lửa, bạn nên kết
hợp với hiệu ứng tạo khói (Smoke Animation) mà chúng ta sẽ tìm hiểu ở phần
tiếp theo.
Hiệu ứng Flame Brush
Hiệu ứng này giúp tạo dựng cách phun màu theo hình dáng ngọn lửa.
Trong mục Advanced Options có 2 tùy chọn:
• Flame size: kích thước của ngọn lửa.
• Flame color: màu của ngọn lửa.

- 97 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Hiệu ứng này tương đối đơn giản. Nó không có nhiều ứng dụng trong các dự án
thiết kế phim hoạt hình.

Hình 94 – Công cụ Deco với hiệu ứng Flame Brush


Hiệu ứng Flower Brush
Hiệu ứng này quả thật rất thú vị. Nhờ vào nó, chúng ta có thể tạo các cành hoa.
Với mục Advanced Options, ta có các tùy chọn sau:
• Tùy chọn thả xuống: cho phép bạn chọn lựa các loại hoa sau: Garden
Flower, Rose, PoinSettia và Berry.

Hình 95 – Công cụ Deco với hiệu ứng Flower Brush

- 98 -
CHƯƠNG 4. TẠO HOẠT CẢNH

• Flower color: màu cho hoa.


• Flower size: kích thước của hoa.
• Leaf color: màu cho lá.
• Leaf size: kích thước của lá.
• Fruit color: màu của quả.
• Tùy chọn branch: cho phép hiển thị cành cây hay không. Nếu tùy chọn này
được kích hoạt, bạn có thể chọn tù y chọ n bê n dưới Branch color.
• Branch color: màu của cành cây.

Hiệu ứng Lightning Brush


Hiệu ứng Lightning dùng để tạo các tia sáng. Nó được ứng dụng trong việc tạo các
tia sét, hoặc các hiệu ứng phóng điện khác.
Với mục Advanced Options, bạn có các tùy chọn sau đây:
• Lightning color: màu của tia sáng.
• Lightning scale: độ kéo giãn của tia sáng.
• Tùy chọn Animation: nếu muốn tạo hiệu ứng động cho tia sáng.
• Beam width: độ rộng của tia sáng.
• Complexity: độ rối (độ phức tạp) của chùm tia sáng.

Hình 96 – Công cụ Deco với hiệu ứng Lightning Brush


Hiệu ứng Particle System

- 99 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Hiệu ứng này tạo một chùm hạt được phóng ra từ một nguồn phát. Bạn sẽ thấy nó
cũng rất hữu ích trong nhiều tác vụ: phun bong bóng nước, phun các hạt bụi….

Hình 97 – Công cụ Deco với hiệu ứng Particle System


Mục Drawing Effect có hai tùy chọn cho các loại hạt. Bạn có thể thay đổi chúng
như đối với hiệu ứng vine, grid và 3D brush.
Mục Advanced options có các tùy chọn sau:
• Total length: diễn tiến hành động trên bao nhiêu frame.
• Particle generation: nguồn phát các hạt sẽ diễn ra trên bao nhiêu frame.
• Rate per frame: tốc độ trên mỗi frame.
• Life span: mỗi một hạt sẽ có thời gian tồn tại trên bao nhiêu frame.
• Initial speech: tốc độ khởi tạo.
• Initial size: kích thước khởi tạo.
• Min initial direction: góc phun nhỏ nhất.
• Max initial direction: góc phun lớn nhất.
• Gravity: trọng lượng của hạt.
• Rotation rate: tốc độ quay vòng của hạt.

Hiệu ứng Smoke Animation


Hiệu ứng này tương tự với hiệu ứng Fire Animation. Nó dùng để tạo hiệu ứng bóc
khói. Thường hiệu ứng này sử dụng kết hợp với hiệu ứng Fire Animation.

- 100 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Hình 98 – Công cụ Deco với hiệu ứng Smoke Animation


Trong mục Advanced options có các tùy chọn sau đây:
• Smoke size: kích thước của khói.
• Smoke speed: tốc độ khói.
• Smoke duration: diễn tiến của hiệu ứng khói trên bao nhiêu frame. Cũng
tương tự Fire Animation, số keyframe trên Timeline sẽ chính là giá trị của
Smoke duration trong trường hợp tùy chọn End Animation không được
chọn.
• End Animation: hiệu ứng khói bốc lên và tan biến vào không khí (nếu tùy
chọn này được chọn) và không tan biến vào không khí (trong trường hợp
tùy chọn này không được chọn).
• Smoke color: màu của khói.
• Background color: màu của khói khi khói dần tan vào không khí.

Hiệu ứng Tree Brush


Hiệu ứng này sử dụng để tạo các loại cây khác nhau. Flash cung cấp cho ta khá
nhiều dạng cây để sử dụng.
Trong mục Advanced options có các tùy chọn sau đây:
• Tùy chọn thả xuống: cho phép bạn chọn lựa các loại cây. Flash cung cấp sẵn
cho chúng ta 20 loại cây khác nhau.
• Tree scale: độ kéo giãn của cây.

- 101 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Hình 99 – Công cụ Deco với hiệu ứng Tree Brush

• Branch color: màu của cành cây.


• Leaf color: màu của lá cây.
• Flower/Fruit color: màu của hoa hoặc quả.
Với công cụ Deco, bạn thả sức để sáng tác các kịch bản cho các thước phim hoạt
hình của bạn cũng như cho game. Dù rằng công cụ Deco này đã có trong phiên
bản CS4, nhưng với phiên bản CS5+ này, công cụ này đã hoàn thiện hơn, cung cấp
cho ta nhiều tùy chọn hơn để sáng tác. Mục tiêu của Adobe đặt ra qua mỗi phiên
bản là làm sao để đơn giản hóa công việc thiết kế cho người dùng, để mở rộng
phạm vi đối tượng sử dụng – không chỉ dành cho người dùng chuyên nghiệp mà
còn hướng đến người dùng phổ thông.

4.7. Công cụ 3D Translation và 3D Rotation


Công cụ 3D Translation
Công cụ này cho phép chúng ta có thể tạo chuyển động 3D cho đối tượng. Như
chú ng ta đã thảo luận ở trên, công cụ này chỉ hoạt động đối với đối tượng được
tạo Motion Tween.
Ví dụ sau đây sẽ minh họa cho việc sử dụng công cụ 3D Translation. Trong ví dụ
này, ta sẽ tạo một mặt phẳng và cho phép nó chuyển động trong không gian 3
chiều. Để làm được điều này, chúng ta sẽ thao tác theo các bước sau đây:

- 102 -
CHƯƠNG 4. TẠO HOẠT CẢNH

- Bước 1. Trên Layer 1, bạn hãy một hình bình hành (sử dụng công cụ hình chữ
nhật và công cụ Free Transform) để tượng trưng cho mặt phẳng và trên Layer 2
bạn hãy tạo một hệ tọa độ Descartes 3 chiều như hình minh họa.
- Bước 2. Chọn hình bình hành, kích chuột phải và chọn Create Motion Tween Sau
đó, bấm chọn công cụ 3D Translation. Bạn có thể sử dụng công cụ này để di chuyển
mặt phẳng theo các chiều x (trục ngang), y (trục đứng) và z (điểm chấm trung
tâm).
- Bước 3. Để đảm bảo rằng trục tọa độ mà ta tạo tồn tại song song với các layer
của mặt phẳng, ta cần chọn Frame cuối cùng trên TimeLine mặt phẳng của Layer
này và nhấn phím F5.
- Bước 4. Nhấn tổ hợp Ctrl+Enter để kiểm tra kết quả.

Hình 100 – Công cụ 3D Translation


Công cụ 3D Rotation
Công cụ này cho phép chúng ta có thể xoay chuyển 3D cho đối tượng. Như ta đã
thảo luận ở trên, công cụ này cũng chỉ hoạt động đối với đối tượng được tạo
Motion Tween.

- 103 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Bạn thao tác hoàn toàn tương tự ví dụ sau trên. Nhưng ở đây, mặt phẳng sẽ xoay
chuyển 3D trong không gian. Để làm được điều này, chúng ta sẽ thao tác theo các
bước sau đây:
- Bước 1. Trên Layer 1, bạn hãy một hình bình hành (sử dụng công cụ hình chữ
nhật và công cụ Free Transform) để tượng trưng cho mặt phẳng và trên Layer 2
bạn hãy tạo một hệ tọa độ Descartes 3 chiều như hình minh họa.
- Bước 2. Chọn hình bình hành, kích chuột phải và chọn Create Motion Tween Sau
đó, bấm chọn công cụ 3D Rotation. Bạn có thể sử dụng công cụ này để xoay chuyển
mặt phẳng theo các chiều x (trục ngang), y (trục đứng) và z (vòng tròn bên trong) .

Hình 101 – Công cụ 3D Rotation


- Bước 3. Để đảm bảo rằng trục tọa độ mà ta tạo tồn tại song song với các layer
của mặt phẳng, ta cần chọn Frame cuối cùng trên TimeLine mặt phẳng của Layer
này và nhấn phím F5.
- Bước 4. Nhấn tổ hợp Ctrl+Enter để kiểm tra kết quả.

- 104 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Tổng kết chương 4


Trong chương này, chúng ta đã tìm hiểu cách tạo chuyển động cho các đối tượng.
Ở đây, chúng ta đã cùng nhau tìm hiểu về kĩ thuật Frame by Frame, kĩ thuật
Tween, các công cụ tạo hoạt hình như Bone, Bind, 3D, Deco.
Kĩ thuật Frame by Frame tuy đã cũ, nhưng nó vẫn rất hữu ích trong nhiều tác vụ.
Kĩ thuật Tween được chia làm ba loại: Classic Tween, Motion Tween và Shape
Tween. Mỗi kı̃ thuậ t đều có những nét đặc trưng riêng. Classic Tween và Motion
Tween tuy có nhiều điểm tương đồng, nhưng chúng không phải lúc nào cũng có
thể thay thế cho nhau: Classic Tween hỗ trợ Frame chứa ActionScript còn Motion
Tween thì không; Motion Tween không cần tạo KeyFrame nên đơn giản hơn, hiệu
quả hơn Classic Tween; Motion Tween hỗ trợ các hiệu ứng 3D còn Classic Tween
thì không.
Các công cụ tạo hoạt hình như Bone, Bind, 3D và Deco cũng rất hữu ích. Chúng có
thể sử dụng độc lập hay kết hợp với kĩ thuật Tween. Nhờ những công cụ mới này,
việc tạo hoạt hình cho đối tượng trở nên đơn giản hơn rất nhiều.

- 105 -
CHƯƠNG 4. TẠO HOẠT CẢNH

Blank Page

- 106 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT


ActionScript là một ngôn ngữ lập trình hướng đối tượng được dùng để phát triển
các ứng dụng chạ y trê n Adobe Flash Player, Flash Plugin, Flash Lite, Shockwave
và Adobe AIR. Ngôn ngữ lập trình ActionScript có thể được biên dịch bởi:
- Adobe Flex Builder.
- Adobe Flash Professional.
- Command Line nhờ vào bộ SDK.
Cũng tương tự như Java, sau khi được biên dịch, các ActionScript sẽ được chuyển
thành dạng bytecode mà chỉ có máy ảo ActionScript (AVM) mới hiểu được. Máy
ảo ActionScript này được tích hợp bên trong Flash Player, Flash Plugin, Flash
Lite, Shockwave và Adobe AIR.
Ngôn ngữ lập trình ActionScript (AS) là ngôn ngữ có cú pháp ra� t gio� ng Java. Nếu
bạn đã từng làm quen với ngôn ngữ lập trình Java, thì khi làm quen với ngôn ngữ
lập trình ActionScript sẽ cảm thấy đơn giản hơn rất nhiều. Các toán tử, các câu
lệnh tương tự như Java. Dường như Adobe đã thiết kế nên ngôn ngữ ActionScript
theo chuẩn của Java để tạo nên sự đơn giản và quen thuộc với đa số người dùng.
Bạn cũng cần lưu ý rằng, chúng ta đang thảo luận về phiên bản 3.0 của AS. Đây là
phiên bản mới nhất cho đến thời điểm này. AS là ngôn ngữ hướng đối tượng như
Java, Delphi, hay C++. Tuy nhiê n, nó mang nhie� u đặ c trưng củ a mộ t ngô n ngữ kịch
bả n như Javascript. AS là ngôn ngữ phân biệt chữ hoa và chữ thường.
Một ví dụ kinh điển khi học một ngôn ngữ lập trình đó là ví dụ “Hello, world !”.
Thông qua ví dụ kinh điển này, chúng ta sẽ có được cái nhìn tổng quan về cú phá p
chương trı̀nh củ a ngôn ngữ đó . Bạn hãy quan sát ví dụ minh họa bê n dưới được
viết trên ngôn ngữ lập trình ActionScript.
Trong ví dụ này, ta có thể thấy nhiều điểm tương đồng giữa AS với Java là: dấu
comment (// - comment trên một dòng và /**/ - comment trên nhiều dòng), cách
viết nội dung hàm (nằm trong cặp dấu {}) và chỉ có một khái niệm là hàm (trả về
kiểu dữ liệu hoặc không trả về kiểu dữ liệu), mộ t so� kie� u dữ liệ u....
Một điểm khác biệt của AS so với Java là chương trình chính nằm tự do trong
vùng soạn thảo (không giống Java ca� n thie� t phả i có mộ t hà m main đe� thực thi).
Nó có thể nằm trước hay sau các hàm khai báo. Để quy ước về trật tự sử dụng, ta
sẽ sử dụng cú pháp tuần tự (lệnh trước thực hiện trước, lệnh sau thực hiện sau) –
nghĩa là phần chương trình chính luôn nằm ở phía sau cùng và ta sẽ đánh dấu nó
bằng dòng comment /*Chương trình chính*/.
Trong AS, ta sử dụ ng từ khó a function đe� khai bá o phương thức. Kie� u dữ liệ u trả
ve� củ a function được đặ t ngay sau cặ p da� u ngoặ c chứa danh sá ch tham so� . Trong
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

AS, đe� in ra mộ t câ u thô ng bá o, ta sử dụ ng hà m trace. Hà m trace tương tự hà m
printf củ a C/C++.

Hình 102 – Giao diện ActionScript 3.


Bạn cũng cần lưu ý rằng, AS là ngôn ngữ kịch bản (scripting language), nên nó
cũng mang nhiều đặc trưng của một ngôn ngữ kịch bản. Các câu lệnh nằm tự do,
không nhất thiết phải được đặt trong một hàm cụ thể nào, đây chính là đặt trưng
dễ nhận thấy của một ngôn ngữ kịch bản (như JavaScript, Jscript…).
Ne� u bạ n đã từng họ c lậ p trı̀nh Java, thı̀ cha� c cha� n sẽ tìm thấy nhiều điểm tương
đồng và khác biệt so với ActionScript. Chúng ta sẽ lần lượt tìm hiểu cú pháp của
ngôn ngữ lập trình ActionScript này. Xin nhắc lại là phiên bản ActionScipt mà ta
đang thảo luận là ACTIONSCRIPT 3.0. Ta khô ng thả o luậ n gı̀ thê m ve� cá c phiê n
bả n AS2.0 và AS1.0.

5.1. Các kiểu dữ liệu


Ở đây ta thảo luận về các kiểu dữ liệu trên hệ Windows 32 bit. Các kiểu dữ liệu
mà ta thảo luận là kiểu nguyên thủy. Trong AS, mọi kiểu dữ liệu đều tương ứng
với một lớp đo� i tượng tạo ra nó: kiểu int và lớp int, kiểu Number và lớp Number...
a. Kiểu số nguyên
Có hai dạng số nguyên được hỗ trợ trong AS là kiểu số nguyên có dấu int và số
nguyên không dấu uint. Cả hai loại số nguyên này điều chiếm 4byte, nghĩa là vùng

- 108 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

giá trị của int là -231 đến 231-1 và giá trị của uint là 0…232-1. Bạn lưu ý rằng, trong
các kiểu dữ liệu, thì chỉ có kiểu số nguyên có chữ cái đầu tiên viết thường (int chứ
khô ng phả i là Int).
b. Kiểu số thực
Số thực dấu chấm động theo chuẩn IEEE-754. Số thực trong AS chiếm 32 bit. Từ
khóa khai báo là Number. Bạn lưu ý Number viết hoa chữ cái đầu tiên.
c. Kiểu Boolean
Kiểu Boolean trong AS có hai giá trị là true và false. Bạn lưu ý Boolean viết hoa
chữ cái đầu tiên, true và false viết thường mọi chữ cái.
d. Kiểu xâu String
Xâu kí tự được đánh dấu từ 0. Phần tử cuối cùng trong xâu có chỉ số là xâu.lengh-
1. Kiểu xâu được khai báo nhờ từ khóa String. Bạn cũng cần lưu ý rằng String viết
hoa chữ cái đầu tiên.
e. Kiểu mảng Array
Việc đánh dấu trong Array hoàn toàn tương tự String. Kiểu Array cũng viết hoa
chữ cái đầu tiên.
f. Kiểu đối tượng Object
Tương tự kiểu Struct của C, đo� ng thời cũ ng gio� ng kie� u enum trong Java. Nhưng
mềm dẻo hơn rất nhiều. Chúng ta sẽ thấy rõ điều này qua các chương trình trong
giáo trình này.

 Để xử lý các dữ liệu liên quan đến các kiểu dữ liệu nguyên thủy này ta phải làm
việc với các lớp đối tượng tương ứng: kiểu int và uint với lớp int và uint, kiểu
Number với lớp Number, kiểu String với lớp String, kiểu Array với lớp Array và
kiểu đối tượng Object. Chi tiết về các phương thức xử lý của các lớp này ta sẽ
thảo luận sau khi tìm hiểu về lớp trong AS.

5.2. Biến và Hằng


a. Biến: có giá trị thay đổi được. Khi khai báo một biến ta khai báo theo cú pháp
sau:
var tên_biến:Kiểu_Dữ_Liệu [= giá_trị_khởi_tạo];
Khi khai báo một biến, bạn phải sử dụng từ khóa var. Ta có thể lấy một vài ví dụ
về khai báo biến trong AS
var a:int = 1;
var b:Number;
b = 1.5;

//Các dòng khai báo sau tương đương

- 109 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

var s:String = “Hello”;


var s:String = new String(“Hello”);
var s:String = String(“Hello”);
//Kết thúc tính tương đương

//Các dòng khai báo sau tương đương


var ar:Array = new Array(“a”, “b”);
var ar:Array = new Array(3);
//Kết thúc tương đương

var myAssocArray:Object = {fname:"John", lname:"Public"};


trace(myAssocArray.fname); // John
trace(myAssocArray["lname"]); // Public
myAssocArray.initial = "Q";
trace(myAssocArray.initial); // Q

Bạn có thể khởi tạo giá trị cho biến tại thời điểm khai báo biến hoặc khai báo biến
và khởi tạo giá trị cho biến đó sau. Đo� i với kie� u Array (kie� u mả ng) bạ n ca� n lưu ý :
bạ n phả i sử dụ ng toá n tử new đe� ca� p phá t bộ nhớ cho bie� n mả ng. Bạ n có the� ca� p
phá t so� lượng ô nhớ – new Array(so� lượng ô nhớ) hoặ c khai bá o theo dạ ng giá trị
ha� ng – new Array(cá c pha� n tử).
b. Hằng: có giá trị không thay đổi. Trong AS, để khai báo hằng ta thay từ khóa var
trong khai báo biến bằng từ khóa const. Bạn lưu ý rằng khi khai báo hằng bạn cần
phải bổ sung giá trị cho nó. Nghĩa là cú pháp khai báo hằng phải tuân theo quy tắc
sau
const tên_hằng:Kiểu_Dữ_Liệu = giá_trị_khởi_tạo;
Giá trị khởi tạo cho ha� ng không giống với khởi tạo cho biến. Đo� i với bie� n thı̀ có
thể có hoặc không, đối với hằng là bắt buộc phải có.
Các bạn có thể quan sát các khai báo hằng sau đây
const a:int = 1;
const s:String = “abc”;
Remarks: Biến và hằng có một điểm khác biệt lớn: giá trị của biến có thể thay đổi
tùy vào ý kiến chủ quan của người lập trình; giá trị của hằng thì không được phép
thay đổi. Giá trị của hằng quy định khi khai báo thế nào thì nó giữ nguyên như thế
đó. Nếu cố tình thay đổi giá trị của hằng thì sẽ nhận được thông báo lỗi từ trình
biên dịch của Flash.

- 110 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

5.3. Toán tử và Biểu thức


Toán tử là các phép toán được sử dụng trong AS. Các giá trị được sử dụng cho
toán tử gọi là toán hạng. Biểu thức là tập hợp các toán tử và toán hạng được sắp
xếp theo một trật tự có ý nghĩa.
Toán tử gán
Toán tử gán dùng để gán giá trị cho một biến. Ví dụ a = 5;
Câu lệnh gán sẽ thực hiện gán giá trị ở bên phải cho biến ở bên trái. Bạn cũng có
thể gán giá trị của hai biến cho nhau. Ví dụ a = b;
a = b + 2; Giá trị của a bằng giá trị của b cộng thêm 2
a = a + 1; Tăng giá trị của a lên 1
Gán đồng thời nhiều giá trị. Nó tương ứng với tập các
lệnh sau:
a = b = c = 5; c = 5;
b = c;
a = b;

Toán tử thực hiện phép toán số học


Ngôn ngữ lập trình AS hỗ trợ các toán tử số học sau đây
Toán tử Ý nghĩa
+ Phép cộng
- Phép trừ
* Phép nhân
/ Phép chia (chia nguyên đối với số nguyên)
% Chia lấy dư (chỉ với số nguyên)
Bạn lưu ý rằng, phép chia có thể thực hiện trên số nguyên hoặc số thực. Nếu thực
hiện phép chia trên hai số nguyên thì đây chính là kết quả của phép chia lấy phần
nguyên. Còn nếu nó thực hiện trên hai số thực, thì nó là kết quả của phép chia
bình thường. Trong cá c ngô n ngữ họ nhà C, theo mặc định, hai số nguyên (hoặc
thực) thực hiện phép toán tương ứng thì nó sẽ trả về kết quả nguyên (hoặc thực).
Nếu phép toán thực hiện trên một số nguyên và một số thực, nó sẽ tự động
chuyển đổi về kiểu cao hơn (thành số thực). Tuy nhiê n, AS có cơ che� chuye� n đo� i
khá me� m dẻ o. Ne� u ta thực hiện phép chia 3 cho 2, thı̀ ta sẽ nhậ n được ke� t quả
mong muo� n tù y thuộ c và o kie� u dữ liệ u quy định trả ve� . Có nghı̃a là ne� u ta gá n giá
trị trả ve� cho mộ t bie� n nguyê n, thı̀ ta nhậ n được giá trị là 1; ngược lạ i, ne� u gá n giá
trị cho mộ t bie� n thực thı̀ ta nhậ n được giá trị là 1.5.
var a:int = 3/2;//Cho kết quả là 1
var b:Number = 3/2;//Cho kết quả là 1.5

- 111 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Đie� u nà y cũ ng khá de� hie� u. Bởi ne� u thực hiệ n phé p chia 3/2 thı̀ theo mặ c định giá
trị nhậ n được là 1.5. Ne� u giá trị nà y gá n cho mộ t bie� n thực thı̀ ke� t quả khô ng có gı̀
thay đo� i. Tuy nhiê n, ne� u gá n cho mộ t so� nguyê n thı̀ có sự thay đo� i lớn. Sở dı̃ như
vậ y là vı̀ bie� n so� nguyê n khô ng ho� trợ da� u cha� m độ ng. Do đó , những pha� n na� m
sau da� u cha� m độ ng sẽ được ca� t bỏ .
Toán tử logic
Toán tử Phép toán a b Kết quả
Toán tử phủ Phép toán true - false
định ! một ngôi !a false - true
true true true
Phép toán hai
true false false
ngôi
Toán tử và && false true false
a&&b
false false false
true true true
Phép toán hai
true false true
Toán tử hoặc ngôi
false true true
|| a||b
false false false
Quy tăc ghi nhớ: Phép toán và && nhận giá trị đúng chỉ khi cả hai cùng đúng. Phép
toán hoặc || chỉ nhận giá trị sai khi cả hai cùng sai.

Toán tử dịch bit


Các toán tử này được sử dụng đe� tính toán trên các số nguyên bằng cách sử dụng
các bit.
Toán tử Tên gọi Ví dụ
210=102
& Phép “và” bit 2&3=2 310=112
210=102
210=102
| Phép “hoặc” bit 2|3=3 310=112
310=112
210=102
Phép “hoặc loại”
^ 2^3=1 310=112
bit
110=012
<< Dịch trái bit 2<<3=16 2*23=2*8=16
>> Dịch phải bit 2>>3=0 2/23=2/8=0
210=102
~ Phủ định bit ~2=1
110=012

- 112 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Các toán tử và bit, hoặ c bit, hoặc loại bit và phủ định bit được tính như sau: ta
chuyển đổi các số thập phân sang nhị phân tương ứng, sau đó sử dụng các phép
toán tương ứng cho từng bit theo vị trí của nó. Ví dụ như ở trên 210=102, 310=112
và ta sẽ thực hiện các phép toán tương ứng với từng bit. Bit thứ nhất (từ phải
sang trái) là 0&1=1, bit thứ hai 1&1=1, như vậy kết quả của phép toán 2&3 là 102
hay 210. Tương tự cho các phép toán còn lại. Ở đây bạn lưu ý rằng phép toán
tuyển loại sẽ có chân trị là 1 nếu hai bit tương ứng là khác nhau, nếu giống nhau
thì tương ứng là 0(1^1=0^0=0, 1^0=0^1=1).
Các toán tử << và >> sẽ được tính như sau: a<<b=a*2b và a>>b=a/2b.
Toán tử gán hợp nhất
Khi muốn thay đổi giá trị của một biến, chúng ta có thể sử dụng cách viết
thông thường, tuy nhiên AS cũng hỗ trợ các toán tử viết tắt.
Toán tử Ví dụ Ý nghĩa Phạm vi
+= a+=b a=a+b Phép toán số học
-= a-=b a=a-b Phép toán số học
*= a*=b a=a*b Phép toán số học
/= a/=b a=a/b Phép toán số học
%= a%=b a=a%b Phép toán số học
&= a&=b a=a&b Phép toán bit
|= a|=b a=a|b Phép toán bit
^= a^=b a=a^b Phép toán bit
>>= a>>=b a=a>>b Phép toán bit
<<= a<<=b a=a<<b Phép toán bit
Toán tử tăng và giảm
Một cách viết thu gọn hơn nữa, đó là sử dụng toán tử tăng và giảm. Nếu
trong biểu thức a+=b, với b = 1 thì ta có thể viết thành a++. Tương tự, nếu a-=b, b
= 1 thì ta có thể viết a--.
Ca� n lưu ý rằng, toán tử này có mộ t đie� m đặ c biệ t. Nó có thể nằm trước hoặc
nằm sau toán hạng. Có nghĩa là có thể vie� t a++ hoặc ++a (tương ứng a-- hoặc --a).
Phép toán Ý nghĩa
a++; Thực hiện phép toán trước, sau đó mới thực hiện toán tử
++a; Thực hiện toán tử trước, sau đó mới thực hiện phép toán
a--; Tương tự a++;
--a; Tương tự ++a;

Ví dụ Cách thực thi

- 113 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

var a:int = 1; a = 1, b chưa khởi tạo

var b:int = 1; a = 1, b = 1

a+=b++; Thực hiện phép toán a+=b trước, sau


đó mới thực hiện phép toán b++. Tức
là a=2, b=2.

a+=++b; Thực hiện phép toán ++b trước, sau


đó mới thực hiện phép toán a+=b.
Tức là b=3, a=5.

Toán tử so sánh
Để thực hiện việc so sánh giá trị của hai biến, biểu thức; ta có thể sử dụng
toán tử so sánh. Giá trị của phép toán so sánh trả về kiểu bool.
Giá trị biểu thức “a Toán tử b”
Toán tử Tên gọi
Đúng Sai
== Bằng Nếu a bằng b Nếu a khác b
!= Khác Nếu a khác b Nếu a bằng b
> Lớn hơn Nếu a lớn hơn b Nếu a nhỏ hơn hoặc
bằng b
< Bé hơn Nếu a nhỏ hơn b Nếu a lớn hơn hoặc
bằng b
>= Lớn hơn hoặc bằng Nếu a lớn hơn hoặc Nếu a nhỏ hơn b
bằng b
<= Bé hơn hoặc bằng Nếu a nhỏ hơn hoặc Nếu a lớn hơn b
bằng b

Bạn hãy cẩn thận khi sử dụng toán tử so sánh bằng. Hãy chú ý rằng toán tử
so sánh bằng là ==, khác với toán tử gán =.
Toán tử điều kiện
Toán tử điều kiện có dạng cú pháp như sau:
điều_kiện?kết_quả_1:kết_quả_2;

Toá n tử đie� u kiệ n trả về giá trị kết_quả_1 nếu điều_kiện là đúng, ngược lại, nếu
điều_kiện là sai, thì trả về giá trị kết_quả_2.
Ví dụ Kết quả

- 114 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

var a:int = 1; 2
var b:int = 2;
var c:int;
c = (a>b)?a:b;
trace(c);

Toán tử phân tách


Toán tử này kí hiệu là dấu phẩy. Nó dùng để phân tách hai hay nhiều biểu
thức chứa trong một biểu thức tương ứng.
Ví dụ Kết quả
var a:int; 3
var b:int;
var c:int;
c = (a=1, b=2, a+b);
trace(c);

Toán tử chuyển đổi kiểu dữ liệu


Toán tử này dùng để chuyển đổi một biến hay hằng thuộc kiểu dữ liệu này
sang kiểu dữ liệu khác. Cách biểu diễn sự chuyển đổi một biến thuộc kiểu dữ liệu
này, sang kiểu khác chỉ có thể thực hiện nếu kiểu của chúng tương đương. Bạn có
thể chuyển số thành số (sau này khi học về hướng đối tượng, bạn có thể chuyển
giữa các đối tượng có chung phả hệ ). Bạn không thể chuyển đổi từ số thành xâu,
hay ngược lại ba� ng cá ch sử dụ ng toá n tử chuye� n đo� i kie� u. Khi chuyển đổi, bạn sử
dụng một trong các cú pháp sau:
(kiểu_dữ_liệu)biến hoặc
(kiểu_dữ_liệu)(biến) hoặc
kiểu_dữ_liệu(biến).
AS có cơ che� chuye� n đo� i linh họ a nê n ta luô n có the� thực hiệ n phé p chia giữa hai
so� nguyên mà khô ng ca� n phả i quan tâ m đe� n kie� u dữ liệ u củ a nó . Đie� u đó có nghı̃a
là toá n tử chuye� n đo� i kie� u chı̉ nê n sử dụ ng khi ca� n chuye� n đo� i cá c đo� i tượng có
chung huye� t tho� ng trong câ y phả hệ mà khô ng ca� n á p dụ ng cho việ c chuye� n đo� i
so� nguyê n thà nh so� thực trong cá c phé p tı́nh.
Thứ tự ưu tiên của các toán tử
Trong toán học, chúng ta biết rằng khi tính giá trị của một biểu thức, thì
luôn có sự ưu tiên của các toán tử như: phép nhân thực hiện trước phép cộng,
phép chia và nhân thực hiện đồng thời, ưu tiên từ trái sang phải… Trong lập trình
C++ cũng vậy, các toán tử cũng có những độ ưu tiên nhất định. Trong một biểu
thức phức tạp, bạn nên chú ý đến độ ưu tiên của các toán tử, điều này rất dễ gây

- 115 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

ra sai sót. Trong bảng sau đây, chúng tôi xin đưa ra thứ tự ưu tiên của các toán tử
trong lập trình AS
Mức ưu tiên Toán tử Độ ưu tiên cùng loại
1 :: Trái-sang-phải
2 () [] . -> ++ -- (hậu tố) dynamic_cast Trái-sang-phải
static_cast reinterpret_cast const_cast
typeid
3 ++ -- (tiền tố) ~ ! sizeof new delete Phải-sang-trái
*&
+ - (dấu dương âm)
4 (type) (chuyển đổi kiểu) Phải-sang-trái
5 .* ->* Trái-sang-phải
6 */% Trái-sang-phải
7 + - (phép toán công, trừ) Trái-sang-phải
8 << >> Trái-sang-phải
9 < > <= >= Trái-sang-phải
10 == != Trái-sang-phải
11 & Trái-sang-phải
12 ^ Trái-sang-phải
13 | Trái-sang-phải
14 && Trái-sang-phải
15 || Trái-sang-phải
16 ?: Phải-sang-trái
17 = *= /= %= += -= >>= <<= &= ^= |= Phải-sang-trái
18 , Trái-sang-phải

Các toán tử được thực hiện theo mức ưu tiên từ trên xuống. Nếu các toán tử
cùng mức, nó sẽ được thực hiện theo độ ưu tiên cùng loại.

5.4. Kiểu dữ liệu mảng Array


Mảng. Mả ng là mộ t kie� u dữ liệ u nguyê n thủ y. Mả ng bao go� m cá c pha� n tử có cù ng
kie� u dữ liệ u và cù ng tê n gọ i, được sa� p xe� p liê n tie� p trê n bộ nhớ má y tı́nh.
Khai báo mảng. Trong AS, có nhie� u cá ch khai bá o mả ng. Sau đâ y là hai cá ch khai
bá o thô ng dụ ng nha� t:
Cá ch 1. Cá ch 2.
var mang:Array = new Array(kı́ch var mang:Array = new Array(cá c
thước); pha� n tử);

- 116 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

hoặ c
var mang:Array = [cá c pha� n tử];
Cá ch khai bá o 1 thường á p dụ ng khi ta chưa bie� t chı́nh xá c giá trị củ a cá c pha� n tử
trong mả ng. Trong khi cá ch khai bá o 2 được á p dụ ng ne� u giá trị củ a cá c pha� n tử
đã được bie� t. Trong cá ch khai bá o mộ t, tham so� kı́ch thước có the� khô ng to� n tạ i.
Kı́ch thước mả ng có the� thay đo� i. Nó có the� tă ng lê n hoặ c giả m xuo� ng so với kı́ch
thước được ca� p phá t ban đa� u.
Ví dụ: Khai báo mảng
var mang:Array = new Array(3);
var mang2:Array = new Array(2, 4, 6);
var mang1:Array = [1, 3, 5, 6];
Bạ n cũ ng ca� n lưu ý ra� ng, cá ch khai bá o thứ 2 có the� á p dụ ng cho mả ng ha� ng (có
nghı̃a là có the� bo� sung const). Trong khi đó , cá ch khai bá o thứ nha� t thı̀ khô ng.
Mặ c dù trı̀nh biê n dịch khô ng thô ng bá o lo� i, nhưng ne� u quy định nó là mả ng ha� ng,
trong khi chı̉ mới ca� p phá t bộ nhớ cho cá c pha� n tử củ a nó mà chưa a� n định giá trị
củ a cá c pha� n tử thı̀ mả ng nà y sẽ khô ng the� sử dụ ng được (khô ng the� thay đo� i giá
trị cá c pha� n tử ve� sau).
Truy cập vào các phần tử của mảng.
Mả ng được truy cậ p theo chı̉ so� . Chı̉ so� củ a mả ng được đặ t trong cặ p da� u mó c
vuô ng [chı̉ so� ].
Ví dụ: Truy cập các phần tử của mảng
Ví dụ Kết quả

var mang:Array = new Array(3); undefined


var mang1:Array = new Array(2, 4, 6); 2
var mang2:Array = [1, 3, 5, 6]; 1
trace(mang[0]);
trace(mang1[0]);
trace(mang2[0]);
Bie� n mang chı̉ mới được ca� p phá t bộ nhớ, chưa được khởi tạ o giá trị, do đó , khi in
ra mang[0] thı̀ ta nhậ n được là undefined. Đo� i với mang1 và mang2 thı̀ pha� n tử
đa� u tiê n có chı̉ so� 0 la� n lượt có giá trị là 2 và 1.
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 AS là mộ t ca� u trú c độ ng có the�
được sử dụ ng như danh sá ch liê n ke� t. Bạ n có the� thay đo� i kı́ch thước củ a mả ng.
Bạ n có thê m pha� n tử hoặ c loạ i bỏ mộ t pha� n tử nà o đó . Đe� thê m mới mộ t pha� n tử
và o mả ng (thê m và o cuo� i mả ng) thı̀ ta sử dụ ng phương thức push. Ngược lạ i, đe�
loạ i bỏ mộ t pha� n tử ở cuo� i mả ng thı̀ ta sử dụ ng phương thức pop.

- 117 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Ví dụ: Thêm/xóa phần tử trong mảng.


var mang:Array = new Array();
mang.push(1);//Giá trị củ a mả ng hiệ n giờ là 1
mang.push(5);//Giá trị củ a mả ng hiệ n giờ là 1 và 5
mang.pop();//Giá trị củ a mả ng hiệ n giờ là 1
Lưu ý , bạ n chı̉ có the� thê m hoặ c xó a pha� n tử cuo� i cù ng củ a mả ng. Bạ n khô ng được
phé p thê m hoặ c xó a mộ t pha� n tử có chı̉ so� ba� t kı̀ củ a mả ng. Chi tie� t ve� cá c phương
thức củ a lớp Array sẽ được trı̀nh bà y sau khi tı̀m hie� u ve� lớp.

5.5. Các cấu trúc lệnh điều khiển

5.5.1. Câu lệnh if


Cú pháp
if (biểu_thức_điều_kiện_đúng){
Thực hiện lệnh 1;
}else{
//biểu thức điều kiện sai
Thực hiện lệnh 2;
}
Giải thích: Kie� m tra đie� u kiệ n củ a bie� u thức đie� u kiệ n, ne� u nó nhậ n giá trị đú ng
thı̀ thực hiệ n pha� n lệ nh tương ứng với if (lệ nh 1); ngược lạ i, sẽ thực hiệ n pha� n
lệ nh tương ứng với else (lệ nh 2).
Ví dụ: Ví dụ in ra kết luận số a là số dương chẵn hay không là số dương chẵn.
Ví dụ Kết quả

var a:int = 5; 5 không là số dương chẵn


if ((a%2==0)&&(a>0)){
trace(a+” là số dương chẵn”);
}else{
//biểu thức điều kiện sai
trace(a+” không là số dương chẵn”);
}
Bạn cũng lưu ý rằng các câu lệnh if cũng có thể lồng vào nhau, nghĩa là bên trong
câu lệnh if còn có thể chứa câu lệnh if khác. Đây cũng là tình huống rất thường
gặp.
Ví dụ: Giải phương trình bậc hai
Ví dụ Kết quả

- 118 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

var a:Number = 2, b:Number = 3, Phương trı̀nh có hai nghiệ m:


c:Number = -5, delta:Number; 1 và -2.5
delta = b*b - 4*a*c;
if(delta>0)
trace("Phương trı̀nh có hai nghiệ m:
"+ ((-b+Math.sqrt(delta))/2/a).toString()
+ " và " + ((-b-
Math.sqrt(delta))/2/a).toString());
else
if(delta==0)
trace("Phương trı̀nh có
nghiệ m ké p: " + (-b/2/a).toString());
else
trace("Phương trı̀nh vô
nghiệ m");
Cá c câ u lệ nh if có the� được vie� t liê n tie� p nhau. Khi đó , ta sẽ có mộ t ca� u trú c if –
else liê n tụ c.
Cú pháp
if(điều_kiện_1)
Lệnh_1;
else if(điều_kiện_2)
Lệnh_2;
....
else if(điều_kiện_n)
Lệnh_n;
Bài tập.
1. Hã y vie� t đoạ n chương trı̀nh cho phé p tı́nh giá trị tuyệ t đo� i củ a |a-b|.
Hướng dẫn: Bạ n ca� n xé t giá trị củ a a-b. Ne� u a-b>=0 thı̀ |a-b|=a-b. Ngược lạ i, a-b<0
thı̀ |a-b|=b-a.
2. Hã y vie� t đoạ n chương trı̀nh cho phé p xá c định so� lớn nha� t trong cá c so� a, b, c
ba� ng cá ch sử dụ ng câ u lệ nh if.
Hướng dẫn: Bạ n hã y so sá nh a và b. Chọ n ra so� lớn nha� t từ hai so� nà y và tie� p tụ c
so sá nh với c.
3. Hã y vie� t đoạ n chương trı̀nh cho phé p in ra thô ng bá o so� ngà y trong mộ t thá ng.
Trong đó , thá ng là mộ t so� nguyê n cho trước.
Hướng dẫn: Ne� u thá ng là 2 thı̀ có 28 hoặ c 29 ngà y. Ne� u thá ng là 1, 3, 5, 7, 8, 10, 12
thı̀ có 31 ngà y. Ne� u thá ng 4, 6, 9, 11 thı̀ có 30 ngà y.

- 119 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

5.5.2. Câu lệnh switch


Cú pháp
switch(biểu_thức){
case giá_trị_1:
Lệnh 1;
break;

case giá_trị_(n-1):
Lệnh n-1;
break;
default:
Lệnh n;
}
Giải thích: Kie� m tra giá trị củ a bie� u thức, ne� u nó nhậ n giá trị 1 thı̀ Lệ nh 1 sẽ được
thực thi, …, ne� u nó nhậ n giá trị n-1 thı̀ Lệ nh n-1 sẽ được thực thi. Trong trường
hợp, bie� u thức khô ng nhậ n từ giá trị 1 cho đe� n giá trị n-1 thı̀ nó sẽ thực hiệ n Lệ nh
n. Sau mo� i câ u lệ nh trong cá c trường hợp case, ca� n có câ u lệ nh break đe� thoá t
khỏ i vò ng lặ p case. Ne� u khô ng có break, cá c trường hợp case tie� p theo cũ ng sẽ
được thực hiệ n.
Ví dụ: Cho a là một số nguyên cho trước. Nếu a là 0 thì in ra “Số Không”; nếu a là số
1 thì in ra “Số Một”. Trong các trường hợp còn lại thì in ra thông báo “Không biết”.
Ví dụ Kết quả

var a:int = 2; Không biết


switch(a){
case 0:
trace(“Số Không”);
break;
case 1:
trace(“Số Một”);
break;
default:
trace(“Không biết”);
}
Bài tập.
1. Hã y vie� t đoạ n chương trı̀nh cho phé p in ra thô ng bá o so� ngà y trong mộ t thá ng.
Trong đó , thá ng là mộ t so� nguyê n cho trước. Hã y sử dụ ng lệ nh switch thay vı̀ sử
dụ ng câ u lệ nh if ở trê n.

- 120 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Hướng dẫn: Ne� u thá ng là 2 thı̀ có 28 hoặ c 29 ngà y. Ne� u thá ng là 1, 3, 5, 7, 8, 10, 12
thı̀ có 31 ngà y. Ne� u thá ng 4, 6, 9, 11 thı̀ có 30 ngà y
2. Hã y vie� t đoạ n chương trı̀nh cho phé p kie� m tra mộ t kı́ tự cho trước là quo� c gia
thuộ c châ u lụ c nà o. Cá c kı́ tự bao go� m: a – Anh, m – Mỹ , v – Việ t nam, n – Nam phi.
Trong trường hợp nhậ p và o mộ t kı́ tự khá c a, m, v, n thı̀ đưa ra thô ng bá o là
“Khô ng bie� t”.

5.5.3. Các câu lệnh lặp for, while và do…while


Ngôn ngữ AS cung cấp cho chúng ta ba dạng vòng lặp for: for, for…in và for
each…in.
a. 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;
}
Giải thích: Lệ nh sẽ được thực hiệ n với so� la� n chı́nh là so� la� n lặ p củ a i. So� la� n lặ p
củ a i sẽ là (bt_giới_hạ n – bt_khởi_tạ o)/bt_tă ng + 1.
Ví dụ: Viết đoạn chương trình in ra các số từ 0 đến 5
Ví dụ Kết quả

for(var i:int = 0; i<6; i++){ 0


trace(i); 1
} 2
//hoặc 3
for(var i:int = 0; i<=5; i++) 4
trace(i); 5
Giá trị củ a bie� n i sẽ được lặ p từ 0 đe� n 5 (nhỏ hơn 6) với bước nhả y là 1 (vı̀ i++).
Đie� u đó có nghı̃a là bie� n i nhậ n cá c giá trị là 0, 1, 2, 3, 4, 5 và 6. Câ u lệ nh trace sẽ in
ra giá trị củ a bie� n i tương ứng với từng vò ng lặ p.
Ví dụ: Viết đoạn chương trình tính tổng các số từ 1 đến 100
Ví dụ Kết quả

var S:int = 0; To� ng là : 5050


for(var i:int = 1; i<=100; i++)
S+=i;
trace("To� ng là : "+S);

- 121 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Giá trị củ a bie� n i sẽ được lặ p từ 1 đe� n 100 với bước nhả y là 1 (vı̀ i++). Sau mo� i
vò ng lặ p, giá trị củ a i sẽ được cộ ng do� n và o bie� n S. Câ u lệ nh trace sẽ in ra giá trị
củ a bie� n S.
Ví dụ: Viết đoạn chương trình tính tổng các số chẵn từ 1 đến 100
Ví dụ Kết quả

var S:int = 0; To� ng cá c so� cha� n là : 2550


for(var i:int = 1; i<=100; i++)
if(i%2==0)
S+=i;
trace("To� ng cá c so� cha� n là : "+S);
Giá trị củ a bie� n i sẽ được lặ p từ 1 đe� n 100 với bước nhả y là 1 (vı̀ i++). Sau mo� i
vò ng lặ p, câ u lệ nh if sẽ kie� m tra giá trị củ a i, ne� u giá trị củ a i là cha� n thı̀ nó sẽ
được cộ ng do� n và o bie� n S. Câ u lệ nh trace sẽ in ra giá trị củ a bie� n S.
Ví dụ: Viết đoạn chương trình cho phép tính tổng các phần tử dương của mảng.
Ví dụ Kết quả

var mang:Array = new Array(); 123


for(var i:int = 0; i<100; i++)
mang.push(Math.round(10*(Math.random()-0.5)));
var S:int = 0;
for(i = 0; i<100; i++)
if(mang[i]>0)
S+=mang[i];
trace(S);
Trong vı́ dụ nà y, ta tạ o ra mộ t mộ t mả ng chưa co� định kı́ch thước. Vò ng lặ p for
thứ nha� t bo� sung 100 pha� n tử và o mả ng. Giá trị củ a cá c pha� n tử sẽ được la� y nga� u
nhiên. Vò ng lặ p for thứ hai sẽ tı́nh to� ng cá c pha� n tử dương củ a mả ng.

b. Câu lệnh lặp for…in


Khi chı̉ so� củ a mả ng khô ng liê n tụ c hoặ c khô ng tuâ n theo mộ t quy ta� c nà o đó , thı̀
cá ch sử dụ ng vò ng lặ p for ở trê n tỏ ra khô ng cò n hiệ u quả . Đe� kha� c phụ c nhược
đie� m nà y, AS bo� sung vò ng lặ p for…in. Bê n cạ nh đó , đo� i với trường hợp Object, thı̀
pha� n đá nh chı̉ so� có the� khô ng đơn thua� n là so� mà có the� là kie� u dữ liệ u ba� t kı̀.
Khi đó , ta ba� t buộ c phả i sử dụ ng vò ng lặ p for…in nà y (hoặ c for…each…in trong
mụ c tie� p theo).
Cú pháp
for(var index in Array/Object){

- 122 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Lệnh;
}
Giải thích: Trong vò ng lặ p for…in nà y, chı̉ so� index sẽ được vé t trong tậ p chı̉ so�
củ a Array hoặ c Object. Tương ứng với chı̉ so� nà y, ta có the� thu được giá trị củ a
cá c pha� n tử tương ứng.
Ví dụ: Ví dụ sử dụng for…in kết hợp với Array
Ví dụ Kết quả

var items:Array = new Array(1, 2, 3); Pha� n tử thứ 0 là 1


for(var index in items){ Pha� n tử thứ 1 là 2
trace("Pha� n tử thứ " + index + " là " + Pha� n tử thứ 2 là 3
items[index]);
}
Trong câu lệnh for…in này, thì biến index là một chỉ số. Nó được khai báo trực
tiếp trong vòng lặp for. Bie� n index nà y sẽ nhậ n cá c giá trị là 0, 1, 2 (tương ứng với
chı̉ so� củ a ba pha� n tử 1, 2, 3 củ a mả ng). Khi in ra giá trị, thı̀ ta sẽ in ra giá trị củ a
pha� n tử có chı̉ so� tương ứng.
Ví dụ: Ví dụ sử dụng for…in kết hợp với Object
Ví dụ Kết quả

var mang:Object = {'b': "Nam", 'g': "Nữ", Nữ


'u': "Khô ng bie� t"}; Nam
for(var i in mang) Khô ng bie� t
trace(mang[i]);

Bạ n có the� nhậ n tha� y trong trường hợp nà y, chı̉ so� tương ứng với cá c pha� n tử là
‘b’, ‘g’ và ‘u’. Ta khô ng the� dù ng vò ng lặ p for trong trường hợp nà y. Khi sử dụ ng
for…in, bie� n i sẽ nhậ n cá c giá trị tương ứng với chı̉ so� là ‘b’, ‘g’ và ‘u’. Tương ứng
với cá c chı̉ so� nà y, ta thu được giá trị tương ứng là “Nam”, “Nữ” và “Khô ng bie� t”.
Lưu ý , kie� u Object được sử dụ ng trong vı́ dụ nà y tương tự như kie� u enum trong
Java.

c. 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ó the� sử dụ ng cho
mả ng có chı̉ so� khô ng liê n tụ c hoặ c Object. Tuy nhiê n, for each…in truy cậ p đe� n
cá c pha� n tử trực tie� p mà khô ng ca� n thô ng qua chı̉ so� .
Cú pháp
for each(var item in Array/Object){

- 123 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Lệnh;
}
Ví dụ: Ví dụ sử dụng for each…in kết hợp với Array
Ví dụ Kết quả

var items:Array = new Array(1, 2, 3); 1


for each (var item in items){ 2
trace(item); 3
}

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ố như trong trường hợp trên. Nó
cũng được khai báo trực tiếp trong vòng lặp for.
Ví dụ: Ví dụ sử dụng for each…in kết hợp với Object
Ví dụ Kết quả

var mang:Object = {'b': "Nam", 'g': "Nữ", Nữ


'u': "Khô ng bie� t"}; Nam
for(var item in mang) Khô ng bie� t
trace(item);

Bạ n có the� nhậ n tha� y, ta hoà n toà n khô ng ca� n quan tâ m đe� n chı̉ so� nhưng va� n
nhậ n được dữ liệ u củ a cá c pha� n tử củ a Array hoặ c Object.
Bài tập.
Cho mộ t mả ng cá c so� nguyê n với giá trị cho trước. Hã y thực hiệ n cá c yê u ca� u sau
đâ y ba� ng cá ch sử dụ ng 3 vò ng lặ p for, for…in, for each…in ở trê n.
a) Liệt kê các phần tử là số chẵn của mảng.
b) Tính tổng các phần tử chia hết cho 3 và 5.
c) Sắp xếp lại thứ tự của mảng.

d. Câu lệnh lặp while


Nếu biểu thức điều kiện đúng thì lặp lại quá trình thực thi lệnh. Nghĩa là câu lệnh
while luôn kiểm tra biểu thức điều kiện trước khi thực hiện lệnh. Nếu biểu thức
điều kiện sai ngay từ đầu thì lệnh sẽ không được thực hiện.
Cú pháp
while(biểu_thức_điều_kiện){
Lệnh;
}
Ví dụ: In ra các số giảm dần từ 3 đến 1.

- 124 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Ví dụ Kết quả

var i:int = 3; 3
while (i>0){ 2
trace(i); 1
i--;
}
Trong vı́ dụ nà y, bie� u thức i>0 là đú ng nê n câ u lệ nh trace và i-- sẽ được thực hiệ n.
Giá trị củ a i sẽ la� n lượt được in ra. Đo� ng thời giá trị củ a i sẽ giả m xuo� ng. Đe� n khi
bie� n i nhậ n giá trị 0 thı̀ bie� u thức i>0 khô ng cò n đú ng và vò ng lặ p ke� t thức.
Ví dụ: Tính tổng các phần tử có giá trị dương của mảng.
Ví dụ Kết quả

var mang:Array = new Array(); 116

var i:int = 0;
while(i<100)
{
mang.push(Math.round(10*(Math.random()-0.5)));
i++;
}
var S:int = 0;

i=0;
while(i<100)
{
if(mang[i]>0)
S+=mang[i];
i++;
}
trace(S);
Vı́ dụ nà y hoà n toà n tương tự như vı́ dụ tı́nh to� ng cá c pha� n tử có giá trị dương củ a
mả ng ba� ng cá ch sử dụ ng vò ng lặ p for ở trê n.

e. Câu lệnh lặp do…while


Khá c với câ u lệ nh while, khi sử dụ ng lệ nh do…while thı̀ lệnh sẽ được thực hiệ n
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ì

- 125 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

lệnh sẽ tiếp tục được thực hiện. Khác với lệnh while, đối với lệnh do…while thì
lệnh bên trong nó được thực hiện ít nhất một lần.
Cú pháp
do{
Lệnh;
} while(biểu_thức_điều_kiện);
Ví dụ: Viết đoạn chương trình in ra các số theo thứ tự giảm dần từ 3 đến 1.
Ví dụ Kết quả

var i:int = 3; 3
do{ 2
trace(i); 1
i--;
} while (i>0);
Trong đoạ n chương trı̀nh nà y, câ u lệ nh trace sẽ được thự hiệ n và giá trị củ a bie� n i
sẽ được in ra, bie� n i giả m xuo� ng 1 đơn vị, sau đó kie� m tra đie� u kiệ n i>0. Ne� u i >0
đú ng, thı̀ quay lạ i vò ng lặ p. Do đó , giá trị được in ra là 3, 2, 1.
Bài tập.
Hã y là m lạ i bà i tậ p trong pha� n câ u lệ nh for, for…in và for each…in ba� ng cá ch sử
dụ ng hai vò ng lặ p while và do…while.

5.5.4. Các lệnh continue, break và return


Lệnh continue: lệnh này cho phép bỏ qua một vòng lặp hiện tại và thực hiện
vòng lặp tiếp theo.
Ví dụ Kết quả

for (var i:int = 0; i<4; i++){ 1


if(i%2==0) continue; 3
trace(i);
};
Dù bie� n i được xé t duyệ t từ 0 đe� n 4 nhưng ne� u giá trị củ a i là cha� n thı̀ lệ nh
continue được thực hiệ n và cá c lệ nh tie� p theo trong bước lặ p hiệ n tạ i sẽ bị bỏ
qua. Ne� u i nhậ n giá trị lẻ , thı̀ lệ nh continue khô ng được thực hiệ n, lệ nh trace sẽ
tie� n hà nh in ra giá trị củ a i (chı̉ giá trị lẻ 1, 3).

Lệnh break: cho phép thoát khỏi vòng lặp.


Ví dụ Kết quả

- 126 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

var i:int = 0; 0
do{ 1
trace(i); 2
if (i>=5) break; 3
i++; 4
} while (true); 5
Trong vı́ dụ nà y, vò ng lặ p do…while khô ng có tı́nh dừng và nó sẽ lặ p mã i (do điều
kiện lặp là true). Vò ng lặ p nà y sẽ tie� n hà nh in ra giá trị củ a i sau đó tă ng giá trị i
lê n 1. Ne� u giá trị i vượt quá 5 thı̀ lệnh break được thực hiện và vò ng lặ p bị bỏ qua.
Trong trường hợp nà y, trace na� m trước việ c kie� m tra giá trị i>=5, nê n nó va� n in
ra giá trị 5. Ke� t quả thu được như trê n.

Lệnh return: trả về giá trị cho hàm (nếu return nằm trong hàm) và kết thúc
chương trình (nếu lệnh return nằm trong chương trình chính). Khi gặ p lệ nh
return, thı̀ ta� t cả cá c câ u lệ nh tie� p theo trong hà m (tức những lệ nh na� m trong
hà m nhưng na� m sau return) sẽ khô ng được thực hiệ n.

Bảng so sánh chức năng của ba lệnh continue, break, return


Lệnh Chức năng
continue Bỏ qua bước lặ p hiệ n tạ i và thực hiệ n bước lặ p tie� p theo.
break Thoá t khỏ i vò ng lặ p.
return Thoá t khỏ i vò ng lặ p, thoá t khỏ i hà m, thoá t khỏ i chương trı̀nh.
Xé t ve� mức độ mạ nh ye� u, ta có the� sa� p xe� p như sau:
continue < break < return

5.6. Hàm
AS là ngô n ngữ kịch bả n nê n va� n ho� 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 ba� ng mộ t tê n gọ i và ta gọ i đó là tê n hà m. Việ c sử
dụ ng hà m sẽ giú p giả m tả i so� lượng lệ nh ne� u cá c lệ nh đó ca� n được vie� t lạ i nhie� u
la� n. Ne� u ta quy định cá c lệ nh nà y dưới mộ t tê n gọ i thı̀ ta chı̉ ca� n gọ i lạ i tê n gọ i
hà m nà y khi muo� n thực thi nhó m câ u lệ nh đó . Ngoà i ra, hà m cò n có cơ che� truye� n
tham so� , giú p cho chương trı̀nh trở nê n gọ n gà ng hơn. Ta có the� hie� u hà m trong
AS gio� ng với cá c hà m toá n họ c.

a. Khai báo và sử dụng


Cú pháp
function tên_hàm(ds_tham_số):kiểu_dữ_liệu_trả_về{
thân hàm;

- 127 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

}
Ví dụ
Ví dụ Kết quả

function showMsg():void{ Hello


trace(“Hello”); 3
}
function Add(a:int, b:int):int{
return a+b;
}
showMsg();
trace(Add(1,2));
Trong vı́ dụ nà y, ta khai bá o hai hà m là showMsg và Add. Hà m showMsg khô ng có
tham so� truye� n và o và nó là hà m khô ng trả ve� giá trị nê n ta quy định nó là hà m
void. Hà m showMsg chı̉ đơn thua� n in ra câ u thô ng bá o “Hello”. Hà m Add có hai
tham so� là a và b. Cá c tham so� trong hà m được phâ n tá ch ba� ng da� u pha� y. Hà m
Add trả ve� giá trị. Nó là dạ ng hà m int – hà m trả ve� giá trị nguyê n. Đe� trả ve� giá trị
cho hà m, ta sử dụ ng lệ nh return. Hà m Add dù ng đe� cộ ng hai so� nguyê n.
Khi gọ i hà m, ta gọ i hà m theo tê n gọ i củ a nó và truye� n tham so� và o cho hà m. Ne� u
hà m khô ng có tham so� , thı̀ ta đe� tro� ng nhưng ba� t buộ c phả i có da� u ngoặ c đơn.
Các bước xây dựng hàm. Đe� xâ y dựng mộ t hà m trong AS hay trong ba� t kı̀ ngô n
ngữ lậ p trı̀nh nà o, ta ca� n thực hiệ n cá c bước sau đâ y:
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ừ
khóa.
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 của hàm.
Ne� u là mộ t người mới là m quen với lậ p trı̀nh, thı̀ a� c ha� n sẽ gặ p nhie� u trở ngạ i khi
xâ y dựng hà m. Khi đó , hã y tuâ n thủ cá c bước trê n đe� định hướng cho việ c xâ y
dựng hà m ca� n dù ng.
Bài tập.
Hã y thực hiệ n cá c bà i tậ p sau đâ y ba� ng cá ch sử dụ ng hà m:
a) Kie� m tra mộ t so� nguyê n to� .
b) Giả i phương trı̀nh bậ c hai.
c) Tı́nh diệ n tı́ch củ a hı̀nh trò n.
d) Tı́nh to� ng cá c so� nguyê n to� từ 1 đe� n 100.

- 128 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

e) Tı́nh the� tı́ch hı̀nh ca� u.


f) Tı́nh to� ng cá c pha� n tử dương củ a mộ t mả ng so� nguyê n cho trước.
Hướng dẫn.
a) Số nguyên tố là số chỉ có đúng hai ước số là 1 và chính nó (nghĩa là nó không
chia hết cho bất kì số nào khác ngoài 1 và chính nó). Số 0 và 1 không phải là số
nguyên tố; số 2 là số nguyên tố bé nhất.
b) Lập delta và biện luận theo delta. Bài tập này không yêu cầu xét nghiệm phức.
c) Sử dụng công thức tính diện tích hình tròn 𝑆 = 𝜋𝑟 2 .
d) Tương tự bài tập tính tổng ở trên. Tuy nhiên, ta chỉ cộng giá trị của i vào tổng S
nếu i là số nguyên tố.
4
e) Sử dụng công thức tính thể tích hình cầu 𝑉 = 𝜋𝑟 3 .
3
f) Tương tự bài tập tính tổng ở trên.

b. Vấn đề tham biến và tham trị


Tham so� trong hà m được truye� n theo hai hình thức: tham bie� n và tham trị. Ne� u
tham so� được truye� n theo tham trị, thı̀ giá trị củ a tham so� đó sẽ khô ng thay đo� i
sau khi thoá t khỏ i hà m. Ngược lạ i, ne� u tham so� được truye� n theo tham bie� n, thı̀
giá trị củ a nó sẽ bị thay đo� i khi thoá t ra khỏ i hà m. Trong AS các tham số được
truyền theo tham trị nếu chúng thuộc kiểu dữ liệu nguyên thủy. Nếu muốn truyền
tham số theo tham biến, bạn cần sử dụng một kiểu dữ liệu tham chiếu như kiểu
đối tượng Object.
Tham trị Tham biến

function noSwap(a:int, b:int):void{ function Swap(Obj:Object):void{


c:int = a; var a:Object = new Object();
a = b; a = Obj.x;
b = c; Obj.x = Obj.y;
} Obj.y = a;
var a:int = 1; }
var b:int = 2; var myObj:Object = {x:1, y:2};
noSwap(a, b); Swap(myObj);
trace(a+”, “+b); trace(myObj.x+", "+myObj.y);
//Kết quả là: 1, 2 //Kết quả là: 2, 1
Bạ n chú ý vı́ dụ trong trường hợp tham trị. Giá trị ban đa� u củ a a và b la� n lượt là 1
và 2. Sau khi gọ i hà m noSwap(a, b) thı̀ giá trị nhậ n được củ a a và b khô ng thay
đo� i. Ngược lạ i, trong trường hợp tham bie� n thı̀ giá trị ban đa� u củ a x và y là 1 và 2.
Sau khi gọ i hà m Swap(myObj) thı̀ giá trị củ a x và y thay đo� i và la� n lượt có giá trị là
2 và 1.

- 129 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

c. Hàm với tham số mặc định


Khi xâ y dựng hà m, đô i lú c, ta muo� n a� n định giá trị mặ c định cho cá c tham so� ne� u
tham so� đó là tù y chọ n (có nghı̃a là có the� có hoặ c khô ng khi gọ i hà m) thı̀ ta sử
dụ ng khai bá o hà m với tham so� mặ c định.
Ví dụ Kết quả

function Add(a:int, b:int = 0, c:int = 0):int{ 1


return a+b+c; 3
} 6
trace(Add(1));
trace(Add(1,2));
trace(Add(1,2,3));
Với những tham số được quy định là mặc định, khi gọi hàm chúng có thể không
cần xuất hiện trong tham số của hàm, và khi đó tham số đó sẽ nhận giá trị mặc
định mà ta đã quy ước.

d. Hàm với số lượng tham số không xác định


Khi xâ y dựng hà m, có the� có những hà m mà ta chưa xá c định được so� lượng tham
so� củ a nó . Để làm việc với loại hàm chứa tham số dạng này, AS cung cấp cho ta
công cụ gọi là (rest) tham số.
Ví dụ Kết quả

function Add(...args):int{ 1
var sum:int = 0; 3
for (var i:int = 0; i<args.length;i++) 6
sum+=args[i];
return sum;
}
trace(Add(1));
trace(Add(1,2));
trace(Add(1,2,3));
Như bạ n tha� y trong vı́ dụ trê n, hà m tı́nh to� ng có so� lượng tham so� khô ng hạ n
định. Ta có the� gọ i bao nhiê u tham so� tù y ý . Giá trị trả ve� củ a hà m là to� ng cá c
tham so� đó .

e. Con trỏ void

- 130 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Cũng tương tự C++, actionscript cũ ng ho� trợ con trỏ void. Con trỏ void có the�
dù ng đe� gá n cho mộ t đo� i tượng chưa xá c định kie� u dữ liệ u. Trong nhie� u tı̀nh
huo� ng thực te� , ta muo� n xâ y dựng cá c hà m nhưng chưa bie� t chı́nh xá c kie� u giá trị
củ a hà m hay củ a cá c tham so� là gı̀ hay ta muo� n xâ y dựng mộ t hà m to� ng quá t có
the� á p dụ ng cho nhie� u kie� u dữ liệ u khá c nhau, khi đó , ta có the� sử dụ ng con trỏ
void. Con trỏ void có nhie� u ứng dụ ng trong thực te� và nó là mộ t cá ch thức me� m
dẻ o đe� chuye� n đo� i kie� u dữ liệ u cho cá c đo� i tượng khi ca� n thie� t. Trong
actionscript, con trỏ void chı̉ đơn thua� n khai bá o với toá n tử *.
Ví dụ Kết quả

function Add(a:*, b:*):* 4


{ abcd
return a+b;
}
trace(Add(1, 3));
trace(Add("ab", "cd"));
Trong vı́ dụ nà y, ta có the� tha� y: hà m Add chứa hai tham so� a và b chưa xá c định
kie� u, giá trị trả ve� củ a hà m cũ ng chưa có kie� u xá c định. Trong trường hợp nà y, ta
sử dụ ng con trỏ void. Hà m Add có the� dù ng đe� cộ ng hai so� với nhau hoặ c dù ng đe�
cộ ng hai xâ u kı́ tự. Khi ta gọ i hà m, tù y thuộ c và o giá trị truye� n và o mà nó cho ta
cá c cá ch tı́nh toá n khá c nhau: Add với tham so� là so� thı̀ nó sẽ thực hiệ n phé p toá n
cộ ng so� họ c; Add với tham so� là xâ u thı̀ nó sẽ thực hiệ n phé p no� i hai xâ u.

f. Kiểu dữ liệu hàm


Bạn có thể khởi gán một biến cho một hàm được khai báo. Việc này sẽ giúp bạn
tạo ra hai hàm có chức năng giống nhau.
Ví dụ Kết quả

var Cong = function Add(a:int, b:int):int{ 3


return a+b; 3
}
trace(Cong(1,2));
trace(Add(1,2));
Actionscript cò n cho phé p bạ n vie� t ta� t. Bạ n có the� vừa khai bá o hà m và ke� t hợp
gọ i hà m. Bạ n chı̉ nê n sử dụ ng dạ ng cú phá p nà y khi bạ n sử dụ ng khá thà nh thạ o
ngô n ngữ nà y, bởi lẽ nó có the� gâ y ra nha� m la� n hoặ c khó hie� u. Vı́ dụ trê n có the�
vie� t ta� t như sau:
Ví dụ Kết quả

- 131 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

trace(( function Add(a:int, b:int):int{ 3


return a+b;
})(1,2));
Bạ n lưu ý ra� ng, hà m được khai bá o được bọ c trong toá n tử ngoặ c đơn (). Khi bọ c
trong toá n tử ngoặ c đơn, nó có the� được sử dụ ng như mộ t lời gọ i hà m.

5.7. Lớp và Đối tượng

5.7.1. Xây dựng lớp


Ngà y nay, kı̃ thuậ t lậ p trı̀nh hướng đo� i tượng được ứng dụ ng rộ ng rã i trong cô ng
nghệ phá t trie� n pha� n me� m. So với cá c kı̃ thuậ t trước đó , kı̃ thuậ t lậ p trı̀nh hướng
đo� i tượng có nhie� u ưu đie� m vượt trộ i. Hạ t nhâ n củ a kı̃ thuậ t lậ p trı̀nh hướng đo� i
tượng đó là lớp và đo� i tượng. Lớp là khá i niệ m được đưa và o trong kı̃ thuậ t lậ p
trı̀nh hướng đo� i tượng nha� m mô tả đo� i tượng. Mộ t đo� i tượng tương ứng với mộ t
thực the� trong the� giới thực. Mộ t đo� i tượng go� m có cá c thuộ c tı́nh và phương thức
đe� thực thi hà nh độ ng. Cá c thuộ c tı́nh và phương thức nà y được mô tả trong lớp.
Trong actionscript, lớp được xây dựng dựa theo cú pháp sau đây
public class Tên_class{
//Khai báo thuộc tính của lớp
//Phương thức khởi tạo
//Phương thức getter và setter
//Các phương thức khác
}
Trong đó, class là từ khóa bắt buộc để khai báo lớp. Một lớp đối tượng bao gồm
các phương thức và thuộc tính của nó. Các thuộc tính bao gồm các tính chất mô tả
đối tượng. Các phương thức giúp đối tượng thực thi hành động của mình. Khi
khởi tạo một đối tượng, thông thường ta sẽ xây dựng một hàm tạo hoặc sử dụng
phương thức setter để khởi gán giá trị khởi tạ o cho cá c thuộ c tı́nh củ a đối tượng.
Phương thức getter giúp ta nhận được các giá trị từ các thuộc tính của đối tượng.
Ví dụ sau đây mô tả việc xây dựng một lớp có tên là SinhViên.
Ví dụ
public class SinhVien{
private var ten:String;
private var tuoi:uint;

public function SinhVien(ten:String, tuoi:uint){


this.ten = ten;
this.tuoi = tuoi;

- 132 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

public function toString():String{


return “Tôi là: “+ten+”, “+tuoi+” tuổi.”;
}
}
Trong ví dụ này, bạn lưu ý rằng cá c phương thức và thuộc tính được khai báo
ba� ng mộ t trong cá c từ khó a sau: public, protected và private. Với từ khóa private
thì thuộc tính và phương thức chỉ cho phép truy cập bởi các phương thức nội tại
của lớp đó. Ngược lại, với từ khóa protected thì phạm vi truy xuất là tất cả các lớp
trong cùng một package. Với public thì phạm vi truy xuất là tất cả các lớp dù là
trong hay ngoài package. Cá c từ khó a nà y gọ i là từ khó a chı̉ mức truy cậ p cho
phương thức và thuộ c tı́nh củ a đo� i tượng.
Với class có các từ khóa chỉ định sau:
- dynamic: các thuộc tính có thể được bổ sung vào trong thể hiện lớp tại thời
điểm runtime.
- internal: có thể được nhìn thấy trong cùng một package.
- final: không cho phép thừa kế.
- public: có thể được nhìn thấy bất kì đâu.
Hàm tạo
Trước khi sử dụ ng mộ t đo� i tượng, ta ca� n khởi tạ o nó . Đe� khởi tạ o mộ t đo� i tượng,
lớp củ a đo� i tượng đó ca� n có hà m khởi tạ o. Trong actionscript, tê n củ a hà m tạ o
phả i trù ng với tê n củ a lớp.
Ví dụ
public class MyClass {
public function MyClass() {
// constructor code
}
}
Actionscript khô ng ho� trợ cho� ng cha� t hà m. Đie� u đó có nghı̃a là ta chı̉ có the� khai
bá o duy nha� t mộ t hà m tạ o. Trong trường hợp khô ng khai bá o hà m tạ o nà o, thı̀ nó
sẽ sử dụ ng hà m tạ o mặ c định. Trong nhie� u tı̀nh huo� ng thực te� , đô i lú c ta có the�
ca� n phả i sử dụ ng nhie� u dạ ng hà m tạ o. Khi đó , ta có the� sử dụ ng dạ ng rest tham so�
hoặ c phương thức với tham so� mặ c định như ở trê n.
Ví dụ
public class MyClass
{

- 133 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

private var a:int;


private var b:int;

public function MyClass(...arg)


{
this.a = arg[0];
this.b = arg[1];
}
}
public class MyClass
{
private var a:int;
private var b:int;

public function MyClass(a:int=0, b:int=0)


{
this.a = a;
this.b = b;
}
}
Sau nà y, ta có the� gọ i mộ t trong so� cá c dạ ng hà m tạ o khá c nhau củ a lớp MyClass
dù ra� ng ta chı̉ khai bá o mộ t hà m tạ o duy nha� t cho lớp nà y. Chi tie� t ve� cá ch sử
dụ ng đo� i tượng sẽ được trı̀nh bà y trong mụ c tie� p theo.

Tính thừa kế
AS là ngôn ngữ đơn thừa kế, nghĩa là một lớp chỉ có thể thừa kế từ một lớp cơ sở.
Để khai bá o tính thừa kế, AS cung cấp cho ta từ khóa extends.
Ví dụ sau đây sẽ minh họa cho tính thừa kế. Lớp Human có hai thuộc tính là tên
và tuổi. Lớp SinhVien kế thừa từ lớp Human này, nó bổ sung thêm thuộc tính ids.
Phương thức toString trong lớp SinhVien ghi chồng lên phương thức toString của
lớp cơ sở Human nhờ từ khóa override.
Ví dụ
//Lớp cơ sở Human
public class Human{
protected var ten:String;
protected var tuoi:uint;
public function toStrings():String{

- 134 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

return "Tôi là: "+ten+", "+tuoi+" tuổi.";


}
}
//Lớp thừa kế SinhVien
public class SinhVien extends Human{
private var ids:int;
public function SinhVien(ten:String, tuoi:uint, ids:int) {
this.ten = ten;
this.tuoi = tuoi;
this.ids = ids;
}
override public function toString():String{
return this.ten+", "+this.tuoi+", "+this.ids;
}
}

Giao diện interface


Dù tính đơn thừa kế phản ánh đúng với thực tế của mỗi thực thể, tuy nhiên tính
đa thừa kế mang lại cho ta sức mạnh trong lập trình hướng đối tượng. Do vậy,
cũng như đa số ngôn ngữ lập trình đơn thừa kế khác, AS cũng bổ sung khái niệm
giao diện – interface. Tuy nhiên, theo định nghĩa của giao diện trong các ngôn ngữ
lập trình hướng đối tượng khác, nó là một lớp abstract hoàn toà n (abstract hoàn
toàn), còn trong AS dường như ta cần thay đổi khái niệm này. Sở dĩ như vậy, vì
trong AS không hỗ trợ lớp abstract. Ta có thể hiểu giao diện trong AS như sau:
giao diện là một lớp chỉ chứa khai báo phương thức, không chứa thuộc tính. Một
lớp chỉ thừa kế một lớp cơ sở, nhưng nó có thể thực thi nhiều giao diện.
Ví dụ sau đây sẽ minh họa việc tạo hai giao diện là Animal và Meo. Lớp MeoDen
sẽ thực thi hai giao diện này.
Ví dụ
//Giao diện Animal
public interface Animal {
function Go():void;
function Eat():void;
}
//Giao diện Meo
public interface Meo {
function Sound():void;

- 135 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

}
//Lớp MeoDen thực thi hai giao diện Animal và Meo
public class MeoDen implements Animal, Meo{
public function MeoDen() {
trace("Tôi là Mèo đen.");
}
public function Go():void{
trace("Tôi đi !");
}
public function Eat():void{
trace("Tôi ăn !");
}
public function Sound():void{
trace("Tôi kêu !");
}
}

5.7.2. Làm việc với đối tượng


a. Tạo sự thể hiện của lớp
Khi học về lập trình hướng đối tượng, ta đã biết rằng: một thực thể trong thế giới
thực có các hành động và tính chất. Khi xây dựng lớp để mô tả thực thể đó ta sẽ
dùng phương thức và thuộc tính để mô tả. Một đối tượng là một sự thể hiện của
lớp. Ví dụ ta có lớp đối tượng SinhVien như ở trên, thì khi tạo đối tượng ta có thể
sử dụng cú pháp sau
SinhVien sv = new SinhVien();
Ở đây, sv là một đối tượng thể hiện của lớp SinhVien. Có lẽ sau khi làm quen với
cách khai báo lớp ở trên, bạn sẽ thắc mắc: làm thế nào để kiểm tra các lớp trên
viết đúng hay chưa? Câu trả lời là chúng ta cần cài đặt để debug. Nhưng môi
trường Flash không cho phép chúng ta biên dịch các file ActionScript một cách
riêng lẽ, các file này muốn thực thi được cần sử dụng bên trong mộ t dự á n của
phim Flash. Ví dụ, bạn có thể tạo mới một dự án Flash, giả sử bạn đặt tên cho nó
là MainPrj.fla. Bạn tiếp tục tạo mới một lớp ActionScript 3.0 và đặt tên cho nó là
SinhVien, sau đó lưu file này lại với tên SinhVien.as. Trong file ActionScript này,
bạn hãy viết một class như trên. Bạn quay trở lại với file MainPrj.fla, nhấn F9 để
quay trở lại với giao diện viết Action của Flash. Trong giao diện này, bạn hãy tạo
một đối tượng. Giờ đây, bạn hoàn toàn có thể debug phim bằng cách nhấn
Ctrl+Enter.

- 136 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Với những dự án phức tạp, ta cần tổ chức các lớp theo các package. Đe� sử dụ ng
package, bạ n hãy tạo các thư mục với tên gọi khác nhau (tên của chúng cũng
chính là tên của package). Khi tạo lớp, bạn hãy đặt nó trong package với cú pháp
sau:
package Tên_Package{
//Khai báo lớp
}
Điều này sẽ giúp bạn quản lý tốt hơn các lớp của mình. Package hoàn toàn giống
namespace trong NET. Bạn cũng lưu ý rằng trong Action của Flash, bạn cần
import các lớp này vào để sử dụng nhờ từ khóa import.
import Tên_Package.Tên_Lớp;
Bạn hãy thử hoàn tất các ví dụ minh họ a ở trên ba� ng cá ch quả n lý theo package.
b. Đối tượng của lớp số nguyên int và uint
Tên hàm Chức năng
Hàm tạo int(Number) Hàm khởi tạo cho lớp int.
toExponential(Number) Trả về định dạng số dạng 3.1e+5. Ngoại lệ RangeError
toString() Trả về định dạng xâu của số
valueOf() Trả về giá trị nguyên thủy của đối tượng int.

c. Đối tượng của lớp số thực Number


Tên hàm Chức năng
Hàm tạo int(Number) Hàm khởi tạo cho lớp int
toExponential(Number) Trả về định dạng số dạng 3.1e+5. Ngoại lệ RangeError
toFixed(Number) Cố định số chữ số thập phân
toPrecision(Number) Trả về độ chính xác đến num
toString() Trả về định dạng xâu của số
valueOf() Trả về giá trị nguyên thủy của đối tượng Number.
Ngoài ra, trong lớp này có xác định thêm các tham số NaN – vô định,
NEGATIVE_INFINITY – số âm vô cực, POSITIVE_INFINITY – số dương vô cực.
d. Đối tượng của lớp String
Tên hàm Chức năng
Hàm tạo String(String) Hàm khởi tạo cho lớp String.
charAt(Number) Trả về kí tự tại num.
concat(…String) Ghép nối các xâu thành một xâu.
indexOf(String, Trả về vị trí đầu tiên tìm thấy xâu String kể từ vị thứ
Number=0) đã cho. Phương thức được định nghĩa là danh sách
hằng, nghĩa là có thể có một hoặc hai đối số.

- 137 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

lastIndexOf(String, Tương tự indexOf, nhưng tìm kiếm từ phải sang


Number) trái.
localeCompare(String) So sanh hai xâu. Nếu bằng nhau thì kết quả trả về 0.
Nếu xâu ban đầu có độ dài lớn hơn thì trả về 1,
ngược lại trả về -1.
replace(pattern, Obj) Thay pattern bằng các Obj trong xâu đã cho.
search(pattern) Trả về chỉ số đầu tiên của pattern trong xâu đã cho.
split(pattern) Phân tách xâu thành các xâu con. Kết quả trả về một
mảng các xâu.
substring(Number, Trả về xâu con từ vị trí Number đầu với độ dài
Number) Number sau.
toLowerCase(String) Chuyển tất cả kí tự hoa thành kí tự thường. Xâu
nguồn không thay đổi.
toUpperCase(String) Chuyển tất cả các kí tự thường thành kí tự hoa. Xâu
nguồn không thay đổi.
valueOf() Trả về giá trị của xâu ở dạng kiểu nguyên thủy.

e. Đối tượng của lớp Array


Tên hàm Chức năng
Thuộc tính length Trả về độ dài của xâu.
Array(Number) và Hàm tạo.
Array(…values)
concat(…args) Ghép nối các mảng thành một.
pop() Phương pháp pop cho Stack.
push() Phương pháp push cho Stack.
reverse() Đảo mảng.
sort() Sắp xếp mảng.
toString() Chuyển sang xâu.

5.7.3. Lớp sự kiện Event


Lớp Event na� m trong gó i flash.events là lớp quả n lý cá c sự kiệ n củ a cá c đo� i tượng.
Nó được sử dụ ng đe� la� ng nghe sự kiệ n củ a cá c đo� i tượng thô ng qua phương thức
addEventListener. Ne� u sự kiệ n được la� ng nghe bởi đo� i tượng stage thı̀ cá c hà nh
độ ng sẽ được die� n tie� n theo stage.
Cú pháp:
đối_tượng.addEventListener(Event.Sự_kiện_lắng_nghe, fl_func,
useCapture=false, priority=0, useWeakReference=false);

- 138 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

function fl_fun(e:Event):void
{

}
Trong đó ,
a) Hà m fl_func là hà m thực thi khi sự kiệ n được phá t sinh.
b) Tham so� useCapture có khả nă ng nhậ n mộ t trong hai giá trị là true/false. Giá trị
nga� m định là false. Ne� u nhậ n giá trị true, thı̀ thực thi theo mô hı̀nh 1 (capture
phase), ngược lạ i nhậ n giá trị false thı̀ thực thi theo mô hı̀nh 2 (bubbling phase).

Mô hı̀nh 1 – Capture phase Mô hı̀nh 2 – Bubbling phase


Trong hai mô hı̀nh trê n, có hai đo� i tượng lo� ng và o nhau. Ne� u thực thi theo mô
hı̀nh capture phase (mô hı̀nh 1) thı̀ sự kiệ n củ a đo� i tượng ngoà i sẽ thực thi trước
và sau đó mới đe� n sự kiệ n củ a đo� i tượng trong. Đo� i với mô hı̀nh bubbling phase
(mô hı̀nh 2) thı̀ ngược lạ i.
Ne� u mặ c định, mộ t đo� i tượng khô ng có đo� i tượng khá c lo� ng bê n trong nó , ta ca� n
sử dụ ng tham so� nà y theo mặ c định là false.
c) Tham so� priority nhậ n giá trị là so� nguyê n. Mặ c định nó nhậ n giá trị 0. Nó là thứ
tự xử lý sự kiệ n. Ne� u đo� i tượng có priority lớn hơn thı̀ nó sẽ được xử lý trước.
Ne� u cá c đo� i tượng có cù ng priority, thı̀ chú ng sẽ được xử lý theo thứ tự mà chú ng
được bo� sung và o.
d) Tham so� useWeakReference nhậ n mộ t trong hai giá trị true/false. Ne� u true thı̀
nó sử dụ ng che� độ tham chie� u ye� u (tức khô ng cò n be� n vững khi thực thi che� độ
dọ n rá c garbage collection); ngược lạ i, ne� u false thı̀ nó sử dụ ng che� độ tham chie� u
mạ nh. Mặ c định, nó sử dụ ng giá trị false.
e) Tham so� Sự_kiện_lắng_nghe. Trong lớp Event, có cá c sự kiệ n la� ng nghe sau đâ y:
SỰ KIỆN LẮNG NGHE GIẢI THÍCH
ACTIVATE : String = "activate" Khi đo� i tượng đang hoạ t độ ng.
ADDED : String = "added" Khi đo� i tượng được thê m và o.
ADDED_TO_STAGE : String = Khi đo� i tượng được thê m và o stage.
"addedToStage"
CANCEL : String = "cancel" Khi đo� i tượng bị hủ y.
CHANGE : String = "change" Khi đo� i tượng thay đo� i.
CLEAR : String = "clear" Khi đo� i tượng được clear (phương thức clear

- 139 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

củ a thuộ c tı́nh graphics).


CLOSE : String = "close" Khi đo� i tượng đã được đó ng lạ i.
CLOSING : String = "closing" Khi đo� i tượng đang đó ng lạ i.
COMPLETE : String = "complete" Khi đo� i tượng đã được tả i xong.
CONNECT : String = "connect" Khi đo� i tượng được ke� t no� i thô ng qua mạ ng.
COPY : String = "copy" Khi đo� i tượng được copy.
CUT : String = "cut" Khi đo� i tượng được cut.
DEACTIVATE : String = Khi đo� i tượng khô ng cò n hoạ t độ ng.
"deactivate"
DISPLAYING : String = Khi đo� i tượng đang hie� n thị.
"displaying"
ENTER_FRAME : String = Khi đo� i tượng tie� n và o khung hı̀nh (tức là
"enterFrame" frame hiệ n tạ i đang ở trong vù ng frame củ a
đo� i tượng).
EXIT_FRAME : String = Khi đo� i tượng thoá t khỏ i khung hı̀nh (tức là
"exitFrame" frame hiệ n tạ i ra khỏ i frame củ a đo� i tượng).
EXITING : String = "exiting" Khi thoá t khỏ i đo� i tượng.
FRAME_CONSTRUCTED : String Khi khởi tạ o khung hı̀nh.
= "frameConstructed"
FULLSCREEN : String = Khi đo� i tượng ở che� độ fullscreen (che� độ trà n
"fullScreen" mà n hı̀nh).
HTML_BOUNDS_CHANGE : Khi khung chứa thẻ html thay đo� i.
String = "htmlBoundsChange"
HTML_DOM_INITIALIZE : String Khi mộ t đo� i tượng DOM (document object
= "htmlDOMInitialize" mode) được khởi tạ o.
HTML_RENDER : String = Khi cá c the� html được hie� n thị (sau khi khởi
"htmlRender" tạ o, sau khi tả i thà nh cô ng…).
ID3 : String = "id3" Khi đọ c được thẻ ID3. ID3 là thuộ c tı́nh lưu
trữ trong thẻ metadata củ a file mp3.
INIT : String = "init" Khi frame đa� u tiê n củ a movie được tả i.
LOCATION_CHANGE : String = Khi nộ i dung trê n đo� i tượng StageWebView
"locationChange" thay đo� i.
MOUSE_LEAVE : String = Khi trỏ chuộ t di chuye� n ra khỏ i đo� i tượng.
"mouseLeave"
NETWORK_CHANGE : String = Khi thay đo� i ke� t no� i mạ ng.
"networkChange"
OPEN : String = "open" Khi mộ t đo� i tượng triệ u gọ i phương thức open

- 140 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

củ a nó như: Sound, URLLoader, URLStream…


PASTE : String = "paste" Khi đo� i tượng được paste.
REMOVED : String = "removed" Khi đo� i tượng được xó a khỏ i khung chứa.
REMOVED_FROM_STAGE : String Khi đo� i tượng được xó a khỏ i stage.
= "removedFromStage"
RENDER : String = "render" Khi đo� i tượng được hie� n thị.
RESIZE : String = "resize" Khi đo� i tượng thay đo� i kı́ch thước.
SCROLL : String = "scroll" Khi đo� i tượng được ké o lă n (ba� ng cá ch quay
chuộ t giữa).
SELECT : String = "select" Khi đo� i tượng được chọ n.
SELECT_ALL : String = "selectAll" Khi ta� t cả cá c đo� i tượng được chọ n.
SOUND_COMPLETE : String = Khi â m thanh tả i hoà n ta� t.
"soundComplete"
STANDARD_ERROR_CLOSE : Khi lo� i đã được đó ng lạ i.
String = "standardErrorClose"
STANDARD_INPUT_CLOSE : Khi dữ liệ u và o đã được đó ng lạ i (vı́ dụ khi đọ c
String = "standardInputClose" file).
STANDARD_OUTPUT_CLOSE : Khi dữ liệ u ra đã được đó ng lạ i (vı́ dụ khi ghi
String = "standardOutputClose" ra file).
TAB_CHILDREN_CHANGE : Khi cá c cá c đo� i tượng trong thẻ thay đo� i.
String = "tabChildrenChange"
TAB_ENABLED_CHANGE : String Khi cá c đo� i tượng trong thẻ cho phé p thay đo� i.
= "tabEnabledChange"
TAB_INDEX_CHANGE : String = Khi thay đo� i thẻ chọ n.
"tabIndexChange"
TEXT_INTERACTION_MODE_CH Khi che� độ hie� n thị vă n bả n thay đo� i.
ANGE : String =
"textInteractionModeChange"
UNLOAD : String = "unload" Khi hà nh độ ng unload (hủ y bỏ việ c tả i) die� n
ra.
USER_IDLE : String = "userIdle" Khi người dù ng chuye� n sang che� độ idle (che�
độ chờ).
USER_PRESENT : String = Khi người dù ng ở che� độ hiệ n diệ n.
"userPresent"
Cá c bạ n cũ ng ca� n lưu ý ra� ng, cá c sự kiệ n la� ng nghe được ho� trợ tù y thuộ c và o đo� i
tượng và tù y thuộ c và o phiê n bả n má y ả o AVM sử dụ ng. Đo� i với AIR phiê n bả n

- 141 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

mới nha� t sẽ ho� trợ đa� y đủ cá c sự kiệ n la� ng nghe ở trê n. Đo� i với phiê n bả n Flash
Plugin cho trı̀nh duyệ t web, sẽ có nhie� u sự kiệ n la� ng nghe khô ng được ho� trợ.
Chú ng ta sẽ thả o luậ n mộ t vı́ dụ ve� sự kiệ n la� ng nghe là ENTER_FRAME. Sự kiệ n
nà y sẽ die� n tie� n khi frame hiệ n tạ i đang ở và o vù ng frame được trı̀nh chie� u (tức
nó sẽ die� n ra ngay sau khi phim được khởi tạ o cho đe� n khi nà o ke� t thú c trı̀nh
chie� u phim). Hie� n nhiê n nó sẽ die� n ra mã i trong trường hợp phim được lặ p lạ i vô
hạ n. Vı́ dụ ta sẽ tạ o ra mộ t quả bó ng mà u đen và cho nó di chuye� n liê n tụ c sang
phả i.
import flash.display.Shape;
import flash.events.Event;

var sh:Shape = new Shape();


sh.graphics.beginFill(0x000000);
sh.graphics.drawCircle(20, 20, 10);
sh.graphics.endFill();

addChild(sh);

stage.addEventListener(Event.ENTER_FRAME, fl_moveRight);
function fl_moveRight(e:Event):void
{
sh.x += 1;
}
Ta lưu ý ra� ng, ENTER_FRAME là sự kiệ n la� ng nghe có the� á p dụ ng cho nhie� u đo� i
tượng. Trong trường hợp nà y, ta có the� á p dụ ng cho stage hoặ c chı́nh đo� i tượng
sh. Ve� hiệ u quả , trong trường hợp nà y khô ng có sự khá c biệ t nà o vı̀ movie chı̉ có
mộ t frame duy nha� t nê n frame hiệ n tạ i luô n ở trong vù ng frame trı̀nh chie� u (củ a
stage cũ ng gio� ng như củ a đo� i tượng sh).

5.7.4. Sự kiện chuột


Khi làm việc với sự kiện chuộ t trong AS, ta cần cài đặt tên hiển thị cho đối tượng.
Chi tiết về điều này, chúng ta sẽ tìm hiểu kĩ hơn trong mục 5.7. Để minh họa cho
việc xử lý sự kiện chuột trong AS, ta sẽ minh họa sự kiện này trên đối tượng stage
(khung trình chiếu). Vı́ dụ sau đâ y sẽ in ra dò ng chữ “Hello” khi nha� p chuộ t trá i
lên stage.
import flash.events.MouseEvent;
stage.addEventListener(MouseEvent.CLICK, func);
function func(e:MouseEvent):void{

- 142 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

trace("Hello");
}
Cá ch xử lý sự kiệ n chuộ t hoà n toà n gio� ng như xử lý sự kiệ n ở mụ c 5.7.3. Sự kiệ n
chuộ t được quả n lý bởi lớp MouseEvent. Sự kiệ n chuộ t la� ng nghe (tham so� đa� u
tiê n trong phương thức addEventListener) có the� nhậ n mộ t trong cá c giá trị sau:
SỰ KIỆN CHUỘT LẮNG NGHE GIẢI THÍCH
CLICK : String = "click" Khi kı́ch đơn chuộ t trá i lê n đo� i tượng.

CONTEXT_MENU : String = Khi menu ngữ cả nh hiệ n ra (menu ngữ cả nh
"contextMenu" hiệ n ra sau khi ta kı́ch chuộ t phả i lê n đo� i
tượng).
DOUBLE_CLICK : String = Khi kı́ch đô i chuộ t trá i lê n đo� i tượng.
"doubleClick"

MIDDLE_CLICK : String = Khi kı́ch chuộ t giữa (con lă n) lê n đo� i tượng.
"middleClick"

MIDDLE_MOUSE_DOWN : String Khi chuộ t giữa (con lă n) được nha� n lê n đo� i
= "middleMouseDown" tượng.

MIDDLE_MOUSE_UP : String = Khi chuộ t giữa (con lă n) được thả ra khỏ i đo� i
"middleMouseUp" tượng.

MOUSE_DOWN : String = Khi chuộ t trá i được nha� n lê n đo� i tượng.
"mouseDown"

MOUSE_MOVE : String = Khi trỏ chuộ t di chuye� n trê n đo� i tượng.


"mouseMove"

MOUSE_OUT : String = Khi trỏ chuộ t di chuye� n ra khỏ i đo� i tượng.


"mouseOut"

MOUSE_OVER : String = Khi trỏ chuộ t đặ t trê n đo� i tượng.


"mouseOver"

MOUSE_UP : String = "mouseUp" Khi chuộ t trá i được thả ra khỏ i đo� i tượng.

MOUSE_WHEEL : String = Khi chuộ t giữa (con lă n) lă n trê n đo� i tượng.
"mouseWheel"

RIGHT_CLICK : String = Khi nha� p chuộ t phả i lê n đo� i tượng.

- 143 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

"rightClick"

RIGHT_MOUSE_DOWN : String = Khi chuộ t phả i nha� n lê n đo� i tượng.


"rightMouseDown"

RIGHT_MOUSE_UP : String = Khi chuộ t phả i được thả ra khỏ i đo� i tượng.
"rightMouseUp"

ROLL_OUT : String = "rollOut" Ne� u mouseEnabled = false thı̀ tương tự


MOUSE_OUT, ngược lạ i, ne� u true thı̀ nó sẽ
khá c chı̉ duy nha� t ở mộ t đie� m khi nó có đo� i
tượng con ở trong (ngă n việ c xả y ra sự kiệ n
củ a đo� i tượng con).
ROLL_OVER : String = "rollOver" Tương tự như trê n khi so sá nh với
MOUSE_OVER.
Cũ ng tương tự như Event, MouseEvent với cá c tham so� sự kiệ n chuộ t la� ng nghe ở
trê n được ho� trợ hoà n toà n với phiê n bả n AIR mới nha� t. Tù y theo cá c phiê n bả n
AVM khá c nhau mà mức ho� trợ cá c tham so� sự kiệ n chuộ t la� ng nghe khá c nhau.

5.7.5. Sự kiện bàn phím


Hoàn toàn tương tự sự kiện chuột, đe� nắm bắt được các sự kiện bà n phím ta sử
dụ ng lớp KeyboardEvent. Khi là m việ c với cá c sự kiệ n bà n phı́m, ta ca� n là m việ c
với cá c phı́m. Các phím nà y được quản lý bởi lớp Keyboard trong AS.
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;

stage.addEventListener(KeyboardEvent.KEY_UP, func);
function func(e:KeyboardEvent):void{
if(e.keyCode==Keyboard.ENTER)
trace("Hello ");
}

Trong vı́ dụ trê n, khi ta nha� n phı́m Enter thı̀ sẽ in ra dò ng thô ng bá o “Hello”. Sự
kiện của phím KeyboardEvent chỉ bao gồm KEY_UP (khi phı́m được nhả ra) và
KEY_DOWN (khi phı́m được a� n xuo� ng). Trong lớp KeyboardEvent có cá c thuộ c
tı́nh sau:
THUỘC TÍNH GIẢI THÍCH
altKey:Boolean Phı́m a� n là phı́m Alt
ctrlKey:Boolean Phı́m a� n là phı́m Ctrl

- 144 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

shiftKey:Boolean Phı́m a� n là phı́m Shift


commandKey:Boolean Phı́m a� n là cá c phı́m lệ nh
controlKey:Boolean Phı́m a� n là cá c phı́m đie� u khie� n
charCode:uint Kı́ tự được nha� n
keyCode:uint Mã củ a kı́ tự được nha� n
KeyLocation:uint Vị trı́ củ a phı́m được a� n (Shift trá i/phả i, Ctrl
trá i/phả i, Alt trá i/phả i) –
KeyLocation.LEFT/KeyLocation.RIGHT, phı́m
chua� n – KeyLocation.STANDARD, phı́m so� –
KeyLocation.NUM_PAD.
Lớp KeyBoard có cá c thuộ c tı́nh sau:
THUỘC TÍNH GIẢI THÍCH
capsLock:Boolean Bậ t che� độ CapsLock hay khô ng.
hasVirtualKeyboard:Boolean Có sử dụ ng bà n phı́m ả o hay không.
numLock:Boolean Có bậ t che� độ NumLock hay khô ng.
Ngoà i ra, trong lớp KeyBoard nà y có định nghı̃a mộ t so� ha� ng so� tương ứng với cá c
phı́m nha� n trê n bà n phı́m (cho cả hệ má y Windows, MacOS, Linux). Bả ng sau đâ y
liệ t kê cá c phı́m cù ng với mã hoặ c nộ i dung tương ứng.
A : uint = 65 M : uint = 77
ALTERNATE : uint = 18 MINUS : uint = 189
B : uint = 66 N : uint = 78
BACKQUOTE : uint = 192 NUMBER_0 : uint = 48
BACKSLASH : uint = 220 NUMBER_1 : uint = 49
BACKSPACE : uint = 8 NUMBER_2 : uint = 50
C : uint = 67 NUMBER_3 : uint = 51
CAPS_LOCK : uint = 20 NUMBER_4 : uint = 52
CharCodeStrings : Array NUMBER_5 : uint = 53
COMMA : uint = 188 NUMBER_6 : uint = 54
COMMAND : uint = 15 NUMBER_7 : uint = 55
CONTROL : uint = 17 NUMBER_8 : uint = 56
D : uint = 68 NUMBER_9 : uint = 57
DELETE : uint = 46 NUMPAD : uint = 21
DOWN : uint = 40 NUMPAD_0 : uint = 96
E : uint = 69 NUMPAD_1 : uint = 97
END : uint = 35 NUMPAD_2 : uint = 98
ENTER : uint = 13 NUMPAD_3 : uint = 99
EQUAL : uint = 187 NUMPAD_4 : uint = 100
ESCAPE : uint = 27 NUMPAD_5 : uint = 101
F : uint = 70 NUMPAD_6 : uint = 102
F1 : uint = 112 NUMPAD_7 : uint = 103

- 145 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

F10 : uint = 121 NUMPAD_8 : uint = 104


F11 : uint = 122 NUMPAD_9 : uint = 105
F12 : uint = 123 NUMPAD_ADD : uint = 107
F13 : uint = 124 NUMPAD_DECIMAL : uint = 110
F14 : uint = 125 NUMPAD_DIVIDE : uint = 111
F15 : uint = 126 NUMPAD_ENTER : uint = 108
F2 : uint = 113 NUMPAD_MULTIPLY : uint = 106
F3 : uint = 114 NUMPAD_SUBTRACT : uint = 109
F4 : uint = 115 O : uint = 79
F5 : uint = 116 P : uint = 80
F6 : uint = 117 PAGE_DOWN : uint = 34
F7 : uint = 118 PAGE_UP : uint = 33
F8 : uint = 119 PERIOD : uint = 190
F9 : uint = 120 Q : uint = 81
G : uint = 71 QUOTE : uint = 222
H : uint = 72 R : uint = 82
HOME : uint = 36 RIGHT : uint = 39
I : uint = 73 RIGHTBRACKET : uint = 221
INSERT : uint = 45 S : uint = 83
J : uint = 74 SEMICOLON : uint = 186
K : uint = 75 SHIFT : uint = 16
KEYNAME_BEGIN : String = "Begin" SLASH : uint = 191
KEYNAME_BREAK : String = "Break" SPACE : uint = 32
KEYNAME_CLEARDISPLAY : String = STRING_BEGIN : String = "$"
"ClrDsp" STRING_BREAK : String = "$"
KEYNAME_CLEARLINE : String = "ClrLn" STRING_CLEARDISPLAY : String = "$"
KEYNAME_DELETE : String = "Delete" STRING_CLEARLINE : String = "$"
KEYNAME_DELETECHAR : String = STRING_DELETE : String = "$"
"DelChr" STRING_DELETECHAR : String = "$"
KEYNAME_DELETELINE : String = STRING_DELETELINE : String = "$"
"DelLn" STRING_DOWNARROW : String = "$"
KEYNAME_DOWNARROW : String = STRING_END : String = "$"
"Down" STRING_EXECUTE : String = "$"
KEYNAME_END : String = "End" STRING_F1 : String = "$"
KEYNAME_EXECUTE : String = "Exec" STRING_F10 : String = "$"
KEYNAME_F1 : String = "F1" STRING_F11 : String = "$"
KEYNAME_F10 : String = "F10" STRING_F12 : String = "$"
KEYNAME_F11 : String = "F11" STRING_F13 : String = "$"
KEYNAME_F12 : String = "F12" STRING_F14 : String = "$"
KEYNAME_F13 : String = "F13" STRING_F15 : String = "$"
KEYNAME_F14 : String = "F14" STRING_F16 : String = "$"
KEYNAME_F15 : String = "F15" STRING_F17 : String = "$"
KEYNAME_F16 : String = "F16" STRING_F18 : String = "$"

- 146 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

KEYNAME_F17 : String = "F17" STRING_F19 : String = "$"


KEYNAME_F18 : String = "F18" STRING_F2 : String = "$"
KEYNAME_F19 : String = "F19" STRING_F20 : String = "$"
KEYNAME_F2 : String = "F2" STRING_F21 : String = "$"
KEYNAME_F20 : String = "F20" STRING_F22 : String = "$"
KEYNAME_F21 : String = "F21" STRING_F23 : String = "$"
KEYNAME_F22 : String = "F22" STRING_F24 : String = "$"
KEYNAME_F23 : String = "F23" STRING_F25 : String = "$"
KEYNAME_F24 : String = "F24" STRING_F26 : String = "$"
KEYNAME_F25 : String = "F25" STRING_F27 : String = "$"
KEYNAME_F26 : String = "F26" STRING_F28 : String = "$"
KEYNAME_F27 : String = "F27" STRING_F29 : String = "$"
KEYNAME_F28 : String = "F28" STRING_F3 : String = "$"
KEYNAME_F29 : String = "F29" STRING_F30 : String = "$"
KEYNAME_F3 : String = "F3" STRING_F31 : String = "$"
KEYNAME_F30 : String = "F30" STRING_F32 : String = "$"
KEYNAME_F31 : String = "F31" STRING_F33 : String = "$"
KEYNAME_F32 : String = "F32" STRING_F34 : String = "$"
KEYNAME_F33 : String = "F33" STRING_F35 : String = "$"
KEYNAME_F34 : String = "F34" STRING_F4 : String = "$"
KEYNAME_F35 : String = "F35" STRING_F5 : String = "$"
KEYNAME_F4 : String = "F4" STRING_F6 : String = "$"
KEYNAME_F5 : String = "F5" STRING_F7 : String = "$"
KEYNAME_F6 : String = "F6" STRING_F8 : String = "$"
KEYNAME_F7 : String = "F7" STRING_F9 : String = "$"
KEYNAME_F8 : String = "F8" STRING_FIND : String = "$"
KEYNAME_F9 : String = "F9" STRING_HELP : String = "$"
KEYNAME_FIND : String = "Find" STRING_HOME : String = "$"
KEYNAME_HELP : String = "Help" STRING_INSERT : String = "$"
KEYNAME_HOME : String = "Home" STRING_INSERTCHAR : String = "$"
KEYNAME_INSERT : String = "Insert" STRING_INSERTLINE : String = "$"
KEYNAME_INSERTCHAR : String = STRING_LEFTARROW : String = "$"
"InsChr" STRING_MENU : String = "$"
KEYNAME_INSERTLINE : String = STRING_MODESWITCH : String = "$"
"InsLn" STRING_NEXT : String = "$"
KEYNAME_LEFTARROW : String = "Left" STRING_PAGEDOWN : String = "$"
KEYNAME_MENU : String = "Menu" STRING_PAGEUP : String = "$"
KEYNAME_MODESWITCH : String = STRING_PAUSE : String = "$"
"ModeSw" STRING_PREV : String = "$"
KEYNAME_NEXT : String = "Next" STRING_PRINT : String = "$"
KEYNAME_PAGEDOWN : String = "PgDn" STRING_PRINTSCREEN : String = "$"
KEYNAME_PAGEUP : String = "PgUp" STRING_REDO : String = "$"
KEYNAME_PAUSE : String = "Pause" STRING_RESET : String = "$"

- 147 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

KEYNAME_PREV : String = "Prev" STRING_RIGHTARROW : String = "$"


KEYNAME_PRINT : String = "Print" STRING_SCROLLLOCK : String = "$"
KEYNAME_PRINTSCREEN : String = STRING_SELECT : String = "$"
"PrntScrn" STRING_STOP : String = "$"
KEYNAME_REDO : String = "Redo" STRING_SYSREQ : String = "$"
KEYNAME_RESET : String = "Reset" STRING_SYSTEM : String = "$"
KEYNAME_RIGHTARROW : String = STRING_UNDO : String = "$"
"Right" STRING_UPARROW : String = "$"
KEYNAME_SCROLLLOCK : String = STRING_USER : String = "$"
"ScrlLck" T : uint = 84
KEYNAME_SELECT : String = "Select" TAB : uint = 9
KEYNAME_STOP : String = "Stop" U : uint = 85
KEYNAME_SYSREQ : String = "SysReq" UP : uint = 38
KEYNAME_SYSTEM : String = "Sys" V : uint = 86
KEYNAME_UNDO : String = "Undo" W : uint = 87
KEYNAME_UPARROW : String = "Up" X : uint = 88
KEYNAME_USER : String = "User" Y : uint = 89
LEFT : uint = 37 Z : uint = 90
LEFTBRACKET : uint = 219
Trong đó , "$" bie� u die� n cho giá trị dưới dạ ng xâ u củ a kı́ tự khô ng the� bie� u die� n
tường minh (đa so� chú ng là cá c kı́ tự trê n ne� n MacOS).

5.7.6. Làm việc với Timer


Timer là mộ t lớp đo� i tượng dù ng đe� quả n lý cá c sự việ c die� n tie� n theo thời gian.
Timer được to� chức trong package flash.utils. Timer có nhie� u né t tương đo� ng với
sự kiệ n la� ng nghe ENTER_FRAME. Ta có the� dù ng nó đe� tạ o chuye� n độ ng cho đo� i
tượng. Tuy nhiê n, Timer có ưu đie� m hơn ENTER_FRAME ở đie� m nó có the� được
đie� u khie� n (ba� t đa� u, dừng, quả n lý theo việ c nga� t).
Trong ActionScript 3, đe� tạ o mộ t đo� i tượng the� hiệ n củ a lớp Timer, ta sử dụ ng
hà m tạ o sau:
var myTimer:Timer = new Timer(delay:Number, repeatCount:int = 0);
Trong đó :
- Tham so� delay: độ tre� cậ p nhậ p củ a Timer (sau bao nhiê u mili giâ y thı̀ nó sẽ cậ p
nhậ t lạ i hà nh độ ng).
- Tham so� repeatCount: hà nh độ ng sẽ lặ p lạ i bao nhiê u la� n. Theo mặ c định là 0 –
tức lặ p vô hạ n.
Đe� đưa mộ t hà nh độ ng ca� n thực thi và o Timer, ta ca� n thực hiệ n theo hai bước
sau:
 Bước 1. Bo� sung bộ la� ng nghe sự kiệ n cho Timer.
myTimer.addEventListener(TimerEvent.TIMER, update);

- 148 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

function update(e:TimerEvent):void
{

}
Sự kiệ n la� ng nghe củ a Timer trong trường hợp nà y là TIMER. Hà nh độ ng sẽ cậ p
nhậ t tương ứng với hà m update.
 Bước 2.Triệ u gọ i phương thức start củ a đo� i tượng myTimer: myTimer.start().
Khi ca� n cha� m dứt hà nh độ ng củ a Timer, ta triệ u gọ i phương thức stop:
myTimer.stop().
Sau đâ y, ta sẽ tham khả o vı́ dụ minh họ a cho việ c sử dụ ng Timer đe� cậ p nhậ t thời
gian. Trong trường hợp nà y, ta có 2 nú t lệ nh: nú t Start đe� cho đo� ng ho� chạ y, nú t
Stop đe� dừng lạ i. Thời gian sẽ được cậ p nhậ t lê n đo� i tượng Label. Đo� i với cá c nú t
lệ nh, ta sử dụ ng Button. Cá c đo� i tượng nà y na� m trong vù ng quả n lý Component
(phı́m ta� t Ctrl+F7). Cá c đo� i tượng nà y được bo� trı́ trê n stage như hı̀nh minh họ a
bê n dưới:

Ơ� mụ c Instace Name (trong cửa so� Properties) củ a cá c đo� i tượng Label, Button
Start và Stop ta la� n lượt đặ t tê n cho chú ng là : lbDongHo, btStart, btStop. La� n lượt
chọ n cá c đo� i tượng btStart và btStop, chọ n cửa so� Code Snippets, chọ n nhó m
Event Handlers và kı́ch hoạ t chức nă ng Mouse Click Event. Trong chức nă ng củ a
btStart, ta nhậ p lệ nh myTimer.start() và trong chức nă ng củ a btStop, ta nhậ p lệ nh
myTimer.stop(). Đe� la� y thời gian, ta sử dụ ng lớp Date cù ng với cá c phương thức
getHours – la� y giờ, getMinutes – la� y phú t, getSeconds – la� y giâ y. Toà n bộ mã
nguo� n củ a vı́ dụ được cho ở bê n dưới:
import flash.utils.Timer;
import flash.events.TimerEvent;

var myTimer:Timer = new Timer(100);


myTimer.addEventListener(TimerEvent.TIMER, update);

- 149 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

function update(e:TimerEvent):void
{
var t:Date = new Date();
lbDongHo.text = t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds();
}

btStart.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);

function fl_MouseClickHandler(event:MouseEvent):void
{
myTimer.start();
}

btStop.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2);

function fl_MouseClickHandler_2(event:MouseEvent):void
{
myTimer.stop();
}
Ca� n lưu ý , trong hà m khởi tạ o củ a Timer, ta sử dụ ng mộ t tham so� . Đie� u nà y có
nghı̃a là tham so� thứ hai được hie� u nga� m định – tức là 0.

5.7.7. Làm việc với các thành phần hỗ trợ giao diện người dùng GUI
Ke� từ khi Adobe phá t trie� n Flash theo hướng xâ y dựng ứng dụ ng (Desktop và
Web) và khô ng cò n đơn thua� n chı̉ phụ c vụ cho cô ng nghệ multimedia thı̀ họ đã
bo� sung cá c thư việ n ho� trợ giao diệ n người dù ng. Cá c thà nh pha� n nà y chủ ye� u
phụ c vụ cho cá c ứng dụ ng chạ y trê n AIR và RIA cho web. Cá c đo� i tượng cù ng với
cá c thuộ c tı́nh và phương thức củ a chú ng có the� tham khả o thê m trong mụ c trợ
giú p củ a Adobe. Trong trı̀nh soạ n thả o ActionScript, ta có the� tham khả o cá c
phương thức và thuộ c tı́nh củ a cá c lớp đo� i tượng ho� trợ GUI. Tuy nhiê n, sẽ khô ng
có thê m ba� t trı̀ ho� trợ giả i thı́ch nà o. Cá c thà nh pha� n nà y chủ ye� u na� m trong
package fl.controls. Trong phạ m vi giá o trı̀nh phụ c vụ cho cô ng nghệ giả i trı́ đa
phương tiệ n, chú ng tô i khô ng thả o luậ n chi tie� t ve� cá c thà nh pha� n nà y. Ne� u bạ n
muo� n tı̀m hie� u kı̃ hơn, bạ n có the� tham khả o thê m trong pha� n ho� trợ từ Adobe.
Hı̀nh minh họ a bê n dưới chı̉ ra cá c lớp đo� i tượng na� m trong package fl.controls
phụ c vụ cho việ c thie� t ke� giao diệ n người dù ng cho ứng dụ ng Desktop và Web
theo phong cá ch co� đie� n.

- 150 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Trong package nà y go� m có cá c lớp đo� i tượng


quan trọ ng sau:
- Lớp Button: tạ o cá c nú t nha� n.
- Lớp CheckBox: tạ o đo� i tượng cho phé p chọ n (có
the� chọ n nhie� u đo� i tượng CheckBox ne� u chú ng
na� m trong cù ng mộ t nhó m).
- Lớp RadioButton: tạ o đo� i tượng cho phé p chọ n
(chı̉ được chọ n mộ t đo� i tượng RadioButton duy
nha� t ne� u chú ng na� m trong cù ng mộ t nhó m).
- Lớp ColorPicker: hộ p thoạ i đe� chọ n mà u.
- Lớp ComboBox: tạ o mộ t danh sá ch thả xuo� ng.
- Lớp DataGrid: tạ o mộ t bả ng đe� chứa dữ liệ u
được to� chức theo bả ng.
- Lớp Label: tạ o mộ t nhã n.
- Lớp List: tạ o mộ t danh sá ch.
- Lớp NumericStepper: tạ o mộ t đo� i tượng đe�
chọ n giá trị so� . Cá c giá trị thay đo� i ba� ng cá ch
nhậ p trực tie� p và o hoặ c nha� n và o cá c nú t lê n –
xuo� ng.
- Lớp ProgressBar: tạ o thanh bie� u die� n cho tie� n
độ thực hiệ n cô ng việ c.
- Lớp RadioButtonGroup: tạ o mộ t danh sá ch
RadioButton.
Hình 103 – Cá c đo� i tượng ho� trợ GUI trong ActionScript 3.
- Lớp ScrollBar: tạ o thanh cuộ n.
- Lớp Slider: tạ o đo� i tượng đe� chọ n giá trị so� ba� ng cá ch ké o nú t đá nh da� u đe� n cá c
vị trı́ trê n thanh trượt.
- Lớp TextArea: tạ o mộ t đo� i tượng nhậ p và hie� n thị vă n bả n trê n nhie� u dò ng.
- Lớp TextInput: tạ o đo� i tượng nhậ p vă n bả n trê n mộ t dò ng.
- Lớp TitleList: tạ o đo� i tượng hie� n thị dạ ng Windows Explorer.
Đe� xem chi tie� t ve� cá c phương thức, thuộ c tı́nh và sự kiệ n ho� trợ, hã y bậ t cá c chức
nă ng ở cá c lớp tương ứng.

5.8. Đưa một đối tượng vào ActionScript


Flash cho phép bạn tạo một đối tượng bằng các công cụ vẽ. Đưa các đối tượng này
và các đối tượng được cung cấp sẵn (như các thành phần GUI đe� cậ p ở trê n) vào
AS. Đe� đưa mộ t đo� i tượng ngoà i và o trong mô i trường runtime củ a Flash, bạn cần

- 151 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

chuyển đổi các đối tượng của bạn thành các biểu tượng MovieClip hoặc Button.
Đối tượng Graphic không được hỗ trợ bởi actionscript.
Sau đó, bạn hãy kích chọn đối tượng. Trong bảng thuộc tính, bạn hãy nhập tên
của đối tượng thể hiện cần tạo ra vào mục <Instance Name>, sau đó nhấp Enter.
Giờ đây, đối tượng của bạn đã được khởi tạo và bạn có thể thao tác với nó bên
trong AS theo tên thể hiện mà bạn vừa cài đặt.

Hình 104 – Tạo một tên thể hiện cho đối tượng
Nếu bạn import một đối tượng từ bên ngoài vào trong thư viện Library, bạn cũng
có thể tạo một lớp chứa nó (tức là lớp để tạo ra đối tượng này).
Chúng ta sẽ xây dựng đoạn chương trình sau đây: Import một file âm thanh vào
trong Library. Khi bấm chuột vào nút Play thì nó sẽ chơi file âm thanh này.
- Trong Stage, bạn hãy tạo một nút Play (là biểu tượng Button) và cài đặt tên thể
hiện cho nó là btPlay.
- Thực hiện import file âm thanh vào trong thư viện. Trong cửa sổ thư viện
Library, bấm chọn file âm thanh, kích chuột phải và chọn Properties.

Hình 105 – Thao tác với thuộc tính Properties của đối tượng trong thư viện

- 152 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

- Khi đó, sẽ xuất hiện hộp thoại Properties như sau:

Hình 106 – Hộp thoai Properties của đối tượng file âm thanh
Bạn cần đánh dấu tích vào Export for ActionScript. Trong Class, bạn nhập vào tên
lớp sẽ được xây dựng cho đối tượng âm thanh này (ví dụ là myMusic). Ngay bên
dưới là Base Class của nó – tức lớp cơ sở mà nó thừa kế. Sau đó nhấp Ok.
Kết thúc các thao tác trên, bạn đã nhận được một đối tượng btPlay và một lớp
myMusic. Tiếp theo, bạn sẽ bắt tay vào viết mã lệnh cho chương trình.
- Nhấn F9 để mở khung soạn thảo ActionScript. Bạn hãy bổ sung sự kiện kích
chuột cho đối tượng btPlay như sau
import flash.events.MouseEvent;
btPlay.addEventListener(MouseEvent.CLICK, func);
var Player:flash.media.Sound = new myMusic();
function func(e:MouseEvent):void{
Player.play();
}

Đối tượng Player là một sự thể hiện của lớp myMusic. Khi bấm chuột vào nút
btPlay, hàm func sẽ được gọi đến. Kết quả là phương thức play của đối tượng
Player được thực thi. Ne� u muo� n bo� sung thê m phương thức, thuộ c tı́nh cho lớp
myMusic, ta chı̉ việ c thê m mã lệ nh và o trong lớp myMusic thu được ở trê n. Bạ n
cũ ng ca� n lưu ý ra� ng, trong trường hợp nà y, lớp myMusic ke� thừa lớp
flash.media.Sound nê n nó có phương thức play đe� chơi nhạ c.

- 153 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

5.9. Làm việc với XML


a. Đối tượng XML
Để làm việc với xml, ta sử dụng đối tượng XML. Đối tượng này có hàm khởi tạo
như sau:
var xml:XML = new XML(
<books>
<book>Toán</book>
<book>Lý</book>
</books>
);
trace(xml.children()[0]);

Trong ví dụ này, ta có một cấu trúc xml đơn giản. Phương thức children sẽ trả về
một mảng các đối tượng con của books tức là mảng các book. Ta có thể truy cập
chúng theo chỉ số - chỉ số được đánh số từ 0.
Ta có thể trải nghiệm với một cấu trúc xml theo định dạng khác được sử dụng
rộng rãi hiện nay.
var xml:XML = new XML(
<books>
<book name=”Toán” description=”Lớp 12”>book1</book>
<book name=”Lý” description=”Lớp 11”>book2</book>
</books>
);
trace(xml.children()[0]. attribute(“name”));

b. Đọc file xml bằng URLLoader


Trong trường hợp trên, ta làm việc với một cấu trúc xml bên trong AS. Để đọc
một file xml từ bên ngoài, bạn phải sử dụng một đối tượng URLLoader. Bạn hãy
quan sát mã nguồn sau:
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
var xmlloader:URLLoader = new URLLoader();
var xml;
xmlloader.load(new URLRequest("book.xml"));
xmlloader.addEventListener(Event.COMPLETE, success);
function success(e:Event):void{

- 154 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

xml = new XML(e.target.data);


trace(xml.children()[0].attribute("name"));
}

Đối tượng URLLoader được khởi tạo nhờ vào phương thức load từ một
URLRequest. Đối tượng URLRequest này khởi tạo nhờ hàm tạo từ một file xml chỉ
định. Chúng ta chỉ có thể thao tác với file xml khi nó được tải xong nhờ vào sự
kiện Event.COMPLETE. Dữ liệu từ file xml đọc được sẽ lưu vào target.data của
Event đó.

5.10. Vùng chức năng Code Snippets


Chúng ta sẽ tìm hiểu chi tiết về các nhóm chức năng được tổ chức trong vùng
Code Snippets này. Nhưng trước tiên, chúng ta sẽ tìm hiểu về chúng thông qua
các ví dụ minh họa.
Tạo chiếc đồng hồ treo tường
Trong ví dụ này, chúng ta sẽ tìm hiểu cách tạo một chiếc đồng hồ treo tường. Bạn
hãy sử dụng các công cụ vẽ để tạo cho mình một chiếc đồng hồ theo ý thích của
bạn. Nhưng bạn cần lưu ý một vài điểm sau đây:

- Các kim quay phải nằm trên các Layer riêng biệt. Chúng phải là các MovieClip.
Tâm xoay của các kim quay này phải nằm ở một đầu của nó.
- Các phần còn lại của đồng hồ, tùy thuộc vào mục đích của bạn, bạn có thể tạo
trên các Layer khác nhau, hoặc trên cùng một Layer.

Trong chiếc đồ hồ mà tôi tạo, tôi sử dụng các Layer sau đây:

- Layer Oclock: chức phần khung của chiếc đồng hồ, bề mặt đồng hồ.
- Layer Node: chứa các mốc thời gian (4 mốc thời gian).
- Layer Hours (chứa kim giờ), Layer Minutes (chứa kim phút), Layer Seconds
(chứa kim giây).
- Layer Center: nút gốc của các kim quay.
- Bạn lưu ý đến trật tự của các Layer. Layer Node ở trên Layer Oclock, Layer các
kim quay ở trên Layer Node, Layer center trên Layer các kim quay để che đi
phần gốc quay của các kim quay.

- 155 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Hình 107 – Tạo đồng hồ kim quay bang chức năng Code Snippets
Chắc bạn sẽ thắc mắc Layer Action trong trường hợp này dùng để làm gì. Chúng
ta sẽ biết ngay sau đây.
Đối với các kim quay, bạn cần cài đặt tên thể hiện cho nó. Ví dụ tôi đặt tên cho các
đối tượng kim quay như sau: kim giờ là hourobj, kim phút là minobj, kim giây là
secobj.

Hình 108 – Cài đặt tên thể hiện cho các MovieClip kim quay
Tiếp theo, bạn hãy chọn một đối tượng kim quay, bấm vào khung Code Snippets
(hoặc Windows > Code Snippets). Trong cửa sổ này, bạn chọn nhóm Animation >
Rotate Continuously.

- 156 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Hình 109 – Vùng Code Snippets: Rotate Continuously

Khi đó, Flash sẽ chèn tự động một Action Frame vào trong TimeLine và khởi tạo
nội dung Action cho bạn như sau.
minobj.addEventListener(Event.ENTER_FRAME, fl_RotateContinuously);
function fl_RotateContinuously(event:Event)
{

//Soạn thảo mã chương trình ở đây

minobj.rotation += 10;
}

Bây giờ bạn hãy thay đoạn mã trong hàm fl_RotateContinuously bằng đoạn mã
sau
var dd:Date = new Date();
hourobj.rotation = ((dd.getHours()>=12)?(dd.getHours()):(dd.getHours()-
12))*30;
minobj.rotation = dd.getMinutes()*6;
secobj.rotation = dd.getSeconds()*6;

Trước khi thay thế hai đoạn mã này, bạn nên kiểm tra xem chiếc đồng hồ của bạn
hoạt động như thế nào đã nhé. Rõ rang nó chỉ xoay duy nhất chiếc kim phút mà
thôi. Bạn cũng lưu ý rằng hiệu ứng này của Code Snippets là hiệu ứng quay liên
tục (Rotate Continuously), do đó, bạn không cần tương tác với đối tượng Timer.
Giải thích: Để cho chiếc đồng hồ hoạt động đúng, ta cần bổ sung sự kiện thời gian
cho nó. Biến dd thuộc kiểu Date. Ta sử dụng hàm khởi tạo Date() để khởi tạo giá

- 157 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

trị cho biến dd. Đối tượng thuộc kiểu Date có nhiều hàm tạo khác nhau, nhưng ở
đây ta sử dụng hàm tạo không đối số. Với hàm tạo này, đối tượng dd sẽ nhận giá
trị là thời gian hiện tại. Ta sẽ sử dụng các phương thức getHours, getMinutes,
getSeconds để lấy giờ, phút, giây tương ứng. Ở đây, Flash sử dụng biến cố
Event.ENTER_FRAME. Với biến cố này, hành động sẽ liên tục được cập nhập trên
từng frame. Bạn lưu ý rằng mặc định, số Frame trên một giây là 24fps. Do đó, bạn
hoàn toàn yên tâm rằng thời gian trên đồng hồ của bạn sẽ được cập nhật đến
từng 1/24 giây.
Tiếp theo, chúng ta sẽ thảo luận về các công thức tính góc quay. Chúng ta biết
rằng khi kim phút và kim giây quay đúng một vòng là 60 phút hoặc 60 giây. Nó
tương ứng với số đo là 3600. Như vậy, tương ứng với 1 phút hoặc 1 giây sẽ có số
đo là 60. Nếu có số phút và số giây hiện tại, ta chỉ việc nhân với 6 là nhận được kết
quả của góc đo tương ứng với phút và giây hiện tại.
Với giờ thì kết quả sẽ khác. Một vòng quay 3600 chỉ tương ứng với 12 giờ, do đó,
mỗi giờ chiếm đến một góc là 300. Nên góc quay của kim giờ sẽ là số giờ nhân với
30. Một điều lưu ý nữa, nếu thời gian hệ thống được định dạng 24h thì sẽ có một
vài sai sót xảy ra. Do đó, để đảm bảo chiếc đồng hồ hoạt động tốt, bạn nên kiểm
tra điều kiện: nếu số giờ vượt ngưỡng 12, thì số giờ sẽ là số giờ trừ đi 12, ngược
lại thì giữ nguyên kết quả đó. Đây chính là giá trị của toán tử điều kiện mà ta sử
dụng.
Đến đây, bạn sẽ thắc mắc là tại sao addEventListener lại chỉ áp dụng cho kim
phút. Câu trả lời không phải như vậy. Bạn có thể áp dụng cho một đối tượng bất
kì. Bạn có thể hiệu chỉnh ba đối tượng trên các Action Frame khác nhau. Nhưng
cách thực thi như thế chỉ làm cho bạn tốn thời gian, và việc quản lý nhiều Frame
sẽ làm cho bạn cảm thấy rối. Bạn hoàn toàn có thể làm thế nếu bạn muốn. Nhưng
bạn cần lưu ý đến một phương châm khi lập trình đó là – Càng đơn giản, nhỏ gọn
nhưng vẫn đảm bảo đầy đủ các nội dung thì càng tốt.
Tạo Menu điều khiển các cảnh quay trong Game
Trong ví dụ này, chúng ta sẽ thảo luận cách tạo một Menu để điều khiển Game.
Bạn hãy tạo 4 cảnh quay Scene và đặt tên cho chúng lần lượt là: Menu, Result,
Play và Help. Các Scene này được sắp xếp theo thứ tự như sau

- 158 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Hình 110 – Thứ tự của các Scene


Bạn có thể trang trí cho các Scene này tùy ý. Trên Scene Menu chứa ba MenuItem
là Result, Play và Help như hình bên dưới. Khi bạn nhấn vào Play, chương trình sẽ
chuyển sang Scene Play để chơi game. Khi bạn nhấn vào Result, chương trình sẽ
chuyển đến Scene Result để xem kết quả. Khi bạn nhấn vào Help, chương trình sẽ
chuyển đến Scene Help để xem hướng dẫn chơi game. Bạn cũng lưu ý trên mỗi
Scene Result, Play và Help có Menu Back để trở lại Menu chính.

Hình 111 – Scene Menu


Trong các Scene còn lại, chưa nội dung liên quan và menu Back để quay trở lại
Scene Menu này.
Bây giờ, chúng ta sẽ sử dụng chức năng Code Snippets để tạo các hiệu ứng mà
chúng ta đã thảo luận ở trên.
Trước tiên, ta sẽ tạo hiệu ứng Button cho các MenuItem này. Bạn hãy lần lượt
chọn Play, sau đó vào Commands > Make Button. Lặp lại điều này cho Help và
Result. Ở các Scene Play, Help, Result bạn bổ sung vào dòng lệnh
stop();
vào vị trí cuối cùng của mã lệnh (ở đây dòng lệnh này là duy nhất – vì tôi không
xây dựng một chương trình hoàn chỉnh).
Tiếp theo, bạn hãy nhấp vào nút Play trên Scene Menu, bấm chọn chức năng Code
Snippets. Bạn chọn nhóm TimeLine and Navigation. Tiếp đến, bạn chọn chức
năng Click to Go to Scene and Play. Khi đó, Flash sẽ sinh đoạn mã sau
btPlay.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene);
function fl_ClickToGoToScene(event:MouseEvent):void
{
MovieClip(this.root).gotoAndPlay(1, "Play");

- 159 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Bạn cần thay đổi tên của Scene cho phù hợp với Scene sẽ chuyển đến trong dòng
lệnh
MovieClip(this.root).gotoAndPlay(1, "đổi tên Scene");
Bạn hãy thực hiện thao tác này cho những chức năng còn lại. Cuối cùng, bạn nhấn
tổ hợp Ctrl+Enter để kiểm tra kết quả.
Nếu bạn muốn xây dựng một dự án game hoàn chỉnh, bạn hãy lập trình game của
bạn vào trong Scene Play.

Bảng chức năng trong vùng Code Snippets.


Nhóm Chức năng Code Giải thích
movieClip_1.addEventListener( Cho phép mở một liên
MouseEvent.CLICK, kết khi nhấp chuột vào
fl_ClickToGoToWebPage); đối tượng.
function
 movieClip_1: là đối
fl_ClickToGoToWebPage(event:
tượng khi ta nhấp
MouseEvent):void
chuột lên nó.
{
 navigateToURL:
Click to go navigateToURL(new
phương thức mở liên
to Web URLRequest("http://www.ado
kết. Nó gồm hai tham
page be.com"), "_blank");
số - URLRequest
}
(được khởi tạo từ
một tham số String)
Actions

và tham số String quy


định cách mở liên kết
(_blank, _parent,
_selft, _top).

//Đoạn mã 1 Đoạn mã 1: thay đổi


stage.addChild(movieClip_1); hình dáng của trỏ chuột
movieClip_1.mouseEnabled = sang hình dạng như của
Custom false; đối tượng moveClip_1.
Mouse movieClip_1.addEventListener(
Cursor  Thuộc tính
Event.ENTER_FRAME,
mouseEnabled =
fl_CustomMouseCursor);
false: không cho phép
kích hoạt chuột trên

- 160 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

function đối tượng


fl_CustomMouseCursor(event: moveClip_1.
Event)  Thuộc tính x, y của
{ movieClip_1: hoành
movieClip_1.x = độ x và tung độ y của
stage.mouseX; đối tượng
movieClip_1.y = movieClip_1.
stage.mouseY;  stage.mouseX,
} stage.mouseY:
Mouse.hide(); phương thức của đối
tượng stage (khung
trình diễn) để xác
định vị trí của trỏ
chuột trên khung
//Đoạn mã 2 trình chiếu này.
movieClip_1.removeEventListe  Mouse.hide: phương
ner(Event.ENTER_FRAME, thức hide của đối
fl_CustomMouseCursor); tượng Mouse cho
stage.removeChild(movieClip_ phép ẩn đi hình dạng
1); của trỏ chuột.
Mouse.show();
Đoạn mã 2: thay đổi
hình dáng của trỏ chuột
sang dạng mặc định ban
đầu.

 removeEventListener
: hủy sự kiện chuột
đối với đối tượng
movieClip_1.
 removeChild: xóa đối
tượng trên khung
trình chiếu stage.
 Mouse.show: phương
thức show của đối
tượng Mouse cho
phép hiện hình dạng

- 161 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

của trỏ chuột theo


mặc định.

movieClip_1.addEventListener( Thực hiện thao tác kéo


MouseEvent.MOUSE_DOWN, thả một đối tượng. Đối
fl_ClickToDrag); tượng được kéo thả là
function movieClip_1. Để thực
fl_ClickToDrag(event:MouseEv hiện thao tác kéo đối
ent):void tượng, ta kết hợp với sự
{ kiện MOUSE_DOWN lên
movieClip_1.startDrag(); đối tượng đó và triệu gọi
Drag & } phương thức startDrag
Drop stage.addEventListener(Mouse của nó. Ngược lại, để
Event.MOUSE_UP, dừng việc kéo đối tượng
fl_ReleaseToDrop); (thả đối tượng) ta kết
function hợp sự kiện MOUSE_UP
fl_ReleaseToDrop(event:Mouse của đối tượng đó và triệu
Event):void gọi phương thức
{ stopDrag.
movieClip_1.stopDrag();
}
Bắt đầu trình diễn
Play a MC movieClip_1.play();
movieClip_1.
Dừng việc trình diễn
Stop a MC movieClip_1.stop();
movieClip_1.
movieClip_1.addEventListener( Khi nhấp chuột vào đối
MouseEvent.CLICK, tượng movieClip_1 thì
fl_ClickToHide); đối tượng movieClip_2
sẽ ẩn đi. Thuộc tính
function visible quy định việc
Click to hide
fl_ClickToHide(event:MouseEv ẩn/hiện của một đối
an Object
ent):void tượng. Nếu muốn đối
{ tượng movieClip_2 hiện
movieClip_2.visible = trở lại, ta thay đổi giá trị
false; của movieClip_1.visible =
} true.
Show an movieClip_1.visible = true; Hiện đối tượng
Object movieClip_1.

- 162 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

movieClip_1.addEventListener( Thay đổi vị trí của đối


MouseEvent.CLICK, tượng movieClip_2 khi
fl_ClickToPosition); nhấp chuột vào đối
function tượng movieClip_1.
Click to
fl_ClickToPosition(event:Mous Thuộc tính x và y đã giải
Position an
eEvent):void thích ở trên.
Object
{
movieClip_2.x = 200;
movieClip_2.y = 100;
}
movieClip_1.addEventListener( Hiển thị đoạn văn bản tại
MouseEvent.CLICK, một vị trí chỉ định khi ta
fl_ClickToPosition); nhấp chuột vào một đối
var fl_TF:TextField; tượng.
var fl_TextToDisplay:String =
 movieClip_1: đối mà
"Lorem ipsum dolor sit amet."
ta nhấp chuột lên nó.
function
 fl_TF: là đối tượng
fl_ClickToPosition(event:Mous
TextField. TextField
eEvent):void
trong trường hợp này
Click to {
sử dụng các thuộc
Display a fl_TF = new TextField();
tính – autoSize,
TextField fl_TF.autoSize =
background, border,
TextFieldAutoSize.LEFT;
x, y, text. Bạn có thể
fl_TF.background = true;
tham khảo thêm các
fl_TF.border = true;
thuộc tính của
fl_TF.x = 200;
TextField trong lớp
fl_TF.y = 100;
flash.text.TextField.
fl_TF.text =
fl_TextToDisplay;
addChild(fl_TF);
}
function Khởi tạo một số ngẫu
fl_GenerateRandomNumber(li nhiên. Để tạo số ngẫu
Generate a mit:Number):Number nhiên, ta sử dụng lớp
Random { Math.
Number var
 Phương thức
randomNumber:Number =
random: khởi tạo số

- 163 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Math.floor(Math.random()*(li ngẫu nhiên.


mit+1));  Phương thức floor để
return randomNumber; lấy sàn của một số
} thực. Bởi phương
trace(fl_GenerateRandomNum thức random khởi tạo
ber(100)); một sô thực.

for (var fl_ChildIndex:int = 0; Chuyển đối tượng được


fl_ChildIndex < chọn lên trên các đối
this.numChildren; tượng khác. Các đối
fl_ChildIndex++) tượng này cần được
{ chuyển đổi thành
this.getChildAt(fl_ChildI movieClip hoặc Button.
ndex).addEventListener(Mouse
Bring
Event.CLICK,
Object to
fl_ClickToBringToFront);
the Front
function
fl_ClickToBringToFront(event:
MouseEvent):void
{
this.addChild(event.curr
entTarget as DisplayObject);
}
var fl_TimerInstance:Timer = Tạo bộ đếm thời gian.
new Timer(1000, 30); Đối tượng
fl_TimerInstance.addEventList fl_TimerInstance thuộc
ener(TimerEvent.TIMER, lớp Timer. Nó sử dụng
fl_TimerHandler); phương thức khởi tạo có
fl_TimerInstance.start(); hai tham số delay và
var fl_SecondsElapsed:Number repeatCount.
Simple
= 1;
Timer  delay: độ trễ (tính
function
theo mili giây,
fl_TimerHandler(event:TimerE
1ms=1/1000s).
vent):void
 repeatCount: số lược
{
lặp (sẽ dừng nếu bộ
trace("Seconds elapsed:
đếm đạt đến giá trị
" + fl_SecondsElapsed);
này).
fl_SecondsElapsed++;

- 164 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

}  Phương thức start


của đối tượng
fl_TimerInstance: đối
tượng bắt đầu thi
hành. Ngược lại với
phương thức này là
phương thức stop.

var Hoàn toàn tương tự như


fl_SecondsToCountDown:Num bộ đếm xuôi. Giá trị
ber = 10; fl_SecondsToCountDown
var là giá trị bắt đầu khởi tạo
fl_CountDownTimerInstance:Ti khi đếm ngược.
mer = new Timer(1000,
fl_SecondsToCountDown);
fl_CountDownTimerInstance.a
ddEventListener(TimerEvent.T
IMER,
Countdown fl_CountDownTimerHandler);
Timer fl_CountDownTimerInstance.st
art();
function
fl_CountDownTimerHandler(ev
ent:TimerEvent):void
{
trace(fl_SecondsToCount
Down + " seconds");
fl_SecondsToCountDown
--;
}
Stop at this stop(); Dừng trình diễn movie
TimeLine Navigation

Frame tại Frame này.


movieClip_1.addEventListener( Dừng movie tại một
MouseEvent.CLICK, Frame được chỉ định.
Click to Go
fl_ClickToGoToAndStopAtFram Trong trường hợp này
to Frame
e); Frame được chỉ định là
and Stop
function Frame 5.
fl_ClickToGoToAndStopAtFram

- 165 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

e(event:MouseEvent):void
{
gotoAndStop(5);
}
movieClip_1.addEventListener( Trình diễn movie nhảy
MouseEvent.CLICK, đến Frame được chỉ
fl_ClickToGoToAndPlayFromFr định. Trong trường hợp
ame); này Frame được chỉ định
Click to Go
function là 5.
to Frame
fl_ClickToGoToAndPlayFromFr
and Play
ame(event:MouseEvent):void
{
gotoAndPlay(5);
}
movieClip_1.addEventListener( Dừng trình diễn movie ở
MouseEvent.CLICK, Frame kế tiếp.
fl_ClickToGoToNextFrame);
Click to Go
function
to Next
fl_ClickToGoToNextFrame(eve
Frame and
nt:MouseEvent):void
Stop
{
nextFrame();
}
movieClip_1.addEventListener( Dừng trình diễn movie ở
MouseEvent.CLICK, Frame phía trước.
fl_ClickToGoToPreviousFrame)
Click to Go ;
to Previous function
Frame and fl_ClickToGoToPreviousFrame(
Stop event:MouseEvent):void
{
prevFrame();
}
Click to Go movieClip_1.addEventListener( Bắt đầu trình diễn đến
to Next MouseEvent.CLICK, cảnh quay kế tiếp trong
Scene and fl_ClickToGoToNextScene); danh sách Scene.
Play function

- 166 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

fl_ClickToGoToNextScene(even
t:MouseEvent):void
{
MovieClip(this.root).nex
tScene();
}
movieClip_1.addEventListener( Bắt đầu trình diễn từ
MouseEvent.CLICK, cảnh quay trước đó
fl_ClickToGoToPreviousScene); trong danh sách Scene.
Click to Go function
to Previous fl_ClickToGoToPreviousScene(
Scene and event:MouseEvent):void
Play {
MovieClip(this.root).pre
vScene();
}
movieClip_1.addEventListener( Bắt đầu trình diễn đến
MouseEvent.CLICK, một cảnh quay được chỉ
fl_ClickToGoToScene); định trong danh sách
function Scene. Tham số thứ nhất
Click to Go
fl_ClickToGoToScene(event:Mo là Frame được chỉ định
to Scene
useEvent):void trong Scene ở tham số
and Play
{ thứ 2.
MovieClip(this.root).got
oAndPlay(1, "Scene 3");
}
stage.addEventListener(Keybo Di chuyển đối tượng
ardEvent.KEY_DOWN, theo các phím mũi tên
fl_PressKeyToMove); trên bàn phím.
function
Animation

Move with fl_PressKeyToMove(event:Key


Keyboard boardEvent):void
Arrows {
switch (event.keyCode)
{
case Keyboard.UP:
{

- 167 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

movieClip_1.y -= 5;
break;
}
case Keyboard.DOWN:
{
movieClip_1.y += 5;
break;
}
case Keyboard.LEFT:
{
movieClip_1.x -= 5;
break;
}
case Keyboard.RIGHT:
{
movieClip_1.x += 5;
break;
}
}
}
Move movieClip_1.x -= 100; Di chuyển đối tượng
Horizontall theo chiều ngang.
y
Move movieClip_1.y -= 100; Di chuyển đối tượng
Vertically theo chiều dọc.
movieClip_1.rotation += 45; Quay đối tượng 1 lần với
Rotate Once góc được chỉ định (tính
theo độ).
movieClip_1.addEventListener( Quay đối tượng liên tục.
Event.ENTER_FRAME, Mỗi lần quay một góc 10
fl_RotateContinuously); độ.
function
Rotate
fl_RotateContinuously(event:E
Continously
vent)
{
movieClip_1.rotation +=
10;

- 168 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

}
movieClip_1.addEventListener( Đối tượng chuyển động
Event.ENTER_FRAME, theo chiều ngang.
fl_AnimateHorizontally);
Animate function
Horizontall fl_AnimateHorizontally(event:E
y vent)
{
movieClip_1.x -= 10;
}
movieClip_1.addEventListener( Đối tượng chuyển động
Event.ENTER_FRAME, theo chiều dọc.
fl_AnimateVertically);
function
Animate
fl_AnimateVertically(event:Eve
Vertically
nt)
{
movieClip_1.y -= 10;
}
movieClip_1.addEventListener( Cách xuất hiện của đối
Event.ENTER_FRAME, tượng theo dạng thức
fl_FadeSymbolIn); hiện rõ dần (tăng dần độ
movieClip_1.alpha = 0; alpha)
function
fl_FadeSymbolIn(event:Event)
{
movieClip_1.alpha +=
Fade in a 0.01;
Movie Clip if(movieClip_1.alpha >=
1)
{

movieClip_1.removeEve
ntListener(Event.ENTER_FRA
ME, fl_FadeSymbolIn);
}
}

- 169 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

movieClip_1.addEventListener( Cách thức biến mất của


Event.ENTER_FRAME, đối tượng theo cách mờ
fl_FadeSymbolOut); dần (giảm dần độ alpha).
movieClip_1.alpha = 1;
function
fl_FadeSymbolOut(event:Event
)
{
movieClip_1.alpha -=
Fade out a
0.01;
Movie Clip
if(movieClip_1.alpha <=
0)
{

movieClip_1.removeEve
ntListener(Event.ENTER_FRA
ME, fl_FadeSymbolOut);
}
}
movieClip_1.addEventListener( Tải và hủy tải một tập tin
MouseEvent.CLICK, swf hoặc một tập tin ảnh
fl_ClickToLoadUnloadSWF); khi nhấp chuột vào đối
var fl_Loader:Loader; tượng movieClip_1. Biến
var fl_ToLoad:Boolean = true; fl_Loader được sử dụng
function để tải dạng tập tin kể
fl_ClickToLoadUnloadSWF(eve trên. Biến fl_ToLoad để
Load and Unload

Click to nt:MouseEvent):void lưu trạng thái (đã tải –


Load/Unloa { true hoặc chưa tải –
d SWF or if(fl_ToLoad) false).
Image { Phương thức load của
fl_Loader = new đối tượng Loader sẽ tải
Loader(); về tập tin theo một địa
fl_Loader.load(new chỉ được chỉ định trong
URLRequest("http://www.help đối tượng URLRequest.
examples.com/flash/images/i Để hủy tải, ta sử dụng
mage1.jpg")); phương thức unload.
addChild(fl_Loader); Sau khi tải xong tập tin,

- 170 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

} ta bổ sung đối tượng


else Loader này vào khung
{ trình chiếu.
fl_Loader.unload(); Sau khi hủy bỏ việc tải, ta
removeChild(fl_Loader); xóa đối tượng Loader
fl_Loader = null; khỏi khung trình chiếu
} và giải phóng biến nó
fl_ToLoad = !fl_ToLoad; (gán cho giá trị null).
} Mỗi lần nhấp chuột lên
đối tượng, ta thay đổi giá
trị của biến fl_ToLoad từ
true thành false (nếu đã
tải rồi thì lần nhấp chuột
tiếp theo sẽ là hủy tải) và
ngược lại.
movieClip_1.addEventListener( Tải hoặc hủy tải một tập
MouseEvent.CLICK, tin ảnh trong thư viện đã
fl_ClickToLoadImageFromLibra được xuất bản cho
ry); ActionScript. Trước tiên,
function ta cần import các tập tin
fl_ClickToLoadImageFromLibra ảnh vào trong thư viện
Click to
ry(event:MouseEvent):void của Flash. Sau đó, từ các
Load Image
{ tập tin ảnh này, ta sẽ tạo
from
var libImage:MyImage = ra các lớp đối tượng
Library
new MyImage(0,0); tương ứng (Tương tự
var holder:Bitmap = new xuất bản tập tin âm
Bitmap(libImage); thanh trong mục 5.7).
addChild(holder); Đối tượng ảnh này sẽ trở
} thành tham số trong đối
tượng của lớp Bitmap.
var Bổ sung một biểu tượng
Add fl_MyInstance:LibrarySymbol = (Graphic, MovieClip,
Instance new LibrarySymbol(); Button). Các đối tượng
from Stage addChild(fl_MyInstance); này cũng phải xuất bản
cho ActionScript.
Remove removeChild(movieClip_1); Xóa đối tượng
Instance movieClip_1 ra khỏi

- 171 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

from Stage khung trình chiếu.


var fl_TextLoader:URLLoader = Tải một đoạn văn bản từ
new URLLoader(); bên ngoài. Chức năng
var này tương tự như việc
fl_TextURLRequest:URLReques tải một tập tin XML. Bạn
t = new có thể xem lại lời giải
URLRequest("http://www.help thích ở trên.
examples.com/flash/text/lore
mipsum.txt");
fl_TextLoader.addEventListene
r(Event.COMPLETE,
Load
fl_CompleteHandler);
External
function
Text
fl_CompleteHandler(event:Eve
nt):void
{
var textData:String =
new
String(fl_TextLoader.data);
trace(textData);
}
fl_TextLoader.load(fl_TextURL
Request);
movieClip_1.addEventListener( Trình diễn hoặc dừng
MouseEvent.CLICK, một tập tin âm thanh.
fl_ClickToPlayStopSound); Biến fl_ToPlay lưu trạng
var fl_SC:SoundChannel; thái cho phép trình diễn
var fl_ToPlay:Boolean = true; hoặc không (tương ứng
Audio and Video

function true và false). Đối tượng


Click to
fl_ClickToPlayStopSound(evt:M Sound sử dụng phương
Play/Stop
ouseEvent):void thức khởi tạo từ một
Sound
{ URLRequest. Cách thực
if(fl_ToPlay) thi một tập tin âm thanh
{ chúng ta đã tìm hiểu ở
var s:Sound = new mục 5.7.
Sound(new
URLRequest("http://www.help

- 172 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

examples.com/flash/sound/so
ng1.mp3"));
fl_SC = s.play();
}
else
{
fl_SC.stop();
}
fl_ToPlay = !fl_ToPlay;
}
movieClip_1.addEventListener( Dừng chơi tất cả âm
MouseEvent.CLICK, thanh trong movie.
fl_ClickToStopAllSounds);
function
Click to Stop
fl_ClickToStopAllSounds(event:
All Sounds
MouseEvent):void
{
SoundMixer.stopAll();
}
import fl.video.MetadataEvent;Thực thi một event khi
movieClip_1.addEventListener( đọc đến một Cue Point
MetadataEvent.CUE_POINT, được chỉ định. Cue Point
fl_CuePointHandler); là một cách thức chia
function nhỏ tập tin âm thanh
On Cue fl_CuePointHandler(event:Meta hoặc video (định dạng
Point Event dataEvent):void flv, f4v) lớn trong Flash
{ (đọc theo stream). Nhờ
trace(event.info.name);
đó tập tin sẽ được tải
} nhanh hơn (tải đến cue
point nào thì trình chiếu
đến đó).
movieClip_1.addEventListener( Tương tự như nút Play
MouseEvent.CLICK, trong các trình điều
Click to Play fl_ClickToPlayVideo); khiển nhạc/phim. Đối
Video function tượng
fl_ClickToPlayVideo(event:Mou video_instance_name là
seEvent):void tên thể hiện của thành

- 173 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

{ phần điều khiển việc thi


video_instance_name.play(); hành tập tin video hoặc
} âm thanh (thường là FLV
playback).
movieClip_1.addEventListener( Tạm dừng.
MouseEvent.CLICK,
fl_ClickToPauseVideo);
function
Click to
fl_ClickToPauseVideo(event:M
Pause Video
ouseEvent):void
{
video_instance_name.pause();
}
movieClip_1.addEventListener( Quay trở lại vị trí ban
MouseEvent.CLICK, đầu trên trình điều khiển
fl_ClickToPauseVideo); media playback.
Click to function
Rewind fl_ClickToPauseVideo(event:M
Video ouseEvent):void
{
video_instance_name.seek(0);
}
video_instance_name.addEvent Thiết lập tập tin tài
Listener(MouseEvent.CLICK, nguyên cho trình media
fl_ClickToSetSource); playback thông qua
function thuộc tính source.
Click to Set fl_ClickToSetSource(event:Mou
Video seEvent):void
Source {
video_instance_name.source =
"http://www.helpexamples.co
m/flash/video/water.flv";
}
movieClip_1.addEventListener( Di chuyển đến một Cue
Click to
MouseEvent.CLICK, Point được chỉ định
Seek to Cue
fl_ClickToSeekToCuePoint); (trong trường hợp này là
Point
function Cue Point có tên là Cue

- 174 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

fl_ClickToSeekToCuePoint(eve Point 1. Phương thức


nt:MouseEvent):void seek của đối tượng
{ media playback chỉ hoạt
var cuePointInstance:Object = động với tham số time
video_instance_name.findCueP (nhảy đến một thời
oint("Cue Point 1"); điểm), do đó, ta cần
video_instance_name.see chuyển từ đối tượng cue
k(cuePointInstance.time); point sang tham số time
} tương ứng nhờ thuộc
tính time.
var fl_NC:NetConnection = new Đọc một tập tin video từ
NetConnection(); một Media Server nhờ
fl_NC.connect(null); vào đối tượng
var fl_NS:NetStream = new NetStream. Phim sau khi
NetStream(fl_NC); được tải sẽ trình chiếu
Create a
fl_NS.client = {}; trực tiếp trên stage
NetStream
var fl_Vid:Video = new Video(); không dùng đến trình
Video
fl_Vid.attachNetStream(fl_NS); FLV playback.
addChild(fl_Vid);
fl_NS.play("http://www.helpex
amples.com/flash/video/water
.flv");
movieClip_1.addEventListener( Hành động thực thi khi
MouseEvent.CLICK, chuột được nhấn lên đối
fl_MouseClickHandler); tượng movieClip_1.
function
Mouse Click
fl_MouseClickHandler(event:M
Event
Event Handlers

ouseEvent):void
{
trace("Mouse clicked");
}
movieClip_1.addEventListener( Hành động thực thi khi
MouseEvent.MOUSE_OVER, chuột di chuyển qua đối
Mouse Over fl_MouseOverHandler); tượng movieClip_1.
Event function
fl_MouseOverHandler(event:M
ouseEvent):void

- 175 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

{
trace("Moused over");
}
movieClip_1.addEventListener( Hành động thực thi khi
MouseEvent.MOUSE_OUT, chuột di chuyển ra khỏi
fl_MouseOutHandler); đối tượng movieClip_1.
function
Mouse Out
fl_MouseOutHandler(event:Mo
Event
useEvent):void
{
trace("Moused out");
}
stage.addEventListener(Keybo Hành động thực thi khi
ardEvent.KEY_DOWN, một phím được nhấn (có
fl_KeyboardDownHandler); thể là KEY_DOWN,
function KEY_UP. Trong trường
Key Pressed fl_KeyboardDownHandler(eve hợp này, ta sử dụng
Event nt:KeyboardEvent):void KEY_DOWN.
{
trace("Key Code
Pressed: " + event.keyCode);
}
addEventListener(Event.ENTE Hành động diễn ra khi
R_FRAME, phim được trình chiếu.
fl_EnterFrameHandler);
Enter function
Frame fl_EnterFrameHandler(event:E
Event vent):void
{
trace("Entered frame");
}

Nhóm chức năng nâng cao hỗ trợ cho các dòng điện thoại thông mình chạy
Android, iOS…
Multitouch.inputMode = Hà nh độ ng die� n ra khi
Mobile

Tap
Touch

MultitouchInputMode.TOUCH_POINT; dù ng tay (hoặ c bú t cả m


Event
movieClip_1.addEventListener(Touch ứng) chạ m lê n đo� i tượng

- 176 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Event.TOUCH_TAP, fl_TapHandler); movieClip_1. Trong


function trường hợp nà y, nó thay
fl_TapHandler(event:TouchEvent):voi đo� i độ trong suo� t củ a đo� i
d tượng (chı̉ so� alpha). Sự
{ kiệ n chı̉ có tá c dụ ng với
movieClip_1.alpha *= 0.5; thie� t bị ho� trợ mà n hı̀nh
} cả m ứng.
Multitouch.inputMode = Hà nh độ ng die� n ra khi ta
MultitouchInputMode.TOUCH_POINT; dù ng tay (hoặ c bú t cả m
ứng) nha� n lê n đo� i tượng
movieClip_1.addEventListener(Touch movieClip_1, sau đó di
Event.TOUCH_BEGIN, chuye� n ngó n tay (đo� ng
fl_TouchBeginHandler); thời là m di chuye� n đo� i
movieClip_1.addEventListener(Touch tượng movieClip_1).
Event.TOUCH_END, Hà nh độ ng nà y sẽ ke� t
fl_TouchEndHandler); thú c khi ta ngừng nha� n
lê n đo� i tượng. Thao tá c
var fl_DragBounds:Rectangle = new nà y tương tự như ké o
Rectangle(0, 0, stage.stageWidth, thả chuộ t lê n đo� i tượng.
stage.stageHeight); Nó chı̉ có tá c dụ ng với
Touch mà n hı̀nh cả m ứng củ a
and function thie� t bị di độ ng.
Drag fl_TouchBeginHandler(event:TouchEv
Event ent):void
{
event.target.startTouchDrag(ev
ent.touchPointID, false,
fl_DragBounds);
}

function
fl_TouchEndHandler(event:TouchEve
nt):void
{
event.target.stopTouchDrag(ev
ent.touchPointID);
}

- 177 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

var fl_PressTimer:Timer = new Hà nh độ ng die� n ra khi


Timer(1000); nha� n ngó n tay (hoặ c bú t
fl_PressTimer.addEventListener(Time cả m ứng) lê n đo� i tượng
rEvent.TIMER, fl_PressTimerHandler);movieClip_1 trong mộ t
thời gian khá dà i (chậ m
function hơn so với hà nh độ ng
fl_PressTimerHandler(event:TimerEv chạ m). Trong trường
ent):void hợp minh họ a nà y, đo� i
{ tượng sẽ phó ng to lê n
// Start your custom code ga� p đo� i (theo chie� u dà i
// This example code doubles la� n chie� u cao).
the object's size
movieClip_1.scaleX = 2;
movieClip_1.scaleY = 2;
// End your custom code
Long
}
Press
Event
Multitouch.inputMode =
MultitouchInputMode.TOUCH_POINT;

movieClip_1.addEventListener(Touch
Event.TOUCH_BEGIN,
fl_PressBeginHandler);
movieClip_1.addEventListener(Touch
Event.TOUCH_END,
fl_PressEndHandler);
movieClip_1.addEventListener(Touch
Event.TOUCH_OUT,
fl_PressEndHandler);
movieClip_1.addEventListener(Touch
Event.TOUCH_ROLL_OUT,
fl_PressEndHandler);
Multitouch.inputMode = Hà nh độ ng die� n ra khi
Two
MultitouchInputMode.GESTURE; dù ng hai ngó n tay chạ m
Gesture
Mobile

Events

finger
và o mà n hı̀nh cả m ứng
Tap
stage.addEventListener(GestureEvent. củ a thie� t bị di độ ng.
Event
GESTURE_TWO_FINGER_TAP, Trong trường hợp nà y,

- 178 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

fl_TwoFingerTapHandler); đo� i tượng movieClip_1


sẽ phó ng to lê n.
function
fl_TwoFingerTapHandler(event:Gestu
reEvent):void
{
// Start your custom code
// This example code zooms in
on the object upon each two finger tap
event
// The object should be a
background the size of the stage
movieClip_1.scaleX *= 2;
movieClip_1.scaleY *= 2;
// End your custom code
}
Multitouch.inputMode = Hà nh độ ng die� n ra khi
MultitouchInputMode.GESTURE; dù ng tay phó ng to đo� i
tượng (hai ngó n tay
stage.addEventListener(TransformGe chụ m lạ i chạ m và o cù ng
stureEvent.GESTURE_ZOOM, mộ t đie� m, sau đó nới
fl_ZoomHandler); rộ ng hai ngó n tay ra).
Pinch Trong trường hợp nà y,
to function đo� i tượng sẽ được phó ng
Zoom fl_ZoomHandler(event:TransformGest to lê n. Hà nh độ ng nà y chı̉
Event ureEvent):void có tá c dụ ng với mà n hı̀nh
{ cả m ứng.
movieClip_1.scaleX *=
event.scaleX;
movieClip_1.scaleY *=
event.scaleY;
}
Multitouch.inputMode = Hà nh độ ng die� n ra khi
MultitouchInputMode.GESTURE; dù ng hai ngó n tay vuo� t
Pan
nhẹ lê n đo� i tượng
Event
movieClip_1.addEventListener(Transf movieClip_1. Trong
ormGestureEvent.GESTURE_PAN, trường hợp nà y, đo� i

- 179 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

fl_PanHandler); tượng sẽ di chuye� n. Đe�


tha� y rõ hà nh độ ng nà y,
function đo� i tượng ca� n lớn hơn
fl_PanHandler(event:TransformGestur kı́ch thước củ a khung
eEvent):void nhı̀n. Hà nh độ ng nà y chı̉
{ có tá c dụ ng đo� i với cá c
event.currentTarget.x += thie� t bị có mà n hı̀nh cả m
event.offsetX; ứng.
event.currentTarget.y +=
event.offsetY;
}
Multitouch.inputMode = Hà nh độ ng die� n ra khi
MultitouchInputMode.GESTURE; xoay đo� i tượng. Sự kiệ n
nà y chı̉ có tá c dụ ng đo� i
movieClip_1.addEventListener(Transf với thie� t bị ho� trợ mà n
ormGestureEvent.GESTURE_ROTATE, hı̀nh cả m ứng.
fl_RotateHandler);
Rotate
Event function
fl_RotateHandler(event:TransformGes
tureEvent):void
{
event.target.rotation +=
event.rotation;
}
Multitouch.inputMode = Hà nh độ ng die� n ra khi
MultitouchInputMode.GESTURE; ha� t nhẹ đo� i tượng. Sự
kiệ n có tá c dụ ng đo� i với
stage.addEventListener thie� t bị ho� trợ mà n hı̀nh
(TransformGestureEvent.GESTURE_S cả m ứng.
Swipe WIPE, fl_SwipeHandler);
Event
function
fl_SwipeHandler(event:TransformGest
ureEvent):void
{
switch(event.offsetX)

- 180 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

{
// swiped right
case 1:
{
// Start your
custom code
// This example
code moves the selected object 20
pixels to the right.
movieClip_1.x +=
20;
// End your
custom code
break;
}
// swiped left
case -1:
{
// Start your
custom code
// This example
code moves the selected object 20
pixels to the left.
movieClip_1.x -=
20;
// End your
custom code
break;
}
}

switch(event.offsetY)
{
// swiped down
case 1:
{
// Start your
custom code

- 181 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

// This example
code moves the selected object 20
pixels down.
movieClip_1.y +=
20;
// End your
custom code
break;
}
// swiped up
case -1:
{
// Start your
custom code
// This example
code moves the selected object 20
pixels up.
movieClip_1.y -=
20;
// End your
custom code
break;
}
}
}
Multitouch.inputMode = Dù ng tay đe� vuo� t nhẹ lê n
MultitouchInputMode.GESTURE; mà n hı̀nh cả m ứng sang
phả i – chuye� n sang
Swipe
stage.addEventListener Frame phı́a trước; sang
to go to
Mobile Actions

(TransformGestureEvent.GESTURE_S trá i – chuye� n sang Frame


next/pr
WIPE, tie� p theo. Hà nh độ ng nà y
evious
fl_SwipeToGoToNextPreviousFrame); chı̉ có tá c dụ ng với mà n
frame
hı̀nh cả m ứng.
and
function
stop
fl_SwipeToGoToNextPreviousFrame(e
vent:TransformGestureEvent):void
{

- 182 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

if(event.offsetX == 1)
{
// swiped right
prevFrame();
}
else if(event.offsetX == -1)
{
// swiped left
nextFrame();
}
}
Multitouch.inputMode = Dù ng tay vuo� t nhẹ lê n
MultitouchInputMode.GESTURE; mà n hı̀nh sang phả i đe�
chuye� n sang scene tie� p
stage.addEventListener theo và sang trá i đe�
(TransformGestureEvent.GESTURE_S chuye� n sang scene trước
WIPE, đó .
fl_SwipeToGoToNextPreviousScene);

Swipe function
to go tofl_SwipeToGoToNextPreviousScene(e
next/pr vent:TransformGestureEvent):void
evious {
scence if(event.offsetX == 1)
and {
play // swiped right
prevScene();
}
else if(event.offsetX == -1)
{
// swiped left
nextScene();
}
}
Move var fl_Accelerometer:Accelerometer = Di chuye� n đo� i tượng
with new Accelerometer(); theo cả m bie� n khô ng
Acceler fl_Accelerometer.addEventListener(Ac gian (cả m bie� n theo độ

- 183 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

ometer celerometerEvent.UPDATE, nghiêng – cả m ứng con


fl_AccelerometerUpdateHandler); quay).

function
fl_AccelerometerUpdateHandler(even
t:AccelerometerEvent):void
{
movieClip_1.x -=
event.accelerationX*30;
movieClip_1.y +=
event.accelerationY*30;
}
stage.addEventListener(Event.ACTIVA Hà nh độ ng die� n ra khi
TE, fl_Activate); ứng dụ ng đang ở che� độ
stage.addEventListener(Event.DEACTI đặ t tiê u cự (activate) và
VATE, fl_Deactivate); khô ng được đặ t tiê u cự
(deactivate).
function fl_Activate(event:Event):void
{
Deactiv
// Start timers and add event
ate/Act
listeners here.
ivate
}
Event

function
fl_Deactivate(event:Event):void
{
// Stop timers and remove
event listeners here.
}
stage.addEventListener(KeyboardEve Hie� n thị chức nă ng khi
nt.KEY_UP, nha� n phı́m menu trê n
Menu fl_OptionsMenuHandler_2); bà n phı́m củ a thie� t bị di
Key độ ng. Trong vı́ dụ nà y,
Pressed function ne� u nha� p và o phı́m
Event fl_OptionsMenuHandler_2(event:Keyb menu, trê n mà n hı̀nh sẽ
oardEvent):void hiệ n ra mộ t hı̀nh chữ
{ nhậ t.

- 184 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

if( (event.keyCode == 95) ||


(event.keyCode == Keyboard.MENU) )
{
// Start your custom
code
// This example code
displays a gray rectangle.
var grayRectangle:Sprite
= new Sprite();

grayRectangle.graphics.lineStyl
e(3, 0x888888, 0.95);

grayRectangle.graphics.beginFil
l(0xececec, 0.95);

grayRectangle.graphics.drawRe
ct(1, stage.stageHeight - 100,
stage.stageWidth-3, 100);

grayRectangle.graphics.endFill(
);
addChild(grayRectangle);
// End your custom code

}
}
var fl_GeolocationDisplay:TextField = Hie� n thị thô ng tin vị trı́
new TextField(); địa lı́ củ a thie� t bị. Chức
fl_GeolocationDisplay.autoSize = nă ng nà y chı̉ hoạ t độ ng
AIR for mobile

TextFieldAutoSize.LEFT; với cá c thie� t bị ho� trợ


Show
fl_GeolocationDisplay.text = GPS và có ke� t no� i
geoloca
"Geolocation is not responding. Verify internet. Trong vı́ dụ
tion
the device's location settings."; trê n, nó sẽ hie� n thị vı̃ độ
addChild(fl_GeolocationDisplay); (latitude), tung độ
(longitude), độ cao so
if(!Geolocation.isSupported) với nước bie� n (altitude).

- 185 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

{
fl_GeolocationDisplay.text =
"Geolocation is not supported on this
device.";
}
else
{
var fl_Geolocation:Geolocation
= new Geolocation();
fl_Geolocation.setRequestedUp
dateInterval(1000);
fl_Geolocation.addEventListene
r(GeolocationEvent.UPDATE,
fl_UpdateGeolocation);
}

function
fl_UpdateGeolocation(event:Geolocati
onEvent):void
{
fl_GeolocationDisplay.text =
"latitude: ";
fl_GeolocationDisplay.appendTe
xt(event.latitude.toString() + "\n");
fl_GeolocationDisplay.appendTe
xt("longitude: ");
fl_GeolocationDisplay.appendTe
xt(event.longitude.toString() + "\n");
fl_GeolocationDisplay.appendTe
xt("altitude: ");
fl_GeolocationDisplay.appendTe
xt(event.altitude.toString() + "\n");
}
Re- var fl_initialRotation = Tự độ ng xoay đo� i tượng
orient movieClip_1.rotation; // Save the cho phù hợp với khung
objects initial rotation value nhı̀n. Chı̉ ho� trợ đo� i với
on những thie� t bị có cả m

- 186 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Device stage.addEventListener(StageOrientat bie� n tự độ ng xoay. Ne� u


Rotatio ionEvent.ORIENTATION_CHANGE, biê n dịch ở che� độ ke� t
n fl_OrientationChange); no� i với thie� t bị thô ng qua
co� ng USB, ta ca� n hiệ u
function chı̉nh ở AIR setting: Và o
fl_OrientationChange(event:StageOrie File > AIR Setting, chọ n
ntationEvent):void thẻ General, chọ n Auto
{ Rotation.
switch
(stage.deviceOrientation)
{
case
StageOrientation.DEFAULT:
{
// Re-orient
display objects on default (right-side
up) orientation.

movieClip_1.rotation =
fl_initialRotation; // Restore the
initial rotation value
break;
}
case
StageOrientation.ROTATED_RIGHT:
{
// Re-orient
display objects based on right-hand
orientation.

movieClip_1.rotation += 90;
break;
}
case
StageOrientation.ROTATED_LEFT:
{
// Re-orient
display objects based on left-hand

- 187 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

orientation.

movieClip_1.rotation -= 90;
break;
}
case
StageOrientation.UPSIDE_DOWN:
{
// Re-orient
display objects based on upside-down
orientation.

movieClip_1.rotation += 180;
break;
}
}
}

Các chức năng dành riêng cho AIR (trên cả Windows, Linux, MacOS, Android,
iOS…)
movieClip_1.addEventListener(Mouse Hà nh độ ng nha� p lê n đo� i
Event.CLICK, fl_CloseWindow); tượng movieClip_1 đe�
Click to
đó ng cửa so� ứng dụ ng.
close
function
AIR

AIR
fl_CloseWindow(event:Event):void
Windo
{
w
stage.nativeWindow.close();
}

- 188 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

movieClip_1.addEventListener(Mouse Hà nh độ ng nha� p lê n đo� i


Event.CLICK, fl_MinimizeWindow); tượng movieClip_1 đe�
thu nhỏ cửa so� .
Click to
function
minimi
fl_MinimizeWindow(event:Event):voi
ze AIR
d
Windo
{
w
stage.nativeWindow.minimize()
;
}
movieClip_1.addEventListener(Mouse Hà nh độ ng nha� p lê n đo� i
Event.MOUSE_DOWN, tượng movieClip_1 đe�
fl_MaximizeWindow); phó ng to hoặ c phụ c ho� i
lạ i trạ ng thá i trước khi
function thu nhỏ cửa so� .
fl_MaximizeWindow(event:Event):voi
d
{
if(stage.nativeWindow.displayS
Click to
tate !=
maximi
NativeWindowDisplayState.MAXIMIZ
ze or
ED)
restore
{
Windo
w
stage.nativeWindow.maximize(
);
}
else
{

stage.nativeWindow.restore();
}
}

- 189 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

movieClip_1.addEventListener(Mouse Di chuye� n đo� i tượng


Event.MOUSE_DOWN, movieClip_1 đe� di
fl_MoveWindow); chuye� n cửa so� củ a ứng
Drag to
dụ ng AIR. Thô ng thường,
move
function đo� i tượng movieClip_1
AIR
fl_MoveWindow(event:Event):void sẽ là thanh tiê u đe� củ a
windo
{ cửa so� .
w
stage.nativeWindow.startMove(
);
}

- 190 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

import flash.filesystem.File; Mở mộ t file vă n bả n


import flash.filesystem.FileMode; ba� ng hộ p thoạ i. Trong vı́
import flash.filesystem.FileStream; dụ nà y, hộ p thoạ i mở file
sẽ hiệ n ra khi ta nha� p
movieClip_1.addEventListener(Mouse chuộ t và o movieClip_1.
Event.CLICK, fl_OpenFile);

var fl_OpenFileStream:FileStream =
new FileStream(); // FileStream used
to read from the file
var fl_OpenFileChooser:File =
File.documentsDirectory; // Default to
the documents directory
fl_OpenFileChooser.addEventListener(
Event.SELECT, fl_FileOpenSelected);

// Main function for opening a file


function
fl_OpenFile(event:MouseEvent):void
{
fl_OpenFileChooser.browseFor
Open("Select a text file.");
}

// Opens a FileStream object to read


the file
function
Click to fl_FileOpenSelected(event:Event):void
read {
from fl_OpenFileChooser =
text file event.target as File;
fl_OpenFileStream = new
FileStream();
fl_OpenFileStream.addEventList
ener(Event.COMPLETE,
fl_FileReadHandler);

fl_OpenFileStream.openAsync(fl
_OpenFileChooser, FileMode.READ);
} - 191 -

// Write data from the file to the


Output Panel
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

import flash.filesystem.File; Lưu file vă n bả n ba� ng


import flash.filesystem.FileMode; hộ p thoạ i lưu file. Hộ p
import flash.filesystem.FileStream; thoạ i nà y sẽ hie� n thị khi
ta nha� p và o movieClip_1.
movieClip_1.addEventListener(Mouse
Event.CLICK, fl_SaveFile);

var fl_FileDataToSave:String = "Text to


save to file.";

var fl_SaveFileStream:FileStream =
new FileStream(); // FileStream used
to write to the file

var fl_SaveFileChooser:File =
File.documentsDirectory; // Default to
the documents directory
fl_SaveFileChooser.addEventListener(
Event.SELECT, fl_WriteFileHandler);

// Opens a Save As dialog box for user


to specify a file name
Click to function
write fl_SaveFile(event:MouseEvent):void
to a {
text file fl_SaveFileChooser.browseForS
ave("Save As:");
}

// Write data in fl_FileDataToSave


variable
function
fl_WriteFileHandler(event:Event):void
{
fl_SaveFileChooser =
event.target as File;
fl_SaveFileStream = new
FileStream();

fl_SaveFileStream.openAsync(fl
- 192 -
_SaveFileChooser, FileMode.WRITE);

fl_SaveFileStream.writeMultiBy
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

import flash.filesystem.File; Lưu trữ và tả i lạ i cá c


import flash.filesystem.FileMode; thô ng tin ca� n thie� t củ a
import flash.filesystem.FileStream; ứng dụ ng và o/từ file ca� u
hı̀nh config.
// Defines the name of the file in local
storage to write the preferences to
var fl_ConfigFile:File = new File("app-
storage:/AppConfig.cfg");

// On Windows 7:
C:\Users\<username>\AppData\Roami
ng\<Name of Air Application>\Local
Store\AppConfig.cfg
// On Windows XP: C:\Documents and
Settings\<username>\Application
Data\<Name of Air Application>\Local
Store\AppConfig.cfg
// On Mac:
/Users/<username>/Library/Preferenc
es/<Name of Air Application>/Local
Store/AppConfig.cfg

// Creates TextField to display the


string saved in preferences
var fl_AppPreference = new
TextField();
addChild(fl_AppPreference);

fl_LoadPreferences();
// Call to Load Preferences
fl_SavePreferences();
// Call to Save Preferences (move this
where you want to save your
preferences)

// Write preferences to the


configuration file
function fl_SavePreferences():void
{
// Open preference
- 193 - file for
writing
var fs:FileStream = new
FileStream();
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Để biết thêm thông tin về các đối tượng, bạ n hãy xem thêm bảng tham khảo về
các lớp đối tượng trong địa chỉ trợ giúp về ActionScript 3 của Adobe
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/.

- 194 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Tổng kết chương 5


Trong chương này, chúng ta đã tìm hiểu về ngôn ngữ lập trình ActionScript. Đây
là một ngôn ngữ lập trình hướng đối tượng. Về cơ bản nó cũng giống như Java. Nó
cũng được biên dịch thành mã bytecode và có một máy ảo AVM có thể hiểu được.
Máy ảo AVM được tích hợp trong Flash Player và AIR.
Bạn được cung cấp các kiến thức nền tảng về AS 3.0: về cú pháp, câu lệnh cơ
bản,… và đặc biệt, bạn được cung cấp các kiến thức về hướng đối tượng. Bạn cũng
đã tìm hiểu về cách đưa một đối tượng mà bạn xây dựng hay một đối tượng đã
tồn tại vào ngôn ngữ ActionScript.
Ngoài ra, chúng tôi cũng hi vọng rằng, bạn sẽ biết cách điều khiển đối tượng bằng
các sự kiện event. Dù rằng, chúng tôi chỉ đưa ra một vài sự kiện cơ bản. Đặc biệt,
một chức năng cao cấp cũng được giới thiệu trong chương này đó là vùng chức
năng Code Snippet. Vùng chức năng này quả thật rất hữu ích cho những người
mới làm quen với AS.

- 195 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT

Blank Page

- 196 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

6.1. Xử lý âm thanh, hình ảnh và video


a. Import âm thanh, hình ảnh và video vào thư viện
Mặc dù chức năng Import to Library hỗ trợ cả chức năng Import Video, nhưng
bạn nên sử dụng chức năng này chỉ cho âm thanh và hình ảnh. Riêng với video,
bạn nên sử dụng chức năng Import Video.
Cả hai chức năng này đều được tổ chức trong menu File>Import.
b. Xử lý âm thanh
Sau khi import một file âm thanh vào trong thư viện, ta có thể hiệu chỉnh thuộc
tính của nó. Bạn hãy chọn file âm thanh vừa nhập vào, kích chuột phải và chọn:
- Properties.
- Hoặc Edit with Soundbooth.
Bảng thuộc tính của âm thanh sẽ có dạng như sau

Hình 112 – Bảng thuộc tính âm thanh


Bạn có thể nghe qua âm thanh nhờ vào chức năng Test, dừng chơi nhờ chức năng
Stop, thay đổi file nguồn nhờ chức năng Import,… Đặc biệt, bạn có thể thay đổi
định dạng nén cho file âm thanh nhờ vào Compression.
Để xử lý âm thanh trong Flash, Adobe đã cung cấp cho ta một trình tiện ích riêng
dành cho nhiệm vụ này đó là Adobe SoundBooth. Với SoundBooth, bạn có thể
thay đổi định dạng âm thanh (bao gồm cả video), trích tách âm thanh khỏi video,
bổ sung các hiệu ứng cho âm thanh, trích tách một phần của file âm thanh,… và
nhiều tính năng khác.
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 113 – Giao diện SoundBooth CS5


Chúng ta sẽ thảo luận qua một vài chức năng trong SoundBooth.
- Trích xuất một phần file âm thanh: bạn hãy dùng trỏ chuột và bôi đen phần âm
thanh trên biểu đồ phổ của nó. Kích chuột phải và nhấp chọn Crop. Sau đó nhấp
Save As và chọn định dạng xuất bản. Để kiểm tra phần âm thanh được chọn có
đúng hay không, bạn hãy kéo thanh biểu diện trạng thái hiện tại đến các vị trí cần
kiểm tra, sau đó nhấp Play.
- Tạo hiệu ứng cho âm thanh: bạn hãy chọn mục effect bên cạnh, và chọn hiệu ứng
cần áp dụng.
Khi sử dụng âm thanh trong phim Flash, bạn cần tạo riêng một Layer cho nó. Bạn
cần đảm bảo các phần âm thanh của bạn phải tương ứng với các hoạt cảnh trong
phim. Điều đó sẽ giúp phim của bạn thật hơn, sinh động hơn.
c. Xử lý hình ảnh
Sau khi import một file hình ảnh vào trong thư viện, ta có thể hiệu chỉnh thuộc
tính của nó. Bạn hãy chọn file âm thanh vừa nhập vào, kích chuột phải và chọn:
- Properties.
- Hoặc Edit with PhotoShop.
Bảng thuộc tính của hình ảnh sẽ có dạng như sau

- 198 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 114 – Bảng thuộc tính hình ảnh


Chức năng trong bảng thuộc tính này tương tự với chức năng thuộc tính của âm
thanh. Đối với hình ảnh khi nén bằng JPEG, bạn có thể chọn độ nén cho hình ảnh
để giảm kích thước tập tin sau khi xuất bản.
Để xử lý hình ảnh trong Flash, Adobe cho phép ta chỉnh sửa chúng bởi chương
trình chuyên dụng là Adobe Photoshop. Có lẽ, đây là chương trình mà bạn đã quá
quen thuộc.

- 199 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 115 – Giao diện Adobe PhotoShop CS5


d. Xử lý video
Đây có thể là chức năng thú vị của Flash. Bạn hoàn toàn có thể sử dụng Flash để
tạo các kĩ xảo điện ảnh (dù rằng đây không phải là chương trình chuyên dụng –
Nếu bạn quan tâm, bạn có thể tham khảo chương trình Adobe Premier và Adobe
After Effect trong cùng gói Master CS5 này).
Để làm việc với video, Flash cung cấp cho ta tiện ích Adobe Media Encoder để
chuyển các tập tin video thành tập tin cho phép sử dụng trong Flash là flv hoặc
f4v.
Để chuyển đổi, bạn chỉ việc chọn Export Setting và hiệu chỉnh các thông số cần
thiết. Với tiện ích này, bạn có thể hiệu chỉnh một vài thuộc tính cho các đoạn
video của bạn.

Hình 116 – Giao diện Adobe Media Encoder CS5

- 200 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Ngoài ra, Flash còn cho phép bạn hiểu chỉnh nâng cao với hai chương trình hỗ trợ
kĩ xảo điện ảnh là Adobe Premier và Adobe After Effect.
Khi import một video vào Flash, bạn có thể cho phép video mà bạn import vào sẽ
nằm trên một khung hình độc lập hay được nhúng vào một trình media playback
(nghĩa là chương trình có các thành phần điều khiển chế độ chơi). Với việc tạo
một khung hình độc lập, ta có thể tạo các mặt nạ với hình thù phức tạp, tạo các
khung trình chiếu rất hấp dẫn. Bạn sẽ được tìm hiểu điều này khi chúng ta tìm
hiểu kĩ hơn về mặt nạ.

6.2. Tạo kĩ xảo điện ảnh với Flash


Trong phần này, chúng tôi sẽ hướng dẫn cho bạn cách tạo một số kĩ xảo thường
được dùng trong các chương trình truyền hình hiện nay. Trước khi thảo luận chi
tiết, chúng ta sẽ tìm hiểu sơ qua về kĩ xảo điện ảnh là gì ?
Kĩ xảo điện ảnh đó là những hiệu ứng được tạo dựng nhờ công cụ máy tính để làm
cho các bộ phim, các chương trình truyền hình trở nên hấp dẫn hơn. Kĩ xảo điện
ảnh có thể phân làm hai dạng cơ bản:
+ Kĩ xảo dành riêng cho các chương trình truyền hình: như các hiệu ứng chuyển
cảnh, hiệu ứng văn bản, hiệu ứng trong các chương trình gameshow,…
+ Kĩ xảo dành riêng cho các thước phim điện ảnh: các hiệu ứng tạo sóng, tạo mây
mù, phép thuật,…
Sự phân loại này được quy định trong giáo trình này. Chúng ta sẽ không đi vào
thảo luận chi tiết về các dạng kĩ xảo này. Chúng ta chỉ sử dụng Flash như là công
cụ để tạo ra một số kĩ xảo thông dụng.
Kĩ xảo biến hình (kĩ xảo điện ảnh)
Một kĩ xảo biến hình (ví dụ một nhân vật A dùng phép thuật để biến thành nhân
vật B) thực chất đó là một kĩ thuật bấm máy. Người quay phim sẽ quay hai hình
ảnh này trong cùng một hình nền, hai nhân vật có cùng một thế đứng như nhau.
Việc biến hình chỉ đơn thuần là sự tiếp diễn của hai cảnh quay này. Để cho phim
có thêm hiệu ứng đặc sắc, bạn có thể sử dụng hiệu ứng động của Flash (như bốc
khói, tạo một luồng sáng,…) để làm cho hiệu ứng thêm đẹp mắt. Việc xây dựng các
hiệu ứng này bạn có thể tìm hiểu trong các ví dụ tiếp theo sau.
Bạn lưu ý rằng, nếu bạn muốn tạo một hiệu ứng ghép hình, thì Flash không hỗ trợ
cho bạn. Bạn có thể dùng chương trình chuyên dụng là Adobe After Effect.
Kĩ xảo chú gấu thổi lửa
Trong ví dụ này, chúng ta sẽ sử dụng một thước phim có hình chú gấu. Chú gấu sẽ
há miệng. Khi đó, một luồng ánh sáng màu đỏ (mà ta gọi là lửa) sẽ phóng ra. Kĩ

- 201 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

xảo mong chờ trong thước phim cuối cùng là thước phim chú gấu này sẽ thổi ra
lửa.
Đầu tiên, bạn hãy tạo một dự án mới. Bạn hãy import Video hình chú gấu vào
(File Bear.flv trong thư mục Video của CD đính kèm). Bạn hãy hiệu chỉnh các
thuộc tính khi import dữ liệu theo hình mô tả của hình bên dưới đây

Hình 117 – Hiệu chỉnh thông số khi import dữ liệu


Sau đó, bạn nhấp vào Next. Trong cửa sổ tiếp theo, bạn chọn Embbed Video và
nhấp Finish.
Giờ đây, video mà bạn import vào nằm trong thư viện (nếu bạn chọn import to
Library), nằm trong Stage (nếu bạn chọn import to Library). Để tạo kĩ xảo điện
ảnh như chúng ta thảo luận ở trên, các bạn hãy thực hiện các bước sau đây
Bước 1 Bạn hãy kéo video trong thư viện vào trong Stage, sử dụng chức năng
Align để hiệu chỉnh kích thước cho video trùng với kích thước của Stage và đặt nó
trùng khớp lên Stage.

Hình 118 – Hiệu chỉnh thuộc tính Align cho Video chú gấu trên Stage

- 202 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Video hình chú gấu đã được đặt vào Layer 1. Bạn hãy sửa tên Layer 1 này thành
Bear.
Bước 2. Tạo mới một Layer, đặt tên cho nó là Fire. Bạn hãy vẽ lên Layer này một
hình chữ nhật màu đỏ, loại bỏ viền. Tiếp theo, bạn hãy convert nó thành
MovieClip. Trong bảng thuộc tính của MovieClip này, bạn chọn Filter là Blur, hiệu
chỉnh độ BlurX và BlurY là 41.
Bước 3. Bạn hãy kéo thanh đánh dấu Frame hiện tại trên TimeLine, xem vị trí cần
tạo quả cầu lửa xuất hiện. Bạn hãy bấm vào Frame tương ứng trên Layer Fire,
nhấn phím F6 để tạo một KeyFrame. Kích chuột phải lên quả cầu lửa, chọn Create
Motion Tween.

Hình 119 – Hiệu chỉnh vị trí phóng lửa


Chọn Frame kết thúc việc phóng lửa và kéo vị trí kết thúc của Tween về tại vị trí
Frame này. Tại Frame này bạn hãy kéo giãn quả cầu lửa này dài ra. Trên các vị trí
bên trong Tween, bạn hãy hiệu chỉnh vị trí của cầu lửa khớp với miệng chú gấu
(các vị trí đánh dấu đen trên TimeLine).

- 203 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Giờ đây, bạn có thể kiểm tra thành quả của mình. Nhấn Ctrl+Enter để kiểm tra.
Bạn có thể kết hợp với những video mà bạn xây dựng nên. Việc xây dựng một
video và sử dụng Flash để tạo kĩ xảo là một trải nghiệm khá thú vị đang chờ đợi
bạn đấy. Hi vọng bạn sẽ thực hiện kĩ xảo này một cách thành thạo.
Kĩ xảo cuộc chiến trên không của hai chú chim

Hình 120 – Kĩ xảo cuộc chiến trên không trung


Bạn sử dụng video có tên Bird.flv trong thư mục Video của CD đính kèm. Cũng
tương tự như trường hợp trên. Bạn tạo Layer Bird để chứa video mà bạn import
vào. Layer Light chứa quầng sáng đỏ bao quanh chú chim. Bạn cần tạo một
Motion Tween để hiệu chỉnh vị trí của quầng sáng luôn di chuyển và bao quanh
chú chim. Bạn cần hiệu chỉnh vị trí bắt đầu và kết thúc của quầng sáng phù hợp
với vị trí xuất hiện và biến mất của chú chim.
Tại vị trí chú chim thứ hai xuất hiện, bạn tạo một luồng sáng xanh phóng ra (tức
chú chim này phóng lửa về phía chú chim thứ nhất), nó nàm trên Layer One.
Luồng sáng phóng về phía trước. Do không phóng trúng chú chim 1, nên luồng
sáng sẽ bị vụt tắt khi sát biên màn hình. Khi vụt tắt, nó tạo ra một quầng sáng lớn.
Bạn hãy hiệu chỉnh các vị trí cho thích hợp trong Motion Tween dành cho luồng
sáng xanh này. Bạn hãy nhấn Ctrl+Enter để kiểm tra kết quả.

- 204 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Kĩ xảo người bay trên những chú ngựa


Đây cũng là một kĩ xảo tương đối đơn giản. Bạn chỉ cần tạo hai Layer: Layer 1
chứa nội dung video, Layer 2 chứa hình người. Bạn đặt người vào một vị trí thích
hợp trên cảnh quay, và sử dụng Motion Tween (hay Classic Tween) để tạo quỹ
đạo bay của nhân vật này.

Hình 121 – Kĩ xảo người bay

6.3. Tạo thước phim Flash tựa 3D


Flash mặc định không hỗ trợ các đối tượng đồ họa 3D. Nó không cung cấp cho
chúng ta các công cụ để tạo và phối màu 3D. Flash chỉ cung cấp cho ta công cụ tạo
ra sự dịch chuyển 3D và quay theo các góc trong không gian. Nếu bạn thật sự
muốn tạo một đối tượng động 3D, tôi khuyên bạn nên sử dụng đến các chương
trình chuyên dụng: Autodesk Maya là một sự lựa chọn hoàn hảo nhất. Tuy nhiên,
nếu bạn là người yêu thích Flash, bạn cũng có thể sử dụng Plugin hỗ trợ 3D –
FreeSpin3D. Đây cũng là một Plugin khá thú vị hỗ trợ 3D hoàn hảo. Nhưng Plugin

- 205 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

này có giá không rẻ chút nào. Nếu bạn muốn trải nghiệm một cảm giác miễn phí
với đồ họa 3D trong Flash, bạn có thể tạo dựng nó nhờ vào ngôn ngữ lập trình
ActionScript. Để tạo một thước phim 3D trên ActionScript, sẽ thuận lợi hơn nếu
chúng ta xây dựng trên thư viện mã nguồn mở PaperVision3D. Chúng tôi sẽ trình
bày khá chi tiết về thư viện này trong chương cuối của giáo trình. Một khó khăn là
bạn cần có một lượng kiến thức toán học khá vững chắc để tạo dựng các đối
tượng đồ họa 3D. Thư viện mã nguồn mở PaperVision3D được cung cấp cho hầu
hết các trình soạn thảo ActionScript, nhưng chúng tôi sẽ trình bày trên Flex
Buider bởi đây là trình soạn thảo ActionScript chuyên nghiệp nhất.
Dù không cung cấp cho ta các công cụ chuyên dụng để thiết kế 3D, nhưng với kĩ
thuật phối màu Gradient và kĩ thuật Layer, chúng ta có thể tạo dựng một thước
phim có “cách nhìn 3D”. Trong ví dụ sau đây, tôi sẽ trình bày cách xây dựng đoạn
phim đánh golf. Khi người đánh golf đánh vào quả bóng, thì quả bóng sẽ lăn và rơi
vào lỗ golf trên sân cỏ.
Bước 1. Tạo mới một Layer có tên là Glass. Bạn hãy phối màu Linear Gradient, và
chọn chế độ màu như hình bên dưới.

Hình 122 – Trò chơi golf: sân golf trên lớp glass.
Bước 2. Tạo lỗ golf trên sân golf. Tạo một Layer mới tên là hole. Trên Layer này,
bạn hãy tạo một hình Eclipse như sau.

- 206 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 123 – Trò chơi golf: Các bước tạo lỗ golf


Sau khi tạo xong lỗ golf, bạn bổ sung thêm một thanh dọc làm cờ cắm trên lỗ golf.
Sau khi hoàn tất bước này, bạn hãy đặt lỗ golf vào một ví trí thích hợp trên khung
trình diễn của bạn. Bạn cũng lưu ý rằng, khung trình diễn trong trường hợp này
rộng hơn theo chiều ngang sẽ thích hợp hơn so với khung trình diễn có chiều dọc
gần bằng hoặc lớn hơn chiều ngang. Tôi khuyến cáo bạn trong trường hợp này,
nên chọn tỉ lệ theo chuẩn HD là 8:3 (trường hợp của tôi là 850px theo chiều
ngang, 400px theo chiều dọc.

- 207 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 124 – Trò chơi golf: Hoàn tất lớp Hole


Bước 3. Tạo quả bóng golf. Hãy sử dụng công cụ vẽ hình Eclipse, tạo một khối
hình tròn (giữ Shift và kéo chuột). Sau đó hiệu chỉnh thuộc tính màu Gradient như
bên dưới. Quả bóng golf này nằm trên Layer ball.

Hình 125 – Trò chơi golf: Tạo quả bóng chơi golf
Bước 4. Tạo thanh chơi golf. Thanh chơi golf này sẽ đánh vào quả bóng để tạo
hiệu ứng đánh golf. Thanh chơi golf được đặt trên Layer line.

- 208 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 126 – Trò chơi golf: Tạo thanh đánh golf


Lưu ý: bạn cần đặt Layer thanh đánh bóng vào sau Layer quả bóng chơi golf.
Tiếp theo, bạn sẽ sử dụng kĩ thuật Motion Tween để tạo hiệu ứng cây đánh golf
đánh vào quả bóng chơi golf. Trong trường hợp bên dưới, tôi sử dụng kết hợp
công cụ 3D Rotation.

Hình 127 – Trò chơi golf: Tạo cảnh đánh bóng


Khi sử dụng Motion Tween, bạn hiệu chỉnh vị trí kết thúc của nó là tại Frame thứ
5. Trên các Layer còn lại, bạn bôi đen Layer thứ 5 tương ứng (nhấn thêm phím

- 209 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Ctrl), sau đó nhấn phím F5 để sao chép Frame 1 đến các Frame còn lại (quan sát
khung TimeLine ở trên).
Bước 5. Tạo hiệu ứng quả bóng lăn. Tại Frame thứ 5 trên Layer ball, bạn nhấn
phím F6 để tạo mới một KeyFrame. Sau đó, sử dụng Motion Tween để tạo chuyển
động cho quả bóng tiến về phía lỗ đánh golf.

Hình 128 – Trò chơi golf: Tạo cảnh quả bóng di chuyển
Đường di chuyển của quả bóng được chia làm hai phần: Phần 1 – từ vị trí ban đầu
đến lỗ golf (Frame 5 đến Frame 60). Phần 2 – Từ vị trí bề mặt lỗ golf xuống dưới
lỗ golf (Frame 60 đến Frame 65).
Bước 6. Theo cách quan sát của chúng ta, thì từ giai đoạn quả bóng trên bề mặt
xuống đến đấy của lỗ golf, thì quả bóng sẽ biến mất. Để thực hiện điều này, ta sẽ
sử dụng kĩ thuật Layer. Bạn sử dụng công cụ Lasso, chọn trên Layer Glass một
phần như hình minh họa bên dưới.

Hình 129 – Trò chơi golf: Kĩ thuật Layer


Lưu ý: Bạn nên sử dụng thuộc tính Lock cho các Layer còn lại (trừ Layer glass và
Layer hole).
Sau khi chọn được vùng chọn như trên, bạn sử dụng chức năng Distribute to
Layers. Khi đó, sẽ xuất hiện một số Layer mới, bạn hãy nhóm các Layer này thành

- 210 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

một nhóm bằng một Folder mới (bạn đặt tên cho nó là LayerTech). Sau đó, kéo
Folder này lên trên tất cả các Layer còn lại.

Hình 130 – Trò chơi golf: Thanh TimeLine trong kĩ thuật Layer
Đến đây, hầu như bạn đã hoàn tất thước phim. Tuy nhiên để cho phim được thật
hơn, chúng ta sẽ bổ sung thêm hiệu ứng đổ bóng. Sau đây là dự án hoàn chỉnh.

Hình 131 – Trò chơi golf: Dự án hoàn chỉnh


Với dự án golf này, hi vọng bạn sẽ có cảm giác 3D sống động. Chúng ta chỉ đơn
thuần sử dụng những kĩ thuật đơn giản được cung cấp trong Flash: hiệu ứng
Shadow, hiệu ứng Gradient và kĩ thuật Frame, và kết quả thu được là một thước
phim tựa 3D.
Nếu bạn muốn tạo một hiệu ứng 3D tựa như trái đất quay, bạn cũng hoàn toàn có
thể dựa vào các hiệu ứng này. Khi đó, bạn cần một bức ảnh về hình ảnh trái đất
được phát họa trên một mặt phẳng (chứ không phải là trên mặt cầu). Bạn kết hợp
với công cụ Fill Color (bạn chọn là kiểu Bitmap) với kĩ thuật Shape Tween. Lúc
này, bạn sử dụng công cụ Gradient Transform để tạo sự dịch chuyển ảnh trong
một khối hình tròn. Đây cũng là một cách thức khá thú vị và cực kì đơn giản. Bạn
hãy thực hiện dự án này xem như bài tập.

- 211 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Nếu bạn muốn tạo một thước phim 3D với những hiệu ứng phức tạp (các nhân
vật, đối tượng quay trong không gian) thì dường như việc áp dụng những kĩ thuật
nêu trên là quá khó khăn. Khi đó, bạn nên chuyển sang một chương trình như
Autodesk Maya, bởi lẻ Adobe Flash cũng không hỗ trợ cách xây dựng dạng phim
3D hoàn chỉnh như thế (trừ phi bạn lập trình hoàn toàn trên ActionScript).

6.4. Ghép nối nhiều hoạt cảnh


Khi bạn xây dựng một bộ phim hoạt hình, bạn cần đến nhiều hoạt cảnh. Việc ghép
nối nhiều hoạt cảnh trong Flash được thực hiện tự động. Bạn hãy tạo các cảnh
quay khác nhau trên các Scene khác nhau. Các hoạt cảnh sẽ được ghép nối tự
động theo dãy các Scene đã được sắp xếp.

6.5. Kĩ thuật mặt nạ mask

Hình 132 – Kĩ thuật mặt nạ Mask


Mặt nạ là một kĩ thuật cho phép bạn tạo riêng một khung trình chiếu với hình
dạng phức tạp. Mọi hoạt động chỉ có thể trình chiếu bên trong mặt nạ.
Để tạo một mặt nạ, bạn cần tạo một khung trình chiếu. Để tạo khung này, bạn chỉ
đơn thuần vẽ một hình thể nào đó trên một Layer tạm gọi là Layer Mask. Bạn tiếp
tục tạo thêm một Layer thứ hai để tạo hoạt cảnh. Để tạo mặt nạ, bạn hãy đặt
Layer Mask lên trên layer hoạt cảnh, kích chuột phải vào Layer Mask này, và chọn
Mask. Nếu bạn có nhiều Layer hoạt cảnh cần tạo bởi một Layer Mask, bạn chỉ việc
kéo chọn Layer này vào trong Layer Mask ở khung Layer.

- 212 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Đến đây, chắc bạn đã tưởng tượng làm thế nào để tạo khung hình phức tạp cho
các video ? Layer Mask bạn hãy tạo khung trình chiếu, Layer video là layer hoạt
cảnh. Thế là công việc của bạn đã hoàn tất rồi !
Remarks: việc sử dụng mặt nạ không buộc bạn phải áp dụng cho toàn cảnh quay.
Bạn có thể sử dụng nhiều mặt nạ đồng thời trong một cảnh quay. Một mặt nạ có
tác dụng cho một lớp Layer chứa đối tượng.
Một vài ví dụ sử dụng kĩ thuật mặt nạ Mask
Ví dụ về việc sử dụng mặt nạ động: trong ví dụ này, bạn sẽ tạo một mặt nạ động
cho một lớp đối tượng. Bạn sẽ sử dụng hai lớp: Layer Art và Layer Mask.

Hình 133 – Mặt nạ động


Bạn hãy sử dụng Motion Tween (hoặc Classic Tween) để tạo hiệu ứng dịch
chuyển lớp mặt nạ dọc theo đường nghệ thuật. Tiếp theo, bạn hãy kích chuột phải
lên lớp Mask, chọn Mask. Lập tức lớp mặt nạ chuyển động này sẽ tạo hiệu ứng
xuất hiện từng phần cho đối tượng hình nghệ thuật.
Ví dụ về việc sử dụng mặt nạ biến hình: trong ví dụ này, bạn sẽ tạo một mặt nạ
biến hình. Hoàn toàn tương tự như ví dụ trên, nhưng chỉ khác một điểm là trong
ví dụ trên, bạn sử dụng Motion Tween (hoặc Classic Tween), còn trong ví dụ này,
bạn sử dụng Shape Tween.

- 213 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 134 – Mặt nạ biến hình


Mặt nạ động tạo ra một hiệu ứng khá thú vị. Mặt nạ biến hình có chức năng cũng
không kém thú vị. Bạn hoàn toàn có thể sử dụng hai loại mặt nạ này tạo ra các
hiệu ứng hay khi trình chiếu một Album ảnh.
Ví dụ về việc sử dụng mặt nạ có thể di chuyển được (draggable mask). Để tạo loại
mặt nạ này, chúng ta cần tạo một đối tượng để làm mặt nạ. Đối tượng này phải là
biểu tượng movieclip hoặc button. Thông thường, người ta sẽ sử dụng biểu tượng
movieclip.
Đầu tiên, bạn hãy tạo hai Layer: Layer 1 chứa ảnh nền (tạm gọi là background),
Layer 2 tạo một hình ngũ giác để làm mặt nạ (tạm gọi là mask).

- 214 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 135 – Tạo một draggable mask – Bước 1


Để tạo được hiệu ứng này, bạn cần sử dụng ActionScript. Ở đây, chúng ta sẽ sử
dụng ActionScript nhờ vào Code Snippets. Bạn chọn đối tượng hình ngũ giác, bấm
vào biểu tượng Code Snippets.

Hình 136 – Tạo một draggable mask – Bước 2


Bạn chọn nhóm Actions > Drag and Drop. Sau đó, bạn hãy nhấp đôi chuột vào
biểu tượng này. Bạn hãy nhấn Ctrl+Enter để kiểm tra. Tại thời điểm này, bạn có
thể di chuyển đối tượng hình ngũ giác này.

- 215 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Tiếp theo, chúng ta sẽ sử dụng kĩ thuật Mask. Bạn hãy chọn Layer Mask, kích
chuột phải, và chọn Mask. Bạn sẽ thu được kết quả như hình bên dưới.

Hình 137 – Tạo một draggable mask – Bước 3


Bạn hãy kiểm tra movie một lần nữa bằng cách nhấn tổ hợp Ctrl+Enter. Bạn sẽ
thấy rằng, hiệu ứng mask đã hoạt động. Tuy nhiên, bạn không thể di chuyển được
đối tượng dùng làm mặt nạ này. Sở dĩ như vậy là vì, khi bạn sử dụng hiệu ứng
mask, đối tượng movieclip được làm mặt nạ sẽ được tự động ấn định thuộc tính
buttonMode là false. Chúng ta cần thay đổi thuộc tính này. Bạn hãy nhấn phím F9
để quay lại với khung soạn thảo ActionScript. Sau đó, bổ sung dòng lệnh
movieClip_1.buttonMode = true;
Bạn có thể tham khảo toàn bộ mã lệnh của chương trình như bên dưới.
movieClip_1.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag);
function fl_ClickToDrag(event:MouseEvent):void{
movieClip_1.startDrag();
}
stage.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop);
function fl_ReleaseToDrop(event:MouseEvent):void{
movieClip_1.stopDrag();
}
movieClip_1.buttonMode = true;
Tạo SlideShow ảnh: Trong ví dụ này, tôi sẽ hướng dẫn cho bạn cách tạo một
SlideShow ảnh nhờ vào kĩ thuật Mask. Để tạo được SlideShow ảnh này, bạn hãy
sử dụng một vài bức ảnh và import vào thư viện. Trong ví dụ này, tôi sử dụng 3
ảnh. Bạn tạo 6 Layer, 3 Layer chứa ảnh, và 3 Layer dùng để tạo mặt nạ. Mỗi mặt
nạ sẽ được đặt ngay trên bức ảnh. Bạn có thể tham khảo hình minh họa bên dưới.

- 216 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 138 – Tạo Slide ảnh – Bước 1


Hiệu ứng cho mặt nạ Mask 1. Bạn hãy tạo một hình chữ nhật có kích thước nhỏ,
nằm ở góc trên bên phải của khung trình chiếu.

Hình 139 – Tạo Slide ảnh – Bước 2

- 217 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Chọn đối tượng hình vuông này, kích chuột phải và chọn Create Motion Tween.
Bạn hiệu chỉnh độ rộng của Tween này, sao cho vị trí kết thúc của nó nằm ở
Frame 15. Sau đó, bạn hiệu chỉnh kích thước của hình vuông sao cho nó chiếm
toàn khung trình chiếu. Tại Frame thứ 19 của Layer Pic1, nhấn phím F5 (hoặc F6)
để sao chép toàn bộ ảnh trên Frame thứ nhất lên các Frame 2 đến 19. Chọn Layer
Mask 1 này, kích chuột phải và chọn Mask.
Hiệu ứng cho mặt nạ Mask 2. Hoàn toàn tương tự với mặt nạ Mask1. Lần này, bạn
hãy tạo một dãy các ngôi sao. Tại Frame 20 của Layer Mask2, bạn nhấn phím F6,
sử dụng công cụ PolyStar để tạo các ngôi sao.

Hình 140 – Tạo Slide ảnh – Bước 3


Kích chuột phải lên các đối tượng ngôi sao này, chọn Create Motion Tween. Hiệu
chỉnh độ rộng của Tween này sao cho vị trí kết thúc của nó nằm ở Frame 35 của
Layer Mask 2. Tại Frame 39 của Layer Pic2, nhấn phím F5 hoặc F6 để sao chép
Frame 20 lên các Frame từ 21 đến 39. Kích chuột phải lên Layer Mask 2, chọn
Mask.
Hiệu ứng cho mặt nạ Mask 3. Tương tự như hai mặt nạ trên. Lần này chúng ta sẽ
tạo hiệu ứng cắt lát. Trên Layer Mask 3, bạn hãy tạo các hình chữ nhật (không
viền), độ rộng 1 pixel. Hãy sao chép hình chữ nhật này thành nhiều hình và sắp
xếp chúng gần nhau (không dính liền nhau). Chúng bao phủ toàn khung trình
chiếu. Trong hiệu ứng mặt nạ lần này, ta sử dụng loại mặt nạ biến hình. Bạn hãy
chọn Layer Mask 3, kích chuột phải và chọn Shape Tween. Tại Frame 55 của

- 218 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Layer Mask3, nhấn phím F6. Bạn tiếp tục bấn vào KeyFrame này (Frame thứ 55
của Layer Mask 3 này), để chọn tất cả các hình chữ nhật. Giữ phím Ctrl và rê
chuột để sao chép tất cả chúng và sắp xếp chúng sát với các hình chữ nhật trước.
Bạn tiếp tục công việc này cho đến khi các hình chữ nhật chồng khít nhau và che
khuất khung trình chiếu. Tại Frame thứ 60 của Layer Pic3, nhấp phím F5 hoặc F6.
Chọn Layer Mask 3, kích chuột phải và chọn Mask.

Hình 141 – Tạo Slide ảnh – Bước 4


Bạn hãy quan sát lại cách bố trí các Frame trên TimeLine theo hình bên dưới.

Hình 142 – Tạo Slide ảnh – Bước 5


Để kiểm tra kết quả cuối cùng. Bạn hãy nhấp tổ hợp phím Ctrl+Enter. Hi vọng bạn
sẽ hài long với các hiệu ứng này. Bạn hoàn toàn có thể tạo ra các hiệu ứng của
riêng bạn bằng cách sử dụng hai loại mặt nạ nêu trên.

- 219 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

6.6. Tạo các nút nhấn điều khiển


Trong thư viện của Flash cung cấp cho ta rất nhiều template của các nút điều
khiển: nút điều khiển có kiểu dáng chuẩn của Windows, nút điều khiển tạo sẵn.
Bạn cũng có thể tự tạo một kiểu nút điều khiển cho riêng mình. Trong phần này,
chúng ta sẽ tìm hiểu về cách sử dụng các nút điều khiển tạo sẵn để điều khiển
phim trong Flash.
Tạo nút Play và Stop
Bật hộp thoại Library Button: Windows>Common Libraries>Button. Tiếp đến
bạn hãy chọn một loại Button mà bạn cho là phù hợp.

Hình 143 – Tạo nút nhấn điều khiển


Tiếp đến, bạn hãy cài đặt tên hiển thị cho nó. Trong Action, bạn hãy sử dụng chức
năng quản lý sự kiện kích chuột. Trong hàm sự kiện tương ứng, với hành động
play, bạn hãy dùng hàm play (nhưng bạn cần hiệu chỉnh cho đoạn phim không
được chơi tự động nhờ vào hàm stop), với hành động dừng phim bạn sử dụng
hàm stop.

Tạo thanh PlayBack


Bạn hãy tạo một Movie, sau đó bạn hãy sử dụng thanh Slider để làm thanh
playback như hình minh họa

- 220 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 144 – Tạo thanh Playback


Bạn cài đặt tên hiển thị cho đối tượng Slider là playbar. Trong khung soạn thảo
Action, bạn viết nội dung như sau
stop();
playbar.maximum = 300;
var allowed:Boolean = false;
playbar.addEventListener(MouseEvent.MOUSE_MOVE, playbacknow);
function playbacknow(e:MouseEvent):void{
if (allowed)
gotoAndPlay(playbar.value);
}
playbar.addEventListener(MouseEvent.MOUSE_DOWN, PlayIt);
function PlayIt(e:MouseEvent):void{
allowed = true;
}
playbar.addEventListener(MouseEvent.MOUSE_UP, StopIt);
function StopIt(e:MouseEvent):void{
allowed = false;
}

Ở trong đoạn chương trình này, playbar.maximum được gán bằng số Frame trong
Scene. Biến allowed tương ứng với sự kiện chuột được ấn xuống hay thả ra. Khi

- 221 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

kết hợp sự kiện ấn chuột và di chuyển chuột trên thanh Slider này, sẽ nhảy đến
Frame được chỉ định và tiếp tục trình diễn nhờ vào hàm gotoAndPlay.

6.7. Xuất bản một Movie


Sau khi bạn đã hoàn chỉnh một video, công việc tiếp theo là bạn cần xuất bản nó.
Trước khi xuất bản, bạn cần hiệu chỉnh một vài thông số liên quan trong mục
Publish Setting. Để xuất bản phim, bạn hãy chọn chức năng Export Movie. Trong
hộp thoại xuất hiện, bạn hãy chọn định dạng *.swf.
Với định dạng swf này, bạn có thể chơi nó trong trình Flash Player hoặc trong
một file html với trình duyệt có cài đặt plugin flash. Đều này đôi lúc cũng phiền
nhiễu. Bạn hoàn toàn có thể chọn định dạng video khác, tuy nhiên nó không giữ
lại những hiệu ứng tương tác với các nút nhấn. Để đơn giản, Flash Player cung
cấp cho ta chức năng tạo trình movie khả thi *.exe. Để tạo một movie dạng này,
bạn hãy mở movie vừa xuất bản bằng Flash Player, sau đó chọn File >Create
Projector, và nhập tên movie của bạn.
Xuất bản tập tin cho thiết bị di động. Để xuất bản tập tin cho thiết bị di động,
chúng ta có hai hướng tiếp cận:
- Nếu thiết bị di động chỉ hỗ trợ flash lite dưới dạng plugin: chúng ta cần chọn lựa
khi tạo mới một dự án trong flash (chọn phiên bản flash lite phù hợp). Bạn cũng
cần lưu ý rằng, không phải dòng điện thoại nào cũng hỗ trợ ActionScript 3, vì vậy
bạn cũng cần lưu ý. Sự hỗ trợ này phụ thuộc vào phiên bản flash lite. Việc xuất
bản một tập tin cho thiết bị di động là hoàn toàn tự động, hoặc bạn có thể sử dụng
chức năng Export Movie như trên.
- Nếu thiết bị di động hỗ trợ Adobe AIR (như các dòng máy tính bảng tablet): khi
tạo một dự án, chúng ta cần chọn dự án Adobe AIR. Việc xuất bản tập tin đóng gói
để cài đặt trên Adobe AIR không diễn ra tự động. Chúng ta cần thiết lập các thông
số cấu hình cho nó. Một tập tin cài đặt cho AIR có phần mở rộng là *.air (nếu đã
được đính kèm tập tin chứng thực) hoặc *.airi (nếu chưa đính kèm tập tin chứng
thực). Chúng ta chỉ có thể cài đặt lên AIR đối với tập tin đã chứng thực *.air. Để
thiết lập các thông số cho tập tin cài đặt trên AIR, ta chọn File > Adobe Air 2
Settings.
a) Mục General

- 222 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 145 – Thiết lập tập tin cài đặt trên air – Mục General

 Output file: Tên tập tin cài đặt sẽ xuất bản.


 Windows Installer (*.exe): Tên tập tin cài đặt xuất bản ở dạng *.exe.
 File name: Tên tập tin sau khi cài đặt.
 Apps name: Tên của ứng dụng.
 Version: Tên phiên bản.
 Apps ID: ID của ứng dụng.
 Description: một vài đặt tả về ứng dụng.
 Copyright: bản quyền.
 Windows Style: dạng hiển thị của cửa sổ Windows dành cho ứng dụng AIR.
Có ba dạng hiển thị: System Chrome (theo hệ thống), Custom Chrome (tùy
chỉnh) và Transparent (trong suốt).

b) Mục Signature

- 223 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 146 – Thiết lập tập tin cài đặt trên air – Mục Signature
Tạo một tập tin chứng thực. Nếu chưa có một tập tin chứng thực, chúng ta bấm
vào nút Create.

 Publisher name: tên nhà xuất bản đã tạo ra tập tin.


 Organization unit: đơn vị tổ chức.
 Organization name: tên tổ chức.
 Country: quốc gia.
 Password/Confirm password: mật khẩu bảo vệ và nhập lại mật khẩu.
 Type: thuật toán mã hóa.
 Save as: vị trí lưu tập tin chứng thực.

Hình 147 – Tạo tập tin chứng thực.


c) Mục Icon: chọn biểu tượng cho chương trình. Chúng ta cần tạo ra 4 kích thước
cho biểu tượng: 16x16, 32x32, 48x48 và 128x128.

- 224 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

d) Mục Advanced

Hình 148 – Thiết lập tập tin cài đặt trên air – Mục Advanced.

 Associated file type: chương trình sẽ quản lý tập tin nào.


 Initial Windows Settings: các thông số về cửa sổ Windows – chiều rộng
(width), chiều cao (height), tọa độ x, tọa độ y, độ rộng tối đa (maximum
width), độ cao tối đa (maximum height), độ rộng tối thiểu (minimum
width), độ cao tối thiểu (minimum height), cho phép hiển thị ở chế độ cực
đại (maximizable), cho phép hiển thị ở chế độ tối thiểu (minimizable), cho
phép thay đổi kích thước (resizable), cho phép hiển thị (visible).
 Other settings: các thiết lập khác – install folder (thư mục cài đặt), program
menu folder (thư mục hiển thị trong menu program).

Sau khi thiết lập xong các thông số, bạn chọn Publish để xuất bản (hoặc nhâp Ok).
Xuất bản tập tin cài đặt trên AIR cho Android. Cũng tương tự như việc xuất bản
tập tin AIR chạy trên Windows, nhưng tập tin AIR trên Android có phần mở rộng
là *.apk. Nếu không có điều kiện để sở hữu một thiết bị chạy Android, ta có thể sử
dụng Android SDK để tạo môi trường giả lập cho các thiết bị. Sau đây, tôi sẽ giới
thiệu cho bạn, cách cài đặt Android SDK, cài đặt AIR trên hệ điều hành giả lập này
cũng như các ứng dụng chạy trên AIR.
Bước 1. Chua� n bị
+ Hệ đie� u hà nh họ Windows (có the� MacOS hoặ c Linux, Windows 7).

- 225 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

+ Flash Professional CS5 full trở lê n (yê u ca� u Flash Professional CS5.5)
+ Adobe Device Central CS5 trở lê n (yê u ca� u CS5.5).
+ Android SDK (tả i tạ i http://developer.android.com/sdk/index.html )
+ Adobe AIR 2 trở lê n (AIR 2.6 được tı́ch hợp sa� n trong CS5.5)
Bước 2. Giả i né n bộ Android SDK, sau đó chạ y tậ p tin SDKManager.exe trong thư
mụ c giả i né n. Chương trı̀nh quả n lý sẽ tự độ ng qué t đe� tı̀m cá c cậ p nhậ t mới nha� t.
Cô ng đoạ n nà y tie� n hà nh khá mất thời gian. Ta chỉ cần chọn Accept và nha� p Ok.
Bước 3. Ta được thư mụ c cà i đặ t có dạ ng như bê n dưới:

Hình 149 – Cấu trúc thư mục Android SDK


Bước 4. Quay lạ i với SDK Manager, chọ n thẻ Virtual Devices

Hình 150 - Thẻ Virtual Devices


Nha� p và o New đe� tạ o mới mộ t Emulator dù ng đe� Test. Vı́ dụ trong trường hợp
nà y tô i sử dụ ng SamSung Galaxy S. Đe� xem hệ đie� u hà nh được cà i đặ t trê n thie� t bị
nà y là Android phiê n bả n nà o, ta ca� n kie� m tra trong Adobe Device Central.
+ Khởi độ ng Adobe Device Central.
+ Và o File > New Project.
+ Chờ đợi chương trı̀nh tự độ ng qué t cá c thie� t bị ho� trợ, sau đó nha� p và o ô tı̀m
kie� m gõ thie� t bị ca� n tı̀m. Vı́ dụ trong trường hợp nà y, tô i tı̀m SamSung Galaxy S.

- 226 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 151 - Tìm kiếm Device Samsung Galaxy S


+ Nha� p đô i và o thie� t bị tı̀m được đe� xem thô ng so� trước khi tạ o thie� t bị giả lậ p
Emulator. Trong cửa sổ hiện ra, ta có thể đọc các thông số liên quan đến thiết bị
Samsung Galaxy S.
Vı́ dụ , trong bả ng thô ng tin nà y, tô i đọ c các tham so� : kı́ch thước mà n hı̀nh
(Display size) – 480x800 và hệ điều hành (OS) – Android 2.2, đặc biệt, thiết bị
này hỗ trợ chế độ đa chạm (cảm ứng đa điểm – Multitouch). Ta cần lưu ý thông số
đa chạm này để lập trình sự kiện tương ứng trên ActionScript. Nếu thiết bị nào
không hỗ trợ đa chạm, thì ta không thể sử dụng các gói sự kiện liên quan đến đa
chạm này.

Hình 152 - Các thông số của Samsung Galaxy S


Quay trở lạ i SDK Manager. Nha� p và o nú t New, mộ t cửa so� sẽ hiệ n ra.

- 227 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 153 - Tạo mới một Emulator


+ Mụ c Name: nhậ p tê n thie� t bị Emulator. Tê n nà y do chú ng ta đặ t nhưng khô ng
được chứa kı́ tự đặ c biệ t (như kı́ tự tra� ng,…).
+ Mụ c Target: chọ n đú ng phiê n bả n củ a hệ đie� u hà nh Android trên thiết bị cần giả
lập. Vı́ dụ tô i chọ n Android 2.2 tương ứng với hệ điều hành được cài đặt trên
Samsung Galaxy S.
+ Thô ng so� Resolution: nhậ p và o kı́ch thước mà n hı̀nh đọ c được trong Adobe
Device Central, vı́ dụ 480x800.
Cá c mụ c khá c, đe� tham so� mặ c định. Cuo� i cù ng nha� p và o nú t Create AVD.
Khi đó , trong cửa so� SDK Manager sẽ xua� t hiệ n thie� t bị mà bạ n vừa mới tạ o.
Bước 5. Nha� p chọ n thie� t bị vừa tạ o, sau đó nha� p nú t Start đe� khởi độ ng Emulator.
Chờ đợi trong giâ y lá t cho đe� n khi mô i trường giả lậ p củ a thie� t bị đã hoà n chı̉nh.

- 228 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 154 - Màn hình chào đón của Samsung Galaxy S


Bước 6. Mở thư mụ c cà i đặ t Adobe Flash CS5.5:
..\Adobe\Adobe Flash CS5.5\AIR2.6\runtimes\air\android\emulator\
và copy tậ p tin Runtime.apk sang thư mụ c:
..\platform-tools\
bê n trong thư mụ c cà i đặ t củ a Android SDK.
Bước 7. Khởi độ ng Command Promt (và o Run, nhậ p cmd và nha� n Enter), dù ng
lệ nh
>CD đường_dẫn (nhấn Enter)
trong đó,
đường_dẫn: là đường dẫn chỉ đến thư mục ..\platform-tools
đe� nhả y đe� n thư mụ c hiệ n thời là ..\platform-tools\ ở trê n.
Bước 8. Gõ và o lệ nh
adb install Runtime.apk (nhấn Enter)
và chờ đợi quá trı̀nh cà i đặ t mô i trường AIR cho Emulator hoà n ta� t. Ne� u thà nh
cô ng, thı̀ sẽ nhậ n được thô ng bá o success.
Bước 9. Tạ o mộ t gó i cà i đặ t cho phé p chạ y trê n AIR. Khởi độ ng Flash CS5.5

- 229 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 155 - Tạo dự án AIR cho Android


Chọ n AIR for Android. Sau đó, hã y thie� t ke� và lậ p trı̀nh cho ứng dụ ng củ a bạ n (lưu
ý trong trường hợp nà y, Android 2.2 đã ho� trợ ActionScript 3).
Cô ng việ c xua� t bả n tậ p tin cho Android hoà n toà n tương tự như xua� t bả n tậ p tin
cho AIR được giới thiệ u ở phần trên. Nhưng ke� t quả , ta khô ng thu được tậ p tin
*.air mà là *.apk. Giả sử tô i đặ t tê n cho tậ p tin ứng dụ ng là apps.apk.
Bước 10. Copy tậ p tin apps.apk và o thư mụ c ..\platform-tools\ ở trê n.
Bước 11. Gõ và o dò ng lệ nh sau trong Command Promt:
adb install apps.apk (nhấn Enter)
Sau khi cà i đặ t hoà n ta� t, ta nhậ n được thô ng bá o success như ở bước 7.
Bước 12. Quay lạ i mô i trường giả lậ p Emulator, trong mà n hı̀nh chı́nh, ta chọ n
ứng dụ ng mà ta vừa cà i đặ t.
Vı́ dụ , ứng dụ ng củ a tô i vừa cà i đặ t có tê n là Android01 như ở trê n. Ta sử dụ ng trỏ
chuộ t đe� nha� p đô i và o nó , hoặ c cá c phı́m mũ i tê n đe� di chuye� n và Enter đe� chọ
ứng dụ ng. Phı́m Esc đe� quay lạ i mà n hı̀nh trước đó .

Hình 156 - Ứng dụng sau khi được cài đặt

- 230 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Để gỡ bỏ ứng dụng ra khỏi môi trường giả lập, ta truy cập vào Settings >
Application > Manage Applications. Sau đó, nhấp đôi vào ứng dụng cần gỡ bỏ và
chọn Uninstall và Ok.
Xuất bản tập tin cho các thiết bị sử dụng hệ điều hành iOS. Hoàn toàn tương
tự như xuất bản tập tin cho AIR ở trên, tuy nhiên trong trường hợp này, ta cần có
thêm tập tin *.mobileprovision. Bạn có thể tìm thấy tập tin này trong bộ giả lập
iOS SDK của Apple. Cũng cần lưu ý rằng, tập tin sử dụng trong trường hợp này là
*.ipa – một dạng tập tin cài đặt sử dụng trên iOS.

6.8. Xuất bản một tập tin Flash trong suốt trên trình duyệt
Nếu thường xuyên duyệt web, chúng ta có thể thấy trên nhiều website có những
thước phim Flash động có thể di chuyển trên trang web nhưng không che khuất
các nội dung trên trang web và đặc biệt không có khung hình bao quanh các đối
tượng trong phim Flash đó.
Trong movie bên dưới, trên stage (màu xanh nước biển) có các đối tượng: mây,
chim hải âu, cây dừa và hoa. Khi xuất bản tập tin Flash, ta cho phép màu của stage
trở nên trong suốt thì ta sẽ nhận được ứng dụng chỉ có các đối tượng nêu trên.
Nếu ứng dụng sử dụng trên web (chạy trên Flash Plugin) thì phần trong suốt của
stage sẽ hiển thị nội dung trên web; nếu ứng dụng chạy trên AIR (như các ứng
dụng AIR cho Desktop chẳn hạn) thì ta chỉ thấy các đối tượng mà không thấy
khung viền bao quanh. Trong trường hợp này, đối tượng dường như đang hoạt
động trên màn hình chứ không phải đang hoạt động trên cửa sổ của AIR. Đối với
trường hợp này, ta đã tìm hiểu ở mục xuất tập tin cho AIR. Trong trường hợp này,
ta sẽ tìm hiểu cách làm trong suốt phần nền cho các ứng dụng chạy trên web. Hãy
quan sát movie sau đây với đầy đủ màu nền của stage và các đối tượng khác.

- 231 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 157 – Phim Flash với các đối tượng mây, chim hải âu, cây dừa và hoa

Hình 158 – Phim Flash trong suốt trên trình duyệt


Để tạo một thước phim Flash trong suốt như thế này, ta chỉ thay đổi phần thiết
lập Publish Settings khi xuất bản một tập tin Flash. Dù màu nền ta có thiết lập là

- 232 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

màu nào đi nữa, thì với tùy chỉnh bên dưới đây, màu nền của phim sẽ luôn trong
suốt.
Bước 1. Hãy thiết kế một phim Flash với màu nền tùy chỉnh, nhưng cần lưu ý
rằng, ta không được phép sử dụng một đối tượng, một hình nền để làm hình nền
cho thước phim.
Bước 2. Vào File > Publish Settings. Trong hộp thoại hiện ra, chọn thẻ Flash, chọn
chức năng Windows Mode là Transparent Windowsless.

Hình 159 – Hộp thoại Publish Settings


Bước 3. Nhấn Publish để xuất bản tập tin.
Nếu muốn đưa phim này vào trong các website, ta chỉ cần mở tập tin htm lên và
sao chép đoạn mã sau:
<div id="flashContent" style=” width:100%; height:100%; margin-top:330px;
margin-left:0px;”>

- 233 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550"


height="400" id="index" align="middle">
<param name="movie" value="index.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#0066ff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="transparent" />
<param name="scale" value="showall" />
<param name="menu" value="false" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="index.swf" width="550"
height="400">
<param name="movie" value="index.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#0066ff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="transparent" />
<param name="scale" value="showall" />
<param name="menu" value="false" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash"><img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.g
if" alt="Get Adobe Flash player" /></a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
Cần lưu ý đến các thẻ được in đậm.

- 234 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

6.9. Tương tác giữa ActionScript và JavaScript


Để tạo tương tác giữa AS và JS, ta sử dụng đối tượng ExternalInterface. Khi tạo
mối tương tác từ JS, ta sử dụng phương thức callBack và ngược lại, ta sử dụng
phương thức call.
Ví dụ sau đây cho phép thực hiện việc gọi qua lại giữa AS và JS.
a) Tạo một movieClip trong Flash như sau:

Hình 160 – Gửi thô ng tin từ ActionScript sang JavaScript.


Đặt tên cho TextArea là theText và Button là button. Sau đó, viết AS cho nút nhấn
này như sau:
import flash.external.*;
import flash.events.MouseEvent;

var methodName:String = "sendTextFromHtml";


var method:Function = recieveTextFromHtml;
ExternalInterface.addCallback(methodName, method);
var wasSuccessful:Boolean = ExternalInterface.available;

function recieveTextFromHtml(t) {
theText.text = t;
}

button.addEventListener(MouseEvent.CLICK, buttonClick);
function buttonClick(e:MouseEvent) {
ExternalInterface.call("recieveTextFromFlash", theText.text);
theText.text = "";
}

- 235 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

b) Viết một trang html như sau:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AS comunicates JS</title>
<script language="javascript" >
function recieveTextFromFlash(Txt) {
document.getElementById('htmlText').value = Txt;
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<textarea name="htmlText" id="htmlText" style="width:450px;
height:200px;"> </textarea>
<br />
<input style="margin-left:175px;" type="button" name="sendToFlash"
id="sendToFlash" value="Send Text To AS"
onclick="getElementById('flash').sendTextFromHtml(htmlText.value);
document.getElementById('htmlText').value = ''" />
</form>
<div align="left">
<embed src="myFlash.swf" id="flash" quality="high" scale="exactfit"
width="450" height="250" name="squambido" align="middle"
allowscriptaccess="always" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</div>
</body>
</html>
Trong đó, myFlash.swf là tập tin Flash đã tạo ở bước trên. Khi chạy chương trình,
ta thu được kết quả như sau:

- 236 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Hình 161 – Gửi dữ liệ u qua lạ i giữa ActionScript và JavaScript.
Khi nhập nội dung vào TextArea và nhấp nút “Send Text To AS” của trang Html
thì nội dung trên sẽ được chuyển sang TextAre của Flash. Và ngược lại, khi gõ nội
dung vào TextArea của Flash và nhấp nút “Send To JS” thì nội dung sẽ hiển thị lên
TextArea của trang Html.

6.10. Lập trình Socket trên Adobe AIR


Thô ng thường, trong cá c ứng dụ ng Game trực tuye� n cá c thà nh viê n có the� gửi cá c
thô ng điệ p cho nhau. Cá c thô ng điệ p nà y được gửi trực tie� p thô ng qua Socket. Mô
hı̀nh mạ ng được sử dụ ng trong trường hợp nà y là client – server. Cá c thà nh viê n
có the� gửi trực tie� p đe� n nhau mà khô ng ca� n thô ng qua mộ t server trung gian.
Những dự á n game lớn, thường sẽ sử dụ ng mộ t server trung gian đe� thực hiệ n
nhiệ m vụ nà y. Tuy nhiê n trong giá o trı̀nh nà y, tô i sẽ minh họ a mộ t vı́ dụ đơn giả n
là gửi thô ng điệ p trực tie� p giữa hai má y. Thường trường hợp nà y á p dụ ng cho cá c
game có 2 người chơi (chơi qua bluetooth, wifi, lan).

- 237 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Trong vı́ dụ nà y, ta sẽ tạ o ra hai lớp đo� i tượng tương tá c hai phı́a theo mô hı̀nh
client – server nêu trên:
a) Lớp Server Socket.
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.ProgressEvent;
import flash.events.ServerSocketConnectEvent;
import flash.net.ServerSocket;
import flash.net.Socket;
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.utils.ByteArray;

public class ServerSocketExample extends Sprite


{
private var serverSocket:ServerSocket = new ServerSocket();
private var clientSocket:Socket;

private var localIP:TextField;


private var localPort:TextField;
private var logField:TextField;
private var message:TextField;

public function ServerSocketExample()


{
setupUI();
}

private function onConnect( event:ServerSocketConnectEvent ):void


{
clientSocket = event.socket;
clientSocket.addEventListener( ProgressEvent.SOCKET_DATA,
onClientSocketData );
log( "Connection from " + clientSocket.remoteAddress + ":" +
clientSocket.remotePort );

- 238 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

private function onClientSocketData( event:ProgressEvent ):void


{
var buffer:ByteArray = new ByteArray();
clientSocket.readBytes( buffer, 0, clientSocket.bytesAvailable );
log( "Received: " + buffer.toString() );
}

private function bind( event:Event ):void


{
if( serverSocket.bound )
{
serverSocket.close();
serverSocket = new ServerSocket();

}
serverSocket.bind( parseInt( localPort.text ), localIP.text );
serverSocket.addEventListener( ServerSocketConnectEvent.CONNECT,
onConnect );
serverSocket.listen();
log( "Bound to: " + serverSocket.localAddress + ":" + serverSocket.localPort );
}

private function send( event:Event ):void


{
try
{
if( clientSocket != null && clientSocket.connected )
{
clientSocket.writeUTFBytes( message.text );
clientSocket.flush();
log( "Sent message to " + clientSocket.remoteAddress + ":" +
clientSocket.remotePort );
}
else log("No socket connection.");
}
catch ( error:Error )

- 239 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

{
log( error.message );
}
}

private function log( text:String ):void


{
logField.appendText( text + "\n" );
logField.scrollV = logField.maxScrollV;
trace( text );
}

private function setupUI():void


{
localIP = createTextField( 10, 10, "Local IP", "0.0.0.0");
localPort = createTextField( 10, 35, "Local port", "0" );
createTextButton( 170, 60, "Bind", bind );
message = createTextField( 10, 85, "Message", "Lucy can't drink milk." );
createTextButton( 170, 110, "Send", send );
logField = createTextField( 10, 135, "Log", "", false, 200 )

this.stage.nativeWindow.activate();
}

private function createTextField( x:int, y:int, label:String, defaultValue:String =


'', editable:Boolean = true, height:int = 20 ):TextField
{
var labelField:TextField = new TextField();
labelField.text = label;
labelField.type = TextFieldType.DYNAMIC;
labelField.width = 100;
labelField.x = x;
labelField.y = y;

var input:TextField = new TextField();


input.text = defaultValue;
input.type = TextFieldType.INPUT;
input.border = editable;

- 240 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

input.selectable = editable;
input.width = 280;
input.height = height;
input.x = x + labelField.width;
input.y = y;

this.addChild( labelField );
this.addChild( input );

return input;
}

private function createTextButton( x:int, y:int, label:String,


clickHandler:Function ):TextField
{
var button:TextField = new TextField();
button.htmlText = "<u><b>" + label + "</b></u>";
button.type = TextFieldType.DYNAMIC;
button.selectable = false;
button.width = 180;
button.x = x;
button.y = y;
button.addEventListener( MouseEvent.CLICK, clickHandler );

this.addChild( button );
return button;
}
}
}
b) Lớp Client Socket.
package {
import flash.display.Sprite;

public class SocketExample extends Sprite {


private var socket:CustomSocket;

public function SocketExample() {


socket = new CustomSocket("localhost", 80);

- 241 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

}
}
}

import flash.errors.*;
import flash.events.*;
import flash.net.Socket;

class CustomSocket extends Socket {


private var response:String;

public function CustomSocket(host:String = null, port:uint = 0) {


super();
configureListeners();
if (host && port) {
super.connect(host, port);
}
}

private function configureListeners():void {


addEventListener(Event.CLOSE, closeHandler);
addEventListener(Event.CONNECT, connectHandler);
addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
addEventListener(SecurityErrorEvent.SECURITY_ERROR,
securityErrorHandler);
addEventListener(ProgressEvent.SOCKET_DATA, socketDataHandler);
}

private function writeln(str:String):void {


str += "\n";
try {
writeUTFBytes(str);
}
catch(e:IOError) {
trace(e);
}
}

- 242 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

private function sendRequest():void {


trace("sendRequest");
response = "";
writeln("GET /");
flush();
}

private function readResponse():void {


var str:String = readUTFBytes(bytesAvailable);
response += str;
}

private function closeHandler(event:Event):void {


trace("closeHandler: " + event);
trace(response.toString());
}

private function connectHandler(event:Event):void {


trace("connectHandler: " + event);
sendRequest();
}

private function ioErrorHandler(event:IOErrorEvent):void {


trace("ioErrorHandler: " + event);
}

private function securityErrorHandler(event:SecurityErrorEvent):void {


trace("securityErrorHandler: " + event);
}

private function socketDataHandler(event:ProgressEvent):void {


trace("socketDataHandler: " + event);
readResponse();
}
}
Trong vı́ dụ nà y, ta sử dụ ng hai lớp đo� i tượng là ServerSocket và Socket.
ServerSocket dù ng đe� tạ o mộ t socket ở phı́a server. Socket dù ng đe� tạ o mộ t
socket tương tá c từ phı́a client. Trong vı́ dụ nà y, lớp ServerSocketExample chứa

- 243 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

cả hai đo� i tượng bởi ta đang thực thi giao tie� p giữa hai má y mà khô ng ca� n có
server trung gian. Khi đó , mộ t trong hai má y sẽ có chức nă ng là m server đie� u
khie� n. Đe� hie� u rõ hơn ve� vı́ dụ minh họ a ở trê n, ta ca� n tı̀m hie� u cá c phương thức,
thuộ c tı́nh và sự kiệ n tương ứng củ a mo� i lớp.

LỚP SERVERSOCKET
THUO�̣ C TI�NH
bound:Boolean Kiểm tra socket có được ràng buộc với một địa chỉ ip và
một cổng hay không.
isSupported:Boolean Kiểm tra môi trường runtime có hỗ trợ ServerSocket
không.
listening:Boolean Kiểm tra server socket có đang lắng nghe sự kết nối từ
phía client hay không.
localAddress:String Địa chỉ ip mà socket đang lắng nghe.
localPort:int Cổng kết nối mà socket đang lắng nghe.
PHƯƠNG THƯ�C
ServerSocket() Hàm khởi tạo một đối tượng ServerSocket.
bind(port:int=0, Ràng buộc socket với một địa chỉ ip và cổng xác
localAddress:String=”0.0.0.0”) định.
close Đóng socket và dừng các kết nối đến server.
listen(backlog:int) Lắng nghe các kết nối TCP trên địa chỉ ip và cổng
đã chỉ định ở phương thức bind.
SỰ KIE�̣ N
close Được gửi đi khi hệ điều hành đóng các socket.
connect Được gửi đi khi có một socket kết nối đến server.

LỚP SOCKET
THUO�̣ C TI�NH
bytesAvailable:uint Số byte thuận lợi cho việc đọc từ bộ đệm vào.
connected:Boolean Kiểm tra socket này có đang được kết nối hay chưa.
endian:String Chỉ ra thứ tự đọc dữ liệu.
localAddress:String Chỉ ra địa chỉ ip mà socket ràng buộc.
localPort Chỉ ra cổng mà socket ràng buộc.
objectEncoding Điều khiển phiên bản AMF (Action Message Format)
dành cho đọc/ghi dữ liệu.
remoteAddress Địa chỉ ip mà socket này kết nối đến.
remotePort Cổng kết nối mà socket này kết nối đến.

- 244 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

PHƯƠNG THƯ�C
Socket(host:String=null, Hàm khởi tạo của lớp Socket với địa chỉ ip và cổng
port:int=0) chỉ định.
close() Đóng socket.
connect(host:String=null, Kết nối socket với một địa chỉ ip và cổng chỉ định.
port:int=0)
flush() Làm sạch dữ liệu tồn đọng trong bộ đệm ra của
socket.
readBoolean() Đọc dữ liệu dạng boolean của socket.
readByte() Đọc dữ liệu dạng byte đơn của socket.
readBytes(bytes:ByteArray, Đọc dữ liệu dưới dạng dãy các byte liên tục từ offset
offset:uint=0, length:uint=0) với độ dài length của socket.
readDouble() Đọc dữ liệu dạng Double.
readFloat() Đọc dữ liệu dạng Float.
readInt() Đọc dữ liệu dạng Int.
readMultiByte(length:uint, Đọc một chuỗi các byte bằng cách sử dụng một tập
charset:String) các kí tự chỉ định.
readObject() Đọc một đối tượng theo cách tuần tự hóa dạng
AMF.
readShort() Đọc dữ liệu dưới dạng Short.
readUnsignedByte() Đọc dữ liệu dưới dạng UnsignedByte.
readUnsignedShort() Đọc dữ liệu dưới dạng UnsignedShort.
readUnsignedInt() Đọc dữ liệu dưới dạng UnsignedInt.
readUTF() Đọc dữ liệu dưới dạng xâu UTF-8.
readUTFBytes(length:int) Đọc một dãy byte dữ liệu dưới dạng UTF-8 với độ
dài được chỉ định length.
writeBoolean(value:Boolean) Ghi dữ liệu dạng boolean vào socket.
writeByte() Ghi dữ liệu dạng byte đơn vào socket.
writeBytes(bytes:ByteArray, Ghi dữ liệu dưới dạng dãy các byte liên tục từ offset
offset:uint=0, length:uint=0) với độ dài length vào socket.
writeDouble() Ghi dữ liệu dạng Double.
writeFloat() Ghi dữ liệu dạng Float.
writeInt() Ghi dữ liệu dạng Int.
writeMultiByte(length:uint, Ghi một chuỗi các byte bằng cách sử dụng một tập
charset:String) các kí tự chỉ định.
writeObject() Ghi một đối tượng theo cách tuần tự hóa dạng AMF.
writeShort() Ghi dữ liệu dưới dạng Short.

- 245 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

writeUnsignedByte() Ghi dữ liệu dưới dạng UnsignedByte.


writeUnsignedShort() Ghi dữ liệu dưới dạng UnsignedShort.
writeUnsignedInt() Ghi dữ liệu dưới dạng UnsignedInt.
writeUTF() Ghi dữ liệu dưới dạng xâu UTF-8.
writeUTFBytes(length:int) Ghi một dãy byte dữ liệu dưới dạng UTF-8 với độ
dài được chỉ định length.
SỰ KIE�̣ N
close Được gửi đi khi server ngắt kết nối.
connect Được gửi đi khi server sẵn sàng chấp nhận kết nối.
ioError Được gửi đi khi lỗi xuất nhập trong quá trình gửi/nhận
xuất hiện.
securityError Được gửi đi khi triệu gọi phương thức connect đến một
Server bị ngăn cấm do mức bảo mật được thiết lập trên
server.
socketData Được gửi đi khi nhận được dữ liệu.

6.11. Làm việc với cơ sở dữ liệu trong AIR


Trong ra� t nhie� u ứng dụ ng trê n Desktop cũ ng như cá c thie� t bị di độ ng, ta ca� n quả n
lý dữ liệ u. Dữ liệ u nà y có the� được lưu trữ dưới dạ ng *.db hoặ c lưu trữ ở mộ t
server dữ liệ u nà o đó . Ne� u cá c thie� t bị nà y ho� trợ mô i trường AIR, thı̀ ta có the� de�
dà ng quả n lý chú ng theo cá ch thức là m việ c với dữ liệ u như trong mô i trường
SQLServer, Oracle, mySQL… Đe� là m việ c với dữ liệ u trê n mô i trường AIR, ta sử
dụ ng cá c lớp đo� i tượng sau: SQLConnection, SQLStatement, SQLResult và
SQLError. Ba lớp đo� i tượng nà y được to� chức trong package flash.data. Ta la� n
lượt khả o sá t cá c lớp đo� i tượng nà y thô ng qua vı́ dụ minh họ a (chı̉ sử dụ ng những
phương thức ca� n thie� t, cò n những phương thức khá c ı́t sử dụ ng hơn, bạ n có the�
tham khả o ở tà i liệ u trực tuye� n do Adobe cung ca� p1.
a) Vı́ dụ tạ o mới mộ t cơ sở dữ liệ u lưu trữ trê n má y.
import flash.data.SQLConnection;
import flash.events.SQLErrorEvent;
import flash.events.SQLEvent;
import flash.filesystem.File;

var conn:SQLConnection = new SQLConnection();


conn.addEventListener(SQLEvent.OPEN, openHandler);

1http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/flash/data/package-
detail.html

- 246 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

conn.addEventListener(SQLErrorEvent.ERROR, errorHandler);
var folder:File = File.applicationStorageDirectory;
var dbFile:File = folder.resolvePath("DBSample.db");

conn.openAsync(dbFile); //hoặc conn.open(dbFile)

function openHandler(event:SQLEvent):void
{
trace("Đã tạo thành công Database");
}

function errorHandler(event:SQLErrorEvent):void
{
trace("Lỗi: ", event.error.message);
}
Vı́ dụ nà y giú p ta tạ o mới mộ t cơ sở dữ liệ u lưu và o file với tê n là DBSample.db.
Sau đó , mở nó ra. Đe� mở dữ liệ u, ta có the� sử dụ ng phương thức open hoặ c
openSync củ a đo� i tượng conn (là đo� i tượng củ a lớp SQLConnection). Khi mở
thà nh cô ng, thı̀ nó sẽ la� ng nghe sự kiệ n SQLEvent.OPEN; ngược lạ i sự kiệ n được
la� ng nghe sẽ là SQLEvent.ERROR ne� u phá t sinh lo� i trong quá trı̀nh mở.
b) Vı́ dụ tạ o mới mộ t bả ng dữ liệ u trong cơ sở dữ liệ u.
import flash.data.SQLConnection;
import flash.data.SQLStatement;
import flash.events.SQLErrorEvent;
import flash.events.SQLEvent;

var createStmt:SQLStatement = new SQLStatement();
createStmt.sqlConnection = conn;

var sql:String =
"CREATE TABLE IF NOT EXISTS employees (" +
" empId INTEGER PRIMARY KEY AUTOINCREMENT, " +
" firstName TEXT, " +
" lastName TEXT, " +
" salary NUMERIC CHECK (salary > 0)" +
")";
createStmt.text = sql;

- 247 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

createStmt.addEventListener(SQLEvent.RESULT, createResult);
createStmt.addEventListener(SQLErrorEvent.ERROR, createError);

createStmt.execute();

function createResult(event:SQLEvent):void
{
trace("Bảng dữ liệu đã được tạo");
}

function createError(event:SQLErrorEvent):void
{
trace("Lỗi: ", event.error.message);

}
Đe� tạ o mộ t bả ng dữ liệ u trong SQL, ta sử dụ ng lệ nh create table. Nó là mộ t truy
va� n. Khi thực thi mộ t truy va� n trong ActionScript 3.0, ta sử dụ ng SQLStatement
thô ng qua mộ t ca� u no� i là SQLConnection. Trı̀nh tự thực thi truy va� n như sau:
- Mở mộ t ke� t no� i đe� n cơ sở dữ liệ u: sử dụ ng phương thức open/openSync củ a đo� i
tượng Connection.
- Gá n ca� u no� i cho đo� i tượng SQLStatement là ke� t no� i Connection ở trê n.
- Đe� xâ y dựng mộ t truy va� n, ta sử dụ ng thuộ c tı́nh text củ a đo� i tượng
SQLStatement.
- Đe� thực thi truy va� n, ta sử dụ ng phương thức execute() củ a đo� i tượng
SQLStatement.
Hoà n toà n tương tự vı́ dụ a, khi thực thi truy va� n có the� phá t sinh lo� i hoặ c khô ng
lo� i. Do đó , ta sử dụ ng cá c bộ la� ng nghe sự kiệ n tương ứng với sự kiệ n la� ng nghe là
SQLEvent.RESULT (ne� u có ke� t quả sau khi thực thi truy va� n) và SQLEvent .ERROR
(ne� u phá t sinh lo� i). Đe� thực thi cá c truy va� n dạ ng select, insert, update, delete ta
cũ ng thực thi theo trı̀nh tự nê u trê n.
c) Vı́ dụ thực thi truy va� n dạ ng select.

var selectStmt:SQLStatement = new SQLStatement();
selectStmt.sqlConnection = conn;
selectStmt.text = "SELECT itemId, itemName, price FROM products";
selectStmt.addEventListener(SQLEvent.RESULT, resultHandler);
selectStmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);
selectStmt.execute();

- 248 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

function resultHandler(event:SQLEvent):void
{
var result:SQLResult = selectStmt.getResult();
var numResults:int = result.data.length;
for (var i:int = 0; i < numResults; i++)
{
var row:Object = result.data[i];
var output:String = "itemId: " + row.itemId;
output += "; itemName: " + row.itemName;
output += "; price: " + row.price;
trace(output);
}
}

function errorHandler(event:SQLErrorEvent):void
{
trace("Lỗi: ", event.error.message);
}
Hoà n toà n tương tự như vı́ dụ c. Tuy nhiê n, trong trường hợp nà y, việ c thực thi
truy va� n select sẽ trả ve� dữ liệ u dạ ng SQLResult. Trong SQLResult, có thuộ c tı́nh
data được to� chức tương tự như mả ng mà mo� i dò ng dữ liệ u go� m nhie� u trường dữ
liệ u. Vı́ dụ trong trường hợp nà y data tương ứng với so� ke� t quả (so� dò ng) dữ liệ u
nhậ n được. Tương ứng với mo� i dò ng data[i] hay row có cá c trường itemID,
itemName, price – cá c trường trong truy va� n select.
d) Vı́ dụ thực thi truy va� n dạ ng insert.
import flash.data.SQLConnection;
import flash.data.SQLResult;
import flash.data.SQLStatement;
import flash.events.SQLErrorEvent;
import flash.events.SQLEvent;

var insertStmt:SQLStatement = new SQLStatement();
insertStmt.sqlConnection = conn;

var sql:String =
"INSERT INTO employees (firstName, lastName, salary) " +
"VALUES ('Bob', 'Smith', 8000)";

- 249 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

insertStmt.text = sql;
insertStmt.addEventListener(SQLEvent.RESULT, insertResult);
insertStmt.addEventListener(SQLErrorEvent.ERROR, insertError);
insertStmt.execute();

function insertResult(event:SQLEvent):void
{
trace("Đã thêm dữ liệu vào bảng.");
}

function insertError(event:SQLErrorEvent):void
{
trace("Lỗi: ", event.error.message);
}
Hoà n toà n tương tự vı́ dụ c.
e) Vı́ dụ thực thi truy va� n dạ ng update.
import flash.data.SQLConnection;
import flash.data.SQLResult;
import flash.data.SQLStatement;
import flash.events.SQLErrorEvent;
import flash.events.SQLEvent;

var updateStmt:SQLStatement = new SQLStatement();
updateStmt.sqlConnection = conn;

var sql:String =
"UPDATE employees " +
"SET firstName = 'Bob', lastName = 'Smith',salary = 8000 where firstName
= ‘John’ and lastName = ‘Smith’";
updateStmt.text = sql;
updateStmt.addEventListener(SQLEvent.RESULT, updateResult);
updateStmt.addEventListener(SQLErrorEvent.ERROR, updateError);
updateStmt.execute();

function updateResult(event:SQLEvent):void
{
trace("Đã cập nhật dữ liệu vào bảng.");
}

- 250 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

function updateError(event:SQLErrorEvent):void
{
trace("Lỗi: ", event.error.message);
}
Hoà n toà n tương tự vı́ dụ c.
f) Vı́ dụ thực thi truy va� n dạ ng delete.
import flash.data.SQLConnection;
import flash.data.SQLResult;
import flash.data.SQLStatement;
import flash.events.SQLErrorEvent;
import flash.events.SQLEvent;

var deleteStmt:SQLStatement = new SQLStatement();
deleteStmt.sqlConnection = conn;

var sql:String =
"DELETE FROM employees" +
"WHERE firstName = 'Bob' and lastName = 'Smith'";
deleteStmt.text = sql;
deleteStmt.addEventListener(SQLEvent.RESULT, deleteResult);
deleteStmt.addEventListener(SQLErrorEvent.ERROR, deleteError);
deleteStmt.execute();

function deleteResult(event:SQLEvent):void
{
trace("Đã xóa dòng dữ liệu được chọn.");
}

function deleteError(event:SQLErrorEvent):void
{
trace("Lỗi: ", event.error.message);
}
Hoà n toà n tương tự vı́ dụ c.
Ha� u he� t cá c mô i trường AIR cho cá c hệ đie� u hà nh thô ng dụ ng: Windows, Linux,
MacOS, Android, iOS đe� u ho� trợ hoà n hả o cá c đo� i tượng SQLConnection,
SQLStatement, SQLResult... Đặ c biệ t, ga� n đâ y, Oracle cũ ng đã ba� t đa� u phá t trie� n
mô i trường Oracle cho hệ đie� u hà nh Android và iOS. Do đó , là m việ c với cơ sở dữ

- 251 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

liệ u ba� ng cá c truy va� n SQL hoà n toà n thuậ n lợi cho cả mô i trường Desktop, Web
la� n Mobile.

- 252 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Tổng kết chương 6


Trong chương này, chúng ta đã được làm quen với kĩ thuật Mask – một kĩ thuật
rất hữu ích trong Flash. Bạn có thể tạo một mặt nạ chuyển động, mặt nạ biến hình
hoặc một mặt nạ có thể di chuyển. Bạn có thể tạo các nút nhấn, thanh playback để
chơi các movie. Đặc biệt hơn, bạn còn được làm quen với cách xử lý âm thanh,
hình ảnh và video với các chương trình chuyên dụng.
Sau khi hoàn tất chương 6 này, hi vọng bạn đã có một kiến thức tương đối về
Flash và ActionScript. Bạn có thể nâng cao kĩ năng thực hành của mình bằng cách
thực hành các bài lab trong phần tiếp theo.

- 253 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO

Blank Page

- 254 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

7.1. Giới thiệu về PaperVision3D và Adobe Flex Builder


PaperVision3D là một thư viện mã nguồn mở dành cho ActionScript 3 để làm việc
với các đối tượng đồ họa 3D: xây dựng đối tượng 3D, tô màu, tạo hoạt hình... Đây
là một lớp thư viện mạnh mẽ được xây dựng trên ActionScript.
PaperVision3D được phát triển đầu tiên bởi Carlos Ulloa. Nhưng ngày này, nó đã
được một đội ngũ lập trình viên quốc tế phát triển dựa trên dự án mở cùng tên
PaperVision3D. Thư viện này được cung cấp tại địa chỉ website
http://www.papervision3d.org.
PaperVision3D được sử dụng kết hợp với các trình soạn thảo ActionScript như:
Adobe Flex Builder, Adobe Flash Professional, FDT hoặc FlashDevelop. Trong
giáo trình này, chúng tôi sẽ trình bày trên trình soạn thảo Adobe Flex Buider.
Adobe Flex Buider là là một trình sáng tác RIA (Rich Internet Application) và
soạn thảo ActionScript chuyên nghiệp.

Hình 162 – Adobe Flex Buider 4


Nó được xây dựng trên trình soạn thảo Eclipse – một dự án mã nguồn mở cho
một trình IDE (Integrated Development Enviroment – môi trường phát triển tích
hợp) chuyên nghiệp, tiêu tốn hàng triệu đôla của IBM. Về mặt sáng tác RIA, Adobe
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Flex Builder cung cấp các công cụ để làm việc với hầu hết các ngôn ngữ lập trình
web: php, jsp, asp.net…, cung cấp công cụ để kết nối cơ sở dữ liệu, cung cấp các
thành phần để hiển thị giao diện trên các trang web với tương tác như các trình
ứng dụng trên Desktop… Về mặt soạn thảo ActionScript, Adobe Flex Builder tỏ ra
vượt trội so với các trình soạn thảo khác kể cả Adobe Flash Professional: chế độ
soạn thảo chuyên nghiệp – bắt lỗi, sửa lỗi, biên dịch… Nếu bạn đã có kinh nghiệm
sử dụng Eclipse IDE thì không khó khăn gì khi làm quen với Adobe Flex Buider.
a. Tạo một dự án trong Flex Buider

Hình 163 –Tạo mới dự án trong Flex Buider


Flex Project: tạo mới dự án RIA.
Flex Library Project: tạo dự án thư viện.
Flash Professional: tạo dự án Flash bao gồm cả dự án Flash chứa ActionScript.
ActionScript Project: tạo dự án ActionScript.
Tôi cũng xin lưu ý đến các bạn rằng, Adobe Flex Builder là công cụ để soạn thảo
ActionScript kết hợp với PaperVision3D chứ không phải là công cụ để phát triển
RIA cho web. Do đó, chúng ta sẽ làm quen với cách sử dụng nó trong các dự án
được minh họa trong mỗi ví dụ của giáo trình. Nếu bạn quan tâm đến trình biên
dịch này, hay sử dụng nó để phát triển RIA cho web, chúng tôi sẽ giới thiệu đến
các bạn trong một giáo trình khác chuyên về Adobe Flex Builder.

- 256 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Một điều nữa các bạn cần lưu ý là phiên bản mà chúng tôi đang sử dụng là Adobe
Flex Buider 4 và ActionScript phiên bản 3.0. Điều này đảm bảo cho các các ví dụ
minh họa của chúng tôi trong giáo trình này sẽ hoạt động tốt trong các dự án của
bạn mà không vấp phải vấn đề nào.
b. Thao tác với một dự án trong Flex Builder
Mở một dự án đã tồn tại: Trong của sổ Package Explorer ở bên trái, bạn kích
chuột phải và chọn Import (hoặc vào File > Import).
Sau đó, bạn chọn Flex Builder Project (theo cách vào menu File) hoặc Import trực
tiếp (theo menu kích chuột phải). Hộp thoại sau đây sẽ hiện ra

Hình 164 – Import một dự án


Bạn chọn Existing Projects into Workspace. Nhấp Next. Trong hộp thoại tiếp theo,
bạn duyệt đến vị trí dự án của bạn, sau đó nhấp Finish.
Import theo tùy chọn Flash Builder sử dụng khi import một dự án Flex Project
(tức dự án RIA). Trong giáo trình này, chúng ta không quan tâm đến trường hợp
này.
Đóng một hoặc nhiều dự án đang mở: bạn chỉ việc chọn dự án đang mở (nếu
nhiều dự án, bạn hãy nhấn phím Ctrl để chọn các dự án không liên tục, hoặc phím
Shift nếu các dự án liên tục trong cửa sổ Package Explorer). Sau đó, kích chuột
phải và chọn Close Project.
Biên dịch một dự án ActionScript: bạn đảm bảo file ActionScript của bạn đang
được mở (chỉ ở chế độ Open Project, không ở chế độ Open File). Sau đó, bạn kích
vào biểu tượng trong hình minh họa sau

- 257 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Hình 165– Biên dịch một dự án ActionScript


Trong menu thả xuống, bạn chọn Other. Cửa sổ sau đây sẽ hiện ra

Hình 166 – Lựa chọn chương trình biên dịch


Bạn nhấp đôi chuột vào Web Application (nếu muốn sử dụng thước phím trên
Flash Player) và Desktop Application (nếu muốn sử dụng thước phim trên Adobe
AIR). Sau đó, bạn nhấp vào nút Run để thực thi dự án.
Sau khi lựa chọn được chương trình biên dịch theo các bước nêu trên, từ thời
điểm này trở đi, khi biên dịch bạn chỉ việc chọn biểu tượng , lập tức trong
menu thả xuống sẽ có menu với tên mà bạn đã thiết lập. Bạn chỉ việc chọn menu
này để biên dịch dự án mà không cần phải lựa chọn thêm lần nữa.
Remarks: Phím tắt tương ứng với Debug Desktop Application – Alt+Shift+D,D và
phím tắt tương ứng với Debug Web Application – Alt+Shift+D,W.
Làm việc với Workspace: Eclipse quản lý các dự án theo workspace. Một
workspace chứa một tập các dự án để tiện cho việc quản lý. Adobe Flex Builder
được xây dựng trên Eclipse cho nên nó cũng quản lý các dự án theo workspace.

- 258 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Để chuyển đổi qua lại giữa các workspace, bạn vào File > Switch workspace >
Other. Trong cửa sổ xuất hiện, bạn duyệt đến vị trí workspace mà bạn chọn, sau
đó nhấp Ok. Adobe Flex Builder sẽ tự động tải tất cả các dự án lên Adobe Flex
Builder.

7.2. Cấu hình và cài đặt PaperVision3D cho Adobe Flex Buider
Tải PaperVision3D: bạn hãy truy cập vào địa chỉ sau đây
http://papervision3d.googlecode.com/files/Papervision3D_2.1.932.zip
Sau khi tải xong, bạn giải nén tập tin này vào một vị trí nào đó trên ổ đĩa. Bạn sẽ
thu được thư mục Papervision3D_2.1.932 và bên trong nó là thư mục src. Thư
mục src chứa nội dung như sau

Tạo dự án thư viện ActionScript: bạn hãy khởi động Adobe Flex Builder. Kích
chuột phải vào cửa sổ Package Explorer, chọn New > Flex Library Project. Trong
cửa sổ hiện ra, bạn đặt tên cho dự án này là PV3D( tức PaperVision3D).
Trong dự án mà bạn vừa tạo, có một thư mục src, bạn hãy copy toàn bộ nội dung
của thư mục src mà bạn thu được khi giải nén ở trên vào trong thư mục src này
(hoặc đơn giản, bạn có thể sử dụng thao tác kéo thả).

Hình 167 – Thư mục src


Tạo dự án ActionScript: kích chuột phải trong cửa sổ Package Explorer, chọn
New > ActionScript Project. Tiếp theo, bạn hãy đặt tên cho dự án ActionScript của
mình, ví dụ PV3DTest. Chọn thư mục src trong dự án này, kích chuột phải chọn
New > Package. Thao tác này giúp bạn tạo một gói để chứa các lớp mà bạn sẽ tạo
về sau. Package giúp đóng gói các lớp. Điều này cũng giúp bạn quản lý các lớp tốt
hơn. Nếu bạn không tạo mới một package, Adobe Flex Builder sẽ tự động sử dụng
default package (package mặc định). Tuy nhiên, tôi khuyến cáo bạn nên tạo các
package để cho mỗi dự án của bạn được rõ ràng hơn. Ví dụ, trong trường hợp
này, tôi tạo package có tên là Lession01. Sau đây là cấu trúc của hai dự án mà tôi
vừa tạo để minh họa cho ví dụ sử dụng PaperVision3D.

- 259 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Hình 168 – Cấu trúc thư mục PV3D và PV3DTest


Tải FLARToolKit: ARToolKit là một thư viện được tạo bởi Hirokazu Kito của viện
Khoa học và Công nghệ Nara – Nhật Bản. Sau này, nó được phát triển và xuất bản
bởi đại học Washington. FLARToolKit là thư viện dành riêng cho Flash kể từ
phiên bản 9.0 dựa trên ARToolKit. Nó cung cấp các công cụ cần thiết và kết hợp
với thư viện PaperVision3D để làm việc với hệ tọa độ thế giới thực: vị trí đặt
camera, góc quay, độ chiếu sáng….Nó hoàn toàn miễn phí và là dự án mã nguồn
mở. Bạn có thể tải nó tại địa chỉ:
http://www.libspark.org/browser/as3/FLARToolKit/branches/alchemy/bin/FL
ARToolKit.swc?format=raw
Đưa thư viện FLARToolKit.swc vào dự án: kích chuột phải vào dự án
ActionScript, chọn New > Folder. Bạn hãy đặt tên cho nó, ví dụ swc. Sau đó, bạn
hãy copy file FLARToolKit.swc vào thư mục swc vừa mới tạo.
Kích chuột phải vào dự án ActionScript này, chọn Properties. Trong cửa sổ xuất
hiện, bạn chọn ActionScript Build Path, chọn tiếp thẻ Library Path. Sau đó, bạn
nhấp vào nút Add SWC Folder. Trong hộp thoại mới xuất hiện, bạn hãy nhập tên
của thư mục chứa file FLARToolKit.swc ở trên – tức thư mục swc. Sau đó nhấp
Ok. Bạn hãy quan sát hình ảnh bên dưới

- 260 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Hình 169 – Hộp thoại Properties của dự án ActionScript


Đưa thư viện PV3D vào dự án PV3DTest: kích chuột phải vào dự ActionScript
này, chọn Properties, chọn ActionScript Build Path, sau đó chọn thẻ Library path.
Nhấp chọn nút Add Project và chọn dự án thư viện PV3D ở trên.
Giờ đây, bạn chỉ đơn thuần bắt tay vào viết code để tạo các kịch bản 3D. Mọi thứ
đều thật khá đơn giản bởi các lớp thư viện mà bạn vừa tải chứa đựng một thư
viện hàm khá lớn.

7.3. Chương trình Hello, PaperVision3D !


Một cách thức học lập trình đó là bắt tay vào để viết code cho một chương trình
đơn giản trước khi bắt đầu tìm hiểu chi tiết về nó. Ví dụ kinh điển và đơn giản
nhất là viết ra một thông báo “Hello”. Tuy nhiên, trong dự án này, chúng ta không
đưa ra một thông báo “Hello” như trên, mà chúng ta sẽ tạo một quả cầu 3D đơn
giản và không thêm bất cứ một đối tượng nào khác.
Nếu bạn muốn bổ sung thêm một lớp ActionScript, bạn hãy kích chuột phải vào
package Lession01 mà bạn đã tạo ở trên, chọn New > ActionScript Class.

- 261 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Theo cách tạo dự án ActionScript ở trên, Adobe Flex Builder đã mặc định sử dụng
default package, và bên trong package này chứa một lớp mặc định cùng tên với
dự án là PV3DTest.
Nội dung của lớp này như sau
package Lession01
{
import flash.display.Sprite;

// Thiết lập khung trình chiếu

public class PV3DTest extends Sprite


{
public function Hello3D()
{
//Viết code vào đây
}
}
}
Trong phần thiết lập khung trình chiếu, bạn có thể sử dụng đoạn mã sau
[SWF(width="1420", height="800", backgroundColor="0x000000")]
Trong đó, width là độ rộng, height là độ cao (được tính theo pixel);
backgroundColor là màu nền.
Để bổ sung vào khung trình chiếu một đối tượng quả cầu 3D, trước tiên, ta sẽ
khởi tạo một đối tượng quả cầu 3D nhờ hàm tạo được cung cấp bởi lớp Sphere
Sphere sp=new Sphere(arg0:MaterialObject3D, arg1:Number, arg2:int, arg3:int);
Trong đó, arg0 là cách phối màu cho đối tượng sp, nó là một kiểu
MaterialObject3D; arg1 – bán kính của hình cầu, kiểu dữ liệu Number; arg2, arg3
– số mãnh được phân chia theo chiều ngang và chiều dọc (số lượng các mặt
Spline). Tuy đối tượng sp đã được tạo, nhưng nó chưa được bổ sung vào khung
trình chiếu. Để bổ sung nó vào khung trình chiếu, ta phải sử dụng một khung nhìn
View. Trong trường hợp này, ta sẽ sử dụng BasicView là khung nhìn cơ bản nhất.
Lớp PV3DTest sẽ kế thừa lớp BasicView này nhờ từ khóa extends. Nhờ tính kế
thừa này, lớp PV3DTest sẽ có phương thức scene.addChild của lớp BasicView.
scene.addChild(sp);
Tuy nhiên, bạn có thể gộp hai dòng lệnh này thành một – sẽ gọn gàng hơn, nhưng
nếu bạn mới bắt đầu làm quen với ActionScript (hoặc Java, C#) thì bạn không nên
viết tắt như bên dưới.
scene.addChild(new Sphere(arg0:MaterialObject3D, arg1:Number, arg2:int
arg3:int));

- 262 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Cuối cùng, bạn hãy bổ sung vào phương thức startRendering() để hiển thị đối
tượng được tạo theo cách phối màu được chọn lên thiết bị hiển thị của máy tính.
Sau đây là chương trình Hello đầy đủ để tạo một quả cầu 3D trong không gian.
package Lession01
{
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;

[SWF(width="1420", height="800", backgroundColor="0x000000")]

public class PV3DTest extends BasicView


{
public function PV3DTest()
{
scene.addChild(new Sphere(null, 500, 50, 50));
startRendering();//hoặc singleRender();
}
}
}
Remarks: bạn hãy sử dụng tổ hợp phím Ctrl+Space để sử dụng chế độ Auto
Generate Code (chế độ gợi nhắc mã lệnh). Nhờ vào chế độ này, bạn sẽ soạn thảo
văn bản nhanh hơn và đồng thời, bạn sẽ không mắc phải lỗi khi viết sai tên
phương thức hay thuộc tính cũng như tên lớp. Nếu bạn tạo mới một đối tượng
nhờ vào một lớp thư viện khác, khi đó, bạn cần import thêm một thư viện tương
ứng. Nhưng khi sử dụng tổ hợp phím này, việc import thư viện là hoàn toàn tự
động. Bạn hãy tạo một thói quen sử dụng tổ hợp phím này. Mỗi khi bạn cần sử
dụng một phương thức nào đó, bạn hãy viết một vài kí tự đầu của phương thức,
sau đó sử dụng tổ hợp phím này.
Tạo hiệu ứng động cho đối tượng 3D: tương ứng với quả cầu 3D này, chúng ta
có thể tạo một chuyển động 3D tương ứng. Chương trình sau đây minh họa
chuyển động của một hình cầu trong không gian.
Trong mô hình này, một đối tượng hình cầu sẽ quay theo trong không gian. Khi
quay trong không gian, nó có thể quay theo một trong 3 chiều: theo chiều x –
pitch; theo chiều y – yaw; theo chiều z – roll. Ba phương thức này có chung một
cú pháp pitch(arg0), yaw(arg0) và roll(arg0). Ở đó, tham số arg0 là góc quay
tương ứng trên mỗi khung hình.
package Lession01
{
import flash.events.Event;

- 263 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;

[SWF(width="1420", height="800", backgroundColor="0x000000")]

public class PV3DTest extends BasicView


{
private var sp:Sphere;
public function PV3DTest()
{
sp = new Sphere(null, 500, 50, 50);
scene.addChild(sp);
addEventListener(Event.ENTER_FRAME, rotatenow);
}

public function rotatenow(e:Event):void{


sp.yaw(5);
startRendering();
}
}
}

Trong chương trình này, đối tượng sp được sử dụng không chỉ trong phương
thức khởi tạo, mà còn được sử dụng trong phương thức rotatenow. Do đó, đối
tượng này cần được khai báo như là một dữ liệu thành viên của lớp. Trong
phương thức khởi tạo, phương thức addEventListener được triệu gọi tương ứng
với sự kiện ENTER_FRAME. Khi sự kiện này xảy ra, hàm rotatenow được gọi.
Trong trường hợp này, hình cầu sẽ quay theo chiều của trục y – nhờ vào phương
thức yaw. Bạn hoàn toàn có thể tạo ra một cách quay mới nếu kết hợp ba phương
thức yaw, pitch và roll (hoặc một trong hai phương thức trên).
Tạo hiệu ứng động cho đối tượng 3D theo chuyển động của con trỏ chuột: để
tạo hiệu ứng động cho hình cầu trên theo chuyển động của chuột, ta cũng sử dụng
cùng phương thức trên nhưng kết hợp với tọa độ chuột. Khi đó, hàm rotatenow
có thể được viết như sau
public function rotatenow(e:Event):void{
sp.yaw((1420-mouseX)*0.01);
sp.pitch((800-mouseY)*0.01);
startRendering();
}

- 264 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Các số liệu trong hàm này chỉ mang tính chất minh họa, mà không sử dụng một
cách thức tính toán nào. Bạn hoàn toàn có thể thay đổi giá trị các tham số trong
trường hợp này. Khi đó, bạn sẽ nhận được các hiệu ứng dịch chuyển theo trỏ
chuột khác nhau. Đây cũng là một cách thức giúp phát triển kĩ năng lập trình của
bạn. Bạn đừng e ngại rằng chương trình sẽ không hoạt động. Phương châm của
chúng tôi đặt ra trong giáo trình này là không chỉ cung cấp kiến thức cho bạn mà
còn phát triển tư duy sáng tạo của bạn trong thiết kế và lập trình trên Flash.

7.4. Các đối tượng trong PaperVision3D

7.4.1. Các đối tượng hình thể


a. Khởi tạo các đối tượng hình thể. Các đối tượng hình thể trong
PaperVision3D được đặt trong package org.papervision3d.objects.primitives.
Đối tượng Phương thức khởi tạo Giải thích
Cone Cone( Phương thức khởi tạo có 5 tham số:
(Hình nón) material:Material3DObject, -material: cách thức phối màu. Đối
radius:Number, tượng này chúng ta sẽ được tìm hiểu
height:Number, trong mục tiếp theo.
segmentsW:int, -radius: bán kính hình tròn đáy.
segmentsH:int -height: chiều cao.
) -segmentsW: số phân mãnh xấp xỉ
theo chiều rộng của hình nón.
-segmnetsH: số phân mãnh xấp xỉ
theo chiều cao của hình nón.
Đối tượng hình nón là một trường
hợp đặc biệt của đối tượng Cylinder.
Tuy nhiên, nếu bạn muốn tạo dựng
một hình nón, bạn nên sử dụng đối
tượng đặc thù này thay vì sử dụng
đối tượng Cylinder.

- 265 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Hình 170 – Đối tượng Cone

Cylinder Cylinder( Phương thức khởi tạo có 8 tham số:


(Hình trụ và material:Material3DObject, -material: cách thức phối màu.
hình chóp radius:Number, -radius: bán kính hình tròn đáy.
cụt) height:Number, -height: chiều cao của hình trụ.
segmentsW:int, -segmentsW: số phân mãnh xấp xỉ
segmentsH:int, theo chiều rộng của hình.
topRadius:Number, -segmentsH: số phân mãnh được xấp
topFace:Boolean, xỉ theo chiều cao của hình.
bottomFace:Boolean -topRadius: bán kính của hình tròn
) đỉnh. Nếu là hình trụ thì giá trị mặc
định là -1 hoặc chính giá trị radius.
Nếu tham số này nhận giá trị 0, ta
nhận được hình nón. Nếu tham số
nhận giá trị nhỏ hơn -1, thì nó trở
thành hai hình nón chung đỉnh.
-topFace: cho phép bề mặt đỉnh có
được tô màu hay không. Nếu không
tô màu, có nghĩa nó sẽ rỗng ở phía
trên.
-bottomFace: tương tự topFace,
nhưng nó áp dụng cho bề mặt đáy.

- 266 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Hình 171 – Đối tượng Cylinder


Plane Plane( Phương thức khởi tạo có 5 tham số:
(Mặt material:Material3DObject, -material: cách thức phối màu.
phẳng) width:Number, -width: chiều rộng của mặt phẳng.
height:Number, -height: chiều cao của mặt phẳng.
segmentsW:int, -segmentsW: số phân mãnh xấp xỉ
segmentsH:int theo chiều rộng.
) -segmentsH: số phân mãnh xấp xỉ
theo chiều cao.
Thông thường một mặt phẳng không
nhất thiết phải phân mãnh (nghĩa là
sử dụng số phân mãnh mặt định
bằng 0). Tuy nhiên nếu ta không tô
màu cho mặt phẳng thì trong trường
hợp này nó sẽ khó được nhận diện.
Chính vì lẽ đó, nếu mặt phẳng không
được tô màu, thì bạn nên sử dụng số
phân mãnh khác 0; ngược lại, bạn
nên sử dụng số phân mãnh mặt định.

Hình 172 – Đối tượng Plane

- 267 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

PaperPlane PaperPlane( Phương thức khởi tạo có 2 tham số:


(Chiếc tàu material:Material3DObject, - material: cách thức phối màu.
bay giấy) scale:Number - scale: độ phóng to của vật thể.
)

Hình 173 – Đối tượng PaperPlane

Arrow Arrow( Phương thức khởi tạo 1 tham số:


(Mũi tên) material:Material3DObject -material: cách thức phối màu.
)

Hình 174 – Đối tượng Arrow


Sphere Sphere( Phương thức khởi tạo 4 tham số:
(Hình cầu) material:Material3DObject, - material: cách thức tô màu.
radius:Number, - radius: bán kính của hình cầu.
segmentsW: int, - segmentsW: số phân mãnh xấp xỉ
segmentsH:int theo chiều ngang.
) -segmentsH: số phân mãnh xấp xỉ
theo chiều dọc.

- 268 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Hình 175 – Đối tượng Sphere

Cube Cube( Phương thức khởi tạo có 9 tham số:


(Hình hộp) material:Material3DObject, - material: cách thức tô màu.
width:Number, - width: độ rộng của hình hộp.
depth:Number, - depth: độ sâu của hình hộp.
height:Number, - height: độ cao của hình hộp.
segmentsH:int, - segmentsH: số phân mãnh xấp xỉ
segmentsS:int, theo chiều ngang.
segmentsT:int, - segments: số phân mãnh xấp xỉ
insideFaces:int, theo chiều dọc (theo chiều xích đạo).
excludeFaces:int - segmentsT: số phân mãnh xấp xỉ
) theo chiều xâu.
- insideFaces, excludeFaces: hiển thị
mặt trong và mặt ngoài.

Hình 176 – Đối tượng Sphere


Các đối tượng này gọi là các hình 3D nguyên thủy. Nếu bạn muốn xây dựng một
hình thể 3D phức tạp, bạn có thể dựa trên cơ sở của những hình thể này. Để tạo

- 269 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

các đối tượng phức tạp, chúng ta có thể sử dụng các chương trình thiết kế 3D
chuyên nghiệp như Maya, sau đó, ta sẽ import các hình thể này vào trong Flash để
thiết kế theo kịch bản của mình. Chi tiết hơn chúng tôi sẽ giới thiệu trong mục
[7.5]. Trong một số phiên bản mới hơn (chỉ là phiên bản beta – phiên bản chúng
ta đang sử dụng là mới nhất cho đến thời điểm hiện tại), ngoài các đối tượng này
còn có thêm đối tượng Stars – đối tượng ngôi sao 3D. Vì đây là tính năng mới
trong phiên bản thử nghiệm, nên chúng tôi sẽ không đưa vào trong giáo trình này.
b. Các phương thức và thuộc tính của các hình thể.
Trong bảng sau đây, chúng tôi sẽ trình bày các phương thức và thuộc tính thường
hay sử dụng của các đối tượng 3D nguyên thủy đã nêu. Các phương thức và thuộc
tính này có thể là chung cho các đối tượng, cũng có thể là đặc trưng cho một đối
tượng nào đó. Adobe Flex Builder sẽ tự động kiểm tra một phương thức, thuộc
tính có phải là của đối tượng đang thao tác hay không. Vì vậy, chúng tôi sẽ không
đi sâu vào điều này, mà chỉ giải thích chức năng của mỗi phương thức hoặc thuộc
tính.
Phương thức
get set Giải thích
Thuộc tính
Thuộc tính độ trong suốt, được phân bố từ
alpha:Number x x 0..1. Giá trị alpha càng nhỏ thì độ trong
suốt của vật thể càng cao.
Tọa độ của vật thể trong không gian: x-
x, y, z: Number x x hoành độ, y-tung độ, z-cao độ. Tọa độ này
được tính theo đối tượng chứa nó.
rotationX, rotationY, Góc quay của vật thể theo các trục x, y, z
x x
rotationZ:Number tương ứng.
Độ phóng to theo cả ba chiều (scale) và
scale, scaleX, scaleY,
x x theo chiều x, y, z tương ứng với scaleX,
scaleZ: Number
scaleY, scaleZ.
Sử dụng như các phương thức và thuộc
scene:SceneObject3D x x
tính của đối tượng scene.
sceneX, sceneY, Tọa độ x, y, z của đối tượng tương ứng với
x
sceneZ: Number hệ tọa độ cảnh quay trong thế giới thực.
Trả về đối tượng Number3D, chứa các
Position:Number3D x x thông số liên quan đến tọa độ của vật thể
DisplayObject3D.
visible:Boolean x x Cho phép đối tượng hiển thị hay ẩn.
name:String x x Thiết lập tên cho đối tượng.

- 270 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

id:int x x Thiết lập id cho đối tượng.


material:MaterialObjec Thiết lập màu tô cho đối tượng.
x x
t3D
Thiết lập danh sách màu tô (áp dụng cho
materials:MaterialList x x
cube).
pitch(angle:Number):v Quay liên tục theo trục x, mỗi lần quay một
oid góc angle.
yaw(angle:Number):vo Tương tự đối với trục y.
di
roll(angle:Number):voi Tương tự với trục z.
d
moveDown(distance:N Di chuyển liên tục đối tượng xuống dưới.
umber):void
moveUp(distance:Num Di chuyển liên tục đối tượng lên trên.
ber):void
moveBackward(distan Di chuyển liên tục đối tượng ra sau.
ce:Number):void
moveForward(distanc Di chuyển liên tục đối tượng ra phía trước.
e:Number):void
moveLeft(distance:Nu Di chuyển liên tục đối tượng sang trái.
mber):void
moveRight(distance:N Di chuyển liên tục đối tượng sang phải.
umber):void
addChild(child:Display Bổ sung đối tượng child lên vật thể và đồng
Object3D, thời thiết lập tên cho nó là name.
name:String):DisplayO
bject3D
addChildren(parent:Di Bổ sung tất cả các đối tượng con nằm trên
splayObject3D):Displa parent lên DisplayObjectContainer3D
yObjectContainer3D
removeChild(child:Dis Loại bỏ đối tượng child.
playObject3D):Display
Object3D
removeChildByName( Loại bỏ đối tượng có tên là name.
name:String):DisplayO
bject3D
addEventListener(type Bổ sung một event tương ứng với sự kiện

- 271 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

:String, xảy ra trên đối tượng.


listener:Function,
useCapter:Boolean,
priority:int,
useWeakReference:Bo
olean):void
removeEventListener( Loại bỏ event đã bổ sung cho đối tượng.
type:String,
listener:Function,
useCapter:Boolean):vo
id
Trong bảng trên, cột get và cột set tương ứng với giá trị của thuộc tính. Một thuộc
tính được ấn định là get thì nó chỉ cho phép đọc, ngược lại nó được ấn định là set
thì chỉ cho phép ghi. Nếu nó được ấn định get và set, thì nó cho phép đọc và ghi.
Get và set chỉ áp dụng cho thuộc tính, không áp dụng cho phương thức.
Trên đây chúng tôi chỉ trình bày những phương thức và thuộc tính thường hay
được sử dụng nhất. Bạn có thể tham khảo toàn bộ nội dung ở địa chỉ website
papervision3d sau: http://www.papervision3d.org/docs/as3/.

7.4.2. Đối tượng Material - Phối màu cho hình thể


Các đối tượng Material nằm trong package org.papervision3d.materials. Trong
package này chứa các đối tượng sau: BitmapAssetMaterial, BitmapFileMaterial,
BitmapMaterial, ColorMaterial, MaterialsList, MovieAssetMaterial, MovieMaterial
và WireframeMaterial. Ngoài ra, nó còn chứa thêm một số package khác như:
utils, special, shaders, shadermaterials. Hai gói shaders và shadermaterials dùng
để tạo hiệu ứng đổ bóng. Chúng ta sẽ tìm hiểu một vài lớp đối tượng trong số này.
a. Phối màu bằng WareframeMaterial. Đối tượng WareframeMaterial nằm
trong gói org.papervision3d.materials.WareframeMaterial.
Hàm tạo của đối tượng WareframeMaterial
WareframeMaterial wm = new WareframeMaterial(color:Number, alpha:Number,
thickness:Number);
Trong đó,

• Tham số color quy định màu sắc chủ đạo.


• Tham số alpha quy định độ trong suốt của màu tô.
• Tham số thickness: quy định độ lớn của đường viền trong cách tô màu.

Ví dụ

- 272 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

scene.addChild(new Sphere(new WireframeMaterial(0x00ff00, .5, 4),400,20,20));

Hình 177 – Tô màu bằng ColorMaterial


b. Phối màu bằng ColorMaterial. Đối tượng ColorMaterial nằm trong gói
org.papervision3d.materials.ColorMaterial.
Hàm tạo của đối tượng ColorMaterial
ColorMaterial cm = new ColorMaterial(color:Number, alpha:Number,
interactive:Boolean);
Trong đó,
• Tham số color quy định màu sắc chủ đạo.
• Tham số alpha quy định độ trong suốt của màu tô.
• Tham số interactive: quy định sự tương tác giữa các vật thể trong cùng một
viewport.
Ví dụ
scene.addChild(new Sphere(new ColorMaterial(0x00ff00, 1, true), 400, 20, 20));

Hình 178 – Tô màu bằng ColorMaterial

- 273 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Như bạn thấy, hình thể được phối màu theo dạng thức này trông giống một hình
2D thông thường. Sở dĩ như vậy là vì chúng ta không sử dụng đến các hiệu ứng
light và shader. Nếu bạn kết hợp với các hiệu ứng này, thì bạn sẽ nhận được một
kết quả tốt hơn. Hiệu ứng này chỉ đơn thuần phối màu đặc (solid color) cho đối
tượng hình thể.
c. Phối màu bằng Bitmap. Việc phối màu bằng bitmap có thể được chia làm hai
cách: nhúng trực tiếp ảnh bitmap vào trong phim Flash hoặc tải bitmap vào
movie trong mỗi lần thực thi.
Nhúng trực tiếp hình ảnh bitmap
Bước 1. Nhúng file bitmap vào trong phim Flash
[Embed(source="../Earth.jpg")]
private var EarthBmp:Class;
Trong trường hợp này, File Earth được đặt cùng thư mục với src, file actionscript
nằm trong thư mục src, do đó đường dẫn phải lùi một cấp.
Bước 2. Sử dụng hàm tạo của đối tượng BitmapMaterial
var earthbmp:BitmapData = new EarthBmp().bitmapData;
var earthmaterial:BitmapMaterial = new BitmapMaterial(earthbmp);
Tiếp theo, bạn triệu gọi đối tượng earthmaterial trong phương thức khởi tạo của
đối tượng hình thể cần phối màu.
scene.addChild(new Sphere(earthmaterial, 400, 20, 20));

Hình 179 – Tô màu bằng BitmapMaterial


Kết quả bạn nhận được đối tượng hình cầu như trên.
Tải lên hình ảnh bitmap trong mỗi lần phim khởi động
Hàm tạo của đối tượng BitmapFileMaterial
var bm:BitmapFileMaterial=new BitmapFileMaterial(url:String, precise:Boolean)

- 274 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Trong đó,

• Tham số url là đường dẫn đến file ảnh.


• Tham số precise quy định độ chính xác.

Ta có thể sử dụng dòng lệnh sau đây để thu được cùng kết quả Hình 142.
scene.addChild(new Sphere(new BitmapFileMaterial(“../Earth.jpg”, true), 400, 20,
20));
Trong cách này, bạn lưu ý rằng hình ảnh dùng làm màu tô cần phải được đính
kèm với file Flash theo đúng cấu trúc thư mục – tức file ảnh jgp nằm cùng cấp với
thư mục chứa file Flash sau khi được biên dịch.
Remarks: Trong các đối tượng material, có ba đối tượng FlatMaterial,
GouraudMaterial và PhongMaterial tương ứng với ba thuật toán Shading nổi
tiếng: thuật toán FlatShading, thuật toán Shading của Gouraud và thuật toán
Shading của Phong. Thuật toán Shading của Gouraud nhanh nhưng độ chính xác
không cao bằng thuật toán Phong2. Ngược lại, thuật toán Phong lại có tốc độ khá
chậm, nhưng nó là thuật toán phối màu 3D tuyệt với – thể hiện ở độ chính xác rất
cao. Chính vì lẽ đó, nếu bạn muốn thước phim Flash hoạt động nhẹ nhàng, trong
trường hợp cần Shading một bề mặt không đòi hỏi độ chính xác quá cao, bạn nên
sử dụng đối tượng GouraudMaterial. Tuy nhiên, nếu số phân mãnh trên đối
tượng tương đối nhỏ, bạn có thể sử dụng PhongMaterial. Phương thức khởi tạo
của các đối tượng này tương đối giống nhau, tuy nhiên nó cần triệu gọi đến đối
tượng Lights. Chúng ta sẽ quay lại sau khi tìm hiểu về đối tượng Lights.

7.4.3. Đối tượng Lights - Hiệu ứng ánh sáng


Trong hiệu ứng ánh sáng này, chúng ta sử dụng phương thức khởi tạo cho đối
tượng PointLight3D.
var light:PointLight3D = new PointLight3D(showLight:Boolean, flipped:Boolean);
Trong đó,

• Tham số showLight cho phép ánh sáng được hiển thị hay không hiển thị.
• Tham số flipped chỉ áp dụng cho đối tượng 3D được tải từ file DAE. Nó chỉ
ra vùng tác dụng của ánh sáng trên khung ảnh.

Đối tượng PointLight3D này cũng có những phương thức và thuộc tính tương đối
giống với các đối tượng hình thể ở trên. Bạn hãy tham khảo bảng trên nếu muốn
sử dụng một phương thức hay thuộc tính nào đó.

2Tên đầy đủ là Bùi Tường Phong. Sinh năm 1942, mất 1975. Ông là một nhà khoa
học hàng đầu về đồ họa máy tính người Việt Nam.

- 275 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Bây giờ, chúng ta sẽ sử dụng đối tượng PointLight3D này trong các phương thức
khởi tạo của ba đối tượng FlatMaterial, GouraudMaterial và PhongMaterial.

 var fm:FlatMaterial = new FlatMaterial(light:LightObject3D, lightColor:uint,


ambientColor:uint, specularLevel:uint)
 var gm:GouraudMaterial = new GouraudMaterial(light:LightObject3D,
lightColor:uint, ambientColor:uint, specularLevel:uint)
 var gm:PhongMaterial = new PhongMaterial(light:LightObject3D,
lightColor:uint, ambientColor:uint, specularLevel:uint)

Đối tượng light là nguồn sáng phát ra, nó là một kiểu LightObject3D. Tham số
lightColor quy định màu chiếu sáng, tham số ambientColor quy định màu phối
xung quanh (do hiệu ứng từ các nguồn sáng khác nhau bao quanh), tham số
specularLevel chỉ định mức phản xạ màu của vật thể.

7.4.4. Đối tượng Shader - Hiệu ứng đổ bóng


Để tạo một hiệu ứng đổ bóng Shader, có ba thuật toán nổi tiếng: FlatShader,
GouraudShader và PhongShader tương tự với các đối tượng FlatMaterial,
GouraudMaterial và PhongMaterial đã nêu. Ba đối tượng này có phương thức
khởi tạo giống với FlatMaterial, GouraudMaterial và PhongMaterial.

7.4.5. Đối tượng ShadedMaterial


Ta có thể sử dụng đối tượng này để tạo màu tô cho vật thể. Phương thức khởi tạo
của đối tượng này chứa đối tượng Shader.

 var sm:ShadedMaterial = new ShadedMaterial(material:BitmapMaterial,


shader:Shader, compositeMode:int)

Theo cách khởi tạo này, ngoài cách phối màu bằng bitmap, ta còn sử dụng thêm
hiệu ứng tạo bóng. Kết quả thu được là một hình ảnh rất gần với thế giới thực.
Bạn hãy quan sát kĩ kết quả thu được khi kết hợp bitmap và hiệu ứng đổ bóng
trong ShadedMaterial ở hình minh họa bên dưới.

- 276 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Hình 180 – Tô màu bằng ShadedMaterial

7.4.6. Đối tượng CompositeMaterial


Với đối tượng này, bạn có thể bổ sung nhiều cách phối màu cùng lúc cho vật thể.
Phương thức khởi tạo của nó không chứa tham số.
var cm:CompositeMaterial = new CompositeMaterial();
Để bổ sung một material cho đối tượng cm, bạn sử dụng phương thức
addMaterial của đối tượng này.
cm.addMaterial(material:MaterialObject3D):void;

7.4.7. Đối tượng MaterialsList


Đối tượng MaterialsList được sử dụng khi khởi tạo một đối tượng Cube. Phương
thức khởi tạo cảu MaterialsList cũng không chứa tham số.
var ma:MaterialsList = new MaterialsList();
Để bổ sung một material cho đối tượng ma, bạn sử dụng phương thức
addMaterial.
ma.addMaterial(material:MaterialObject3D, name:String);
Trong đó, tham số name là tên của các mặt trong hình hộp: all (áp dụng cho tất
cả), front (trước), back(sau), top(trên), bottom(dưới), right(phải) và left(trái).

7.5. Import một mô hình 3D


Dù rằng việc tạo dựng các đối tượng đồ họa 3D trong PaperVision3D tương đối
thuận lợi, tuy nhiên để tạo dựng các đối tượng đồ họa phức tạp trong thế giới
thực tương đối phức tạp. Do đó, chúng ta cần sử dụng các chương trình thiết kế
đồ họa 3D chuyên nghiệp như Maya, 3DsMax…. Papervision3D hỗ trợ định dạng
DAE. Bạn có thể sử dụng Maya để xuất bản tập tin này. Để tải đối tượng trong tập

- 277 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

tin 3D này vào trong Flash, ta sử dụng đối tượng


org.papervision3d.objects.parsers.DAE.
Hàm tạo của đối tượng DAE này tương đối đơn giản
var dae:DAE = new DAE(autoplay:Boolean, name:String, loop:Boolean);
Trong đó,
 Tham số autoplay cho phép hành động của các đối tượng được import từ
tập tin DAE sẽ được thực thi hay không (bởi tập tin DAE này chứa đối
tượng 3D động).
 Tham số name quy định tên cho đối tượng DAE.
 Tham số loop quy định sự lặp lại các hành động cho các đối tượng trong
tập tin DAE.
Để tải các đối tượng trong tập tin DAE vào Flash, ta sử dụng phương thức load
dae.load(url:String)
Trong đó, url là địa chỉ của tập tin DAE.
Sau khi bạn tải các đối tượng trong tập tin DAE vào Flash, bạn có thể thao tác với
các đối tượng này như với các đối tượng 3D khác được tạo bởi Papervision3D.
Một khó khăn gặp phải là chúng ta cần có một hiểu biết về một chương trình thiết
kế nhân vật 3D để đưa vào trong Flash. Với một chương trình chuyên nghiệp như
Maya thì không phải ai cũng có thể học nhanh được, vì vậy bạn có thể sử dụng
những tập tin DAE được chia sẻ trong cộng đồng mạng để sử dụng.
Một địa chỉ rất hữu ích để bạn khai thác thư viện hình ảnh DAE đó là
http://www.sketchup.google.com. Đây là một dự án miễn phí của google cung
cấp cho ta các mô hình 3D tuyệt vời.

Hình 181 – Google Sketchup

- 278 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Bạn chỉ việc tìm kiếm mô hình sau đó tải nó về máy của bạn. Bạn sẽ nhận được
tập tin *.kmz. Tập tin này có thể đọc bởi Google Earth. Tuy nhiên, bản chất của tập
tin này cũng chỉ là tập tin nén. Bạn có thể giải nén bằng chương trình WinRar bạn
sẽ thu được một thư mục chứa tập tin DAE.
Với dự án này, chúng ta có rất nhiều mô hình 3D để khai thác và sử dụng trong
các dự án hoạt hình 3D của mình.

- 279 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Tổng kết chương 7


Trong chương này, chúng tôi đã giới thiệu đến bạn cách sử dụng lớp thư viện
PaperVision3D để tạo các đối tượng đồ họa 3D cũng như cách thức tạo chuyển
động trong thế giới thực. Đây là thư viện mã nguồn mở được xây dựng trên
ActionScript. Hi vọng bạn đã có được một cái nhìn tổng quan về đồ họa 3D.
Với thư viện PaperVision3D này, bạn có thể tạo dựng cho mình một thước phim
3D đơn giản hoặc một game 3D đơn giản.

- 280 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D

Blank Page

- 281 -
BÀI TẬP THỰC HÀNH

A – PHẦN BÀI TẬP CÓ HƯỚNG DẪN Download Sources


1. TẠO CHUYỂN ĐỘNG CHO NHÂN VẬT
Bước 1. Sử dụ ng Illustrator đe� chuye� n đo� i tậ p tin human.eps thà nh tậ p tin
human.ai (vı̀ Flash khô ng ho� trợ đo� họ a vector dạ ng eps).
Bước 2. Sử dụ ng chức nă ng Import to Library củ a Flash đe� import dữ liệ u từ
human.ai.
Bước 3. Ca� t la� y pha� n đo� i tượng ca� n sử dụ ng (nha� p đô i chuộ t và o pha� n đo� i tượng
ca� n tá ch ra). Đe� ca� t đo� i tượng de� dà ng hơn, ta nê n sử dụ ng chức nă ng Break
Apart. Chuye� n toà n bộ đo� tượng thà nh movieclip và xó a bỏ những thứ khô ng ca� n
thie� t trê n stage. Bâ y giờ ta sẽ chı̉ thao tá c với đo� i tượng nà y (Hı̀nh đa� u tiê n từ trá i
sang).

Hình 182 – Cá c trạ ng thá i củ a nhâ n vậ t khi chuye� n độ ng
Bước 4. Nha� p đô i chuộ t và o bie� u tượng movieclip. Lú c nà y, ta có the� thao tá c với
từng pha� n củ a đo� i tượng. Hã y chuye� n cá c pha� n thà nh cá c bie� u tượng MovieClip.
Bâ y giờ, ta có 9 pha� n đã được chuye� n đo� i thà nh movieclip. Tie� p theo, ta ghé p
chú ng lạ i với nhau và sử dụ ng cô ng cụ Bone đe� tạ o cá c khớp no� i giú p chuye� n
độ ng (Hı̀nh thứ 2 từ trá i sang).
Ta ca� n chú ý ra� ng, cá c trụ c ở pha� n thâ n và sẽ khô ng cho phé p di chuye� n. Do đó , ta
ca� n vô hiệ u hó a chức nă ng cho phé p chuye� n độ ng và xoay củ a những pha� n nà y
ba� ng cá ch nha� p và o chú ng và trong bả ng Properties, ta bỏ tù y chọ n rotation, x
translation và y translation.
Bước 5. Trê n TimeLine củ a Armature, ở Frame thứ 1, ta thay đo� i tư the� củ a đo� i
tượng như Hı̀nh 3 từ trá i sang. Nha� p và o Frame thứ 20 và nha� p phı́m F6, và thay
đo� i tư the� củ a đo� i tượng như Hı̀nh 4 từ trá i sang. Trong quá trı̀nh thay đo� i tư the�
củ a đo� i tượng, ta nê n sử dụ ng cá c phı́m mũ i tê n đe� đie� u chı̉nh vị trı́ cho phù hợp.
Bước 6. Đe� tạ o chuye� n độ ng me� m mạ i, thı̀ tư the� ở frame cuo� i cù ng (frame 20)
phả i trù ng khớp với tư the� ở frame thứ 1. Có the� bạ n sẽ nghı̃ ngay đe� n việ c sao
ché p vù ng frame từ 1 đe� n 20 sau đó lậ t ngược vù ng frame vừa được sao ché p.
Đie� u đó là hoà n toà n chı́nh xá c. Tuy nhiê n, khi bạ n sử dụ ng cô ng cụ Bone, vù ng
Timeline mặ c định khô ng cho phé p bạ n lậ t người mộ t pha� n củ a frame nà y (chı̉
cho phé p lậ t ngược toà n bộ ). Do đó , ta ca� n chuye� n dã y Frame ở che� độ Armater
thà nh cá c Keyframe riê ng biệ t (sử dụ ng kı̃ thuậ t Frame by Frame) ba� ng cá ch
nha� p chọ n vù ng Frame Armater, chọ n Convert to Frame by Frame Animation.
Bâ y giờ, ta copy vù ng keyframe đã được chuye� n đo� i (từ 1 đe� n 20), sau đó dá n và o
vị trı́ frame 21. Ta thu được vù ng dã y go� m 40 keyframe.
Chọ n vù ng keyframe từ 21 đe� n 40, nha� p chuộ t phả i và chọ n Reverse Frames. Nhờ
và o chức nă ng Onion skin, ta có the� quan sá t ke� t quả thu được như hı̀nh vẽ .

Hình 183 – Nhâ n vậ t chuye� n độ ng


Bước 7. Quay trở lạ i khung sá ng tá c chı́nh, ta tạ o chuye� n độ ng cho movieclip
chı́nh (toà n bộ đo� i tượng) ba� ng mộ t trong hai loạ i Tween: Motion Tween hoặ c
Classic Tween. Vı́ dụ , ta sử dụ ng Motion Tween. Ta kı́ch chuộ t phả i và o đo� i tượng,
chọ n Create Motion Tween, sau đó ba� m và o vị trı́ củ a frame cuo� i (tù y thuộ c và o
to� c độ chuye� n độ ng mà bạ n mong muo� n) và đặ t đo� i tượng và o vị trı́ mới.
Bước 8. Trang trı́ cho đường đi, ta sử dụ ng ả nh glasses.ai đe� tá ch ra pha� n cỏ và
ghé p và o khung trı̀nh chie� u. Lưu ý : đo� i tượng trê n phả i na� m trê n mộ t layer riê ng

- 283 -
biệ t, cá c đo� i tượng khá c có the� bo� trı́ trê n cá c layer khá c nhau, tù y thuộ c và o mụ c
đı́ch tạ o hoạ t cả nh.
Nha� n Ctrl+Enter đe� kie� m tra ke� t quả .
Xem dự án: ..\Lession\Source\BaiTapNangCao\Pr02_Character_Animation.

Hình 184 – Chuye� n độ ng củ a nhâ n vậ t trong pho� i cả nh

2. TẠO HIỆU ỨNG PHÓNG TÊN LỬA


Bước 1. Sử dụ ng ả nh rocket.psd đe� import và o
trong dự á n Flash củ a bạ n. Xâ y dựng 2 layer đe�
chứa tê n lửa và pha� n nhiê n liệ u bị đo� t chá y.
Bước 2. Tạ o hiệ u ứng nhiê n liệ u bị đo� t chá y. Ta
chọ n layer fire (layer chứa pha� n lửa), và chuye� n
nó thà nh movieclip. Nha� p đô i chuộ t và o Layer
nà y. Trong timeline củ a movieclip lửa, ta á p dụ ng
hiệ u ứng smoke cho nó : chọ n movieclip lửa, mở
bả ng Motion Presets và chọ n hiệ u ứng Smoke.
Tuy nhiê n, ta cũ ng ca� n lưu ý ra� ng, trong trường
hợp nà y, lửa sẽ bị phun ngược từ trê n xuo� ng (do
tá c độ ng củ a chuye� n độ ng tê n lửa và lực phun củ a
độ ng cơ tê n lửa), đie� u nà y có nghı̃a là ta ca� n thay
đo� i motion path củ a chuye� n độ ng nà y từ dưới lê n
thà nh từ trê n xuo� ng. Đie� u nà y thực thi khá đơn
Hình 185 – Tê n lửa giả n, ta chı̉ ca� n chọ n cô ng cụ Selection Tool và
ba� m và o đie� m cuo� i củ a motion path nà y, sau đó
ké o nó xuo� ng bê n dưới đie� m đa� u.

- 284 -
Tạ i cá c keyframe trê n motion path nà y, ta cũ ng ca� n hiệ u chı̉nh lạ i mộ t so� tham so�
trong bả ng thuộ c tı́nh (như thuộ c tı́nh blur) đe� cho lửa trong trường hợp nà y
được thực hơn.

Hình 186 – Hộp thoại Publish Settings


Sau khi hiệ u chı̉nh, ta thu được movieclip lửa như hı̀nh minh họ a.
Bước 3. Tạ o chuye� n độ ng cho tê n lửa.
Bước nà y khá đơn giả n, ta chı̉ ca� n sử
dụ ng motion Tween (hoặ c classic
Tween) đe� tạ o chuye� n độ ng cho tê n
lửa tie� n lê n trê n.
Bước 4. Tạ o chuye� n độ ng cho nhiê n
liệ u đo� t chá y luô n liê n ngay dưới tê n
lửa. Hoà n toà n tương tự như tạ o
chuye� n độ ng củ a tê n lửa ở bước 3.
Bước 5. Khi nhiê n liệ u bị đo� t chá y và
lửa phun ra phı́a dưới, thı̀ lửa luô n
được phun mộ t cá ch liê n tụ c (sự nga� t
quả ng là ra� t nhỏ ), do đó , ta ca� n bo�
Hình 187 – Tạ o chuye� n độ ng cho lửa sung thê m mộ t movieclip lửa na� m
lie� n ke� movieclip lửa ở trê n. Trong
trường hợp nà y, lửa sẽ phun ra ı́t bị nga� t quả ng hơn.

- 285 -
Bước 6. Tạ o hiệ u ứng khó i. Ta sử dụ ng cô ng cụ pen đe� vẽ mộ t kho� i vậ t the� hơi
lõ m ở giữa.

Hình 188 – Tạ o chuye� n độ ng cho khó i


Hoà n toà n tương tự như tạ o chuye� n độ ng củ a lửa, ta cũ ng á p dụ ng hiệ u ứng
smoke cho kho� i vậ t the� nà y (khó i cũ ng chuye� n độ ng xuo� ng dưới do tá c dụ ng củ a
lực phun độ ng cơ và sau đó sẽ bay lê n và bie� n ma� t). Ta cũ ng ca� n hiệ u chı̉nh lạ i cá c
tham so� blur cho phù hợp.
Cuo� i cù ng, nha� n Ctrl+Enter đe� kie� m tra ke� t quả .

Hình 189 – Mô hı̀nh chuye� n độ ng củ a tê n lửa


Xem dự án: ..\Lession\Source\BaiTapNangCao\Pr03_Rocket.

- 286 -
3. TẠO HIỆU ỨNG ZOOM
Bước 1. Sử dụ ng ả nh
landcape.ai đe� import và o
library củ a dự á n. Xó a bỏ đi
những chi tie� t khô ng ca� n
thie� t trong bức ả nh và sa� p
xe� p lạ i cho phù hợp.
Bước 2. Hã y chuye� n bức ả nh
nà y thà nh movieclip và ta sẽ
tạ o hiệ u ứng zoom camera
cho bức ả nh nà y.
Bước 3. Kı́ch chuộ t phả i và o
movieclip vừa tạ o, chọ n
create motion Tween, sau đó Hình 190 – Tạ o hiệ u ứng Zoom
chọ n cô ng cụ 3D translation
tool. Ké o frame cuo� i trong timeline củ a motion path đe� n vị trı́ frame 40 và đặ t
current frame tạ i vị trı́ frame 40 nà y (frame đá nh da� u đỏ ).
Dịch chuye� n movieclip theo chie� u z tie� n ve� phı́a trước và lưu ý cá c chie� u x và y
cũ ng phả i phù hợp đe� đặ t tiê u đie� m và o đo� i tượng ca� n phó ng to (vı́ dụ trong
trường hợp nà y má i vò m ngô i nhà ).
Bước 4. Lặ p lạ i bước 3 la� n nữa, đe� cho hiệ u ứng phong phú hơn, nhưng cũ ng chú
ý tậ p trung tiê u đie� m và o má i vò m củ a ngô i nhà .
Bước 5. Dừng chie� u phim khi quá trı̀nh phó ng to hoà n ta� t. Hã y tạ o thê m mộ t
layer và đặ t tê n là action. Tạ i frame thứ 40 củ a layer action, ta nha� n phı́m F6 đe�
chè n keyframe, kı́ch chuộ t phả i và o keyframe nà y, chọ n action và nhậ p và o lệ nh:
stop();
Nha� n Ctrl+Enter đe� kie� m tra ke� t quả .

Chú ý: ne� u trong phim có nhie� u movieclip phức tạ p, thı̀ đe� sử dụ ng hiệ u ứng zoom
nà y, ta nê n convert toà n bộ cá c đo� i tượng đó thà nh mộ t movieclip và á p dụ ng
hiệ u ứng zoom cho movieclip mới tạ o.
Xem dự án: ..\Lession\Source\BaiTapNangCao\Pr04_Zoom.

- 287 -
Hình 191 – Tạ o hiệ u ứng Zoom

4. TẠO BỂ CÁ
Bước 1. Sử dụ ng ả nh fishes.ai đe� import và o trong dự á n củ a Flash. Sau đó , chı̉nh
sửa đe� thu được bức ả nh như bê n dưới.

Hình 192 – Tạ o be� cá

- 288 -
Bước 2. Chuye� n 4 chú cá lê n 4 layer khá c nhau và chuye� n đo� i chú ng thà nh cá c
movieclip.
Bước 3. Nha� p đô i chuộ t và o từng chú cá c. Trong timeline củ a mo� i movieclip cá
nà y, ta sẽ sử dụ ng motion Tween đe� tạ o chuye� n độ ng cho cá . Khi sử dụ ng motion
Tween, ta có the� sử dụ ng cá c cô ng cụ 3D đe� là m cho chuye� n độ ng củ a cá c chú cá
sinh độ ng và hợp lý hơn (khô ng nê n dù ng classic Tween).
Nha� n Ctrl+Enter đe� kie� m tra.
Xem dự án: ..\Lession\Source\BaiTapNangCao\Pr04_Fishes.

5. TẠO PHÁO HOA


Trong bà i hướng da� n nà y, tô i sẽ hướng da� n cho bạ n cá ch tạ o mộ t eCard mừng
nă m mới, trong đó , hiệ u ứng phá o hoa là hiệ u ứng chủ đạ o.
Bước 1. Đe� thie� t ke� eCard nà y, đa� u tiê n, bạ n hã y tạ o mô t eCard tı̃nh theo minh
họ a như bê n dưới. Tù y theo ý thı́ch củ a mı̀nh, bạ n có the� xâ y dựng mộ t eCard
độ ng với những hiệ u ứng Flash thú vị khá c mà bạ n sá ng tạ o nê n. Tuy nhiê n, trong
hướng da� n nà y, tô i chủ ye� u tậ p trung và o cá ch tạ o hiệ u ứng phá o hoa mà khô ng
quan tâ m đe� n cá c hiệ u ứng phụ khá c. Đe� eCard được sinh độ ng hơn, bạ n có the� bo�
sung cá c hiệ u ứng như: đo� i mà u chữ, chữ bay lượn, sao nha� p nhá y…

Hình 193 – Tạ o thiệ p mừng nă m mới

- 289 -
Bước 2. Bo� sung và o dự á n mộ t lớp có tê n là Particle.as. Lớp nà y ke� thừa từ lớp
Shape. Nó có hai thuộ c tı́nh thà nh viê n là to� c độ chuye� n độ ng củ a cá c phâ n mã nh
phá o hoa theo trụ c Ox và trụ c Oy tương ứng là _speedX và _speedY; mộ t hà m khởi
tạ o. Hà m tạ o có chức nă ng phá t họ a hı̀nh the� ban đa� u củ a phâ n mã nh phá o hoa.
Trong trường hợp nà y, phâ n mã nh phá o hoa sẽ được vẽ ba� ng mộ t hı̀nh trò n (thực
cha� t là eclipse nhưng có hı̀nh chữ nhậ t bao quanh là hı̀nh vuô ng nê n nó là hı̀nh
trò n). Ngoà i ra, lớp Particle cò n có thê m mộ t hà m Clear đó ng vai trò là mộ t hà m
hủ y. Hà m hủ y nà y sẽ xó a cá c phâ n mã nh phá o hoa (khi cá c phâ n mã nh tan bie� n
và o khô ng trung). Lớp Particle sẽ có mã nguo� n như bê n dưới:
package
{
import flash.display.Shape

public class Particle extends Shape


{
public var _speedY:Number = 0;
public var _speedX:Number = 0;

public function Particle()


{
this.graphics.beginFill(0xFFFFFF);
this.graphics.drawEllipse(0, 0, 1, 1);
this.graphics.endFill();
}

public function Clear():void


{
this.graphics.clear();
_speedY = NaN;
_speedX = NaN;
}
}
}
Bước 3. Bo� sung và o dự á n thê m mộ t lớp Explosion.as. Lớp nà y ke� thừ từ lớp
Sprite. Lớp Explosion minh họ a cho hà nh độ ng no� củ a phá o hoa. Khi phá o hoa
bay lê n đı̉nh đie� m, nó sẽ ba� t đa� u no� và cá c phâ n mã nh phá o hoa sẽ ba� n tung ra
theo cá c hướng khá c nhau đe� tạ o nê n mộ t hı̀nh thù nà o đó . Trong vı́ dụ minh họ a
nà y, phá o sẽ no� và o tạ o ra hı̀nh trò n trê n khô ng trung và bie� n ma� t. Đe� phá t họ a

- 290 -
được hiệ u ứng phá o hoa no� , ta ca� n mộ t mả ng cá c Particle. Do đó , lớp Explosion sẽ
có hai thuộ c tı́nh cơ bả n: mộ t mả ng cá c phâ n mã nh phá o hoa (sau khi no� ) là
_particles và so� lượng cá c phâ n mã nh phá o hoa là _number.
Trong hà m khởi tạ o củ a Explosion, ta ca� n tı́nh toá n sự chuye� n độ ng cho mo� i phâ n
mã nh phá o hoa trong khô ng gian. Đe� cho phá o hoa no� được sinh độ ng hơn, thı̀
mà u sa� c, so� lượng và kı́ch thước củ a cá c phâ n mã nh phả i được khởi tạ o mộ t cá ch
nga� u nhiê n.
//Số lượng phân mãnh
_number = Math.floor(Math.random() * 30) + 30;
//Màu sắc của các phân mãnh
var ct:Color = new Color();
ct.setTint (0xFFFFFF * Math.random(),1);
//Kích thước của các phân mãnh
var scale:Number = 3*Math.random();
Tie� p theo, ta ca� n tı́nh toá n sự chuye� n độ ng củ a cá c phâ n mã nh. Đe� cho cá c phâ n
mã nh cá ch đie� u nhau trê n mộ t vò ng trò n, ta ca� n tı́nh toá n độ lệ ch so với trụ c
chua� n Ox trê n đường trò n lượng giá c.

Oy

sin Ox
cos

Hình 194 – Tạ o chuye� n độ ng cho cá c mã nh vỡ


Trong hı̀nh minh họ a ở trê n, khi phá o no� sẽ tạ o ra 8 mã nh vỡ. Đe� cho cá c viê n
cá ch đe� u nhau, thı̀ mo� i mà nh sẽ chê nh nhau mộ t gó c lệ ch là 360/8. Do đó , gó c
lệ ch trong trường hợp to� ng quá t sẽ là :
var angleDifference:Number = 360 / _number;
Đo� i với mo� i phâ n mã nh theo thứ tự i sẽ có gó c lệ ch là i*angleDifference. Ne� u bie� u
die� n dưới dạ ng vò ng lặ p for, ta có the� thay ba� ng phé p cộ ng do� n:
angle += angleDifference;

- 291 -
Trong đó , gó c angle tương ứng với gó c lệ ch củ a từng phâ n mã nh. Phâ n mã nh đa� u
tiê n có gó c lệ ch là 0; phâ n mã nh tie� p theo có gó c lệ ch là angel+angleDifference;
phâ n mã nh tie� p theo nữa là angle+2*angleDifference,…
Theo mặ c định, cá c hà m lượng giá c củ a ha� u he� t ngô n ngữ lậ p trı̀nh đe� u sử dụ ng
tham so� mặ c định là radian, nê n ta ca� n chuye� n đo� i gó c lệ ch từ độ sang radian.
độ
𝑟𝑎𝑑𝑖𝑎𝑛 = .𝜋
180
Đe� đả m bả o chuye� n độ ng củ a cá c phâ n mã nh khô ng là m thay đo� i hı̀nh dá ng củ a
phá o hoa (hı̀nh trò n), ta ca� n đả m bả o gó c chuye� n độ ng khô ng thay đo� i. Đie� u đó có
nghı̃a là tọ a độ x và tọ a độ y củ a cá c phâ n mã nh phả i có sự thay đo� i câ n ba� ng: tọ a
độ x dịch lê n mộ t đoạ n cos củ a gó c lệ ch, và tọ a độ y dịch chuye� n lê n mộ t đoạ n là
sin củ a gó c lệ ch. Độ dịch chuye� n nà y ca� n được cậ p nhậ p thô ng qua hà m Update.
Khi chuye� n độ ng, cá c phâ n mã nh giả m độ trong suộ t alpha đe� tạ o hiệ u ứng da� n
bie� n ma� t. Khi độ alpha xuo� ng tha� p hơn 0 (trong trường hợp minh họ a là 0.1) thı̀
nó sẽ bị xó a bỏ khỏ i khung nhı̀n.
package {

import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.display.Sprite;
import flash.events.*;
import fl.motion.Color;
import flash.geom.ColorTransform;

public class Explosion extends Sprite


{

private var _particles:Array = null;


private var _number:uint = 0;

function Explosion ():void


{

_particles = [];

_number = Math.floor(Math.random() * 30) + 30;

var ct:Color = new Color();

- 292 -
ct.setTint (0xFFFFFF * Math.random(),1);

var scale:Number = 3*Math.random();

var angleDifference:Number = 360 / _number;


var angle = 0;

for (var i = 0; i < _number; i++) {

var particle:Particle = new Particle();

particle._speedY = Math.sin(angle * Math.PI/180)*3;


particle._speedX = Math.cos(angle * Math.PI/180)*3;

//Assign the scale to change the particle's size


particle.scaleX = scale;
particle.scaleY = scale;
_particles.push (particle);

//Assign the color


particle.transform.colorTransform = ct;

addChild (particle);

//Update the angle for the next particle


angle += angleDifference;
}
addEventListener (Event.ENTER_FRAME, Update);
}
function Update (event:Event):void
{
for (var i = 0; i < _particles.length; i++)
{
var particle:Particle = _particles[i];

particle.y += particle._speedY;
particle.x += particle._speedX;

- 293 -
particle.alpha -= 0.02;

if (particle.alpha < -0.1)


{
removeEventListener (Event.ENTER_FRAME, Update);
removeChild(particle);
particle.Clear();
particle = null
}
}
}
}
}
Bước 4. Tạ o mới mộ t lớp Firework.as. Lớp nà y minh họ a cho việ c ba� n phá o hoa.
Phá o hoa được ba� n lê n sau đó no� tung ra thà nh nhie� u mã nh.
Khi phá o hoa no� , nó có nhie� u qua� ng sá ng no� i đuô i nhau. Mo� i qua� ng sá ng sẽ tương
ứng với mộ t hiệ u ứng no� củ a lớp Explosion. Hiệ u ứng no� nà y ca� n được cậ p nhậ t
thô ng qua mộ t đo� i tượng Timer. Có nhie� u cá ch giả i quye� t va� n đe� sử dụ ng nhie� u
Timer đe� tạ o nhie� u qua� ng sá ng. Mộ t trong những cá ch thuậ n lợi là dù ng Array.
Tuy nhiê n, đe� đơn giả n, trong vı́ dụ nà y tô i sử dụ ng 11 Timer riê ng biệ t. Cá c timer
nà y phả i có độ tre� (tham so� đa� u tiê n trong hà m khởi tạ o) khá c nhau. Ne� u gio� ng
nhau, thı̀ cá c qua� ng sá ng nà y luô n cho� ng khı́t lê n nhau và ta chı̉ có the� tha� y mộ t
qua� ng sá ng duy nha� t. Mo� i qua� ng sá ng chı̉ được phé o lặ p mộ t la� n (tham so� thứ hai
trong hà m khởi tạ o củ a timer).
Trước khi ba� t đa� u hiệ u ứng no� (tương ứng với phương thức Lauch) thı̀ trong hà m
khởi tạ o củ a lớp Firework ca� n tạ o ra mộ t viê n phá o chuye� n độ ng lê n ba� u trời. Khi
chuye� n độ ng đe� n vị trı́ giới hạ n nà o đó , phá o sẽ ba� t đa� u no� (phương thức Lauch
được triệ u gọ i). Hà m khởi tạ o cò n có mộ t tham so� là roX – cho phé p tạ o ra độ lệ ch
theo trụ c Ox khi chuye� n độ ng lê n trê n mà khô ng phả i là chuye� n độ ng tha� ng đứng.
package
{
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.display.Sprite;
import flash.events.Event;
public class Firework extends Sprite
{
private var _speedY:Number = 0;

- 294 -
private var _timer:Timer = null;
private var _timer1:Timer = null;
private var _timer2:Timer = null;
private var _timer3:Timer = null;
private var _timer4:Timer = null;
private var _timer5:Timer = null;
private var _timer6:Timer = null;
private var _timer7:Timer = null;
private var _timer8:Timer = null;
private var _timer9:Timer = null;
private var _timer10:Timer = null;
private var roX:Number = 0;

function Firework (roX:Number):void


{
_speedY = (-1) * Math.random() * 9 - 1;
this.graphics.beginFill(0xFFFFFF);
this.graphics.drawCircle(0, 0, 1);
this.graphics.endFill();
this.roX = roX;
Launch();
}

private function Launch ():void


{
this.addEventListener (Event.ENTER_FRAME, Update);

_timer = new Timer(3200, 1);


_timer.start ();
_timer.addEventListener (TimerEvent.TIMER_COMPLETE, Explode);

_timer1 = new Timer(3100, 1);


_timer1.start ();
_timer1.addEventListener (TimerEvent.TIMER_COMPLETE, Explode);

_timer2 = new Timer(3000, 1);


_timer2.start ();
_timer2.addEventListener (TimerEvent.TIMER_COMPLETE, Explode);

- 295 -
_timer3 = new Timer(2900, 1);
_timer3.start ();
_timer3.addEventListener (TimerEvent.TIMER_COMPLETE, Explode);

_timer4 = new Timer(2800, 1);


_timer4.start ();
_timer4.addEventListener (TimerEvent.TIMER_COMPLETE, Explode);

_timer5 = new Timer(2700, 1);


_timer5.start ();
_timer5.addEventListener (TimerEvent.TIMER_COMPLETE, Explode);

_timer6 = new Timer(2600, 1);


_timer6.start ();
_timer6.addEventListener (TimerEvent.TIMER_COMPLETE, Explode);

_timer7 = new Timer(2500, 1);


_timer7.start ();
_timer7.addEventListener (TimerEvent.TIMER_COMPLETE, Explode);

_timer8 = new Timer(2400, 1);


_timer8.start ();
_timer8.addEventListener (TimerEvent.TIMER_COMPLETE, Explode);

_timer9 = new Timer(2300, 1);


_timer9.start ();
_timer9.addEventListener (TimerEvent.TIMER_COMPLETE, Explode);

_timer10 = new Timer(2200, 1);


_timer10.start ();
_timer10.addEventListener (TimerEvent.TIMER_COMPLETE, Explode);
}

private function Update (event:Event):void


{
this.y += _speedY;
this.x += roX;

- 296 -
}

private function Explode (event:TimerEvent):void


{
removeEventListener (Event.ENTER_FRAME, Update);

var explosion:Explosion = new Explosion();


explosion.x = this.x;
explosion.y = this.y;
stage.addChild (explosion);

this.visible = false;
}
}
}
Bước 5. Bo� sung thê m lớp Fireworks.as. Lớp nà y cho phé p ta có the� tạ o ra nhie� u
viê n phá o được ba� n lê n mà khô ng chı̉ giới hạ n mộ t viê n duy nha� t.
Trong minh họ a bê n dưới, mo� i la� n sẽ có 2 viê n phá o được ba� n lê n ba� u trời.
Nhưng chú ng khô ng được ba� n cù ng mộ t thời đie� m mà có độ tre� (vı̀ hai Timer
khởi tạ o hai hiệ u ứng phá o hoa có độ tre� thời gian khá c nhau la� n lượt là 2000 và
2400. Việ c tạ o độ tre� như trong vı́ dụ nà y, sẽ là m cho hiệ u ứng phá o hoa thê m
pha� n thú vị.
package
{
import flash.display.Sprite;
import flash.utils.Timer;
import flash.events.TimerEvent;

public class Fireworks extends Sprite


{
var _timer:Timer = new Timer(2000);
var _timer1:Timer = new Timer(2400);

public function Fireworks()


{
_timer.addEventListener (TimerEvent.TIMER, CreateFirework);
_timer.start ();
_timer1.addEventListener (TimerEvent.TIMER, CreateFirework1);

- 297 -
_timer1.start ();
}

private function CreateFirework(event:TimerEvent):void


{
var firework:Firework = new Firework(1);

firework.y = stage.stageHeight - 200;


firework.x = stage.stageWidth - 100;
addChild (firework);
}
private function CreateFirework1(event:TimerEvent):void
{
var firework1:Firework = new Firework(-3);
firework1.y = stage.stageHeight - 100;
firework1.x = stage.stageWidth - 200;
addChild (firework1);
}
}
}
Bước 6. Trong TimeLine, tạ o mới mộ t
layer có tê n là ActionFireWork, tạ i
frame 1, kı́ch chuộ t phả i và chọ n Action,
sau đó nhậ p và o nộ i dung sau:
var fw:Fireworks = new
Fireworks();
addChild(fw);
Sau đó , nha� n Ctrl+Enter đe� kie� m tra ke� t
quả .

Xem dự án:
..\Lession\Source\BaiTapNangCao\Pr05
_eCard.

6. XÂY DỰNG GAME ĐƯA BÓNG VÀO


LỖ
(Cho Mobile cả m ứng con quay). Hình 195 – Thiệ p mừng nă m mới

- 298 -
Đâ y là mộ t trò chơi đơn giả n, dựa trê n cả m bie� n con quay củ a thie� t bị di độ ng.
Nhiệ m vụ củ a bạ n là nghiê ng má y đe� đưa bó ng và o cá c ô chı̉ định. Nhờ và o cả m
bie� n con quay, mà quả bó ng như na� m trê n be� mặ t củ a thie� t bị, và nhiệ m vụ củ a ta
là nghiê ng má y đe� đưa bó ng và o lo� .
Bước 1. Tạ o ba scene có tê n la� n lượt là : Intro, Game và About. Sau đó , trang trı́
cho chú ng như hı̀nh minh họ a bê n dưới:

Hình 196 – Tạ o cá c scene trong game đưa bó ng


Bước 2. Hiệ u chı̉nh khi nha� p và o Play thı̀ nhả y đe� scene Game, khi nha� p và o
About thı̀ nhả y đe� n scene About, khi nha� p và o Exit thı̀ thoá t khỏ i ứng dụ ng. Hã y
sử dụ ng vù ng chức nă ng code snippets đe� thực hiệ n cô ng việ c nó i trê n.
Bước 3. Là m tương tự như bước 2 cho nú t Back ở scene About. Khi nha� p và o nú t
back nà y, ta sẽ quay trở lạ i với scene Intro.
Bước 4. Lậ p trı̀nh cho game ở scene Game.
a) Tạ o mộ t vò ng trò n, chuye� n đo� i nó sang movieClip. Kı́ch chuộ t phả i, chọ n
Properties và chọ n Export for ActionScript. Đặ t tê n cho lớp đo� i tượng nà y là
Vong.
b) Phá t họ a hı̀nh mộ t quả bó ng, chuye� n đo� i nó sang movieClip và đặ t tê n
(Instance name) cho nó là movieClip_1.
Lưu ý: ca� n đả m bả o kı́ch thước củ a Vong và movieClip_1 ga� n ba� ng nhau (Vong lớn
hơn mộ t chú t).
c) Hiệ u chı̉nh cho movieClip_1 di chuye� n ba� ng cả m bie� n con quay (sử dụ ng chức
nă ng trong vù ng Code snippet – move with Accelerometer). Tuy nhiê n, ta ca� n
hiệ u chı̉nh đe� bó ng khô ng vượt quá vù ng nhı̀n tha� y củ a khung hı̀nh (ne� u tọ a độ x

- 299 -
củ a bó ng lớn hơn 0 và nhỏ hơn độ rộ ng củ a khung nhı̀n thı̀ mới cho phé p di
chuye� n theo tọ a độ x; tương tự với tọ a độ y).
d) Đe� kie� m tra quả bó ng rơi và o lo� tro� ng, ta ca� n kie� m tra tọ a độ củ a nó : ne� u tọ a
độ x củ a bó ng lớn hơn hoặ c ba� ng tọ a độ x củ a lo� và nhỏ hơn hoặ c ba� ng tọ a độ x
củ a lo� + chie� u rộ ng củ a lo� ĐO� NG THƠ�I tọ a độ y củ a bó ng lớn hơn tọ a độ y củ a lo�
và nhỏ hơn tọ a độ y củ a lo� + chie� u cao củ a lo� THI� bó ng rơi và o lo� . Ne� u bó ng rơi
và o lo� , ta sẽ tie� n hà nh cộ ng đie� m cho người chơi và lo� tro� ng sẽ bie� n ma� t, sau đó
nó sẽ hie� n thị ở mộ t vı́ trı́ mới. Vı́ trı́ mới củ a lo� tro� ng sẽ xua� t hiệ n mộ t cá ch nga� u
nhiên.
e) Tạ o mộ t nú t nha� n đe� quay trở lạ i scene Intro.
f) Bo� sung â m nhạ c và o cho game như đã hướng da� n ở trê n.
Sau đâ y là toà n bộ mã nguo� n củ a game.
Mã nguồn của scence Intro
stop();

//txtPlay – nú t Play


txtPlay.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene);
function fl_ClickToGoToScene(event:MouseEvent):void
{
MovieClip(this.root).gotoAndStop(1, "Game");
}

//txtAbout – nú t About


txtAbout.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene_2);
function fl_ClickToGoToScene_2(event:MouseEvent):void
{
MovieClip(this.root).gotoAndStop(1, "About");
}

//txtExit – nú t Exit


txtExit.addEventListener(MouseEvent.CLICK, fl_CloseWindow);
function fl_CloseWindow(event:Event):void
{
NativeApplication.nativeApplication.exit();
}

txtPlay.buttonMode = true;
txtAbout.buttonMode = true;

- 300 -
txtExit.buttonMode = true;

Mã nguồn của scene Game


import flash.utils.Timer;
import flash.events.TimerEvent;
var one:Vong = new Vong();
one.x = 100;
one.y = 200;
addChild(one);

var diem:int = 0;

var fl_Accelerometer:Accelerometer = new Accelerometer();


fl_Accelerometer.addEventListener(AccelerometerEvent.UPDATE,
fl_AccelerometerUpdateHandler);

var musicplayer:MusicSound = new MusicSound();


musicplayer.play();
var loopmusic:Timer = new Timer(28000, 0);
loopmusic.start();
loopmusic.addEventListener(TimerEvent.TIMER, playmusic);

function playmusic(e:TimerEvent):void
{
musicplayer.play();
}

function fl_AccelerometerUpdateHandler(event:AccelerometerEvent):void
{
movieClip_1.x -= event.accelerationX*100;
movieClip_1.y += event.accelerationY*100;
}

var timer:Timer = new Timer(1, 0);


timer.addEventListener(TimerEvent.TIMER, updateTime);
timer.start();
function updateTime(e:TimerEvent):void
{

- 301 -
if(((movieClip_1.x>=one.x)&&(movieClip_1.x<=one.x+one.width))&&((mo
vieClip_1.y>=one.y)&&(movieClip_1.y<=one.y+one.height)))
{
one.x = randomNumber(0, stage.stageWidth - one.width);
one.y = randomNumber(0, stage.stageHeight - one.height);
one.play();
diem++;
txtDiem.htmlText = "<font color='#ffffff'>Đie� m: </font><font
color='#ff0011'>" + diem + "</font>";
}

if(movieClip_1.x<0)
movieClip_1.x = 0;
if(movieClip_1.y<0)
movieClip_1.y = 0;
if(movieClip_1.x>stage.stageWidth)
movieClip_1.x = stage.stageWidth;
if(movieClip_1.y>stage.stageHeight)
movieClip_1.y = stage.stageHeight;
}

function randomNumber(low:Number, high:Number):Number


{
return Math.round(Math.random() * (high - low)) + low;
}

Menu.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene_4);

function fl_ClickToGoToScene_4(event:MouseEvent):void
{
removeChild(one);
MovieClip(this.root).gotoAndStop(1, "Intro");
}

Mã nguồn của scene About


txtBack.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene_3);

function fl_ClickToGoToScene_3(event:MouseEvent):void

- 302 -
{
MovieClip(this.root).gotoAndPlay(1, "Intro");
}
txtBack.buttonMode = true;
Cuo� i cù ng, nha� n Ctrl+Enter đe� kie� m tra ke� t quả . Cũ ng ca� n lưu ý ra� ng, game nà y là
game cả m bie� n con quay, nê n chı̉ có the� kie� m tra ke� t quả trê n thie� t bị di độ ng có
ho� trợ cả m bie� n con quay. Khi test, ta ca� n chọ n chức nă ng Publish ở menu File
(phı́m ta� t Alt+Shift+F12) và khô ng quê n bậ t chức nă ng Debug USB củ a thie� t bị.

Xem dự án: ..\Lession\Source\BaiTapNangCao\Pr06_RotSensor.

7. XÂY DỰNG GAME DIỆT RỆP


Trong trò chơi nà y, cá c chú rệ p sẽ xua� t hiệ n trê n mà n hı̀nh và chạ y theo cá c
hướng khá c nhau. Nhiệ m vụ củ a bạ n là phả i tiê u diệ t toà n bộ cá c chú rệ p ba� ng
cá ch nha� p chuộ t và o chú ng (ne� u là thie� t bị cả m ứng, thı̀ hã y nha� p bú t cả m ứng
hoặ c ngó n tay và o). Trong mo� i mà n, sẽ có mộ t so� lượng rệ p ca� n tiê u diệ t. Ne� u tiê u
diệ t he� t so� rệ p thı̀ ta sẽ được chuye� n sang mà n tie� p theo. Trò chơi có luậ t chơi ra� t
đơn giả n.
Bước 1. Thie� t ke� giao diệ n người chơi như bê n dưới.

Hình 197 – Thie� t ke� giao diệ n game

- 303 -
Trong giao diệ n nà y, go� m có 4 Layer chứa cá c thà nh pha� n như sau:
- Layer Background: chứa hı̀nh ne� n. Bạ n có the� trang trı́ giao diệ n theo ý thı́ch củ a
mı̀nh
- Layer Level: chứa mộ t thà nh pha� n vă n bả n có tê n là txtLevel.
- Layer NextLevel: chứa mộ t thà nh pha� n vă n bả n có tê n là txtNext.
- Layer Actions: đe� soạ n thả o actionscript cho game ở stage.
Bước 2. Thie� t ke� hiệ u ứng chuye� n mà n. Hã y chuye� n đo� i đo� i tượng vă n bả n
txtNext sang movieClip và đặ t tê n là mvNext. Sau đó , hã y nha� p đô i chuộ t và o
movieClip nà y đe� và o Timeline củ a nó và hã y thie� t ke� hiệ u ứng bó ng mờ cho nó
nhờ và o Motion Tween như bê n dưới.

Hình 198 – Tạ o hiệ u chuye� n mà n


Ơ� Layer 1, tạ i frame 1, Blur X = Blur Y = 72; tạ i frame 5, Blur X = Blur Y = 0. Bo�
sung thê m mộ t Layer 2, tạ i Frame 5 củ a Layer nà y, nha� n phı́m F6 đe� chè n
KeyFrame, sau đó , kı́ch chuộ t phả i và chọ n Actions, sau đó nhậ p và o lệ nh
stop();
Sau đó , quay trở lạ i stage chı́nh.
Bước 3. Thie� t ke� những con rệ p. Hã y sử dụ ng cô ng cụ vẽ đe� phá t họ a hı̀nh chú
rệ p hoặ c có the� sử dụ ng ả nh đe� ghé p và o. Giả sử, ta có hı̀nh chú rệ p như sau:

- 304 -
Hình 199 – Tạ o hı̀nh con bọ
Sau đó , hã y chuye� n nó sang movieClip và đặ t tê n là Bug. Trong thư việ n củ a dự
á n, hã y chọ n movieClip Bug nà y, kı́ch chuộ t phả i, chọ n Properties và chọ n Export
for ActionScript. Khi xua� t bả n cho ActionScript, ca� n lưu ý đặ t tê n lớp cho nó là
Bug. Tie� p tụ c kı́ch chuộ t phả i lê n movieClip Bug nà y trong thư việ n củ a dự á n, và
chọ n Edit Class, chọ n Flash Professional đe� chı̉nh sửa mã ngo� n cho lớp Bug nà y.
Lớp Bug ca� n có cá c thuộ c tı́nh thà nh viê n là speed – to� c độ chuye� n độ ng,
myRotation – gó c quay củ a rệ p khi chuye� n độ ng, xchange và ychange – khoả ng
cá ch dịch chuye� n theo chie� u x và theo chie� u y. Mộ t bie� n public dạ ng static là
count đe� cho bie� t so� lượng cá c con rệ p đã được tạ o ra (khởi tạ o là 0). Lớp khởi
tạ o sẽ khởi tạ o cá c tham so� mặ c định cho lớp Bug đo� ng thời triệ u gọ i 2 phương
thức fl_moveParticle – tạ o chuye� n độ ng cho rệ p và fl_clickToKill – nha� p chuộ t lê n
rệ p đe� tiê u diệ t nó . Sự di chuye� n củ a rệ p phả i được cậ p nhậ t liê n tụ c, do đó , ta sử
dụ ng Timer đe� tạ o ra sự chuye� n độ ng nà y. Khi rệ p chuye� n độ ng vượt giới hạ n
khung nhı̀n, thı̀ nó sẽ xua� t hiệ n ở phı́a rı̀a củ a cạ nh đo� i diệ n. Gó c quay củ a rệ p
cũ ng tı́nh toá n nga� u nhiê n đe� cho sự chuye� n độ ng củ a rệ p được sinh độ ng hơn.
Khi tạ o mới mộ t chú rệ p trong hà m khởi tạ o, ta ca� n tă ng bie� n count lê n 1; khi xó a
đi mộ t chú rệ p, ta ca� n giả m bie� n count đi 1. Sau đâ y là toà n bộ mã nguo� n củ a lớp
Bug.
package
{

import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.utils.Timer;
import flash.events.TimerEvent;

public class Bug extends MovieClip


{

- 305 -
private var speed:Number;
private var myRotation:Number;
private var ychange:Number;
private var xchange:Number;
private var timer:Timer;

public static var count = 0;

public function Bug(sp:Number)


{
buttonMode = true;
speed = sp;
myRotation = 0;
timer = new Timer(20);
x = 1000*Math.random();
y = 1000*Math.random();
timer.addEventListener(TimerEvent.TIMER, fl_moveParticle);
timer.start();
addEventListener(MouseEvent.CLICK, fl_clickToKill);
count++;
}

function fl_moveParticle(e:TimerEvent):void
{
myRotation = myRotation + (Math.round(Math.random()*30-
15));
ychange = (Math.cos((Math.PI/180)*myRotation))*speed;
xchange = (Math.sin((Math.PI/180)*myRotation))*speed;
if (x<0)
{
x = parent.stage.stageWidth;
}
if (x>parent.stage.stageWidth)
{
x = 0;
}
if (y<0)
{

- 306 -
y = parent.stage.stageHeight;
}
if (y>parent.stage.stageHeight)
{
y = 0;
}
y = y - ychange;
x = x + xchange;
rotation = myRotation;
}

function fl_clickToKill(evt:MouseEvent):void
{
timer.stop();
parent.removeChild(this);
count--;
}
}
}
Bước 4. Kı́ch chuộ t phả i và o frame 1 củ a Layer Actions, chọ n Actions và nhậ p và o
nộ i dung sau đâ y:
import flash.events.Event;
import flash.utils.Timer;
import flash.events.TimerEvent;

var level:int = 0;

mvNext.visible = false;

var timer:Timer = new Timer(1);


timer.addEventListener(TimerEvent.TIMER, fl_NextLevel);
timer.start();

function fl_NextLevel(e:TimerEvent):void
{
if(Bug.count==0)
{
mvNext.visible = true;

- 307 -
mvNext.gotoAndPlay(1);
timer.stop();
}
}

mvNext.buttonMode = true;
mvNext.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2);

function fl_MouseClickHandler_2(event:MouseEvent):void
{
level++;
for(var i:int = 0; i<2*level+2; i++)
{
var par:Bug = new Bug(5);
addChild(par);
}
txtLevel.htmlText = "<font color='#ffffff'>Level: </font><font
color='fff000'>" + level.toString() + "</font>";
timer.start();
mvNext.visible = false;
}
Mã nguo� n củ a chương trı̀nh khá đơn giả n. Bie� n level cho bie� n mà n chơi hiệ n tạ i là
mà n bao nhiê u. Mo� i khi so� lượng cá c con rệ p ba� ng 0 (tức Bug.count==0) thı̀ sẽ
xua� t hiệ n thô ng bá o qua mà n (Next Level). Khi nha� p và o chữ Next Level nà y,
người chơi có the� tie� p tụ c chơi mà n tie� p theo. So� lượng rệ p cho mo� i mà n chơi
được tı́nh theo cô ng thức:
so� lượng rệ p = 2*level + 2
Ne� u bạ n cả m tha� y so� lượng rệ p cho mo� i mà n chơi như the� nà y là quá nhie� u (hay
quá ı́t) thı̀ bạ n có the� thay đo� i cô ng thức tı́nh.
Cuo� i cù ng, hã y nha� n Ctrl+Enter đe� kie� m tra ke� t quả . Game nà y hoà n toà n phù hợp
cho cả Desktop la� n cá c thie� t bị di độ ng. Đặ c biệ t, nó ra� t thú vị cho cá c thie� t bị di
độ ng cả m ứng thô ng minh.
Đe� tă ng thê m độ khó cho game, bạ n có the� quy định thời gian chơi cho mo� i mà n.
Ne� u người chơi khô ng the� hoà n ta� t mo� i mà n trong thời gian quy định, thı̀ người
chơi nhậ n được thô ng bá o Game Over. Đie� u nà y cũ ng ra� t đơn giả n, cá c bạ n xem
như là bà i tậ p nhé .

Xem dự án: ..\Lession\Source\BaiTapNangCao\Pr07_Bugs.

- 308 -
8. XÂY DỰNG GAME NÔNG TRẠI VUI VẺ
Cha� c ha� n game nô ng trạ i vui vẻ khô ng cò n xa lạ gı̀ với nhie� u người. Tô i xin nha� c
lạ i luậ t chơi củ a game nà y: bạ n có mộ t so� tie� n ban đa� u. Bạ n sẽ chi trả đe� mua cá c
hạ t gio� ng đe� gieo tro� ng và chă n nuô i, xâ y dựng nhà cửa. Bạ n chı̉ được phé p sử
dụ ng so� tie� n mı̀nh có . Sau mo� i la� n thu hoạ ch, bạ n sẽ có mộ t so� tie� n tương ứng với
việ c bá n đi sả n pha� m đó . Trong game mà tô i hướng da� n xâ y dựng sau đâ y, chú ng
ta chı̉ thả o luậ n mộ t pha� n củ a game nô ng trạ i vui vẻ : chı̉ khả o sá t khı́a cạ nh tro� ng
trọ t. Những mặ t như chă n nuô i và xâ y dựng, cá c bạ n là m hoà n toà n tương tự ne� u
như đã hie� u cá ch là m trong hướng da� n nà y.
Bước 1. Tạ o mộ t khung thie� t ke� kı́ch thước 1000x500. Trong stage nà y, ta ca� n tạ o
hai Layer: Dialog và Game. Sau đó , la� n lượt tạ o cá c movieClip sau đâ y:
a) MovieClip mả nh đa� t – Land.
- Dù ng ả nh đe� ca� t mộ t pha� n có kı́ch thước 100x100 (hoặ c dù ng cô ng cụ đo� họ a
củ a Flash đe� phá t họ a ma� u hı̀nh mả nh đa� t).
- Kı́ch chuộ t phả i và o pha� n đo� họ a thu được nà y, chọ n Convert To Symbol và chọ n
MovieClip. Đặ t tê n cho nó là Land.
- Nha� p đô i chuộ t và o movieClip Land nà y đe� mở khung soạ n thả o củ a nó . Đo� i tê n
củ a Layer thà nh Process. Chè n thê m mộ t keyframe (nha� n F6) trong Timeline.
Như vậ y, trong Timeline củ a movieClip nà y, có hai keyframe. Hã y thay sao ché p
ả nh ở keyframe 1 sang keyframe 2 và hiệ u chı̉nh độ sá ng củ a nó sá ng hơn ả nh ở
keyframe 1. Vı́ dụ , ta có hai anh tương ứng với 2 keyframe củ a Timeline củ a đo� i
tượng movieClip Land như sau:

Hình 200 – Tạ o hı̀nh mả nh ruộ ng


Chè n thê m mộ t Layer có tê n là Action. Chè n 2 keyframe tro� ng (nha� n F6) trê n
Layer Action nà y. Chọ n frame 1 củ a Layer Action, kı́ch chuộ t phả i, chọ n Action và
nhậ p và o dò ng lệ nh
stop();
Là m hoà n toà n tương tự cho frame 2 củ a Layer Action nà y.
Mụ c đı́ch củ a việ c tạ o ra movieClip Land nà y là dù ng đe� tạ o be� mặ t đa� t trong
game. Hai keyframe mà ta tạ o, tương ứng với hai trạ ng thá i khi chuộ t trỏ lê n nó

- 309 -
và khi chuộ t di chuye� n ra ngoà i nó . Đie� u đó giú p chú ng ta xá c định vị trı́ chı́nh xá c
củ a mả nh đa� t mà ta sẽ tie� n hà nh tro� ng trọ t.
b) Tạ o movieClip tro� ng câ y Anh đà o. Là m hoà n toà n tương tự như trê n. Phá t họ a
mộ t khung ả nh có kı́ch thước 100x100, sau đó chuye� n đo� i sang movieClip có tê n
là AnhDao. Nha� p đô i chuộ t và o movieClip AnhDao nà y đe� và o khung thie� t ke� dà nh
riê ng cho nó . Trong Timeline củ a AnhDao, ta tạ o ra 3 Layer và đặ t tê n la� n lượt là :
Action, Process (Layer nà y đo� i tê n từ Layer 1 mặ c định) và Land. Layer Land
dù ng đe� tạ o hı̀nh mặ t đa� t (kı́ch thước 100x100). Layer process tương ứng với cá c
giai đoạ n phá t trie� n củ a câ y Anh đà o. Tương ứng với bao nhiê u trạ ng thá i phá t
trie� n củ a câ y Anh đà o (gieo hạ t, nả y ma� m, lê n câ y con, đơm hoa, ke� t quả …) thı̀ ta
tạ o ra ba� y nhiê u keyframe tương ứng. Đe� đơn giả n, tô i chı̉ tạ o ra 3 keyframe,
nhưng keyframe đa� u tiê n tô i khô ng sử dụ ng (ne� u muo� n, bạ n có the� tạ o ra nhie� u
hơn).
- Trê n Layer Action, tạ o 3 keyframe tro� ng và tương ứng với mo� i vị trı́ củ a cá c
keyframe (frame 1, frame 2, frame 3, … củ a Layer Action), ta la� n lượt chè n và o
cá c dò ng lệ nh:
stop();
- Trê n Layer Land, ta chı̉ sao ché p hı̀nh ả nh củ a nó trê n cả 3 frame (tức nha� n
phı́m F5).
- Trê n Layer Process, ta tạ o ra 3 hı̀nh ả nh trê n 3 keyframe (tương ứng với 3 trạ ng
thá i phá t trie� n củ a câ y Anh đà o).

Hình 201 – Quá trı̀nh phá t trie� n củ a câ y Anh đà o
Lưu ý: mả nh đa� t ở hı̀nh đa� u tiê n na� m trê n Layer Land. Trê n Layer Process,
keyframe 1 là keyframe tro� ng; hı̀nh ả nh câ y (khô ng có hı̀nh ne� n, hı̀nh nê n được
tạ o bởi Layer land ở phı́a dưới) tương ứng với keyframe 2 và hı̀nh 3 tương ứng
với keyframe 3.
c) Tạ o movieClip tro� ng câ y O� c chó . Là m hoà n toà n tương tự movieClip AnhDao.
Ta thu được movieClip OcCho. Hı̀nh ả nh minh họ a cho movieClip nà y như bê n
dưới:

- 310 -
Hình 202 – Tie� n trı̀nh phá t trie� n củ a câ y O� c chó
d) Tạ o movieClip đe� là m hộ p thoạ i chọ n cá c sả n pha� m. Thie� t ke� mộ t hộ p thoạ i
như bê n dưới. Đặ t tê n cho nó là dialog. Hộ p thoạ i dialog nà y được đặ t trong Layer
Dialog trong stage chı́nh.

Hình 203 – Cửa so� chọ n hà ng


Sau đó , hã y thie� t ke� hai hı̀nh ả nh minh họ a cho hai mặ t hà ng. Chuye� n đo� i chú ng
thà nh Button. Đặ t chú ng và o vị trı́ thı́ch hợp trê n movieClip nà y.

Hình 204 – Thô ng tin cá c mặ t hà ng


Trong đó , pha� n hı̀nh ne� n được đặ t trê n Layer Dialog; Layer MoTa chứa hai dò ng
vă n bả n mô tả ve� câ y Anh Đà o và câ y O� c Chó ; Layer AnhDao chứa button
btAnhDao; Layer OcCho chứa button btOcCho và thê m mộ t Layer Actions. Chi
tie� t, hã y quan sá t hı̀nh minh họ a bê n dưới:

- 311 -
Hình 205 – Thanh TimeLine củ a game Nô ng trạ i vui vẻ
Bước 2. Soạ n thả o mã nguo� n cho cá c đo� i tượng Land. Trong thư việ n củ a dự á n,
chọ n đo� i tượng Land, kı́ch chuộ t phả i, chọ n Edit Class sau đó lưu lạ i với tê n là
Land.as. Sau đó , nhậ p nộ i dung như sau:
package {

import flash.display.MovieClip;
import flash.events.MouseEvent;

public class Land extends MovieClip {


public static var _x:Number = 0;
public static var _y:Number = 0;

public function Land(mX:Number, mY:Number) {


x = mX;
y = mY;
addEventListener(MouseEvent.CLICK, getCoord);
addEventListener(MouseEvent.MOUSE_OVER, doMark);
addEventListener(MouseEvent.MOUSE_OUT, delMark);
}

function getCoord(e:MouseEvent):void
{
_x = x;
_y = y;
parent.getChildByName("dialog").visible = true;
}

function doMark(e:MouseEvent):void
{
gotoAndStop(2);

- 312 -
}

function delMark(e:MouseEvent):void
{
gotoAndStop(1);
}
}

}
Giải thích: Trong lớp Land nà y, có hai thuộ c tı́nh tı̃nh và cô ng khai (được quy định
bởi từ khó a static và public) là tọ a độ _x và _y. Hai thuộ c tı́nh nà y được quy định
như vậ y đe� ta có the� truy cậ p mộ t cá ch tự do trực tie� p qua tê n lớp mà khô ng ca� n
phả i qua đo� i tượng củ a lớp. Khi ta nha� p chuộ t và o mộ t mã nh đa� t nà o đó , thı̀ tọ a
độ củ a mả nh đa� t vừa được nha� p và o ca� n được lưu lạ i đe� ta bie� t chı́nh xá c vị trı́
ca� n thực hiệ n việ c tro� ng trọ t.
Hà m tạ o củ a lớp Land chứa hai tham so� mX và mY tương ứng với tọ a độ ca� n đặ t
mã nh đa� t. Khi chuộ t di chuye� n trê n mộ t mả nh đa� t, thı̀ mả nh đa� t đó phả i được
chuye� n mà u đe� ta phâ n biệ t được so với cá c mả nh đa� t khá c. Đe� thực hiệ n đie� u
nà y, ta ca� n bo� sung hai sự kiệ n MOUSE_OVER và MOUSE_OUT cho đo� i tượng Land
nà y. Khi nha� p chuộ t và o đo� i tượng Land, thı̀ sẽ là m xua� t hiệ n hộ p thoạ i chọ n sả n
pha� m và đo� ng thời lưu lạ i vị trı́ củ a mả nh đa� t vừa nha� p chuộ t và o. Đe� truy cậ p
đe� n đo� i tượng dialog na� m trê n khung soạ n thả o chı́nh, ta ca� n truy cậ p thô ng qua
thuộ c tı́nh parent (đo� i tượng cha củ a Land – vı̀ Land na� m trê n stage). Do đó , ta có
cá ch truy cậ p
parent.getChildByName("dialog").visible = true;
Thuộ c tı́nh visible đe� quy định đo� i tượng là a� n (false) hay hiệ n (true).
Khi di chuye� n chuộ t trê n mã nh đa� t, thı̀ mã nh đa� t đó sẽ sá ng lê n (tương ứng với
frame thứ 2 củ a Land), nê n ca� n nhả y đe� n frame nà y – gotoAndStop(2). Hoà n toà n
tương tự khi chuộ t di chuye� n khỏ i mả nh đa� t đó , thı̀ phả i chuye� n trở lạ i frame 1.
Bước 3. Tạ o mới mộ t lớp Product và đặ t tê n là Product.as. Lớp nà y cho phé p mô
tả cá c đo� i tượng tro� ng trọ t. Mo� i đo� i tượng tro� ng trọ t go� m có cá c thuộ c tı́nh sau:
thời gian ca� n thie� t đe� thu hoạ ch đo� i tượng – total; thuộ c tı́nh trạ ng thá i kie� m tra
tı̀nh trạ ng phá t trie� n củ a đo� i tượng – tstart (nó ba� t đa� u từ giá trị củ a total, sau
mo� i giâ y nó sẽ giả m đi 1, đe� n khi nà o nó nhậ n giá trị 0 thı̀ đo� i tượng đã sa� n sà ng
thu hoạ ch); thuộ c tı́nh incoin – so� tie� n thu được sau mo� i la� n thu hoạ ch đo� i tượng;
thuộ c tı́nh outcoin – so� tie� n bỏ ra khi mua đo� i tượng; thuộ c tı́nh txtStatus đe� hie� n
thị thời gian phá t trie� n củ a đo� i tượng; thuộ c tı́nh Timer đe� cậ p nhậ t tie� n trı̀nh

- 313 -
phá t trie� n củ a đo� i tượng, nó sẽ được cậ p nhậ t từng giâ y (1000ms). Mà nguo� n
toà n bộ củ a nó như sau:
package {
import flash.display.MovieClip;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.events.Event;
import flash.display.DisplayObject;

public class Product extends MovieClip{

protected var t:Timer = new Timer(1000);


protected var total:Number = 0;
protected var tstart:Number = 0;
protected var incoin:Number = 0;
protected var outcoin:Number = 0;
protected var txtStatus:TextField = new TextField();

public function Product(tt:Number, c:Number, oc:Number)


{
gotoAndStop(2);
total = tt;
tstart = total;
incoin = c;
outcoin = oc;
t.addEventListener(TimerEvent.TIMER, update);
t.start();
doubleClickEnabled = true;
addEventListener(MouseEvent.CLICK, Havest);
addEventListener(MouseEvent.DOUBLE_CLICK, Delete);

txtStatus.x = 0;
txtStatus.y = 0;
txtStatus.width = 100;
txtStatus.height = 20;
addChild(txtStatus);

- 314 -
this.txtStatus.addEventListener(Event.ENTER_FRAME,
fl_ClickToBringToFront);
addEventListener(MouseEvent.MOUSE_OVER, msover);
addEventListener(MouseEvent.MOUSE_OUT, msout);
}

function fl_ClickToBringToFront(event:Event):void
{
this.addChild(event.currentTarget as DisplayObject);
}

public function getIncoin():Number


{
return incoin;
}

public function getOutcoin():Number


{
return outcoin;
}

public static function numToDate(num:int):String


{
if(num<=0)
return "Sẵn sàng";
var h:int = num/3600;
var m:int = (num-h*3600)/60;
var s:int = num%60;
return h.toString()+":"+m.toString()+":"+s.toString();
}

function msover(e:MouseEvent):void
{
txtStatus.visible = true;
}

function msout(e:MouseEvent):void
{

- 315 -
txtStatus.visible = false;
}

function update(e:TimerEvent):void
{
tstart--;
txtStatus.htmlText = "<font size='18'>" +
Product.numToDate(tstart) + "</font>";
if(tstart<=0)
gotoAndStop(3);
}

function Havest(e:MouseEvent):void
{
if(tstart<=0)
{
MovieClip(root).tongdiem += incoin;
MovieClip(root).txt.htmlText = "<font color='#ffffff'
size='16'>Tổng điểm: " + MovieClip(root).tongdiem.toString() + "</font>";
tstart = total;
gotoAndStop(2);
}
}

function Delete(e:MouseEvent):void
{
parent.removeChild(this);
}

}
}
Giải thích: Hà m khởi tạ o củ a lớp Product chứa cá c tham so� : tt – tương ứng với
total, c – tương ứng với incoin và oc – tương ứng với outcoin. Lớp Product kı́ch
hoạ t cá c cá c sự kiệ n: CLICK – tương ứng với thu hoạ ch (ne� u đo� i tượng đã sa� ng
sà ng); DOUBLE_CLICK – tương ứng với việ c xó a bỏ đo� i tượng.
addEventListener(MouseEvent.CLICK, Havest);
addEventListener(MouseEvent.DOUBLE_CLICK, Delete);

- 316 -
Khi thu hoạ ch, thı̀ ca� n cậ p nhậ p so� tie� n lạ i cho đo� i tượng. Bie� n to� ng đie� m ta sẽ
khai bá o ở khung soạ n thả o ở stage. Khi muo� n truy cậ p đe� n bie� n nà y từ mộ t vị trı́
khá c trong vù ng action củ a đo� i tượng con, ta sử dụ ng cú phá p:
MovieClip(root).tongdiem…
Trong stage nà y, ta cò n có mộ t đo� i tượng vă n bả n là txt đe� hiệ n thị đie� m hiệ n thời
mà người chơi có . Cá ch truy cậ p đe� n đo� i tượng nà y hoà n toà n tương tự. Đo� i với
đo� i tượng vă n bả n, ne� u đơn thua� n chı̉ là vă n bả n (khô ng có định dạ ng) thı̀ ta sử
dụ ng thuộ c tı́nh text, ne� u có định dạ ng theo phong cá ch html thı̀ ta sử dụ ng thuộ c
tı́nh là htmlText.
Trê n mo� i đo� i tượng cò n có mộ t đo� i tượng vă n bả n là txtStatus, nó dù ng hie� n thị
trạ ng thá i phá t trie� n củ a đo� i tượng. Mặ c định, nó sẽ bị a� n. Nó chı̉ hie� n thị khi trỏ
chuộ t đưa lê n trê n nó .
Đe� đả m bả o cho mộ t đo� i tượng luô n hie� n thị lê n trê n cá c đo� i tượng khá c, ta bo�
sung và o sự kiệ n ENTER_FRAME dò ng tương ứng
this.txtStatus.addEventListener(Event.ENTER_FRAME, fl_ClickToBringToFront);
function fl_ClickToBringToFront(event:Event):void
{
this.addChild(event.currentTarget as DisplayObject);
}
Cá c thuộ c tı́nh incoin và outcoin được quy định là protected nê n nó chı̉ được
phé p truy cậ p trong nộ i bộ lớp hoặ c trong cá c đo� i tượng khá c ke� thừa từ lớp đó .
Do đó , ta ca� n bo� sung thê m phương thức Getter đe� la� y giá trị củ a chú ng từ cá c lớp
khô ng có quan hệ họ hà ng với nó .
public function getIncoin():Number
{
return incoin;
}

public function getOutcoin():Number


{
return outcoin;
}
Ngoà i ra, trong lớp nà y cò n có thê m mộ t hà m tı̃nh cô ng khai là numToDate dù ng
đe� chuye� n đo� i mộ t so� so� sang dạ ng hh:mm:ss.
Bước 4. Thie� t ke� lớp câ y AnhDao. Trong thư việ n củ a dự á n, kı́ch chuộ t phả i và o
movieClip AnhDao, chọ n Edit Class sau đó lưu lạ i với tê n là AnhDao.as. Lớp
AnhDao nà y phả i ke� thừa từ lớp Product nó i trê n.
package {

- 317 -
public class AnhDao extends Product {

public function AnhDao(total:Number, c:Number, oc:Number) {


super(total, c, oc);
}
}

}
Phương thức super cho phé p tie� p nhậ n hà m tạ o củ a lớp mà nó ke� thừa.
Bước 5. Thie� t ke� lớp câ y OcCho. Hoà n toà n tương tự như đo� i với lớp câ y AnhDao.
Ta lưu lớp câ y OcCho dưới tê n OcCho.as. Nộ i dung củ a lớp nà y như sau:
package {

public class OcCho extends Product {

public function OcCho(total:Number, c:Number, oc:Number) {


super(total, c, oc);
}
}

}
Bước 6. Xâ y dựng mã lệ nh cho hai button btAnhDao và btOcCho ở movieClip
dialog. Nha� p đô i chuộ t và o movieClip dialog đe� mở khung thie� t ke� củ a movieClip
nà y. Ba� m chọ n btAnhDao, mở vù ng code snippets và chọ n chức nă ng Event
Handlers > Mouse Click Event. Sau đó , nhậ p nộ i dung và o cho sự kiệ n nà y. Cụ the� ,
ta có mã nguo� n củ a giai đoạ n nà y như bê n dưới:
btAnhDao.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_4);

function fl_MouseClickHandler_4(event:MouseEvent):void
{
var anhdao:AnhDao = new AnhDao(30, 80, 50);
if(MovieClip(parent).tongdiem>=anhdao.getOutcoin())
{
parent.addChild(anhdao);
anhdao.x = Land._x;
anhdao.y = Land._y;
MovieClip(parent).tongdiem -= anhdao.getOutcoin();

- 318 -
MovieClip(parent).txt.htmlText = "<font color='#ffffff' size='16'>Tổng
điểm: " + MovieClip(parent).tongdiem.toString() + "</font>";
}else
MovieClip(parent).txt.htmlText = "<font color='#fff000'
size='16'>Không đủ tiền !</font>";
}
Bước 7. Xâ y dựng mã lệ nh cho nú t btOcCho. Ta là m hoà n toà n tương tự như
bước 6. Mã lệ nh cho giai đoạ n nà y thu được như sau:
btOcCho.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_5);

function fl_MouseClickHandler_5(event:MouseEvent):void
{
var occho:OcCho = new OcCho(60, 100, 60);
if(MovieClip(parent).tongdiem>=occho.getOutcoin())
{
parent.addChild(occho);
occho.x = Land._x;
occho.y = Land._y;
MovieClip(parent).tongdiem -= occho.getOutcoin();
MovieClip(parent).txt.htmlText = "<font color='#ffffff' size='16'>Tổng
điểm: " + MovieClip(parent).tongdiem.toString() + "</font>";
}else
MovieClip(parent).txt.htmlText = "<font color='#fff000'
size='16'>Không đủ tiền !</font>";
}
Lưu ý:
- Khi thực thi bước 6 và bước 7, mã lệ nh củ a 2 bước nà y ca� n đặ t và o trong frame
củ a layer Action.
- Khi soạ n thả o hai bước 6 và 7 nà y, cũ ng ca� n thie� t phả i nhậ p và o sự kiệ n củ a
chuộ t: import flash.events.MouseEvent;
Bước 8. Nhậ p mã nguo� n cho stage củ a dự á n. Trong pha� n nà y, ta ca� n:
- Quy định hộ p thoạ i dialog luô n đứng no� i lê n trê n mọ i đo� i tượng. Cá ch thực hiệ n
như đã nó i ở bước 3.
- Ca� n ló t cá c mã nh đa� t đe� la� p kı́n khung nhı̀n. Mo� i mà nh đa� t có kı́ch thước
100x100, nê n ta có the� lợi dụ ng đie� u nà y đe� sử dụ ng vò ng lặ p.
for(var i:int = 0; i<5; i++)
for(var j:int = 0; j<10; j++)
{

- 319 -
var land:Land = new Land(100*j, 100*i);
addChild(land);
}
- Theo mặ c định, hộ p thoạ i dialog ca� n phả i a� n, nê n ta quy định thuộ c tı́nh visible =
false.
Toà n bộ mã nguo� n củ a stage nà y được đặ t và o frame 1 củ a Layer Game.
import flash.events.Event;
import fl.text.TLFTextField;
import fl.controls.Label;

var tongdiem:Number = 200;

this.dialog.addEventListener(Event.ENTER_FRAME, fl_ClickToBringToFront);

function fl_ClickToBringToFront(event:Event):void
{
this.addChild(event.currentTarget as DisplayObject);
}

for(var i:int = 0; i<5; i++)


for(var j:int = 0; j<10; j++)
{
var land:Land = new Land(100*j, 100*i);
addChild(land);
}

dialog.x = 340;
dialog.y = 150;
dialog.visible = false;
dialog.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);

function fl_MouseClickHandler(event:MouseEvent):void
{
dialog.visible = false;
}

var txt:Label= new Label();


txt.htmlText = "<font color='#ffffff' size='16'>Tổng điểm: 200</font>";

- 320 -
txt.width = 150;
txt.x = stage.stageWidth - txt.width;
txt.y = stage.stageHeight - txt.height;
addChild(txt);
txt.addEventListener(Event.ENTER_FRAME, fl_ClickToBringToFront);
Cuo� i cù ng, nha� n to� hợp Ctrl+Enter đe� kie� m tra ke� t quả . Game nà y hoà n toà n
tương thı́ch với cá c thie� t bị chạ y AIR cho Desktop la� n cá c thie� t bị điệ n thoạ i chạ y
Android và iOS.

Hình 206 – Demo game nô ng trạ i vui vẻ


Xem dự án: ..\Lession\Source\BaiTapNangCao\Pr08_Farm.

B – PHẦN BÀI TẬP TỰ LÀM


Để phát triển kĩ năng thiết kế và lập trình trên Flash CS5/CS5.5 và
ActionScript 3.0, chúng tôi đề nghị bạn hãy thực hiện các bài thực hành sau
đây.

BÀI THỰC HÀNH SỐ 1


SỬ DỤNG CÔNG CỤ VẼ CƠ BẢN
Hãy sử dụng các công cụ vẽ để tạo các nội dung sau đây trên cùng một Stage:

1. Tạo Layer 1 và đổi tên thành BauTroi. Chọn biểu tượng bảng màu. Chọn
Stroke color = None, Fill Color = Linear Gradient. Chọn chế độ đổ màu
Extends Color. Trong kiểu đổ màu cầu vồng này, bạn chỉ chọn hai màu:

- 321 -
màu đen (mã màu là #000000) đến màu đen trắng (mã màu #999999),
trong đó màu đen ở phía trên, màu đen trắng ở phía dưới. Sử dụng công cụ
Rectangle, tạo một hình chữ nhật ở trên Layer này. Sử dụng bảng hiệu
chỉnh Align để can chỉnh kích thước và vị trí cho hình chữ nhật này trùng
khớp với kích thước Stage.
2. Tạo Layer 2 và đổi tên thành MatTrang. Chọn biểu tượng Oval với thuộc
tính Stroke Color = None, Fill Color là màu Radial Gradient (màu một có mã
màu là #FFFF00, màu 2 có mã màu là #FFFFFF). Hãy sử dụng công cụ
Gradient Transform để hiệu chỉnh kích thước của vòng màu bên trong lớn
hơn và đặt mặt trăng vào vị trí thích hợp trên bức tranh này.
3. Sử dụng công cụ PolyStar để tạo một ngôi sao màu vàng nhạt, kích thước là
20x20. Convert ngôi sao này sang biểu tượng Graphics và đặt tên là Sao.
Chọn công cụ Spray Brush, chọn biểu tượng cho nó là Sao ở trên. Hiệu
chỉnh các thông số như sau:
Scale width = 20%
Scale height = 25%
Chọn cả ba tùy chọn Random Scaling, Rotate Symbol và Random Rotation.
Hiệu chỉnh kích thước của Brush là width=height=300px, Brush Angel là
90 CW.
Tạo mới Layer đặt tên là Sao. Hãy quét nhanh công cụ Spray Brush này lên
Layer này để tạo các ngôi sao nhỏ trên bầu trời.
4. Tạo mới một Layer và đặt tên là KhungCua. Sử dụng công cụ Rectangle
Primitive để tạo một hình chữ nhật có kích thước width=200, height=150,
chọn Fill color là None, Stroke color là màu đen, loại đường viền style là
stippled, kích thước của đường viền là 5px. Sử dụng công cụ Deco để đổ
màu nghệ thuật (cành hoa nho) cho khung cửa sổ này.
5. Tạo mới Layer đặt tên là NgoiNha. Hãy sử dụng các công cụ cần thiết để vẽ
nên ngôi nhà mơ ước của bạn. Lưu ý: hãy sử dụng màu sắc thật hài hòa
trong đêm tối.
6. Tạo mới Layer đặt tên là DamMay. Hãy sử dụng công cụ Pen để tạo nên
các đám mây có viền cong. Tô màu cho nó bằng màu xanh nhạt (mã màu
#66CCCC) và hãy loại bỏ viền của nó.
7. Tạo mới Layer đặt tên là ConNguoi. Hãy sử dụng các công cụ cần thiết để
phát họa chân dung của một cô gái đang đi dưới ánh trăng.
8. Tạo mới Layer đặt tên là DenLong. Hãy phát họa cây đền lồng và đặt nó
vào tay cô gái.
9. Tạo mới Layer đặt tên là CayCoi. Hãy phát họa hình một rặng tre hoặc một
cây cổ thụ. Chọn màu sắc hợp lý.

- 322 -
10. Tạo mới Layer đặt tên là TieuDe. Sử dụng công cụ Text để soạn thảo trên
Layer này nội dung “Ánh Trăng Trên Quê Hương”.

BÀI THỰC HÀNH SỐ 2


SỬ DỤNG BIỂU TƯỢNG VÀ TẠO HOẠT CẢNH
Hãy sử dụng bức ảnh chứa các đối tượng được vẽ ở trên để thực thi bài thực hành
số 2.

1. Hãy chuyển đổi MatTrang trong Layer 2 thành biểu tượng MovieClip và
đặt tên cho nó là MatTrang. Hãy sử dụng Classic Tween để tạo hiệu ứng
động cho mặt trăng. Mặt trăng có hai hiệu ứng động là: đổ bóng mờ và di
chuyển. Để tạo hiệu ứng bóng mờ, hãy sử dụng thuộc tính Filter=Blur của
MovieClip. Các thao tác này chỉ được sử dụng Classic Tween.
2. Hãy xóa bỏ các ngôi sao trên bầu trời ở trên. Trong thư viện, hãy chọn lại
biểu tượng Graphic là Sao mà bạn đã tạo. Bạn hãy chuyển đổi nó thành
MovieClip. Sử dụng Motion Tween để tạo hiệu ứng tăng giảm độ trong suốt
(thuộc tính Alpha của MovieClip). Thuộc tính này thay đổi từ 80% đến
100%. Tiếp tục sử dụng công cụ Spray Brush, lần này bạn chọn biểu tượng
cho nó là MovieClip Sao. Hiệu chỉnh các thông số tương tự như bài thực
hành số 1. Sau đó, quét lên Layer Sao.
3. Hãy sử dụng công cụ Bone để tạo chuyển động cho đôi chân cô gái. Các
phần còn lại không cần tạo chuyển động. Bạn kết hợp với Motion Tween để
tạo sự di chuyển (thay đổi vị trí trong bức ảnh) cho cô gái.
4. Sử dụng Motion Tween để tạo chuyển động cho các đám mây. Các đám mây
chuyển động theo dạng thức 3D (kết hợp công cụ 3D Rotation và 3D
Translation).
5. Hãy tạo mới một Layer đặt tên là BienHinh. Trên Layer này, bạn hãy tạo
một ngũ giác. Sử dụng Shape Tween để tạo hiệu ứng biến hình cho hình thể
này thành hình ngôi sao năm cánh. Hãy đặt nó vào một vị trí thích hợp.

BÀI THỰC HÀNH SỐ 3


SỬ DỤNG BIỂU TƯỢNG VÀ TẠO HOẠT CẢNH (TIẾP THEO)

- 323 -
Hãy sử dụng các công cụ tạo hoạt hình (Tween, Bone, Bind, 3D,…) để tạo một
VideoClips. Lưu ý trong bài này, sinh viên cần kết hợp với một bài hát. Nội dung
phim và nội dung bài hát phải tương đối phù hợp. Bài hát dài không dưới 1 phút.

BÀI THỰC HÀNH SỐ 4


LẬP TRÌNH VỚI ACTIONSCRIPT
Trong bài thực hành này, bạn cần hoàn tất các nội dung sau:

1. Tạo một đối tượng quả bóng bằng công cụ Oval. Sau đó, hãy chuyển đổi nó
thành biểu tượng MovieClip. Cài đặt tên thể hiện cho nó là QuaBong. Hãy
xóa quả bóng này trên Stage. Mở khung soạn thảo ActionScript, bây giờ
bạn hãy viết ActionScript để tạo chuyển động 3D cho quả bóng, thay đổi
thuộc tính alpha khi nó chuyển động. Sự thay đổi thuộc tính alpha này qui
định theo thời gian (thay đổi từ 80% đến 100%).
2. Tạo mới một Scene. Trên Scene này, bạn hãy sử dụng hai bức ảnh. Hiệu
chỉnh kích thước cho chúng bằng nhau. Kích thước của chúng không quá
lớn, sao cho ta có thể đặt chúng trên Stage nhưng vẫn còn khoảng trống. Sử
dụng đối tượng Tween để tạo hoạt hình cho hai bức ảnh này.
Để tạo hoạt hình nhờ vào Tween trong ActionScript, bạn có thể thao tác
như hướng dẫn sau:
Hãy đưa hai đối tượng ảnh này vào trong thư viện, sau đó chuyển đổi
chúng thành các biểu tượng MovieClip, và đặt tên cho chúng lần lượt là
Anh1 và Anh2. Bạn quan sát mã chương trình sau

import fl.transitions.easing.*;
import fl.transitions.Tween;
var OneTween:Tween;

var TwoTween:Tween;

Ở đây, bạn sử dụng package fl.transition. Đối tượng Tween được đưa vào
để sử dụng. Các hiệu ứng động cũng được đưa vào qua dòng lệnh thứ nhất.
Tiếp theo, bạn hãy tạo chuyển động cho đối tượng nhờ vào đối tượng
Tween. Cách sử dụng Tween cũng tương tự như bạn tạo một Thread vậy.

OneTween = new Tween(Anh1, "y", Bounce.easeOut, 50, 100, 3, true);


OneTween.start();
TwoTween = new Tween(Anh2, "y", Bounce.easeOut, 250, 300, 3, true);

- 324 -
TwoTween.start();
Đối tượng Tween có phương thức khởi tạo Tween(Object, String, Function,
Number, Number, Number, Boolean). Object là đối tượng mà ta sẽ áp dụng
hiệu ứng Tween; String là tên thuộc tính mà ta sẽ sử dụng – như “x”, “y”,…;
Function là tên phương thức sẽ áp dụng – chi tiết hơn bạn có thể thử
nghiệm với chức năng Add New Items to Script với gói fl.transition.easing;
Number thứ nhất và Number thứ hai là hai biên chuyển động. Number thứ
ba là số lần chuyển động (duration), tham số Boolean mặc định được sử
dụng là true. Hãy kiểm tra xem thử nó hoạt động hoàn hảo hay không. Đây
thực sự là cách tạo chuyển động rất hoàn hảo.
3. Tạo mới một dự án khác. Trong dự án này có ba file: file main.fla, file
human.as, file student.as. File main.fla là khung trình diễn chính. Các file
còn lại được sử dụng như các lớp. File human.as là một lớp chứa hai thuộc
tính là Name:String và Age:int và bốn phương thức chính là void
SetName(String), String GetName(void), void SetAge(int) và int
GetAge(void). Lớp student kế thừa lớp Human. Ngoài ra, nó còn có thêm
thuộc tính ID:String và hai phương thức void SetID(String), String
GetID(void). Quay trở lại với khung trình diễn chính, bạn hãy phát họa
hình một con người. Sau đó, bạn hãy convert nó sang biểu tượng
MovieClip. Cài đặt tên hiển thị cho nó là ConNguoi. Cuối cùng bạn hãy xóa
nó ra khỏi stage. Trên khung trình diễn này, bạn hãy tạo một Button và ba
textbox kèm theo ba label. Ba label có nội dung là: Tên, Tuổi, MãSV. Ba
textbox còn lại tương ứng dùng để nhập nội dung theo ba trường này
(Name, Age và ID). Khi người dùng nhập dữ liệu và nhấp nút Add, hình
người sẽ hiển thị ra bên dưới. Đồng thời, bên cạnh nó là các thông tin về
đối tượng này (Tên, Tuổi và MãSV).
4. Trong bài thực hành này, bạn hãy tạo một dự án gồm bốn file: main.fla,
solutions.as, solution1.as và solution2.as. Trên stage của main có ba
textbox và ba label tương ứng để nhập các số a, b và c. Một nút nhấn để giải
phương trình, và một label nữa để hiển thị kết quả. File solutions.as là một
interface chứa hai phương thức là DoSolution và ToString. Hai lớp
solution1.as và solution2.as là hai lớp thực thi giao diện solutions.as này.
Phương thức DoSolution của đối tượng trong solution1.as sẽ giải phương
trình bậc 1, phương thức DoSolution của đối tượng trong solution2.as sẽ
giải phương trình bậc hai. Phương thức ToString của cả hai đối tượng có
nhiệm vụ in ra nghiệm cuối cùng. Đối tượng trong solution1.as chứa hai
thuộc tính là a:Number và b:Number. Đối tượng trong solution2.as chứa ba

- 325 -
thuộc tính là a:Number, b:Number và c:Number. Sau khi bạn hoàn tất yêu
cầu này, hi vọng bạn sẽ hiểu rõ hơn về giao diện.

BÀI THỰC HÀNH SỐ 5


XÂY DỰNG PHIM QUẢNG CÁO BẰNG FLASH
Hãy xây dựng một thước phim quảng cáo giới thiệu về một bộ phim có sử dụng kĩ
xảo điện ảnh. Đoạn phim quảng cáo có đội dài trình diễn khoảng 5 phút. Trong
phim phải sử dụng âm thanh và có lời thuyết trình bằng chữ hoặc lời thuyết minh
(những đoạn phim sử dụng lời thuyết minh sẽ được đánh giá cao).
Để xây dựng thước phim quảng cáo này, bạn cần sử dụng một bộ phim hoàn
chỉnh. Sau đó, bạn cắt lấy những đoạn phim hay trong bộ phim này để tạo một bộ
phim quảng cáo hoàn chỉnh (nếu không có một bộ phim hoàn chỉnh, bạn có thể
liên hệ với giảng viên để được cung cấp các đoạn phim mẫu).

BÀI THỰC HÀNH SỐ 6


HOÀN TẤT DỰ ÁN VÀ XUẤT BẢN
Hãy vận dụng các kiến thức đã học trong giáo trình này, bạn hãy lựa chọn một
trong các dự án sau đây:
Các dự án

Dự án 1. Tạo một dự án Game bằng Flash kết hợp với ActionScript theo yêu
cầu sau
a) Màn hình Splash (scene 1): chỉ hiển thị bốn Menu: Play, Score, Help và Quit.
Play cho phép người dùng chuyển sang màn hình thứ hai (scene 2), trong
màn hình này, người dùng có thể chơi game. Score cho phép hiển thị kết
quả chơi, màn hình này tương ứng với scene 3. Help cho phép chuyển sang
màn hình trợ giúp (scene 4), trong màn hình này sẽ hiển thị vài thông tin
về game, cách chơi game.
b) Nội dung game có thể là game hành động, game thể thao, game học tập
nhưng cần phải được điều khiển bằng chuột hoặc bàn phím.
c) Nếu người dùng hoàn tất việc chơi game, thì sẽ hiện ra các thông số mà
người chơi đạt được: Họ và Tên (nhập vào từ đầu), điểm. Dữ liệu được đọc
từ file data.xml.

- 326 -
Dự án 2. Tạo một dự án phim hoạt hình bằng Flash kết hợp với ActionScript
theo yêu cầu sau
a) Phim mô tả một chủ đề bất kì nhưng phải có cấu trúc (có kịch bản).
b) Phim có độ dài không dưới 10 phút.
c) Có thanh Playback để điều khiển.
d) Có sử dụng âm thanh, tiếng nói (phải được đồng bộ với đối tượng trong
phim)
e) Không chấp nhận các Clip nhạc.
Dự án 3. Tạo một dự án kĩ xảo điện ảnh bằng Flash kết hợp với ActionScript
theo yêu cầu sau
a) Tạo một thước phim có sử dụng kĩ xảo điện ảnh (chỉ chấp nhận kĩ xảo điện
ảnh, không chấp nhận kĩ xảo truyền hình).
b) Phim có độ dài không dưới 10 phút.
c) Các kĩ xảo phải sử dụng phù hợp với nội dung, số lượng kĩ xảo không dưới
10.
d) Thước phim cuối cùng phải có nội dung.

- 327 -
Blank Page

- 328 -
TÀI LIỆU THAM KHẢO THÊM

- 329 -

You might also like