Tài liệu Thiết kế giao diện với Flash 5 phần 1 docx

THIẾT KẾ GIAO DIỆN VỚI FLASH 5




Độ khó: 5/10
Bài tập thực hành trên nền Flash 5 nếu bạn dùng các phiên bản Flash mới hơn như Flash MX
2004, Flash 8 việc thực hành không ảnh hưởng nhiều.

Trong bài thực hành này, bạn sẽ tạo ra giao diện của trang chủ cho giáo trình điện tử “ Tự
học Flash”. Các bước thực hiện giao diện này được mô tả chi tiết như sau:


BẠN SẼ TẠO RA ĐOẠN PHIM CHUYỂN ĐỘNG
Trang Web chủ này trông rất sinh động với hàng chữ chính là Giáo trình điện tử Flash 5
cùng với Logo STK ở góc trái phía trên và các chữ Tủ sách STK xuất hiện ở góc phải phía
trên tự động chuyển màu, phía dưới là một vệt màu mô tả việc nạp chương trình lần lượt
xuất hiện từ trái sang phải minh họa cho việc nạp chương trình. Điểm nổi bật và khó thực
hiện nhất cho trang web nhưng cũng là trọng tâm của việc thi
ết kế giao diện này là: Khi di
chuyển chuột ngang qua chữ Flash 5 trong trình duyệt Internet Explorer thì có các hàng chữ
Xem thao tác bằng hình ảnh, Học nhanh chóng dễ dàng, Ứng dụng ngay những gì đã học
hay các sao băng rơi xuống cùng với hiệu ứng âm thanh rất sống động.

Để tạo ra giao diện Flash như trên các bước được tiến hành như sau: Khởi động Flash, tạo
file mới có tên index, nhấp chọn tiếp vào trình đơn Modify > Movie để xác định kích thước
của đoạn phim là 700 x 360. (Trong thiết kế Web trang chủ nên đặt tên là Index hay
Homepage).


Nhấp chuột tiếp vào hộp màu Background Color để chọn màu đen cho lớp màu nền.

Bây giờ, bạn hãy tạo chuyển động cho Logo STK, đối với ký tự này bạn có thể vẽ trực tiếp
trong Flash, CorelDraw hay Illustrator. Nếu vẽ trong CorelDraw, hãy xuất đối tượng này
sang định dạng .ai (Illustrator) sau đó nhập vào Flash vì Flash không cho phép nhập định
dạng của CorelDRAW. Nhấp chuột chọn trên trình đơn Insert > New Symbol, chọn các thuộc
tính trong hộp thoại Symbol Properties như sau:


Chú ý: Logo STK này là kết quả từ bài tập “Vẽ Logo STK”.

Nhấp chọn tiếp vào trình đơn File > Import hoặc nhấn phím tổ hợp Ctrl + R, nhấp chọn file
Logo STK với định dạng .ai trong hộp thoại Import để nhập vào sau đó nhấp chuột vào nút
Open.


Ghi chú: Do trong file giao diện này xuất hiện trong nền đen, do vậy tất cả các màu tô
lẫn màu nền của đối tượng bạn chọn đều hiện lên rất rõ và cũng rất dễ chọn màu.


Bây giờ, tạo chuyển động thay đổi màu cho Logo này bằng cách nhấp chọn vào frame
200 từ Layer 1 và nhấn phím F6, nhấp phải chuột trở lại keyframe thứ nhất và chọn lệnh
Create Motion Tween. (Cần nhờ Logo này có màu đỏ).




Lúc này, một mũi tên chạy suốt từ Frame 1 tới Frame 200. Nhấn phím F6 tại frame 50 và
mở bảng Effects (chọn trên trình đơn Window > Panels > Effects).

Bảng Effects xuất hiện, chọn hiệu ứng Tint trong bảng này. Nhấp chọn màu xanh dương
(Blue) trong bảng màu.


Lặp lại bước trên cho keyframe 100, 150 và 200. Tại những keyframe này bạn lần lượt chọn
hiệu ứng màu xanh lá cây (Green), màu vàng đậm và màu trắng.


Nhấp chuột vào vùng Scene1 để trở về giao diện chính của đoạn phim.

Tiến hành nhấn phím Ctrl + L để xuất hiện cửa sổ thư viện.

Kéo biểu tượng Logo STK trong cửa sổ thư viện vào vùng làm việc và đặt tại góc trái phía
trên của vùng làm việc. Sau khi đặt Logo STK vào vị trí thích hợp trên màn hình nhấn phím
Ctrl + Enter để xem Logo diễn hoạt.

Ghi chú: Các bạn có thể tự thiết kế một Logo nào khác
cũng như chọn màu theo ý thay vì dùng Logo của STK cũng như không nhất thiết phải theo
các hướng dẫn trong sách. Đơn giản nhất là chọn font chữ thích hợp sau đó nhập trực tiếp
chữ STK từ bàn phím.


Nhấp chuột trở lại vùng làm việc chính, tạo mới symbol có tên Tu_sach STK trong hộp thoại
Symbol Properties (nhấn tổ hợp phím Ctrl + F8).


Dùng công cụ Text Tool nhập vào ký tự “TỦ SÁCH STK”. Với các tham số như trong hình
dưới. Có thể chọn màu mong muốn cho ký tự (nhớ chỉ dùng Vietkey 4.09 không dùng
Vietkey 2000). Nhấn phím F6 tại frame 200, nhấp phải chuột trở lại keyframe thứ nhất và
chọn lệnh Create Motion Tween.

Nhấn phím F6 tại frame 50 và chọn hiệu ứng màu xám trong bảng Effects có tên hiệu ứng
Tint.


Lặp lại bước trên tại frame 100, 150 và 200 với màu chọn là màu đỏ, xanh dương và xanh
lá. Cuối cùng nhấn phím Enter để xem đoạn phim diễn hoạt.




