Giáo trình hình thành tool ứng dụng arrow tool để tạo14 chuyển động trong scene

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

Giáo trình hình thành tool ứng dụng arrow tool đểCHƯƠNG
tạo14
chuyển động trong scene

TWEEN HÌNH CHUYỂN ĐỘNG
Trong bài tập này các bạn sẽ được hướng dẫn cách tạo một đối tượng chuyển động bằng
cách Tween hình. Đây là phần mở đầu cơ bản mà các bạn khi thiết kế hoạt hình trên Flash cần
phải quen thuộc. Trong bài tập này các bạn sẽ tạo một vòng tròn có màu di chuyển từ trái sang
phải.
Các bước được tiến hành như sau:
1. Khởi động chương trình Flash, nhấp chuột vào Start > Programs > Macromedia
Flash 5 > Flash 5.

2. Cửa sổ làm việc xuất hiện và mở file mới có tên là Movie1. Con trượt trên thanh
thước Timeline đang ở keyframe thứ nhất trên Layer1.

Giao diện vùng làm việc trong Flash 5

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

298

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

3. Chọn trên trình đơn File > Save hay Save As. Sau đó nhấp chuột vào mục File
name trong hộp thoại Save As và đặt tên cho file mới là “Tween -1”. Sau khi nhập
xong nhấp chuột vào nút Save.

4. Bây giờ bạn hãy nhấp chuột vào công cụ Oval Tool từ bảng công cụ hoặc nhấn
phím O trên bàn phím để kích hoạt công cụ vẽ này. Sau đó nhấp chuột vào cửa sổ
màn hình làm việc và kéo chuột cho đến khi bạn tạo vòng tròn vừa ý. Con trỏ
chuột sẽ biến đổi thành hình tròn và chữ thập.

5. Bạn có thể chọn màu để tô màu hoặc muốn đổi màu cho vòng tròn thì nhấp chuột
vào hộp màu Fill Color chọn một màu và tô màu cho đối tượng. Giả sử ở đây
chúng ta chọn màu xanh (Blue) có trong bảng màu.

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

299

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

6. Nhấp chuột chọn công cụ Arrow Tool trong hộp công cụ hay nhấn phím V trên
bàn phím. Sau đó bạn nhấp đúp chuột vào đối tượng vòng tròn để chọn cả đường

viền vòng tròn.

7. Lúc này trên Timeline ở khung keyframe, vạch màu đỏ tượng trưng cho vò trí đầu
đang phát ở tại keyframe thứ nhất. Bạn hãy nhấp chuột vào keyframe thứ nhất trên
Layer1 này.

8. Chọn trên trình đơn Insert > Create Motion Tween. Đối tượng xuất hiện đường
khung màu xanh nhạt bao quanh đối tượng cùng với dấu cộng chính giữa vòng tròn.

9. Ở cửa sổ keyframe, bạn nhấp chuột tại keyframe mình mong muốn di chuyển vòng
tròn đến vò trí mới (ở đây chúng tôi nhấp chuột tại keyframe 30). Khi nhấp chuột
vào keyframe vừa chọn một vệt màu đen xuất hiện ngay bên dưới thanh thước
Timeline.

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

300

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

Chú ý : Bạn phải nhấp chuột tương ứng với Layer hiện hành đang được chọn. Bạn không nên
nhấp chuột lên phía trên hoặc xuống phía dưới.
10. Bây giờ bạn chọn trên trình đơn Insert > Keyframe hoặc nhấn phím F6 để tạo

đường chuyển động cho đối tượng. Sau đó trên Layer1 hiện hành có đường mũi tên
từ keyframe thứ nhất hướng đến keyframe 30 xuất hiện.

Chú ý : Để di chuyển vòng tròn chạy theo phương nằm ngang (hay một phương nào khác chính
xác hơn) bạn nên cho xuất hiện các ô lưới trên màn hình làm việc bằng cách chọn trên trình đơn
View > Grid > Show Grid hay nhấn phím Ctrl + phím dấu nháy đơn (‘).

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

301

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

11. Bây giờ bạn hãy nhấp chuột vào keyframe cuối cùng trên thanh thước Timeline.
Sau đó kéo vòng tròn đến vò trí mới nơi mà bạn muốn đối tượng dừng chuyển động.
Chú ý : Nếu bạn muốn vò trí mới nằm ngang cùng thẳng hàng so với điểm ban đầu, bạn nhớ
nhấn thêm phím Shift trong khi di chuyển vòng tròn.

Vòng tròn ở vò trí đầu (bên trái) và vò trí cuối chuyển động

12. Cuối cùng bạn nhấn phím Enter ở bàn phím hay nhấn nút Play trên thanh công cụ
Controller để xem kết quả vừa thực hiện. Nếu vòng tròn diễn hoạt từ điểm đầu đến
điểm cuối là bạn đã thành công.

Đoạn phim đang diễn hoạt tại keyframe thứ 20

13. Chọn trên trình đơn File > Save để lưu file này lại.

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

302

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

TẠO HAI VÒNG TRÒN CHUYỂN ĐỘNG
NGƯC CHIỀU NHAU
Bài tập này cũng tương tự như bài tập 1 nhưng ở đây tạo hai vòng tròn chạy ngược chiều
nhau. Trong bài tập 1 ta đã tạo vòng tròn màu xanh chạy từ trái sang phải, bây giờ các bạn tiếp
tục làm theo các bước sau để tạo vòng tròn màu đỏ chạy ngược lại từ phải sang trái.
1. Mở lại file vừa lưu với tên file là Tween-1 trong bài vừa mới thực hành ở trên.
2. Tạo mới thêm một Layer nữa bằng cách chọn trên trình đơn Insert > Layer hay
nhấp chuột vào nút dấu cộng bên dưới tên Layer trong thanh thước Timeline .

3. Layer2 xuất hiện vùng bôi đen cho biết nó đang hiện hành và bây giờ bạn sẽ làm
việc trên Layer2 này. Nhấp chuột vào keyframe thứ nhất trên Layer2.

4. Bạn vẫn chọn công cụ Oval Tool trong hộp công cụ. Sau đó nhấn giữ phím Shift
trong khi vẽ 1 vòng tròn màu đỏ tại góc phải dưới vùng làm việc.

5. Các bước tiến hành tạo chuyển động cho vòng tròn đỏ từ phải sang trái tương tự
như bài tập ở trên. Nhấp chuột vào keyframe thứ nhất trên Layer2 và chọn trên
trình đơn Insert > Create Motion Tween.
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

303

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

Nhấp chuột vào keyframe thứ nhất trên Layer2

6. Nhấp chuột vào keyframe cuối cùng trên Layer2 (keyframe 30). Sau đó nhấp
chuột vào vòng tròn màu đỏ và kéo sang trái.

7. Cuối cùng bạn nhấn phím Enter hay chọn trên trình đơn Control > Play hay chọn
Control > Test Movie để diễn hoạt đoạn phim trong Flash Player.

Đoạn phim đang diễn hoạt
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

304

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

Giả sử đoạn phim bạn vừa thực hiện đã đúng như ý đồ thiết kế, các bước còn lại bạn sẽ
xuất đoạn phim dưới các đònh dạng file (format) mong muốn.
Các bước được tiến hành như sau:
8. Vào trình đơn File > Export Movie hay dùng phím tắt Ctrl + Alt + Shift + S để
mở hộp thoại Export Movie. Chọn đònh dạng file cần lưu tại mục Save as type.

9. Chỉ đường dẫn thư mục chứa file ở mục Save in (ở đây ta chọn thư mục My
Documents).
10. Nhập tên file vào trong mục File name.
11. Theo mặc đònh Flash lưu file mới vừa tạo dưới đònh dạng .swf. Nếu bạn muốn lưu
file dưới đònh dạng khác nhấp vào mũi tên hướng xuống trong mục Save as type
để chọn đònh dạng thích hợp.

12. Một danh sách đònh dạng file hiển thò cho bạn chọn. Ở đây giả sử chúng ta chọn
đònh dạng gif động (Animated GIF) để đưa vào trong trang Web hoặc trong
FrontPage. Trở về cửa sổ Export Movie nhập tên file (ở đây đặt tên Tween-2).
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

305

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

13. Cửa sổ Export GIF xuất hiện. Chọn giá trò mặc đònh tại mục Width (chiều rộng),
Height (chiều cao) trong mục Dimensions có giá trò đúng với giá trò chọn ban đầu
trong Modify > Movie.

14. Bạn có thể nhấp nhận các giá trò mặc đònh trong mục chọn Dimensions, nhấp
chuột vào nút OK để tiến hành xuất đoạn phim.

Hãy vào cửa sổ Explorer hay Norton để coi kích thước của file xuất ra. Các bạn có
nhận xét gì về kích thước này không - chúng rất nhỏ so với các chương trình làm hoạt hình
khác?

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

306

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

THỰC HIỆN ĐOẠN PHIM BIẾN HÌNH TỪ
HÌNH TRÒN BIẾN DẠNG THÀNH CÁI NƠ
1. Khởi động Flash 5, mở một tập tin mới.
2. Tạo các đường lưới cho
màn hình làm việc, bằng
cách chọn View > Grid
> Show Grid.
3. Khi bạn nhấp chuột
chọn lệnh Show Grid
xem như chúng ta chấp
nhận giá trò mặc đònh
của đường lưới, cửa sổ
làm việc lúc này giống
như hình bên dưới.

Chú ý : Nếu các bạn muốn
chỉnh sửa đường lưới, chúng ta
chọn View > Grid > Edit
Grid.

4. Cửa sổ Grid xuất hiện, lúc này các bạn có thể hiệu chỉnh màu cho đường lưới ở mục
Color và độ dài rộng của mỗi ô lùi (ở đây độ dài rộng của mỗi ô lưới là 15).

5. Chọn công cụ Oval Tool (T) trong hộp công cụ để vẽ hình tròn tại keyframe1 trên
Layer1.
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

307

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

Chọn công cụ Oval Tool trong hộp công cụ

6. Nhấp chuột vào keyframe thứ 3 và nhấn phím F6. Tại keyframe này bạn chọn công cụ
Arrow Tool để hiệu chỉnh hình tròn giống như hình trên. Khi đưa công cụ Arrow Tool
đến đối tượng, hình vòng cung xuất hiện sau mũi tên, bạn có thể kéo vòng tròn để chỉnh
sửa.

Vòng tròn ban đầu tại keyframe
thứ 1

Nhấp chuột vào keyframe thứ 3

Dùng công cụ Arrow Tool để hiệu
chỉnh hình tròn thành hình Oval

7. Bạn lặp lại bước 6 cho các keyframe tiếp theo. bạn chèn các keyframe trong các
keyframe kế tiếp trước khi kéo chỉnh hình tròn giống như các hình dưới đây.

Ảnh tại keyframe 5

Ảnh tại keyframe 7

Ảnh tại keyframe 11
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

Ảnh tại keyframe 9

Ảnh tại keyframe 13
308

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

8. Bạn dùng công cụ Oval Tool và vẽ thêm hình tròn nhỏ để làm nhụy của cái nơ.

Ảnh tại keyframe 15

Ảnh tại keyframe 17

Ảnh tại keyframe 19

Ảnh tại keyframe 21

Ảnh tại keyframe 23

Ảnh tại keyframe 25

9. Lúc này khung keyframe của bạn trong Layer1 giống như hình dưới đây:

10. Bạn hãy nhấp chuột vào nút Play trên
điều khiển Controller hoặc nhấn phím
Enter để xem đoạn phim vừa tạo. Đoạn
phim sẽ diễn hoạt từ hình tròn biến thành
cái nơ. Vậy là bạn đã thành công.
Hình bên đoạn phim đang diễn hoạt

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

309

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

THỰC HIỆN ĐOẠN PHIM
DÙNG BÚT VIẾT CHỮ DIRECTOR
Trong bài tập này chúng ta sẽ tạo một đoạn phim có nội dung là một cây viết dòch

chuyển từ trái sang phải giống như một người đang viết chữ. Chữ ở đây là từ Director trông rất
hay :

Để bắt đầu tạo một đoạn phim như trên. Bước đầu tiên trong
việc tạo phim là cần phải thiết lập các tham số (thuộc tính) chọn
kích cỡ và phông nền cho đoạn phim .
1. Chọn trên trình đơn Modify > Movie hoặc nhấn phím tổ hợp
Ctrl + M.
2. Trong hộp thoại Movie Properties (thiết lập các thuộc tính cho đoạn phim), chọn kích
thước đoạn phim trong mục Dimensions. nhập giá trò vào trong hộp Width và Height.
Kích cỡ phim chọn trong đoạn phim này là 600 – 200 pixel.

3. Chọn màu trắng cho phông nền. Nhấp chuột vào hộp màu trong mục Background Colors.
Nhấp chuột vào nút OK để xác đònh các thuộc tính.

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

310

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

4. Để thuận tiện cho việc quản lý (Layer), ta nên đặt tên cho lớp. Nhấp đúp chuột vào tên
Layer1 và đặt tên lại thành Layer Giao.

5. Nhấp chuột chọn công cụ Text Tool trong hộp công cụ bên trái trong giao diện và xác
đònh các thuộc tính font chữ bằng cách chọn trên trình đơn Modify > Font nhấp chuột
vào biểu tượng chữ A tại góc phải dưới trong vùng làm việc.

6. Trong hộp thoại Font (thuộc tính font) chọn kiểu font chữ từ trong mục Font. Ở đây,
chúng ta chọn font VNI- Lydi. Sau đó chọn kích cỡ chữ là70 từ mục A.

Chú ý : Muốn ký tự được mòn sau khi tô màu ta chia một kí tự có khoảng cách vào khoảng 20
keyframe và cũng tùy vào kí tự dài hay ngắn màbạn chọn số keyframe thích hợp.
7. Tiếp theo, bạn nhấp chuột vào hộp màu Fill Color và
chọn màu tô cho ký tự là màu xanh dương. Đặt con trỏ
vào vùng làm việc và nhập vào chữ “DIRECTOR”. Di
chuyển chữ vào giữa trang. Dùng công cụ Arrow nhấp
chọn chữ.

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

311

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

8. Chọn tiếp trên trình đơn Modify > Break Apart hoặc nhấn phím tổ hợp Ctrl + B để tách

mối liên kết các ký tự này.

9. Bây giờ bạn sẽ dùng màu tô cho ký tự.
Dùng công cụ Brush, nhấp chuột chọn
tiếp công cụ Brush Mode trong hộp
công cụ. Nhấp chuột vào vùng công cụ
Bush Mode.

10. Chọn công cụ Paint Inside trong mục
tùy chọn Options tại mục Brush
Mode. Sau đó chọn màu đỏ trong hộp
màu Fill Color.

11. Nhấp chuột tiếp vào mục Brush Size để chọn cọ tô màu cho phù hợp. Để dễ dàng tô
màu cho chữ ta nhấp chọn công cụ Zoom Tool để phóng to kích thước ký tự.

12. Sau khi thực hiện xong các thao tác trên, ta tiến hành tô màu cho chữ. Bạn bắt đầu tô tại
keyframe thứ 3 trên Layer1. Hai keyframe đầu tiên không có gì thay đổi, bạn nhấn phím
F6 để tạo ra keyframe thứ 2.
Chú ý : Bạn phải tô màu cho ký tự từ trong ra ngoài và tô từng đoạn ngắn trên mỗi kí tự.
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

312

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

13. Khi bạn tô được đoạn nào, hãy dùng công cụ Arrow Tool nhấp chuột chọn đoạn đó. Sau
đó vào trình đơn Modify > Group hoặc nhấn tổ hợp phím Ctrl + G để nhóm từng đoạn
màu tô này.

Chọn đoạn ký tự vừa tô

Nhóm vùng tô sau khi chọn
14. Khi bạn thực hiện việc tô từng đoạn, sau đó chọn và nhóm đoạn tô màu này như thế

nhằm cô lập từng đoạn màu tô. Bạn tiếp tục thực hiện các bước như trên cho đến khi
vùng màu cho chữ “DIRECTOR” kết thúc.

Chú ý: Trong khi tô màu cho từng đoạn và nhóm các đoạn này trên mỗi ký tự. Các đoạn này
phải nằm trên từng frame riêng biệt. Bạn có thể nhấn phím F6 hoặc chọn trên trình đơn Insert
> Keyframe để tạo theo cách frame-by-frame. Bạn hãy chú ý thật kỹ vào công cụ hộp màu Fill
Color sau mỗi bước nhấn phím F6 tạo keyframe mới, công cụ này sẽ chuyển sang màu xanh. Do
đó bạn phải chọn lại màu đỏ để tô các ký tự có cùng màu.
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

313

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

15. Lúc bây giờ các ký tự trên chữ “Director” có màu đỏ và được hình thành bởi nhiều
đoạn màu tô.

Tô màu trên ký tự E tại keyframe thứ 52

Chú ý: Một lần nữa khi bạn tô màu cho mỗi đoạn trên một ký tự, bạn phải tô màu từ trong ra
ngoài. Cách thực hiện như thế màu tô mới có thể nằm gọn vào trên từng đoạn. Khi bạn tô màu
kết thúc một đoạn ký tự nào đó, bạn phải để một keyframe tiếp theo sau nó không được tô. Ví
dụ như khi bạn tô màu xong vùng ký tự D, sau đó đến ký tự I. Trước khi bắt đầu tô màu ký tự I,
bạn phải để keyframe này không được tô màu gì hết. Sau đó mới bắt đầu thực hiện tiếp việc tô
màu cho ký tự I.
Nếu bạn tô màu mà thấy rằng lớp màu vừa tô nằm bên dưới đoạn cần tô hay nằm bên
dưới lớp ký tự thì bạn phải tiến hành tô lại thao tác vừa thực hiện.

Tô màu trên ký tự T tại keyframe thứ 52
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

314

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

Chuổi ký tự sau khi việc tô màu kết thúc

16. Bây giờ bạn sẽ chèn biểu tượng cây viết vào vùng làm
việc hiện hành bằng cách chọn trên trình đơn Help >
Samples > Writing Pen trong Flash 4 hoặc bạn có thể
vẽ một cây bút rất đơn giản.
17. Nếu bạn có Flash 4, hãy kích hoạt file này và chọn cây
viết mẫu Writing Pen bằng cách vào trình đơn
Window > Library (hoặc nhấn tổ hợp phím Ctrl + L)
cửa sổ nhỏ Library xuất hiện. Tại mục Name, nhấp
phải chuột vào chọn mục Pen, xuất hiện biểu tượng
cây viết trong vùng xem trùc tại cửa sổ thư viện.

18. Chọn trên trình đơn Insert > Layer để tạo một Layer mới và đặt tên cho Layer này là
Layer Cay Viet. Sau đó kéo biểu tượng cây viết vào trong vùng làm việc tại file đang
thực hiện đoạn phim. Bây giờ bạn sẽ thấy cây viết xuất hiện trong vùng làm việc với
kích thước quá lớn so với vùng làm việc.

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

315

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

Đối tượng cây viết xuất hiện trong vùng làm việc

19. Đảm bảo rằng đối tượng cây viết đang được chọn. Bây giờ bạn sẽ bắt đầu hiệu chỉnh cây
viết cho phù hợp với kích thước vùng làm việc. Chọn công cụ Arrow Tool trên hộp công
cụ và nhấp chuột vào chọn công cụ Scale trong vùng công cụ bổ sung bên dưới tại mục
Options.

20. Sau đó bạn kéo các handle điều khiển tại các góc đối tượng đang được chọn để có được
kích thước đối tượng thích hợp.

Cây viết sau khi được thay đối kích thước

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

316

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

21. Di chuyển biểu tượng cây viết sao cho ngòi viết nằm chính xác tại điểm bắt đầu của
chuỗi ký tự tại keyframe thứ nhất trên Layer Cay Viet. Sau đó nhấn phím F6 để tạo ra
keyframe thứ 2.

Chú ý : Bạn có thể dùng công cụ Arrow Tool, chọn công cụ Rotate trong mục chọn Options
bên dưới bảng công cụ. Sau đó bạn có thể xoay cây viết này theo vò trí mong muốn. Hơn thế
nữa bạn muốn tạo cho cây viết chuyển động uyển chuyển khi diễn hoạt chúng trong Flash
Player.

22. Di chuyển cây viết đến vò trí bắt đầu vùng màu tô trên ký tự tại keyframe thứ 2 trên
Layer Cay Viet.

23. Bây giờ bạn nhấn phím F6 tiếp tục để tạo mới keyframe thứ 3. Di chuyển ngòi viết đến
vò trí kết thúc vùng màu tô thứ nhất trên ký tự đầu tiên của chữ “DIRECTOR”. Sau đó
nhấn phím F6 tiếp tục để tạo ra keyframe thứ 4. Bạn cũng di chuyển ngòi viết đến vò trí
kết thúc đoạn tô màu thứ 2. Trong khi đó bạn có thể xoay cây viết theo hướng thích hợp
mong muốn.
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

317

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 14

Ngòi viết tại vò trí kết thúc đoạn tô màu thứ nhất (ảnh trái) trong keyframe thứ 3 và đoạn tô màu
thứ hai tại keyframe thứ 4 (ảnh phải)

24. Bạn lặp lại bước 23 ở trên cho các keyframe tiếp theo cho đến hết chuỗi ký tự.
Chú ý : Trong quá trình tạo các hành động cho đối tượng, bạn nên chú ý đến việc chỉnh sửa
góc độ của ngòi viết sao cho phù hợp với từng nét chữ trên vùng màu tô khi chúng thể hiện trên
đoạn phim.

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

318

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 8

CÁCH DÙNG CÁC SYMBOL VÀ INSTANCE
TỔNG QUAN VỀ CÁCH DÙNG CÁC SYMBOL VÀ INSTANCE
Một Symbol là một ảnh đồ họa, nút hay một đoạn Movie Clip mà bạn tạo ra và sau đó
dùng lại trong đoạn phim này và các đoạn phim khác. Bất kỳ Symbol nào bạn tạo ra sẽ tự động
trở thành một phần trong thư viện. Một Instance (sự kiện) là một bản sao của Symbol nằm trong
vùng Stage hoặc lồng trong một Symbol khác. Một Instance có thể khác nhau về màu sắc, kích
thước và chức năng so với Symbol của nó. Khi bạn hiệu chỉnh một Symbol, tất cả các Instance
của Symbol này sẽ được cập nhật. Nhưng khi bạn hiệu chỉnh một Instance của một Symbol thì
chỉ có Symbol đó được cập nhật.
Chú ý : Bạn có thể tạo ra các Symbol font trong Flash.
Việc sử dụng các Symbol trong đoạn phim sẽ làm giảm kích thước file. Việc lưu nhiều
Instance của một Symbol đòi hỏi tốn ít khoảng trống hơn việc lưu một vùng mô tả của một

thành phần cho mỗi sự kiện. Chẳng hạn như bạn có thể làm giảm kích thước file của đoạn phim
nếu bạn chuyển đổi các ảnh tónh như ảnh nền Background thành các Symbol mà sau đó bạn sẽ
dùng lại. Ngoài ra việc sử dụng các Symbol có thể làm làm chuyển động nhanh đoạn phim phát
lại vì một Symbol cần được tải xuống trong trình duyệt chỉ một lần. Ngoài ra việc sử dụng các
Symbol có thể cho phép bạn chia sẽ các ảnh và các thành phần khác như đoạn Movie Clips
hoặc âm thanh trong Flash movies. Bạn có thể nhóm các Symbol vào trong một Shared Library
và kết nối đến các mục trong Shared Library từ bất kỳ Flash movies nào mà không cần phải
nhập vào các mục Item vào trong đoạn phim. Để biết thêm về cách dùng các Symbol và
Instance, bạn hãy chọn trên trình đơn Help > Lessons > Symbols để biết thêm chi tiết (bằng
tiếng Anh) hay xem giáo trình thiết kế Web : Phần bài tập –Tự học Macromedia Flash bằng
hình ảnh.

Một Symbol trong thư viện và hai Instance trong vùng Stage
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

165

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 8

CÁC LOẠI HÀNH VI (BEHAVIOR) CỦA SYMBOL
Mỗi Symbol có một Timeline và Stage duy nhất. Khi bạn tạo ra một Symbol, bạn chọn
cho Symbol đó có hành vi như thế nào phụ thuộc vào khi bạn dùng nó trong đoạn phim.
Dùng các Graphic Symbol (biểu tượng đồ họa) đối với các ảnh tónh và

tạo ra các bộ phận chuyển động có thể sử dụng lại được liên kết đến
Timeline của đoạn phim chính. Những Graphic Symbol hoạt động đồng
bộ với Timeline của đoạn phim chính. Các điều khiển và âm thanh
tương tác sẽ không hoạt động trong một Graphic Symbol chuyển động.
Sử dụng các Symbol nút (Button Symbol) để tạo ra các nút tương tác khi
nhấp chuột, cuộn hoặc các hành động khác. Bạn xác đònh ảnh đồ họa
kết hợp với nhiều trạng thái nút khác nhau và sau đó gán hành động cho
Instance nút này.
Dùng các Symbol Movie Clip để tạo ra các bộ phận chuyển động. Các
Movie Clip có nhiều frame riêng biệt trong Timeline và chúng diễn
hoạt độc lập với Timeline của đoạn phim chính — Bạn có thể nghó rằng
chúng chỉ là các đoạn phim nhỏ nằm bên trong một đoạn phim chính, có
thể có các điều khiển tương tác, âm thanh và ngay cả các Instance khác
của Movie Clip. Ngoài ra bạn cũng có thể đặt các Instance của Movie
Clip vào bên trong Timeline của một Symbol nút để tạo ra các nút
chuyển động.
Bạn có thể gán các Clip Parameter (các biến giá trò) vào một Movie Clip để tạo ra
một đoạn “Smart” Clip (Clip thông minh). Ngoài ra bạn cũng có thể thêm các Action
cho Clip và các tập lệnh (Script) vào Smart Clip để tạo ra các thành phần giao diện
như — Các nút Radio, trình đơn xổ xuống hoặc các lời chú thích cho công cụ
(Tooltip) đáp lại khi bạn nhấp chuột hoặc dùng các sự kiện khác. Để biết rõ hơn về
phần này, bạn có thể xem mục trợ giúp Action Script Help.

Chú ý : Các Symbol Movie Clip chuyển động sẽ không hoạt động trong môi trường Flash
Authoring. Để xem được các Symbol Movie Clip chuyển động này bạn hãy chọn trên trình đơn
Control > Test Movie hoặc trình đơn Control > Test Scene.
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

166

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 8

TẠO RA CÁC SYMBOL
Bạn có thể tạo ra các Symbol từ các đối tượng đã chọn trong vùng Stage hoặc có thể tạo
ra một Symbol rỗng hoặc nhập vào nội dung trong chế độ Symbol-editing. Các Symbol có thể
có tất cả các chức năng mà bạn tạo ra trong Flash bao gồm chức năng chuyển động.
Bằng cách dùng các Symbol chuyển động, bạn có thể tạo ra nhiều đoạn phim chuyển
động trong khi kích thước file rất nhỏ. Bạn phải cân nhắc việc tạo ra các Symbol chuyển động
khi có một Action lập lại hay tuần hoàn liên tục chẳng hạn như con chim bay lên và xuống.
Tạo ra một Symbol mới với đối tượng được chọn:
1. Chọn một hay nhiều đối tượng trong vùng Stage và chọn trên trình đơn Insert >
Convert to Symbol.
2. Trong hộp thoại Symbol Properties, nhập vào tên của Symbol và chọn mục Behavior
cho Symbol đó như : Movie Clip, Button hay Graphic.

3. Chọn xong nhấp OK.
Flash sẽ thêm Symbol vào trong thư viện. Vùng chọn trong vùng Stage trở thành một
Instance của Symbol. Bạn không thể hiệu chỉnh trực tiếp đối tượng trong vùng Stage được nữa
mà bạn phải mở nó trong chế độ Symbol-editing. Bạn có thể xem mục “Hiệu chỉnh các
Symbol” để biết thêm chi tiết.
Tạo ra một Symbol rỗng mới:
1. Đảm bảo rằng không có đối tượng nào được chọn trong vùng Stage và bạn có thể
thực hiện một trong những thao tác như sau:

Chọn trên trình đơn Insert > New
Symbol.
Nhấp chuột vào nút New Symbol
tại góc trái phía dưới trong cửa sổ
Library.

Chọn lệnh New Symbol trong trình đơn Library Options tại góc phải phía trên
trong cửa sổ Library.
TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

167

BIÊN SOẠN : KS PHẠM QUANG HUY


.

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH

CHƯƠNG 8

2. Trong hộp thoại Symbol Properties, nhập vào tên của Symbol và chọn mục
Behavior cho Symbol đó như : Movie Clip, Button hay Graphic.

3. Nhấp OK. Flash thêm các Symbol vào thư viện và chuyển các Symbol này sang chế
độ Symbol-editing. Trong chế độ Symbol-editing này, tên của các Symbol xuất hiện
tại góc trái phía trên của cửa sổ, phía trên thanh thước Timeline và có dấu cộng trên
Instance cho biết Instance này đã có điểm khai báo (Registration Point).

TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA

168

BIÊN SOẠN : KS PHẠM QUANG HUY