Tài liệu tập huấn Flash

GIAO TRINH MACROMEDIA FLASH


MUC LUC
1. Tổng quan vé cong cu Macromedia Flash.
1.1.1. Các khái niệm CƠ bả¡n.................... -1.1.2. SỬ dụng công CỤ CƠ bản. . . . . . . .

hon)

1 1051 0 0 0 H0 HT
1 1 2 n3 3 2325 3
0 0
520
HT
TH TH E21 S23 3 323 4

1.1.3.
en ceuscessensescsscessessnsssssescessnsseccescesscessunsncsssessessnsssssescessesssnsssccsscessunsussssessessnsescsescesscessusssecescessenssossssssussesessesssssessenessass 4

2. Baii th orc hamhh.......cc.ccscccscssssssssencenssnncsoscenssssenssencsnssencenasenssensensssnssocsensensssnssensenssessssnasssensesoesssees 4
2.1. VE Hinhy.......cccssccccesecssscecessssccecesssnscecscssnsacessnsnsceesssnaecesesuasscesscnsnaecesensaseceeusesssussuusnszasazas 4

2.4. Mô phỏng cắt giếy bằng con dao TỌC gÏẤẾV. . . . . . . . . . .

- - LH c1 H2 SH. SE 21x 2

xa 9

2.4.1. Đầu tiên cần phải có tờ giấy để cắt. ...........................................
c2 2k 2k 2E k2 SE SE vxEvsevset se se c ccczce

2.4.2. Vẽ đường cắt trên tỜ giấy: ....................................-..¿<< 2k2 SE kEESEESEESSE SE xE SE << 3233 xe s2 x: s 9
2.4.3.
2.4.4.
2.4.5.
2.4.6.

Một
Tạo
Cần
Tạo

sỐ thỦ tỤC rƯỜm rà. . . . . . . .
. - -- +. << kESkE SE} SE SE SE. kE CS E 2S E št vỳ re vzz cv
chuyển động dài ngắn cỦa đường CắT........................................
2. ¿<< 3 3É ESEEEEEEEEEEEEEEEEEEESE EEpeses 10
phải có một con dao rỌc giấy. ................................................c2csecxcccsceesvsesresesseseeessesescsscsrescscscsce
LO
chuyển động cho Con đao. . . . . . . . .
-- ¿+ ¿ 2š SESEESSẺ SẺ SẺ SE SE SE SE kÊSEESSEEšEEEEEEEEEEEESE SE 2S S23 s22 10

2.4.7. Hai mi€ng gidiy sau 8 (iÊu. 0N...
2.4.8, Con dao biẾn mất . . . . . . . . . . . .

¿k2

...................
2E E EEE2SSE SE S39

SE2X SE 3 32K E3

E322 3x

11

v22 11


1. Tổng quan vé cong cu Macromedia Flash
1.1.1. Các khái niệm co ban
Stage (sân khấu)
Stage là vùng màn hình mà bạn vẽ vào và là vùng trình diễn khi phim đã được xuất bản.

Toolbox (hộp công cụ)
Toolbox bao gồm các cơng cụ vẽ hình, chỉnh sửa hình, xem hình...

Panels (bảng chức năng)
- Các bảng (panel) của Flash giúp đỡ bạn nhữỮng cơng việc xử lí các đối tượng trên sân

khấu như căn chỉnh (Align), chỉnh kiểu màu (Color Mixer, Color Swatches), các phép biến
hình: xoay hình, phóng to thu nhỏ... (Transform), ...

- Có thể cho gọi các bảng từ menu Window.
Timeline (bảng tiến trình)
Bảng tiến trình tổ chức và điều kiển về vấn đề thời gian cho phim.
Layers (các lớp)

Giúp tổ chức trật tự trên dưới của các đối tượng hình vẽ.
Library (thư viện).
Là nơi lưu trỮ các tài nguyên của đoạn phim.

Properties (bảng thuộc tính).
Cho ta biết thuộc tính của bộ phim (màu nền sân khấu, tốc độ hình ảnh, kích cỡ sân

khấu,...), đối tượng hình ảnh (màu nét, màu nền, độ rộng nét...), các thông sỐ trong các
chuyển động (tốc độ nhanh dần hay chậm dần, quay theo chiều nào...).
ae
SS
`

-

¬

‘

š

0

|

enti

NHÀ

Time line

...

'

1
=

5
re
tia

TƯ...

Stage

Pane!

: 4.


1.1.2. Sử dụng cơng cụ cơ bản
chỉnh

nét.

Chọn, chỉnh sửa điểm.

>*® 1`x

Vẽ nét trực tiẾp.

sửa hình và

Vẽ đường thẳng.
Chon mién mau.

SHS N

Fr

Chọn,

Đánh chữ.
Vẽ Elip.

LÌO

Các phép biến hình.
Tùy

biến

kiểu

tơ

mau.

Tạo nét viền.

QAxe98

Vẽ đường cong.

Vẽ màu trực tiếp.

Vẽ hình chữ nhật.

Đổ màu vào miền.
Cơng cụ hỏi màu.

Tẩy xóa.

1.1.3.

2. Bài thực hành
2.1. Vẽ hình
* Với cơng cụ

, LÌ, Ơ ta có thể kết hợp giữ phím Shift để vẽ được những hình đặc

biệt như: đường thẳng nghiêng góc 45° (90, 180,...), hình vng, hình trịn.

* Chế độ Snap to Object luôn Ở trạng thái bật.
1. Vẽ hình cầu:
Sử dụng ©

A

vẽ một đường.......

g

tron. Trén bang Color Mixer,

# @

Chọn

“™

;

chọn kiểu tô Radial, thay đổi - “=>

màu

A

sáng

công cụ

tối

màu

cài

q2

can

ca.

rồi đổ màu vào

miền bên trong của hình.

2. Hinh binh hanh:
Dùng

cơng

cụ

vẽ

một

„,.

Cyr
A

hình chữ nhật. Chọn tồn bộ
hình bang céng cu

*, chon

cơng cụ LÍ a chut n

biờn ca hỡnh cho n khi

â

&

7

-

View

my Q
ee

'đ#
Ê I

m

Cptmos

â

al

|e

:

= ge |< | Gsm
LÍ

h

>


chuột biến thành mũđi tên hai chiều thì kéo sang ngang sao cho hình chuyển thành hình
bình hành.

3. Hình thoi:

Dùng LÌ,

th
hình

giữ Shift vẽ một

nơ g
vng.

màng fit
Dùng

chọn

tồn bỘ hình rồi xoay gúc

1:

Đe

â

&

Seene

1

c2

jin,

45. Kớch chut vo mtch

=~=zĂ:

chn li hỡnh. Kộo ht en

=

bt kỳ trên màn hình rồi

fy

=“ #

làm cho hình bị bẹt.
4. Tam giac can

Dùng LÌ vẽ một hình chữ nhật và dùng “ vẽ 1 đường thẳng đứng bên ngồi hình chữ
nhật đó. Chọn tồn bộ hình
»

A

h

; su dung

Aoy.

chinh

Đai

?

bang cong cu
bang Align can

sao

trục dọc của hình chứ nhật.

BỊ Úũ xe

Lúc này ta dùng 3 điểm như
bên dưới

làm

tam

Dùng

giác.

;

3 đỉnh của

x

nối

điểm này lại.

3

rỉ

=3 uh

1

an

€)

suy

woece

Mush cực

A

^

`

Mem

=&ã8

cho đường thẳng trở thành
?

Pre)

.

¬.

5. Tam giác đều

SỬ dụng

vẽ

2 đường

ngang.
Transform

Dùng
quay 2

Ỳ

thẳng đứng, 1 đường thẳng
bảng
đường

+> wes: Ệ Bộ [viEm

thẳng đứng góc 30° va -30°.
Ding

*

kéo

sao

cho

yer

các

mộ

đường thẳng cắt nhau như

hình bên.

Sau đó xóa hết

\

:

những nét thừa.

—

6. Kẻ sơ đồ trong những bài

Ï “

tốn đố

Dùng “ vẽ như hình dưới

(khơng cẩn phải chính

xac!).

bộ

Dung

nét

dọc

À

rồi

chọn

tồn

sử

dụng

bảng Align để căn chỉnh
cho các đoạn cách đều nhau

và

có

độ

dài

bằng

Ioigo 20406 —c
E

|

l

|

|

|

|

ad

FÁœ)n

(M)

To

d


nhau.Chon tồn bộ hình, rồi căn chỉnh cho các đoạn cùng chung trục ngang là trục đối
f

xưng.

2.2. Chuyển động và biến hình

Nắm bắt được cách tạo chuyển động ta sẽ có thể áp dụng vào bài giảng để mơ
phỏng chuyển động của bàn tay, con dao rọc giấy, cái kéo, compa, thước kẻ...

2.2.1. Chuyển động theo đường thẳng
Đầu tiên cần phải có đối tượng hình ảnh mà ta muốn cho nó chuyển động.. Ví dỤ ta
có ảnh một con thuyền... vào menu Eile/ Import... (Đối với hình ta tự vẽ thì phải
chọn hình đó rồi nhấn F8 đưa nó thành dạng hình ảnh (Graphic))
Vào menu Insert/ Convert to symbol, chọn kiểu Graphic.

Xác định vị trí ban đầu của con thuyền.

Trên bảng tiến trình đưa chuột đến Frame 30. Nhấn E6.
Xác định vị trí cuối cùng của con thuyền.
Đưa chuột đến frame 15. Nhấn phải chuột, chọn Create Motion Tween.
|

===

+

=

emer

——

¬—A

=

2.2.2. Chuyển động theo quỹ đạo tùy ý
Về nguyên tắc thì tương tự như trên, chỉ khác là ta cần phải có một quỹ đạo. Ta tận
dụng ln ví dụ trên.

Nhấn chuột vào nút Add Motion Guider hoặc vào

#so

menu Insert/ Motion Guide để tạo ra một lớp chứa |
quỹ đạo. Lưu ý là lớp này ln nằm trên lớp chứa |
hình chuyển động.
Trên lớp Guide, ta vẽ quỹ đạo chuyển động. Có thể

dùng Z để vẽ nét bất kỳ, # để vẽ nhỮng nét cong,

viền nét của hình chữ nhật, viền nét của hình Elip...

Vẽ xong quỹ đạo thì khóa lớp Guide này lại để tránh

việc chọn nhầm hình sau này.

|

®

Œ

|!

Add Motion Guider

Trên EFrame 1 layer 1, dùng chuột kéo con thuyền tới vị trí ban đầu trên quỹ đạo. Chú
ý: kéo sao cho tâm hình xuất hiện một vịng trịn nhỏ bị dính vào quỹ đạo là được.

Tiếp theo ta xác định vị trí cuối cùng của con thuyền ở frame 30, cách làm tương tỰ.
Con thuyền đã chuyển động theo quỹ đạo. Nhưng là chuyển động tịnh tiến. Để cho
giống thật, ta có thể cho con tàu chuyển động mà bụng tàu là tiếp tuyến của quỹ đạo
(như hình về).

———S~—i<


e Chon frame 15 Layer 1, đánh dấu kích hoat chtic nang Orient to path trén bảng
Properties.

e Chú ý: Tại khung đầu tiên và khung cuối cùng ta phải chỉnh cho bỤng tàu có phương
tiếp tuyến với quỹ đạo (dùng công cụ xoay Rotate and Skew) thi mới đảm bảo các
thời điểm trung gian bụng tàu vẫn có phương tiếp tuyến.
2.2.3. Biến hình
e Vẽ hình trịn tại frame 1, viền vàng,

nền đỏ.
e Chọn frame 30, nhấn F7.
e Trong frame 30, vẽ một hình vng
viền tím, nền xanh.
¢ Chọn vào frame 15. Trên bảng thuộc
tính (Properties),

chọn

Shape

trong

menu thả Tween.

2.3. Bài thực hành: Chuyến động gấp hình, lật hình

Giấp giấy thường được sử dụng khi muốn minh họa một bài hình học cho học sinh.

Ta cũng có thể minh họa động tác lật trang sách bằng kỹ thuật này.

2.3.1. Vẽ hình ở trạng thái khi chưa bị gấp

2.3.2. Tạo đối tượng chuyển động
e Dùng
vẽ nếp gấp.
se Kích đúp chuột chọn phần hình dự kiến sẽ cho chuyển
động (ví dụ kích đúp chuột vào phần hình bên trái).

e Nhấn F8, đặt Bchavior là Graphic để khai báo phần

chuyển động là một đối tượng ảnh.


2.3.3. Sắp đặt các lớp
e

Chọn đối tượng vừa tạo, rồi Cut.

¢

Tao m6t 16p (Layer) mới ở trên lớp hiện tại.

e

Sau dé dan vao Layer 2 (Ctrl+Shift+V).

e

Khóa Layer 1 lại.

may

—
w+ HÍ nhện

chon

chức nơng khố lớp
mat too Wp modi

2.3.4. Xác định tâm cố định
e

Trong

Frame

1 Layer

2, chon

hình,

chọn

cơng

cụ

Free

transform sẽ xuất hiện khung hat đen và hạt trắng tại tâm
của hình.

s Kéo hạt trắng về phía mép của nếp gấp.
se Làm tương tự như vậy với đối tượng này trong Frame 15 của
Layer 2.

2.3.5. Trạng thái cuối
e

Trên Frame 15 Layer 2, kéo hạt bên trái sang phải.

e

Đưa chuột đến cạnh hình, khi thấy chuột có hình 1 thi
ta kéo lên một khoảng nhỏ.

se

é

+

-

-

30)"

-

e Trỏ chuỘt vào giỮa frame 1 và frame15 của Layer
2, nhấn phải chuột, chọn Create motion tween.
se Nhấn Enter để chạy thử.

5

Vị trí đợt

2.3.6. Tạo chuyển động
—

Chỉnh sửa

Tuy về cơ bản chuyển động đã xong nhưng

khi chạy thử ta thấy rằng:

Ð

|! so

1ụi¿] s (029

se

1. Khi đến đoạn giữa hình có vẻ bị kéo cao

lên... khơng giống thật.

2. Phần bên trong của hình trong lúc gấp nên tối dần vì thiếu ánh sáng như thế sẽ
cho hiệu quả hình ảnh giống thật hơn.


2.3.7. Điều chỉnh kích thước theo ý muốn
Chọn

frame

8

kích

phải

chuột

rồi

chọn

Convert to keyframe.
Kích vào cơng cụ Modify onion markers, chon
Onion all.
Kích hoạt chức năng Onion skin outlines.

Lúc này ta có thể theo dõi trực tiếp sự thay đổi
dan dan của chuyển động. Công việc tiếp theo
là chỉnh cho đối tượng ở khung chính giỮa sao
cho phù hợp hơn.

ModWy

o'ton rnotkers

2.3.8. Làm cho hình tối dần
Vì đây là sự thay đổi liên quan đến phần khơng
chuyển động nên ta hãy mở khố layer 1 và
khố layer 2 lại.

Chọn frame 15 của layer 1, nhấn F6.
Thay đổi màu thành đậm hơn.

Chọn khung bất kỳ nằm giữa frame 1 và frame
15 của layer 1.

Trong bảng Properties, menu tha Tween, chọn Shape. và đặt tham số Ease 1a -100.

2.4. Mô phỏng cắt giấy bằng con dao rọc giấy

Cắt giấy thường được sử dụng khi giáo viên muốn minh họa một bài hình học cho

học sinh. Kỹ thuật cũng được dùng khi muốn minh họa động tác vẽ đường thẳng.

2.4.1. Đầu tiên cần phải có tờ giấy để cắt.
Dùng các công cụ trong Tools box để vẽ tờ giấy (ví dụ ta vẽ tờ giấy hình chữ nhật).

2.4.2. Vẽ đường cắt trên tờ giấy:
Vẽ đường thẳng (dùng ⁄⁄).
2.4.3. Một số thủ tục rườm rà...
Dùng À chọn tồn bộ hình, nhấn Ctrl+C.

Tạo một layer mới (menu Insert/ Layer), nhấn phải chuột chọn Paste in place.

Trên Layer 2, tiẾp tục dùng Arrow tool chọn nét cắt, nhấn phải chuột chọn Cut.
Đưa chuôt đến vị tri Frame 10 layer 2, nhấn E5.
Tạo lớp mới layer 3, nhấn phải chuỘt, paste in place.
> Mục đích của những việc làm trên là:
Hình ảnh ở lớp 1 về sau sẽ xử lý thành trạng thái của tờ giấy sau khi cắt.

Layer 2 chứa tỜ giấy khi chưa cắt.
Layer 3 chứa nét cắt.


2.4.4. Tạo chuyển động dài ngắn của đường

cắt

Khi đưa dao trên giấy, con dao đi tới đâu thì đường
cắt kéo dài tới đó...nhưng trái với sự thật, ở đây ta

phải tạo đường cắt trước khi dùng đến con daol

Trên layer 3, chọn frame 10, nhấn phím E6 và ta đã
có hình của đường cắt khi cắt xong.

Trở lại frame 1, dùng công cụ Arrow tool chọn gần

hết đường cắt... rồi nhấn phím Delete chỉ để lại một
đoạn ngắn phía trên (càng ngắn càng tốt), việc làm

này để khai báo hình dạng ban đầu của đường cắt khi

mới bắt đầu.
> Lưu ý: Nên khóa các layer khác lại để tránh chon
nhầm hình.
Vẫn trên layer 3, chọn frame 1, chọn kiểu biến
hình

Shape

trên menu

thả

Tween

thuộc

bảng Phi

Properties. Kết quả ta thấy là từ frame 1 đến 10, li
đường cắt dài dần ra như hình trên.

—

——

=

rv

mH..*

2.4.5. Cần phải có một con dao rọc giấy.
Tạo layer mới (layer 4) để chứa con dao, nếu ta có sẵn hình con dao rọc giấy rồi thì chỉ
việc đưa con dao vào Flash để dùng (bằng cách vào menu

Eile/ Import hoặc nhấn

Crtl+R rồi chọn file hình ảnh con dao cần đưa vào). Nên nhớ là ảnh con dao phải có
nền trong suốt thì mới dùng được. Flash chỉ cho phép một đối tượng của nó chuyển
động vì vậy cần phải khai báo hình ảnh con dao này. Vào menu Insert/ Convert to
symbol... hoặc nhấn E8, chọn Graphic, nhấn OK.

2.4.6. Tạo chuyển động cho con dao.
Trén layer 4, frame 1, chon hinh con dao, ding LÍ .

Khi đó hình con dao được bao bọc bởi các hạt đen và một hạt

trắng Ở giỮa như hình bên dưới. Dùng chuột kéo hạt trắng đến vị
trí ngay sát mép lưỡi dao (nên phóng to hình lên để đặt vị trí hạt
trắng cho chính xác).

Trên layer 4, chọn frame 10, nhấn phím F6.

Trở về frame 1, dùng cơng cụ À đưa chuột đến
vị trí hạt trắng rồi kéo con dao đến vị trí sao cho

hạt trắng trùng với điểm dưới của đường cắt
(nếu đường cắt q ngắn thì trùng với điểm trên
cũng được,

đây chính là lý do vì sao mà

ngắn càng tốt”).
10

“càng

Tương tự nhƯ vậy ở frame 10, ta kéo con dao đến vị tri sao cho hat trang trùng với

điểm dưới của đường cắt.

Đến đây việc khai báo vị trí con dao tại các thời điểm đầu và cuối đã xong. Việc tiếp
theo là cho con dao chuyển động. Vẫn trên layer 4 frame 1, nhấn phải chuột chọn
Create motion tween. Nhấn phim Enter để xem thử đoạn phim.

2.4.7. Hai miếng giấy sau khi cắt.
Sau khi cắt, tỜ giấy bị chia làm 2 miếng nhỏ tạm gọi là miếng
trái và miéng phai. Bay gid ta sé lam cho 2 miéng gidy xa nhau

dần sau khi cắt.

ae

|2.z„-z
| se?

Xã

x
x

(È > (b
Boo

Tắt chức năng mắt và khóa các lớp khác để xử lý riêng layer 1

Click đúp vào miền tờ giấy bên trái, nhấn phím E8, chọn kiểu Graphic. Cut miếng trái,
tạo layer mới (layer 5) ngay trên layer 1, click
ado:
af] ®
phải chuột, Paste in place.
kyer 3
x mi

Dùng chuột kéo frame 1 layer 5 dén vi tri frame yer?

x 4 Bi

đó kéo miếng trái sang phía bên trái một khoảng [''
nhỏ (đây chính là khoảng rời xa của miếng trai).

°° Se
=

10. Đưa chuột dén vi tri frame 20, nhấn E6. Sau

Chon frame 10, nhấn phải chuột chọn Create motion tween.

cL__

- HH)

3

a

Trở về layer 1, tắt chức năng mắt và chức năng khóa để nhìn rõ
hình dạng của miếng phải trên layer 1. Ta thấy miếng phải bị
thiếu mất một nét, lý do là nét đó bị miếng trái lấy mất... vậy thì ta
vẽ thêm vào cho đủ! (dùng cơng cụ line).

Chọn tồn bộ miếng phải, nhấn F8, chọn Graphic.

Kéo frame 1 layer 1 đến vị trí frame 10. Đưa chuột đến frame 20, nhấn E6 rồi kéo

miếng phải sang phải một khoảng. Chọn frame 10, nhấn phải chuột chọn Create
motion tween. Ta cũng có thể xoay nghiêng một chút cho hình sinh động hơn bằng công
cụ +!

chon option JA Rotate and skew. TO gidy d& xong, tuy nhiên khi chạy thử đoạn

phim ta thấy con dao biến mất quá đột ngột... thế nên ta có thể làm cho con dao dần dần
biến mất.

2.4.8. Con dao biến mất.
Bật lại chức năng mắt và khóa cho các lớp, trở lại layer 4. Đưa chuột đến frame 15,

nhấn E6, dùng © chon con dao rồi chỉnh thuộc tính Alpha trong menu tha Color trén
bảng Properties. Chỉnh độ Alpha- đỘ trong suốt cho con dao là 0%. Đưa chuột đến
frame 10, nhan phai chudt chon Create motion tween. Nhu vay con dao sẽ dân dần
biến mất sau khi cắt. Có thể làm tương tự nếu muốn con dao hiện ra dần dần rồi mới
cat.

11