Ebook hướng dẫn và thiết kế website bằng macromedia flash phần 2 TS hoàng vân anh
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (6.56 MB, 123 trang )
Chương 4
HUỚNG dAn Vlếr cAc Mfi «aiO N cơ bAn
Trong phần này chúng ta sẽ thực hiện những công việc sau:
Các khái niệm trong ngôn ngữ lập trình AS.
Sử dụng bảng Action Panel trong việc viết AS.
Sử dụng bảng Movie Explorer hỗ trợ việc lập trình.
Viết actions cho Frame, Symbol như thế nào?
Các bài tập ví dụ.
Các nội dung trước đã giới thiệu về cách viết Actionscript như thể nào.
Chương 4 sẽ chỉ hướng dẫn bạn hai cách viết Script đoTi giản mà vẫn hiệu
quả đó là cách viết gắn Script với một đối tượng symbol trong khung thiết
kế và cách thứ hai là gắn Script điều khiển một frame bất kỳ trong thanh
thước thời gian Timeline. Đó cũng là cơ sở để bạn nắm được kiến tìiức cơ
bản để làm các bài tập phía sau.
Nhưng trước khi bắt tay vào làm các bài tập ví dụ này ta cần làm quen
một sổ khái niệm về các đối tượng trong Action Script.
4.1. Các khái niệm trong ngôn ngữ lộp trình fìS
Actions: là một dãy các lệnh nằm ừong các file SWF. Mỗi một file
SWF có thể chứa từ một đến nhiều lệnh tùy tìieo chức năng của ứng dụng
được xây dựng. Nhiệm vụ của nó là điều khiển frame (khung hình), label
(nhãn), một đối tượng nào đang chạy..
Boolean: những biến được gán kiểu Boolean bao gồm hai giá frị ứiam
số là True (đúng), False (sai).
Classes : là các lớp mà người lập trình AS tự định nghĩa ra. Nó là một
kiểu định nghĩa riêng dành cho lớp đối tượng nào đó. Đê định nghĩa các
class (lóp), sử dụng từ khoá class và nó được tạo trong một file .AS.
63
Events', là các actions (hành động) hay còn gọi là các sự kiện xảy ra
trong khi file SWF đang chạy.
Expressions: chứa các toán tử và toán hạng. Ví dụ trong phép toán
X + 2 thì X và 2 là toán hạng còn phép tính + là toán tử.
Function (các hàm) : Mỗi hàm bao gồm một khối các mã lệnh có thể
sử dụng lại được. Các hàm này có thể được gán với một tham số nào đỏ và
trả về kết quả là một giá trị.
Identifers: là các tên gọi được sử dụng để chỉ ra đó là một biến
(variable), một thuộc tính (properties), một đối tượng (object), một hàm
(function), một cách thức (method). Ký tự đầu tiên của các tên gọi này phải
là một chữ cái, dấu gạch dưới (_), hay dấu dollar ($).
Instances: là các đối tượng phụ thuộc vào một lớp nào đó. Mỗi một
đổi tượng loại này trong một lớp đều chứa tất cả các thuộc tính và phương
thức hoạt động của lớp đó.
Instance names-. Là các tên gọi duy nhất của các Symbol trong một
file .FLA (hay file .SWF). Các tên này được người thiết kế đặí cho các
đoạn phim (movie) và các nút (button) Properties Panel. Và tên của chúng
được sử dụng ữong đoạn mã Script. Mồi một đối tưọng được gọi là
instance này được sinh ra tò một đối tượng symbol gốc. Mỗi đối tượng gốc
này có thể có nhiều instance nhưng mỗi một instance này nếu nằm trong
một file .FLA thì chúng chỉ có duy nhất một cái tên Và không được đặt
trùng tên với các đối tượng khác.
Keywords: Là các từ khoá có ý nghĩa đặc ưưng riêng khác nhau. Ví dụ
từ khoá Var cho phép định nghĩa một biến mới.
Methods: Là các hàm được kết hợp với một lớp nào đó. Khi sử dụng
chúng, người sử dụng chỉ việc truyền tham sổ vào.
Objects: là các đối tưọng được xây dựng để thực hiện một công việc
nào đó trong quá trình lập trình.
Properties-. Các thuộc tính của các đối tưọng.
Variables: Các biến được sử dụng để lưu trữ dữ liệu.
4.2. Sử dụng bỏng Rction Ponel trong việc viết RS
Bảng Action là bảng cho phép người thiết kế có thể viết và sửa các mã
Script để gán nó vào một đối tượng nào đó hay một frame. Bảng này được
64
chia thành ba khu vực khác nhau: Action Toolbox, Script Pane và Script
Navigator. Trong bảng Action Panel có thêm một số các nút chức năng như
gợi ý, tìm kiếm, thay thế, hiển thị số hàng trong đoạn script... giúp bạn có
thể tận dụng các hỗ trợ để viết các đoạn Script nhanh và hiệu quả hơn.
Để hiển thị bảng Action Panel (hinh 4.1), vào menu Windows Development Panels —Action hoặc nhấn phím F9.
Script pane: là khu vực để viết các đoạn mã chương trình. Có hai cách
để viết mãchưomg trinh:
9.
HƯỜNG DÁN VA TH ^TK I-.A
65
■
Cách 1 : Sử dụng chuột trái kéo thả và gắp các lệnh từ khu vực
Action Toolbox vào khu vực Script Pane (hình 4.2).
ActionScrÌpt 1.0 & 2.0
w
gotoAndPlay 0 ;
Global Functions
[¡0 Timelỉne Control
(ẵ) gotoAndPlây
0
goloAndStcfflu
|s° to the specified ^rame and pìaj^
@
nextScene
@
play
________i.
s
121 Current Selection
3
B ^
Layer i ỉ France 1
Scene 1
ịjj Layer 1 : Frame 1
Hình 4.2
•
Cách 2 : Viết các lệnh trực tiếp vào vùng Script Pane nhưng lưu ý
với cách viết này. Mặc dù các câu lệnh script không phức tạp và khó nhớ
nhưng nếu chỉ phạm những lỗi nhỏ nhất như nhầm lẫn giữa chữ in hoa và
chữ in thường thì câu lệnh khiến cho ừình duyệt không dịch và cũng Idiông
thể thực hiện được.
II ▼ Acliofis - PrlHmé
AcUonScripỉ 1.0 8« 2.0
I ỡ obal Functions
f|D Timeilnt Control
@) goloAndPlay
gotoAnđPlay
S] 1 of 2 (S gotoAr»dPiây( frame )j
gotoAndSlop
@ nextFrame
0
nextScene
@ pliy
íS.PiaỵẸĩ,#™,bi
ị
3
'-1 ^
I
■
„ ....
Current Seledỉon
Lay«r 1 ! Frame 1
Scène 1
n
ỉf| Layer l ! Frimft 1
Hình 4.3. Cách viết Script đúng
66
9. HƯỚNG OẲH WÀ ỉỵiỆ T KÊ.„e
Có một đặc điểm chưong trinh hỗ trợ việc lập trình bàng cách gợi ý
các tham số tiếp theo của một câu lệnh khi bạn gõ đúng lệnh. Ví dụ ở hình
4.3, với câu lệnh cho phép khung hình đang được hiển thị chuyển đến
khung hình do người lập trình tự thiết !ập trong câu lệnh này:
gotoÁndPlayO chướng trình sẽ gợi ý về tham số tiếp theo là sổ frame nào
hoặc số thứ tự của frame nằm trong Scene nào. Nhưng nếu bạn viết nhầm
câu lệnh này thì dòng gợi ý sẽ không hiện lên.
#
;
; ạ i dí %; Ĩ:Ị' 1
12.0 fps ^0.0s
<ị
^..... >.......... :
S ẽ “
&2.0
ctions
:
irl
Ẽ
8^
■ \scrip u
G o to Ấ ĩìđ P l a y
Gontrd
sAndPUy
ãAndStop
tPramé
Scene
SelecUon
Xjwr„t.a
H/n/j 4.4. Cách viết Script sai
Điều này ứtực sự là một khỏ khăn khi mới làm quen với ngôn ngữ AS,
tuy nhiên hoàn toàn cỏ thể khắc phục được khó khăn đó nếu ta kiên trì
luyện tập viết các lệnh với bảng Action Toolbox trước. Sau một thời gian
bạn sễ có kinh nghiệm và nắm được các quy tắc về viết lệnh.
Action toolbox: Bảng náy chứa toàn bộ các lệnh được phép viết ưong
Flash. Có thể coi nó giống như một cuốn từ điển lệnh. Action toolbox được
quản lý theo hình cây thư mục. Có rất nhiều hạng mục khác nhau được
phân chia theo tửng chức năng riêng (hình 4.5). Trong mỗi mục bao gồm
rất nhiều lệnh và câc lệnh này cho phép bạn có ứiể kéo và ứiả vào trong
vủng Script Pane.
67
®
± 7 7 ĨĨJ
ị
V ị
'1
2
(p3 Global Functions
/
( p j Timeline Control
@
goỉoAnđPlay
— @ goioAndsiop
@1 nexlFrame
Â
Các hạng mục
lệnh được phân
chia theo chức
năng riêng biệt
12.0fps Õ3Ĩ
iic tlo r is - P rỡ íiíc
■AdlonScript 1.0 6« 2.0
t
ệ : D □: % [•; ĩ
@
nexỉScene
@
play
I----- ^— i li
g o to A n d P la y (
------------------------------------ Ị
fu n c tio n s that control movie playbackj
(2) prevFr^me
/
@
prevScene
@
stop
@
stopAllSounds
Browser/Hetwork
^
Printing Fundions
^
Miscellaneous Functions
^11 MathemaUcâl Functions
-------------------- 1,1,.M I
-----------------
........... ..^^¿SmiCSiUn
Current Seledion
9
Layer 1 ! Frame 1
[a
tayerl
Ig
U yer
1:
Hinh 4.5
Code Hints: là các dòng chữ nằm trong bảng màu vàng đi kèm theo
khi thao tác vối các lệnh hoặc là các bàng lệnh tham số đi kèm đổi tượng
khi ta gõ vào câu lệnh chính hay tên đối tượng nào đó của nó. Nó là dòng
chữ gợi ý về cách viết cũng như sử dụng Gác tham số cho các lệnh đang
thao tác. Tuy nhiên nếu chương ữình không hiện các dòng Code Hints này
thì có thể thiết lập nó theo cách sau đây:
■
Chọn menu Edit - Preferences.
■ Click vào Actionscript Tab sau đó chọn chế độ enable (bật) hay
disable (tắt) chức năng hiển thị Code Hints.
Hình 4.6 khoanh vùng có sự lựa chọn Code Hints.
68
Preferences
Category
ActtonScript
General
ActionScrlpt
Auto Format
Clipboard
Drawing
Text
Warnings
Editing: 0Au¿acúattiUndentation
'ab size:
4
0 Code hints
0 seconds
Font:
Courier New
iv j| iO
□
Use dynamic for^ mapping
Open/Import; UTF-8 Encoding
vj
Save/Export: UTF-8 Encoding
^
Reload modified Flies: Prompt
Syntax colors: 0 Code coloring
Foreground; H
Background:
Keywords: H
Comments;
^
Hình 4.6
Sử dụng chức năng này đem lại rất nhiều lợi ích. Nó giúp bạn lập ừình
nhanh và hiệu ỂỊuả hơn. Sau đây là các minh hoạ cho sự ữợ giúp của Code
Hints (hình 4.7, 4.8).
V ▼ Actimis - Frame
V
ActionScripl 1.0 & 2.0
(|lj TimeBne Contrd
gotoAndPliy
goloAndStop
^ n«xtFr»m«
^ nexiScene
@ pUy
prevFrdme
0 prevScene
^ slop
^ stopAllSounds
^ Browser/Hetwork
0 fscommand
@ geỉURL
ỉoâdMovie
^ íoadMovieNum
---------------- —
IgetURK url, window, method);
V
___—
L á v e r 1 ! Fram e 1
líl t-ayer I :
1
UyiV'i'i
1
Hình 4,7
69
tio fis - F r a iw
p
:cript 1.0 & 2.0
Timeline Control
gotoAndPlay
@ press
@
@
@
@
@
@ gotoAndStop
nexlFrame
(ẵ) nextScene
@ piay
@ prevFrame
release
reledseOutside
roliOver
roHOut
dragOver
@ dragOut
@ keypress "<Left>
(2) prevScène
@ stop
k
L
@ slopAllSounds
Browser/Network
@ fiscommand
@ getURL
@ loadMovíe
(S) loadMòvieNum
W
▼
- ____............. -.....
Hình 4,8
Script Navigator: Trong bảng Action Panel, nó được sử dụng để ửiể hiện
mối liên kết giữa các đổi tượng ữong file Flash và các đoạn mã Script gắn kèm
(hình 4.9). Nếu trong quá ữình kiểm tra hay muốn sủa lại các đổi tượng hoặc
các đoạn Script, ta có thể click chuột vào tên tiêu đề của đối tượng đó.
5
10
15
so
20
ss
ịềSíaaiỊ
ũ
D ta:
i-ì
í
124) (ps
O.OÍ
<\
\
Cfip< 1 X 1 8 . 2 . 0
on (
T im tlm Control
®
gotoAn<#>ljiy
@
gotoAndStop
@
n®xlFr«r»«
ntórtScan*
€) p«*y
@
pre«Fr«me
@
prewScene
;v
1'
/
Đối tượng bị
gắn Action là
Frame 1
Current s«iectton
Sc«n« I
3
L ay er 1 t F ra m e 1
Hình 4.9
70
SoỊpt Assist
Chức năng cùa các biểu tượng trên thanh công cụ Toolbar:
4.3. Sử dụng bỏng Movi0 6cplorer hỗ trợ việc lộp trình
Bảng này có nhiệm vụ quản lý, tìm kiếm vả tập hợp tất cả các đổi
tượng dạng Text, Symbol, Sound, frame, layer và các action. Nó cho phép
người sử dụng quản lý các đối tượng trên theo từng bảng nhỏ và có thể ừuy
cập nhanh tới đối tượng đố frong một file Flash theo từng mục riêng của nổ.
Đe hiển ứiị bảng Movie Explorer, thực hiện các thao tâc sau:
Chọn menu Window - Other Panels - Movie Explorer. Bảng Movie
Explorer sẽ hiện lên như hình 4.10.
71
Ta đang đề cập đến việc bảng Movỉe Explorer hỗ trợ trong việc lập
trình như thế nào. Chú ý tới chức năng Hiện các đối tượng Scripts ừong
hình 4.10. Trong bảng này sẽ liệt kê tất cả các mã script được viếtữong
chương trình. Có thể mã đó viết cho đối tượng frame hoặc có thế viết cho
một đối tượng Symbol (bao gồm Movie Clip, Button). Khi click vào biểu
tượng có hình dấu
của khối script đó, nó sẽ liệt kê chi tiết phần mã lập
trình của Script này (hình 4.11).
ịí# HovleÉKplbr^
■m-
A □
ỉ;âi;
Frndi
f ic bum
SHI
iic SHI
i i c muus
i i c Poc
AcMonsfor proydssSar
onClipEvent (load)
Ji
\
total ^ joot.getSytesTotalO ;
}
onClipEvent (enterFrame)
\
b«ded = j-oot.getBytesLoadecK);
percent *= lnt( loaded j total * lOJ);
I
SB’*1riflHftH ’■
+ nf.rrftnl' +
Scene 1 -> layer
>:''1
-> Frama 1 -> progressBar
Hình 4.11
Neu muốn truy cập để sửa các đoạn mã này bạn chỉ cần ứiao tác click
đúp phím trái chuột. Bảng Action Panel sẽ tự động hiện ra đoạn code đó và
cho phép thay đổi, thêm, xoá các đoạn mã dễ dàng.
•8: >
^I
80.
'~ỏnCUpívẽnV Tìõãăr ”«'
to t« l •
^
lie CTOkrt
onCl»pEv«nt (ent«rFĩ«ine) i
lo«dc<t * tc>oc .«eti)y e« » L o o cl 8 c> (|;
» e r c e n c • i n t ( iữ(Mỉ«d i t o t « l • 10 0 } ;
texr. “
' ♦ percent. ♦
cout .tfũc.k»AfidlPỉay(2) ;
5»!
íỉ- SHÍ
I
ợ o to Ằ u d S to p (p e e c e n c ỉ ••
I f (lo a d e d — e o td i) )
é
^
ir
;
lls- Poc
onC%
)C^«« {
.(oot.getPytMToỉâ«}:
»
0fiO»)«v«it (ertwHame)
kxxlMỈ -
{
stóiteK).
c«írc«ni- r#
..
S««J
SOODđ
J ) s t 3 o r t 3,C ctl
V !; Jnttmceof:
fra 9 mnề»f
, CatorrMm»
ố
72
r ’ buRnr«
butnori
button copy
butttoficooyl
Ịịg bưwoo{opy2
buRtoncopyJ
Mơyie«
M0¥«<
Mi>v«ĩeC
Mỡvteí
Hình 4.12
4.4. Cách Viết actions cho Frame, Svmbol
Như đã nói ở phẩn đầu euổn sách, Actionscript có thể viết để điều
khiển rẩt nhiều đổi tượng. Nhưng trong nội dung yêu eầu kiến thức của
cuốn sách này sẽ hướng dẫn cách viết Script cho hai đổi tượng mà yẫn đạt
hiệu quả cao khi bạn muốn làm Project hoặc eác bầi tập lớn về Website, đỏ
!à các đối tượng sau đây:
■
Viết Script cho Frame
Frame có nghĩa là khung hình. Trên thanh thước thời gian Timeline có
chứa một dãy các khung hình có đánh số thứ tự. Khi các đoạn Movie Glip
(hay cởn gọi nôm na là các đoạn phim) chuyển động, người ta sẽ dùng
thanh thước này biểu đạt trạng thái thời gian và tốc độ chuyển động cùa
đoạn phim đó. Thường khi viết script loại này gắn với một frame thì frame
đỏ sẽ có ehức nẫíig điều khiển đoạn Movie khi đoạn Movie chạy đến vỊ trí
của frame nàv. Những script loại này thường được sữ dụng trong các điều
khiển như sau: Cho phép Play (chạy). Stop (dìmg), Loop (lặp lại), đi
chuyển hoặc dừng chuyển động không tuân theo thứ tự của các khung hình
trên thanh thước thời gian Timeline mà tuân theo sự chì định do đoạn
Actionscript đưa ra.
Cách thức để thêm Script vào khung hình như sau : Trỏ vào Frame cần
gắn đoạn mã. Sau đó click phải chuột, màn hinh sỗ xuất hiện menu với các
lệnh được phép ísử đụng eho khung hinli đó (hỉnh 4.13). Đi chuyển xuống
dưới đáy cúa menu sẽ thấy xuất hiện lệnh Action. Kích hoạt vào lệnh này,
con trỏ chuột tự động di chuyển vào vùng viết mã của bảng Action Panel.,
đây là nơi bắt đầu viết đoạn mã điều khiền.
Đưa ra một minh hoạ eụ thể hơn. Ví dụ, khi muốn đoạn movie clip '
dừng ngay lại khung hình đầu tiên thi sẽ thêm lệnh dừng stop 0 tại khung
hinh này. Nếu không nhớ lệnh này, ta có thể sử dụng bộ lệnh gợi ỷ trong
bàng Action. Công việc của bạn lúc này sẽ là lìm kiếm lệnh đó nằm trong
bộ lệnh nào rồi kéo thả nó vào vùng viết mã Script.
Bạn có thể làm theo gợi ý nliư sau để kiểm soát và tìm kiếm các lệnh
đon giản, clễ nhớ : ở đây ta Gần điều khiển một khung hình trên tbanh íhựởc
thời gian ĩHmeline. Ta sẽ thấy bộ lệnh điều khiển Timeline Control tPOing
bộ lệnh GíỊobal Function (hình 4.14). Trên hình 4.13, la sẽ ihấy trong bộ
lệnh Timeline Coĩilro! chứa lất cả các điều khiển về trạng thái hoạt động
của tìhanh thước thời gian Timeline.
IP HOONG OẰN VA miéT KÈ . A
7 3
o
MAcrMT^dia FMsh Professional 8 • [mftin*]
F9e E
Modify Text Cornmaiids Coofcrol Window H€^
i»
T oo k
main*
Tlmelme
B %
/ p
S
CP
ỐA
Layer 46
•
Layer 45
•
I P Layer 44
o □
«>
Scene 1
u ? Layer 43
m
‘v^ặắấtíkề-nm^
AcKonScri^ t.o & 2.0
Vl*w
o Q.
[Q
^
Colors
Ọp«rí»ofs
fW|l C o m p ^ Drcctives
20
25
30
Create Motion Tween
Insert Fraine
Remove Frames
Insert Keyframe
Insert Blank Keyframe
Clear Keyframe
Convert to Keyframes
Convert to Blank Keyfr«mes
Cut Frames
Copy Frarrves
Clear Frames
Select Al Frames
CcruAants
m
Options
n
®
•□
o<
mã
15
Sỉếỉ«tmntí
f l i t AcỉronScriỊ^ 2.0 Clj»s«s
^m
mĩSỆữ
•
10
TVP«
D«pr«cdted
f ip
Data C«T\pon«nts
^
Connpoiwds
Hinh4.13
Hình 4.14
Quay trở về với việc viết script cho frame thứ nhất. Sau khi gấp thả
lệnh stopO vào trong vùng viết mã chương trình, ta sẽ nhận thấy một sổ
thay đổi trong bảng Movie Explorer. Nố xuất hiện thêm một biểu tượng là
Actions for Frame 1 kèm theo lệnh síopộ ở bên dưới biểu tượng
(hìrứi 4.14). Đồng thời lúc này ừên tharứi thước thời gian Timeline xuất
hiện một biểu tượng chữ a được gắn kèm nhằm báo hiệu là frame này đã
được viết mã script điều khiển (hình 4.15).
74
10. HUỚNG DẰN VÀ THIỂT KẾ. B
Tưong tự nếu bạn muốn thực hiện
việc gắn action với các frame khác thì có
thể thực hiện thao tác như trên. Có một
điều cần chú ý là trong bảng Timeline
này bao gồm cả chức năng quản lý các
10
layer (lóp). Mỗi một lóp có thể có độ dài
« il □
khung hình khác nhau hay còn hiểu nôm e r 46
• * h |
na là thời gian các hình ảnh của các lóp er 45
• • P:
e
r
44
• • m\
xuất hiện có thể xuất hiện cùng một lúc
hay không. Nhưng điều này cũng không
Hình 4.15
làm ảnh huởng đến việc điều khiển hoạt
động cho frame bỏd vì khi đoạn phim chạy đến khung hình có chứa Action,
nó sẽ bị điều khiển bởi đoạn mã đính kèm frame đó cho dù action đó nằm
trên lớp nào.
■
Viết Script cho Symbol
Symbol là đổi tượng dạng đặc biệt của Flash. Một Symbol chửa nhóm
các đối tượng con và các đối tượng con này có thể là các hình vẽ dạng
Vector. Symbol có ba loại; Bitmap (ảnh tĩnh), Button (nút bấm) và Movie
Clip (đoạn phim). Cả ba đối tưỢng này đều được quản lý chung trong bảng
Library. Đe hiển thị bảng này, vào menu Window —Library (hình 4.16)
hoặc nhấn tổ hợp phím tắt Ctrl + L.
* conmandi Cortroí miidem Haip
Đi««ut>Wndo.»
.v: ^
,
.... ..- ^Uirary
——---
ỳ;
ComnanLtrvm
■HtW»E)®íorOt
Output
»mapC
Ptojett
atrníp
CoícrMte«f
Bảng quản lý
Symbol Library
Wo
ĩtttííoint
M map
M íimo
flặMp
7
:i! 8
Canponerto
Compgrwrt lnw
^ *1
■Ì
WtrkỉộộCtí»roJl
ầ. *3
BHmap
ÉÈtmap
M«rwp
Mmap
amap
HdtParMb
escode
ọi«0ytBírotai{);
»v;; dbout
c iboutbưttoo
«
rtO
K
rt
B
VMìd
í«jnd
Sound
ív taittor»
bUUon
'Ü m f é b K i r
ĩv u«toncoov
mdvw <
Mov«ẹ<
Hình 4.16
75
Chỉ có hai đối tượng được sử dụng để viết mã Actionscript là button
và movie clip. Trước tiên ta đề cập đến đổi tượng button hay còn gọi là các
nút điều khiển. Chúng được sử dụng như một biểu tượng hướng dẫn người
sử dụng thao tác với các chức năng điều khiển trong một file SWF. Trong
một Website nếu có nhiều nút bấm xuất hiện cùng một nhóm và bổ ữí theo
hàng ngang hoặc hàng dọc thì người ta gọi chúng là menu chức năng
(hình 4.17). Nhiệm vụ của từng nút bấm này sẽ là kích hoạt một hành động
nào đó mà bản thân nó đã được lập trình sẵn.
.. ....
r ■■<■
B%
/p
ỐA
o l).
tế
n Ọ.
Coh»
yA
«m
Tổ hợp các nút
bẳm tạo thành
menu chức năng
tiBSS
Crcu<
URL
Hình 4.17
Ví dụ cho hình minh hoạ menu hàng ngang này có 5 nút chứe năng
khác nhau. Khi mỗi nút đirợe bấm vào nó sẽ hiện lên một màn hình ứng với
nội dung yêu cầu của nút bấm đó (hỉnh 4.18).
Hình 4.18
76
Vậy việc thêm script cho các nút bẩm này như thế nào? Việc đầu tiên
cần phải làm là đặt vị trí hợp ỉý cho các nút bấm đó. Sau đó click chuột trái
vào đối tượng trên màn hình thiết kế và kích hoạt bảng Action Panel để bắt
đầu viết đoạn mã điều khiển cho nút bấm này.
ịO
Io;;ểS
riAih PM<#«bnaí%-{«Mini
P'4e EeJt
iMcrt Mwiry rext CữirmrxH Centre! NMndoM
th
Tooh
^ t*
ữ *ỉ
/p
^.ab«j»bu«oo
■JuvwS
ồ A
o
uliv«t 1
y✓
^ lefftt 1
a o *.
«aọo
«
«
V-
ÍS
i=.
329<«ms
'• M
*• m■ìi
iU
• m]
• DI
* • i; . í
*
mar
c o n t^a c t s
Mâ Script được
gắn vào nút bấm
A J '5Ỉ ^ Ỉi3 !4
í'; a
f%wí:
Cofc»»
--- -------------------
%
t to*i
S'
««ỉ
t>0K-
■
¿ỉ twtrirHC«*«!
Jil
O firtntj Fitnrtion»
'*) MMht».lK
*J M(«.i.CVC«*ot
I2 I 40 lMl(V0(>*>t«t
«11 ũt^meti
•J s*-
>•> 10»« 0 ■>
r<.o*.. ptcaaeữ l í n k t '
levei;;
i^y ( •
roar.pe«9sea lin x “ i ;
\Ề
21 ụ>jzr
jí»ììctu.CoH
ỹS •> tMtọm
el'iXXKH
BìbvíO
«l.cooos
Mí MO
Ì; el.OGOOb
Bttn»
e l . 00007
B*nv»
.ầt' ei.oũooe
»UI>«
^
B*m»
« 1,00009
3<
Hình 4.19
Nút bấm được chọn sẽ có một vòng màu xanh bao quanh (hìrih 4.19).
Việc viết script cho button hoàn toàn không giống như việc viết Action cho
các frame vi để gắn một đoạn mã script vào một nút bấm trước tiên bạn
phải dùng các hàm và phương thức sau đó mới đến các đoạn mã lệnh nhằm
mục đích báo hiệu cho Player biết được nút bấm này khi được kích hoạt sẽ
tạo ra một sự kiện mới. Nguyên tắc đề ra khi viết action cho các nút bấm là
chúng luôn bắt đầu bởi câu iệnh On + 1 sự kiện điều khiển. Điều khiển
này có thể là thao tác với chuột và bàn phím. Có một sự hỗ frợ rất đắc lực
của chương trình đổi với người viết script. Khi bạn viết từ những cú pháp
đầu tiên đúng, nó sẽ gợi ý ẹác đoạn mã lệnh tiếp theo nên viết thế nào bằng
cách xuất hiện thêm các menu tắt cho phép chọn lựa nhanh các lệnh và các
tham số. Ví dụ khi muốn viết script cho nút bấm đang được trỏ ừên hình
4.19, ta chi cần gõ chính xảc như sau; on rồi tiếp theo là dấu (. Màn hình lúc
này tự động xuất hiện một loạt các điều khiển hỗ trợ cho phép gắn kèm với
nút bấm này (hình 4.20).
77
' ẽSt*VXW¿Wrt Soẳỹ*T«i“cim
m
ãm
te"c«««! W
W
w»"'M
Íịp
SC>ỉ’»ẲWSMS
V^vmíaĩy •rnểHì''
«
u?t«»«5
♦ •P ị
Cpi«yw4
J? tay«2
■J?i»ít*t
• • ạ;^
•
•
w ff
contracts
É-i
G?l*y« I
®
■r
-a./r:
"b
:-Ị.
\
.»4fc»
0*
V-l :
<
Menu hỗ trợ của chương
trình xuất hiện với các
iệnh gợi ý
•
-
Attnftifor hafft*J05
toadMovieííumt :■
r..í •
V/" ,ỉ’
fT «oo»
^ <00*
r 0-«»
%: ^
.
l'
Scarwt ->t<yaf 8->Ff«n895->biJttar»
abn«p
iij el_00004
Jí| el.00005
Bb««j
BljOOOOb
81.00007
Bttnip
8C«(W
H)
M «1.00006
etnvsp
el_00009
le c jo ữ<'
*««pnscrip*
ÍỈO
Con«íol
dg-pnttin«<>uneUcim
[1^ M4hMuac4l>>i«ì
Me«ltCSp Control
aUbềPropmm
Otnit*on
Hình 4.20
Việc cần làm bây giờ là bạn cần hiểu các lệnh điều khiển này dùng vào
việc gì để thêm chúng vào câu lệnh cho họp lý. Có hai loại điều khiển sự
kiện cho nút bấm này ở đây. Thứ nhất người sử dụng có ửiể dùng chuột hoặc
có thể dùng bàn phún. Ta sẽ liệt kê các điều khiển và tác dụng của nó ừong
bảng dưới đây:
Sự kiện
(Mouse)
Tác dụng
Press
Khi người sử dụng click chuột lên nút bấm
Release
Khi người sử dụng click chuột lên mặt nút bấm đồng thời
thả chuột ra
rollOver
Khi người sử dụng di chuột qua mặt cùa nút bẩm mà
không cần click chuột
rollout
Khi người sử dụng di chuột ra ngoài khu vực của nút bấm
mà không cần click chuột
dragOver
Khi người sử dụng kéo trái chuột trên bề mặt của nút bấm
dragOut
Khi người sử dụng kéo trái chuột nhưng không đề chuột
trên bề mặt nút bám
78
i
Bảng điều khiển sự kiện sừ dụng các nút chức năng của bàn phím
Sự kiện (Key)
Tác dụng
keyPress“<Left>”
keyPress“<Right>"
keyPress“<Home>”
keyPress“<End>”
keyPress“<Enter>”
keyPress“<BackSpace>”
keyPress“<lnsert>”
keyPress“<Delete>"
Mỗi phím trong dấu ngoặc kép tương
ứng với chức nẵhg của phím đó khi
được ấn *
keyPress“<Tab>"
keyPress“<Escape>"
keyPress“<Up>”
keyPress“<Down>”
keyPress“<PageUp>"
keyPress“<PageDown>”
Vậy cách viết một đoạn Script trong một biến cố sẽ như sau:
on (roliOver) {
gotoAndPlay(“intro
}
ở đoạn mã trên sẽ là câu lệnh On đi kèm với sự kiện là rollover. Tên
sự kiện nằm trong dấu mở ngoặc. Tiếp theo sự kiện sẽ là dấu ngoặc { }
cho phép viết khối lệnh script trong đó. Lúc này ta lại quay frở về với cách
viết lệnh thông thường. Bạn có thể kéo thả các lệnh tìr bộ lệnh gợi ý ở cửa
sổ bên trái vào cửa sổ viết lệnh.
Đổi với cách viết lệnh với Movie clip thì đầu tiên phải chuẩn bị trước
một sổ dữ liệu như đoạn phim trước khi bạn muốn lập trình cho Movie.
Hãy vận dụng kiến ửiức về animation để tạo ra một đoạn phim đơn giản để
79
thử nghiệm trước. Sau này khi đã làm thành Ihục ta có thể sửa hay thiết kể
ra các đoạn phim công phu và phức tạp hơn nhàm tạo ra những sản phẩm
đặc sẳc và phong phú hơn.
Giả sử đã cỏ đoạn phim và nó đã nằm trong vùng quản lý của Library.
Bạn hãy tạo một lớp mới và kéo thả nó vào vùng thiết kế (hình 4.21).
«««»tú
•* 1»
H ìn h 4.21. Đoạn phim được kéo vào vùng thiết kế
Khi đoạn phim được kéo vào, thiết kế tiếp hai nút bấm có chữ Play và
Stop, đồng thời kéo thả nỏ vào trong màn hình thiết kế và bố trí hai nút này
như hình minh hoạ 4.22. Lưu ý là mỗi một đối tượng nên đặt trên một layer
khác nhau. Điều này sẽ giúp tránh khỏi những lỗi nhầm lẫn đáng tiếc khi
nhầm các Symbol với nhau.
lỡ
rutli
6■•••• ■ ' "■
■•■■■.í-.
ti lni«rt MâdVy T««t Canti^A Cortfoi VM»» Ho(p
80
Tiếp theo, ta sẽ thêm các script vào hai nút bấm này. Ta thực hiện các
bước sau:
■
Bước 1: Trước tiên đối với đoạn phim được gắp thả vào trong
màn hình thiết kế ta cần đặt tên cho nó. Do nguồn gốc của đoạn phim này
lấy ra từ trong Library nên tên của nó chỉ có tác dụng quản lý trong chính
cửa sổ đó. Còn khi đã xuất hiện trong màn hình Scene (khung cảnh đang
thiết kế) thì lúc này tên cùa nó được quản lý bởi ô Instance name. Đe đặt
được tên cho Instance name, mở rộng cửa sổ Properties ở phía dưới và
đặt tên cho đoạn phim này. ở đây tạm đặt tên nó là testl (hình 4.23).
H ình 4 .2 3
•
Bước 2: Thao tác với nút bấm nào thì trỏ chuột vào nút bấm đó rồi
mở rộng vùng viết code trên bảng Action Panel. Trỏ vào nút bấm PLAY
sau đó bấm vào nút có biểu tưọng hinh tam giác ở góc trên trái của bảng
Action để mở bảng hoặc có thể nhấn nhanh phím F9 và thêm đoạn mã code
sau với chức năng điều khiển nút bấm PLAY.
On (release) {
testỉ.playO;
ĩ
11 HƯỚNG DÁN VA THIỂr KỄ_. A
81
ActionScript l.o & ¿,0
V
G^obíl Functions
A.
■\ Scr^ Assist
(release){
te stl.p la yO
Ự
:
TimeiinẾ Controt
^
gotoAncffiay
^
rxỉxtPrâme
goỉoAndStop
(ậ ) nexfScene
play
®
prcwFrame
(2 ) prevScerve
®
0
»; • 1
stop
stopAỈISoundi
► Properttes
V
l*PUvr
Line 3 of 3, Col 2
Rfters ; Par«neters
H ình 4 .2 4
Tương tự như đổi với nút STOP bạn thêm đoạn mã chương trình vào
sau khi trồ chọn nút bấm này.
On (release)
{
testỉ.stopO;
}
Cả hai nút bấm trên đều sử dụng sự kiện là On (Release) có nghĩa là
trỏ chuộl bấm vào rồi thả ra để điều khiển đoạn phim chạy hay dừng. Đe
kiểm tra kết quả công việc, nhấn tổ họp phím Ctrl + Enter. Ket quả màn
hình hiện ra như hình 4.25: khi bạn nhấn phím STOP đoạn phim sẽ dừng lại
và khi bấm PLAY nó sẽ tiếp tục chạy.
82
t1 HƯONG DẨN VẢ tH ỉếr KẼ B
Ỡ
4i.
» (O
t(»u
«Ỉ s; 3toms
...... 'Q fi®
K' phn.;
'^i Pti,
SIOI^
l> L A \
'p
Cofixi
\30 »C*<.
ậ)
^ .......r.
(ặ
ị
i
i,
JJ
Hifj/j 4.25
4.5. Các bàỉ tộp ví dụ
Dưới đây là một số các bài tập viết script điều khiến đối tượng dạng cơ
bản. Khối lượng lệnh script không nhiều nhưng việc vận dụng nộ đưa vào
xây dựng thành một sản phẩm thì vô cùng rộng lớn. Sau đây là những
hướng dẫn cách thức thiết kế ra những bài tập nhỏ nhưng sẽ hưóng tới và
có thể sử dụng cho các bài tập lớn ở chương tiếp theo.
Bài tập 1: Thiết kế file .SWF theo mẫu sau
fiíe
:ỉ
»
ÍFM.AV
Ị
vktív Ce»»u«i
t>et>o«
\ ^
............ ¥
........... y®B;\
......
:
i
't
1
i
?
ị
ỉ
Ị
Ị
^
Ị
:
o bài tập này ta có thê hiêu như sau:
1,
f
'ì
83
- Tạo một đoạn chuyển động cho hình ngôi sao.
- Tạo một nút bấm có hai ừạng thái: PLAY và STOP. Nếu di chuột
lên mặt nút sẽ hiện lên chữ STOP còn bình thường nút mặc định là chữ
PLAY.
- Chức năng của hai nút này là di chuột lên mặt nút sẽ làm đoạn phim
dừng lại. Neu di chuột ra ngoài mật nút thì đoạn phim sẽ tiếp tục chạy.
Cách iàm bài tập 1:
■
Bước 1: lạo một file FLA mới bằng cách vào menu File -> New
—> Flash Document. Cửa sổ màn hình tìiiết kế mới sẽ hiện ra.
*■
Bước 2: Trỏ chuột vào biểu tượng PoIyStar Tool trên thanh công
cụ Tool box
a
Bật bảng Properties trỏ vào nút Option -> xuất hiện bảng ehọn để
thiết lập cho đa giác này thành hình ngôi sao (hình 4.26).
Bảng Tool Setting xuất hiện với ba lựa chọn. Bạn tt-ỏ vào 5 Style để
lựa chọn cho hình đa giác là Star. Click chuột vào ô Nurtiber of Size để lựa
chọn số cạnh cho hình ngôi sao này là 5. Đồng thòi chọn màu tô cho nền và
viền của hình ngôi sao.
■
Bước 3: Vẽ hình ngôi sao lên màn hinh thiết kế ở phÍằ bên trái.
Đồng thời đật ngôi sao này trên một layer (lóp) có tên li ngoisao
(hình 4.27).
84
H ìn h 4 .2 7
■
Bước 4: Tạo chuyển động cho ngôi sao. ở đây ta sẽ thực hiện
đoạn chuyển động cho ngôi sao di chuyển từ phía bên ữái sang phía bên
phải màn hình đồng thời nó vừa di chuyển vừa xoay tròn:
Trên hình 4.27, tại thanh thước Timeline, tất cả các đối tượng đều
đang nằm ở frame 1. Trỏ chuột vào frame thứ 50 và nhấn phím F 6 để tất cả
những đối tượng đó sẽ được lấy hình ảnh của nó tại khung hình này (hình
4.28)r
Fte Edk’ W ' ftwsfl 'Mqđíy 'ĩ#*t '¿wrw#’ c«*fd Wwkw* help
ữ%
•
tâ O i
s
I#
is
/ p
Ô A
»
^
»
»
^
»
<0
«
__ -
SI
ce
Ml ?.
o a.
yy
fb é
a
t
’
. I. » j !•;
SO
aafiH
4.H
■<
jwy
r
»•w
Cciatx
ym
«■I
60Í&
OjUi«*
n
Hình 4.28
^ Sau khi nhấn F 6 lấy hình cho frame số 50, ừò chuột vào công cụ
Selection tool (hoặG nhấn phím V) trên Toolbox đồng thời di chuyển hình
ngôi sao sang phía bên tay phải. Có thể nhấn chìm phím Shift để căn cho
việc di chuyển thẳng theo hàng ngang (hình 4.29).
85
ỠM
«Cfww4kFl«çhPrõl«wỉoÍM
lc-ít«t?*ị
Ne
f*
vie*» im ert
T»«
Ccfe*Mnot
C adrai m ixitm
Heệ»
tB«3* Wiîâd
it ỉi
□3
/
Modfy
fÍỊ Scent, Ị
s
I ' 5
M ^ a
20
ỈS
»
iS
-«
«
P
Ù A
O□
y
^é
fứ
â
Ỉ
îi .; % i ;
so
»Xfpï
4.U
<
Cobrt
K
«08?
Opüow
fî
-S-<
H in h 4.29
Trỏ chuột vào tên lóp ngoisao ữên thanh thước thời gian Timeline
để chọn toàn bộ các hình có trong layer này đồng thời mở rộng bảng
Properties ở phía dưới để thiết lập các thông số chuyển động clio đối
tượng hình ngôi sao (hình 4.30).
ữ M*crom»<ỉiUFtMh
m
Eát m »
kk
e^
p ■a
./
ủ
á•
ÍM*» Modfv t « t Commandt Cu«tol I**xtow‘ Miíp
acóbt
4^.
Asc«r«i
t
w
a
»
a
M
»
«
«
Õ■■■■■■■■■■■■■■■■■
%
w
u
'' t«r*J
On*tnmf>l««y
A
PL-AY
O□
yy
é
J .ỵ
V » él
i?.
Jiaa-
; <&l-;'t# -U4> «.b <:
Bü*tor.q
' Vkw
Caktt
ym
Chọn toàn bộ các hình
có trong layer ngoisao
1
C ẹ tm
Ht
♦
5 .<
Mờ rộng bảng
Properties để tạo
chuyển động
Svnc: f'w* w v
ứiLìữ ồ«
H ình 4 .3 0
Trong bảng Properties, ta sẽ thấy ngay mục chọn lựa Tween.
Đây là mục cho phép đặt trạng thái chuyến động cho đổi tượng ngôi saọ.
Bạn click chuột vào hộp chọn và lựa chọn Motion đồng thời trong mục tích
86
vào mục kiểm chọn Rotate, thiết lập giá trị ở ô đó là GW nếu muốn hình
ngôi sao quay thuận chiều kim đồng hồ hoặc là c w w nếu muốn hình ngôi
sao quay ngược chiều kim đồng hồ (hình 4.31).
Scene l
«30 > 5
□1
12.PỊr>í 4U <
Cảc thông số thiết lập
trạng thái chuyển động
chó hình ngôi sao
t otiofi
Èasa;
l ô b d type:
.
V
__J V
Ị
1
■
0
ể
ẩ i,
.
V.'-
Sound:
V , p l& o ie
Htítes
.
m tx f.
Sync' Evtìí
^ V
Re&eaỉ
fpd setected :
y
!
0
H ìn h 4.31
^ Quay lại với thanh thước thời gian Timeline. Nhìn trên hình 4.31,
nếu từ frame 1 đến frame số 50 xuất hiện các đường gạch ngang đứt đoạn
có nghĩa là chuyển động bạn lảm vẫn chưa hoàn tất nên nó chưa thực hiện
đúng trạng thái chuyển động đượG thiết lập và cần phải thực hiện thêm một
số thao tác nữa. Vậy đây có phải là một lồi thiết kế không và khắc phục nó
thế nào khi hình ngôỉ sao vẫn chưa xoay được? Đế lý giải điều này bạn cần
hiểu thêm kiến thức về chuyển động trong Flash. Trong Flash cổ hại trạng
thải thiết lập chuyển động là : Motion và Shape. Để thiết kế chụyên đông
Motion, tất cả các hình ảnh cùa nỏ nên đưa hết về chế đậ Group (nhóm)
còn đổi với chuyển động Shape, tất cá các hình ảnh đế ở chế độ ảnh Vector.
Chính vi điểu này nên nhiều người hay nhầm lẫn và nghĩ rằng mình đã thiết
kế sai nên hình ảnh không thể chuyển động đượG và cố dấu hiệu bị đứt
đoạn ữên thanh thước Timeline. Để khắc phục tình trạng này rất dơn giản,
ta trỏ chuột vào frame đầu tiên của layer ngoisao đồng thời nhấn tổ hợp
phím Ctrl + G hoặc vào menu Modify - Group chương trình sẽ ứiựe hiện
việe nhóm các đối tương được chọn (hình 4.32).
87
