Flash cs5 va sript ebook

ĐẶ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 và ActionScript 3.0)

Theo dõi bản cập nhập thay đổi trên Blog của tôi.

A

LỜI NÓI ĐẦU

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 (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òn cung cấp thêm các kiến thức để làm việc với hình ảnh, âm thanh và video.
Đồng thời, chúng tôi còn giới thiệu gói thư viện mở PaperVision3D để 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 nào đề
cập đến.

Khi biên soạn giáo trình này, tôi đã cố gắng hoàn thiện nó. Tuy nhiên, không thể
tránh khỏi sai sót. 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.
Hueá, thaùng 08/2010

Chaân thaønh caûm ôn !

-3-

PHỤ LỤC
LỜI NÓI ĐẦU ........................................................................................................................................ 3
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH .......................................................................................... 10
1.1.

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

1.4.

Giới thiệu về Adobe Flash CS5 ................................................................................... 17

1.2.
1.3.

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

Cài đặt Adobe Flash CS5 .............................................................................................. 14

1.4.1.

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

1.4.4.

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

1.4.2.

1.4.3.
1.4.5.
1.4.6.
1.4.7.

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

Layer, Frame, Scene và Movie ............................................................................ 23
Vùng thuộc tính Properties ................................................................................. 26

Vùng soạn thảo ActionScript .............................................................................. 27
Các vùng chức năng khác ..................................................................................... 28

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

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

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

2.4.

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

2.2.
2.3.
2.5.
2.6.
2.7.

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

Công cụ Text ...................................................................................................................... 49
Các công cụ đổ màu Paint Bucket, Ink Bottle và bắt màu EyeDropper ..... 53
Công cụ Free Transform và Gradient Transform ............................................... 55

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 .......................................................................................... 60

3.1.

Biểu tượng Graphic ........................................................................................................ 65

3.4.

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

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

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

Biểu tượng Button .......................................................................................................... 67

Biểu tượng MovieClip .................................................................................................... 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.4.

Motion Tween ................................................................................................................... 84

4.2.
4.3.
4.5.
4.6.
4.7.

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

Shape Tween ..................................................................................................................... 82
Công cụ Bone và Bind .................................................................................................... 89
Công cụ Deco ..................................................................................................................... 93

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

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

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

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

5.4.

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

5.2.
5.3.

Biến và Hằng................................................................................................................... 113
Toán tử và Biểu thức ................................................................................................... 114

5.4.1.
5.4.2.

Câu lệnh if ................................................................................................................ 122

Câu lệnh switch ..................................................................................................... 123

-6-

5.4.3.
5.4.4.

5.5.
5.6.

Các câu lệnh lặp for, while và do…while ..................................................... 124
Các lệnh continue, break và return ............................................................... 127

Hàm .................................................................................................................................... 128
Lớp và Đối tượng .......................................................................................................... 131

5.6.1.

Xây dựng lớp .......................................................................................................... 131

5.6.4.

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

5.6.2.
5.6.3.

5.7.
5.8.
5.9.

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

Sự kiện chuột ......................................................................................................... 138

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

Làm việc với XML ......................................................................................................... 142
Vùng chức năng Code Snippets............................................................................... 144

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

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

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

6.4.

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

6.2.
6.3.
6.5.
6.6.
6.7.
6.8.
6.9.

Tạo kĩ xảo điện ảnh với Flash .................................................................................. 178
Tạo thước phim Flash tựa 3D .................................................................................. 182

Kĩ thuật mặt nạ mask .................................................................................................. 189
Tạo các nút nhấn điều khiển .................................................................................... 197
Xuất bản một Movie..................................................................................................... 199

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

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

Tổng kết chương 6 ....................................................................................................................... 215
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D .......................................................................... 217

-7-

7.1.

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

7.4.

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

7.2.
7.3.

Cấu hình và cài đặt PaperVision3D cho Adobe Flex Buider ........................ 221
Chương trình Hello, PaperVision3D !................................................................... 224

7.4.1. Các đối tượng hình thể ........................................................................................... 228
7.4.2. Đối tượng Material - Phối màu cho hình thể ................................................. 236

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

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

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

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

7.5.

Import một mô hình 3D ............................................................................................. 242

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

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

BÀI THỰC HÀNH SỐ 1 ............................................................................................................ 246
BÀI THỰC HÀNH SỐ 2 ............................................................................................................ 247

BÀI THỰC HÀNH SỐ 3 ............................................................................................................ 248
BÀI THỰC HÀNH SỐ 4 ............................................................................................................ 248
BÀI THỰC HÀNH SỐ 5 ............................................................................................................ 250
BÀI THỰC HÀNH SỐ 6 ............................................................................................................ 251

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

-8-

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

Đồ họa máy tính đượ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, bạn sẽ
thấy rõ từng điểm ảnh. Hãy quan sát ví dụ đối với bức ảnh sau

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

Đồ họa Fractal: sử dụng thuật toán đệ quy. Nếu quan tâm đến dạng đồ họa này,
hãy 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. Nó 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 bị
“vỡ hạt” khi phóng to bức ảnh. Các chương trình đồ họa vector nổi tiếng bao gồm
Adobe 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.

Không có nhiều định dạng đồ họa điểm 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ư psd của photoshop). Hãy quan sát một số đối
tượng đồ họa được tạo bởi Adobe Illustrator sau đây

- 11 -


Hình 3 – Đồ họa vector

Định dạng Flash 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). Và đặc biệt, 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.
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… 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.

- 12 -

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 (cho đến năm 2010). 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 web – 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 của công nghệ Silverlight của Microsoft
và JavaFx của Sun (nay được mua lại bởi Oracle).
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 là nơi cung cấp thông tin, trao đổi và tư vấn. 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ệ 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.

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

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 của nó. 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à
phát triển có thể sử dụng trình biên tập Adobe Flash. 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
có thể chạy được Flash là cần cài đặt một Plugin Flash nhỏ gọn (không quá 2 Mb)
hoặc hỗ trợ một phiên bản Flash Lite (cho các dòng điện thoại).

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

- 13 -

ứ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 thông qua Adobe Air cho desktop và
Flash Lite cho các dòng di động cũng như tạo các thước phim trình diễn. Trong
năm 2010, W3C đã đưa ra chuẩn mới – chuẩn 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.
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.

1.3. Cài đặt Adobe Flash CS5

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
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.
Chúng ta có thể tải trực tiếp từ Adobe, bạn 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:

- 14 -


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

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. 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.

- 15 -

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.

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

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.

- 16 -


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

Trong cửa sổ này, 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…), 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.
Ở 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 FilesAdobe. 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.

Khởi động Adobe Flash Professional CS5: để khởi động Adobe Flash
Professional CS5, 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:

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

- 17 -

- Vào Start > All Programs

- Chọn Adobe Master Collection CS5.
- Chọn Adobe Flash Professional.

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

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

Hình 9 – Mành hình chào đón của Adobe Flash Professional CS5

Sau khi quá trình khởi động hoàn tất, bạn sẽ thấy giao diện sau đây

- 18 -


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

Phiên bản Adobe Flash CS5 xuất xưởng năm 2010. So với các phiên bản trước đó,
CS5 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 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.

Trong giao diện tổng thể Essential của Flash CS5, có thể chia làm 5 vùng chính:
1.4.1. Các chế độ tùy biến giao diện

- 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.

- 19 -

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

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

Flash CS5 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.

Để 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:
1.4.2. Tạo mới dự án cho desktop và mobile

- 20 -


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

- 21 -

Như bạn thấy, trong phiên bản CS5.5 hỗ trợ dự án template cho hệ điều hành
Android. Ở đây, chúng ta quan tâm đến một vài kiểu dự án

- 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ư 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 sẽ tự động gọi đến Adobe Device
Central CS5. Đâ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.

- 22 -


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.
Định dạng Flash sẽ có phần mở rộng là .fla. Định dạng ActionScript File có định
dạng là .as. Định dạng tập tin cuối cùng của flash là .swf.

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
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
1.4.3. Layer, Frame, Scene và Movie

- 23 -

độ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 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

- 24 -

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
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

- 25 -


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
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.
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 thay 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.
1.4.4. Vùng thanh công cụ Tools

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.
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…
1.4.5. Vùng thuộc tính Properties

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

- 26 -

Vùng quản lý các thuộc tính này được bố trí trong vùng thuộc tính Properties. Để
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.
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:

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).
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ệ. 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.4.6. Vùng 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.

- 27 -

(9) – Hỗ trợ khi viết script.

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

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.
1.4.7. Các vùng chức năng khác

o 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

- 28 -


-

-

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.
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

o 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ẽ

- 29 -

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.
- 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.
o 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 đó.

o 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.

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

- 30 -

Trong bảng màu chuẩn này, ta có thể chọn mẫu màu RGB thông dụng, 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).

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: không chọn 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

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

- 31 -

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.

o Vùng Common Library (Buttons, Classes và Sounds): quản lý các dạng button,
các lớp thư viện và âm thanh.
o Vùng Component (Ctrl+F7): quản lý các thành phần GUI 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...
o 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.
o 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.
o 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 đố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 Hình 25 – Vùng Motion Presets

- 32 -

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. Chi tiết chúng ta sẽ tìm hiểu
trong chương 6. Sau khi tìm hiểu về cách tạo thanh PlayBack 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 thanh PlayBack.
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.
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.

- 33 -

-

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 khi
phim được tải (On_Enter), hành động tương ứng với sự kiện của chuột, 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 Event 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.

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.

o 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.
o 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, 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 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

- 34 -

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.

- 35 -


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 về 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.

- 36 -


Blank Page

- 37 -

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

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ẽ.

Công cụ Spray Brush

Hình 29 – Công cụ 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,…

- 39 -

Để 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.
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 dài 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

- 40 -


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.

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.

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


- 41 -



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
ngang và chiều dọc 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ẽ.
- Style: dạng thức của nét vẽ.


Hình 32 – Công cụ Rectangle

- 42 -





- 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 – giúp bạn 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 cong 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.

Hình 33 – Công cụ Oval

- 43 -

Khi sử dụng công cụ Oval, ta chú ý đến điểm sau đây: nếu muốn tỉ lệ chiều ngang
và chiều dọc luôn cân bằng nhau khi vẽ (ví dụ khi vẽ hình tròn) thì ta giữ phím
Shift và vẽ, ngược lại tỉ lệ đó sẽ không cân bằng giữa chiều dọc và chiều ngang (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ẽ.

Vertical.




- 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

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

- 44 -

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ỏ.
- 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.

- 45 -


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

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,

- 46 -

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 -

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 ngang và chiều dọc (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ẽ.



- 48 -



- 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

Trong đó,

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

+ 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)

Là công cụ dùng để soạn thảo nội dung văn bản trong Flash.

2.3. Công cụ Text

- 49 -


Hình 43 – Công cụ Text

- 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
độ 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).

- 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.

- 50 -

- 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 ô 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.

- 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

- 51 -


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
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 và 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.

- 52 -


Hình 46 – Công cụ Lasso

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
đến công cụ này:

- 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
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.

- 53 -


Công cụ Ink Bottle

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

Đâ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 đến công cụ này:

- 54 -

- 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.




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 vào.

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

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

Đây là công cụ để tinh chỉnh góc cạnh, xoay đối tượng. Khi bấm chọn biểu tượng
này, sau đó chọn đối tượng, ta có thể thay đổi sự dịch chuyển tương đối của các
phần đối tượng. Khi đó, ta đặt trỏ chuột theo cách cạnh của đối tượng và dịch

- 55 -

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 một chức năng
xoay đối tượng.

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

Mặc định, khi ta tạo một đối tượng thì đối tượng đó đã tồn tại một tâm điểm xoay
(khi xoay đối tượng, đối tượng sẽ quay quanh điểm xoay này). Bạn có thể hiệu
chỉnh vị trí của điể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

- 56 -

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, sẽ xuất hiện công cụ Gradient
Transform, bạn chỉ việc bấm chọn nó. Sau đó, bấm 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 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).

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

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 đặt 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.

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

- 57 -


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ệ 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
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, mà cần rê chuột liên tiếp để hiệu chỉnh đường điều khiển của nó.

- 58 -


Công cụ Add Anchor Point

Hình 53 – Công cụ Pen

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.

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.

- 59 -


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

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:

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

- 60 -

- 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à viê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 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. Có rất nhiều thuật toán thực hiện
chức năng này, nhưng nói chung, vẫn chưa có một thuật toán tối ưu nào thực hiện
một cách hoàn hảo. Đ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.

- 61 -

- 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.

Hình 57 – Distribute to Layers

Đối với Flash, nó cũng cực kì quan trọng. Bạn hãy tưởng tượng, trên một Scene
của bạn, có một chú chó, một chú mèo và một khung cảnh ở phía sau. Khi xây
dựng hoạt cảnh, chó 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.

- 62 -


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ụ vẽ 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ụ, bạn cũng cần quan tâm đến các thao tác đồng hành
với nó.

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 sáng tác đồ họa chuyên dụng, bạn có thể sử dụng 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.

- 63 -


Blank Page

- 64 -

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 đó. 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 trình chiếu. 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 đó.

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.

3.1. Biểu tượng Graphic

Để 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.

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.

- 66 -

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.

3.2. Biểu tượng 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 ta sẽ tìm
hiểu 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 cho Button này.
Hoàn toàn tương tự cho Frame Down và Frame Over.

- 67 -

(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.
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.

- 68 -

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ủa mì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.

3.3. Biểu tượng MovieClip

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

- 69 -

- 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.

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 đó,
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.

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

Để 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 -


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.
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 này. 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 gốc cho mỗi biểu tượng….

- 71 -


Blank Page

- 72 -

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

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.

4.1. Tìm hiểu về TimeLine

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 thả xuo� ng
̣
na� m phı́a trê n bê n phả i có cá c chưc nă ng sau: Tiny (siê u nhỏ ), Small (nhỏ ),
́
Normal (bı̀nh thương), Medium (trung bı̀nh), Large (lơn), Preview (xem rõ hı̀nh),
̀
́
Preview in Context (xem rõ hı̀nh theo ngư cả 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.

+ 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 rate – tốc
độ chuyển động (tính bằng số Frame trên giây). Elapsed Time – thời gian thực thi
toàn bộ Frame trên thanh TimeLine.

- 74 -


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).

+ 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.

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 60). 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 61. Giờ bạn hãy kiểm
tra độ lớn của viền trên mọi Frame. Như bạn thấy đấy, viền của tất cả hình chữ
nhật trên mọi Frame đều thay đổi thành 5.
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).

- 75 -

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.

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 -


Hình 70 – Chèn KeyFrame bằ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 -

Để 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 – Chép một nhóm Frame đã được sao chép hoặc cắt dán

Clear Frames, Clear KeyFrame và Remove Frames: chức năng Clear Frames nó 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”

- 78 -

Đâ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ẽ hiệ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.
Ta sẽ minh họa kĩ thuật “Frame by Frame”. Ví dụ sau đây sẽ 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

- 79 -

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 không có nhiều điểm
tương đồng. Chúng ta sẽ lần lượt khảo sát ba loại Tween này.

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 một Frame Script.

4.2. Classic Tween

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 46 bên dưới.

- 80 -


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
đó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 nền (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.

- 81 -

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
Frame đầu tiên và Frame 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
đá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.

4.3. Shape Tween

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.

- 82 -


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

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)

- 83 -

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.

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.

4.4. Motion Tween

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

- 84 -

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 xử 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.
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).

- 85 -


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á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

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.

- 86 -

Để 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. Khi 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.

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 –
đâ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.

- 87 -


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

- 88 -

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 để thực hiện 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 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.

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

- 89 -


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.
- 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” đấy. 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).

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.

- 90 -

- 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.

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 52.

- 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.

- 91 -


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

- 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ự chhuyể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.

- 92 -


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
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).
Là công cụ trang trí nghệ thuật. Với công cụ này, ta có ba 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.

4.6. Công cụ Deco

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.
• 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.

- 93 -

• 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).
• Animate Pattern: xây dựng một nhóm lên một Frame. 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.

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

Hiệu ứng Grid Fill

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).

- 94 -


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

Hiệu ứng Symmetry Brush

Khi bấm chọn hiệu ứng Symmetry Brush, trong bảng thuộc tính sẽ hiện ra các
thuộc tính sau đây:

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

- 95 -

• 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.

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

Với hiệu ứng này, các đối tượng sẽ được phun theo hiệu ứng 3D (đối tượng gần,
biểu tượng xa…). Để 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:

- 96 -

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à
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à.

- 97 -

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 nghệ thuật đường viền 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.

- 98 -


Hiệu ứng Fire Animation

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.

- 99 -


Hiệu ứng Flame Brush

Hiệu ứng này giúp tạo dựng các 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.

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.
• 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á.

- 100 -


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

• 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 hiệu ứng ngay dưới đây.
• Branch color: màu của cành cây.
Hiệu ứng Lightning Brush

Hiệu ứng Lightining 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.

- 101 -


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

Hiệu ứng Particle System

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

- 102 -

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.

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:

- 103 -

• 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.

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

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.

- 104 -

• 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ư 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:

- 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 hay chọn Frame trên TimeLine của nó tương ứng với Frame cuối
cùng của TimeLine mặt phẳng. Sau đó nhấn phím F5.
- Bước 4. Nhấn tổ hợp Ctrl+Enter để kiểm tra kết quả.

- 105 -


Công cụ 3D Rotation

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

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.

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) .

- 106 -


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 hay chọn Frame trên TimeLine của nó tương ứng với Frame cuối
cùng của TimeLine mặt phẳng. Sau đó nhấn phím F5.
- Bước 4. Nhấn tổ hợp Ctrl+Enter để kiểm tra kết quả.

- 107 -


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 công cụ đề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ợ Action Frame 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.

- 108 -


Blank Page

- 109 -

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 nhờ vào Adobe Flash Player 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 và Adobe
AIR.

Ngôn ngữ lập trình ActionScript (AS) là ngôn ngữ có cú pháp kết hợp của cả Java
và Delphi (cú pháp và từ khóa giống Java, cách khai báo giống Delphi). 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, bạn 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. Một điều đặc biệt, đó là lớp của ActionScript có cú pháp
khai báo và cách sử dụng rất giống với 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ư
Delphi (hay C++), nghĩa là không tuyệt giao với lập trình hướng thủ tục (bằng
chứng là ta có thể viết hàm bên ngoài lớp). 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ề ngôn
ngữ ActionScript này.

Bạn hãy quan sát ví dụ minh họa này được viết trên ngôn ngữ lập trình
ActionScript. Bạn cũng cần lưu ý rằng, đoạn chương trình này được viết bên
ngoài lớp (thể hiện tính lưỡng cực giữa hướng đối tượng và hướng thủ tục).


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

Trong ví dụ này, bạn 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).

Các điểm tương đồng với Delphi: từ khóa khai báo hàm là function và kiểu dữ liệu
hàm trả về nằm sau tên hàm và dấu hai chấm.

Một điểm khác biệt của AS so với Java và Delphi là chương trình chính nằm tự do
trong vùng soạn thảo (không giống Java phải trong hàm main, Delphi trong begin
và end). 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*/.
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…).

- 111 -

Chúng ta sẽ tìm thấy nhiều điểm tương đồng và khác biệt của AS so với hai ngôn
ngữ Java và Delphi (nếu bạn đã tưng làm quen với hai ngôn ngữ này). Chúng ta sẽ
lần lượt tìm hiểu cú pháp của ngôn ngữ lập trình AS này. Xin nhắc lại là phiên bản
ActionScipt mà ta đang thảo luận là ACTIONSCRIPT 3.0.
Ở đâ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 dữ liệu tạo ra nó: kiểu int và lớp int, kiểu Number và lớp Number...

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

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
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.

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.lengh1. 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. 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.

- 112 -


 Để 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.
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:

5.2. Biến và Hằng

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
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

- 113 -

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.

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;

Bạn lưu ý rằng, giá trị khởi tạo không giống trong trường hợp khởi tạo cho biến là
có thể có hoặc không, đối với hằng 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”;

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.

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

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;
a = a + 1;

a = b = c = 5;

Giá trị của a bằng giá trị của b cộng thêm 2
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:

- 114 -

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 trừ

Phép chia (chia nguyên đối với số nguyên)

*

%

Phép cộng

Phép nhâ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. Như vậy, 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). Vậy làm thế nào để thực hiện phép chia 3 cho 2, nếu ta muốn
nhận được kết quả là 1.5. Ta biết rằng 3 và 2 là hai số nguyên, nếu ta thực hiện
phép chia 3/2 thì ta thu được số nguyên – là kết quả của phép chia nguyên 3/2,
tức là 1. Muốn thu được kết quả 1.5, bạn cần chuyển đổi 3 và 2 về dạng số thực
bằng một trong các cách sau:
• Khai báo 3 và 2 là các số thực (bằng cách quy định kiểu dữ liệu như a:Number
= 3, b:Number = 2 hoặc 3.0, 2.0).
• Chuyển đổi kiểu dữ liệu (Xem thêm phần toán tử chuyển đổi kiểu dữ liệu).

- 115 -


Toán tử logic
Toán tử

Toán tử phủ
định !
Toán tử và &&
Toán tử hoặc
||

A

b

Kết quả

true

Phép toán

true

true

true

Phép toán
một ngôi !a

-

false

Phép toán hai
ngôi

-

false
true

true

false

false

true

true

true

false

true

false

a&&b

Phép toán hai
ngôi

false

true

false

false

true

false

a||b

false

false
false
true
true

false

Toán tử dịch bit

Các toán tử này được sử dụng đến 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ụ

&

Phép “Và” bit

2&3=2

|

Phép “hoặc” bit

2|3=3

^

Phép “hoặc loại”

- 116 -

2^3=1

210=102
310=112
210=102
210=102
310=112
310=112
210=102

bit

<<

Dịch trái bit

>>

2<<3=16

Dịch phải bit

~

2>>3=0

Phủ định bit

~2=1

310=112
110=012

2*23=2*8=16
2/23=2/8=0

210=102
110=012

Các toán tử và bit, hoăc bit, hoặc loại bit và phủ định bit được tính như sau: chúng
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ử

+=

a+=b

/=

a/=b

-=

*=

%=
&=

a-=b

a*=b

a%=b
a&=b

Ví dụ

a=a+b
a=a-b

a=a*b

a=a/b

a=a%b
a=a&b

- 117 -

Ý nghĩa

Phạm vi

Phép toán số học
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>>=b

Toán tử tăng và giảm

a=a^b

a=a>>b

Phép toán bit
Phép toán bit

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--.

Chúng ta cũng lưu ý rằng, toán tử này có chút khá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ể có a++ hoặc ++a (tương ứng a-hoặc --a).

Phép toán
a++;

Ý nghĩa

++a;
--a;

Thực hiện toán tử trước, sau đó mới thực hiện phép toán
Tương tự ++a;

a--;

Thực hiện phép toán trước, sau đó mới thực hiện toán tử
Tương tự a++;

Ví dụ

a:int = 1;

Cách thực thi

b:int = 1;
a+=b++;

a = 1, b = 1

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 = 1, b chưa khởi tạo

- 118 -

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.

a+=++b;
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.
Toán tử

Tên gọi

==

Bằng

<

Bé hơn

!=
>

>=
<=

Khác

Lớn hơn
Lớn hơn hoặc bằng
Bé hơn hoặc bằng

Giá trị biểu thức “a Toán tử b”
Đúng

Sai

Nếu a bằng b

Nếu a khác b

Nếu a nhỏ hơn b

Nếu a lớn hơn hoặc
bằng b

Nếu a khác b

Nếu a lớn hơn b

Nếu a bằng b

Nếu a nhỏ hơn hoặc
bằng b

Nếu a lớn hơn hoặc Nếu a nhỏ hơn b
bằng b
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;

- 119 -

Kết quả 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.
a:int = 1;

Ví dụ

Kết quả
2

b:int = 2;
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.

a:int;

Ví dụ

Kết quả
3

b:int;
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. Giả sử bạn có biến int a = 3, int b = 2. Khi thực hiện phép
chia để nhận được kết quả thực, bạn chỉ cần viết như sau: (Number)3/2. Bạn phải
lưu ý rằng số 3 ở đây đã bị chuyển thành kiểu thực, và việc thực hiện phép chia
một số thực cho số nguyên sẽ trả về kiểu thực 1.5. Nếu bạn viết 3/(float)2, kết
quả cũng tương tự. Trong C, nếu bạn viết (float)(3/2) thì kết quả lại khác. Sở dĩ
như vậy là vì, nó sẽ thực hiện phép chia nguyên 3/2 (kết quả là 1), sau đó nó sẽ

- 120 -

chuyển giá trị 1 nguyên này sang 1 thực. Nhưng với AS thì kết quả tương tự hai
trường hợp trên.

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 tương đương). Bạn không thể chuyển đổi từ số thành xâu, hay ngược lại.
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).
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
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ử
1

::

Độ ưu tiên cùng loại

3

++ -- (tiền tố) ~ ! sizeof new delete

Phải-sang-trái

(type) (chuyển đổi kiểu)

Phải-sang-trái

+ - (phép toán công, trừ)

Trái-sang-phải

2

4
5
6
7
8

Trái-sang-phải

() [] . -> ++ -- (hậu tố) dynamic_cast Trái-sang-phải
static_cast reinterpret_cast const_cast
typeid
*&

+ - (dấu dương âm)
.* ->*

*/%

<< >>

- 121 -

Trái-sang-phải
Trái-sang-phải
Trái-sang-phải

9

< > <= >=

Trái-sang-phải

12

^

Trái-sang-phải

10
11
13
14
15
16
17
18

== !=

Trái-sang-phải

&

Trái-sang-phải

|

Trái-sang-phải

&&

Trái-sang-phải

||

?:

= *= /= %= += -= >>= <<= &= ^= |=
,

Trái-sang-phải
Phải-sang-trái
Phải-sang-trái

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. Các cấu trúc lệnh điều khiển
5.4.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 1;
}
Ví dụ
Ví dụ

Kết quả

- 122 -

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.
5.4.2. Câu lệnh switch

Cú pháp
switch(tên_biến){
case giá_trị_1:
Lệnh 1;
break;
…
case giá_trị_(n-1):
Lệnh n-1;
break;
default:
Lệnh n;
}
Ví dụ

- 123 -


var a:int = 2;

Ví dụ

Kết quả

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”);

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.
5.4.3. Các câu lệnh lặp for, while và do…while

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;
}
Ví dụ
Ví dụ

Kết quả

- 124 -

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

0

trace(i);

1
2

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

for(var index in Mảng){
Lệnh;
}
Ví dụ
Ví dụ

var items:Array = new Array(1, 2, 3);
for(var index in items){
}

trace(items[index]);

1

Kết quả

2
3

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 – đây là một điểm đặt biệt đối với vòng lặp for.
c. Câu lệnh lặp for each…in
Cú pháp
for each(var item in Mảng){
Lệnh;
}
Ví dụ

- 125 -


Ví dụ

var items:Array = new Array(1, 2, 3);
for each (var item in items){
}

trace(item);

1

Kết quả

2
3

Khác với câu lệnh for…in, biến item trong câu lệnh for each…in là một 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.
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ụ
var i:int = 3;

Ví dụ

3

while (i>0){
}

2

trace(i);

1

i--;

- 126 -

Kết quả


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

Thực hiện lệnh, sau đó kiểm tra biểu thức điều kiện, nếu biểu thức điều kiện còn
đúng thì lệnh sẽ tiếp tục được thực hiện. 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ụ
var i:int = 3;

Ví dụ

3

do{

Kết quả

2

trace(i);

1

i--;

} while (i>0);

Lệnh continue: lệnh này cho phép nhảy qua một vòng lặp và thực hiện lệnh tiếp
theo.
5.4.4. Các lệnh continue, break và return

Ví dụ

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

1

if(i%2==0) continue;

3

else trace(i);

- 127 -

Kết quả

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

Ví dụ

do{

0

Kết quả

1

trace(i);

2

if (i>=5) break;

3

else i++;

4

} while (true);

5

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).

5.5. Hàm

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;
}
Ví dụ
Ví dụ

function showMsg():void{
}

Hello

trace(“Hello”);

3

function Add(a:int, b:int):int{
return a+b;

- 128 -

Kết quả

}

showMsg();

trace(Add(1,2));
b. Vấn đề tham biến và tham trị

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ị

function noSwap(a:int, b:int):void{
c:int = a;

}

a = b;
b = c;

Tham biến

function Swap(Obj:Object):void{
Obj.a = tempObj.x;

}

a:int = 1;

Obj.x = tempObj.y;

Obj.y = tempObj.a;

var myObj:Object = {x:1, y:2};

b:int = 2;

Swap(myObj);

noSwap(a, b);

trace(myObj.x+", "+myObj.y);

trace(a+”, “+b);

//Kết quả là: 2, 1

//Kết quả là: 1, 2
c. Hàm với tham số mặc định
Ví dụ

Kết quả

- 129 -

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

return a+b+c;

trace(Add(1));

trace(Add(1,2));

1
3
6

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

Để 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ụ

function Add(...args):int{
var sum:int = 0;

for (var i:int = 0; i<args.length;i++)

}

sum+=args[i];

return sum;

trace(Add(1));

trace(Add(1,2));

trace(Add(1,2,3));
e. Kiểu dữ liệu hàm

- 130 -

1
3
6

Kết quả

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ụ

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

return a+b;

3

Kết quả

trace(Cong(1,2));

5.6. Lớp và Đối tượng
Hàm được xây dựng dựa theo cú pháp sau đây
5.6.1. Xây dựng lớp

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 khi dùng để 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ị cho đố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ụ

- 131 -

public class SinhVien{

private var ten:String;
private var tuoi:uint;

public function SinhVien(ten:String, tuoi:uint){
this.ten = ten;

this.tuoi = tuoi;
}

public function toString():String{

return “Tôi là: “+ten+”, “+tuoi+” tuổi.”;
}

}

Trong ví dụ này, bạn lưu ý rằng phương thức và thuộc tính đều được khai báo chỉ
định là 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.
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.
Tính thừa kế

AS cũng 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ở. Để thể hiện tính thừa kế, AS cung cấp cho ta từ khóa extends. Khi thực thi

- 132 -

tính kế thừa, lớp cơ sở hoặc không chứa hàm tạo hoặc chứa hàm tạo mặc định
(hàm tạo không đối số).

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{
}

}

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;

- 133 -


}

}

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 hảo (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;

//Lớp MeoDen thực thi hai giao diện Animal và Meo
public class MeoDen implements Animal, Meo{

- 134 -

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.6.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 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 ActionScript 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à

- 135 -

MainPrj.fla. Bạn tiếp tục tạo mới một 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.

Với những dự án phức tạp, ta cần tổ chức các lớp theo các package. Để làm điều
này, ta 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. Khi bạn làm điều này, 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ụ trên nhờ vào package.

b. Đối tượng của lớp số nguyên int và uint
Hàm tạo
Tên hàm

Chức năng

Hàm tạo int(Number)

Hàm khởi tạo cho lớp int.

valueOf()

Trả về giá trị nguyên thủy của đối tượng 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ố

c. Đối tượng của lớp số thực Number
Tên hàm

Chức năng

- 136 -

Hàm tạo int(Number)

Hàm khởi tạo cho lớp int

toPrecision(Number)

Trả về độ chính xác đến num

toExponential(Number) Trả về định dạng số dạng 3.1e+5. Ngoại lệ RangeError
toFixed(Number)
toString()
valueOf()

Cố định số chữ số thập phân
Trả về định dạng xâu của số

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.

indexOf(String,
Number=0)

Trả về vị trí đầu tiên tìm thấy xâu String kể từ vị thứ
đã 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ố.

charAt(Number)
concat(…String)

lastIndexOf(String,
Number)

localeCompare(String)
replace(pattern, Obj)
search(pattern)
split(pattern)

substring(Number,

Trả về kí tự tại num.

Ghép nối các xâu thành một xâu.

Tương tự indexOf, nhưng tìm kiếm từ phải sang
trái.
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.
Thay pattern bằng các Obj trong xâu đã cho.

Trả về chỉ số đầu tiên của pattern trong xâu đã cho.

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.

Trả về xâu con từ vị trí Number đầu với độ dài

- 137 -

Number)

Number sau.

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.

toLowerCase(String)
valueOf()

Chuyển tất cả kí tự hoa thành kí tự thường. Xâu
nguồn không thay đổi.
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.

concat(…args)

Ghép nối các mảng thành một.

Array(Number) và
Array(…values)
pop()

push()

reverse()

Hàm tạo.

Phương pháp pop cho Stack.

Phương pháp push cho Stack.
Đảo mảng.

sort()

Sắp xếp mảng.

toString()

Chuyển sang xâu.

Khi làm việc với sự kiện 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).
5.6.3. Sự kiện chuột

import flash.events.MouseEvent;

stage.addEventListener(MouseEvent.CLICK, func);

- 138 -

function func(e:MouseEvent):void{
}

trace("Hello");

Để bổ sung một sự kiện cho một đối tượng, ta sử dụng hàm addEventListener.
Hàm này có năm tham số, nhưng ba tham số cuối cùng được cài đặt ngầm định.
Ta sẽ quan tâm đến hai tham số đầu.

- Tham số Event: nó có thể là sự kiện chuột, bàn phím, sự thay đổi kích thước, thay
đổi cửa sổ kích hoạt,…. Ở đây, ta chọn MouseEvent với phương thức tương ứng
như: CLICK, DOUBLE_CLICK,…
- Tham số Function: là một hàm sẽ thực thi chức năng tương ứng. Nó cần chứa
một tham số sự kiện tương tứng với tham số Event.
Hoàn toàn tương tự sự kiện chuột, nếu ta thay MouseEvent bằng KeyboardEvent,
ta sẽ nắm bắt được các sự kiện phím tương ứng. Bạn cũng lưu ý rằng, các phím
được quản lý bởi lớp Keyboard trong AS.
5.6.4. Sự kiện bàn phím

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 ");

Sự kiện của phím KeyboardEvent chỉ bao gồm KEY_UP và KEY_DOWN.

- 139 -

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) vào AS. Để làm
được điều này, bạn cần 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ợ.

5.7. Đưa một đối tượng vào 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 103 – 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.

- 140 -


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

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

Hình 105 – Hộp thoai Properties của đối tượng file âm thanh

- 141 -

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

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.

5.8. 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>

- 142 -

);

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;

- 143 -

xmlloader.load(new URLRequest("book.xml"));

xmlloader.addEventListener(Event.COMPLETE, success);
function success(e:Event):void{
}

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 đó.
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.

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

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.

- 144 -

-

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.

Hình 106 – 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 107 – Cài đặt tên thể hiện cho các MovieClip kim quay

- 145 -

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.

Hình 108 – 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;

- 146 -

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á
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

- 147 -

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

Hình 109 – 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 110 – 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.

- 148 -

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");

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.

Acti
ons

Nhóm

Chức năng
Click to go
to Web

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

- 149 -


page

fl_ClickToGoToWebPage);

function
 movieClip_1: là đối
fl_ClickToGoToWebPage(event:
tượng khi ta nhấp
MouseEvent):void
chuột lên nó.
 navigateToURL:
{
phương thức mở liên
kết. Nó gồm hai tham
navigateToURL(new
số - URLRequest
URLRequest("http://www.ado
(được khởi tạo từ
be.com"), "_blank");
một tham số String)
}
và tham số String quy
định cách mở liên kết
(_blank,
_parent,
_selft, _top).

Đoạn mã 1: thay đổi
hình dáng của trỏ chuột
stage.addChild(movieClip_1);
sang hình dạng như của
movieClip_1.mouseEnabled = đối tượng moveClip_1.
false;
 Thuộc
tính
mouseEnabled
=
movieClip_1.addEventListener(
false: không cho phép
Event.ENTER_FRAME,
kích hoạt chuột trên
fl_CustomMouseCursor);
đối
tượng
moveClip_1.
 Thuộc tính x, y của
function
movieClip_1: hoành
fl_CustomMouseCursor(event:
độ x và tung độ y của
Event)
đối
tượng
{
movieClip_1.
 stage.mouseX,
movieClip_1.x
=
stage.mouseY:
stage.mouseX;
phương thức của đối
movieClip_1.y
=
tượng stage (khung
stage.mouseY;
trình diễn) để xác
định vị trí của trỏ
}
chuột trên khung
//Đoạn mã 1

Custom
Mouse
Cursor

đối tượng.

- 150 -

Mouse.hide();

trình chiếu này.
 Mouse.hide: phương
thức hide của đối
tượng Mouse cho
phép ẩn đi hình dạng
của trỏ chuột.

//Đoạn mã 2

movieClip_1.removeEventListe
ner(Event.ENTER_FRAME,
fl_CustomMouseCursor);
stage.removeChild(movieClip_
1);
Mouse.show();

Drag &
Drop

Đ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
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à
movieClip_1. Để thực
function
hiện thao tác kéo đối
fl_ClickToDrag(event:MouseEv
tượng, ta kết hợp với sự
ent):void
kiện MOUSE_DOWN lên
đối tượng đó và triệu gọi
{
phương thức startDrag
movieClip_1.startDrag(); của nó. Ngược lại, để
dừng việc kéo đối tượng

- 151 -

}

stage.addEventListener(Mouse
Event.MOUSE_UP,
fl_ReleaseToDrop);

function
fl_ReleaseToDrop(event:Mouse
Event):void
{

Play a MC
Stop a MC

}

movieClip_1.stopDrag();

movieClip_1.play();

movieClip_1.stop();

(thả đối tượng) ta kết
hợp sự kiện MOUSE_UP
của đối tượng đó và triệu
gọi
phương
thức
stopDrag.

Bắt đầu trình
movieClip_1.

diễn

Dừng việc trình diễn
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
visible quy định việc
ẩn/hiện của một đối
function
Click to hide fl_ClickToHide(event:MouseEv tượng. Nếu muốn đối
an Object ent):void
tượng movieClip_2 hiện
trở lại, ta thay đổi giá trị
{
của movieClip_1.visible =
movieClip_2.visible
= true.
false;

Show an
Object
Click to
Position an

}

movieClip_1.visible = true;

Hiện
đối
movieClip_1.

tượng

movieClip_1.addEventListener( Thay đổi vị trí của đối
MouseEvent.CLICK,
tượng movieClip_2 khi

- 152 -


Object

fl_ClickToPosition);

function
fl_ClickToPosition(event:Mous
eEvent):void
{
}

Click to
Display a
TextField

movieClip_2.x = 200;

movieClip_2.y = 100;

nhấp chuột vào đối
tượng
movieClip_1.
Thuộc tính x và y đã giải
thích ở trên.

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
tượng.
var fl_TF:TextField;
 movieClip_1: đối mà
var fl_TextToDisplay:String =
ta nhấp chuột lên nó.
"Lorem ipsum dolor sit amet."
 fl_TF: là đối tượng
TextField. TextField
function
trong trường hợp này
fl_ClickToPosition(event:Mous
sử dụng các thuộc
eEvent):void
tính
–
autoSize,
{
background, border,
x, y, text. Bạn có thể
fl_TF = new TextField();
tham khảo thêm các
fl_TF.autoSize
=
thuộc
tính
của
TextFieldAutoSize.LEFT;
TextField trong lớp
flash.text.TextField.
fl_TF.background = true;
fl_TF.border = true;
fl_TF.x = 200;

fl_TF.y = 100;

fl_TF.text
fl_TextToDisplay;

- 153 -

=


}

addChild(fl_TF);

function
fl_GenerateRandomNumber(li
mit:Number):Number
Generate a
Random
Number

{


var
randomNumber:Number
=
Math.floor(Math.random()*(li

mit+1));
}

return randomNumber;

trace(fl_GenerateRandomNum
ber(100));
for (var fl_ChildIndex:int = 0;

Bring
Object to
the Front

Khởi tạo một số ngẫu
nhiên. Để tạo số ngẫu
nhiên, ta sử dụng lớp
Math.

Phương
thức
random: khởi tạo số
ngẫu nhiên.
Phương thức floor để
lấy sàn của một số
thực. Bởi phương
thức random khởi tạo
một sô thực.

Chuyển đối tượng được
chọn lên trên các đối
fl_ChildIndex
<
tượng khác. Các đối
this.numChildren;
tượng này cần được
chuyển
đổi
thành
fl_ChildIndex++)
movieClip hoặc Button.
{
this.getChildAt(fl_ChildI
ndex).addEventListener(Mouse
Event.CLICK,
fl_ClickToBringToFront);
function
fl_ClickToBringToFront(event:
MouseEvent):void
{

this.addChild(event.curr

- 154 -

entTarget as DisplayObject);
}

var fl_TimerInstance:Timer = Tạo bộ đếm thời gian.
new Timer(1000, 30);
Đối
tượng
fl_TimerInstance thuộc
fl_TimerInstance.addEventList
lớp Timer. Nó sử dụng
ener(TimerEvent.TIMER,
phương thức khởi tạo có
fl_TimerHandler);
hai tham số delay và
repeatCount.
fl_TimerInstance.start();
Simple
Timer

Countdown
Timer

var fl_SecondsElapsed:Number  delay: độ trễ (tính
theo
mili
giây,
= 1;
1ms=1/1000s).
function
 repeatCount: số lược
fl_TimerHandler(event:TimerE
lặp (sẽ dừng nếu bộ
vent):void
đếm đạt đến giá trị
này).
{
 Phương thức start
trace("Seconds elapsed:
của
đối
tượng
" + fl_SecondsElapsed);
fl_TimerInstance: đối
tượng bắt đầu thi
fl_SecondsElapsed++;
hành. Ngược lại với
}
phương thức này là
phương thức stop.
var
fl_SecondsToCountDown:Num
ber = 10;

var
fl_CountDownTimerInstance:Ti
mer = new Timer(1000,
fl_SecondsToCountDown);
fl_CountDownTimerInstance.a
ddEventListener(TimerEvent.T
IMER,

- 155 -

Hoàn toàn tương tự như
bộ đếm xuôi. Giá trị
fl_SecondsToCountDown
là giá trị bắt đầu khởi tạo
khi đếm ngược.

fl_CountDownTimerHandler);

fl_CountDownTimerInstance.st
art();

function
fl_CountDownTimerHandler(ev
ent:TimerEvent):void
{

trace(fl_SecondsToCount
Down + " seconds");
--;

TimeLine Navigation

Stop at this
Frame

Click to Go
to Frame
and Stop

Click to Go
to Frame
and Play

}

fl_SecondsToCountDown

stop();

MouseEvent.CLICK,
fl_ClickToGoToAndStopAtFram
e);
function
fl_ClickToGoToAndStopAtFram
e(event:MouseEvent):void
{
}

gotoAndStop(5);

MouseEvent.CLICK,
fl_ClickToGoToAndPlayFromFr
ame);
function

- 156 -

Dừng trình diễn movie
tại Frame này.

Dừng movie tại một
Frame được chỉ định.
Trong trường hợp này
Frame được chỉ định là
Frame 5.

Trình diễn movie nhảy
đến Frame được chỉ
định. Trong trường hợp
này Frame được chỉ định
là 5.

fl_ClickToGoToAndPlayFromFr
ame(event:MouseEvent):void
{
}

Click to Go
to Next
Frame and
Stop

movieClip_1.addEventListener( Dừng trình diễn movie ở
Frame kế tiếp.
MouseEvent.CLICK,
fl_ClickToGoToNextFrame);
function
fl_ClickToGoToNextFrame(eve
nt:MouseEvent):void
{
}

Click to Go
to Previous
Frame and
Stop

Click to Go
to Next
Scene and
Play

gotoAndPlay(5);

nextFrame();

movieClip_1.addEventListener( Dừng trình diễn movie ở
Frame phía trước.
MouseEvent.CLICK,
fl_ClickToGoToPreviousFrame)
;
function
fl_ClickToGoToPreviousFrame(
event:MouseEvent):void
{
}

prevFrame();

movieClip_1.addEventListener( Bắt đầu trình diễn đến
MouseEvent.CLICK,
cảnh quay kế tiếp trong
fl_ClickToGoToNextScene);
danh sách Scene.
function
fl_ClickToGoToNextScene(even

- 157 -

t:MouseEvent):void
{

MovieClip(this.root).nex
tScene();
}

Click to Go
to Previous
Scene and
Play

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.
function
fl_ClickToGoToPreviousScene(
event:MouseEvent):void
{

MovieClip(this.root).pre
vScene();
}

Animation

Click to Go
to Scene
and Play

Move with
Keyboard
Arrows

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
Scene. Tham số thứ nhất
function
là Frame được chỉ định
fl_ClickToGoToScene(event:Mo
trong Scene ở tham số
useEvent):void
thứ 2.
{

MovieClip(this.root).got
oAndPlay(1, "Scene 3");
}

stage.addEventListener(Keybo
ardEvent.KEY_DOWN,
fl_PressKeyToMove);
function

- 158 -

Di chuyển đối tượng
theo các phím mũi tên
trên bàn phím.

fl_PressKeyToMove(event:Key
boardEvent):void
{

switch (event.keyCode)

{

case Keyboard.UP:

{

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;

- 159 -


Move
Horizontall
y
Move
Vertically
Rotate Once

}

}
}

movieClip_1.x -= 100;

theo chiều ngang.

movieClip_1.rotation += 45;

Quay đối tượng 1 lần với
góc được chỉ định (tính
theo độ).

movieClip_1.y -= 100;

theo chiều dọc.

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);
độ.
Rotate
Continously

function
fl_RotateContinuously(event:E
vent)
{

10;
}

Animate
Horizontall
y

movieClip_1.rotation +=

movieClip_1.addEventListener( Đối tượng chuyển động
theo chiều ngang.
Event.ENTER_FRAME,
fl_AnimateHorizontally);
function
fl_AnimateHorizontally(event:E
vent)
{

movieClip_1.x -= 10;

- 160 -

}

movieClip_1.addEventListener( Đối tượng chuyển động
theo chiều dọc.
Event.ENTER_FRAME,
fl_AnimateVertically);
Animate
Vertically

function
fl_AnimateVertically(event:Eve
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 độ
alpha)
movieClip_1.alpha = 0;
function
fl_FadeSymbolIn(event:Event)
{
Fade in a
Movie Clip

0.01;
1)

movieClip_1.alpha

+=

if(movieClip_1.alpha >=

{

movieClip_1.removeEve
ntListener(Event.ENTER_FRA
ME, fl_FadeSymbolIn);
}

}

- 161 -

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
)
Fade out a
Movie Clip

{

0.01;
0)

movieClip_1.alpha

-=

if(movieClip_1.alpha <=

{

movieClip_1.removeEve
ntListener(Event.ENTER_FRA
ME, fl_FadeSymbolOut);

Load and Unload

}

}

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
tượng movieClip_1. Biến
var fl_Loader:Loader;
Click to
fl_Loader được sử dụng
Load/Unloa var fl_ToLoad:Boolean = true;
để tải dạng tập tin kể
d SWF or
trên. Biến fl_ToLoad để
function
Image
lưu trạng thái (đã tải –
fl_ClickToLoadUnloadSWF(eve true hoặc chưa tải –
nt:MouseEvent):void
false).
{

Phương thức load của
đối tượng Loader sẽ tải

- 162 -

if(fl_ToLoad)
{

Loader();

về tập tin theo một địa
chỉ được chỉ định trong
đối tượng URLRequest.
fl_Loader = new Để hủy tải, ta sử dụng
phương thức unload.

fl_Loader.load(new
URLRequest("http://www.help
examples.com/flash/images/i
mage1.jpg"));
addChild(fl_Loader);
}

else
{

fl_Loader.unload();

removeChild(fl_Loader);

}

}

fl_Loader = null;

fl_ToLoad = !fl_ToLoad;

MouseEvent.CLICK,
fl_ClickToLoadImageFromLibra
ry);

Sau khi tải xong tập tin,
ta bổ sung đối tượng
Loader này vào khung
trình chiếu.

Sau khi hủy bỏ việc tải, ta
xóa đối tượng Loader
khỏi khung trình chiếu
và giải phóng biến nó
(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.

Tải hoặc hủy tải một tập
tin ảnh trong thư viện đã
được xuất bản cho
ActionScript. Trước tiên,
Click to
ta cần import các tập tin
Load Image function
ảnh vào trong thư viện
from
fl_ClickToLoadImageFromLibra
của Flash. Sau đó, từ các
Library
ry(event:MouseEvent):void
tập tin ảnh này, ta sẽ tạo
ra các lớp đối tượng
{
tương ứng (Tương tự
var libImage:MyImage = xuất bản tập tin âm

- 163 -

new MyImage(0,0);

thanh trong mục 5.7).

var holder:Bitmap = new Đối tượng ảnh này sẽ trở
Bitmap(libImage);
thành tham số trong đối
tượng của lớp Bitmap.
addChild(holder);
Add
Instance
from Stage
Remove
Instance
from Stage

Load
External
Text

}

var
Bổ sung một biểu tượng
fl_MyInstance:LibrarySymbol = (Graphic,
MovieClip,
new LibrarySymbol();
Button). Các đối tượng
này cũng phải xuất bản
addChild(fl_MyInstance);
cho ActionScript.
removeChild(movieClip_1);

Xóa
đối
tượng
movieClip_1 ra khỏi
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
này tương tự như việc
var
tải một tập tin XML. Bạn
fl_TextURLRequest:URLReques
có thể xem lại lời giải
=
new
t
thích ở trên.
examples.com/flash/text/lore
mipsum.txt");
fl_TextLoader.addEventListene
r(Event.COMPLETE,
fl_CompleteHandler);
function
fl_CompleteHandler(event:Eve
nt):void
{

var

textData:String

new
String(fl_TextLoader.data);

- 164 -

=


}

trace(textData);

Audio and Video

fl_TextLoader.load(fl_TextURL
Request);

Click to
Play/Stop
Sound

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
thái cho phép trình diễn
var fl_SC:SoundChannel;
hoặc không (tương ứng
true và false). Đối tượng
var fl_ToPlay:Boolean = true;
Sound sử dụng phương
function
thức khởi tạo từ một
fl_ClickToPlayStopSound(evt:M URLRequest. Cách thực
ouseEvent):void
thi một tập tin âm thanh
chúng ta đã tìm hiểu ở
{
mục 5.7.
if(fl_ToPlay)
{

var s:Sound = new

Sound(new
examples.com/flash/sound/so
ng1.mp3"));
}

else

{
}

fl_SC = s.play();

fl_SC.stop();

fl_ToPlay = !fl_ToPlay;

- 165 -

}

movieClip_1.addEventListener( Dừng chơi tất cả âm
thanh trong movie.
MouseEvent.CLICK,
fl_ClickToStopAllSounds);

function
Click to Stop fl_ClickToStopAllSounds(event:
All Sounds MouseEvent):void
{
}

SoundMixer.stopAll();

import fl.video.MetadataEvent;

On Cue
Point Event

Thực thi một event khi
đọc đến một Cue Point
được chỉ định. Cue Point
MetadataEvent.CUE_POINT,
là một cách thức chia
fl_CuePointHandler);
nhỏ tập tin âm thanh
hoặc video (định dạng
function
fl_CuePointHandler(event:Meta flv, f4v) lớn trong Flash
(đọc theo stream). Nhờ
dataEvent):void
đó tập tin sẽ được tải
{
nhanh hơn (tải đến cue
point nào thì trình chiếu
trace(event.info.name);
đến đó).
}

movieClip_1.addEventListener( Tương tự như nút Play
MouseEvent.CLICK,
trong các trình điều
fl_ClickToPlayVideo);
khiển nhạc/phim. Đối
tượng
function
Click to Play
video_instance_name là
fl_ClickToPlayVideo(event:Mou
Video
tên thể hiện của thành
seEvent):void
phần điều khiển việc thi
hành tập tin video hoặc
{
âm thanh (thường là FLV
video_instance_name.play();
playback).

- 166 -

}

movieClip_1.addEventListener( Tạm dừng.
MouseEvent.CLICK,
fl_ClickToPauseVideo);

function
fl_ClickToPauseVideo(event:M
Click to
Pause Video ouseEvent):void
{

video_instance_name.pause();
}

Click to
Rewind
Video

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.
function
fl_ClickToPauseVideo(event:M
ouseEvent):void
{

video_instance_name.seek(0);
}

Click to Set
Video
Source

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
thuộc tính source.
function
fl_ClickToSetSource(event:Mou
seEvent):void
{

video_instance_name.source =
"http://www.helpexamples.co
m/flash/video/water.flv";

- 167 -

}

Click to
Seek to Cue
Point

movieClip_1.addEventListener( Di chuyển đến một Cue
MouseEvent.CLICK,
Point được chỉ định
fl_ClickToSeekToCuePoint);
(trong trường hợp này là
Cue Point có tên là Cue
function
Point 1. Phương thức
fl_ClickToSeekToCuePoint(eve
seek của đối tượng
nt:MouseEvent):void
media playback chỉ hoạt
động với tham số time
{
(nhảy đến một thời
var cuePointInstance:Object = điểm), do đó, ta cần
video_instance_name.findCueP chuyển từ đối tượng cue
oint("Cue Point 1");
point sang tham số time
video_instance_name.see tương ứng nhờ thuộc
tính time.
k(cuePointInstance.time);
}

Create a
NetStream
Video

var fl_NC:NetConnection = new Đọc một tập tin video từ
NetConnection();
một Media Server nhờ
vào
đối
tượng
fl_NC.connect(null);
NetStream. Phim sau khi
var fl_NS:NetStream = new được tải sẽ trình chiếu
trực tiếp trên stage
NetStream(fl_NC);
không dùng đến trình
fl_NS.client = {};
FLV playback.
var fl_Vid:Video = new Video();
fl_Vid.attachNetStream(fl_NS);

t
Hand
lers

addChild(fl_Vid);

fl_NS.play("http://www.helpex
amples.com/flash/video/water
.flv");

Mouse Click movieClip_1.addEventListener( Hành động thực thi khi
Event
MouseEvent.CLICK,
chuột được nhấn lên đối

- 168 -

fl_MouseClickHandler);

function
fl_MouseClickHandler(event:M
ouseEvent):void
{
}

tượng movieClip_1.

trace("Mouse clicked");

movieClip_1.addEventListener( Hành động thực thi khi
MouseEvent.MOUSE_OVER,
chuột di chuyển qua đối
fl_MouseOverHandler);
tượng movieClip_1.

function
Mouse Over fl_MouseOverHandler(event:M
ouseEvent):void
Event
{
}

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.
Mouse Out
Event

function
fl_MouseOutHandler(event:Mo
useEvent):void
{
}

trace("Moused out");

stage.addEventListener(Keybo
Key Pressed ardEvent.KEY_DOWN,
Event
fl_KeyboardDownHandler);

- 169 -

Hành động thực thi khi
một phím được nhấn (có
thể
là
KEY_DOWN,
KEY_UP. Trong trường

function
fl_KeyboardDownHandler(eve
nt:KeyboardEvent):void
{

trace("Key
Code
Pressed: " + event.keyCode);
}

Enter
Frame
Event

addEventListener(Event.ENTE
R_FRAME,
fl_EnterFrameHandler);

function
fl_EnterFrameHandler(event:E
vent):void
{
}

trace("Entered frame");

hợp này, ta sử dụng
KEY_DOWN.

Hành động diễn ra khi
phim được trình chiếu.

Để biết thêm thông tin về các phương thức và thuộc tính của các đối tượng (cũng
như các tham số trong các phương thức này) 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/.

- 170 -


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.

- 171 -


Blank Page

- 172 -

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 111 – 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.

Hình 112 – 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.

- 174 -

- 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

Hình 113 – 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.

- 175 -


d. Xử lý video

Hình 114 – Giao diện Adobe PhotoShop CS5

Đâ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.

- 176 -


Hình 115 – Giao diện Adobe Media Encoder CS5

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ạ.

- 177 -

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ì ?

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

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ĩ
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

- 178 -


Hình 116 – 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 117 – Hiệu chỉnh thuộc tính Align cho Video chú gấu trên Stage

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.

- 179 -

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 118 – 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).

- 180 -

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 119 – 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.

- 181 -

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ả.
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 120 – Kĩ xảo người bay

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ự

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

- 182 -

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
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 121 – 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.

- 183 -


Hình 122 – 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.

- 184 -


Hình 123 – 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 124 – 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.

- 185 -


Hình 125 – 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 126 – Trò chơi golf: Tạo cảnh đánh bóng

- 186 -

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
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 127 – 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 128 – Trò chơi golf: Kĩ thuật Layer

- 187 -

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
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 129 – 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 130 – 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.

- 188 -

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.

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).

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.4. Ghép nối nhiều hoạt cảnh

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

Hình 131 – Kĩ thuật mặt nạ Mask

- 189 -

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.

Đế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 132 – Mặt nạ động

- 190 -

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.

Hình 133 – 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).

- 191 -


Hình 134 – 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.


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.

- 192 -

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.


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();
}
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.
movieClip_1.buttonMode = true;

- 193 -


Hình 137 – 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.


- 194 -

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.


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

- 195 -

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
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.


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.


- 196 -

Để 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.

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.

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

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 142 – 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.

- 197 -


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

Hình 143 – 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);

- 198 -

}

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
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.
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.

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

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:

- 199 -

- 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

Hình 144 – Thiết lập tập tin cài đặt trên air – Mục General

- 200 -












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

Hình 145 – 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.

- 201 -


Hình 146 – 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.
d) Mục Advanced

Hình 147 – Thiết lập tập tin cài đặt trên air – Mục Advanced.

- 202 -

 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 bị
+ Hệ đie� u hà nh họ Windows (có the� MacOS hoặ c Linux, Windows 7).
+ Flash Professional CS5 full trơ lê n (yê u ca� u Flash Professional CS5.5)
̉
+ Adobe Device Central CS5 trơ lê n (yê u ca� u CS5.5).
̉
+ Android SDK (tả i tạ i http://developer.android.com/sdk/index.html )
+ Adobe AIR 2 trơ lê n (AIR 2.6 đươc tı́ch hơp sa� n trong CS5.5)
̉
̣
̣
Bước 2. Giả i né n bộ Android SDK, sau đó chạ y tậ p tin SDKManager.exe trong thư
mụ c giả i né n. Chương trı̀nh quả n lý sẽ tư độ ng qué t đe� tı̀m cá c cậ p nhậ t mơi nha� t.
̣
́
Cô ng đoạ n nà y tie� n hà nh khá mất thời gian. Ta chỉ cần chọn Accept và nha� p Ok.
Bước 3. Ta đươc thư mụ c cà i đặ t có dạ ng như bê n dươi:
̣
́

Hình 148 – Cấu trúc thư mục Android SDK

- 203 -

Bước 4. Quay lạ i vơi SDK Manager, chọ n thẻ Virtual Devices
́

Hình 149 - Thẻ Virtual Devices

Nha� p và o New đe� tạ o mơi mộ t Emulator dù ng đe� Test. Vı́ dụ trong trương hơp
́
̀
̣
nà y tô i sư dụ ng SamSung Galaxy S. Đe� xem hệ đie� u hà nh đươc cà i đặ t trê n thie� t bị
̉
̣
nà y là Android phiê n bả n nà o, ta ca� n kie� m tra trong Adobe Device Central.
+ Khơi độ ng Adobe Device Central.
̉
+ Và o File > New Project.
+ Chờ đơi chương trı̀nh tư độ ng qué t cá c thie� t bị ho� trơ, sau đó nha� p và o ô tı̀m
̣
̣
̣
kie� m gõ thie� t bị ca� n tı̀m. Vı́ dụ trong trương hơp nà y, tô i tı̀m SamSung Galaxy S.
̀
̣

Hình 150 - Tìm kiếm Device Samsung Galaxy S

+ Nha� p đô i và o thie� t bị tı̀m đươc đe� xem thô ng so� trươc khi tạ o thie� t bị giả lậ 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ı́ dụ , trong bả ng thô ng tin nà y, tô i đọ c các tham so� : kı́ch thươc mà n hı̀nh
́
(Display size) – 480x800 và 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.

- 204 -


Hình 151 - Các thông số của Samsung Galaxy S

Quay trơ lạ i SDK Manager. Nha� p và o nú t New, mộ t cưa so� sẽ hiệ n ra.
̉
̉

Hình 152 - Tạo mới một Emulator

- 205 -

+ Mụ c Name: nhậ p tê n thie� t bị Emulator. Tê n nà y do chú ng ta đặ t nhưng khô ng
đươc chưa kı́ tư đặ c biệ t (như kı́ tư tra� ng,…).
̣
́
̣
̣
+ Mụ c Target: chọ n đú ng phiê n bả n củ a hệ đie� u hà nh Android trên thiết bị cần giả
lập. Vı́ dụ tô i chọ n Android 2.2 tương ứng với hệ điều hành được cài đặt trên
Samsung Galaxy S.
+ Thô ng so� Resolution: nhậ p và o kı́ch thươc mà n hı̀nh đọ c đươc trong Adobe
́
̣
Device Central, vı́ dụ 480x800.
Cá c mụ c khá c, đe� tham so� mặ c định. Cuo� i cù ng nha� p và o nú t Create AVD.
Khi đó , trong cưa so� SDK Manager sẽ xua� t hiệ n thie� t bị mà bạ n vưa mơi tạ o.
̉
̀
́
Bước 5. Nha� p chọ n thie� t bị vưa tạ o, sau đó nha� p nú t Start đe� khơi độ ng Emulator.
̀
̉
Chơ đơi trong giâ y lá t cho đe� n khi mô i trương giả lậ p củ a thie� t bị đã hoà n chı̉nh.
̀ ̣
̀

Hình 153 - Màn hình chào đón của Samsung Galaxy S

Bước 6. Mơ thư mụ c cà i đặ t Adobe Flash CS5.5:
̉
..AdobeAdobe Flash CS5.5AIR2.6runtimesairandroidemulator
và copy tậ p tin Runtime.apk sang thư mụ c:
..platform-tools
bê n trong thư mụ c cà i đặ t củ a Android SDK.

- 206 -

Bươc 7. Khơi độ ng Command Promt (và o Run, nhậ p cmd và nha� n Enter), dù ng
́
̉
lệ nh
>CD đường_dẫn
(nhấn Enter)
trong đó,
đường_dẫn: là đường dẫn chỉ đến thư mục ..platform-tools
đe� nhả y đe� n thư mụ c hiệ n thơi là ..platform-tools ơ trê n.
̀
̉
Bước 8. Gõ và o lệ nh
adb install Runtime.apk (nhấn Enter)
và chơ đơi quá trı̀nh cà i đặ t mô i trương AIR cho Emulator hoà n ta� t. Ne� u thà nh
̀ ̣
̀
cô ng, thı̀ sẽ nhậ n đươc thô ng bá o success.
̣
Bước 9. Tạ o mộ t gó i cà i đặ t cho phé p chạ y trê n AIR. Khơi độ ng Flash CS5.5
̉

Hình 154 - Tạo dự án AIR cho Android

Chọ n AIR for Android. Sau đó, hã y thie� t ke� và lậ p trı̀nh cho ưng dụ ng củ a bạ n (lưu
́
ý trong trương hơp nà y, Android 2.2 đã ho� trơ ActionScript 3).
̀
̣
̣
Cô ng việ c xua� t bả n tậ p tin cho Android hoà n toà n tương tư như xua� t bả n tậ p tin
̣
cho AIR đươc giơi thiệ u ở phần trên. Nhưng ke� t quả , ta khô ng thu đươc tậ p tin
̣
́
̣
*.air mà là *.apk. Giả sư tô i đặ t tê n cho tậ p tin ưng dụ ng là apps.apk.
̉
́
Bước 10. Copy tậ p tin apps.apk và o thư mụ c ..platform-tools ơ trê n.
̉
Bước 11. Gõ và o dò ng lệ nh sau trong Command Promt:
adb install apps.apk
(nhấn Enter)
Sau khi cà i đặ t hoà n ta� t, ta nhậ n đươc thô ng bá o success như ơ bươc 7.
̣
̉
́
Bước 12. Quay lạ i mô i trương giả lậ p Emulator, trong mà n hı̀nh chı́nh, ta chọ n
̀
ưng dụ ng mà ta vưa cà i đặ t.
́
̀
Vı́ dụ , ưng dụ ng củ a tô i vưa cà i đặ t có tê n là Android01 như ơ trê n. Ta sư dụ ng trỏ
́
̀
̉
̉
chuộ t đe� nha� p đô i và o nó , hoặ c cá c phı́m mũ i tê n đe� di chuye� n và Enter đe� chọ
ưng dụ ng. Phı́m Esc đe� quay lạ i mà n hı̀nh trươc đó .
́
́

- 207 -


Hình 155 - Ứng dụng sau khi được cài đặt

Để 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.

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 đó.

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

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,

- 208 -

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.

Hình 156 – Phim Flash với các đối tượng mây, chim hải âu, cây dừa và hoa

Hình 157 – Phim Flash trong suốt trên trình duyệt

- 209 -

Để 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à
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 158 – Hộp thoại Publish Settings

Bước 3. Nhấn Publish để xuất bản tập tin.

- 210 -

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;”>
<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" />

<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" />

<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>

</object>

- 211 -

</object>
</div>
Cần lưu ý đến các thẻ được in đậm.

Để 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.

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

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:

Đặ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.*;

var methodName:String = "sendTextFromHtml";
var method:Function = recieveTextFromHtml;
ExternalInterface.addCallback(methodName, method);
var wasSuccessful:Boolean = ExternalInterface.available;
function recieveTextFromHtml(t) {
theText.text = t;
}

- 212 -


button.addEventListener(MouseEvent.CLICK, buttonClick);
function buttonClick(e:MouseEvent) {
ExternalInterface.call("recieveTextFromFlash", theText.text);
theText.text = "";
}
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>

- 213 -


</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:

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 TextArea 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.

- 214 -


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.

- 215 -


Blank Page

- 216 -

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

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.

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

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 159 – 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
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 160 –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.

- 218 -

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.
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 161 – 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.

- 219 -

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

Hình 162– 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 163 – Lựa chọn chương trình biên dịch

- 220 -

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.
Để 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.

Tải PaperVision3D: bạn hãy truy cập vào địa chỉ sau đây

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

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ả).

- 221 -


Hình 164 – 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.

Hình 165 – 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

- 222 -

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

Hình 166 – 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.

- 223 -

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.

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.

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

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.

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.

- 224 -

Để 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
arg3:int));

Sphere(arg0:MaterialObject3D,

arg1:Number,

arg2:int

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;


public class PV3DTest extends BasicView
{
public function PV3DTest()
{
scene.addChild(new Sphere(null, 500, 50, 50));
startRendering();//hoặc singleRender();
}
}

- 225 -

}

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;

import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;


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{

- 226 -


}

}

}

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();
}

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.

- 227 -


7.4. Các đối tượng trong PaperVision3D
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.
7.4.1. Các đối tượng hình thể

Đối tượng
Cone

(Hình nón)

Phương thức khởi tạo

Cone(

Giải thích

Phương thức khởi tạo có 5 tham số:

material:Material3DObject, -material: cách thức phối màu. Đối
tượng này chúng ta sẽ được tìm hiểu
radius:Number,
trong mục tiếp theo.
-radius: bán kính hình tròn đáy.

height:Number,

-height: chiều cao.

segmentsW:int,

-segmentsW: số phân mãnh xấp xỉ
theo chiều rộng của hình nón.

segmentsH:int
)

-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.

Hình 167 – Đối tượng Cone

- 228 -


Cylinder

Cylinder(


height:Number,

-height: chiều cao của hình trụ.

(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)

theo chiều rộng của hình.

segmentsW:int,

-segmentsH: số phân mãnh được xấp
xỉ theo chiều cao của hình.

segmentsH:int,
topRadius:Number,

-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:Boolean,
bottomFace:Boolean
)

-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.

Hình 168 – Đối tượng Cylinder

- 229 -


Plane
(Mặt
phẳng)

Plane(


width:Number,

-height: chiều cao của mặt phẳng.

material:Material3DObject, -material: cách thức phối màu.

-width: chiều rộng của mặt phẳng.

height:Number,

theo chiều rộng.

segmentsW:int,

-segmentsH: số phân mãnh xấp xỉ
theo chiều cao.

segmentsH:int
)

PaperPlane
(Chiếc tàu
bay giấy)

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 169 – Đối tượng Plane

PaperPlane(


material:Material3DObject, - material: cách thức phối màu.

- 230 -

- scale: độ phóng to của vật thể.

scale:Number
)

Arrow
(Mũi tên)

Sphere
(Hình cầu)

Arrow(

Hình 170 – Đối tượng PaperPlane

material:Material3DObject
)

Sphere(

Phương thức khởi tạo 1 tham số:
-material: cách thức phối màu.

Hình 171 – Đối tượng Arrow

Phương thức khởi tạo 4 tham số:

material:Material3DObject, - material: cách thức tô màu.

- 231 -

- radius: bán kính của hình cầu.

radius:Number,

segmentsW: int,

- segmentsW: số phân mãnh xấp xỉ
theo chiều ngang.
-segmentsH: số phân mãnh xấp xỉ
theo chiều dọc.

segmentsH:int
)

Cube
(Hình hộp)

Cube(

Hình 172 – Đối tượng Sphere


material:Material3DObject, - material: cách thức tô màu.

- width: độ rộng của hình hộp.

width:Number,

- depth: độ sâu của hình hộp.

depth:Number,

- height: độ cao của hình hộp.

height:Number,

- segmentsH: số phân mãnh xấp xỉ
theo chiều ngang.

segmentsH:int,

- segments: số phân mãnh xấp xỉ
theo chiều dọc (theo chiều xích đạo).

segmentsS:int,
segmentsT:int,

- segmentsT: số phân mãnh xấp xỉ
theo chiều xâu.

insideFaces:int,

- insideFaces, excludeFaces: hiển thị

excludeFaces:int

)

- 232 -

mặt trong và mặt ngoài.

Hình 173 – Đố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
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

- 233 -


Thuộc tính
alpha:Number

x

x

Thuộc tính độ trong suốt, được phân bố từ
0..1. Giá trị alpha càng nhỏ thì độ trong
suốt của vật thể càng cao.

rotationX, rotationY,
rotationZ:Number

x

x

Góc quay của vật thể theo các trục x, y, z
tương ứng.

x, y, z: Number

scale, scaleX, scaleY,
scaleZ: Number
scene:SceneObject3D

sceneX,
sceneY,
sceneZ: Number
Position:Number3D
visible:Boolean
name:String
id:int

material:MaterialObjec
t3D
materials:MaterialList

pitch(angle:Number):v
oid

x

x
x
x

x

x
x

x

x

x

x

x
x
x
x

x
x
x
x

Tọa độ của vật thể trong không gian: xhoành độ, y-tung độ, z-cao độ. Tọa độ này
được tính theo đối tượng chứa nó.
Độ phóng to theo cả ba chiều (scale) và
theo chiều x, y, z tương ứng với scaleX,
scaleY, scaleZ.
Sử dụng như các phương thức và thuộc
tính của đối tượng scene.

Tọa độ x, y, z của đối tượng tương ứng với
hệ tọa độ cảnh quay trong thế giới thực.
Trả về đối tượng Number3D, chứa các
thông số liên quan đến tọa độ của vật thể
DisplayObject3D.
Cho phép đối tượng hiển thị hay ẩn.
Thiết lập tên cho đối tượng.
Thiết lập id cho đối tượng.

Thiết lập màu tô cho đối tượng.

Thiết lập danh sách màu tô (áp dụng cho
cube).
Quay liên tục theo trục x, mỗi lần quay một
góc angle.

- 234 -

yaw(angle:Number):vo
di

Tương tự đối với trục y.

moveDown(distance:N
umber):void

Di chuyển liên tục đối tượng xuống dưới.

roll(angle:Number):voi
d
moveUp(distance:Num
ber):void
moveBackward(distan
ce:Number):void
moveForward(distanc
e:Number):void
moveLeft(distance:Nu
mber):void

moveRight(distance:N
umber):void

addChild(child:Display
Object3D,
name:String):DisplayO
bject3D
addChildren(parent:Di
splayObject3D):Displa
yObjectContainer3D
removeChild(child:Dis
playObject3D):Display
Object3D

removeChildByName(
name:String):DisplayO
bject3D

addEventListener(type

Tương tự với trục z.

Di chuyển liên tục đối tượng lên trên.
Di chuyển liên tục đối tượng ra sau.

Di chuyển liên tục đối tượng ra phía trước.
Di chuyển liên tục đối tượng sang trái.

Di chuyển liên tục đối tượng sang phải.

Bổ sung đối tượng child lên vật thể và đồng
thời thiết lập tên cho nó là name.
Bổ sung tất cả các đối tượng con nằm trên
parent lên DisplayObjectContainer3D
Loại bỏ đối tượng child.

Loại bỏ đối tượng có tên là name.

Bổ sung một event tương ứng với sự kiện

- 235 -

:String,
listener:Function,
useCapter:Boolean,
priority:int,
useWeakReference:Bo
olean):void

removeEventListener(
type:String,
listener:Function,
useCapter:Boolean):vo
id

xảy ra trên đối tượng.

Loại bỏ event đã bổ sung cho đối tượng.

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/.

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.
7.4.2. Đối tượng Material - Phối màu cho hình thể

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.

- 236 -

• 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ụ

scene.addChild(new Sphere(new WireframeMaterial(0x00ff00, .5, 4),400,20,20));

Hình 174 – 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
interactive:Boolean);

=

new

ColorMaterial(color:Number,

alpha: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ố 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));

- 237 -


Hình 175 – Tô màu bằng ColorMaterial

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.

- 238 -


scene.addChild(new Sphere(earthmaterial, 400, 20, 20));

Hình 176 – 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)

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

- 239 -

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 Phong1. 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.
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.
7.4.3. Đối tượng Lights - Hiệu ứng ánh sáng

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 đó.
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

Tê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.
1

- 240 -

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ể.
Để 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.4. Đối tượng Shader - Hiệu ứng đổ bóng

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.
7.4.5. Đối tượng ShadedMaterial

 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.

Hình 177 – Tô màu bằng ShadedMaterial

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ố.
7.4.6. Đối tượng CompositeMaterial

var cm:CompositeMaterial = new CompositeMaterial();

- 241 -

Để 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;

Đố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ố.
7.4.7. Đối tượng MaterialsList

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).

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
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.

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

- 242 -

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 178 – Google Sketchup

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.

- 243 -


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.

- 244 -


Blank Page

- 245 -

BÀI TẬP THỰC HÀNH
Để phát triển kĩ năng thiết kế và lập trình trên Flash CS5 và ActionScript3.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:
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ý.
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”.

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

- 247 -

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.

SỬ DỤNG BIỂU TƯỢNG VÀ TẠO HOẠT CẢNH (TIẾP THEO)

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.

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%).

- 248 -

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);
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

- 249 -

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
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.

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).

- 250 -

Để 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).

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.
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.

- 251 -

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.

- 252 -

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

- 254 -

Flash cs5 va sript ebook

More Related Content

What's hot (14)

Similar to Flash cs5 va sript ebook (20)

Recently uploaded (20)

Flash cs5 va sript ebook