Giáo trình hình thành ứng dụng điều khiển công cụ oval tool để tạo chuyển động trong scene p1 pdf

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


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 BIÊN SOẠN : KS PHẠM QUANG HUY
298
Giáo trình hình thành ứng dụng điều khiển cơng
cụ oval tool để tạo 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 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 BIÊN SOẠN : KS PHẠM QUANG HUY
299
.
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 BIÊN SOẠN : KS PHẠM QUANG HUY
300
.
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 BIÊN SOẠN : KS PHẠM QUANG HUY
301
.
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ú y
ù : 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 BIÊN SOẠN : KS PHẠM QUANG HUY
302
.
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 BIÊN SOẠN : KS PHẠM QUANG HUY
303
.
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 BIÊN SOẠN : KS PHẠM QUANG HUY
304
.
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 BIÊN SOẠN : KS PHẠM QUANG HUY
305
.
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 BIÊN SOẠN : KS PHẠM QUANG HUY
306
.
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 BIÊN SOẠN : KS PHẠM QUANG HUY
307
.