Professional Documents
Culture Documents
Flash Updated PDF
Flash Updated PDF
SCRIPT VÀ KĨ
THUẬT HOẠT HÌNH
(Giáo trình giảng dạy trên Flash CS5/CS6và ActionScript 3.0)
Blank Page
-2-
LỜI NÓI ĐẦU
A
dobe Flash là một phần mềm chuyên nghiệp để tạo các thước phim
hoạt hình, các trò chơi, thiết kế giao diện web (ứng dụ ng trong kı̃
thuậ t RIA – Rich Internet Application)… Flash có một ứng dụng to lớn
trong thế giới Internet nói chung và trong công nghệ giải trí nói riêng.
Dù rằng nhiều công nghệ mới ra đời đang cố gắng cạnh tranh với
Flash, nhưng Flash vẫn chiếm thị phần cao hơn hẳn. Có khá nhiều giáo trình về
Flash được biên soạn, nhưng đại đa số đều dựa trên phiên bản MacroMedia Flash
MX 2004 tương đối cũ. Với phiên bản CS5, Adobe đã bổ sung vào những tính năng
mới giúp người dùng thiết kế và lập trình đơn giản hơn. Cuốn giáo trình này gồm
có ba phần:
Phần 1. Thiết kế dành riêng cho những độc giả không chuyên muốn tìm
hiểu cách sử dụng công cụ vẽ và tạo hoạt hình bằng các công cụ có sẵn của Flash.
Phần này bao gồm các chương 1, chương 2, chương 3, chương 4.
Phần 2. Gồm chương 5. Dành cho các độc giả muốn tìm hiểu về
ActionScript 3.0 – một ngôn ngữ lập trình có cấu trúc gần giống với Java được sử
dụng để tăng cường sức mạnh cho Flash.
Phần 3. Mang tính chất tổng hợp. Gồm các chương 6 và 7. Phần này giúp
bạn đọc hoàn thiện các thước phim hoạt hình bằng các kĩ thuật nâng cao. Chúng
tôi cũ ng cung cấp thêm các kiến thức để làm việc với hình ảnh, âm thanh và video.
Bê n cạ nh đó , chúng tôi còn giới thiệu gói thư viện mã nguo� n mở PaperVision3D
(trong dự á n cù ng tê n) để làm việc với đồ họa 3D trong Flash – một điều mà hầu
như chưa có một giáo trình ve� Flash nào đề cập đến.
Khi biên soạn giáo trình này, chú ng tôi đã cố gắng hoàn thiện nó. Tuy nhiên,
không thể tránh khỏi sai sót. Chú ng tôi rất mong nhận được sự đóng góp ý kiến
quý báu của các bạn độc giả cũng như các bạn đồng nghiệp. Mọi thư từ đóng góp
xin gửi về các địa chỉ email sau dnhthanh@hueic.edu.vn hoặc
myhoangthanh@yahoo.com.
Trong giáo trình này, chúng tôi còn bổ sung thêm một số tính năng mới mà Adobe
đưa vào cho phiên bản Flash CS6.
Huế 2012
Tác giả
-3-
Blank Page
-4-
PHỤ LỤC
2.5. Các công cụ đổ màu Paint Bucket, Ink Bottle và bắt màu EyeDropper ..... 53
-5-
2.8. Làm việc với các đối tượng .......................................................................................... 59
-6-
5.5.2. Câu lệnh switch ..................................................................................................... 120
5.5.3. Các câu lệnh lặp for, while và do…while ..................................................... 121
5.7.7. Là m việ c với cá c thà nh pha� n ho� trợ giao diệ n người dù ng GUI ........ 150
-7-
6.8. Xuất bản một tập tin Flash trong suốt trên trình duyệt................................ 231
6.11. Là m việ c với cơ sở dữ liệ u trong AIR ............................................................... 246
7.2. Cấu hình và cài đặt PaperVision3D cho Adobe Flex Buider ........................ 259
7.4.2. Đối tượng Material - Phối màu cho hình thể ................................................. 272
7.4.3. Đối tượng Lights - Hiệu ứng ánh sáng ............................................................. 275
-8-
4. TẠ O BE� CA� .......................................................................................................................... 288
-9-
Blank Page
- 10 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
Đồ họa Fractal: sử dụng thuật toán đệ quy. Mộ t bộ phậ n nà o đó trê n đo� i tượng
fractal sẽ là mộ t hı̀nh ả nh thu nhỏ củ a chı́nh đo� i tượng đó . Đâ y là mộ t dạ ng đo� họ a
quan trọ ng và có nhie� u ứng dụ ng trong thực tie� n. Nếu quan tâm đến dạng đồ họa
này, độ c giả có the� tham khảo thêm trong các tài liệu liên quan đến đồ họa Fractal
hay hình học Fractal.
- 12 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
Illustrator, Corel Draw,… Một bức ảnh dưới dạng đồ họa vector bao giờ cũng mịn
màng hơn so với đồ họa điểm.
Đo� i với đo� họ a đie� m, không có nhiều định dạng hỗ trợ chế độ transparent (hay
chế độ màu alpha). Nhưng với đồ họa vector, thì những tính năng này được hỗ
trợ một cách hoàn hảo. Với đồ họa vector, các chương trình chỉnh sửa và thiết kế
đồ họa luôn hỗ trợ chế độ lớp Layer, nhưng với đồ họa điểm, chỉ có một vài định
dạng mới hỗ trợ lớp Layer này (như định dạ ng photoshop, định dạ ng corel
photopaint,…). Bạ n hãy quan sát một số đối tượng đồ họa được tạo bởi Adobe
Illustrator sau đây:
- 13 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
kích thước phim tạo bởi Flash rất nhỏ gọn so với các định dạng phim khác và
thường được sử dụ ng đe� truye� n tả i trê n world wide web.
Lịch sử ra đời của Flash
Flash là một kĩ thuật tạo các hiệu ứng động, các thước phim hoạt hình, thie� t ke�
giao diệ n người dù ng cho cá c ứng dụ ng web… Flash được giới thiệu đầu tiên bởi
công ty MacroMedia vào năm 1999. Đến năm 2005, công ty này đã được Adobe
mua lại với giá 3.4 tỉ đôla. Từ khi ra đời cho đến này, Flash đã có rất nhiều bước
phát triển đáng chú ý. Nhiều tính năng mới đã liên tục được cập nhập trong các
phiên bản của nó, kể từ các phiên bản Macromedia Flash cho đến Adobe Flash
hiện nay.
Với phiên bản Adobe Flash CS4, công ty Adobe đã bổ sung vào cho Flash những
tính năng mạnh mẽ: hỗ trợ nhiều định dạng import dữ liệu; bổ sung các công cụ
tạo hoạt hình mạnh mẽ như Bone, Bind, 3D Translation, 3D Rotation,…
Phiên bản mới nhất của Flash là CS5.5 (cho đến đa� u năm 2012). Hiện nay, Adobe
cũng đã tạo ra một ấn bản mã nguồn mở cho Flash đó là công nghệ Flex. Một
trong những công nghệ ra đời sớm nhất hỗ trợ tạo giao diện cho ứng dụ ng web có
tı́nh tương tá c cao với người dù ng – RIA. Flex là một công nghệ hứa hẹn đem lại
nhiều lợi nhuận cho Adobe (nhờ vào trình phát triển Adobe Flex Buider). Nó là
một đối thủ lớn khi so sá nh với công nghệ Silverlight của Microsoft và JavaFx của
Sun (nay được mua lại bởi Oracle).
- 14 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
phát triển có thể sử dụng trình biên tập Adobe Flash Professional hoặ c Adobe
Flash Builder. Cá c trình biên tập này hoạt động tốt trên đa số hệ điều hành:
Windows và MacOS. Một yêu cầu để trình khách (vı́ dụ như trı̀nh duyệ t web) có
thể chạy được Flash là cần cài đặt một plugin Flash nhỏ gọn (khoả ng 2 Mb); hỗ
trợ một phiên bản Flash Lite (cho các dòng điện thoại); Adobe Flash Player,
Adobe Shockwave, Adobe AIR (cho cả PC, Laptop, smartphone, tablet,…).
Silverlight mặc dầu ra đời sau Flash, nhưng với sự hậu thuẩn của một tập đoàn
lớn như Microsoft, nó cũng đang dần có một vị thế đáng kể. Ngoài ra, Silverlight
được phát triển trên nền .NET, các lập trình viên có thể sử dụng VB.NET hoặc C# -
một ngôn ngữ lập trình mạnh mẽ - để phát triển. Nhược điểm của nó là chỉ tương
thích trên Windows, MacOS và các mẫu điện thoại Windows Mobile. Để phát triển
ứng dụng trên Silverlight, các nhà phát triển chỉ có thể sử dụng Visual Studio vốn
chỉ dành cho hệ điều hành Windows. Trình khách muốn chạy được Silverlight cần
cài đặt Plugin Silverlight (khoảng 5 Mb).
JavaFx ra đời sau cùng, nhưng nó có nhiều ưu điểm: mã nguồn mở, hỗ trợ nhiều
hệ điều hành – Windows, Linux, MacOS và hứa hẹn hoạt động tốt trên nhiều mẫu
Mobile, trình khách không cần cài đặt plugin hỗ trợ. Để soạn thảo JavaFx, người
dùng có thể sử dụng Eclipse hoặc NetBean. Cả hai trình biên dịch này đều hoạt
động tốt trên Windows, Linux và MacOS. Nhưng một điều đáng tiếc là JavaFx lại
ra đời quá muộn màng.
Với tuổi đời cao, lượng người dùng có kinh nghiệm lớn, các lập trình viên và các
nhà phát triển đã quá quen thuộc với Flash. Flash vẫn đang và sẽ phát triển trong
một khoảng thời gian dài nữa. Flash có ba định hướng trọng tâm: phát triển RIA
cho web, tạo các chương trình ứng dụng chạ y trê n Adobe Air (tương thı́ch với
Windows, MacOS, Linux, Android, iOS…) và các thước phim trình diễn chạ y trê n
Flash Player, Shockwave, Flash Plugin, Flash Lite. Trong năm 2010, W3C đã đưa
ra chuẩn mới cho cá c ứng dụ ng web – cô ng nghệ HTML 5 – hứa hẹn sẽ soán ngôi
RIA của Flash, Silverlight và JavaFx. Dù sau này, vị thế trong việc phát triển RIA
cho web có thay đổi, thì những định hướng còn lại của Flash vẫn là những định
hướng phát triển quan trọng, đảm bảo sự trường tồn cho công nghệ này.
- 15 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
nghiệp hơn với Flash Buider 4, hiệu chỉnh âm thanh, video… Chính vì lý do này,
tôi đề nghị các bạn nên chọn bộ trọn gói Adobe Master CS5 (hoặ c CS5.5).
Chúng ta có thể tải trực tiếp từ Adobe và có 30 ngày để dùng thử. Sau khi tải về,
hãy tiến hành giải nén tập tin, khi đó ta sẽ thu được một thư mục chính.
Nếu ta sử dụng một đĩa cài đặt DVD, thì hãy đưa đĩa DVD vào ổ đĩa DVD trên máy
tính. Chúng ta có thể sử dụng chế độ AutoRun của nó, hoặc mở đĩa DVD này ra.
Trong cả hai trường hợp nêu trên, thư mục chính sẽ có 4 thư mục con và một tệp
Set-up.exe. Cấu trúc thư mục có dạng như sau:
Hình 4 – Cấu trúc thư mục bên trong đĩa DVD cài đặt Flash CS5
Hãy nhấp đôi chuột vào tập tin Set-up.exe, khi đó, sẽ có cửa sổ sau đây hiện ra
Hình 5 – Màn hình chào đón khi cài đặt Adobe Master CS5
- 16 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
Hãy đọc qua các điều khoản sử dụng phần mềm, nếu đồng ý thì các bạn chỉ việc
nhấp Accept. Ngược lại, hãy chọn Quit để hủy bỏ việc cài đặt.
Sau khi nhấp vào Accept, cửa sổ sau đây sẽ xuất hiện.
- 17 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
- 18 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
Hình 9 – Mành hình chào đón của Adobe Flash Professional CS5/CS5.5
Sau khi quá trình khởi động hoàn tất, bạn sẽ thấy giao diện sau đây
- 19 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
- 20 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
- 21 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
- 22 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
Như bạn thấy, mộ t đie� m mới củ a phiê n bả n CS5.5 so với phiên bản CS5 là hỗ trợ
dự án template cho hệ điều hành Android.
Khi tạ o mới mộ t dự á n trong Flash, chúng ta ca� n quan tâm đến một so� kiểu dự án
sau đây:
- ActionScript 3.0: tạo dự án Flash hỗ trợ ActionScript 3.0. Dự án này sử dụng cho
Flash Player và Flash Plugin với nền tảng chủ yếu là Desktop. Bạn cũng lưu ý
rằng, trong giáo trình này, chúng ta đang thảo luận về ActionScript 3.0. Phiên bản
này là phiên bản mới nhất của ActionScript cho đến thời điểm này.
- ActionScript 2.0: tương tự như dự á n ActionScript 3.0, tuy nhiên phiên bản
ActionScript được hỗ trợ là 2.0.
- Adobe Air 2/AIR: tạo dự án Flash cho Desktop hoặc các thiết bị khác có hỗ trợ
Adobe Air. Trong trường hợp này, AIR được sử dụng là phiên bản AIR 2.0 trở lên.
Adobe Air là một dự án mới của Adobe nhằm tạo ra môi trường cho các nhà phát
triển xây dựng những ứng dụng dựa vào công nghệ Flash có thể chạy độc lập trên
các nền tảng hệ điều hành. Nó có nhiều điểm tương đồng với công nghệ Java của
Sun hay .NET của Microsoft. Để phát triển một trình ứng dụng trên Adobe Air,
bạn hoàn toàn có thể sử dụng trình soạn thảo Adobe Flash hoặc Adobe Flex
Builder (hay Adobe Flash Buider).
- AIR for Android: tạo dự án Flash chạy trên AIR phục vụ cho các thiết bị sử dụng
hệ điều hành Android của Google. Trong giáo trình này, tôi sẽ giới thiệu cho các
bạn cách cài đặt AIR và các ứng dụng chạy trên AIR cho bộ giả lập Android SDK
do Google cung cấp. Chi tiết phần này sẽ được trình bày trong phần xuất bản tập
tin Flash.
- AIR for iOS: tạo dự án Flash chạy trên AIR phục vụ cho các thiết bị sử dụng hệ
điều hành iOS của Apple. iOS SDK của Apple chỉ cung cấp cho các nhà phát triển
sử dụng nền tảng MacOS, do đó, nếu bạn là một nhà phát triển ứng dụng
Windows, bạn chỉ có thể lựa chọn một trong hai cách: cài đặt MacOS để sử dụng
bộ SDK; hoặc sử dụng môi trường giả lập Virtual PC để cài đặt MacOS. Hiển nhiên,
bạn hoàn toàn có thể viết các ứng dụng cho iOS trong trường hợp sử dụng Adobe
Flash CS5 trở lên, tuy nhiên, để đảm bảo ứng dụng thực thi tốt trên hệ điều hành
này, bạn cần kiểm tra nó trên môi trường giả lập hoặc trên chính thiết bị đó.
- Flash Lite 4, Adobe Device Central: tạo dự án Flash cho Mobile chạy trên Flash
Lite. Khi chọn kiểu dự án này, Adobe Flash CS5/CS5.5 sẽ tự động gọi đến Adobe
Device Central. Đây là tiện ích quản lý các thông tin về Flash Lite hỗ trợ trên các
dòng điện thoại. Bạn chỉ cần tìm kiếm loại điện thoại mà bạn cần tạo dựng dự án,
sau đó bấm vào Create.
- 23 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
- 24 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
này, chúng ta sẽ cảm thấy đối tượng chuyển động. Kĩ thuật tạo hoạt hình trong
Flash cũng hoàn toàn tương tự. Trước khi tìm hiểu kĩ về các cách thức tạo chuyển
động trong Flash, chúng ta cùng nhau tìm hiểu qua các khái niệm: Lớp – Layer,
Khung hình – Frame, Cảnh quay – Scence, Thước phim – Movie.
- Layer: là các lớp được dùng trong việc sáng tác. Mỗi một khung hình có thể
chứa nhiều layer khác nhau. Mỗi một đối tượng thường được xây dựng trên mỗi
layer. Kĩ thuật layer được sử dụng rộng rãi trong đồ họa máy tính, bao gồm cả đồ
họa điểm như: photoshop, corel photopaint hay đồ họa vector như: illustrator,
coreldraw.
Nhóm biểu tượng xóa và tạo layer – : biểu tượng thứ nhất từ trái sang là
tạo mới layer, biểu tượng thứ hai là tạo mới một thư mục để chứa layer và
biểu tượng cuối cùng là xóa layer hoặc thư mục chứa layer.
Nhóm biểu tượng hiệu chỉnh layer – : biểu tượng thứ nhất từ trái sang là
cho phép ẩn hay hiện layer đó, biểu tượng thứ hai là khóa không cho phép
chỉnh sửa đối tượng trên layer và biểu tượng cuối cùng là cho phép đối tượng
trên layer hiển thị đường viền và màu nền hay chỉ đường viền.
- Frame: là khung hình dùng trong kĩ thuật tạo chuyển động. Vật thể chuyển động
được là nhờ vào kĩ thuật thay thế các khung hình. Như tôi đã trình bày ở trên, mắt
người chỉ có thể lưu được không quá 24 hình ảnh trong một giây, nếu tốc độ
chuyển đổi các khung hình lớn, mắt chúng ta không thể nhận thấy được sự thay
đổi này mà cảm giác như là hình ảnh đang chuyển động. Với Flash, số khung hình
không nhất thiết phải lớn như trong kĩ thuật tạo video, nó giảm đi một cách đáng
kể nhờ vào công nghệ được sử dụng trong Flash. Điều này cũng giúp làm giảm
kích thước của tập tin Flash.
- Scene: được hiểu như là các cảnh quay trong Flash. Một cảnh quay là tập hợp
của các khung hình kế tiếp nhau để tạo ra chuyển động. Để chèn thêm scene, ta
vào Insert, chọn Insert Scene. Nhờ vào các cảnh quay này, chúng ta có thể tạo các
- 25 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
thước phim dài, mà không phải quản lý các lớp một cách quá phức tạp khi số
lượng đối tượng trên cảnh quay đó trở nên quá lớn. Một cảnh quay trong Flash
cũng giống một cảnh quay trong phim truyền hình vậy. Khi cần tạo một thước
phim hoàn chỉnh, chúng ta sẽ ghép nối nhiều cảnh quay lại với nhau. Bạn cũng
lưu ý rằng, các cảnh quay sẽ được ghép tự động theo thứ tự mà bạn sắp xếp. Do
đó, nếu muốn thay đổi thứ tự cảnh quay, bạn chỉ việc thay đổi thứ tự sắp xếp của
nó. Để làm xuất hiện cửa sổ quản lý các cảnh quay, bạn vào Windows > Other
Panels > Scene (hoặc phím tắt Shift+F2).
- 26 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
tra tự động, bạn muốn dừng chế độ này ngay lập tức ! Khi đó, bạn hãy nhấn phím
Enter thêm lần nữa. Chế độ kiểm tra tự động sẽ dừng ngay lập tức.
- 27 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
Để hiển thị các thuộc tính của một đối tượng, bạn chỉ việc nhấp chọn đối tượng.
Khi đó, trong bảng thuộc tính Properties này sẽ hiển thị các thông số liên quan
đến các thuộc tính của đối tượng. Để thay đổi các thông số thuộc tính của đối
tượng đó, bạn chỉ việc thay đổi các thông số trong bảng thuộc tính Properties này.
Cá c biểu tượng nhỏ ở góc trên bên phải cho phép thu nhỏ () hoặc đóng lại vùng
thuộc tính Properties (). Tương tự, chúng ta cũng có thể làm xuất hiện hoặc
đóng vùng thuộc tính này lại bằng cách vào Windows, chọn Properties.
Thuộc tính của vùng soạn thảo Stage:
Publish: gồm Player (cho phép phim trình chiếu có thể hoạt động tốt trên phiên
bản Flash Player nào), Script (phiên bản ActionScript mà đoạn phim đang sử
dụng), Class (bạn chỉ việc nhập tên Lớp thể hiện vào, lập tức Flash sẽ khởi tạo cho
bạn một cú pháp khai báo của lớp nội tại – mặc định là lớp thừa kế từ MovieClip),
Profile (quản lý các thông tin liên quan đến việc xuất bản dự án Flash), AIR
Settings (các cấu hình thiết lập cho dự án Flash chạy trên Adobe Air).
Properties: chứa FPS (tốc độ chơi – đo bằng số frame trên mỗi giây Frames Per
Second), Size (kích thước của khung trình chiếu – đo bằng pixel), Stage (quản lý
màu nền của khung soạn thảo).
- 28 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
- Nhóm Align: canh chỉnh vị trí của các đối tượng. Theo thứ tự các biểu tượng từ
trái sang phải là canh trái, canh giữa theo chiều ngang, canh phải, canh trên,
canh giữa theo chiều dọc và canh dưới. Nếu đánh dấu kiểm vào tùy chọn Align
to Stage thì nó sẽ canh chỉnh theo khung soạn thảo, ngược lại, nó sẽ can chỉnh
theo vị trí tương đối của các đối tượng.
- Nhóm Distribute: canh chỉnh theo trục tương đối của các đối tượng. Theo thứ
tự các biểu tượng từ trái sang phải là: canh chỉnh theo trục ở phía mép trên,
theo trục đối xứng ngang, theo trục ở phía mép dưới, theo trục ở phía mép
trái, theo trục đối xứng dọc và theo trục ở phía mép phải.
- 29 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
- Nhóm Match Size: hiệu chỉnh cùng kích thước của đối tượng theo chiều ngang,
chiều dọc, hoặc theo cả chiều ngang và chiều dọc. Nếu chọn tùy chọn Align to
Stage, nó sẽ canh chỉnh kích thước đối tượng theo khung soạn thảo.
- Nhóm Space: hiệu chỉnh khoảng cách giữa các đối tượng theo chiều dọc và
ngang.
- 30 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
- Nhóm thứ hai: Rotate (hiệu chỉnh góc quay), Skew (hiệu chỉnh góc dịch chuyển
xiêng – hay độ kéo trượt theo hai phía).
- Nhóm thứ 3: liên quan đến tọa độ 3D và điểm trọng tâm 3D. Chức năng này chỉ
hoạt động đối với biểu tượng MovieClip. Chúng tôi sẽ trình bày kĩ hơn về biểu
tượng này trong chương 3.
Vùng History (Ctrl+F10): quản lý lịch sử các thao tác của bạn khi sáng tác.
- 31 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
Hình 23 – Chế độ màu Solid Color Hình 24 – Chế độ màu Linear Gradient
- 32 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
Khác với solid, chế độ Linear Gradient cho ta các hiệu chỉnh màu sắc hấp dẫn hơn
với dạng thức cầu vồng. Bạn có thể hiệu chỉnh thuộc tính Flow là một dải màu
biến thiên theo thang màu bên dưới (Extend color) hoặc chế độ màu phản xạ
(Reflect) hoặc chế độ màu lặp (Repeat). Nếu bạn muốn thay đổi màu trong thang
Gradient, bạn chỉ việc bấm chọn nút đánh dấu ở mỗi màu trong thang màu ở bên
dưới, sau đó chọn lại màu mới (hoặc kích đối chuột vào nút này, rồi chọn lại màu
mới). Nếu bạn muốn bổ sung thêm một màu trong thang màu Gradient, bạn chỉ
việc bấm chọn vào một vị trí bất kì trên thang màu bên dưới. Ngược lại, nếu bạn
muốn loại bỏ một màu ra khỏi thang màu Gradient, bạn chỉ việc kéo thả nó ra
khỏi thang màu này. Bạn thấy đấy, việc sử dụng màu Gradient rất đơn giản.
+ Radial Gradient: hoàn toàn tương tự Linear Gradient, chỉ có duy nhất một sự
khác biệt là Radial Gradient tạo màu cầu vồng theo dạng xoáy tròn khác với
Linear Gradient theo dạng đường thẳng.
+ Fill Bitmap: với chức năng này, bạn có thể đổ màu cho đối tượng bằng các bức
ảnh. Đây là một cách tạo hiệu ứng màu khá thú vị, rất hữu dụng trong nhiều tình
huống.
Vùng Common Library (Buttons, Classes và Sounds): quản lý các dạng button
(Simple Button), các lớp thư viện và âm thanh.
Vùng Component (Ctrl+F7): quản lý các thành phần GUI (Graphics User
Interface – Giao diệ n người dù ng) trong Flash. Bạn có thể sử dụng các đối tượng
này để tạo một giao diện web, một trình ứng
dụng...
- 33 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
đối tượng được chọn theo chức năng mà bạn đã chọn. Chức năng này cũng rất
hữu ích cho những người dùng phổ thông, muốn tạo các ActionScript để điều
khiển đối tượng nhưng lại ngại tìm hiểu về ngôn ngữ lập trình này bởi nhiều lý do
khách quan lẫn chủ quan. Tuy nhiên, bạn cũng cần lưu ý rằng, chức năng này chỉ
cung cấp một vài tính năng chứ không phải là tất cả, bởi vậy, nếu bạn muốn tạo
một thước phim chuyên nghiệp, bạn cần có sự hiểu biết tương đối đầy đủ về ngôn
ngữ lập trình ActionScript mạnh mẽ này được tích hợp trong Flash.
- Actions: tạo sẵn các hiệu ứng liên quan đến các hành động của đối tượng.
- Timeline Navigation: điều khiển quá trình chơi phim. Nó cũng tương tự như
thanh PlayBack khi điều khiển một thước phim. Trong giáo trình này, chúng ta
sẽ thảo luận việc tạo một thanh PlayBack bằng ActionScript mà không cần sử
dụng chức năng Code Snippets. Sau khi tìm hiểu về cách tạo thanh PlayBack
mà không cần dùng đến chức năng Code Snippets, tôi đề nghị bạn hãy sử dụng
chức năng này để tạo lạ i thanh PlayBack. Chi tiết chúng ta sẽ tìm hiểu trong
chương 6.
- Animation: tạo các hiệu ứng động cho các đối tượng MovieClip.
- Audio and Video: các chức năng của thanh PlayBack để điều khiển video và
audio khi các đối tượng này được sử dụng trong Flash.
- 34 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
- Load and Unload: tạo một màn hình Splash khi phim được tải. Tải và hủy tải
các bức ảnh, đoạn phim,… trong phim Flash được tạo.
- Event Handlers: quản lý việc thực thi các Event. Event là các sự kiện tương
ứng với một hành động nào đó của đối tượng. Nó có thể là hành động
ON_ENTER, ON_LOAD… củ a stage; hành động MOUSE_UP, MOUSE_DOWN…
tương ứng với sự kiện của chuột; hà nh độ ng KEY_UP, KEY_DOWN… tương ứng
với sự kiệ n của bàn phím... Các Event sẽ được quản lý bởi các lớp tương ứng.
Các lớp này cung cấp các chức năng để lắng nghe các die� n bie� n sự kiệ n diễn ra
trên mỗi đối tượng. Khi có một Event nào đó xảy ra, tương ứng với các hàm
được triệu gọi, nó sẽ thực thi các chức năng tương ứng.
- Cá c nhó m chức nă ng là m việ c với cá c dò ng điệ n thoạ i cả m ứng thô ng minh, và
nhó m chức nă ng là m việ c với AIR (phiê n bả n CS5.5).
Chi tiết về các nhóm chức năng này, ta sẽ tìm hiểu thêm trong chương
ActionScript.
Vùng String: cho phép bạn tùy chọn ngôn ngữ cho thước phim của mình. Nếu
bạn muốn phim của bạn hiển thị đúng ngôn ngữ trên các máy tính khác nhau, bạn
hãy hiệu chỉnh trong vùng String này.
Thay đổi phím tắt trong Adobe Flash: vào Insert > KeyBoard Shortcuts.
- 35 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
vào dấu – tương ứng với chức năng đó. Khi đó, phím tắt sẽ bị loại bỏ. Nếu muốn
thay đổi phím tắt, bạn sử dụng nút lệnh Change.
Remarks: bạn không nên thay đổi quá nhiều các phím tắt. Nếu bạn sử dụng các
phím tắt theo mặc định, sẽ có một vài lợi thế khi bạn sử dụng Flash trên nhiều máy
tính khác nhau. Bởi vì, không phải máy tính nào bạn cũng có quyền thay đổi các
thiết lập này. Đặc biệt đối với các máy bị giới hạn quyền truy cập hoặc những máy
tính không cho phép bạn lưu lại những thiết lập phím tắt.
Tạo các mẫu màu tô nhờ vào dự án Adobe Kuler: Adobe Kuler là một dự án
trực tuyến hỗ trợ quản lý các mẫu màu tô. Ta có thể tạo, sử dụng và chia sẻ cho
cộng đồng tham gia vào dự án Kuler này. Một yêu cầu quan trọng khi muốn sử
dụng Adobe Kuler là máy tính phải có kết nối internet. Để mở cửa sổ Kuler, ta vào
Windows, chọn Extensions, và chọn tiếp Kuler.
Cửa sổ Project (Windows>Project): hoàn toàn tương tự như chức năng New
Project và Open Project trong menu File. Tuy nhiên, khi sử dụng cửa sổ này, ta có
thể xem cấu trúc, các tập tin trong dự án của Flash.
- 36 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
- 37 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH
Blank Page
- 38 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
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ẽ.
- 40 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
Bước 2: Hiệu chỉnh kích thước của nó sao cho phù hợp. Kích chuột phải vào nó,
chọn Convert to Symbol > MovieClips và nhấp Ok.
Bước 3: Bấm chọn công cụ Spray Brush. Trong bảng Properties, chọn mục
Symbol, chọn nút Edit, và chọn biểu tượng mà ta vừa tạo. Sau đó, bạn hãy hiệu
chỉnh các thuộc tính trên bảng Properties này như: độ kéo rộng của biểu tượng
khi phun (scale width), độ kéo theo chie� u cao của biểu tượng khi phun (scale
height), độ rộng của đường phun (width), độ cao của đường phun (height), góc
phun (Brush angle). Các chế độ tạo mẫu ngẫu nhiên: độ kéo giãn của biểu tượng
(random scaling), góc xoay của biểu tượng (rotate symbol), góc phun (random
rotation).
Công cụ Erase
Công cụ dùng để tẩy xóa các nét vẽ.
- 41 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
- 42 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
- 43 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
- 44 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
Góc mở
Góc đóng
- 45 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
- Close Path: có tác dụng đối với hình thể tạo bởi góc đóng và góc mở. Nó sẽ tự
động làm cho các đường kết nối trở nên liền mạch.
Hình bên trái không kích hoạt Close Path. Hình bên phải kích hoạt Close Path.
Như ta thấy, với tùy chọn Close Path, hình thể sẽ được khép kính và thuộc tính
Fill Color mới có tác dụng.
Hình 37 – Hình tạo bởi góc mở 600 và kết hợp với tùy chọn Close Path.
- 46 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
Nếu muốn thay đổi góc tròn, ta chỉ cần dịch chuyển các nút nhấn nhờ vào công cụ
Selection sang trái hoặc phải (đối với nút nhấn nằm ngang) hoặc lên xuống (đối
với nút nhấn nằm dọc). Chi tiết về công cụ Selection ta sẽ thảo luận trong các
phần tiếp theo. Công cụ Selection này có biểu tượng hình con trỏ chuột, màu đen,
nằm phía trên cùng của thanh công cụ. Các tùy chỉnh thuộc tính trong bảng thuộc
tính Properties hoàn toàn tương tự với công cụ Rectangle.
Bạn cũng cần lưu ý rằng, công cụ Rectangle Primitive dựa trên cơ sở của
Rectangle. Điều này bạn có thể nhận thấy được khi phát họa hình bằng công cụ
này: có một hình chữ nhật góc cạnh bao quanh hình thể của chúng ta.
Công cụ Oval Primitive
Hoàn toàn tương tự công cụ Oval. Bạn có thể hiệu chỉnh các thuộc tính góc mở,
góc đóng, bán kính của hình vành khăn. Và cũng tương tự công cụ Rectangle
Primitive, ta có thể hiệu chỉnh các thuộc tính của hình đã vẽ nhờ vào các nút nhấn
nhấn. Nút nhấn trung tâm dùng để điều chỉnh kích thước bán kính vành khăn. Nút
nhấn biên ngoài dùng để điều chỉnh góc đóng, góc mở.
Việc hiệu chỉnh các góc đóng, góc mở, bán kính vành khăn cũng nhờ vào công cụ
Selection mà chúng ta sẽ làm quen trong mục tiếp theo.
- 47 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
Bạn cũng cần lưu ý, cũng giống công cụ Oval, để tạo dựng các hình thể sao cho
chiều rộ ng và chiều cao (như hình tròn) bằng nhau nhờ vào Oval Primitive, ta
cũng nhấn và giữ Shift khi vẽ hình.
Với công cụ này, ta có thể tạo ra các hình dạng phức tạp mà không cần hiệu chỉnh
các thông số ban đầu như công cụ cùng loại Oval. Chỉ cần hiệu chỉnh các nút điều
khiển trên các khối hình cơ sở là ta đã nhận được những hình biến thể độc đáo.
Hình cơ sở của nó cũng là hình chữ nhật (hình Oval có biên ngoài nội tiếp hình
chữ nhật này).
Công cụ PolyStar
Dùng để vẽ đa giác và hình sao. Khi bấm chọn công cụ này, ta chú ý các tùy chọn
trong bảng thuộc tính Propeties.
- Fill color: chọn màu nền cho vật thể.
- Stroke color: chọn màu viền cho nét vẽ.
- 48 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
Hình 42 – Hình sao mập (tỉ lệ SPS = 0.9) và hình sao gầy (tỉ lệ SPS = 0.1)
- 49 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
độ rộng cho kí tự trắng giữa các chữ cái), Color (chọn màu cho phông chữ), Auto
Kern (tự động co giãn), Anti-Alias (làm cho nét chữ trở nên mượt mà hơn).
- 50 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
- Filter: tạo các hiệu ứng nâng cao như tạo đổ bóng, hiệu ứng bóng mờ, hiệu ứng
cầu vồng… Để sử dụng các hiệu ứng này, bạn chỉ bấm vào biểu tượng đầu tiên
trong vùng công cụ được tô vàng, từ bên trái sang. Nếu bạn thay đổi một hiệu ứng
nào đó, và muốn lưu lại thiết lập này, bạn nhấp vào biểu tượng thứ ba từ trái
sang. Nếu bạn muốn quay lại thiết lập mặc định, hãy nhấp biểu tượng thứ hai từ
trái sang. Biểu tượng con mắt cho phép bạn tạm ẩn hiệu ứng được chọn. Biểu
tượng mũi tên quay lùi, cho phép bạn quay lại thiết lập các thông số trước đó.
Biểu tượng thùng rác cuối cùng, cho phép bạn xóa bỏ một hiệu ứng được chọn.
- 51 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
của hình thể (khi con trỏ chuột đặt ở các biên của hình và nó có dạng như biểu
tượng Selection bổ sung thêm đường cong màu đen).
Công cụ Lasso
Tương tự công cụ Selection, công cụ Lasso cũng cho phép chọn. Điểm khác biệt là
công cụ Selection dùng để chọn toàn bộ một hay nhiều đối tượng (bằng cách giữ
phím Shift) hoặc một phần đối tượng theo khung chọn là hình chữ nhật. Còn công
cụ Lasso có thể chọn theo hình dạng phức tạp. Chúng ta chọn Lasso và vẽ ra
khung chọn. Nó không nhanh bằng Selection nhưng tỏ ra hiệu quả trong nhiều
trường hợp, nếu các đối tượng được chọn nằm phân tán hoặ c buộc phải chọn một
phần đối tượng. Cũng tương tự Selection, ta có thể giữ phím Shift để chọn theo
nhiều vùng khác nhau. Công cụ Lasso không thể dùng để tinh chỉnh đối tượng.
Khi bấm vào biểu tượng này, sẽ xuất hiện thêm các công cụ con bao gồm Magic
Wand, Magic Wand Setting và Polygon Mode.
- 52 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
nà y cho cá c đo� i tượng đo� họ a đie� m, bạ n ca� n chuye� n đo� i từ đo� họ a đie� m sang đo�
họ a vector. Tuy nhiê n, hiệ n nay chưa có mộ t thuậ t toá n nà o hữu hiệ u đe� chuye� n
đo� i mọ i ả nh đie� m sang ả nh vector mộ t cá ch hoà n hả o. Flash cũ ng ho� trợ chức
nă ng chuye� n đo� i nà y nhưng chı̉ hiệ u quả đo� i với những ả nh có những đặ c trưng
de� chuye� n đo� i (như có nhie� u vù ng mà u đo� ng nha� t). Đe� sử dụ ng chức nă ng nà y, ta
chọ n đo� i tượng đo� họ a đie� m, sau đó chọ n Modify > Bitmap > Trace Bitmap.
2.5. Các công cụ đổ màu Paint Bucket, Ink Bottle và bắt màu
EyeDropper
Công cụ Paint Bucket
Đây là công cụ dùng để đổ màu nền cho vật thể. Khi kích vào biểu tượng này trên
thanh công cụ, trên bảng thuộc tính Properties sẽ hiện ra các thông số liên quan:
- 53 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
kiểu pattern, bitmap và dải màu cầu vồng tùy chọn để đổ màu nền cho đối tượng.
Nhưng bạn cũng lưu ý rằng, nó cần kết hợp với công cụ Paint Bucket này.
- 54 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
- 55 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
Mặc định, khi ta tạo một đối tượng thì đối tượng đó đã tồn tại một tâm xoay (khi
xoay đối tượng, đối tượng sẽ quay quanh tâm xoay này). Bạn có thể hiệu chỉnh vị
trí của tâm xoay này bằng cách bấm chọn nó và di chuyển.
Trên hình vẽ trên, bạn có thể thấy sự thay đổi vị trí của tâm xoay trên đối tượng.
Ở đối tượng bên trái, tâm xoay nằm ở chính giữa của đường thẳng, còn ở hình
bên phải, tâm xoay được dịch chuyển xuống góc phía dưới. Bạn có thể xoay đối
tượng để nhận ra sự khác biệt: đường thẳng bên trái xoay theo kiểu chong chóng
(tâm quay ở chính giữa của cánh chong chóng), còn đường thẳng ở bên phải thì
xoay theo kiểu kim đồng hồ (tâm quay ở một đầu của kim quay).
Bất kì một đối tượng nào đối xứng tâm, thì theo mặc định, tâm đối xứng của đối
tượng chính là tâm xoay của nó.
Tâm xoay của đối tượng không nhất thiết phải nằm trên đối tượng. Nó có thể nằm
bất kì, tùy thuộc vào mục đích sử dụng của bạn.
Xoay một đối tượng là một hiệu ứng tạo khá đơn giản trong Flash. Bạn sẽ được
tìm hiểu kĩ hơn khi học về cách tạo chuyển động bằng kĩ thuật Tween và
ActionScript.
Công cụ Gradient Transform
Nhờ vào công cụ này, ta có thể hiệu chỉnh các thông số khi đổ màu cầu vồng cho
đối tượng. Sau khi tạo màu cầu vồng cho đối tượng, ta bấm chọn vào biểu tượng
tam giác đen trên công cụ Free Transform, và lú c nà y sẽ xuất hiện công cụ
Gradient Transform, bạn chỉ việc bấm chọn nó.
- 56 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
màu này như: kéo to (tăng kích thước vùng sáng), thu nhỏ (giảm kích thước vùng
sáng), hiệu chỉnh vị trí của tam giác (thay đổi tâm của vùng sáng), bấm vào nút
tròn và dịch chuyển nó (thay đổi vị trí vùng màu).
- 57 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
uốn cong. Bạn có thể nhận thấy chúng – hình vuông, chữ nhật tạo nên từ các điểm
góc cạnh; đường tròn, eclipse được tạo từ các điểm uốn cong.
Công cụ Pen
Công cụ này dùng để vẽ các đường đa giác bằng cách tạo các điểm điều khiển, sau
đó, tự động nối các điểm này lại với nhau.
Các thông số liên quan đến công cụ này hoàn toàn tương tự với công cụ Line.
Khi sử dụng công cụ Pen, bạn cũng lưu ý rằng, nếu bạn tạo hình thể có dạng
đường thẳng, bạn chỉ việc nhấp vào nút đầu và nút cuối. Nếu bạn muốn tạo dạng
đường cong, bạ n cần rê chuột liên tiếp để hiệu chỉnh đường điều khiển của nó.
- 58 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
Các điểm điều khiển là các điểm nằm trên đường biên. Những điểm không nằm
trên đường biên là các điểm thuộc đường điều khiển.
- 59 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
- Nhóm viền và nền của đối tượng thành một nhóm: có hai cách nhóm – sử dụng
chức năng Group và chức năng Union. Chọn đối tượng nền và vie� n (nhấp đôi
chuột vào đối tượng), sau đó vào Modify, chọn Group (Ctrl+G) hoặc Combine
Object > Union. Để nhóm nhiều đối tượng thành một nhóm, ta sử dụng chức năng
Group: chọn các đối tượng cần nhóm, nhấn tổ hợp phím Ctrl+G.
- Vô hiệu hóa việc chỉnh sửa một đối tượng: chọn đối tượng cần khóa, vào Modify,
chọn Arrange > Lock (Ctrl+Alt+L).
- Kích hoạt việc chỉnh sửa một đối tượng trở lại: Modify > Arrange > Unlock All
(Ctrl+Shift+Alt+L).
- Sắp xếp thứ tự đối tượng: chọn đối tượng, vào Modify > Arrange. Sau đó, ta có
thể hiệu chỉnh thứ tự sắp xếp như đối với cá c đo� i tượng đo� họ a trong Microsoft
Word.
- Canh chỉnh vị trí và kích thước của đối tượng: vào Modify > Align (Ctrl+K).
- 60 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
- 61 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
- 62 -
CHƯƠNG 2. CÁC CÔNG CỤ VẼ CƠ BẢN
Blank Page
- 63 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH
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
- 65 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH
(2) Nha� p đô i chuộ t và o bie� u tượng graphic nà y đe� mở thanh Timeline củ a nó .
Trong thanh Timeline nà y, ta chọ n frame thứ 2 và nha� n phı́m F6 đe� tạ o mới mộ t
keyframe. Trê n keyframe nà y, ta thay đo� i mà u sa� c cho hı̀nh chữ nhậ t thà nh mà u
đỏ .
(3) Quay trở lạ i với khung sá ng tá c, tạ i frame thứ 2 nha� n phı́m F5.
Khi kie� m tra movie, bạ n ca� n chọ n đo� i tượng graphic và hiệ u chı̉nh cá c thô ng so�
trong mụ c Looping la� n lượt: loop, play one, single frame đe� quan sá t ke� t quả . Khi
chọ n hiệ u ứng loop, thı̀ sự bie� n đo� i từ mà u xanh blue sang mà u đỏ và ngược lạ i sẽ
die� n ra mộ t cá ch liê n tụ c (lặ p liê n tụ c); khi chọ n hiệ u ứng play one thı̀ sự bie� n đo� i
đó chı̉ die� n ra mộ t la� n duy nha� t; khi chọ n single frame thı̀ khô ng có sự bie� n đo� i
nà o die� n ra (bởi nó chı̉ sử dụ ng mộ t frame đơn duy nha� t).
Hai tù y chọ n loop và play one thường sử dụ ng khi muo� n tạ o ra cá c hı̀nh ả nh độ ng
như đo� i với cá c ả nh độ ng gif. Nghı̃a là sử dụ ng chức nă ng thay the� từng khung
hı̀nh đơn giả n. Cò n đo� i với single frame, nó thường được sử dụ ng khi ta muo� n to� i
ưu khung thie� t ke� . Bạ n có the� thie� t ke� nhie� u hı̀nh ả nh trê n đo� i tượng graphics
nà y. Mo� i hı̀nh ả nh được thie� t ke� trê n mo� i keyframe riê ng biệ t. Khi ca� n sử dụ ng
hı̀nh ả nh trê n frame nà o, ta chı̉ ca� n chọ n thuộ c tı́nh looping tương ứng với tù y
chọ n single frame và chı̉ định tù y chọ n first tương ứng với keyframe mà hı̀nh ả nh
củ a đo� i tượng ca� n dù ng đang thie� t lậ p. Cá ch là m nà y giú p ta quả n lý cá c đo� i tượng
đo� họ a đơn giả n hơn. Bạ n hã y thử tưởng tượng, bạ n có mộ t khung cả nh. Khung
cả nh nà y sẽ thay the� theo 4 mù a: xuâ n, hạ , thu, đô ng. Khi thie� t ke� cả nh, ta có the�
tạ o mộ t bie� u tượng graphic có tê n là landcape. Trê n landcape nà y sẽ có 4
keyframe tương ứng với sự bie� n đo� i cả nh sa� c theo 4 mù a. Trong phim, ne� u ta ca� n
hie� n thị theo cả nh sa� c củ a mù a nà o, thı̀ ta chı̉ việ c thay đo� i tham so� first từ 1 – 4
(khi looping được chọ n là single frame) mà khô ng phả i thay đo� i quá nhie� u cá c lớp
đo� i tượng hay tù y chı̉nh lạ i trên thanh Timeline.
- 66 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH
nhie� u đie� m tương đo� ng. Trong mụ c nà y, ne� u ta chı̉ đe� cậ p đe� n Simple Button mà
khô ng quan tâ m đe� n đo� i tượng fl.Controls.Button.
Để tạo một Button, bạn thao tác như sau:
- Chọn đối tượng cần chuyển đổi sang Button.
- Nhấp phím F8 hoặc kích chuột phải, chọn Convert to Symbol. Khi đó, sẽ xuất
hiện hộp thoại sau:
- 67 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH
nhưng ta hoà n toà n có the� tạ o được vă n bả n cho Button ba� ng cô ng cụ Text ke� t
hợp với từng frame Up, Down, Over và Hit.
Các thuộc tính của biểu tượng Button
- Instance Name: tên hiển thị của biểu tượng.
Được dùng khi làm việc với ActionScript.
- Thanh tùy chọn thả xuống: cho phép chuyển
đổi qua lại giữa các loại biểu tượng.
- Instance of: chọn swap để thay đổi biểu tượng
cho đối tượng hiển thị.
- Position and Size: thay đổi vị trí và kích thước
cho đối tượng.
- Color effect: chọn hiệu ứng màu sắc cho đối
tượng, bao gồm:Brightness, Tint, Advanced và
Alpha.
- Display: với thuộc tính Blending, cho phép ta
chọn các chế độ pha trộn màu sắc cho Button.
- Tracking: với Options, bạn có thể chọn Track
as Button hoặc Track as MenuItem.
- Filter: hoàn toàn tương tự với Filter khi làm
việc với công cụ Text.
- 68 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH
Tạo hiệu ứng cho Movieclip: chúng ta sẽ tìm hiểu về cách tạo hoạt hình cho một
MovieClip trong chương tiếp theo.
Các thuộc tính của biểu tượng MovieClip
- Instance Name: tên hiển thị của biểu
tượng. Được dùng khi làm việc với
ActionScript.
- Thanh tùy chọn thả xuống: cho phép
chuyển đổi qua lại giữa các loại biểu tượng.
- Instance of: chọn swap để thay đổi biểu
tượng cho đối tượng hiển thị.
- Position and Size: thay đổi vị trí và kích
thước cho đối tượng.
- 3D Position and View: hiểu chỉnh vị trí
trong không gian và khung nhìn 3D.
- Perspective Angle: hiệu chỉnh góc phối
cảnh theo độ xa gần.
- Vanishing Point: hiệu chỉnh tọa độ của
điểm triệt tiêu.
- Color effect: chọn hiệu ứng màu sắc cho
đối tượng, bao gồm:Brightness, Tint,
Advanced và Alpha.
- 69 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH
biểu tượng này sẽ xuất hiện trong Library. Kích thước của một movie không bao
gồm toàn bộ các đối tượng trong Library, nó chỉ bao gồm các đối tượng được sử
dụng trong movie.
Để import một đối tượng từ bên ngoài vào Libray, ta chọn File > Import > Import
to Library. Sau đó, các đối tượng được chọn sẽ được đưa vào trong Library.
- 70 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH
- 71 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH
Blank Page
- 72 -
CHƯƠNG 4. TẠO HOẠT CẢNH
+ Onion Skin: cho phép hiển thị toàn bộ hình ảnh của đối tượng trên vùng Frame
được chọn. Sự hiển thị này bao gồm toàn bộ đối tượng.
- 74 -
CHƯƠNG 4. TẠO HOẠT CẢNH
Hình 67 – Onion Skin và Onion Skin Outlines kết hợp với Edit Multiple Frames
Một số chức năng khi làm việc với TimeLine
Khi làm việc với TimeLine, ta thường xuyên sử dụng đến hai phím tắt sau đây:
+ Phím F5: chèn Frame vào thanh TimeLine (tương ứng với Insert Frame). Nếu
vùng TimeLine trong thanh TimeLine đã được tạo Tween, thì nó sẽ tự động giãn
vùng Tween này (chèn thêm Frame vào trong vùng Frame đã tạo Tween, các
Frame mới tạo này cũng kế thừa Tween). Ne� u chưa tạ o Tween, thı̀ nó đơn thua� n
sao ché p toà n bộ cá c đo� i tượng trê n keyframe lie� n ngay trước vị trı́ củ a frame
được chè n. Khi thay đo� i cá c đo� i tượng củ a ba� t kı̀ mộ t frame nà o trong khoả ng nà y
thı̀ cá c cá c đo� i tượng trê n cá c frame khá c cũ ng sẽ được cậ p nhậ t theo.
+ Phím F6: chèn KeyFrame vào thanh TimeLine (tương ứng với Insert KeyFrame).
Frame cuối cùng khi chèn là một KeyFrame. Với KeyFrame này, ta có thể tạo điểm
chốt cho hành động trong một movie. Khi kết hợp với Tween, nó sẽ tạo một
chuyển động mềm mại cho movie của Flash. Đie� m khá c biệ t khi sử dụ ng
Keyframe so với frame thô ng thường là frame thô ng thường chı̉ đơn thua� n sao
ché p cá c đo� i tượng củ a keyframe trước đó đe� tạ o ra mộ t dã y cá c khung hı̀nh
gio� ng nhau. Trong khi đó , keyframe sẽ tạ o ra đie� m cho� t. Nó cũ ng sao ché p toà n bộ
cá c đo� i tượng củ a keyframe trước đó sang cá c frame lie� n ngay trước keyframe
tạ o ra đie� m cho� t. Nhưng khi ta thay đo� i đo� i tượng ở keyframe mới tạ o ra nà y, thı̀
cá c cá c đo� i tượng trê n cá c frame khá c khô ng thay đo� i.
Chúng ta có thể tham khảo ví dụ sau đây, để hiểu rõ hơn về hai phím tắt này.
Trong ví dụ này, chúng ta sẽ tạo một hình chữ nhật có nền trắng và viền đen
(Hình 68). Tại Frame thứ 5, bạn nhấp vào Frame này, nhấn phím F5. Sau đó, bạn
thay đổi độ lớn của viền (thuộc tính Stroke = 5) – xem Hình 69. Giờ bạn hãy kiểm
tra độ lớn của viền trên mọi Frame. Như bạn thấy, viền của tất cả hình chữ nhật
trên mọi Frame đều thay đổi thành 5.
- 75 -
CHƯƠNG 4. TẠO HOẠT CẢNH
Bây giờ, bạn hãy làm lạm lại ví dụ trên bằng cách thay phím F5 bằng phím F6. Bạn
sẽ thấy rằng thuộc tính Stroke sẽ không thay đổi trên mọi Frame, chỉ thay đổi duy
nhất ở KeyFrame cuối cùng (KeyFrame mà bạn hiệu chỉnh).
Hình 68 – Khởi tạo một hình thể trên KeyFrame đầu tiên.
- 76 -
CHƯƠNG 4. TẠO HOẠT CẢNH
- 77 -
CHƯƠNG 4. TẠO HOẠT CẢNH
Để thực hiện chức năng dán, bạn hãy chọn vị trí cần dán nhóm Frame đã copy
trên TimeLine. Sau đó, kích chuột phải và chọn Paste Frames.
- 78 -
CHƯƠNG 4. TẠO HOẠT CẢNH
Ta sẽ minh họa kĩ thuật “Frame by Frame”. Ví dụ sau đây sẽ minh họ a cá ch tạo
hiệu ứng động cho các kí tự trong từ “Flash”.
Bước 1. Sử dụng công cụ Text, tạo một dòng văn bản có nội dung là “Flash”.
Bước 2. Chọn công cụ Selection. Bấm vào dòng văn bản sau đó kích chuột phải và
chọn Break Apart.
Bước 3. Nhấp chọn Frame thứ hai trong TimeLine. Nhấp phím F6. Sau đó bấm
chọn kí tự đầu tiên – kí tự F, và dịch chuyển nó lên trên so với các kí tự còn lại hoặc
thay đổi màu sắc của nó.
- 79 -
CHƯƠNG 4. TẠO HOẠT CẢNH
- 80 -
CHƯƠNG 4. TẠO HOẠT CẢNH
đóng chức năng là KeyFrame mở đầu của KeyFrame kết thúc sau. Nghĩa là mỗi
lần bạn nhấp F6, bạn đã tạo ra thêm một khoảng đánh dấu KeyFrame để tạo
Classic Tween.
- 81 -
CHƯƠNG 4. TẠO HOẠT CẢNH
đánh dấu theo một chỉ số nào đó ở Frame đầu tiên đến vị trí được đánh dấu cùng
chỉ số trong Frame cuối cùng.
Các bước sử dụng Shape Tween để tạo hiệu ứng động
Trong ví dụ này, chúng ta sẽ tạo hiệu ứng biến đường thẳng thành đường cong.
Bạn không thể tạo được hiệu ứng này bằng các Tween còn lại. Đây cũng là một ví
dụ điển hình sử dụng Shape Tween.
- 82 -
CHƯƠNG 4. TẠO HOẠT CẢNH
Khi sử dụng Shape Tween, nó sẽ tự động tạo ra sự biến hình theo một thuật toán
được định sẵn. Nếu bạn muốn điều khiển sự biến hình này, Flash cũng cung cấp
cho bạn công cụ đó là Shape Hint.
Shape Hint là một điểm điều khiển khi sử dụng Shape Tween. Để sử dụng chức
năng này, bạn cần tạo một Shape Tween cho một đối tượng, sau đó vào menu
Modify > Shape > Add Shape Hint (phím tắt là Ctrl+Shift+H). Shape Hint sẽ xuất
hiện theo cặp: một điểm ở Frame đầu tiên trên TimeLine của Tween và một điểm
ở Frame cuối cùng. Các Shape Hint này được đánh chỉ số là a, b, c…. Bạn hãy quan
sát hai hình vẽ sau đây
Hình 76 – Các cặp Shape Hint ở Frame đầu (bên trái) và Frame cuối (bên phải)
Khi sử dụng Shape Hint, các điểm cùng cặp (cùng chỉ số) sẽ tạo ra sự biến hình
tương ứng, nhưng luôn đảm bảo điểm cùng cặp của Frame thứ đầu tiên sẽ chuyển
thành điểm cùng cặp của Frame cuối cùng (điểm a ở hình bên trái sẽ biến thành
điểm a ở hình bên phải, tương tự điểm b và c).
Bằng cách bổ sung các Shape Hint này, bạn có thể điều khiển chuyển động của đối
tượng.
Để gỡ bỏ một Shape Hint, bạn chỉ việc chọn nó, kích chuột phải và chọn Remove
Hint.
- 83 -
CHƯƠNG 4. TẠO HOẠT CẢNH
- 84 -
CHƯƠNG 4. TẠO HOẠT CẢNH
- 85 -
CHƯƠNG 4. TẠO HOẠT CẢNH
Flash CS5 cung cấp sẵn cho ta các hiệu ứng chuyển động có sẵn trong vùng chức
năng Motion Presets. Để sử dụng chức năng này, ta vào Windows > Motion
Presets.
Vùng chức năng Motion Presets này cung cấp cho chúng ta rất nhiều hiệu ứng làm
sẵn. Khi sử dụng các hiệu ứng trong vùng chức năng này, các đối tượng của bạn
không cần phải chuyển đổi sang biểu tượng. Bạn có thể thao tác trực tiếp trên các
đối tượng. Dĩ nhiên, bạn cũng có thể áp dụng các hiệu ứng này cho các biểu tượng
như Graphic, Button hay MovieClip.
Để minh họa cho vùng chức năng này, ta sẽ cùng nhau xây dựng một vài hiệu ứng
hoạt hình sau đây:
Hiệu ứng quả bóng chuyển động: bạn hãy tạo một khối cầu dạng 3D như trên
hình vẽ. Sau đó, bạn hãy bấm chọn đối tượng, bấm tiếp vào khung Motion Presets
và chọn lựa hiệu ứng chuyển động tương ứng.
- 86 -
CHƯƠNG 4. TẠO HOẠT CẢNH
đây là dấu hiệu của Motion Tween). Nếu bạn quan sát trong thư viện Library, bạn
cũng sẽ thấy rằng một movieClip mới đã được tạo ra. Điều này có nghĩa Flash
CS5+ đã làm sẵn cho bạn từ A-Z.
- 87 -
CHƯƠNG 4. TẠO HOẠT CẢNH
Bạn hãy nhập một đoạn nội dung văn bản, sau đó chọn hiệu ứng text-scroll-3D
trong vùng chức năng Motion Presets. Nhấp Apply.
Cuối cùng, bạn hãy nhấn tổ hợp Ctrl+Enter để kiểm tra.
Bài tập đề nghị: Hãy sử dụng kĩ thuật Tween kết hợp với các công cụ tạo hiệu
ứng 3D để tạo dựng các hiệu ứng như trong Motion Presets cho hai hiệu ứng nêu
trên:
a) Hiệu ứng quả bóng di chuyển trong không gian.
b) Chữ chạy 3D.
- Bước 1. Bạn hãy sử dụng công cụ Pencil hoặc Brush để tạo hình một chú rắn.
- Bước 2. Bấm chọn công cụ Bone, sau đó vẽ các đường khớp nối như trong hình
minh họa.
- Bước 3. Hãy sử dụng công cụ Selection để kiểm tra các mối nối. Để tạo hiệu ứng
động, bạn hãy nhấp chọn vào một Frame nào đó (ví dụ Frame 20), nhấn phím F6.
Cơ chế làm việc tự động của công cụ Bone sẽ giúp tạo ra chuyển động nếu bạn hiệu
chỉnh độ cong của đối tượng tại Frame này nhờ vào các khớp nối. Bạn hoàn toàn
không cần sử dụng đến kĩ thuật Tween.
- 88 -
CHƯƠNG 4. TẠO HOẠT CẢNH
- Bước 1. Bạn hãy tạo ba khối hình chữ nhật (tượng trưng cho các phần của cần
cẩu) và sau đó convert chúng thành các đối tượng Graphic.
- Bước 2. Bấm chọn công cụ Bone, sau đó vẽ các đường khớp nối như trong hình
minh họa.
- Bước 3. Hãy sử dụng công cụ Selection để kiểm tra các mối nối. Chọn Frame 20,
nhấn phím F6, sau đó thay đổi hình dạng của cần cẩu bằng cách điều chỉnh các mối
nối.
- Bước 4. Nhấn tổ hợp Ctrl+Enter để kiểm tra.
- 89 -
CHƯƠNG 4. TẠO HOẠT CẢNH
Hình 84 – Bảng thuộc tính của mối nối tạo bởi công cụ Bone
- 90 -
CHƯƠNG 4. TẠO HOẠT CẢNH
- Location: Position X và Y (tọa độ của thanh nối), Length (độ dài của thanh nối),
Angle (góc nghiêng của thanh nối), Speech (tốc độ xoay của thanh nối).
- Joint Rotation: cho phép hoặc không cho phép thanh nối có thể xoay – tương
ứng với Enable được chọn hay không được chọn.
- Rotation Constrain: cho phép mối nối gốc của thanh nối dịch chuyển trong vùng
từ Min đến Max.
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).
- 91 -
CHƯƠNG 4. TẠO HOẠT CẢNH
công cụ Bind, bấm chọn các nút điều khiển này và kéo thả vào vị trí thanh nối
khác (thanh nối mà các điểm này phụ thuộc vào).
• Flower: hoàn toàn tương tự nhưng nó tương ứng với biểu tượng hoa. Nếu
bạn muốn thay đổi màu hoa, bạn nhấp vào biểu tượng Color tương ứng với
Flower. Nếu muốn sử dụng hình mặc định, bạn bấm chọn Default Shape.
• Advanced Option: Branch Angle (góc xoay của các cành nho), Color (màu của
cành nho), Pattern Scale (kéo giãn mẫu cành nho) và Segment Length (độ dài
của các cành nho).
- 92 -
CHƯƠNG 4. TẠO HOẠT CẢNH
• Animate Pattern: xây dựng một nhóm (go� m cà nh, là và hoa) lên từng Frame
mộ t. Chức năng này giúp tạo hiệu ứng động. Bạn có thể hiệu chỉnh tốc độ nhờ
vào Frame Step.
- 93 -
CHƯƠNG 4. TẠO HOẠT CẢNH
- 94 -
CHƯƠNG 4. TẠO HOẠT CẢNH
Với hiệu ứng này, các đối tượng sẽ được phun theo hiệu ứng 3D (tạ o tọ a độ nga� u
nhiê n trong khô ng gian 3 chie� u…). Để thay đổi các đối tượng, bạn chỉ việc nhấp
vào nút Edit, và chọn một đối tượng khác để thay thế. Các đối tượng để thay thế
phải là các biểu tượng của Flash (MovieClip, Button hoặc Graphic). Các tính năng
trong mục Drawing Effect này hoàn toàn tương tự trong hiệu ứng Vine và Grid.
Trong mục Advanced Options có các tùy chọn sau đây:
• Max objects: số lượng đối tượng được tạo cực đại trong mỗi lần phun.
• Spray area: vùng được phun (tính theo pixel).
• Perspective: cho phép tạo hiệu ứng phối cảnh hay không.
• Distance scale: độ kéo giãn theo khoảng cách (độ phóng to – zoom).
• Random scale range: Tỉ lệ kéo giãn ngẫu nhiên (bao nhiêu trong số các biểu
tượng đó chịu tác động của độ kéo giãn ngẫu nhiên).
• Random rotation range: tạo các góc quay ngẫu nhiên cho các biểu tượng.
- 95 -
CHƯƠNG 4. TẠO HOẠT CẢNH
skyscraper 4. Nếu bạn muốn tạo các mẫu nhà ngẫu nhiên, bạn có thể chọn
Radom Building.
• Building size: kích thước (theo chiều ngang) của tòa nhà.
Khi xây dựng các tòa nhà, bạn cần lưu ý: sau khi chọn công cụ Deco và chọn mẫu
nhà, bạn hãy nhấp chuột và kéo dọc theo hướng lên phía trên. Nếu độ cao của tòa
nhà đã phù hợp, bạn thả chuột.
Với hiệu ứng này bạn có thể dễ dàng tạo dựng các ngôi nhà cao tầng. Bạn lưu ý
rằng, các ngôi nhà cao tầng này được tạo bằng cách lắp ghép các phần lại với nhau
để tạo nên một tòa nhà hoàn chỉnh. Nếu bạn muốn tạo hiệu ứng cho một đối
tượng ngôi nhà hoàn chỉnh, bạn cần nhóm các phần của ngôi nhà thành một đối
tượng.
Hiệu ứng Decorated Brush
Với công cụ Decorated Brush, bạn có thể tạo các đường viền nghệ thuật theo các
mẫu được cung cấp sẵn.
- 96 -
CHƯƠNG 4. TẠO HOẠT CẢNH
Hiệu ứng Fire Animation sẽ tạo ra một ngọn lửa cháy sáng. Nó rất hữu dụng trong
các tác vụ cần tạo dựng ngọn lửa.
Đối với hiệu ứng này, mục Advanced Options có các tùy chọn sau:
• Fire size: kích thước ngọn lửa.
• Fire speech: tốc độ cháy của lửa.
• Fire duration: hiệu ứng động của lửa sẽ diễn ra trong bao nhiêu frame. Bạn
sẽ thấy đó chính là số keyframe hiển thị trên thanh TimeLine. Nhưng điều
này chỉ đúng trong trường hợp tùy chọn End Animation không được chọn.
• End Animation: ngọn lửa tàn dần (nếu được chọn), hoặc diễn tiến mãi mãi
(nếu không được chọn).
• Flame color: màu phía rìa ngoài của ngọn lửa.
• Flame core color: màu của lõi ngọn lửa.
• Fire spark: số ngọn lửa.
- 97 -
CHƯƠNG 4. TẠO HOẠT CẢNH
Hiệu ứng này tương đối đơn giản. Nó không có nhiều ứng dụng trong các dự án
thiết kế phim hoạt hình.
- 98 -
CHƯƠNG 4. TẠO HOẠT CẢNH
- 99 -
CHƯƠNG 4. TẠO HOẠT CẢNH
Hiệu ứng này tạo một chùm hạt được phóng ra từ một nguồn phát. Bạn sẽ thấy nó
cũng rất hữu ích trong nhiều tác vụ: phun bong bóng nước, phun các hạt bụi….
- 100 -
CHƯƠNG 4. TẠO HOẠT CẢNH
- 101 -
CHƯƠNG 4. TẠO HOẠT CẢNH
- 102 -
CHƯƠNG 4. TẠO HOẠT CẢNH
- Bước 1. Trên Layer 1, bạn hãy một hình bình hành (sử dụng công cụ hình chữ
nhật và công cụ Free Transform) để tượng trưng cho mặt phẳng và trên Layer 2
bạn hãy tạo một hệ tọa độ Descartes 3 chiều như hình minh họa.
- Bước 2. Chọn hình bình hành, kích chuột phải và chọn Create Motion Tween Sau
đó, bấm chọn công cụ 3D Translation. Bạn có thể sử dụng công cụ này để di chuyển
mặt phẳng theo các chiều x (trục ngang), y (trục đứng) và z (điểm chấm trung
tâm).
- Bước 3. Để đảm bảo rằng trục tọa độ mà ta tạo tồn tại song song với các layer
của mặt phẳng, ta cần chọn Frame cuối cùng trên TimeLine mặt phẳng của Layer
này và nhấn phím F5.
- Bước 4. Nhấn tổ hợp Ctrl+Enter để kiểm tra kết quả.
- 103 -
CHƯƠNG 4. TẠO HOẠT CẢNH
Bạn thao tác hoàn toàn tương tự ví dụ sau trên. Nhưng ở đây, mặt phẳng sẽ xoay
chuyển 3D trong không gian. Để làm được điều này, chúng ta sẽ thao tác theo các
bước sau đây:
- Bước 1. Trên Layer 1, bạn hãy một hình bình hành (sử dụng công cụ hình chữ
nhật và công cụ Free Transform) để tượng trưng cho mặt phẳng và trên Layer 2
bạn hãy tạo một hệ tọa độ Descartes 3 chiều như hình minh họa.
- Bước 2. Chọn hình bình hành, kích chuột phải và chọn Create Motion Tween Sau
đó, bấm chọn công cụ 3D Rotation. Bạn có thể sử dụng công cụ này để xoay chuyển
mặt phẳng theo các chiều x (trục ngang), y (trục đứng) và z (vòng tròn bên trong) .
- 104 -
CHƯƠNG 4. TẠO HOẠT CẢNH
- 105 -
CHƯƠNG 4. TẠO HOẠT CẢNH
Blank Page
- 106 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
AS, đe� in ra mộ t câ u thô ng bá o, ta sử dụ ng hà m trace. Hà m trace tương tự hà m
printf củ a C/C++.
- 108 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
giá trị của int là -231 đến 231-1 và giá trị của uint là 0…232-1. Bạn lưu ý rằng, trong
các kiểu dữ liệu, thì chỉ có kiểu số nguyên có chữ cái đầu tiên viết thường (int chứ
khô ng phả i là Int).
b. Kiểu số thực
Số thực dấu chấm động theo chuẩn IEEE-754. Số thực trong AS chiếm 32 bit. Từ
khóa khai báo là Number. Bạn lưu ý Number viết hoa chữ cái đầu tiên.
c. Kiểu Boolean
Kiểu Boolean trong AS có hai giá trị là true và false. Bạn lưu ý Boolean viết hoa
chữ cái đầu tiên, true và false viết thường mọi chữ cái.
d. Kiểu xâu String
Xâu kí tự được đánh dấu từ 0. Phần tử cuối cùng trong xâu có chỉ số là xâu.lengh-
1. Kiểu xâu được khai báo nhờ từ khóa String. Bạn cũng cần lưu ý rằng String viết
hoa chữ cái đầu tiên.
e. Kiểu mảng Array
Việc đánh dấu trong Array hoàn toàn tương tự String. Kiểu Array cũng viết hoa
chữ cái đầu tiên.
f. Kiểu đối tượng Object
Tương tự kiểu Struct của C, đo� ng thời cũ ng gio� ng kie� u enum trong Java. Nhưng
mềm dẻo hơn rất nhiều. Chúng ta sẽ thấy rõ điều này qua các chương trình trong
giáo trình này.
Để xử lý các dữ liệu liên quan đến các kiểu dữ liệu nguyên thủy này ta phải làm
việc với các lớp đối tượng tương ứng: kiểu int và uint với lớp int và uint, kiểu
Number với lớp Number, kiểu String với lớp String, kiểu Array với lớp Array và
kiểu đối tượng Object. Chi tiết về các phương thức xử lý của các lớp này ta sẽ
thảo luận sau khi tìm hiểu về lớp trong AS.
- 109 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
Bạn có thể khởi tạo giá trị cho biến tại thời điểm khai báo biến hoặc khai báo biến
và khởi tạo giá trị cho biến đó sau. Đo� i với kie� u Array (kie� u mả ng) bạ n ca� n lưu ý :
bạ n phả i sử dụ ng toá n tử new đe� ca� p phá t bộ nhớ cho bie� n mả ng. Bạ n có the� ca� p
phá t so� lượng ô nhớ – new Array(so� lượng ô nhớ) hoặ c khai bá o theo dạ ng giá trị
ha� ng – new Array(cá c pha� n tử).
b. Hằng: có giá trị không thay đổi. Trong AS, để khai báo hằng ta thay từ khóa var
trong khai báo biến bằng từ khóa const. Bạn lưu ý rằng khi khai báo hằng bạn cần
phải bổ sung giá trị cho nó. Nghĩa là cú pháp khai báo hằng phải tuân theo quy tắc
sau
const tên_hằng:Kiểu_Dữ_Liệu = giá_trị_khởi_tạo;
Giá trị khởi tạo cho ha� ng không giống với khởi tạo cho biến. Đo� i với bie� n thı̀ có
thể có hoặc không, đối với hằng là bắt buộc phải có.
Các bạn có thể quan sát các khai báo hằng sau đây
const a:int = 1;
const s:String = “abc”;
Remarks: Biến và hằng có một điểm khác biệt lớn: giá trị của biến có thể thay đổi
tùy vào ý kiến chủ quan của người lập trình; giá trị của hằng thì không được phép
thay đổi. Giá trị của hằng quy định khi khai báo thế nào thì nó giữ nguyên như thế
đó. Nếu cố tình thay đổi giá trị của hằng thì sẽ nhận được thông báo lỗi từ trình
biên dịch của Flash.
- 110 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 111 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
Đie� u nà y cũ ng khá de� hie� u. Bởi ne� u thực hiệ n phé p chia 3/2 thı̀ theo mặ c định giá
trị nhậ n được là 1.5. Ne� u giá trị nà y gá n cho mộ t bie� n thực thı̀ ke� t quả khô ng có gı̀
thay đo� i. Tuy nhiê n, ne� u gá n cho mộ t so� nguyê n thı̀ có sự thay đo� i lớn. Sở dı̃ như
vậ y là vı̀ bie� n so� nguyê n khô ng ho� trợ da� u cha� m độ ng. Do đó , những pha� n na� m
sau da� u cha� m độ ng sẽ được ca� t bỏ .
Toán tử logic
Toán tử Phép toán a b Kết quả
Toán tử phủ Phép toán true - false
định ! một ngôi !a false - true
true true true
Phép toán hai
true false false
ngôi
Toán tử và && false true false
a&&b
false false false
true true true
Phép toán hai
true false true
Toán tử hoặc ngôi
false true true
|| a||b
false false false
Quy tăc ghi nhớ: Phép toán và && nhận giá trị đúng chỉ khi cả hai cùng đúng. Phép
toán hoặc || chỉ nhận giá trị sai khi cả hai cùng sai.
- 112 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
Các toán tử và bit, hoặ c bit, hoặc loại bit và phủ định bit được tính như sau: ta
chuyển đổi các số thập phân sang nhị phân tương ứng, sau đó sử dụng các phép
toán tương ứng cho từng bit theo vị trí của nó. Ví dụ như ở trên 210=102, 310=112
và ta sẽ thực hiện các phép toán tương ứng với từng bit. Bit thứ nhất (từ phải
sang trái) là 0&1=1, bit thứ hai 1&1=1, như vậy kết quả của phép toán 2&3 là 102
hay 210. Tương tự cho các phép toán còn lại. Ở đây bạn lưu ý rằng phép toán
tuyển loại sẽ có chân trị là 1 nếu hai bit tương ứng là khác nhau, nếu giống nhau
thì tương ứng là 0(1^1=0^0=0, 1^0=0^1=1).
Các toán tử << và >> sẽ được tính như sau: a<<b=a*2b và a>>b=a/2b.
Toán tử gán hợp nhất
Khi muốn thay đổi giá trị của một biến, chúng ta có thể sử dụng cách viết
thông thường, tuy nhiên AS cũng hỗ trợ các toán tử viết tắt.
Toán tử Ví dụ Ý nghĩa Phạm vi
+= a+=b a=a+b Phép toán số học
-= a-=b a=a-b Phép toán số học
*= a*=b a=a*b Phép toán số học
/= a/=b a=a/b Phép toán số học
%= a%=b a=a%b Phép toán số học
&= a&=b a=a&b Phép toán bit
|= a|=b a=a|b Phép toán bit
^= a^=b a=a^b Phép toán bit
>>= a>>=b a=a>>b Phép toán bit
<<= a<<=b a=a<<b Phép toán bit
Toán tử tăng và giảm
Một cách viết thu gọn hơn nữa, đó là sử dụng toán tử tăng và giảm. Nếu
trong biểu thức a+=b, với b = 1 thì ta có thể viết thành a++. Tương tự, nếu a-=b, b
= 1 thì ta có thể viết a--.
Ca� n lưu ý rằng, toán tử này có mộ t đie� m đặ c biệ t. Nó có thể nằm trước hoặc
nằm sau toán hạng. Có nghĩa là có thể vie� t a++ hoặc ++a (tương ứng a-- hoặc --a).
Phép toán Ý nghĩa
a++; Thực hiện phép toán trước, sau đó mới thực hiện toán tử
++a; Thực hiện toán tử trước, sau đó mới thực hiện phép toán
a--; Tương tự a++;
--a; Tương tự ++a;
- 113 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
var b:int = 1; a = 1, b = 1
Toán tử so sánh
Để thực hiện việc so sánh giá trị của hai biến, biểu thức; ta có thể sử dụng
toán tử so sánh. Giá trị của phép toán so sánh trả về kiểu bool.
Giá trị biểu thức “a Toán tử b”
Toán tử Tên gọi
Đúng Sai
== Bằng Nếu a bằng b Nếu a khác b
!= Khác Nếu a khác b Nếu a bằng b
> Lớn hơn Nếu a lớn hơn b Nếu a nhỏ hơn hoặc
bằng b
< Bé hơn Nếu a nhỏ hơn b Nếu a lớn hơn hoặc
bằng b
>= Lớn hơn hoặc bằng Nếu a lớn hơn hoặc Nếu a nhỏ hơn b
bằng b
<= Bé hơn hoặc bằng Nếu a nhỏ hơn hoặc Nếu a lớn hơn b
bằng b
Bạn hãy cẩn thận khi sử dụng toán tử so sánh bằng. Hãy chú ý rằng toán tử
so sánh bằng là ==, khác với toán tử gán =.
Toán tử điều kiện
Toán tử điều kiện có dạng cú pháp như sau:
điều_kiện?kết_quả_1:kết_quả_2;
Toá n tử đie� u kiệ n trả về giá trị kết_quả_1 nếu điều_kiện là đúng, ngược lại, nếu
điều_kiện là sai, thì trả về giá trị kết_quả_2.
Ví dụ Kết quả
- 114 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
var a:int = 1; 2
var b:int = 2;
var c:int;
c = (a>b)?a:b;
trace(c);
- 115 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
ra sai sót. Trong bảng sau đây, chúng tôi xin đưa ra thứ tự ưu tiên của các toán tử
trong lập trình AS
Mức ưu tiên Toán tử Độ ưu tiên cùng loại
1 :: Trái-sang-phải
2 () [] . -> ++ -- (hậu tố) dynamic_cast Trái-sang-phải
static_cast reinterpret_cast const_cast
typeid
3 ++ -- (tiền tố) ~ ! sizeof new delete Phải-sang-trái
*&
+ - (dấu dương âm)
4 (type) (chuyển đổi kiểu) Phải-sang-trái
5 .* ->* Trái-sang-phải
6 */% Trái-sang-phải
7 + - (phép toán công, trừ) Trái-sang-phải
8 << >> Trái-sang-phải
9 < > <= >= Trái-sang-phải
10 == != Trái-sang-phải
11 & Trái-sang-phải
12 ^ Trái-sang-phải
13 | Trái-sang-phải
14 && Trái-sang-phải
15 || Trái-sang-phải
16 ?: Phải-sang-trái
17 = *= /= %= += -= >>= <<= &= ^= |= Phải-sang-trái
18 , Trái-sang-phải
Các toán tử được thực hiện theo mức ưu tiên từ trên xuống. Nếu các toán tử
cùng mức, nó sẽ được thực hiện theo độ ưu tiên cùng loại.
- 116 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
hoặ c
var mang:Array = [cá c pha� n tử];
Cá ch khai bá o 1 thường á p dụ ng khi ta chưa bie� t chı́nh xá c giá trị củ a cá c pha� n tử
trong mả ng. Trong khi cá ch khai bá o 2 được á p dụ ng ne� u giá trị củ a cá c pha� n tử
đã được bie� t. Trong cá ch khai bá o mộ t, tham so� kı́ch thước có the� khô ng to� n tạ i.
Kı́ch thước mả ng có the� thay đo� i. Nó có the� tă ng lê n hoặ c giả m xuo� ng so với kı́ch
thước được ca� p phá t ban đa� u.
Ví dụ: Khai báo mảng
var mang:Array = new Array(3);
var mang2:Array = new Array(2, 4, 6);
var mang1:Array = [1, 3, 5, 6];
Bạ n cũ ng ca� n lưu ý ra� ng, cá ch khai bá o thứ 2 có the� á p dụ ng cho mả ng ha� ng (có
nghı̃a là có the� bo� sung const). Trong khi đó , cá ch khai bá o thứ nha� t thı̀ khô ng.
Mặ c dù trı̀nh biê n dịch khô ng thô ng bá o lo� i, nhưng ne� u quy định nó là mả ng ha� ng,
trong khi chı̉ mới ca� p phá t bộ nhớ cho cá c pha� n tử củ a nó mà chưa a� n định giá trị
củ a cá c pha� n tử thı̀ mả ng nà y sẽ khô ng the� sử dụ ng được (khô ng the� thay đo� i giá
trị cá c pha� n tử ve� sau).
Truy cập vào các phần tử của mảng.
Mả ng được truy cậ p theo chı̉ so� . Chı̉ so� củ a mả ng được đặ t trong cặ p da� u mó c
vuô ng [chı̉ so� ].
Ví dụ: Truy cập các phần tử của mảng
Ví dụ Kết quả
- 117 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 118 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 119 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 120 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
Hướng dẫn: Ne� u thá ng là 2 thı̀ có 28 hoặ c 29 ngà y. Ne� u thá ng là 1, 3, 5, 7, 8, 10, 12
thı̀ có 31 ngà y. Ne� u thá ng 4, 6, 9, 11 thı̀ có 30 ngà y
2. Hã y vie� t đoạ n chương trı̀nh cho phé p kie� m tra mộ t kı́ tự cho trước là quo� c gia
thuộ c châ u lụ c nà o. Cá c kı́ tự bao go� m: a – Anh, m – Mỹ , v – Việ t nam, n – Nam phi.
Trong trường hợp nhậ p và o mộ t kı́ tự khá c a, m, v, n thı̀ đưa ra thô ng bá o là
“Khô ng bie� t”.
- 121 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
Giá trị củ a bie� n i sẽ được lặ p từ 1 đe� n 100 với bước nhả y là 1 (vı̀ i++). Sau mo� i
vò ng lặ p, giá trị củ a i sẽ được cộ ng do� n và o bie� n S. Câ u lệ nh trace sẽ in ra giá trị
củ a bie� n S.
Ví dụ: Viết đoạn chương trình tính tổng các số chẵn từ 1 đến 100
Ví dụ Kết quả
- 122 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
Lệnh;
}
Giải thích: Trong vò ng lặ p for…in nà y, chı̉ so� index sẽ được vé t trong tậ p chı̉ so�
củ a Array hoặ c Object. Tương ứng với chı̉ so� nà y, ta có the� thu được giá trị củ a
cá c pha� n tử tương ứng.
Ví dụ: Ví dụ sử dụng for…in kết hợp với Array
Ví dụ Kết quả
Bạ n có the� nhậ n tha� y trong trường hợp nà y, chı̉ so� tương ứng với cá c pha� n tử là
‘b’, ‘g’ và ‘u’. Ta khô ng the� dù ng vò ng lặ p for trong trường hợp nà y. Khi sử dụ ng
for…in, bie� n i sẽ nhậ n cá c giá trị tương ứng với chı̉ so� là ‘b’, ‘g’ và ‘u’. Tương ứng
với cá c chı̉ so� nà y, ta thu được giá trị tương ứng là “Nam”, “Nữ” và “Khô ng bie� t”.
Lưu ý , kie� u Object được sử dụ ng trong vı́ dụ nà y tương tự như kie� u enum trong
Java.
- 123 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
Lệnh;
}
Ví dụ: Ví dụ sử dụng for each…in kết hợp với Array
Ví dụ Kết quả
Khác với câu lệnh for…in, biến item trong câu lệnh for each…in sẽ nhậ n giá trị củ a
cá c phần tử của mảng chứ không phải là chỉ số như trong trường hợp trên. Nó
cũng được khai báo trực tiếp trong vòng lặp for.
Ví dụ: Ví dụ sử dụng for each…in kết hợp với Object
Ví dụ Kết quả
Bạ n có the� nhậ n tha� y, ta hoà n toà n khô ng ca� n quan tâ m đe� n chı̉ so� nhưng va� n
nhậ n được dữ liệ u củ a cá c pha� n tử củ a Array hoặ c Object.
Bài tập.
Cho mộ t mả ng cá c so� nguyê n với giá trị cho trước. Hã y thực hiệ n cá c yê u ca� u sau
đâ y ba� ng cá ch sử dụ ng 3 vò ng lặ p for, for…in, for each…in ở trê n.
a) Liệt kê các phần tử là số chẵn của mảng.
b) Tính tổng các phần tử chia hết cho 3 và 5.
c) Sắp xếp lại thứ tự của mảng.
- 124 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
Ví dụ Kết quả
var i:int = 3; 3
while (i>0){ 2
trace(i); 1
i--;
}
Trong vı́ dụ nà y, bie� u thức i>0 là đú ng nê n câ u lệ nh trace và i-- sẽ được thực hiệ n.
Giá trị củ a i sẽ la� n lượt được in ra. Đo� ng thời giá trị củ a i sẽ giả m xuo� ng. Đe� n khi
bie� n i nhậ n giá trị 0 thı̀ bie� u thức i>0 khô ng cò n đú ng và vò ng lặ p ke� t thức.
Ví dụ: Tính tổng các phần tử có giá trị dương của mảng.
Ví dụ Kết quả
var i:int = 0;
while(i<100)
{
mang.push(Math.round(10*(Math.random()-0.5)));
i++;
}
var S:int = 0;
i=0;
while(i<100)
{
if(mang[i]>0)
S+=mang[i];
i++;
}
trace(S);
Vı́ dụ nà y hoà n toà n tương tự như vı́ dụ tı́nh to� ng cá c pha� n tử có giá trị dương củ a
mả ng ba� ng cá ch sử dụ ng vò ng lặ p for ở trê n.
- 125 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
lệnh sẽ tiếp tục được thực hiện. Khác với lệnh while, đối với lệnh do…while thì
lệnh bên trong nó được thực hiện ít nhất một lần.
Cú pháp
do{
Lệnh;
} while(biểu_thức_điều_kiện);
Ví dụ: Viết đoạn chương trình in ra các số theo thứ tự giảm dần từ 3 đến 1.
Ví dụ Kết quả
var i:int = 3; 3
do{ 2
trace(i); 1
i--;
} while (i>0);
Trong đoạ n chương trı̀nh nà y, câ u lệ nh trace sẽ được thự hiệ n và giá trị củ a bie� n i
sẽ được in ra, bie� n i giả m xuo� ng 1 đơn vị, sau đó kie� m tra đie� u kiệ n i>0. Ne� u i >0
đú ng, thı̀ quay lạ i vò ng lặ p. Do đó , giá trị được in ra là 3, 2, 1.
Bài tập.
Hã y là m lạ i bà i tậ p trong pha� n câ u lệ nh for, for…in và for each…in ba� ng cá ch sử
dụ ng hai vò ng lặ p while và do…while.
- 126 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
var i:int = 0; 0
do{ 1
trace(i); 2
if (i>=5) break; 3
i++; 4
} while (true); 5
Trong vı́ dụ nà y, vò ng lặ p do…while khô ng có tı́nh dừng và nó sẽ lặ p mã i (do điều
kiện lặp là true). Vò ng lặ p nà y sẽ tie� n hà nh in ra giá trị củ a i sau đó tă ng giá trị i
lê n 1. Ne� u giá trị i vượt quá 5 thı̀ lệnh break được thực hiện và vò ng lặ p bị bỏ qua.
Trong trường hợp nà y, trace na� m trước việ c kie� m tra giá trị i>=5, nê n nó va� n in
ra giá trị 5. Ke� t quả thu được như trê n.
Lệnh return: trả về giá trị cho hàm (nếu return nằm trong hàm) và kết thúc
chương trình (nếu lệnh return nằm trong chương trình chính). Khi gặ p lệ nh
return, thı̀ ta� t cả cá c câ u lệ nh tie� p theo trong hà m (tức những lệ nh na� m trong
hà m nhưng na� m sau return) sẽ khô ng được thực hiệ n.
5.6. Hàm
AS là ngô n ngữ kịch bả n nê n va� n ho� trợ việ c khai bá o hà m ngoà i lớp. Hà m là mộ t
nhó m cá c câ u lệ nh được xác định ba� ng mộ t tê n gọ i và ta gọ i đó là tê n hà m. Việ c sử
dụ ng hà m sẽ giú p giả m tả i so� lượng lệ nh ne� u cá c lệ nh đó ca� n được vie� t lạ i nhie� u
la� n. Ne� u ta quy định cá c lệ nh nà y dưới mộ t tê n gọ i thı̀ ta chı̉ ca� n gọ i lạ i tê n gọ i
hà m nà y khi muo� n thực thi nhó m câ u lệ nh đó . Ngoà i ra, hà m cò n có cơ che� truye� n
tham so� , giú p cho chương trı̀nh trở nê n gọ n gà ng hơn. Ta có the� hie� u hà m trong
AS gio� ng với cá c hà m toá n họ c.
- 127 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
}
Ví dụ
Ví dụ Kết quả
- 128 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 129 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
function Add(...args):int{ 1
var sum:int = 0; 3
for (var i:int = 0; i<args.length;i++) 6
sum+=args[i];
return sum;
}
trace(Add(1));
trace(Add(1,2));
trace(Add(1,2,3));
Như bạ n tha� y trong vı́ dụ trê n, hà m tı́nh to� ng có so� lượng tham so� khô ng hạ n
định. Ta có the� gọ i bao nhiê u tham so� tù y ý . Giá trị trả ve� củ a hà m là to� ng cá c
tham so� đó .
- 130 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
Cũng tương tự C++, actionscript cũ ng ho� trợ con trỏ void. Con trỏ void có the�
dù ng đe� gá n cho mộ t đo� i tượng chưa xá c định kie� u dữ liệ u. Trong nhie� u tı̀nh
huo� ng thực te� , ta muo� n xâ y dựng cá c hà m nhưng chưa bie� t chı́nh xá c kie� u giá trị
củ a hà m hay củ a cá c tham so� là gı̀ hay ta muo� n xâ y dựng mộ t hà m to� ng quá t có
the� á p dụ ng cho nhie� u kie� u dữ liệ u khá c nhau, khi đó , ta có the� sử dụ ng con trỏ
void. Con trỏ void có nhie� u ứng dụ ng trong thực te� và nó là mộ t cá ch thức me� m
dẻ o đe� chuye� n đo� i kie� u dữ liệ u cho cá c đo� i tượng khi ca� n thie� t. Trong
actionscript, con trỏ void chı̉ đơn thua� n khai bá o với toá n tử *.
Ví dụ Kết quả
- 131 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 132 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 133 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
Tính thừa kế
AS là ngôn ngữ đơn thừa kế, nghĩa là một lớp chỉ có thể thừa kế từ một lớp cơ sở.
Để khai bá o tính thừa kế, AS cung cấp cho ta từ khóa extends.
Ví dụ sau đây sẽ minh họa cho tính thừa kế. Lớp Human có hai thuộc tính là tên
và tuổi. Lớp SinhVien kế thừa từ lớp Human này, nó bổ sung thêm thuộc tính ids.
Phương thức toString trong lớp SinhVien ghi chồng lên phương thức toString của
lớp cơ sở Human nhờ từ khóa override.
Ví dụ
//Lớp cơ sở Human
public class Human{
protected var ten:String;
protected var tuoi:uint;
public function toStrings():String{
- 134 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 135 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
}
//Lớp MeoDen thực thi hai giao diện Animal và Meo
public class MeoDen implements Animal, Meo{
public function MeoDen() {
trace("Tôi là Mèo đen.");
}
public function Go():void{
trace("Tôi đi !");
}
public function Eat():void{
trace("Tôi ăn !");
}
public function Sound():void{
trace("Tôi kêu !");
}
}
- 136 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
Với những dự án phức tạp, ta cần tổ chức các lớp theo các package. Đe� sử dụ ng
package, bạ n hãy tạo các thư mục với tên gọi khác nhau (tên của chúng cũng
chính là tên của package). Khi tạo lớp, bạn hãy đặt nó trong package với cú pháp
sau:
package Tên_Package{
//Khai báo lớp
}
Điều này sẽ giúp bạn quản lý tốt hơn các lớp của mình. Package hoàn toàn giống
namespace trong NET. Bạn cũng lưu ý rằng trong Action của Flash, bạn cần
import các lớp này vào để sử dụng nhờ từ khóa import.
import Tên_Package.Tên_Lớp;
Bạn hãy thử hoàn tất các ví dụ minh họ a ở trên ba� ng cá ch quả n lý theo package.
b. Đối tượng của lớp số nguyên int và uint
Tên hàm Chức năng
Hàm tạo int(Number) Hàm khởi tạo cho lớp int.
toExponential(Number) Trả về định dạng số dạng 3.1e+5. Ngoại lệ RangeError
toString() Trả về định dạng xâu của số
valueOf() Trả về giá trị nguyên thủy của đối tượng int.
- 137 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 138 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
function fl_fun(e:Event):void
{
…
}
Trong đó ,
a) Hà m fl_func là hà m thực thi khi sự kiệ n được phá t sinh.
b) Tham so� useCapture có khả nă ng nhậ n mộ t trong hai giá trị là true/false. Giá trị
nga� m định là false. Ne� u nhậ n giá trị true, thı̀ thực thi theo mô hı̀nh 1 (capture
phase), ngược lạ i nhậ n giá trị false thı̀ thực thi theo mô hı̀nh 2 (bubbling phase).
- 139 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 140 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 141 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
mới nha� t sẽ ho� trợ đa� y đủ cá c sự kiệ n la� ng nghe ở trê n. Đo� i với phiê n bả n Flash
Plugin cho trı̀nh duyệ t web, sẽ có nhie� u sự kiệ n la� ng nghe khô ng được ho� trợ.
Chú ng ta sẽ thả o luậ n mộ t vı́ dụ ve� sự kiệ n la� ng nghe là ENTER_FRAME. Sự kiệ n
nà y sẽ die� n tie� n khi frame hiệ n tạ i đang ở và o vù ng frame được trı̀nh chie� u (tức
nó sẽ die� n ra ngay sau khi phim được khởi tạ o cho đe� n khi nà o ke� t thú c trı̀nh
chie� u phim). Hie� n nhiê n nó sẽ die� n ra mã i trong trường hợp phim được lặ p lạ i vô
hạ n. Vı́ dụ ta sẽ tạ o ra mộ t quả bó ng mà u đen và cho nó di chuye� n liê n tụ c sang
phả i.
import flash.display.Shape;
import flash.events.Event;
addChild(sh);
stage.addEventListener(Event.ENTER_FRAME, fl_moveRight);
function fl_moveRight(e:Event):void
{
sh.x += 1;
}
Ta lưu ý ra� ng, ENTER_FRAME là sự kiệ n la� ng nghe có the� á p dụ ng cho nhie� u đo� i
tượng. Trong trường hợp nà y, ta có the� á p dụ ng cho stage hoặ c chı́nh đo� i tượng
sh. Ve� hiệ u quả , trong trường hợp nà y khô ng có sự khá c biệ t nà o vı̀ movie chı̉ có
mộ t frame duy nha� t nê n frame hiệ n tạ i luô n ở trong vù ng frame trı̀nh chie� u (củ a
stage cũ ng gio� ng như củ a đo� i tượng sh).
- 142 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
trace("Hello");
}
Cá ch xử lý sự kiệ n chuộ t hoà n toà n gio� ng như xử lý sự kiệ n ở mụ c 5.7.3. Sự kiệ n
chuộ t được quả n lý bởi lớp MouseEvent. Sự kiệ n chuộ t la� ng nghe (tham so� đa� u
tiê n trong phương thức addEventListener) có the� nhậ n mộ t trong cá c giá trị sau:
SỰ KIỆN CHUỘT LẮNG NGHE GIẢI THÍCH
CLICK : String = "click" Khi kı́ch đơn chuộ t trá i lê n đo� i tượng.
CONTEXT_MENU : String = Khi menu ngữ cả nh hiệ n ra (menu ngữ cả nh
"contextMenu" hiệ n ra sau khi ta kı́ch chuộ t phả i lê n đo� i
tượng).
DOUBLE_CLICK : String = Khi kı́ch đô i chuộ t trá i lê n đo� i tượng.
"doubleClick"
MIDDLE_CLICK : String = Khi kı́ch chuộ t giữa (con lă n) lê n đo� i tượng.
"middleClick"
MIDDLE_MOUSE_DOWN : String Khi chuộ t giữa (con lă n) được nha� n lê n đo� i
= "middleMouseDown" tượng.
MIDDLE_MOUSE_UP : String = Khi chuộ t giữa (con lă n) được thả ra khỏ i đo� i
"middleMouseUp" tượng.
MOUSE_DOWN : String = Khi chuộ t trá i được nha� n lê n đo� i tượng.
"mouseDown"
MOUSE_UP : String = "mouseUp" Khi chuộ t trá i được thả ra khỏ i đo� i tượng.
MOUSE_WHEEL : String = Khi chuộ t giữa (con lă n) lă n trê n đo� i tượng.
"mouseWheel"
- 143 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
"rightClick"
RIGHT_MOUSE_UP : String = Khi chuộ t phả i được thả ra khỏ i đo� i tượng.
"rightMouseUp"
stage.addEventListener(KeyboardEvent.KEY_UP, func);
function func(e:KeyboardEvent):void{
if(e.keyCode==Keyboard.ENTER)
trace("Hello ");
}
Trong vı́ dụ trê n, khi ta nha� n phı́m Enter thı̀ sẽ in ra dò ng thô ng bá o “Hello”. Sự
kiện của phím KeyboardEvent chỉ bao gồm KEY_UP (khi phı́m được nhả ra) và
KEY_DOWN (khi phı́m được a� n xuo� ng). Trong lớp KeyboardEvent có cá c thuộ c
tı́nh sau:
THUỘC TÍNH GIẢI THÍCH
altKey:Boolean Phı́m a� n là phı́m Alt
ctrlKey:Boolean Phı́m a� n là phı́m Ctrl
- 144 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 145 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 146 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 147 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 148 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
function update(e:TimerEvent):void
{
…
}
Sự kiệ n la� ng nghe củ a Timer trong trường hợp nà y là TIMER. Hà nh độ ng sẽ cậ p
nhậ t tương ứng với hà m update.
Bước 2.Triệ u gọ i phương thức start củ a đo� i tượng myTimer: myTimer.start().
Khi ca� n cha� m dứt hà nh độ ng củ a Timer, ta triệ u gọ i phương thức stop:
myTimer.stop().
Sau đâ y, ta sẽ tham khả o vı́ dụ minh họ a cho việ c sử dụ ng Timer đe� cậ p nhậ t thời
gian. Trong trường hợp nà y, ta có 2 nú t lệ nh: nú t Start đe� cho đo� ng ho� chạ y, nú t
Stop đe� dừng lạ i. Thời gian sẽ được cậ p nhậ t lê n đo� i tượng Label. Đo� i với cá c nú t
lệ nh, ta sử dụ ng Button. Cá c đo� i tượng nà y na� m trong vù ng quả n lý Component
(phı́m ta� t Ctrl+F7). Cá c đo� i tượng nà y được bo� trı́ trê n stage như hı̀nh minh họ a
bê n dưới:
Ơ� mụ c Instace Name (trong cửa so� Properties) củ a cá c đo� i tượng Label, Button
Start và Stop ta la� n lượt đặ t tê n cho chú ng là : lbDongHo, btStart, btStop. La� n lượt
chọ n cá c đo� i tượng btStart và btStop, chọ n cửa so� Code Snippets, chọ n nhó m
Event Handlers và kı́ch hoạ t chức nă ng Mouse Click Event. Trong chức nă ng củ a
btStart, ta nhậ p lệ nh myTimer.start() và trong chức nă ng củ a btStop, ta nhậ p lệ nh
myTimer.stop(). Đe� la� y thời gian, ta sử dụ ng lớp Date cù ng với cá c phương thức
getHours – la� y giờ, getMinutes – la� y phú t, getSeconds – la� y giâ y. Toà n bộ mã
nguo� n củ a vı́ dụ được cho ở bê n dưới:
import flash.utils.Timer;
import flash.events.TimerEvent;
- 149 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
function update(e:TimerEvent):void
{
var t:Date = new Date();
lbDongHo.text = t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds();
}
btStart.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
function fl_MouseClickHandler(event:MouseEvent):void
{
myTimer.start();
}
btStop.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2);
function fl_MouseClickHandler_2(event:MouseEvent):void
{
myTimer.stop();
}
Ca� n lưu ý , trong hà m khởi tạ o củ a Timer, ta sử dụ ng mộ t tham so� . Đie� u nà y có
nghı̃a là tham so� thứ hai được hie� u nga� m định – tức là 0.
5.7.7. Làm việc với các thành phần hỗ trợ giao diện người dùng GUI
Ke� từ khi Adobe phá t trie� n Flash theo hướng xâ y dựng ứng dụ ng (Desktop và
Web) và khô ng cò n đơn thua� n chı̉ phụ c vụ cho cô ng nghệ multimedia thı̀ họ đã
bo� sung cá c thư việ n ho� trợ giao diệ n người dù ng. Cá c thà nh pha� n nà y chủ ye� u
phụ c vụ cho cá c ứng dụ ng chạ y trê n AIR và RIA cho web. Cá c đo� i tượng cù ng với
cá c thuộ c tı́nh và phương thức củ a chú ng có the� tham khả o thê m trong mụ c trợ
giú p củ a Adobe. Trong trı̀nh soạ n thả o ActionScript, ta có the� tham khả o cá c
phương thức và thuộ c tı́nh củ a cá c lớp đo� i tượng ho� trợ GUI. Tuy nhiê n, sẽ khô ng
có thê m ba� t trı̀ ho� trợ giả i thı́ch nà o. Cá c thà nh pha� n nà y chủ ye� u na� m trong
package fl.controls. Trong phạ m vi giá o trı̀nh phụ c vụ cho cô ng nghệ giả i trı́ đa
phương tiệ n, chú ng tô i khô ng thả o luậ n chi tie� t ve� cá c thà nh pha� n nà y. Ne� u bạ n
muo� n tı̀m hie� u kı̃ hơn, bạ n có the� tham khả o thê m trong pha� n ho� trợ từ Adobe.
Hı̀nh minh họ a bê n dưới chı̉ ra cá c lớp đo� i tượng na� m trong package fl.controls
phụ c vụ cho việ c thie� t ke� giao diệ n người dù ng cho ứng dụ ng Desktop và Web
theo phong cá ch co� đie� n.
- 150 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 151 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
chuyển đổi các đối tượng của bạn thành các biểu tượng MovieClip hoặc Button.
Đối tượng Graphic không được hỗ trợ bởi actionscript.
Sau đó, bạn hãy kích chọn đối tượng. Trong bảng thuộc tính, bạn hãy nhập tên
của đối tượng thể hiện cần tạo ra vào mục <Instance Name>, sau đó nhấp Enter.
Giờ đây, đối tượng của bạn đã được khởi tạo và bạn có thể thao tác với nó bên
trong AS theo tên thể hiện mà bạn vừa cài đặt.
Hình 104 – Tạo một tên thể hiện cho đối tượng
Nếu bạn import một đối tượng từ bên ngoài vào trong thư viện Library, bạn cũng
có thể tạo một lớp chứa nó (tức là lớp để tạo ra đối tượng này).
Chúng ta sẽ xây dựng đoạn chương trình sau đây: Import một file âm thanh vào
trong Library. Khi bấm chuột vào nút Play thì nó sẽ chơi file âm thanh này.
- Trong Stage, bạn hãy tạo một nút Play (là biểu tượng Button) và cài đặt tên thể
hiện cho nó là btPlay.
- Thực hiện import file âm thanh vào trong thư viện. Trong cửa sổ thư viện
Library, bấm chọn file âm thanh, kích chuột phải và chọn Properties.
Hình 105 – Thao tác với thuộc tính Properties của đối tượng trong thư viện
- 152 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
Hình 106 – Hộp thoai Properties của đối tượng file âm thanh
Bạn cần đánh dấu tích vào Export for ActionScript. Trong Class, bạn nhập vào tên
lớp sẽ được xây dựng cho đối tượng âm thanh này (ví dụ là myMusic). Ngay bên
dưới là Base Class của nó – tức lớp cơ sở mà nó thừa kế. Sau đó nhấp Ok.
Kết thúc các thao tác trên, bạn đã nhận được một đối tượng btPlay và một lớp
myMusic. Tiếp theo, bạn sẽ bắt tay vào viết mã lệnh cho chương trình.
- Nhấn F9 để mở khung soạn thảo ActionScript. Bạn hãy bổ sung sự kiện kích
chuột cho đối tượng btPlay như sau
import flash.events.MouseEvent;
btPlay.addEventListener(MouseEvent.CLICK, func);
var Player:flash.media.Sound = new myMusic();
function func(e:MouseEvent):void{
Player.play();
}
Đối tượng Player là một sự thể hiện của lớp myMusic. Khi bấm chuột vào nút
btPlay, hàm func sẽ được gọi đến. Kết quả là phương thức play của đối tượng
Player được thực thi. Ne� u muo� n bo� sung thê m phương thức, thuộ c tı́nh cho lớp
myMusic, ta chı̉ việ c thê m mã lệ nh và o trong lớp myMusic thu được ở trê n. Bạ n
cũ ng ca� n lưu ý ra� ng, trong trường hợp nà y, lớp myMusic ke� thừa lớp
flash.media.Sound nê n nó có phương thức play đe� chơi nhạ c.
- 153 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
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”));
- 154 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
Đố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 đó.
- Các kim quay phải nằm trên các Layer riêng biệt. Chúng phải là các MovieClip.
Tâm xoay của các kim quay này phải nằm ở một đầu của nó.
- Các phần còn lại của đồng hồ, tùy thuộc vào mục đích của bạn, bạn có thể tạo
trên các Layer khác nhau, hoặc trên cùng một Layer.
Trong chiếc đồ hồ mà tôi tạo, tôi sử dụng các Layer sau đây:
- Layer Oclock: chức phần khung của chiếc đồng hồ, bề mặt đồng hồ.
- Layer Node: chứa các mốc thời gian (4 mốc thời gian).
- Layer Hours (chứa kim giờ), Layer Minutes (chứa kim phút), Layer Seconds
(chứa kim giây).
- Layer Center: nút gốc của các kim quay.
- Bạn lưu ý đến trật tự của các Layer. Layer Node ở trên Layer Oclock, Layer các
kim quay ở trên Layer Node, Layer center trên Layer các kim quay để che đi
phần gốc quay của các kim quay.
- 155 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
Hình 107 – Tạo đồng hồ kim quay bang chức năng Code Snippets
Chắc bạn sẽ thắc mắc Layer Action trong trường hợp này dùng để làm gì. Chúng
ta sẽ biết ngay sau đây.
Đối với các kim quay, bạn cần cài đặt tên thể hiện cho nó. Ví dụ tôi đặt tên cho các
đối tượng kim quay như sau: kim giờ là hourobj, kim phút là minobj, kim giây là
secobj.
Hình 108 – Cài đặt tên thể hiện cho các MovieClip kim quay
Tiếp theo, bạn hãy chọn một đối tượng kim quay, bấm vào khung Code Snippets
(hoặc Windows > Code Snippets). Trong cửa sổ này, bạn chọn nhóm Animation >
Rotate Continuously.
- 156 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
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)
{
minobj.rotation += 10;
}
Bây giờ bạn hãy thay đoạn mã trong hàm fl_RotateContinuously bằng đoạn mã
sau
var dd:Date = new Date();
hourobj.rotation = ((dd.getHours()>=12)?(dd.getHours()):(dd.getHours()-
12))*30;
minobj.rotation = dd.getMinutes()*6;
secobj.rotation = dd.getSeconds()*6;
Trước khi thay thế hai đoạn mã này, bạn nên kiểm tra xem chiếc đồng hồ của bạn
hoạt động như thế nào đã nhé. Rõ rang nó chỉ xoay duy nhất chiếc kim phút mà
thôi. Bạn cũng lưu ý rằng hiệu ứng này của Code Snippets là hiệu ứng quay liên
tục (Rotate Continuously), do đó, bạn không cần tương tác với đối tượng Timer.
Giải thích: Để cho chiếc đồng hồ hoạt động đúng, ta cần bổ sung sự kiện thời gian
cho nó. Biến dd thuộc kiểu Date. Ta sử dụng hàm khởi tạo Date() để khởi tạo giá
- 157 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
trị cho biến dd. Đối tượng thuộc kiểu Date có nhiều hàm tạo khác nhau, nhưng ở
đây ta sử dụng hàm tạo không đối số. Với hàm tạo này, đối tượng dd sẽ nhận giá
trị là thời gian hiện tại. Ta sẽ sử dụng các phương thức getHours, getMinutes,
getSeconds để lấy giờ, phút, giây tương ứng. Ở đây, Flash sử dụng biến cố
Event.ENTER_FRAME. Với biến cố này, hành động sẽ liên tục được cập nhập trên
từng frame. Bạn lưu ý rằng mặc định, số Frame trên một giây là 24fps. Do đó, bạn
hoàn toàn yên tâm rằng thời gian trên đồng hồ của bạn sẽ được cập nhật đến
từng 1/24 giây.
Tiếp theo, chúng ta sẽ thảo luận về các công thức tính góc quay. Chúng ta biết
rằng khi kim phút và kim giây quay đúng một vòng là 60 phút hoặc 60 giây. Nó
tương ứng với số đo là 3600. Như vậy, tương ứng với 1 phút hoặc 1 giây sẽ có số
đo là 60. Nếu có số phút và số giây hiện tại, ta chỉ việc nhân với 6 là nhận được kết
quả của góc đo tương ứng với phút và giây hiện tại.
Với giờ thì kết quả sẽ khác. Một vòng quay 3600 chỉ tương ứng với 12 giờ, do đó,
mỗi giờ chiếm đến một góc là 300. Nên góc quay của kim giờ sẽ là số giờ nhân với
30. Một điều lưu ý nữa, nếu thời gian hệ thống được định dạng 24h thì sẽ có một
vài sai sót xảy ra. Do đó, để đảm bảo chiếc đồng hồ hoạt động tốt, bạn nên kiểm
tra điều kiện: nếu số giờ vượt ngưỡng 12, thì số giờ sẽ là số giờ trừ đi 12, ngược
lại thì giữ nguyên kết quả đó. Đây chính là giá trị của toán tử điều kiện mà ta sử
dụng.
Đến đây, bạn sẽ thắc mắc là tại sao addEventListener lại chỉ áp dụng cho kim
phút. Câu trả lời không phải như vậy. Bạn có thể áp dụng cho một đối tượng bất
kì. Bạn có thể hiệu chỉnh ba đối tượng trên các Action Frame khác nhau. Nhưng
cách thực thi như thế chỉ làm cho bạn tốn thời gian, và việc quản lý nhiều Frame
sẽ làm cho bạn cảm thấy rối. Bạn hoàn toàn có thể làm thế nếu bạn muốn. Nhưng
bạn cần lưu ý đến một phương châm khi lập trình đó là – Càng đơn giản, nhỏ gọn
nhưng vẫn đảm bảo đầy đủ các nội dung thì càng tốt.
Tạo Menu điều khiển các cảnh quay trong Game
Trong ví dụ này, chúng ta sẽ thảo luận cách tạo một Menu để điều khiển Game.
Bạn hãy tạo 4 cảnh quay Scene và đặt tên cho chúng lần lượt là: Menu, Result,
Play và Help. Các Scene này được sắp xếp theo thứ tự như sau
- 158 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 159 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
Bạn cần thay đổi tên của Scene cho phù hợp với Scene sẽ chuyển đến trong dòng
lệnh
MovieClip(this.root).gotoAndPlay(1, "đổi tên Scene");
Bạn hãy thực hiện thao tác này cho những chức năng còn lại. Cuối cùng, bạn nhấn
tổ hợp Ctrl+Enter để kiểm tra kết quả.
Nếu bạn muốn xây dựng một dự án game hoàn chỉnh, bạn hãy lập trình game của
bạn vào trong Scene Play.
- 160 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
removeEventListener
: hủy sự kiện chuột
đối với đối tượng
movieClip_1.
removeChild: xóa đối
tượng trên khung
trình chiếu stage.
Mouse.show: phương
thức show của đối
tượng Mouse cho
phép hiện hình dạng
- 161 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 162 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 163 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 164 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 165 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
e(event:MouseEvent):void
{
gotoAndStop(5);
}
movieClip_1.addEventListener( Trình diễn movie nhảy
MouseEvent.CLICK, đến Frame được chỉ
fl_ClickToGoToAndPlayFromFr định. Trong trường hợp
ame); này Frame được chỉ định
Click to Go
function là 5.
to Frame
fl_ClickToGoToAndPlayFromFr
and Play
ame(event:MouseEvent):void
{
gotoAndPlay(5);
}
movieClip_1.addEventListener( Dừng trình diễn movie ở
MouseEvent.CLICK, Frame kế tiếp.
fl_ClickToGoToNextFrame);
Click to Go
function
to Next
fl_ClickToGoToNextFrame(eve
Frame and
nt:MouseEvent):void
Stop
{
nextFrame();
}
movieClip_1.addEventListener( Dừng trình diễn movie ở
MouseEvent.CLICK, Frame phía trước.
fl_ClickToGoToPreviousFrame)
Click to Go ;
to Previous function
Frame and fl_ClickToGoToPreviousFrame(
Stop event:MouseEvent):void
{
prevFrame();
}
Click to Go movieClip_1.addEventListener( Bắt đầu trình diễn đến
to Next MouseEvent.CLICK, cảnh quay kế tiếp trong
Scene and fl_ClickToGoToNextScene); danh sách Scene.
Play function
- 166 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
fl_ClickToGoToNextScene(even
t:MouseEvent):void
{
MovieClip(this.root).nex
tScene();
}
movieClip_1.addEventListener( Bắt đầu trình diễn từ
MouseEvent.CLICK, cảnh quay trước đó
fl_ClickToGoToPreviousScene); trong danh sách Scene.
Click to Go function
to Previous fl_ClickToGoToPreviousScene(
Scene and event:MouseEvent):void
Play {
MovieClip(this.root).pre
vScene();
}
movieClip_1.addEventListener( Bắt đầu trình diễn đến
MouseEvent.CLICK, một cảnh quay được chỉ
fl_ClickToGoToScene); định trong danh sách
function Scene. Tham số thứ nhất
Click to Go
fl_ClickToGoToScene(event:Mo là Frame được chỉ định
to Scene
useEvent):void trong Scene ở tham số
and Play
{ thứ 2.
MovieClip(this.root).got
oAndPlay(1, "Scene 3");
}
stage.addEventListener(Keybo Di chuyển đối tượng
ardEvent.KEY_DOWN, theo các phím mũi tên
fl_PressKeyToMove); trên bàn phím.
function
Animation
- 167 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
movieClip_1.y -= 5;
break;
}
case Keyboard.DOWN:
{
movieClip_1.y += 5;
break;
}
case Keyboard.LEFT:
{
movieClip_1.x -= 5;
break;
}
case Keyboard.RIGHT:
{
movieClip_1.x += 5;
break;
}
}
}
Move movieClip_1.x -= 100; Di chuyển đối tượng
Horizontall theo chiều ngang.
y
Move movieClip_1.y -= 100; Di chuyển đối tượng
Vertically theo chiều dọc.
movieClip_1.rotation += 45; Quay đối tượng 1 lần với
Rotate Once góc được chỉ định (tính
theo độ).
movieClip_1.addEventListener( Quay đối tượng liên tục.
Event.ENTER_FRAME, Mỗi lần quay một góc 10
fl_RotateContinuously); độ.
function
Rotate
fl_RotateContinuously(event:E
Continously
vent)
{
movieClip_1.rotation +=
10;
- 168 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
}
movieClip_1.addEventListener( Đối tượng chuyển động
Event.ENTER_FRAME, theo chiều ngang.
fl_AnimateHorizontally);
Animate function
Horizontall fl_AnimateHorizontally(event:E
y vent)
{
movieClip_1.x -= 10;
}
movieClip_1.addEventListener( Đối tượng chuyển động
Event.ENTER_FRAME, theo chiều dọc.
fl_AnimateVertically);
function
Animate
fl_AnimateVertically(event:Eve
Vertically
nt)
{
movieClip_1.y -= 10;
}
movieClip_1.addEventListener( Cách xuất hiện của đối
Event.ENTER_FRAME, tượng theo dạng thức
fl_FadeSymbolIn); hiện rõ dần (tăng dần độ
movieClip_1.alpha = 0; alpha)
function
fl_FadeSymbolIn(event:Event)
{
movieClip_1.alpha +=
Fade in a 0.01;
Movie Clip if(movieClip_1.alpha >=
1)
{
movieClip_1.removeEve
ntListener(Event.ENTER_FRA
ME, fl_FadeSymbolIn);
}
}
- 169 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
movieClip_1.removeEve
ntListener(Event.ENTER_FRA
ME, fl_FadeSymbolOut);
}
}
movieClip_1.addEventListener( Tải và hủy tải một tập tin
MouseEvent.CLICK, swf hoặc một tập tin ảnh
fl_ClickToLoadUnloadSWF); khi nhấp chuột vào đối
var fl_Loader:Loader; tượng movieClip_1. Biến
var fl_ToLoad:Boolean = true; fl_Loader được sử dụng
function để tải dạng tập tin kể
fl_ClickToLoadUnloadSWF(eve trên. Biến fl_ToLoad để
Load and Unload
- 170 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 171 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 172 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
examples.com/flash/sound/so
ng1.mp3"));
fl_SC = s.play();
}
else
{
fl_SC.stop();
}
fl_ToPlay = !fl_ToPlay;
}
movieClip_1.addEventListener( Dừng chơi tất cả âm
MouseEvent.CLICK, thanh trong movie.
fl_ClickToStopAllSounds);
function
Click to Stop
fl_ClickToStopAllSounds(event:
All Sounds
MouseEvent):void
{
SoundMixer.stopAll();
}
import fl.video.MetadataEvent;Thực thi một event khi
movieClip_1.addEventListener( đọc đến một Cue Point
MetadataEvent.CUE_POINT, được chỉ định. Cue Point
fl_CuePointHandler); là một cách thức chia
function nhỏ tập tin âm thanh
On Cue fl_CuePointHandler(event:Meta hoặc video (định dạng
Point Event dataEvent):void flv, f4v) lớn trong Flash
{ (đọc theo stream). Nhờ
trace(event.info.name);
đó tập tin sẽ được tải
} nhanh hơn (tải đến cue
point nào thì trình chiếu
đến đó).
movieClip_1.addEventListener( Tương tự như nút Play
MouseEvent.CLICK, trong các trình điều
Click to Play fl_ClickToPlayVideo); khiển nhạc/phim. Đối
Video function tượng
fl_ClickToPlayVideo(event:Mou video_instance_name là
seEvent):void tên thể hiện của thành
- 173 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 174 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
ouseEvent):void
{
trace("Mouse clicked");
}
movieClip_1.addEventListener( Hành động thực thi khi
MouseEvent.MOUSE_OVER, chuột di chuyển qua đối
Mouse Over fl_MouseOverHandler); tượng movieClip_1.
Event function
fl_MouseOverHandler(event:M
ouseEvent):void
- 175 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
{
trace("Moused over");
}
movieClip_1.addEventListener( Hành động thực thi khi
MouseEvent.MOUSE_OUT, chuột di chuyển ra khỏi
fl_MouseOutHandler); đối tượng movieClip_1.
function
Mouse Out
fl_MouseOutHandler(event:Mo
Event
useEvent):void
{
trace("Moused out");
}
stage.addEventListener(Keybo Hành động thực thi khi
ardEvent.KEY_DOWN, một phím được nhấn (có
fl_KeyboardDownHandler); thể là KEY_DOWN,
function KEY_UP. Trong trường
Key Pressed fl_KeyboardDownHandler(eve hợp này, ta sử dụng
Event nt:KeyboardEvent):void KEY_DOWN.
{
trace("Key Code
Pressed: " + event.keyCode);
}
addEventListener(Event.ENTE Hành động diễn ra khi
R_FRAME, phim được trình chiếu.
fl_EnterFrameHandler);
Enter function
Frame fl_EnterFrameHandler(event:E
Event vent):void
{
trace("Entered frame");
}
Nhóm chức năng nâng cao hỗ trợ cho các dòng điện thoại thông mình chạy
Android, iOS…
Multitouch.inputMode = Hà nh độ ng die� n ra khi
Mobile
Tap
Touch
- 176 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
function
fl_TouchEndHandler(event:TouchEve
nt):void
{
event.target.stopTouchDrag(ev
ent.touchPointID);
}
- 177 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
movieClip_1.addEventListener(Touch
Event.TOUCH_BEGIN,
fl_PressBeginHandler);
movieClip_1.addEventListener(Touch
Event.TOUCH_END,
fl_PressEndHandler);
movieClip_1.addEventListener(Touch
Event.TOUCH_OUT,
fl_PressEndHandler);
movieClip_1.addEventListener(Touch
Event.TOUCH_ROLL_OUT,
fl_PressEndHandler);
Multitouch.inputMode = Hà nh độ ng die� n ra khi
Two
MultitouchInputMode.GESTURE; dù ng hai ngó n tay chạ m
Gesture
Mobile
Events
finger
và o mà n hı̀nh cả m ứng
Tap
stage.addEventListener(GestureEvent. củ a thie� t bị di độ ng.
Event
GESTURE_TWO_FINGER_TAP, Trong trường hợp nà y,
- 178 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 179 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 180 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
{
// swiped right
case 1:
{
// Start your
custom code
// This example
code moves the selected object 20
pixels to the right.
movieClip_1.x +=
20;
// End your
custom code
break;
}
// swiped left
case -1:
{
// Start your
custom code
// This example
code moves the selected object 20
pixels to the left.
movieClip_1.x -=
20;
// End your
custom code
break;
}
}
switch(event.offsetY)
{
// swiped down
case 1:
{
// Start your
custom code
- 181 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
// This example
code moves the selected object 20
pixels down.
movieClip_1.y +=
20;
// End your
custom code
break;
}
// swiped up
case -1:
{
// Start your
custom code
// This example
code moves the selected object 20
pixels up.
movieClip_1.y -=
20;
// End your
custom code
break;
}
}
}
Multitouch.inputMode = Dù ng tay đe� vuo� t nhẹ lê n
MultitouchInputMode.GESTURE; mà n hı̀nh cả m ứng sang
phả i – chuye� n sang
Swipe
stage.addEventListener Frame phı́a trước; sang
to go to
Mobile Actions
- 182 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
if(event.offsetX == 1)
{
// swiped right
prevFrame();
}
else if(event.offsetX == -1)
{
// swiped left
nextFrame();
}
}
Multitouch.inputMode = Dù ng tay vuo� t nhẹ lê n
MultitouchInputMode.GESTURE; mà n hı̀nh sang phả i đe�
chuye� n sang scene tie� p
stage.addEventListener theo và sang trá i đe�
(TransformGestureEvent.GESTURE_S chuye� n sang scene trước
WIPE, đó .
fl_SwipeToGoToNextPreviousScene);
Swipe function
to go tofl_SwipeToGoToNextPreviousScene(e
next/pr vent:TransformGestureEvent):void
evious {
scence if(event.offsetX == 1)
and {
play // swiped right
prevScene();
}
else if(event.offsetX == -1)
{
// swiped left
nextScene();
}
}
Move var fl_Accelerometer:Accelerometer = Di chuye� n đo� i tượng
with new Accelerometer(); theo cả m bie� n khô ng
Acceler fl_Accelerometer.addEventListener(Ac gian (cả m bie� n theo độ
- 183 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
function
fl_AccelerometerUpdateHandler(even
t:AccelerometerEvent):void
{
movieClip_1.x -=
event.accelerationX*30;
movieClip_1.y +=
event.accelerationY*30;
}
stage.addEventListener(Event.ACTIVA Hà nh độ ng die� n ra khi
TE, fl_Activate); ứng dụ ng đang ở che� độ
stage.addEventListener(Event.DEACTI đặ t tiê u cự (activate) và
VATE, fl_Deactivate); khô ng được đặ t tiê u cự
(deactivate).
function fl_Activate(event:Event):void
{
Deactiv
// Start timers and add event
ate/Act
listeners here.
ivate
}
Event
function
fl_Deactivate(event:Event):void
{
// Stop timers and remove
event listeners here.
}
stage.addEventListener(KeyboardEve Hie� n thị chức nă ng khi
nt.KEY_UP, nha� n phı́m menu trê n
Menu fl_OptionsMenuHandler_2); bà n phı́m củ a thie� t bị di
Key độ ng. Trong vı́ dụ nà y,
Pressed function ne� u nha� p và o phı́m
Event fl_OptionsMenuHandler_2(event:Keyb menu, trê n mà n hı̀nh sẽ
oardEvent):void hiệ n ra mộ t hı̀nh chữ
{ nhậ t.
- 184 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
grayRectangle.graphics.lineStyl
e(3, 0x888888, 0.95);
grayRectangle.graphics.beginFil
l(0xececec, 0.95);
grayRectangle.graphics.drawRe
ct(1, stage.stageHeight - 100,
stage.stageWidth-3, 100);
grayRectangle.graphics.endFill(
);
addChild(grayRectangle);
// End your custom code
}
}
var fl_GeolocationDisplay:TextField = Hie� n thị thô ng tin vị trı́
new TextField(); địa lı́ củ a thie� t bị. Chức
fl_GeolocationDisplay.autoSize = nă ng nà y chı̉ hoạ t độ ng
AIR for mobile
- 185 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
{
fl_GeolocationDisplay.text =
"Geolocation is not supported on this
device.";
}
else
{
var fl_Geolocation:Geolocation
= new Geolocation();
fl_Geolocation.setRequestedUp
dateInterval(1000);
fl_Geolocation.addEventListene
r(GeolocationEvent.UPDATE,
fl_UpdateGeolocation);
}
function
fl_UpdateGeolocation(event:Geolocati
onEvent):void
{
fl_GeolocationDisplay.text =
"latitude: ";
fl_GeolocationDisplay.appendTe
xt(event.latitude.toString() + "\n");
fl_GeolocationDisplay.appendTe
xt("longitude: ");
fl_GeolocationDisplay.appendTe
xt(event.longitude.toString() + "\n");
fl_GeolocationDisplay.appendTe
xt("altitude: ");
fl_GeolocationDisplay.appendTe
xt(event.altitude.toString() + "\n");
}
Re- var fl_initialRotation = Tự độ ng xoay đo� i tượng
orient movieClip_1.rotation; // Save the cho phù hợp với khung
objects initial rotation value nhı̀n. Chı̉ ho� trợ đo� i với
on những thie� t bị có cả m
- 186 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
movieClip_1.rotation =
fl_initialRotation; // Restore the
initial rotation value
break;
}
case
StageOrientation.ROTATED_RIGHT:
{
// Re-orient
display objects based on right-hand
orientation.
movieClip_1.rotation += 90;
break;
}
case
StageOrientation.ROTATED_LEFT:
{
// Re-orient
display objects based on left-hand
- 187 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
orientation.
movieClip_1.rotation -= 90;
break;
}
case
StageOrientation.UPSIDE_DOWN:
{
// Re-orient
display objects based on upside-down
orientation.
movieClip_1.rotation += 180;
break;
}
}
}
Các chức năng dành riêng cho AIR (trên cả Windows, Linux, MacOS, Android,
iOS…)
movieClip_1.addEventListener(Mouse Hà nh độ ng nha� p lê n đo� i
Event.CLICK, fl_CloseWindow); tượng movieClip_1 đe�
Click to
đó ng cửa so� ứng dụ ng.
close
function
AIR
AIR
fl_CloseWindow(event:Event):void
Windo
{
w
stage.nativeWindow.close();
}
- 188 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
stage.nativeWindow.restore();
}
}
- 189 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 190 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
var fl_OpenFileStream:FileStream =
new FileStream(); // FileStream used
to read from the file
var fl_OpenFileChooser:File =
File.documentsDirectory; // Default to
the documents directory
fl_OpenFileChooser.addEventListener(
Event.SELECT, fl_FileOpenSelected);
fl_OpenFileStream.openAsync(fl
_OpenFileChooser, FileMode.READ);
} - 191 -
var fl_SaveFileStream:FileStream =
new FileStream(); // FileStream used
to write to the file
var fl_SaveFileChooser:File =
File.documentsDirectory; // Default to
the documents directory
fl_SaveFileChooser.addEventListener(
Event.SELECT, fl_WriteFileHandler);
fl_SaveFileStream.openAsync(fl
- 192 -
_SaveFileChooser, FileMode.WRITE);
fl_SaveFileStream.writeMultiBy
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
// On Windows 7:
C:\Users\<username>\AppData\Roami
ng\<Name of Air Application>\Local
Store\AppConfig.cfg
// On Windows XP: C:\Documents and
Settings\<username>\Application
Data\<Name of Air Application>\Local
Store\AppConfig.cfg
// On Mac:
/Users/<username>/Library/Preferenc
es/<Name of Air Application>/Local
Store/AppConfig.cfg
fl_LoadPreferences();
// Call to Load Preferences
fl_SavePreferences();
// Call to Save Preferences (move this
where you want to save your
preferences)
Để biết thêm thông tin về các đối tượng, bạ n hãy xem thêm bảng tham khảo về
các lớp đối tượng trong địa chỉ trợ giúp về ActionScript 3 của Adobe
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/.
- 194 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
- 195 -
CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT
Blank Page
- 196 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
- 198 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
- 199 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
- 200 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Ngoài ra, Flash còn cho phép bạn hiểu chỉnh nâng cao với hai chương trình hỗ trợ
kĩ xảo điện ảnh là Adobe Premier và Adobe After Effect.
Khi import một video vào Flash, bạn có thể cho phép video mà bạn import vào sẽ
nằm trên một khung hình độc lập hay được nhúng vào một trình media playback
(nghĩa là chương trình có các thành phần điều khiển chế độ chơi). Với việc tạo
một khung hình độc lập, ta có thể tạo các mặt nạ với hình thù phức tạp, tạo các
khung trình chiếu rất hấp dẫn. Bạn sẽ được tìm hiểu điều này khi chúng ta tìm
hiểu kĩ hơn về mặt nạ.
- 201 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
xảo mong chờ trong thước phim cuối cùng là thước phim chú gấu này sẽ thổi ra
lửa.
Đầu tiên, bạn hãy tạo một dự án mới. Bạn hãy import Video hình chú gấu vào
(File Bear.flv trong thư mục Video của CD đính kèm). Bạn hãy hiệu chỉnh các
thuộc tính khi import dữ liệu theo hình mô tả của hình bên dưới đây
Hình 118 – Hiệu chỉnh thuộc tính Align cho Video chú gấu trên Stage
- 202 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Video hình chú gấu đã được đặt vào Layer 1. Bạn hãy sửa tên Layer 1 này thành
Bear.
Bước 2. Tạo mới một Layer, đặt tên cho nó là Fire. Bạn hãy vẽ lên Layer này một
hình chữ nhật màu đỏ, loại bỏ viền. Tiếp theo, bạn hãy convert nó thành
MovieClip. Trong bảng thuộc tính của MovieClip này, bạn chọn Filter là Blur, hiệu
chỉnh độ BlurX và BlurY là 41.
Bước 3. Bạn hãy kéo thanh đánh dấu Frame hiện tại trên TimeLine, xem vị trí cần
tạo quả cầu lửa xuất hiện. Bạn hãy bấm vào Frame tương ứng trên Layer Fire,
nhấn phím F6 để tạo một KeyFrame. Kích chuột phải lên quả cầu lửa, chọn Create
Motion Tween.
- 203 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Giờ đây, bạn có thể kiểm tra thành quả của mình. Nhấn Ctrl+Enter để kiểm tra.
Bạn có thể kết hợp với những video mà bạn xây dựng nên. Việc xây dựng một
video và sử dụng Flash để tạo kĩ xảo là một trải nghiệm khá thú vị đang chờ đợi
bạn đấy. Hi vọng bạn sẽ thực hiện kĩ xảo này một cách thành thạo.
Kĩ xảo cuộc chiến trên không của hai chú chim
- 204 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
- 205 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
này có giá không rẻ chút nào. Nếu bạn muốn trải nghiệm một cảm giác miễn phí
với đồ họa 3D trong Flash, bạn có thể tạo dựng nó nhờ vào ngôn ngữ lập trình
ActionScript. Để tạo một thước phim 3D trên ActionScript, sẽ thuận lợi hơn nếu
chúng ta xây dựng trên thư viện mã nguồn mở PaperVision3D. Chúng tôi sẽ trình
bày khá chi tiết về thư viện này trong chương cuối của giáo trình. Một khó khăn là
bạn cần có một lượng kiến thức toán học khá vững chắc để tạo dựng các đối
tượng đồ họa 3D. Thư viện mã nguồn mở PaperVision3D được cung cấp cho hầu
hết các trình soạn thảo ActionScript, nhưng chúng tôi sẽ trình bày trên Flex
Buider bởi đây là trình soạn thảo ActionScript chuyên nghiệp nhất.
Dù không cung cấp cho ta các công cụ chuyên dụng để thiết kế 3D, nhưng với kĩ
thuật phối màu Gradient và kĩ thuật Layer, chúng ta có thể tạo dựng một thước
phim có “cách nhìn 3D”. Trong ví dụ sau đây, tôi sẽ trình bày cách xây dựng đoạn
phim đánh golf. Khi người đánh golf đánh vào quả bóng, thì quả bóng sẽ lăn và rơi
vào lỗ golf trên sân cỏ.
Bước 1. Tạo mới một Layer có tên là Glass. Bạn hãy phối màu Linear Gradient, và
chọn chế độ màu như hình bên dưới.
Hình 122 – Trò chơi golf: sân golf trên lớp glass.
Bước 2. Tạo lỗ golf trên sân golf. Tạo một Layer mới tên là hole. Trên Layer này,
bạn hãy tạo một hình Eclipse như sau.
- 206 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
- 207 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Hình 125 – Trò chơi golf: Tạo quả bóng chơi golf
Bước 4. Tạo thanh chơi golf. Thanh chơi golf này sẽ đánh vào quả bóng để tạo
hiệu ứng đánh golf. Thanh chơi golf được đặt trên Layer line.
- 208 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
- 209 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Ctrl), sau đó nhấn phím F5 để sao chép Frame 1 đến các Frame còn lại (quan sát
khung TimeLine ở trên).
Bước 5. Tạo hiệu ứng quả bóng lăn. Tại Frame thứ 5 trên Layer ball, bạn nhấn
phím F6 để tạo mới một KeyFrame. Sau đó, sử dụng Motion Tween để tạo chuyển
động cho quả bóng tiến về phía lỗ đánh golf.
Hình 128 – Trò chơi golf: Tạo cảnh quả bóng di chuyển
Đường di chuyển của quả bóng được chia làm hai phần: Phần 1 – từ vị trí ban đầu
đến lỗ golf (Frame 5 đến Frame 60). Phần 2 – Từ vị trí bề mặt lỗ golf xuống dưới
lỗ golf (Frame 60 đến Frame 65).
Bước 6. Theo cách quan sát của chúng ta, thì từ giai đoạn quả bóng trên bề mặt
xuống đến đấy của lỗ golf, thì quả bóng sẽ biến mất. Để thực hiện điều này, ta sẽ
sử dụng kĩ thuật Layer. Bạn sử dụng công cụ Lasso, chọn trên Layer Glass một
phần như hình minh họa bên dưới.
- 210 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
một nhóm bằng một Folder mới (bạn đặt tên cho nó là LayerTech). Sau đó, kéo
Folder này lên trên tất cả các Layer còn lại.
Hình 130 – Trò chơi golf: Thanh TimeLine trong kĩ thuật Layer
Đến đây, hầu như bạn đã hoàn tất thước phim. Tuy nhiên để cho phim được thật
hơn, chúng ta sẽ bổ sung thêm hiệu ứng đổ bóng. Sau đây là dự án hoàn chỉnh.
- 211 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Nếu bạn muốn tạo một thước phim 3D với những hiệu ứng phức tạp (các nhân
vật, đối tượng quay trong không gian) thì dường như việc áp dụng những kĩ thuật
nêu trên là quá khó khăn. Khi đó, bạn nên chuyển sang một chương trình như
Autodesk Maya, bởi lẻ Adobe Flash cũng không hỗ trợ cách xây dựng dạng phim
3D hoàn chỉnh như thế (trừ phi bạn lập trình hoàn toàn trên ActionScript).
- 212 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Đến đây, chắc bạn đã tưởng tượng làm thế nào để tạo khung hình phức tạp cho
các video ? Layer Mask bạn hãy tạo khung trình chiếu, Layer video là layer hoạt
cảnh. Thế là công việc của bạn đã hoàn tất rồi !
Remarks: việc sử dụng mặt nạ không buộc bạn phải áp dụng cho toàn cảnh quay.
Bạn có thể sử dụng nhiều mặt nạ đồng thời trong một cảnh quay. Một mặt nạ có
tác dụng cho một lớp Layer chứa đối tượng.
Một vài ví dụ sử dụng kĩ thuật mặt nạ Mask
Ví dụ về việc sử dụng mặt nạ động: trong ví dụ này, bạn sẽ tạo một mặt nạ động
cho một lớp đối tượng. Bạn sẽ sử dụng hai lớp: Layer Art và Layer Mask.
- 213 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
- 214 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
- 215 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Tiếp theo, chúng ta sẽ sử dụng kĩ thuật Mask. Bạn hãy chọn Layer Mask, kích
chuột phải, và chọn Mask. Bạn sẽ thu được kết quả như hình bên dưới.
- 216 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
- 217 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Chọn đối tượng hình vuông này, kích chuột phải và chọn Create Motion Tween.
Bạn hiệu chỉnh độ rộng của Tween này, sao cho vị trí kết thúc của nó nằm ở
Frame 15. Sau đó, bạn hiệu chỉnh kích thước của hình vuông sao cho nó chiếm
toàn khung trình chiếu. Tại Frame thứ 19 của Layer Pic1, nhấn phím F5 (hoặc F6)
để sao chép toàn bộ ảnh trên Frame thứ nhất lên các Frame 2 đến 19. Chọn Layer
Mask 1 này, kích chuột phải và chọn Mask.
Hiệu ứng cho mặt nạ Mask 2. Hoàn toàn tương tự với mặt nạ Mask1. Lần này, bạn
hãy tạo một dãy các ngôi sao. Tại Frame 20 của Layer Mask2, bạn nhấn phím F6,
sử dụng công cụ PolyStar để tạo các ngôi sao.
- 218 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Layer Mask3, nhấn phím F6. Bạn tiếp tục bấn vào KeyFrame này (Frame thứ 55
của Layer Mask 3 này), để chọn tất cả các hình chữ nhật. Giữ phím Ctrl và rê
chuột để sao chép tất cả chúng và sắp xếp chúng sát với các hình chữ nhật trước.
Bạn tiếp tục công việc này cho đến khi các hình chữ nhật chồng khít nhau và che
khuất khung trình chiếu. Tại Frame thứ 60 của Layer Pic3, nhấp phím F5 hoặc F6.
Chọn Layer Mask 3, kích chuột phải và chọn Mask.
- 219 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
- 220 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Ở trong đoạn chương trình này, playbar.maximum được gán bằng số Frame trong
Scene. Biến allowed tương ứng với sự kiện chuột được ấn xuống hay thả ra. Khi
- 221 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
kết hợp sự kiện ấn chuột và di chuyển chuột trên thanh Slider này, sẽ nhảy đến
Frame được chỉ định và tiếp tục trình diễn nhờ vào hàm gotoAndPlay.
- 222 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Hình 145 – Thiết lập tập tin cài đặt trên air – Mục General
b) Mục Signature
- 223 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Hình 146 – Thiết lập tập tin cài đặt trên air – Mục Signature
Tạo một tập tin chứng thực. Nếu chưa có một tập tin chứng thực, chúng ta bấm
vào nút Create.
- 224 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
d) Mục Advanced
Hình 148 – Thiết lập tập tin cài đặt trên air – Mục Advanced.
Sau khi thiết lập xong các thông số, bạn chọn Publish để xuất bản (hoặc nhâp Ok).
Xuất bản tập tin cài đặt trên AIR cho Android. Cũng tương tự như việc xuất bản
tập tin AIR chạy trên Windows, nhưng tập tin AIR trên Android có phần mở rộng
là *.apk. Nếu không có điều kiện để sở hữu một thiết bị chạy Android, ta có thể sử
dụng Android SDK để tạo môi trường giả lập cho các thiết bị. Sau đây, tôi sẽ giới
thiệu cho bạn, cách cài đặt Android SDK, cài đặt AIR trên hệ điều hành giả lập này
cũng như các ứng dụng chạy trên AIR.
Bước 1. Chua� n bị
+ Hệ đie� u hà nh họ Windows (có the� MacOS hoặ c Linux, Windows 7).
- 225 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
+ Flash Professional CS5 full trở lê n (yê u ca� u Flash Professional CS5.5)
+ Adobe Device Central CS5 trở lê n (yê u ca� u CS5.5).
+ Android SDK (tả i tạ i http://developer.android.com/sdk/index.html )
+ Adobe AIR 2 trở lê n (AIR 2.6 được tı́ch hợp sa� n trong CS5.5)
Bước 2. Giả i né n bộ Android SDK, sau đó chạ y tậ p tin SDKManager.exe trong thư
mụ c giả i né n. Chương trı̀nh quả n lý sẽ tự độ ng qué t đe� tı̀m cá c cậ p nhậ t mới nha� t.
Cô ng đoạ n nà y tie� n hà nh khá mất thời gian. Ta chỉ cần chọn Accept và nha� p Ok.
Bước 3. Ta được thư mụ c cà i đặ t có dạ ng như bê n dưới:
- 226 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
- 227 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
- 228 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
- 229 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
- 230 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Để gỡ bỏ ứng dụng ra khỏi môi trường giả lập, ta truy cập vào Settings >
Application > Manage Applications. Sau đó, nhấp đôi vào ứng dụng cần gỡ bỏ và
chọn Uninstall và Ok.
Xuất bản tập tin cho các thiết bị sử dụng hệ điều hành iOS. Hoàn toàn tương
tự như xuất bản tập tin cho AIR ở trên, tuy nhiên trong trường hợp này, ta cần có
thêm tập tin *.mobileprovision. Bạn có thể tìm thấy tập tin này trong bộ giả lập
iOS SDK của Apple. Cũng cần lưu ý rằng, tập tin sử dụng trong trường hợp này là
*.ipa – một dạng tập tin cài đặt sử dụng trên iOS.
6.8. Xuất bản một tập tin Flash trong suốt trên trình duyệt
Nếu thường xuyên duyệt web, chúng ta có thể thấy trên nhiều website có những
thước phim Flash động có thể di chuyển trên trang web nhưng không che khuất
các nội dung trên trang web và đặc biệt không có khung hình bao quanh các đối
tượng trong phim Flash đó.
Trong movie bên dưới, trên stage (màu xanh nước biển) có các đối tượng: mây,
chim hải âu, cây dừa và hoa. Khi xuất bản tập tin Flash, ta cho phép màu của stage
trở nên trong suốt thì ta sẽ nhận được ứng dụng chỉ có các đối tượng nêu trên.
Nếu ứng dụng sử dụng trên web (chạy trên Flash Plugin) thì phần trong suốt của
stage sẽ hiển thị nội dung trên web; nếu ứng dụng chạy trên AIR (như các ứng
dụng AIR cho Desktop chẳn hạn) thì ta chỉ thấy các đối tượng mà không thấy
khung viền bao quanh. Trong trường hợp này, đối tượng dường như đang hoạt
động trên màn hình chứ không phải đang hoạt động trên cửa sổ của AIR. Đối với
trường hợp này, ta đã tìm hiểu ở mục xuất tập tin cho AIR. Trong trường hợp này,
ta sẽ tìm hiểu cách làm trong suốt phần nền cho các ứng dụng chạy trên web. Hãy
quan sát movie sau đây với đầy đủ màu nền của stage và các đối tượng khác.
- 231 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Hình 157 – Phim Flash với các đối tượng mây, chim hải âu, cây dừa và hoa
- 232 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
màu nào đi nữa, thì với tùy chỉnh bên dưới đây, màu nền của phim sẽ luôn trong
suốt.
Bước 1. Hãy thiết kế một phim Flash với màu nền tùy chỉnh, nhưng cần lưu ý
rằng, ta không được phép sử dụng một đối tượng, một hình nền để làm hình nền
cho thước phim.
Bước 2. Vào File > Publish Settings. Trong hộp thoại hiện ra, chọn thẻ Flash, chọn
chức năng Windows Mode là Transparent Windowsless.
- 233 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
- 234 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
function recieveTextFromHtml(t) {
theText.text = t;
}
button.addEventListener(MouseEvent.CLICK, buttonClick);
function buttonClick(e:MouseEvent) {
ExternalInterface.call("recieveTextFromFlash", theText.text);
theText.text = "";
}
- 235 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
<body>
<form id="form1" name="form1" method="post" action="">
<textarea name="htmlText" id="htmlText" style="width:450px;
height:200px;"> </textarea>
<br />
<input style="margin-left:175px;" type="button" name="sendToFlash"
id="sendToFlash" value="Send Text To AS"
onclick="getElementById('flash').sendTextFromHtml(htmlText.value);
document.getElementById('htmlText').value = ''" />
</form>
<div align="left">
<embed src="myFlash.swf" id="flash" quality="high" scale="exactfit"
width="450" height="250" name="squambido" align="middle"
allowscriptaccess="always" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</div>
</body>
</html>
Trong đó, myFlash.swf là tập tin Flash đã tạo ở bước trên. Khi chạy chương trình,
ta thu được kết quả như sau:
- 236 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Hình 161 – Gửi dữ liệ u qua lạ i giữa ActionScript và JavaScript.
Khi nhập nội dung vào TextArea và nhấp nút “Send Text To AS” của trang Html
thì nội dung trên sẽ được chuyển sang TextAre của Flash. Và ngược lại, khi gõ nội
dung vào TextArea của Flash và nhấp nút “Send To JS” thì nội dung sẽ hiển thị lên
TextArea của trang Html.
- 237 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Trong vı́ dụ nà y, ta sẽ tạ o ra hai lớp đo� i tượng tương tá c hai phı́a theo mô hı̀nh
client – server nêu trên:
a) Lớp Server Socket.
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.ProgressEvent;
import flash.events.ServerSocketConnectEvent;
import flash.net.ServerSocket;
import flash.net.Socket;
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.utils.ByteArray;
- 238 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
}
serverSocket.bind( parseInt( localPort.text ), localIP.text );
serverSocket.addEventListener( ServerSocketConnectEvent.CONNECT,
onConnect );
serverSocket.listen();
log( "Bound to: " + serverSocket.localAddress + ":" + serverSocket.localPort );
}
- 239 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
{
log( error.message );
}
}
this.stage.nativeWindow.activate();
}
- 240 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
input.selectable = editable;
input.width = 280;
input.height = height;
input.x = x + labelField.width;
input.y = y;
this.addChild( labelField );
this.addChild( input );
return input;
}
this.addChild( button );
return button;
}
}
}
b) Lớp Client Socket.
package {
import flash.display.Sprite;
- 241 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
}
}
}
import flash.errors.*;
import flash.events.*;
import flash.net.Socket;
- 242 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
- 243 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
cả hai đo� i tượng bởi ta đang thực thi giao tie� p giữa hai má y mà khô ng ca� n có
server trung gian. Khi đó , mộ t trong hai má y sẽ có chức nă ng là m server đie� u
khie� n. Đe� hie� u rõ hơn ve� vı́ dụ minh họ a ở trê n, ta ca� n tı̀m hie� u cá c phương thức,
thuộ c tı́nh và sự kiệ n tương ứng củ a mo� i lớp.
LỚP SERVERSOCKET
THUO�̣ C TI�NH
bound:Boolean Kiểm tra socket có được ràng buộc với một địa chỉ ip và
một cổng hay không.
isSupported:Boolean Kiểm tra môi trường runtime có hỗ trợ ServerSocket
không.
listening:Boolean Kiểm tra server socket có đang lắng nghe sự kết nối từ
phía client hay không.
localAddress:String Địa chỉ ip mà socket đang lắng nghe.
localPort:int Cổng kết nối mà socket đang lắng nghe.
PHƯƠNG THƯ�C
ServerSocket() Hàm khởi tạo một đối tượng ServerSocket.
bind(port:int=0, Ràng buộc socket với một địa chỉ ip và cổng xác
localAddress:String=”0.0.0.0”) định.
close Đóng socket và dừng các kết nối đến server.
listen(backlog:int) Lắng nghe các kết nối TCP trên địa chỉ ip và cổng
đã chỉ định ở phương thức bind.
SỰ KIE�̣ N
close Được gửi đi khi hệ điều hành đóng các socket.
connect Được gửi đi khi có một socket kết nối đến server.
LỚP SOCKET
THUO�̣ C TI�NH
bytesAvailable:uint Số byte thuận lợi cho việc đọc từ bộ đệm vào.
connected:Boolean Kiểm tra socket này có đang được kết nối hay chưa.
endian:String Chỉ ra thứ tự đọc dữ liệu.
localAddress:String Chỉ ra địa chỉ ip mà socket ràng buộc.
localPort Chỉ ra cổng mà socket ràng buộc.
objectEncoding Điều khiển phiên bản AMF (Action Message Format)
dành cho đọc/ghi dữ liệu.
remoteAddress Địa chỉ ip mà socket này kết nối đến.
remotePort Cổng kết nối mà socket này kết nối đến.
- 244 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
PHƯƠNG THƯ�C
Socket(host:String=null, Hàm khởi tạo của lớp Socket với địa chỉ ip và cổng
port:int=0) chỉ định.
close() Đóng socket.
connect(host:String=null, Kết nối socket với một địa chỉ ip và cổng chỉ định.
port:int=0)
flush() Làm sạch dữ liệu tồn đọng trong bộ đệm ra của
socket.
readBoolean() Đọc dữ liệu dạng boolean của socket.
readByte() Đọc dữ liệu dạng byte đơn của socket.
readBytes(bytes:ByteArray, Đọc dữ liệu dưới dạng dãy các byte liên tục từ offset
offset:uint=0, length:uint=0) với độ dài length của socket.
readDouble() Đọc dữ liệu dạng Double.
readFloat() Đọc dữ liệu dạng Float.
readInt() Đọc dữ liệu dạng Int.
readMultiByte(length:uint, Đọc một chuỗi các byte bằng cách sử dụng một tập
charset:String) các kí tự chỉ định.
readObject() Đọc một đối tượng theo cách tuần tự hóa dạng
AMF.
readShort() Đọc dữ liệu dưới dạng Short.
readUnsignedByte() Đọc dữ liệu dưới dạng UnsignedByte.
readUnsignedShort() Đọc dữ liệu dưới dạng UnsignedShort.
readUnsignedInt() Đọc dữ liệu dưới dạng UnsignedInt.
readUTF() Đọc dữ liệu dưới dạng xâu UTF-8.
readUTFBytes(length:int) Đọc một dãy byte dữ liệu dưới dạng UTF-8 với độ
dài được chỉ định length.
writeBoolean(value:Boolean) Ghi dữ liệu dạng boolean vào socket.
writeByte() Ghi dữ liệu dạng byte đơn vào socket.
writeBytes(bytes:ByteArray, Ghi dữ liệu dưới dạng dãy các byte liên tục từ offset
offset:uint=0, length:uint=0) với độ dài length vào socket.
writeDouble() Ghi dữ liệu dạng Double.
writeFloat() Ghi dữ liệu dạng Float.
writeInt() Ghi dữ liệu dạng Int.
writeMultiByte(length:uint, Ghi một chuỗi các byte bằng cách sử dụng một tập
charset:String) các kí tự chỉ định.
writeObject() Ghi một đối tượng theo cách tuần tự hóa dạng AMF.
writeShort() Ghi dữ liệu dưới dạng Short.
- 245 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
1http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/flash/data/package-
detail.html
- 246 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
conn.addEventListener(SQLErrorEvent.ERROR, errorHandler);
var folder:File = File.applicationStorageDirectory;
var dbFile:File = folder.resolvePath("DBSample.db");
function openHandler(event:SQLEvent):void
{
trace("Đã tạo thành công Database");
}
function errorHandler(event:SQLErrorEvent):void
{
trace("Lỗi: ", event.error.message);
}
Vı́ dụ nà y giú p ta tạ o mới mộ t cơ sở dữ liệ u lưu và o file với tê n là DBSample.db.
Sau đó , mở nó ra. Đe� mở dữ liệ u, ta có the� sử dụ ng phương thức open hoặ c
openSync củ a đo� i tượng conn (là đo� i tượng củ a lớp SQLConnection). Khi mở
thà nh cô ng, thı̀ nó sẽ la� ng nghe sự kiệ n SQLEvent.OPEN; ngược lạ i sự kiệ n được
la� ng nghe sẽ là SQLEvent.ERROR ne� u phá t sinh lo� i trong quá trı̀nh mở.
b) Vı́ dụ tạ o mới mộ t bả ng dữ liệ u trong cơ sở dữ liệ u.
import flash.data.SQLConnection;
import flash.data.SQLStatement;
import flash.events.SQLErrorEvent;
import flash.events.SQLEvent;
…
var createStmt:SQLStatement = new SQLStatement();
createStmt.sqlConnection = conn;
var sql:String =
"CREATE TABLE IF NOT EXISTS employees (" +
" empId INTEGER PRIMARY KEY AUTOINCREMENT, " +
" firstName TEXT, " +
" lastName TEXT, " +
" salary NUMERIC CHECK (salary > 0)" +
")";
createStmt.text = sql;
- 247 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
createStmt.addEventListener(SQLEvent.RESULT, createResult);
createStmt.addEventListener(SQLErrorEvent.ERROR, createError);
createStmt.execute();
function createResult(event:SQLEvent):void
{
trace("Bảng dữ liệu đã được tạo");
}
function createError(event:SQLErrorEvent):void
{
trace("Lỗi: ", event.error.message);
}
Đe� tạ o mộ t bả ng dữ liệ u trong SQL, ta sử dụ ng lệ nh create table. Nó là mộ t truy
va� n. Khi thực thi mộ t truy va� n trong ActionScript 3.0, ta sử dụ ng SQLStatement
thô ng qua mộ t ca� u no� i là SQLConnection. Trı̀nh tự thực thi truy va� n như sau:
- Mở mộ t ke� t no� i đe� n cơ sở dữ liệ u: sử dụ ng phương thức open/openSync củ a đo� i
tượng Connection.
- Gá n ca� u no� i cho đo� i tượng SQLStatement là ke� t no� i Connection ở trê n.
- Đe� xâ y dựng mộ t truy va� n, ta sử dụ ng thuộ c tı́nh text củ a đo� i tượng
SQLStatement.
- Đe� thực thi truy va� n, ta sử dụ ng phương thức execute() củ a đo� i tượng
SQLStatement.
Hoà n toà n tương tự vı́ dụ a, khi thực thi truy va� n có the� phá t sinh lo� i hoặ c khô ng
lo� i. Do đó , ta sử dụ ng cá c bộ la� ng nghe sự kiệ n tương ứng với sự kiệ n la� ng nghe là
SQLEvent.RESULT (ne� u có ke� t quả sau khi thực thi truy va� n) và SQLEvent .ERROR
(ne� u phá t sinh lo� i). Đe� thực thi cá c truy va� n dạ ng select, insert, update, delete ta
cũ ng thực thi theo trı̀nh tự nê u trê n.
c) Vı́ dụ thực thi truy va� n dạ ng select.
…
var selectStmt:SQLStatement = new SQLStatement();
selectStmt.sqlConnection = conn;
selectStmt.text = "SELECT itemId, itemName, price FROM products";
selectStmt.addEventListener(SQLEvent.RESULT, resultHandler);
selectStmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);
selectStmt.execute();
- 248 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
function resultHandler(event:SQLEvent):void
{
var result:SQLResult = selectStmt.getResult();
var numResults:int = result.data.length;
for (var i:int = 0; i < numResults; i++)
{
var row:Object = result.data[i];
var output:String = "itemId: " + row.itemId;
output += "; itemName: " + row.itemName;
output += "; price: " + row.price;
trace(output);
}
}
function errorHandler(event:SQLErrorEvent):void
{
trace("Lỗi: ", event.error.message);
}
Hoà n toà n tương tự như vı́ dụ c. Tuy nhiê n, trong trường hợp nà y, việ c thực thi
truy va� n select sẽ trả ve� dữ liệ u dạ ng SQLResult. Trong SQLResult, có thuộ c tı́nh
data được to� chức tương tự như mả ng mà mo� i dò ng dữ liệ u go� m nhie� u trường dữ
liệ u. Vı́ dụ trong trường hợp nà y data tương ứng với so� ke� t quả (so� dò ng) dữ liệ u
nhậ n được. Tương ứng với mo� i dò ng data[i] hay row có cá c trường itemID,
itemName, price – cá c trường trong truy va� n select.
d) Vı́ dụ thực thi truy va� n dạ ng insert.
import flash.data.SQLConnection;
import flash.data.SQLResult;
import flash.data.SQLStatement;
import flash.events.SQLErrorEvent;
import flash.events.SQLEvent;
…
var insertStmt:SQLStatement = new SQLStatement();
insertStmt.sqlConnection = conn;
var sql:String =
"INSERT INTO employees (firstName, lastName, salary) " +
"VALUES ('Bob', 'Smith', 8000)";
- 249 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
insertStmt.text = sql;
insertStmt.addEventListener(SQLEvent.RESULT, insertResult);
insertStmt.addEventListener(SQLErrorEvent.ERROR, insertError);
insertStmt.execute();
function insertResult(event:SQLEvent):void
{
trace("Đã thêm dữ liệu vào bảng.");
}
function insertError(event:SQLErrorEvent):void
{
trace("Lỗi: ", event.error.message);
}
Hoà n toà n tương tự vı́ dụ c.
e) Vı́ dụ thực thi truy va� n dạ ng update.
import flash.data.SQLConnection;
import flash.data.SQLResult;
import flash.data.SQLStatement;
import flash.events.SQLErrorEvent;
import flash.events.SQLEvent;
…
var updateStmt:SQLStatement = new SQLStatement();
updateStmt.sqlConnection = conn;
var sql:String =
"UPDATE employees " +
"SET firstName = 'Bob', lastName = 'Smith',salary = 8000 where firstName
= ‘John’ and lastName = ‘Smith’";
updateStmt.text = sql;
updateStmt.addEventListener(SQLEvent.RESULT, updateResult);
updateStmt.addEventListener(SQLErrorEvent.ERROR, updateError);
updateStmt.execute();
function updateResult(event:SQLEvent):void
{
trace("Đã cập nhật dữ liệu vào bảng.");
}
- 250 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
function updateError(event:SQLErrorEvent):void
{
trace("Lỗi: ", event.error.message);
}
Hoà n toà n tương tự vı́ dụ c.
f) Vı́ dụ thực thi truy va� n dạ ng delete.
import flash.data.SQLConnection;
import flash.data.SQLResult;
import flash.data.SQLStatement;
import flash.events.SQLErrorEvent;
import flash.events.SQLEvent;
…
var deleteStmt:SQLStatement = new SQLStatement();
deleteStmt.sqlConnection = conn;
var sql:String =
"DELETE FROM employees" +
"WHERE firstName = 'Bob' and lastName = 'Smith'";
deleteStmt.text = sql;
deleteStmt.addEventListener(SQLEvent.RESULT, deleteResult);
deleteStmt.addEventListener(SQLErrorEvent.ERROR, deleteError);
deleteStmt.execute();
function deleteResult(event:SQLEvent):void
{
trace("Đã xóa dòng dữ liệu được chọn.");
}
function deleteError(event:SQLErrorEvent):void
{
trace("Lỗi: ", event.error.message);
}
Hoà n toà n tương tự vı́ dụ c.
Ha� u he� t cá c mô i trường AIR cho cá c hệ đie� u hà nh thô ng dụ ng: Windows, Linux,
MacOS, Android, iOS đe� u ho� trợ hoà n hả o cá c đo� i tượng SQLConnection,
SQLStatement, SQLResult... Đặ c biệ t, ga� n đâ y, Oracle cũ ng đã ba� t đa� u phá t trie� n
mô i trường Oracle cho hệ đie� u hà nh Android và iOS. Do đó , là m việ c với cơ sở dữ
- 251 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
liệ u ba� ng cá c truy va� n SQL hoà n toà n thuậ n lợi cho cả mô i trường Desktop, Web
la� n Mobile.
- 252 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
- 253 -
CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO
Blank Page
- 254 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
Flex Builder cung cấp các công cụ để làm việc với hầu hết các ngôn ngữ lập trình
web: php, jsp, asp.net…, cung cấp công cụ để kết nối cơ sở dữ liệu, cung cấp các
thành phần để hiển thị giao diện trên các trang web với tương tác như các trình
ứng dụng trên Desktop… Về mặt soạn thảo ActionScript, Adobe Flex Builder tỏ ra
vượt trội so với các trình soạn thảo khác kể cả Adobe Flash Professional: chế độ
soạn thảo chuyên nghiệp – bắt lỗi, sửa lỗi, biên dịch… Nếu bạn đã có kinh nghiệm
sử dụng Eclipse IDE thì không khó khăn gì khi làm quen với Adobe Flex Buider.
a. Tạo một dự án trong Flex Buider
- 256 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
Một điều nữa các bạn cần lưu ý là phiên bản mà chúng tôi đang sử dụng là Adobe
Flex Buider 4 và ActionScript phiên bản 3.0. Điều này đảm bảo cho các các ví dụ
minh họa của chúng tôi trong giáo trình này sẽ hoạt động tốt trong các dự án của
bạn mà không vấp phải vấn đề nào.
b. Thao tác với một dự án trong Flex Builder
Mở một dự án đã tồn tại: Trong của sổ Package Explorer ở bên trái, bạn kích
chuột phải và chọn Import (hoặc vào File > Import).
Sau đó, bạn chọn Flex Builder Project (theo cách vào menu File) hoặc Import trực
tiếp (theo menu kích chuột phải). Hộp thoại sau đây sẽ hiện ra
- 257 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
- 258 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
Để chuyển đổi qua lại giữa các workspace, bạn vào File > Switch workspace >
Other. Trong cửa sổ xuất hiện, bạn duyệt đến vị trí workspace mà bạn chọn, sau
đó nhấp Ok. Adobe Flex Builder sẽ tự động tải tất cả các dự án lên Adobe Flex
Builder.
7.2. Cấu hình và cài đặt PaperVision3D cho Adobe Flex Buider
Tải PaperVision3D: bạn hãy truy cập vào địa chỉ sau đây
http://papervision3d.googlecode.com/files/Papervision3D_2.1.932.zip
Sau khi tải xong, bạn giải nén tập tin này vào một vị trí nào đó trên ổ đĩa. Bạn sẽ
thu được thư mục Papervision3D_2.1.932 và bên trong nó là thư mục src. Thư
mục src chứa nội dung như sau
Tạo dự án thư viện ActionScript: bạn hãy khởi động Adobe Flex Builder. Kích
chuột phải vào cửa sổ Package Explorer, chọn New > Flex Library Project. Trong
cửa sổ hiện ra, bạn đặt tên cho dự án này là PV3D( tức PaperVision3D).
Trong dự án mà bạn vừa tạo, có một thư mục src, bạn hãy copy toàn bộ nội dung
của thư mục src mà bạn thu được khi giải nén ở trên vào trong thư mục src này
(hoặc đơn giản, bạn có thể sử dụng thao tác kéo thả).
- 259 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
- 260 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
- 261 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
Theo cách tạo dự án ActionScript ở trên, Adobe Flex Builder đã mặc định sử dụng
default package, và bên trong package này chứa một lớp mặc định cùng tên với
dự án là PV3DTest.
Nội dung của lớp này như sau
package Lession01
{
import flash.display.Sprite;
- 262 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
Cuối cùng, bạn hãy bổ sung vào phương thức startRendering() để hiển thị đối
tượng được tạo theo cách phối màu được chọn lên thiết bị hiển thị của máy tính.
Sau đây là chương trình Hello đầy đủ để tạo một quả cầu 3D trong không gian.
package Lession01
{
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;
- 263 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;
Trong chương trình này, đối tượng sp được sử dụng không chỉ trong phương
thức khởi tạo, mà còn được sử dụng trong phương thức rotatenow. Do đó, đối
tượng này cần được khai báo như là một dữ liệu thành viên của lớp. Trong
phương thức khởi tạo, phương thức addEventListener được triệu gọi tương ứng
với sự kiện ENTER_FRAME. Khi sự kiện này xảy ra, hàm rotatenow được gọi.
Trong trường hợp này, hình cầu sẽ quay theo chiều của trục y – nhờ vào phương
thức yaw. Bạn hoàn toàn có thể tạo ra một cách quay mới nếu kết hợp ba phương
thức yaw, pitch và roll (hoặc một trong hai phương thức trên).
Tạo hiệu ứng động cho đối tượng 3D theo chuyển động của con trỏ chuột: để
tạo hiệu ứng động cho hình cầu trên theo chuyển động của chuột, ta cũng sử dụng
cùng phương thức trên nhưng kết hợp với tọa độ chuột. Khi đó, hàm rotatenow
có thể được viết như sau
public function rotatenow(e:Event):void{
sp.yaw((1420-mouseX)*0.01);
sp.pitch((800-mouseY)*0.01);
startRendering();
}
- 264 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
Các số liệu trong hàm này chỉ mang tính chất minh họa, mà không sử dụng một
cách thức tính toán nào. Bạn hoàn toàn có thể thay đổi giá trị các tham số trong
trường hợp này. Khi đó, bạn sẽ nhận được các hiệu ứng dịch chuyển theo trỏ
chuột khác nhau. Đây cũng là một cách thức giúp phát triển kĩ năng lập trình của
bạn. Bạn đừng e ngại rằng chương trình sẽ không hoạt động. Phương châm của
chúng tôi đặt ra trong giáo trình này là không chỉ cung cấp kiến thức cho bạn mà
còn phát triển tư duy sáng tạo của bạn trong thiết kế và lập trình trên Flash.
- 265 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
- 266 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
- 267 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
- 268 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
- 269 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
các đối tượng phức tạp, chúng ta có thể sử dụng các chương trình thiết kế 3D
chuyên nghiệp như Maya, sau đó, ta sẽ import các hình thể này vào trong Flash để
thiết kế theo kịch bản của mình. Chi tiết hơn chúng tôi sẽ giới thiệu trong mục
[7.5]. Trong một số phiên bản mới hơn (chỉ là phiên bản beta – phiên bản chúng
ta đang sử dụng là mới nhất cho đến thời điểm hiện tại), ngoài các đối tượng này
còn có thêm đối tượng Stars – đối tượng ngôi sao 3D. Vì đây là tính năng mới
trong phiên bản thử nghiệm, nên chúng tôi sẽ không đưa vào trong giáo trình này.
b. Các phương thức và thuộc tính của các hình thể.
Trong bảng sau đây, chúng tôi sẽ trình bày các phương thức và thuộc tính thường
hay sử dụng của các đối tượng 3D nguyên thủy đã nêu. Các phương thức và thuộc
tính này có thể là chung cho các đối tượng, cũng có thể là đặc trưng cho một đối
tượng nào đó. Adobe Flex Builder sẽ tự động kiểm tra một phương thức, thuộc
tính có phải là của đối tượng đang thao tác hay không. Vì vậy, chúng tôi sẽ không
đi sâu vào điều này, mà chỉ giải thích chức năng của mỗi phương thức hoặc thuộc
tính.
Phương thức
get set Giải thích
Thuộc tính
Thuộc tính độ trong suốt, được phân bố từ
alpha:Number x x 0..1. Giá trị alpha càng nhỏ thì độ trong
suốt của vật thể càng cao.
Tọa độ của vật thể trong không gian: x-
x, y, z: Number x x hoành độ, y-tung độ, z-cao độ. Tọa độ này
được tính theo đối tượng chứa nó.
rotationX, rotationY, Góc quay của vật thể theo các trục x, y, z
x x
rotationZ:Number tương ứng.
Độ phóng to theo cả ba chiều (scale) và
scale, scaleX, scaleY,
x x theo chiều x, y, z tương ứng với scaleX,
scaleZ: Number
scaleY, scaleZ.
Sử dụng như các phương thức và thuộc
scene:SceneObject3D x x
tính của đối tượng scene.
sceneX, sceneY, Tọa độ x, y, z của đối tượng tương ứng với
x
sceneZ: Number hệ tọa độ cảnh quay trong thế giới thực.
Trả về đối tượng Number3D, chứa các
Position:Number3D x x thông số liên quan đến tọa độ của vật thể
DisplayObject3D.
visible:Boolean x x Cho phép đối tượng hiển thị hay ẩn.
name:String x x Thiết lập tên cho đối tượng.
- 270 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
- 271 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
Ví dụ
- 272 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
- 273 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
Như bạn thấy, hình thể được phối màu theo dạng thức này trông giống một hình
2D thông thường. Sở dĩ như vậy là vì chúng ta không sử dụng đến các hiệu ứng
light và shader. Nếu bạn kết hợp với các hiệu ứng này, thì bạn sẽ nhận được một
kết quả tốt hơn. Hiệu ứng này chỉ đơn thuần phối màu đặc (solid color) cho đối
tượng hình thể.
c. Phối màu bằng Bitmap. Việc phối màu bằng bitmap có thể được chia làm hai
cách: nhúng trực tiếp ảnh bitmap vào trong phim Flash hoặc tải bitmap vào
movie trong mỗi lần thực thi.
Nhúng trực tiếp hình ảnh bitmap
Bước 1. Nhúng file bitmap vào trong phim Flash
[Embed(source="../Earth.jpg")]
private var EarthBmp:Class;
Trong trường hợp này, File Earth được đặt cùng thư mục với src, file actionscript
nằm trong thư mục src, do đó đường dẫn phải lùi một cấp.
Bước 2. Sử dụng hàm tạo của đối tượng BitmapMaterial
var earthbmp:BitmapData = new EarthBmp().bitmapData;
var earthmaterial:BitmapMaterial = new BitmapMaterial(earthbmp);
Tiếp theo, bạn triệu gọi đối tượng earthmaterial trong phương thức khởi tạo của
đối tượng hình thể cần phối màu.
scene.addChild(new Sphere(earthmaterial, 400, 20, 20));
- 274 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
Trong đó,
Ta có thể sử dụng dòng lệnh sau đây để thu được cùng kết quả Hình 142.
scene.addChild(new Sphere(new BitmapFileMaterial(“../Earth.jpg”, true), 400, 20,
20));
Trong cách này, bạn lưu ý rằng hình ảnh dùng làm màu tô cần phải được đính
kèm với file Flash theo đúng cấu trúc thư mục – tức file ảnh jgp nằm cùng cấp với
thư mục chứa file Flash sau khi được biên dịch.
Remarks: Trong các đối tượng material, có ba đối tượng FlatMaterial,
GouraudMaterial và PhongMaterial tương ứng với ba thuật toán Shading nổi
tiếng: thuật toán FlatShading, thuật toán Shading của Gouraud và thuật toán
Shading của Phong. Thuật toán Shading của Gouraud nhanh nhưng độ chính xác
không cao bằng thuật toán Phong2. Ngược lại, thuật toán Phong lại có tốc độ khá
chậm, nhưng nó là thuật toán phối màu 3D tuyệt với – thể hiện ở độ chính xác rất
cao. Chính vì lẽ đó, nếu bạn muốn thước phim Flash hoạt động nhẹ nhàng, trong
trường hợp cần Shading một bề mặt không đòi hỏi độ chính xác quá cao, bạn nên
sử dụng đối tượng GouraudMaterial. Tuy nhiên, nếu số phân mãnh trên đối
tượng tương đối nhỏ, bạn có thể sử dụng PhongMaterial. Phương thức khởi tạo
của các đối tượng này tương đối giống nhau, tuy nhiên nó cần triệu gọi đến đối
tượng Lights. Chúng ta sẽ quay lại sau khi tìm hiểu về đối tượng Lights.
• Tham số showLight cho phép ánh sáng được hiển thị hay không hiển thị.
• Tham số flipped chỉ áp dụng cho đối tượng 3D được tải từ file DAE. Nó chỉ
ra vùng tác dụng của ánh sáng trên khung ảnh.
Đối tượng PointLight3D này cũng có những phương thức và thuộc tính tương đối
giống với các đối tượng hình thể ở trên. Bạn hãy tham khảo bảng trên nếu muốn
sử dụng một phương thức hay thuộc tính nào đó.
2Tên đầy đủ là Bùi Tường Phong. Sinh năm 1942, mất 1975. Ông là một nhà khoa
học hàng đầu về đồ họa máy tính người Việt Nam.
- 275 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
Bây giờ, chúng ta sẽ sử dụng đối tượng PointLight3D này trong các phương thức
khởi tạo của ba đối tượng FlatMaterial, GouraudMaterial và PhongMaterial.
Đối tượng light là nguồn sáng phát ra, nó là một kiểu LightObject3D. Tham số
lightColor quy định màu chiếu sáng, tham số ambientColor quy định màu phối
xung quanh (do hiệu ứng từ các nguồn sáng khác nhau bao quanh), tham số
specularLevel chỉ định mức phản xạ màu của vật thể.
Theo cách khởi tạo này, ngoài cách phối màu bằng bitmap, ta còn sử dụng thêm
hiệu ứng tạo bóng. Kết quả thu được là một hình ảnh rất gần với thế giới thực.
Bạn hãy quan sát kĩ kết quả thu được khi kết hợp bitmap và hiệu ứng đổ bóng
trong ShadedMaterial ở hình minh họa bên dưới.
- 276 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
- 277 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
- 278 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
Bạn chỉ việc tìm kiếm mô hình sau đó tải nó về máy của bạn. Bạn sẽ nhận được
tập tin *.kmz. Tập tin này có thể đọc bởi Google Earth. Tuy nhiên, bản chất của tập
tin này cũng chỉ là tập tin nén. Bạn có thể giải nén bằng chương trình WinRar bạn
sẽ thu được một thư mục chứa tập tin DAE.
Với dự án này, chúng ta có rất nhiều mô hình 3D để khai thác và sử dụng trong
các dự án hoạt hình 3D của mình.
- 279 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
- 280 -
CHƯƠNG 7. THƯ VIỆN PAPERVISION3D
Blank Page
- 281 -
BÀI TẬP THỰC HÀNH
Hình 182 – Cá c trạ ng thá i củ a nhâ n vậ t khi chuye� n độ ng
Bước 4. Nha� p đô i chuộ t và o bie� u tượng movieclip. Lú c nà y, ta có the� thao tá c với
từng pha� n củ a đo� i tượng. Hã y chuye� n cá c pha� n thà nh cá c bie� u tượng MovieClip.
Bâ y giờ, ta có 9 pha� n đã được chuye� n đo� i thà nh movieclip. Tie� p theo, ta ghé p
chú ng lạ i với nhau và sử dụ ng cô ng cụ Bone đe� tạ o cá c khớp no� i giú p chuye� n
độ ng (Hı̀nh thứ 2 từ trá i sang).
Ta ca� n chú ý ra� ng, cá c trụ c ở pha� n thâ n và sẽ khô ng cho phé p di chuye� n. Do đó , ta
ca� n vô hiệ u hó a chức nă ng cho phé p chuye� n độ ng và xoay củ a những pha� n nà y
ba� ng cá ch nha� p và o chú ng và trong bả ng Properties, ta bỏ tù y chọ n rotation, x
translation và y translation.
Bước 5. Trê n TimeLine củ a Armature, ở Frame thứ 1, ta thay đo� i tư the� củ a đo� i
tượng như Hı̀nh 3 từ trá i sang. Nha� p và o Frame thứ 20 và nha� p phı́m F6, và thay
đo� i tư the� củ a đo� i tượng như Hı̀nh 4 từ trá i sang. Trong quá trı̀nh thay đo� i tư the�
củ a đo� i tượng, ta nê n sử dụ ng cá c phı́m mũ i tê n đe� đie� u chı̉nh vị trı́ cho phù hợp.
Bước 6. Đe� tạ o chuye� n độ ng me� m mạ i, thı̀ tư the� ở frame cuo� i cù ng (frame 20)
phả i trù ng khớp với tư the� ở frame thứ 1. Có the� bạ n sẽ nghı̃ ngay đe� n việ c sao
ché p vù ng frame từ 1 đe� n 20 sau đó lậ t ngược vù ng frame vừa được sao ché p.
Đie� u đó là hoà n toà n chı́nh xá c. Tuy nhiê n, khi bạ n sử dụ ng cô ng cụ Bone, vù ng
Timeline mặ c định khô ng cho phé p bạ n lậ t người mộ t pha� n củ a frame nà y (chı̉
cho phé p lậ t ngược toà n bộ ). Do đó , ta ca� n chuye� n dã y Frame ở che� độ Armater
thà nh cá c Keyframe riê ng biệ t (sử dụ ng kı̃ thuậ t Frame by Frame) ba� ng cá ch
nha� p chọ n vù ng Frame Armater, chọ n Convert to Frame by Frame Animation.
Bâ y giờ, ta copy vù ng keyframe đã được chuye� n đo� i (từ 1 đe� n 20), sau đó dá n và o
vị trı́ frame 21. Ta thu được vù ng dã y go� m 40 keyframe.
Chọ n vù ng keyframe từ 21 đe� n 40, nha� p chuộ t phả i và chọ n Reverse Frames. Nhờ
và o chức nă ng Onion skin, ta có the� quan sá t ke� t quả thu được như hı̀nh vẽ .
- 283 -
biệ t, cá c đo� i tượng khá c có the� bo� trı́ trê n cá c layer khá c nhau, tù y thuộ c và o mụ c
đı́ch tạ o hoạ t cả nh.
Nha� n Ctrl+Enter đe� kie� m tra ke� t quả .
Xem dự án: ..\Lession\Source\BaiTapNangCao\Pr02_Character_Animation.
Hình 184 – Chuye� n độ ng củ a nhâ n vậ t trong pho� i cả nh
- 284 -
Tạ i cá c keyframe trê n motion path nà y, ta cũ ng ca� n hiệ u chı̉nh lạ i mộ t so� tham so�
trong bả ng thuộ c tı́nh (như thuộ c tı́nh blur) đe� cho lửa trong trường hợp nà y
được thực hơn.
- 285 -
Bước 6. Tạ o hiệ u ứng khó i. Ta sử dụ ng cô ng cụ pen đe� vẽ mộ t kho� i vậ t the� hơi
lõ m ở giữa.
- 286 -
3. TẠO HIỆU ỨNG ZOOM
Bước 1. Sử dụ ng ả nh
landcape.ai đe� import và o
library củ a dự á n. Xó a bỏ đi
những chi tie� t khô ng ca� n
thie� t trong bức ả nh và sa� p
xe� p lạ i cho phù hợp.
Bước 2. Hã y chuye� n bức ả nh
nà y thà nh movieclip và ta sẽ
tạ o hiệ u ứng zoom camera
cho bức ả nh nà y.
Bước 3. Kı́ch chuộ t phả i và o
movieclip vừa tạ o, chọ n
create motion Tween, sau đó Hình 190 – Tạ o hiệ u ứng Zoom
chọ n cô ng cụ 3D translation
tool. Ké o frame cuo� i trong timeline củ a motion path đe� n vị trı́ frame 40 và đặ t
current frame tạ i vị trı́ frame 40 nà y (frame đá nh da� u đỏ ).
Dịch chuye� n movieclip theo chie� u z tie� n ve� phı́a trước và lưu ý cá c chie� u x và y
cũ ng phả i phù hợp đe� đặ t tiê u đie� m và o đo� i tượng ca� n phó ng to (vı́ dụ trong
trường hợp nà y má i vò m ngô i nhà ).
Bước 4. Lặ p lạ i bước 3 la� n nữa, đe� cho hiệ u ứng phong phú hơn, nhưng cũ ng chú
ý tậ p trung tiê u đie� m và o má i vò m củ a ngô i nhà .
Bước 5. Dừng chie� u phim khi quá trı̀nh phó ng to hoà n ta� t. Hã y tạ o thê m mộ t
layer và đặ t tê n là action. Tạ i frame thứ 40 củ a layer action, ta nha� n phı́m F6 đe�
chè n keyframe, kı́ch chuộ t phả i và o keyframe nà y, chọ n action và nhậ p và o lệ nh:
stop();
Nha� n Ctrl+Enter đe� kie� m tra ke� t quả .
Chú ý: ne� u trong phim có nhie� u movieclip phức tạ p, thı̀ đe� sử dụ ng hiệ u ứng zoom
nà y, ta nê n convert toà n bộ cá c đo� i tượng đó thà nh mộ t movieclip và á p dụ ng
hiệ u ứng zoom cho movieclip mới tạ o.
Xem dự án: ..\Lession\Source\BaiTapNangCao\Pr04_Zoom.
- 287 -
Hình 191 – Tạ o hiệ u ứng Zoom
4. TẠO BỂ CÁ
Bước 1. Sử dụ ng ả nh fishes.ai đe� import và o trong dự á n củ a Flash. Sau đó , chı̉nh
sửa đe� thu được bức ả nh như bê n dưới.
- 288 -
Bước 2. Chuye� n 4 chú cá lê n 4 layer khá c nhau và chuye� n đo� i chú ng thà nh cá c
movieclip.
Bước 3. Nha� p đô i chuộ t và o từng chú cá c. Trong timeline củ a mo� i movieclip cá
nà y, ta sẽ sử dụ ng motion Tween đe� tạ o chuye� n độ ng cho cá . Khi sử dụ ng motion
Tween, ta có the� sử dụ ng cá c cô ng cụ 3D đe� là m cho chuye� n độ ng củ a cá c chú cá
sinh độ ng và hợp lý hơn (khô ng nê n dù ng classic Tween).
Nha� n Ctrl+Enter đe� kie� m tra.
Xem dự án: ..\Lession\Source\BaiTapNangCao\Pr04_Fishes.
- 289 -
Bước 2. Bo� sung và o dự á n mộ t lớp có tê n là Particle.as. Lớp nà y ke� thừa từ lớp
Shape. Nó có hai thuộ c tı́nh thà nh viê n là to� c độ chuye� n độ ng củ a cá c phâ n mã nh
phá o hoa theo trụ c Ox và trụ c Oy tương ứng là _speedX và _speedY; mộ t hà m khởi
tạ o. Hà m tạ o có chức nă ng phá t họ a hı̀nh the� ban đa� u củ a phâ n mã nh phá o hoa.
Trong trường hợp nà y, phâ n mã nh phá o hoa sẽ được vẽ ba� ng mộ t hı̀nh trò n (thực
cha� t là eclipse nhưng có hı̀nh chữ nhậ t bao quanh là hı̀nh vuô ng nê n nó là hı̀nh
trò n). Ngoà i ra, lớp Particle cò n có thê m mộ t hà m Clear đó ng vai trò là mộ t hà m
hủ y. Hà m hủ y nà y sẽ xó a cá c phâ n mã nh phá o hoa (khi cá c phâ n mã nh tan bie� n
và o khô ng trung). Lớp Particle sẽ có mã nguo� n như bê n dưới:
package
{
import flash.display.Shape
- 290 -
được hiệ u ứng phá o hoa no� , ta ca� n mộ t mả ng cá c Particle. Do đó , lớp Explosion sẽ
có hai thuộ c tı́nh cơ bả n: mộ t mả ng cá c phâ n mã nh phá o hoa (sau khi no� ) là
_particles và so� lượng cá c phâ n mã nh phá o hoa là _number.
Trong hà m khởi tạ o củ a Explosion, ta ca� n tı́nh toá n sự chuye� n độ ng cho mo� i phâ n
mã nh phá o hoa trong khô ng gian. Đe� cho phá o hoa no� được sinh độ ng hơn, thı̀
mà u sa� c, so� lượng và kı́ch thước củ a cá c phâ n mã nh phả i được khởi tạ o mộ t cá ch
nga� u nhiê n.
//Số lượng phân mãnh
_number = Math.floor(Math.random() * 30) + 30;
//Màu sắc của các phân mãnh
var ct:Color = new Color();
ct.setTint (0xFFFFFF * Math.random(),1);
//Kích thước của các phân mãnh
var scale:Number = 3*Math.random();
Tie� p theo, ta ca� n tı́nh toá n sự chuye� n độ ng củ a cá c phâ n mã nh. Đe� cho cá c phâ n
mã nh cá ch đie� u nhau trê n mộ t vò ng trò n, ta ca� n tı́nh toá n độ lệ ch so với trụ c
chua� n Ox trê n đường trò n lượng giá c.
Oy
sin Ox
cos
- 291 -
Trong đó , gó c angle tương ứng với gó c lệ ch củ a từng phâ n mã nh. Phâ n mã nh đa� u
tiê n có gó c lệ ch là 0; phâ n mã nh tie� p theo có gó c lệ ch là angel+angleDifference;
phâ n mã nh tie� p theo nữa là angle+2*angleDifference,…
Theo mặ c định, cá c hà m lượng giá c củ a ha� u he� t ngô n ngữ lậ p trı̀nh đe� u sử dụ ng
tham so� mặ c định là radian, nê n ta ca� n chuye� n đo� i gó c lệ ch từ độ sang radian.
độ
𝑟𝑎𝑑𝑖𝑎𝑛 = .𝜋
180
Đe� đả m bả o chuye� n độ ng củ a cá c phâ n mã nh khô ng là m thay đo� i hı̀nh dá ng củ a
phá o hoa (hı̀nh trò n), ta ca� n đả m bả o gó c chuye� n độ ng khô ng thay đo� i. Đie� u đó có
nghı̃a là tọ a độ x và tọ a độ y củ a cá c phâ n mã nh phả i có sự thay đo� i câ n ba� ng: tọ a
độ x dịch lê n mộ t đoạ n cos củ a gó c lệ ch, và tọ a độ y dịch chuye� n lê n mộ t đoạ n là
sin củ a gó c lệ ch. Độ dịch chuye� n nà y ca� n được cậ p nhậ p thô ng qua hà m Update.
Khi chuye� n độ ng, cá c phâ n mã nh giả m độ trong suộ t alpha đe� tạ o hiệ u ứng da� n
bie� n ma� t. Khi độ alpha xuo� ng tha� p hơn 0 (trong trường hợp minh họ a là 0.1) thı̀
nó sẽ bị xó a bỏ khỏ i khung nhı̀n.
package {
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.display.Sprite;
import flash.events.*;
import fl.motion.Color;
import flash.geom.ColorTransform;
_particles = [];
- 292 -
ct.setTint (0xFFFFFF * Math.random(),1);
addChild (particle);
particle.y += particle._speedY;
particle.x += particle._speedX;
- 293 -
particle.alpha -= 0.02;
- 294 -
private var _timer:Timer = null;
private var _timer1:Timer = null;
private var _timer2:Timer = null;
private var _timer3:Timer = null;
private var _timer4:Timer = null;
private var _timer5:Timer = null;
private var _timer6:Timer = null;
private var _timer7:Timer = null;
private var _timer8:Timer = null;
private var _timer9:Timer = null;
private var _timer10:Timer = null;
private var roX:Number = 0;
- 295 -
_timer3 = new Timer(2900, 1);
_timer3.start ();
_timer3.addEventListener (TimerEvent.TIMER_COMPLETE, Explode);
- 296 -
}
this.visible = false;
}
}
}
Bước 5. Bo� sung thê m lớp Fireworks.as. Lớp nà y cho phé p ta có the� tạ o ra nhie� u
viê n phá o được ba� n lê n mà khô ng chı̉ giới hạ n mộ t viê n duy nha� t.
Trong minh họ a bê n dưới, mo� i la� n sẽ có 2 viê n phá o được ba� n lê n ba� u trời.
Nhưng chú ng khô ng được ba� n cù ng mộ t thời đie� m mà có độ tre� (vı̀ hai Timer
khởi tạ o hai hiệ u ứng phá o hoa có độ tre� thời gian khá c nhau la� n lượt là 2000 và
2400. Việ c tạ o độ tre� như trong vı́ dụ nà y, sẽ là m cho hiệ u ứng phá o hoa thê m
pha� n thú vị.
package
{
import flash.display.Sprite;
import flash.utils.Timer;
import flash.events.TimerEvent;
- 297 -
_timer1.start ();
}
Xem dự án:
..\Lession\Source\BaiTapNangCao\Pr05
_eCard.
- 298 -
Đâ y là mộ t trò chơi đơn giả n, dựa trê n cả m bie� n con quay củ a thie� t bị di độ ng.
Nhiệ m vụ củ a bạ n là nghiê ng má y đe� đưa bó ng và o cá c ô chı̉ định. Nhờ và o cả m
bie� n con quay, mà quả bó ng như na� m trê n be� mặ t củ a thie� t bị, và nhiệ m vụ củ a ta
là nghiê ng má y đe� đưa bó ng và o lo� .
Bước 1. Tạ o ba scene có tê n la� n lượt là : Intro, Game và About. Sau đó , trang trı́
cho chú ng như hı̀nh minh họ a bê n dưới:
- 299 -
củ a bó ng lớn hơn 0 và nhỏ hơn độ rộ ng củ a khung nhı̀n thı̀ mới cho phé p di
chuye� n theo tọ a độ x; tương tự với tọ a độ y).
d) Đe� kie� m tra quả bó ng rơi và o lo� tro� ng, ta ca� n kie� m tra tọ a độ củ a nó : ne� u tọ a
độ x củ a bó ng lớn hơn hoặ c ba� ng tọ a độ x củ a lo� và nhỏ hơn hoặ c ba� ng tọ a độ x
củ a lo� + chie� u rộ ng củ a lo� ĐO� NG THƠ�I tọ a độ y củ a bó ng lớn hơn tọ a độ y củ a lo�
và nhỏ hơn tọ a độ y củ a lo� + chie� u cao củ a lo� THI� bó ng rơi và o lo� . Ne� u bó ng rơi
và o lo� , ta sẽ tie� n hà nh cộ ng đie� m cho người chơi và lo� tro� ng sẽ bie� n ma� t, sau đó
nó sẽ hie� n thị ở mộ t vı́ trı́ mới. Vı́ trı́ mới củ a lo� tro� ng sẽ xua� t hiệ n mộ t cá ch nga� u
nhiên.
e) Tạ o mộ t nú t nha� n đe� quay trở lạ i scene Intro.
f) Bo� sung â m nhạ c và o cho game như đã hướng da� n ở trê n.
Sau đâ y là toà n bộ mã nguo� n củ a game.
Mã nguồn của scence Intro
stop();
txtPlay.buttonMode = true;
txtAbout.buttonMode = true;
- 300 -
txtExit.buttonMode = true;
var diem:int = 0;
function playmusic(e:TimerEvent):void
{
musicplayer.play();
}
function fl_AccelerometerUpdateHandler(event:AccelerometerEvent):void
{
movieClip_1.x -= event.accelerationX*100;
movieClip_1.y += event.accelerationY*100;
}
- 301 -
if(((movieClip_1.x>=one.x)&&(movieClip_1.x<=one.x+one.width))&&((mo
vieClip_1.y>=one.y)&&(movieClip_1.y<=one.y+one.height)))
{
one.x = randomNumber(0, stage.stageWidth - one.width);
one.y = randomNumber(0, stage.stageHeight - one.height);
one.play();
diem++;
txtDiem.htmlText = "<font color='#ffffff'>Đie� m: </font><font
color='#ff0011'>" + diem + "</font>";
}
if(movieClip_1.x<0)
movieClip_1.x = 0;
if(movieClip_1.y<0)
movieClip_1.y = 0;
if(movieClip_1.x>stage.stageWidth)
movieClip_1.x = stage.stageWidth;
if(movieClip_1.y>stage.stageHeight)
movieClip_1.y = stage.stageHeight;
}
Menu.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene_4);
function fl_ClickToGoToScene_4(event:MouseEvent):void
{
removeChild(one);
MovieClip(this.root).gotoAndStop(1, "Intro");
}
function fl_ClickToGoToScene_3(event:MouseEvent):void
- 302 -
{
MovieClip(this.root).gotoAndPlay(1, "Intro");
}
txtBack.buttonMode = true;
Cuo� i cù ng, nha� n Ctrl+Enter đe� kie� m tra ke� t quả . Cũ ng ca� n lưu ý ra� ng, game nà y là
game cả m bie� n con quay, nê n chı̉ có the� kie� m tra ke� t quả trê n thie� t bị di độ ng có
ho� trợ cả m bie� n con quay. Khi test, ta ca� n chọ n chức nă ng Publish ở menu File
(phı́m ta� t Alt+Shift+F12) và khô ng quê n bậ t chức nă ng Debug USB củ a thie� t bị.
- 303 -
Trong giao diệ n nà y, go� m có 4 Layer chứa cá c thà nh pha� n như sau:
- Layer Background: chứa hı̀nh ne� n. Bạ n có the� trang trı́ giao diệ n theo ý thı́ch củ a
mı̀nh
- Layer Level: chứa mộ t thà nh pha� n vă n bả n có tê n là txtLevel.
- Layer NextLevel: chứa mộ t thà nh pha� n vă n bả n có tê n là txtNext.
- Layer Actions: đe� soạ n thả o actionscript cho game ở stage.
Bước 2. Thie� t ke� hiệ u ứng chuye� n mà n. Hã y chuye� n đo� i đo� i tượng vă n bả n
txtNext sang movieClip và đặ t tê n là mvNext. Sau đó , hã y nha� p đô i chuộ t và o
movieClip nà y đe� và o Timeline củ a nó và hã y thie� t ke� hiệ u ứng bó ng mờ cho nó
nhờ và o Motion Tween như bê n dưới.
- 304 -
Hình 199 – Tạ o hı̀nh con bọ
Sau đó , hã y chuye� n nó sang movieClip và đặ t tê n là Bug. Trong thư việ n củ a dự
á n, hã y chọ n movieClip Bug nà y, kı́ch chuộ t phả i, chọ n Properties và chọ n Export
for ActionScript. Khi xua� t bả n cho ActionScript, ca� n lưu ý đặ t tê n lớp cho nó là
Bug. Tie� p tụ c kı́ch chuộ t phả i lê n movieClip Bug nà y trong thư việ n củ a dự á n, và
chọ n Edit Class, chọ n Flash Professional đe� chı̉nh sửa mã ngo� n cho lớp Bug nà y.
Lớp Bug ca� n có cá c thuộ c tı́nh thà nh viê n là speed – to� c độ chuye� n độ ng,
myRotation – gó c quay củ a rệ p khi chuye� n độ ng, xchange và ychange – khoả ng
cá ch dịch chuye� n theo chie� u x và theo chie� u y. Mộ t bie� n public dạ ng static là
count đe� cho bie� t so� lượng cá c con rệ p đã được tạ o ra (khởi tạ o là 0). Lớp khởi
tạ o sẽ khởi tạ o cá c tham so� mặ c định cho lớp Bug đo� ng thời triệ u gọ i 2 phương
thức fl_moveParticle – tạ o chuye� n độ ng cho rệ p và fl_clickToKill – nha� p chuộ t lê n
rệ p đe� tiê u diệ t nó . Sự di chuye� n củ a rệ p phả i được cậ p nhậ t liê n tụ c, do đó , ta sử
dụ ng Timer đe� tạ o ra sự chuye� n độ ng nà y. Khi rệ p chuye� n độ ng vượt giới hạ n
khung nhı̀n, thı̀ nó sẽ xua� t hiệ n ở phı́a rı̀a củ a cạ nh đo� i diệ n. Gó c quay củ a rệ p
cũ ng tı́nh toá n nga� u nhiê n đe� cho sự chuye� n độ ng củ a rệ p được sinh độ ng hơn.
Khi tạ o mới mộ t chú rệ p trong hà m khởi tạ o, ta ca� n tă ng bie� n count lê n 1; khi xó a
đi mộ t chú rệ p, ta ca� n giả m bie� n count đi 1. Sau đâ y là toà n bộ mã nguo� n củ a lớp
Bug.
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.utils.Timer;
import flash.events.TimerEvent;
- 305 -
private var speed:Number;
private var myRotation:Number;
private var ychange:Number;
private var xchange:Number;
private var timer:Timer;
function fl_moveParticle(e:TimerEvent):void
{
myRotation = myRotation + (Math.round(Math.random()*30-
15));
ychange = (Math.cos((Math.PI/180)*myRotation))*speed;
xchange = (Math.sin((Math.PI/180)*myRotation))*speed;
if (x<0)
{
x = parent.stage.stageWidth;
}
if (x>parent.stage.stageWidth)
{
x = 0;
}
if (y<0)
{
- 306 -
y = parent.stage.stageHeight;
}
if (y>parent.stage.stageHeight)
{
y = 0;
}
y = y - ychange;
x = x + xchange;
rotation = myRotation;
}
function fl_clickToKill(evt:MouseEvent):void
{
timer.stop();
parent.removeChild(this);
count--;
}
}
}
Bước 4. Kı́ch chuộ t phả i và o frame 1 củ a Layer Actions, chọ n Actions và nhậ p và o
nộ i dung sau đâ y:
import flash.events.Event;
import flash.utils.Timer;
import flash.events.TimerEvent;
var level:int = 0;
mvNext.visible = false;
function fl_NextLevel(e:TimerEvent):void
{
if(Bug.count==0)
{
mvNext.visible = true;
- 307 -
mvNext.gotoAndPlay(1);
timer.stop();
}
}
mvNext.buttonMode = true;
mvNext.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2);
function fl_MouseClickHandler_2(event:MouseEvent):void
{
level++;
for(var i:int = 0; i<2*level+2; i++)
{
var par:Bug = new Bug(5);
addChild(par);
}
txtLevel.htmlText = "<font color='#ffffff'>Level: </font><font
color='fff000'>" + level.toString() + "</font>";
timer.start();
mvNext.visible = false;
}
Mã nguo� n củ a chương trı̀nh khá đơn giả n. Bie� n level cho bie� n mà n chơi hiệ n tạ i là
mà n bao nhiê u. Mo� i khi so� lượng cá c con rệ p ba� ng 0 (tức Bug.count==0) thı̀ sẽ
xua� t hiệ n thô ng bá o qua mà n (Next Level). Khi nha� p và o chữ Next Level nà y,
người chơi có the� tie� p tụ c chơi mà n tie� p theo. So� lượng rệ p cho mo� i mà n chơi
được tı́nh theo cô ng thức:
so� lượng rệ p = 2*level + 2
Ne� u bạ n cả m tha� y so� lượng rệ p cho mo� i mà n chơi như the� nà y là quá nhie� u (hay
quá ı́t) thı̀ bạ n có the� thay đo� i cô ng thức tı́nh.
Cuo� i cù ng, hã y nha� n Ctrl+Enter đe� kie� m tra ke� t quả . Game nà y hoà n toà n phù hợp
cho cả Desktop la� n cá c thie� t bị di độ ng. Đặ c biệ t, nó ra� t thú vị cho cá c thie� t bị di
độ ng cả m ứng thô ng minh.
Đe� tă ng thê m độ khó cho game, bạ n có the� quy định thời gian chơi cho mo� i mà n.
Ne� u người chơi khô ng the� hoà n ta� t mo� i mà n trong thời gian quy định, thı̀ người
chơi nhậ n được thô ng bá o Game Over. Đie� u nà y cũ ng ra� t đơn giả n, cá c bạ n xem
như là bà i tậ p nhé .
- 308 -
8. XÂY DỰNG GAME NÔNG TRẠI VUI VẺ
Cha� c ha� n game nô ng trạ i vui vẻ khô ng cò n xa lạ gı̀ với nhie� u người. Tô i xin nha� c
lạ i luậ t chơi củ a game nà y: bạ n có mộ t so� tie� n ban đa� u. Bạ n sẽ chi trả đe� mua cá c
hạ t gio� ng đe� gieo tro� ng và chă n nuô i, xâ y dựng nhà cửa. Bạ n chı̉ được phé p sử
dụ ng so� tie� n mı̀nh có . Sau mo� i la� n thu hoạ ch, bạ n sẽ có mộ t so� tie� n tương ứng với
việ c bá n đi sả n pha� m đó . Trong game mà tô i hướng da� n xâ y dựng sau đâ y, chú ng
ta chı̉ thả o luậ n mộ t pha� n củ a game nô ng trạ i vui vẻ : chı̉ khả o sá t khı́a cạ nh tro� ng
trọ t. Những mặ t như chă n nuô i và xâ y dựng, cá c bạ n là m hoà n toà n tương tự ne� u
như đã hie� u cá ch là m trong hướng da� n nà y.
Bước 1. Tạ o mộ t khung thie� t ke� kı́ch thước 1000x500. Trong stage nà y, ta ca� n tạ o
hai Layer: Dialog và Game. Sau đó , la� n lượt tạ o cá c movieClip sau đâ y:
a) MovieClip mả nh đa� t – Land.
- Dù ng ả nh đe� ca� t mộ t pha� n có kı́ch thước 100x100 (hoặ c dù ng cô ng cụ đo� họ a
củ a Flash đe� phá t họ a ma� u hı̀nh mả nh đa� t).
- Kı́ch chuộ t phả i và o pha� n đo� họ a thu được nà y, chọ n Convert To Symbol và chọ n
MovieClip. Đặ t tê n cho nó là Land.
- Nha� p đô i chuộ t và o movieClip Land nà y đe� mở khung soạ n thả o củ a nó . Đo� i tê n
củ a Layer thà nh Process. Chè n thê m mộ t keyframe (nha� n F6) trong Timeline.
Như vậ y, trong Timeline củ a movieClip nà y, có hai keyframe. Hã y thay sao ché p
ả nh ở keyframe 1 sang keyframe 2 và hiệ u chı̉nh độ sá ng củ a nó sá ng hơn ả nh ở
keyframe 1. Vı́ dụ , ta có hai anh tương ứng với 2 keyframe củ a Timeline củ a đo� i
tượng movieClip Land như sau:
- 309 -
và khi chuộ t di chuye� n ra ngoà i nó . Đie� u đó giú p chú ng ta xá c định vị trı́ chı́nh xá c
củ a mả nh đa� t mà ta sẽ tie� n hà nh tro� ng trọ t.
b) Tạ o movieClip tro� ng câ y Anh đà o. Là m hoà n toà n tương tự như trê n. Phá t họ a
mộ t khung ả nh có kı́ch thước 100x100, sau đó chuye� n đo� i sang movieClip có tê n
là AnhDao. Nha� p đô i chuộ t và o movieClip AnhDao nà y đe� và o khung thie� t ke� dà nh
riê ng cho nó . Trong Timeline củ a AnhDao, ta tạ o ra 3 Layer và đặ t tê n la� n lượt là :
Action, Process (Layer nà y đo� i tê n từ Layer 1 mặ c định) và Land. Layer Land
dù ng đe� tạ o hı̀nh mặ t đa� t (kı́ch thước 100x100). Layer process tương ứng với cá c
giai đoạ n phá t trie� n củ a câ y Anh đà o. Tương ứng với bao nhiê u trạ ng thá i phá t
trie� n củ a câ y Anh đà o (gieo hạ t, nả y ma� m, lê n câ y con, đơm hoa, ke� t quả …) thı̀ ta
tạ o ra ba� y nhiê u keyframe tương ứng. Đe� đơn giả n, tô i chı̉ tạ o ra 3 keyframe,
nhưng keyframe đa� u tiê n tô i khô ng sử dụ ng (ne� u muo� n, bạ n có the� tạ o ra nhie� u
hơn).
- Trê n Layer Action, tạ o 3 keyframe tro� ng và tương ứng với mo� i vị trı́ củ a cá c
keyframe (frame 1, frame 2, frame 3, … củ a Layer Action), ta la� n lượt chè n và o
cá c dò ng lệ nh:
stop();
- Trê n Layer Land, ta chı̉ sao ché p hı̀nh ả nh củ a nó trê n cả 3 frame (tức nha� n
phı́m F5).
- Trê n Layer Process, ta tạ o ra 3 hı̀nh ả nh trê n 3 keyframe (tương ứng với 3 trạ ng
thá i phá t trie� n củ a câ y Anh đà o).
Hình 201 – Quá trı̀nh phá t trie� n củ a câ y Anh đà o
Lưu ý: mả nh đa� t ở hı̀nh đa� u tiê n na� m trê n Layer Land. Trê n Layer Process,
keyframe 1 là keyframe tro� ng; hı̀nh ả nh câ y (khô ng có hı̀nh ne� n, hı̀nh nê n được
tạ o bởi Layer land ở phı́a dưới) tương ứng với keyframe 2 và hı̀nh 3 tương ứng
với keyframe 3.
c) Tạ o movieClip tro� ng câ y O� c chó . Là m hoà n toà n tương tự movieClip AnhDao.
Ta thu được movieClip OcCho. Hı̀nh ả nh minh họ a cho movieClip nà y như bê n
dưới:
- 310 -
Hình 202 – Tie� n trı̀nh phá t trie� n củ a câ y O� c chó
d) Tạ o movieClip đe� là m hộ p thoạ i chọ n cá c sả n pha� m. Thie� t ke� mộ t hộ p thoạ i
như bê n dưới. Đặ t tê n cho nó là dialog. Hộ p thoạ i dialog nà y được đặ t trong Layer
Dialog trong stage chı́nh.
- 311 -
Hình 205 – Thanh TimeLine củ a game Nô ng trạ i vui vẻ
Bước 2. Soạ n thả o mã nguo� n cho cá c đo� i tượng Land. Trong thư việ n củ a dự á n,
chọ n đo� i tượng Land, kı́ch chuộ t phả i, chọ n Edit Class sau đó lưu lạ i với tê n là
Land.as. Sau đó , nhậ p nộ i dung như sau:
package {
import flash.display.MovieClip;
import flash.events.MouseEvent;
function getCoord(e:MouseEvent):void
{
_x = x;
_y = y;
parent.getChildByName("dialog").visible = true;
}
function doMark(e:MouseEvent):void
{
gotoAndStop(2);
- 312 -
}
function delMark(e:MouseEvent):void
{
gotoAndStop(1);
}
}
}
Giải thích: Trong lớp Land nà y, có hai thuộ c tı́nh tı̃nh và cô ng khai (được quy định
bởi từ khó a static và public) là tọ a độ _x và _y. Hai thuộ c tı́nh nà y được quy định
như vậ y đe� ta có the� truy cậ p mộ t cá ch tự do trực tie� p qua tê n lớp mà khô ng ca� n
phả i qua đo� i tượng củ a lớp. Khi ta nha� p chuộ t và o mộ t mã nh đa� t nà o đó , thı̀ tọ a
độ củ a mả nh đa� t vừa được nha� p và o ca� n được lưu lạ i đe� ta bie� t chı́nh xá c vị trı́
ca� n thực hiệ n việ c tro� ng trọ t.
Hà m tạ o củ a lớp Land chứa hai tham so� mX và mY tương ứng với tọ a độ ca� n đặ t
mã nh đa� t. Khi chuộ t di chuye� n trê n mộ t mả nh đa� t, thı̀ mả nh đa� t đó phả i được
chuye� n mà u đe� ta phâ n biệ t được so với cá c mả nh đa� t khá c. Đe� thực hiệ n đie� u
nà y, ta ca� n bo� sung hai sự kiệ n MOUSE_OVER và MOUSE_OUT cho đo� i tượng Land
nà y. Khi nha� p chuộ t và o đo� i tượng Land, thı̀ sẽ là m xua� t hiệ n hộ p thoạ i chọ n sả n
pha� m và đo� ng thời lưu lạ i vị trı́ củ a mả nh đa� t vừa nha� p chuộ t và o. Đe� truy cậ p
đe� n đo� i tượng dialog na� m trê n khung soạ n thả o chı́nh, ta ca� n truy cậ p thô ng qua
thuộ c tı́nh parent (đo� i tượng cha củ a Land – vı̀ Land na� m trê n stage). Do đó , ta có
cá ch truy cậ p
parent.getChildByName("dialog").visible = true;
Thuộ c tı́nh visible đe� quy định đo� i tượng là a� n (false) hay hiệ n (true).
Khi di chuye� n chuộ t trê n mã nh đa� t, thı̀ mã nh đa� t đó sẽ sá ng lê n (tương ứng với
frame thứ 2 củ a Land), nê n ca� n nhả y đe� n frame nà y – gotoAndStop(2). Hoà n toà n
tương tự khi chuộ t di chuye� n khỏ i mả nh đa� t đó , thı̀ phả i chuye� n trở lạ i frame 1.
Bước 3. Tạ o mới mộ t lớp Product và đặ t tê n là Product.as. Lớp nà y cho phé p mô
tả cá c đo� i tượng tro� ng trọ t. Mo� i đo� i tượng tro� ng trọ t go� m có cá c thuộ c tı́nh sau:
thời gian ca� n thie� t đe� thu hoạ ch đo� i tượng – total; thuộ c tı́nh trạ ng thá i kie� m tra
tı̀nh trạ ng phá t trie� n củ a đo� i tượng – tstart (nó ba� t đa� u từ giá trị củ a total, sau
mo� i giâ y nó sẽ giả m đi 1, đe� n khi nà o nó nhậ n giá trị 0 thı̀ đo� i tượng đã sa� n sà ng
thu hoạ ch); thuộ c tı́nh incoin – so� tie� n thu được sau mo� i la� n thu hoạ ch đo� i tượng;
thuộ c tı́nh outcoin – so� tie� n bỏ ra khi mua đo� i tượng; thuộ c tı́nh txtStatus đe� hie� n
thị thời gian phá t trie� n củ a đo� i tượng; thuộ c tı́nh Timer đe� cậ p nhậ t tie� n trı̀nh
- 313 -
phá t trie� n củ a đo� i tượng, nó sẽ được cậ p nhậ t từng giâ y (1000ms). Mà nguo� n
toà n bộ củ a nó như sau:
package {
import flash.display.MovieClip;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.events.Event;
import flash.display.DisplayObject;
txtStatus.x = 0;
txtStatus.y = 0;
txtStatus.width = 100;
txtStatus.height = 20;
addChild(txtStatus);
- 314 -
this.txtStatus.addEventListener(Event.ENTER_FRAME,
fl_ClickToBringToFront);
addEventListener(MouseEvent.MOUSE_OVER, msover);
addEventListener(MouseEvent.MOUSE_OUT, msout);
}
function fl_ClickToBringToFront(event:Event):void
{
this.addChild(event.currentTarget as DisplayObject);
}
function msover(e:MouseEvent):void
{
txtStatus.visible = true;
}
function msout(e:MouseEvent):void
{
- 315 -
txtStatus.visible = false;
}
function update(e:TimerEvent):void
{
tstart--;
txtStatus.htmlText = "<font size='18'>" +
Product.numToDate(tstart) + "</font>";
if(tstart<=0)
gotoAndStop(3);
}
function Havest(e:MouseEvent):void
{
if(tstart<=0)
{
MovieClip(root).tongdiem += incoin;
MovieClip(root).txt.htmlText = "<font color='#ffffff'
size='16'>Tổng điểm: " + MovieClip(root).tongdiem.toString() + "</font>";
tstart = total;
gotoAndStop(2);
}
}
function Delete(e:MouseEvent):void
{
parent.removeChild(this);
}
}
}
Giải thích: Hà m khởi tạ o củ a lớp Product chứa cá c tham so� : tt – tương ứng với
total, c – tương ứng với incoin và oc – tương ứng với outcoin. Lớp Product kı́ch
hoạ t cá c cá c sự kiệ n: CLICK – tương ứng với thu hoạ ch (ne� u đo� i tượng đã sa� ng
sà ng); DOUBLE_CLICK – tương ứng với việ c xó a bỏ đo� i tượng.
addEventListener(MouseEvent.CLICK, Havest);
addEventListener(MouseEvent.DOUBLE_CLICK, Delete);
- 316 -
Khi thu hoạ ch, thı̀ ca� n cậ p nhậ p so� tie� n lạ i cho đo� i tượng. Bie� n to� ng đie� m ta sẽ
khai bá o ở khung soạ n thả o ở stage. Khi muo� n truy cậ p đe� n bie� n nà y từ mộ t vị trı́
khá c trong vù ng action củ a đo� i tượng con, ta sử dụ ng cú phá p:
MovieClip(root).tongdiem…
Trong stage nà y, ta cò n có mộ t đo� i tượng vă n bả n là txt đe� hiệ n thị đie� m hiệ n thời
mà người chơi có . Cá ch truy cậ p đe� n đo� i tượng nà y hoà n toà n tương tự. Đo� i với
đo� i tượng vă n bả n, ne� u đơn thua� n chı̉ là vă n bả n (khô ng có định dạ ng) thı̀ ta sử
dụ ng thuộ c tı́nh text, ne� u có định dạ ng theo phong cá ch html thı̀ ta sử dụ ng thuộ c
tı́nh là htmlText.
Trê n mo� i đo� i tượng cò n có mộ t đo� i tượng vă n bả n là txtStatus, nó dù ng hie� n thị
trạ ng thá i phá t trie� n củ a đo� i tượng. Mặ c định, nó sẽ bị a� n. Nó chı̉ hie� n thị khi trỏ
chuộ t đưa lê n trê n nó .
Đe� đả m bả o cho mộ t đo� i tượng luô n hie� n thị lê n trê n cá c đo� i tượng khá c, ta bo�
sung và o sự kiệ n ENTER_FRAME dò ng tương ứng
this.txtStatus.addEventListener(Event.ENTER_FRAME, fl_ClickToBringToFront);
function fl_ClickToBringToFront(event:Event):void
{
this.addChild(event.currentTarget as DisplayObject);
}
Cá c thuộ c tı́nh incoin và outcoin được quy định là protected nê n nó chı̉ được
phé p truy cậ p trong nộ i bộ lớp hoặ c trong cá c đo� i tượng khá c ke� thừa từ lớp đó .
Do đó , ta ca� n bo� sung thê m phương thức Getter đe� la� y giá trị củ a chú ng từ cá c lớp
khô ng có quan hệ họ hà ng với nó .
public function getIncoin():Number
{
return incoin;
}
- 317 -
public class AnhDao extends Product {
}
Phương thức super cho phé p tie� p nhậ n hà m tạ o củ a lớp mà nó ke� thừa.
Bước 5. Thie� t ke� lớp câ y OcCho. Hoà n toà n tương tự như đo� i với lớp câ y AnhDao.
Ta lưu lớp câ y OcCho dưới tê n OcCho.as. Nộ i dung củ a lớp nà y như sau:
package {
}
Bước 6. Xâ y dựng mã lệ nh cho hai button btAnhDao và btOcCho ở movieClip
dialog. Nha� p đô i chuộ t và o movieClip dialog đe� mở khung thie� t ke� củ a movieClip
nà y. Ba� m chọ n btAnhDao, mở vù ng code snippets và chọ n chức nă ng Event
Handlers > Mouse Click Event. Sau đó , nhậ p nộ i dung và o cho sự kiệ n nà y. Cụ the� ,
ta có mã nguo� n củ a giai đoạ n nà y như bê n dưới:
btAnhDao.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_4);
function fl_MouseClickHandler_4(event:MouseEvent):void
{
var anhdao:AnhDao = new AnhDao(30, 80, 50);
if(MovieClip(parent).tongdiem>=anhdao.getOutcoin())
{
parent.addChild(anhdao);
anhdao.x = Land._x;
anhdao.y = Land._y;
MovieClip(parent).tongdiem -= anhdao.getOutcoin();
- 318 -
MovieClip(parent).txt.htmlText = "<font color='#ffffff' size='16'>Tổng
điểm: " + MovieClip(parent).tongdiem.toString() + "</font>";
}else
MovieClip(parent).txt.htmlText = "<font color='#fff000'
size='16'>Không đủ tiền !</font>";
}
Bước 7. Xâ y dựng mã lệ nh cho nú t btOcCho. Ta là m hoà n toà n tương tự như
bước 6. Mã lệ nh cho giai đoạ n nà y thu được như sau:
btOcCho.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_5);
function fl_MouseClickHandler_5(event:MouseEvent):void
{
var occho:OcCho = new OcCho(60, 100, 60);
if(MovieClip(parent).tongdiem>=occho.getOutcoin())
{
parent.addChild(occho);
occho.x = Land._x;
occho.y = Land._y;
MovieClip(parent).tongdiem -= occho.getOutcoin();
MovieClip(parent).txt.htmlText = "<font color='#ffffff' size='16'>Tổng
điểm: " + MovieClip(parent).tongdiem.toString() + "</font>";
}else
MovieClip(parent).txt.htmlText = "<font color='#fff000'
size='16'>Không đủ tiền !</font>";
}
Lưu ý:
- Khi thực thi bước 6 và bước 7, mã lệ nh củ a 2 bước nà y ca� n đặ t và o trong frame
củ a layer Action.
- Khi soạ n thả o hai bước 6 và 7 nà y, cũ ng ca� n thie� t phả i nhậ p và o sự kiệ n củ a
chuộ t: import flash.events.MouseEvent;
Bước 8. Nhậ p mã nguo� n cho stage củ a dự á n. Trong pha� n nà y, ta ca� n:
- Quy định hộ p thoạ i dialog luô n đứng no� i lê n trê n mọ i đo� i tượng. Cá ch thực hiệ n
như đã nó i ở bước 3.
- Ca� n ló t cá c mã nh đa� t đe� la� p kı́n khung nhı̀n. Mo� i mà nh đa� t có kı́ch thước
100x100, nê n ta có the� lợi dụ ng đie� u nà y đe� sử dụ ng vò ng lặ p.
for(var i:int = 0; i<5; i++)
for(var j:int = 0; j<10; j++)
{
- 319 -
var land:Land = new Land(100*j, 100*i);
addChild(land);
}
- Theo mặ c định, hộ p thoạ i dialog ca� n phả i a� n, nê n ta quy định thuộ c tı́nh visible =
false.
Toà n bộ mã nguo� n củ a stage nà y được đặ t và o frame 1 củ a Layer Game.
import flash.events.Event;
import fl.text.TLFTextField;
import fl.controls.Label;
this.dialog.addEventListener(Event.ENTER_FRAME, fl_ClickToBringToFront);
function fl_ClickToBringToFront(event:Event):void
{
this.addChild(event.currentTarget as DisplayObject);
}
dialog.x = 340;
dialog.y = 150;
dialog.visible = false;
dialog.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
function fl_MouseClickHandler(event:MouseEvent):void
{
dialog.visible = false;
}
- 320 -
txt.width = 150;
txt.x = stage.stageWidth - txt.width;
txt.y = stage.stageHeight - txt.height;
addChild(txt);
txt.addEventListener(Event.ENTER_FRAME, fl_ClickToBringToFront);
Cuo� i cù ng, nha� n to� hợp Ctrl+Enter đe� kie� m tra ke� t quả . Game nà y hoà n toà n
tương thı́ch với cá c thie� t bị chạ y AIR cho Desktop la� n cá c thie� t bị điệ n thoạ i chạ y
Android và iOS.
1. Tạo Layer 1 và đổi tên thành BauTroi. Chọn biểu tượng bảng màu. Chọn
Stroke color = None, Fill Color = Linear Gradient. Chọn chế độ đổ màu
Extends Color. Trong kiểu đổ màu cầu vồng này, bạn chỉ chọn hai màu:
- 321 -
màu đen (mã màu là #000000) đến màu đen trắng (mã màu #999999),
trong đó màu đen ở phía trên, màu đen trắng ở phía dưới. Sử dụng công cụ
Rectangle, tạo một hình chữ nhật ở trên Layer này. Sử dụng bảng hiệu
chỉnh Align để can chỉnh kích thước và vị trí cho hình chữ nhật này trùng
khớp với kích thước Stage.
2. Tạo Layer 2 và đổi tên thành MatTrang. Chọn biểu tượng Oval với thuộc
tính Stroke Color = None, Fill Color là màu Radial Gradient (màu một có mã
màu là #FFFF00, màu 2 có mã màu là #FFFFFF). Hãy sử dụng công cụ
Gradient Transform để hiệu chỉnh kích thước của vòng màu bên trong lớn
hơn và đặt mặt trăng vào vị trí thích hợp trên bức tranh này.
3. Sử dụng công cụ PolyStar để tạo một ngôi sao màu vàng nhạt, kích thước là
20x20. Convert ngôi sao này sang biểu tượng Graphics và đặt tên là Sao.
Chọn công cụ Spray Brush, chọn biểu tượng cho nó là Sao ở trên. Hiệu
chỉnh các thông số như sau:
Scale width = 20%
Scale height = 25%
Chọn cả ba tùy chọn Random Scaling, Rotate Symbol và Random Rotation.
Hiệu chỉnh kích thước của Brush là width=height=300px, Brush Angel là
90 CW.
Tạo mới Layer đặt tên là Sao. Hãy quét nhanh công cụ Spray Brush này lên
Layer này để tạo các ngôi sao nhỏ trên bầu trời.
4. Tạo mới một Layer và đặt tên là KhungCua. Sử dụng công cụ Rectangle
Primitive để tạo một hình chữ nhật có kích thước width=200, height=150,
chọn Fill color là None, Stroke color là màu đen, loại đường viền style là
stippled, kích thước của đường viền là 5px. Sử dụng công cụ Deco để đổ
màu nghệ thuật (cành hoa nho) cho khung cửa sổ này.
5. Tạo mới Layer đặt tên là NgoiNha. Hãy sử dụng các công cụ cần thiết để vẽ
nên ngôi nhà mơ ước của bạn. Lưu ý: hãy sử dụng màu sắc thật hài hòa
trong đêm tối.
6. Tạo mới Layer đặt tên là DamMay. Hãy sử dụng công cụ Pen để tạo nên
các đám mây có viền cong. Tô màu cho nó bằng màu xanh nhạt (mã màu
#66CCCC) và hãy loại bỏ viền của nó.
7. Tạo mới Layer đặt tên là ConNguoi. Hãy sử dụng các công cụ cần thiết để
phát họa chân dung của một cô gái đang đi dưới ánh trăng.
8. Tạo mới Layer đặt tên là DenLong. Hãy phát họa cây đền lồng và đặt nó
vào tay cô gái.
9. Tạo mới Layer đặt tên là CayCoi. Hãy phát họa hình một rặng tre hoặc một
cây cổ thụ. Chọn màu sắc hợp lý.
- 322 -
10. Tạo mới Layer đặt tên là TieuDe. Sử dụng công cụ Text để soạn thảo trên
Layer này nội dung “Ánh Trăng Trên Quê Hương”.
1. Hãy chuyển đổi MatTrang trong Layer 2 thành biểu tượng MovieClip và
đặt tên cho nó là MatTrang. Hãy sử dụng Classic Tween để tạo hiệu ứng
động cho mặt trăng. Mặt trăng có hai hiệu ứng động là: đổ bóng mờ và di
chuyển. Để tạo hiệu ứng bóng mờ, hãy sử dụng thuộc tính Filter=Blur của
MovieClip. Các thao tác này chỉ được sử dụng Classic Tween.
2. Hãy xóa bỏ các ngôi sao trên bầu trời ở trên. Trong thư viện, hãy chọn lại
biểu tượng Graphic là Sao mà bạn đã tạo. Bạn hãy chuyển đổi nó thành
MovieClip. Sử dụng Motion Tween để tạo hiệu ứng tăng giảm độ trong suốt
(thuộc tính Alpha của MovieClip). Thuộc tính này thay đổi từ 80% đến
100%. Tiếp tục sử dụng công cụ Spray Brush, lần này bạn chọn biểu tượng
cho nó là MovieClip Sao. Hiệu chỉnh các thông số tương tự như bài thực
hành số 1. Sau đó, quét lên Layer Sao.
3. Hãy sử dụng công cụ Bone để tạo chuyển động cho đôi chân cô gái. Các
phần còn lại không cần tạo chuyển động. Bạn kết hợp với Motion Tween để
tạo sự di chuyển (thay đổi vị trí trong bức ảnh) cho cô gái.
4. Sử dụng Motion Tween để tạo chuyển động cho các đám mây. Các đám mây
chuyển động theo dạng thức 3D (kết hợp công cụ 3D Rotation và 3D
Translation).
5. Hãy tạo mới một Layer đặt tên là BienHinh. Trên Layer này, bạn hãy tạo
một ngũ giác. Sử dụng Shape Tween để tạo hiệu ứng biến hình cho hình thể
này thành hình ngôi sao năm cánh. Hãy đặt nó vào một vị trí thích hợp.
- 323 -
Hãy sử dụng các công cụ tạo hoạt hình (Tween, Bone, Bind, 3D,…) để tạo một
VideoClips. Lưu ý trong bài này, sinh viên cần kết hợp với một bài hát. Nội dung
phim và nội dung bài hát phải tương đối phù hợp. Bài hát dài không dưới 1 phút.
1. Tạo một đối tượng quả bóng bằng công cụ Oval. Sau đó, hãy chuyển đổi nó
thành biểu tượng MovieClip. Cài đặt tên thể hiện cho nó là QuaBong. Hãy
xóa quả bóng này trên Stage. Mở khung soạn thảo ActionScript, bây giờ
bạn hãy viết ActionScript để tạo chuyển động 3D cho quả bóng, thay đổi
thuộc tính alpha khi nó chuyển động. Sự thay đổi thuộc tính alpha này qui
định theo thời gian (thay đổi từ 80% đến 100%).
2. Tạo mới một Scene. Trên Scene này, bạn hãy sử dụng hai bức ảnh. Hiệu
chỉnh kích thước cho chúng bằng nhau. Kích thước của chúng không quá
lớn, sao cho ta có thể đặt chúng trên Stage nhưng vẫn còn khoảng trống. Sử
dụng đối tượng Tween để tạo hoạt hình cho hai bức ảnh này.
Để tạo hoạt hình nhờ vào Tween trong ActionScript, bạn có thể thao tác
như hướng dẫn sau:
Hãy đưa hai đối tượng ảnh này vào trong thư viện, sau đó chuyển đổi
chúng thành các biểu tượng MovieClip, và đặt tên cho chúng lần lượt là
Anh1 và Anh2. Bạn quan sát mã chương trình sau
import fl.transitions.easing.*;
import fl.transitions.Tween;
var OneTween:Tween;
var TwoTween:Tween;
Ở đây, bạn sử dụng package fl.transition. Đối tượng Tween được đưa vào
để sử dụng. Các hiệu ứng động cũng được đưa vào qua dòng lệnh thứ nhất.
Tiếp theo, bạn hãy tạo chuyển động cho đối tượng nhờ vào đối tượng
Tween. Cách sử dụng Tween cũng tương tự như bạn tạo một Thread vậy.
- 324 -
TwoTween.start();
Đối tượng Tween có phương thức khởi tạo Tween(Object, String, Function,
Number, Number, Number, Boolean). Object là đối tượng mà ta sẽ áp dụng
hiệu ứng Tween; String là tên thuộc tính mà ta sẽ sử dụng – như “x”, “y”,…;
Function là tên phương thức sẽ áp dụng – chi tiết hơn bạn có thể thử
nghiệm với chức năng Add New Items to Script với gói fl.transition.easing;
Number thứ nhất và Number thứ hai là hai biên chuyển động. Number thứ
ba là số lần chuyển động (duration), tham số Boolean mặc định được sử
dụng là true. Hãy kiểm tra xem thử nó hoạt động hoàn hảo hay không. Đây
thực sự là cách tạo chuyển động rất hoàn hảo.
3. Tạo mới một dự án khác. Trong dự án này có ba file: file main.fla, file
human.as, file student.as. File main.fla là khung trình diễn chính. Các file
còn lại được sử dụng như các lớp. File human.as là một lớp chứa hai thuộc
tính là Name:String và Age:int và bốn phương thức chính là void
SetName(String), String GetName(void), void SetAge(int) và int
GetAge(void). Lớp student kế thừa lớp Human. Ngoài ra, nó còn có thêm
thuộc tính ID:String và hai phương thức void SetID(String), String
GetID(void). Quay trở lại với khung trình diễn chính, bạn hãy phát họa
hình một con người. Sau đó, bạn hãy convert nó sang biểu tượng
MovieClip. Cài đặt tên hiển thị cho nó là ConNguoi. Cuối cùng bạn hãy xóa
nó ra khỏi stage. Trên khung trình diễn này, bạn hãy tạo một Button và ba
textbox kèm theo ba label. Ba label có nội dung là: Tên, Tuổi, MãSV. Ba
textbox còn lại tương ứng dùng để nhập nội dung theo ba trường này
(Name, Age và ID). Khi người dùng nhập dữ liệu và nhấp nút Add, hình
người sẽ hiển thị ra bên dưới. Đồng thời, bên cạnh nó là các thông tin về
đối tượng này (Tên, Tuổi và MãSV).
4. Trong bài thực hành này, bạn hãy tạo một dự án gồm bốn file: main.fla,
solutions.as, solution1.as và solution2.as. Trên stage của main có ba
textbox và ba label tương ứng để nhập các số a, b và c. Một nút nhấn để giải
phương trình, và một label nữa để hiển thị kết quả. File solutions.as là một
interface chứa hai phương thức là DoSolution và ToString. Hai lớp
solution1.as và solution2.as là hai lớp thực thi giao diện solutions.as này.
Phương thức DoSolution của đối tượng trong solution1.as sẽ giải phương
trình bậc 1, phương thức DoSolution của đối tượng trong solution2.as sẽ
giải phương trình bậc hai. Phương thức ToString của cả hai đối tượng có
nhiệm vụ in ra nghiệm cuối cùng. Đối tượng trong solution1.as chứa hai
thuộc tính là a:Number và b:Number. Đối tượng trong solution2.as chứa ba
- 325 -
thuộc tính là a:Number, b:Number và c:Number. Sau khi bạn hoàn tất yêu
cầu này, hi vọng bạn sẽ hiểu rõ hơn về giao diện.
Dự án 1. Tạo một dự án Game bằng Flash kết hợp với ActionScript theo yêu
cầu sau
a) Màn hình Splash (scene 1): chỉ hiển thị bốn Menu: Play, Score, Help và Quit.
Play cho phép người dùng chuyển sang màn hình thứ hai (scene 2), trong
màn hình này, người dùng có thể chơi game. Score cho phép hiển thị kết
quả chơi, màn hình này tương ứng với scene 3. Help cho phép chuyển sang
màn hình trợ giúp (scene 4), trong màn hình này sẽ hiển thị vài thông tin
về game, cách chơi game.
b) Nội dung game có thể là game hành động, game thể thao, game học tập
nhưng cần phải được điều khiển bằng chuột hoặc bàn phím.
c) Nếu người dùng hoàn tất việc chơi game, thì sẽ hiện ra các thông số mà
người chơi đạt được: Họ và Tên (nhập vào từ đầu), điểm. Dữ liệu được đọc
từ file data.xml.
- 326 -
Dự án 2. Tạo một dự án phim hoạt hình bằng Flash kết hợp với ActionScript
theo yêu cầu sau
a) Phim mô tả một chủ đề bất kì nhưng phải có cấu trúc (có kịch bản).
b) Phim có độ dài không dưới 10 phút.
c) Có thanh Playback để điều khiển.
d) Có sử dụng âm thanh, tiếng nói (phải được đồng bộ với đối tượng trong
phim)
e) Không chấp nhận các Clip nhạc.
Dự án 3. Tạo một dự án kĩ xảo điện ảnh bằng Flash kết hợp với ActionScript
theo yêu cầu sau
a) Tạo một thước phim có sử dụng kĩ xảo điện ảnh (chỉ chấp nhận kĩ xảo điện
ảnh, không chấp nhận kĩ xảo truyền hình).
b) Phim có độ dài không dưới 10 phút.
c) Các kĩ xảo phải sử dụng phù hợp với nội dung, số lượng kĩ xảo không dưới
10.
d) Thước phim cuối cùng phải có nội dung.
- 327 -
Blank Page
- 328 -
TÀI LIỆU THAM KHẢO THÊM
- 329 -